frappe-ui 0.0.33 → 0.0.35

package/package.json

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

package/src/components/Autocomplete.vue

@@ -0,0 +1,100 @@
+<template>
+  <Combobox v-model="selectedValue" v-slot="{ open: isComboBoxOpen }" nullable>
+    <Popover class="w-full">
+      <template #target="{ open: openPopover }">
+        <ComboboxInput
+          :displayValue="(option) => option?.label"
+          :class="['w-full form-input', { 'rounded-b-none': isComboBoxOpen }]"
+          type="text"
+          @change="
+            (e) => {
+              query = e.target.value
+              openPopover()
+            }
+          "
+          @focus="openPopover"
+          autocomplete="off"
+        />
+      </template>
+      <template #body>
+        <ComboboxOptions
+          :class="[
+            'p-1.5 bg-white rounded-md shadow-md',
+            { 'rounded-t-none': isComboBoxOpen },
+          ]"
+        >
+          <ComboboxOption
+            as="template"
+            v-for="option in filteredOptions"
+            :key="option.value"
+            :value="option"
+            v-slot="{ active, selected }"
+          >
+            <li
+              :class="[
+                'px-2.5 py-1.5 rounded-md text-base',
+                { 'bg-gray-100': active },
+              ]"
+            >
+              {{ option.label }}
+            </li>
+          </ComboboxOption>
+          <li
+            v-if="filteredOptions.length == 0"
+            class="px-2.5 py-1.5 rounded-md text-base text-gray-600"
+          >
+            No results found
+          </li>
+        </ComboboxOptions>
+      </template>
+    </Popover>
+  </Combobox>
+</template>
+<script>
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxOptions,
+  ComboboxOption,
+} from '@headlessui/vue'
+import Popover from './Popover.vue'
+
+export default {
+  name: 'Autocomplete',
+  props: ['modelValue', 'options'],
+  emits: ['update:modelValue'],
+  components: {
+    Popover,
+    Combobox,
+    ComboboxInput,
+    ComboboxOptions,
+    ComboboxOption,
+  },
+  data() {
+    return {
+      query: '',
+    }
+  },
+  computed: {
+    selectedValue: {
+      get() {
+        return this.modelValue
+      },
+      set(val) {
+        this.$emit('update:modelValue', val)
+      },
+    },
+    filteredOptions() {
+      if (!this.query) {
+        return this.options
+      }
+      return this.options.filter((option) => {
+        let searchTexts = [option.label, option.value]
+        return searchTexts.some((text) =>
+          (text || '').toLowerCase().includes(this.query.toLowerCase())
+        )
+      })
+    },
+  },
+}
+</script>

package/src/components/FeatherIcon.vue

@@ -12,10 +12,11 @@ export default {
       validator(value) {
         const valid = validIcons.includes(value)
         if (!valid) {
-          console.warn(
-            `name property for feather-icon must be one of `,
-            validIcons
+          console.groupCollapsed(
+            '[frappe-ui] name property for feather-icon must be one of '
           )
+          console.dir(validIcons)
+          console.groupEnd()
         }
         return valid
       },
@@ -31,6 +32,9 @@ export default {
   },
   render() {
     let icon = feather.icons[this.name]
+    if (!icon) {
+      icon = feather.icons['circle']
+    }
     return h(
       'svg',
       mergeProps(

package/src/components/Popover.vue

@@ -2,7 +2,7 @@
   <div ref="reference">
     <div
       ref="target"
-      class="inline-block"
+      :class="['inline-block', $attrs.class]"
       @click="updatePosition"
       @focusin="updatePosition"
       @keydown="updatePosition"
@@ -53,6 +53,7 @@ import { createPopper } from '@popperjs/core'
 
 export default {
   name: 'Popover',
+  inheritAttrs: false,
   props: {
     show: {
       default: undefined,

package/src/index.js

@@ -1,5 +1,6 @@
 // components
 export { default as Alert } from './components/Alert.vue'
+export { default as Autocomplete } from './components/Autocomplete.vue'
 export { default as Avatar } from './components/Avatar.vue'
 export { default as Badge } from './components/Badge.vue'
 export { default as Button } from './components/Button.vue'

package/src/utils/resources.js

@@ -67,14 +67,14 @@ export function createResource(options, vm, getResource) {
       try {
         invalidMessage = await validateFunction.call(vm, out.params)
         if (invalidMessage && typeof invalidMessage == 'string') {
+          out.loading = false
           let error = new Error(invalidMessage)
           handleError(error, errorFunctions)
-          out.loading = false
           return
         }
       } catch (error) {
-        handleError(error, errorFunctions)
         out.loading = false
+        handleError(error, errorFunctions)
         return
       }
     }
@@ -92,6 +92,7 @@ export function createResource(options, vm, getResource) {
       handleError(error, errorFunctions)
     }
     out.loading = false
+    return out.data
   }
 
   function update({ method, params, auto }) {
@@ -117,7 +118,6 @@ export function createResource(options, vm, getResource) {
   }
 
   function handleError(error, errorFunctions) {
-    console.error(error)
     if (out.previousData) {
       out.data = out.previousData
     }
@@ -127,6 +127,7 @@ export function createResource(options, vm, getResource) {
         fn.call(vm, error)
       }
     }
+    throw error
   }
 
   // usage: