frappe-ui 0.1.14 → 0.1.16

package/package.json

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

package/readme.md

@@ -52,9 +52,11 @@ module.exports = {
 }
 ```
 
+Now, you can import needed components and start using it:
+
 ```html
 <template>
-  <button>Click me</button>
+  <Button>Click me</Button>
 </template>
 <script>
   import { Button } from 'frappe-ui'

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/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

@@ -28,7 +28,8 @@
       <div
         ref="indicator"
         class="absolute -bottom-px h-px bg-gray-900"
-        :style="{ left: `${indicatorLeftValue}px` }"
+        :class="transitionClass"
+        :style="{ left: `${indicatorLeft}px` }"
       />
     </TabList>
     <TabPanels class="flex flex-1 overflow-hidden">
@@ -45,7 +46,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 +57,12 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  options: {
+    type: Object,
+    default: () => ({
+      indicatorLeft: 20,
+    }),
+  },
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -70,12 +76,8 @@ 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)
+const transitionClass = ref('')
 
 function moveIndicator(index) {
   if (index >= tabsLength.value) {
@@ -93,5 +95,10 @@ watch(changedIndex, (index) => {
   nextTick(() => moveIndicator(index))
 })
 
-onMounted(() => moveIndicator(changedIndex.value))
+onMounted(() => {
+  moveIndicator(changedIndex.value)
+  nextTick(() => {
+    transitionClass.value = 'transition-all duration-300 ease-in-out'
+  })
+})
 </script>

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) {