frappe-ui 0.1.13 → 0.1.15

package/package.json

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

package/src/components/Dialog.vue

@@ -149,7 +149,7 @@
 </template>
 
 <script>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import {
   Dialog as HDialog,
   DialogPanel,
@@ -194,34 +194,27 @@ export default {
       handler(actions) {
         if (!actions) return
         this.dialogActions = actions.map((action) => {
-          let _action = {
+          let loading = ref(false)
+          return {
             ...action,
-            loading: action.loading || false,
-            _onClick: action.onClick,
-            onClick: () => this.handleAction(_action),
+            loading,
+            onClick: !action.onClick
+              ? this.close
+              : async () => {
+                  loading.value = true
+                  try {
+                    await action.onClick()
+                  } finally {
+                    loading.value = false
+                  }
+                },
           }
-          return _action
         })
       },
       immediate: true,
     },
   },
   methods: {
-    handleAction(action) {
-      if (action._onClick && typeof action._onClick === 'function') {
-        action.loading = true
-        let result = action._onClick({ close: this.close })
-        if (result && result.then) {
-          result
-            .then(() => (action.loading = false))
-            .catch(() => (action.loading = false))
-        } else {
-          action.loading = false
-        }
-      } else {
-        this.close()
-      }
-    },
     close() {
       this.open = false
     },

package/src/components/FormControl.story.vue

@@ -54,6 +54,19 @@ const variants = ['subtle', 'outline']
         />
       </div>
     </Variant>
+    <Variant title="select">
+      <div class="p-2">
+        <FormControl
+          type="autocomplete"
+          :options="[
+            { label: 'One', value: '1' },
+            { label: 'Two', value: '2' },
+            { label: 'Three', value: '3' },
+          ]"
+          v-bind="state"
+        />
+      </div>
+    </Variant>
     <Variant title="checkbox">
       <div class="p-2">
         <FormControl type="checkbox" v-bind="state" />

package/src/components/FormControl.vue

@@ -12,6 +12,17 @@
         <slot name="prefix" />
       </template>
     </Select>
+    <Autocomplete
+      v-else-if="type === 'autocomplete'"
+      v-bind="{ ...controlAttrs }"
+    >
+      <template #prefix v-if="$slots.prefix">
+        <slot name="prefix" />
+      </template>
+      <template #item-prefix="itemPrefixProps" v-if="$slots['item-prefix']">
+        <slot name="item-prefix" v-bind="itemPrefixProps" />
+      </template>
+    </Autocomplete>
     <Textarea
       v-else-if="type === 'textarea'"
       :id="id"
@@ -43,11 +54,12 @@ import type { TextInputTypes } from './types/TextInput'
 import Select from './Select.vue'
 import Textarea from './Textarea.vue'
 import Checkbox from './Checkbox.vue'
+import Autocomplete from './Autocomplete.vue'
 
 interface FormControlProps {
   label?: string
   description?: string
-  type?: TextInputTypes | 'textarea' | 'select' | 'checkbox'
+  type?: TextInputTypes | 'textarea' | 'select' | 'checkbox' | 'autocomplete'
   size?: 'sm' | 'md'
 }
 

package/src/components/Tabs.story.md

@@ -0,0 +1,21 @@
+## Props
+
+### Tabs
+
+It is an array of objects which contains the following attributes:
+
+1. `label` is the name of the tab, it is required.
+2. `icon` is the icon to be shown in the tab, it accept component and it is
+   optional.
+3. You can add more attributes which can be used for custom rendering in the tab
+   header or content.
+
+### Options
+
+Currently, it has only one option `indicatorLeft` which is used to set the left
+position of the indicator in case of custom rendering. It is optional and
+default value is `20`.
+
+## v-model
+
+It is used to set the active tab or change the active tab. It is required.

package/src/components/Tabs.vue

@@ -27,8 +27,8 @@
       </Tab>
       <div
         ref="indicator"
-        class="absolute -bottom-px h-px bg-gray-900"
-        :style="{ left: `${indicatorLeftValue}px` }"
+        class="absolute -bottom-px h-px bg-gray-900 transition-all duration-300 ease-in-out"
+        :style="{ left: `${indicatorLeft}px` }"
       />
     </TabList>
     <TabPanels class="flex flex-1 overflow-hidden">
@@ -45,7 +45,6 @@
 
 <script setup>
 import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
-import { TransitionPresets, useTransition } from '@vueuse/core'
 import { ref, watch, computed, onMounted, nextTick } from 'vue'
 
 const props = defineProps({
@@ -57,6 +56,12 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  options: {
+    type: Object,
+    default: () => ({
+      indicatorLeft: 20,
+    }),
+  },
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -70,12 +75,7 @@ const tabRef = ref([])
 const indicator = ref(null)
 const tabsLength = ref(props.tabs?.length)
 
-let indicatorLeft = ref(0)
-
-const indicatorLeftValue = useTransition(indicatorLeft, {
-  duration: 250,
-  ease: TransitionPresets.easeOutCubic,
-})
+const indicatorLeft = ref(props.options?.indicatorLeft)
 
 function moveIndicator(index) {
   if (index >= tabsLength.value) {

package/src/resources/documentResource.js

@@ -28,6 +28,8 @@ export function createDocumentResource(options, vm) {
     getConfig('defaultDocUpdateUrl') || 'frappe.client.set_value'
   let defaultDocDeleteUrl =
     getConfig('defaultDocDeleteUrl') || 'frappe.client.delete'
+  let defaultRunDocMethodUrl =
+    getConfig('defaultRunDocMethodUrl') || 'run_doc_method'
 
   let setValueOptions = {
     url: defaultDocUpdateUrl,
@@ -153,7 +155,7 @@ export function createDocumentResource(options, vm) {
     let { method, onSuccess, ...otherOptions } = methodOptions
     out[methodKey] = createResource(
       {
-        url: 'run_doc_method',
+        url: defaultRunDocMethodUrl,
         makeParams(values) {
           return {
             dt: out.doctype,

package/src/resources/listResource.js

@@ -30,6 +30,8 @@ export function createListResource(options, vm) {
     getConfig('defaultDocUpdateUrl') || 'frappe.client.set_value'
   let defaultDocDeleteUrl =
     getConfig('defaultDocDeleteUrl') || 'frappe.client.delete'
+  let defaultRunDocMethodUrl =
+    getConfig('defaultRunDocMethodUrl') || 'run_doc_method'
 
   let out = reactive({
     doctype: options.doctype,
@@ -165,7 +167,7 @@ export function createListResource(options, vm) {
     ),
     runDocMethod: createResource(
       {
-        url: 'run_doc_method',
+        url: defaultRunDocMethodUrl,
         makeParams({ method, name, ...values }) {
           return {
             dt: out.doctype,

package/src/utils/fileUploadHandler.ts

@@ -109,12 +109,16 @@ class FileUploadHandler {
         form_data.append('file_url', options.file_url)
       }
 
-      if (options.doctype && options.docname) {
+      if (options.doctype) {
         form_data.append('doctype', options.doctype)
+      }
+
+      if (options.docname) {
         form_data.append('docname', options.docname)
-        if (options.fieldname) {
-          form_data.append('fieldname', options.fieldname)
-        }
+      }
+
+      if (options.fieldname) {
+        form_data.append('fieldname', options.fieldname)
       }
 
       if (options.method) {