frappe-ui 0.0.26 → 0.0.27

package/package.json

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

package/src/components/Input.vue

@@ -49,6 +49,7 @@
         v-for="option in selectOptions"
         :key="option.value"
         :value="option.value"
+        :disabled="option.disabled || false"
         :selected="passedInputValue === option.value"
       >
         {{ option.label }}
@@ -159,16 +160,23 @@ export default {
       })
     },
     selectOptions() {
-      return this.options.map((option) => {
-        if (typeof option === 'string') {
-          return {
-            label: option,
-            value: option,
+      return this.options
+        .map((option) => {
+          if (typeof option === 'string') {
+            return {
+              label: option,
+              value: option,
+            }
           }
-        }
-        return option
-      })
+          return option
+        })
+        .filter(Boolean)
     },
   },
 }
 </script>
+<style>
+.form-select {
+  background-image: url("data:image/svg+xml;utf8,<svg fill='none' width='8' xmlns='http://www.w3.org/2000/svg' viewBox='-4 -2 16 16'><path d='M4.5 3.636 6.136 2l1.637 1.636M4.5 8.364 6.136 10l1.637-1.636' stroke='%23333C44' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+}
+</style>

package/src/components/Popover.vue

@@ -9,7 +9,7 @@
     >
       <slot
         name="target"
-        v-bind="{ togglePopover, updatePosition, open, close }"
+        v-bind="{ togglePopover, updatePosition, open, close, isOpen }"
       ></slot>
     </div>
     <teleport to="#frappeui-popper-root">
@@ -20,11 +20,19 @@
         :style="{ minWidth: targetWidth ? targetWidth + 'px' : null }"
         v-show="isOpen"
       >
-        <div v-if="!hideArrow" class="popover-arrow" ref="popover-arrow"></div>
-        <slot
-          name="content"
-          v-bind="{ togglePopover, updatePosition, open, close }"
-        ></slot>
+        <transition v-bind="transition">
+          <div v-show="isOpen">
+            <div
+              v-if="!hideArrow"
+              class="popover-arrow"
+              ref="popover-arrow"
+            ></div>
+            <slot
+              name="content"
+              v-bind="{ togglePopover, updatePosition, open, close, isOpen }"
+            ></slot>
+          </div>
+        </transition>
       </div>
     </teleport>
   </div>
@@ -49,6 +57,10 @@ export default {
       default: 'bottom-start',
     },
     popoverClass: [String, Object, Array],
+    transition: {
+      type: Object,
+      default: null,
+    },
   },
   emits: ['init', 'open', 'close'],
   watch: {

package/src/utils/resources.js

@@ -196,6 +196,7 @@ export function createDocumentResource(options, vm) {
         onSuccess(data) {
           out.doc = transform(data)
         },
+        onError: options.onError,
       },
       vm
     ),
@@ -287,8 +288,10 @@ function createListResource(options, vm, getResource) {
   if (!options.doctype) return
 
   let cacheKey = getCacheKey(options.cache)
-  if (listCache[cacheKey]) {
-    return listCache[cacheKey]
+  if (cacheKey) {
+    if (listCache[cacheKey]) {
+      return listCache[cacheKey]
+    }
   }
 
   let out = reactive({
@@ -298,6 +301,7 @@ function createListResource(options, vm, getResource) {
     order_by: options.order_by,
     start: options.start,
     limit: options.limit,
+    originalData: null,
     data: null,
     list: createResource(
       {
@@ -313,6 +317,7 @@ function createListResource(options, vm, getResource) {
           }
         },
         onSuccess(data) {
+          out.originalData = data
           out.data = transform(data)
           options.onSuccess?.call(vm, out.data)
         },
@@ -320,6 +325,37 @@ function createListResource(options, vm, getResource) {
       },
       vm
     ),
+    fetchOne: createResource(
+      {
+        method: 'frappe.client.get_list',
+        makeParams(name) {
+          return {
+            doctype: out.doctype,
+            fields: out.fields,
+            filters: { name },
+          }
+        },
+        onSuccess(data) {
+          if (data.length > 0 && out.originalData) {
+            let doc = data[0]
+            let index = out.originalData.findIndex((d) => d.name === doc.name)
+            out.originalData = out.originalData.filter(
+              (d) => d.name !== doc.name
+            )
+            out.originalData = [
+              out.originalData.slice(0, index),
+              data,
+              out.originalData.slice(index),
+            ].flat()
+          }
+
+          out.data = transform(out.originalData)
+          options.fetchOne?.onSuccess?.call(vm, out.data)
+        },
+        onError: options.fetchOne?.onError,
+      },
+      vm
+    ),
     insert: createResource(
       {
         method: 'frappe.client.insert',
@@ -414,8 +450,10 @@ function createListResource(options, vm, getResource) {
   // fetch list
   out.list.fetch()
 
-  // cache
-  listCache[cacheKey] = out
+  if (cacheKey) {
+    // cache
+    listCache[cacheKey] = out
+  }
 
   return out
 }
@@ -431,6 +469,9 @@ function createResourceForOptions(options, vm, getResource) {
 }
 
 function getCacheKey(cacheKey) {
+  if (!cacheKey) {
+    return null
+  }
   if (typeof cacheKey === 'string') {
     cacheKey = [cacheKey]
   }