Merge branch 'master' of https://github.com/frappe/frappejs

ui/components/ModelTable.vue

@@ -159,7 +159,7 @@ export default {
 }
 </script>
 <style lang="scss">
-@import "frappe-datatable/dist/frappe-datatable.css";
+@import "~frappe-datatable/dist/frappe-datatable.css";
 
 .datatable-wrapper {
   .form-control {

ui/components/Navbar.vue

@@ -35,4 +35,3 @@ export default {
   }
 };
 </script>
-

ui/components/controls/Autocomplete.vue

@@ -57,6 +57,7 @@ export default {
     },
     filter() {
       // return a function that filters list suggestions based on input
+      return Awesomplete.FILTER_CONTAINS
     }
   }
 };

ui/components/controls/Base.vue

@@ -8,7 +8,7 @@ export default {
     },
     props: {
         docfield: Object,
-        value: [String, Number, Array],
+        value: [String, Number, Array, FileList],
         onlyInput: {
             type: Boolean,
             default: false
@@ -93,6 +93,9 @@ export default {
             const isValid = await this.validate(value);
             this.$refs.input.setCustomValidity(isValid === false ? 'error' : '');
             this.$emit('change', value);
+        },
+        getValueFromInput(e) {
+
         },
         validate() {
             return true;

ui/components/controls/BaseDate.vue

@@ -0,0 +1,31 @@
+<template>
+  <div :class="{'form-group': !onlyInput}">
+    <label v-if="!onlyInput">{{ docfield.label }}</label>
+    <flat-pickr
+      class="form-control"
+      :value="value"
+      :config="config"
+      @on-change="emitChange">
+    </flat-pickr>
+  </div>
+</template>
+<script>
+import flatPickr from 'vue-flatpickr-component';
+import Data from './Data';
+
+export default {
+  extends: Data,
+  props: ['config'],
+  components: {
+    flatPickr
+  },
+  methods: {
+    emitChange(dates, dateString) {
+      this.$emit('change', dateString);
+    }
+  }
+};
+</script>
+<style lang="scss">
+@import "~flatpickr/dist/flatpickr.css";
+</style>

ui/components/controls/Date.vue

@@ -1,29 +1,13 @@
-<template>
-  <div :class="{'form-group': !onlyInput}">
-    <label v-if="!onlyInput">{{ docfield.label }}</label>
-    <flat-pickr
-      :value="value"
-      class="form-control"
-      @on-change="emitChange">
-    </flat-pickr>
-  </div>
-</template>
 <script>
-import flatPickr from 'vue-flatpickr-component';
+import BaseDate from './BaseDate';
-import Data from './Data';
 
 export default {
-  extends: Data,
+  extends: BaseDate,
-  components: {
+  props: {
-    flatPickr
+    config: {
-  },
+      type: Object,
-  methods: {
+      default: () => ({})
-    emitChange(dates, dateString) {
-      this.$emit('change', dateString);
     }
   }
 };
 </script>
-<style lang="scss">
-@import "flatpickr/dist/flatpickr.css";
-</style>

ui/components/controls/File.vue

@@ -10,7 +10,7 @@ export default {
   },
   methods: {
     getWrapperElement(h) {
-      let fileName = 'Choose a file..';
+      let fileName = this._('Choose a file..');
 
       if (this.$refs.input && this.$refs.input.files.length) {
         fileName = this.$refs.input.files[0].name;
@@ -39,9 +39,18 @@ export default {
         type: 'file',
         value: this.value,
         required: this.docfield.required,
-        disabled: this.disabled
+        disabled: this.disabled,
-      }
+        webkitdirectory: this.docfield.directory,
-    }
+        directory: this.docfield.directory
+      };
+    },
+    getInputListeners() {
+      return {
+        change: e => {
+          this.handleChange(e.target.files);
+        }
+      };
     }
   }
+};
 </script>

ui/components/controls/Time.vue

@@ -1,39 +1,16 @@
-<template>
-  <div :class="{ 'form-group': !onlyInput }">
-    <label v-if="!onlyInput">{{ docfield.label }}</label>
-    <flat-pickr
-      :value="value"
-      :config="config"
-      class="form-control"
-      @on-change="emitChange"
-    >
-    </flat-pickr>
-  </div>
-</template>
 <script>
-import flatPickr from 'vue-flatpickr-component';
+import BaseDate from './BaseDate';
-import Data from './Data';
 
 export default {
-  extends: Data,
+  extends: BaseDate,
-  data() {
+  props: {
-    return {
     config: {
+      type: Object,
+      default: () => ({
         enableTime: true,
         noCalendar: true
-      }
+      })
-    };
-  },
-  components: {
-    flatPickr
-  },
-  methods: {
-    emitChange(times, timeString) {
-      this.$emit('change', timeString);
     }
   }
 };
 </script>
-<style lang="scss">
-@import "flatpickr/dist/flatpickr.css";
-</style>

ui/plugins/frappeVue.js

@@ -0,0 +1,38 @@
+/**
+ * Vue Plugin that registers common UI elements
+ * like Button and Modal into the root Vue instance
+ */
+
+import frappe from 'frappejs';
+import NotFound from '../components/NotFound';
+import FeatherIcon from '../components/FeatherIcon';
+import FrappeControl from '../components/controls/FrappeControl';
+import Button from '../components/Button';
+import Indicator from '../components/Indicator';
+import modalPlugin from '../components/Modal/plugin';
+import formModalPlugin from '../plugins/formModal';
+
+export default function installFrappePlugin(Vue) {
+  Vue.component('not-found', NotFound);
+  Vue.component('feather-icon', FeatherIcon);
+  Vue.component('frappe-control', FrappeControl);
+  Vue.component('f-button', Button);
+  Vue.component('indicator', Indicator);
+
+  Vue.use(modalPlugin);
+  Vue.use(formModalPlugin);
+
+  Vue.mixin({
+    computed: {
+      frappe() {
+        return frappe;
+      }
+    },
+    methods: {
+      // global translation function in every component
+      _(...args) {
+        return frappe._(...args);
+      }
+    }
+  });
+}