added file widget

package.json

@@ -1,6 +1,6 @@
 {
   "name": "saleina-cms",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "author": {
     "name": "Zelalem Mekonen",
     "email": "[email protected]"

src/components/inc/media-preview.vue

@@ -14,7 +14,11 @@
             </template>
 
             <template v-else>
+
+                <h6 class="picker" v-if="picker" @click="$emit('input', sitePath)">{{ fileName }}</h6>
+
                 <h6>{{ fileName }}</h6>
+
             </template>
 
         </template>
@@ -155,6 +159,14 @@ export default {
     text-align: center;
 }
 
+h6 {
+    color: var(--green);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+}
+
 img {
     width: 100%;
     height: 100%;

src/components/widgets/file.vue

@@ -1,9 +1,113 @@
 <template>
-
+    <div class="image-input">
+
+        <media-library @input="input" :picker="true" @close="showMediaLibrary = false" v-show="showMediaLibrary" v-model="v"/>
+
+        <div class="input card">
+            <media-preview :previewOnly="true" :value="fileName" v-if="fileName"/>
+            <s-button @click.native="remove" v-if="fileName" class="danger min reverse">Remove File</s-button>
+            <s-button @click.native="showMediaLibrary = true" class="primary min">Pick File</s-button>
+        </div>
+
+        <label>{{ label }}</label>
+
+        <label class="error">{{ error }}</label>
+
+    </div>
 </template>
 
 <script>
+
+    import MediaLibrary from "../media";
+
     export default {
-        name: "file"
+        name: "file",
+        components: {
+            MediaLibrary
+        },
+        props: {
+            value: {
+                type: String
+            },
+            label: {
+                type: String,
+                required: true
+            },
+            error: {
+                type: String
+            }
+        },
+        data() {
+            return {
+                showMediaLibrary: false,
+                v: this.value
+            }
+        },
+        computed: {
+            
+            fileName() {
+
+                if (!this.v) return undefined;
+
+                let parts = this.v.split("/");
+
+                return parts[parts.length - 1];
+
+            }
+
+        },
+        methods: {
+
+            input() {
+
+                this.showMediaLibrary = false;
+
+                this.$emit("input", this.v);
+
+            },
+
+            remove() {
+
+                this.v = undefined;
+
+                this.$emit("input", undefined);
+
+            }
+        }
+
     };
-</script>
+</script>
+
+<style scoped>
+    
+.image-input {
+    min-height: 60px;
+    display: flex;
+    flex-direction: column-reverse;
+    margin: 10px;
+    text-align: right;
+    border-radius: 3px 3px 0 0;
+    position: relative;
+}
+
+.input.card {
+    display: block;
+    margin: 0;
+    box-shadow: none;
+    min-height: 55px;
+    border-radius: 0 3px 3px 3px;
+    border: 2px solid var(--label-background);
+    text-align: left;
+}
+
+button {
+    margin: 10px;
+    vertical-align: bottom;
+}
+
+.media-preview {
+    display: inline-block;
+    vertical-align: bottom;
+}
+
+</style>

website/content/docs/file.md

@@ -0,0 +1,20 @@
+---
+title: File
+group: widgets
+---
+
+The file widget allows editors to upload a file or select an existing one from the media library. The path to the file will be saved to the field as a string.
+
+- **Name:** `file`
+- **UI:** file picker button opens media gallery allowing to pick files; displays selected file name
+- **Data type:** file path string, based on `media_folder`/`public_folder` configuration
+- **Options:**
+  - `default`: accepts a file path string; defaults to null
+- **Example:**
+
+  ```yaml
+  - label: "Document"
+    name: "document"
+    widget: "file"
+    default: "/uploads/doc.pdf"
+  ```

website/content/docs/widgets.md

@@ -8,9 +8,6 @@ Widgets define the data type and interface for entry fields. Saleina CMS comes w
 
 Widgets are specified as collection fields in the Saleina CMS `config.yml` file. Note that [YAML syntax](https://en.wikipedia.org/wiki/YAML#Basic_components) allows lists and objects to be written in block or inline style, and the code samples below include a mix of both.
 
-To see working examples of all of the built-in widgets, try making a 'Kitchen Sink' collection item on the [CMS demo site](https://demo.saleinacms.org). (No login required: click the login button and the CMS will open.) You can refer to the demo [configuration code](https://github.com/saleina/saleinacms/blob/master/public/config.yml) to see how each field was configured.
-
-
 ## Common widget options
 
 The following options are available on all fields: