frappe-ui 0.0.35 → 0.0.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.0.35",
+  "version": "0.0.36",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {

package/src/components/Autocomplete.vue

@@ -3,7 +3,7 @@
     <Popover class="w-full">
       <template #target="{ open: openPopover }">
         <ComboboxInput
-          :displayValue="(option) => option?.label"
+          :displayValue="displayValue"
           :class="['w-full form-input', { 'rounded-b-none': isComboBoxOpen }]"
           type="text"
           @change="
@@ -12,16 +12,24 @@
               openPopover()
             }
           "
-          @focus="openPopover"
+          @focus="
+            () => {
+              openPopover()
+              showCombobox = true
+            }
+          "
+          @keydown.enter="showCombobox = false"
           autocomplete="off"
+          v-bind="$attrs"
         />
       </template>
       <template #body>
         <ComboboxOptions
           :class="[
-            'p-1.5 bg-white rounded-md shadow-md',
-            { 'rounded-t-none': isComboBoxOpen },
+            'p-1.5 bg-white rounded-md shadow-md rounded-t-none',
+            { hidden: !showCombobox },
           ]"
+          :static="true"
         >
           <ComboboxOption
             as="template"
@@ -61,8 +69,9 @@ import Popover from './Popover.vue'
 
 export default {
   name: 'Autocomplete',
-  props: ['modelValue', 'options'],
-  emits: ['update:modelValue'],
+  inheritAttrs: false,
+  props: ['modelValue', 'options', 'value'],
+  emits: ['update:modelValue', 'change'],
   components: {
     Popover,
     Combobox,
@@ -72,16 +81,20 @@ export default {
   },
   data() {
     return {
+      showCombobox: false,
       query: '',
     }
   },
   computed: {
+    valuePropPassed() {
+      return 'value' in this.$props && this.$props.value !== undefined
+    },
     selectedValue: {
       get() {
-        return this.modelValue
+        return this.valuePropPassed ? this.value : this.modelValue
       },
       set(val) {
-        this.$emit('update:modelValue', val)
+        this.$emit(this.valuePropPassed ? 'change' : 'update:modelValue', val)
       },
     },
     filteredOptions() {
@@ -96,5 +109,13 @@ export default {
       })
     },
   },
+  methods: {
+    displayValue(option) {
+      if (typeof option === 'string') {
+        return option
+      }
+      return option?.label
+    },
+  },
 }
 </script>

package/src/utils/resources.js

@@ -58,6 +58,10 @@ export function createResource(options, vm, getResource) {
       options.onFetch.call(vm, out.params)
     }
 
+    if (options.beforeSubmit) {
+      options.beforeSubmit.call(vm, out.params)
+    }
+
     let validateFunction = tempOptions.validate || options.validate
     let errorFunctions = [options.onError, tempOptions.onError]
     let successFunctions = [options.onSuccess, tempOptions.onSuccess]
@@ -174,11 +178,18 @@ export function createDocumentResource(options, vm) {
         fieldname: values,
       }
     },
+    beforeSubmit(params) {
+      out.previousDoc = JSON.stringify(out.doc)
+      Object.assign(out.doc, params.fieldname || {})
+    },
     onSuccess(data) {
       out.doc = transform(data)
       options.setValue?.onSuccess?.call(vm, data)
     },
-    onError: options.setValue?.onError,
+    onError(error) {
+      out.doc = JSON.parse(out.previousDoc)
+      options.setValue?.onError?.call(vm, error)
+    },
   }
 
   let out = reactive({