frappe-ui 0.0.12 → 0.0.13

package/package.json

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

package/src/components/Dropdown.vue

@@ -86,25 +86,25 @@ export default {
         onClick,
       }
     },
-  },
-  computed: {
-    dropdownItems() {
-      return (this.options || [])
+    filterOptions(options) {
+      return (options || [])
         .filter(Boolean)
         .filter((option) => (option.condition ? option.condition() : true))
         .map((option) => this.normalizeDropdownItem(option))
     },
+  },
+  computed: {
     groups() {
       let groups = this.options[0]?.group
         ? this.options
-        : [{ group: '', items: this.options }]
+        : [{ group: '', items: this.filterOptions(this.options) }]
 
       return groups.map((group, i) => {
         return {
           key: i,
           group: group.group,
           hideLabel: group.hideLabel || false,
-          items: group.items.map((item) => this.normalizeDropdownItem(item)),
+          items: this.filterOptions(group.items),
         }
       })
     },

package/src/components/Input.vue

@@ -68,6 +68,7 @@ import { debounce } from 'frappe-ui'
 export default {
   name: 'Input',
   inheritAttrs: false,
+  expose: ['getInputValue'],
   props: {
     label: {
       type: String,
@@ -122,9 +123,10 @@ export default {
       this.$refs.input.blur()
     },
     getInputValue(e) {
-      let value = e.target.value
+      let $input = e ? e.target : this.$refs.input
+      let value = $input.value
       if (this.type == 'checkbox') {
-        value = e.target.checked
+        value = $input.checked
       }
       return value
     },
@@ -134,7 +136,7 @@ export default {
       if ('value' in this.$attrs) {
         return this.$attrs.value
       }
-      return this.modelValue
+      return this.modelValue || null
     },
     inputAttributes() {
       let onInput = (e) => {

package/src/components/Popover.vue

@@ -1,17 +1,29 @@
 <template>
   <div ref="reference">
-    <div class="h-full">
-      <slot name="target" :togglePopover="togglePopover"></slot>
+    <div
+      class="h-full"
+      ref="target"
+      @click="updatePosition"
+      @focusin="updatePosition"
+      @keydown="updatePosition"
+    >
+      <slot
+        name="target"
+        v-bind="{ togglePopover, updatePosition, open, close }"
+      ></slot>
     </div>
-    <teleport to="#popovers">
+    <teleport to="#frappeui-popper-root">
       <div
         ref="popover"
         :class="popoverClass"
-        class="bg-white rounded-md border shadow-md popover-container relative"
-        v-show="isOpen"
+        class="relative z-[100] popover-container"
+        :style="{ minWidth: targetWidth ? targetWidth + 'px' : null }"
       >
         <div v-if="!hideArrow" class="popover-arrow" ref="popover-arrow"></div>
-        <slot name="content" :togglePopover="togglePopover"></slot>
+        <slot
+          name="content"
+          v-bind="{ togglePopover, updatePosition, open, close }"
+        ></slot>
       </div>
     </teleport>
   </div>
@@ -25,9 +37,9 @@ export default {
   props: {
     hideArrow: {
       type: Boolean,
-      default: false,
+      default: true,
     },
-    showPopup: {
+    show: {
       default: null,
     },
     right: Boolean,
@@ -39,18 +51,28 @@ export default {
   },
   emits: ['init', 'open', 'close'],
   watch: {
-    showPopup(value) {
-      if (value === true) {
-        this.open()
-      }
-      if (value === false) {
-        this.close()
-      }
+    show: {
+      immediate: true,
+      handler(val) {
+        if (val) {
+          this.open()
+        } else {
+          this.close()
+        }
+      },
     },
   },
   data() {
     return {
       isOpen: false,
+      targetWidth: null,
+    }
+  },
+  created() {
+    if (!document.getElementById('frappeui-popper-root')) {
+      const root = document.createElement('div')
+      root.id = 'frappeui-popper-root'
+      document.body.appendChild(root)
     }
   },
   mounted() {
@@ -67,6 +89,9 @@ export default {
     if (this.show == null) {
       document.addEventListener('click', this.listener)
     }
+    this.$nextTick(() => {
+      this.targetWidth = this.$refs['target'].clientWidth
+    })
   },
   beforeDestroy() {
     this.popper && this.popper.destroy()
@@ -95,10 +120,13 @@ export default {
             : [],
         })
       } else {
-        this.popper.update()
+        this.updatePosition()
       }
       this.$emit('init')
     },
+    updatePosition() {
+      this.popper && this.popper.update()
+    },
     togglePopover(flag) {
       if (flag == null) {
         flag = !this.isOpen
@@ -115,9 +143,7 @@ export default {
         return
       }
       this.isOpen = true
-      this.$nextTick(() => {
-        this.setupPopper()
-      })
+      this.$nextTick(() => this.setupPopper())
       this.$emit('open')
     },
     close() {

package/src/utils/resources.js

@@ -41,7 +41,7 @@ export function createResource(options, vm, getResource) {
     setData,
   })
 
-  async function fetch(params) {
+  async function fetch(params, tempOptions = {}) {
     if (params instanceof Event) {
       params = null
     }
@@ -57,18 +57,22 @@ export function createResource(options, vm, getResource) {
       options.onFetch.call(vm, out.params)
     }
 
-    if (options.validate) {
+    let validateFunction = tempOptions.validate || options.validate
+    let errorFunction = tempOptions.onError || options.onError
+    let successFunction = tempOptions.onSuccess || options.onSuccess
+
+    if (validateFunction) {
       let invalidMessage
       try {
-        invalidMessage = await options.validate.call(vm, out.params)
+        invalidMessage = await validateFunction.call(vm, out.params)
         if (invalidMessage && typeof invalidMessage == 'string') {
           let error = new Error(invalidMessage)
-          handleError(error)
+          handleError(error, errorFunction)
           out.loading = false
           return
         }
       } catch (error) {
-        handleError(error)
+        handleError(error, errorFunction)
         out.loading = false
         return
       }
@@ -78,11 +82,11 @@ export function createResource(options, vm, getResource) {
       let data = await resourceFetcher(options.method, params || options.params)
       out.data = data
       out.fetched = true
-      if (options.onSuccess) {
-        options.onSuccess.call(vm, data)
+      if (successFunction) {
+        successFunction.call(vm, data)
       }
     } catch (error) {
-      handleError(error)
+      handleError(error, errorFunction)
     }
     out.loading = false
   }
@@ -109,14 +113,14 @@ export function createResource(options, vm, getResource) {
     out.auto = options.auto
   }
 
-  function handleError(error) {
+  function handleError(error, errorFunction) {
     console.error(error)
     if (out.previousData) {
       out.data = out.previousData
     }
     out.error = error
-    if (options.onError) {
-      options.onError.call(vm, error)
+    if (errorFunction) {
+      errorFunction.call(vm, error)
     }
   }
 
@@ -138,6 +142,8 @@ export function createResource(options, vm, getResource) {
 }
 
 export function createDocumentResource(options, vm) {
+  if (!(options.doctype && options.name)) return
+
   let cacheKey = getCacheKey([options.doctype, options.name])
   if (documentCache[cacheKey]) {
     return documentCache[cacheKey]
@@ -153,7 +159,7 @@ export function createDocumentResource(options, vm) {
       }
     },
     onSuccess(data) {
-      out.doc = data
+      out.doc = postprocess(data)
     },
   }
 
@@ -170,7 +176,7 @@ export function createDocumentResource(options, vm) {
         }
       },
       onSuccess(data) {
-        out.doc = data
+        out.doc = postprocess(data)
       },
     }),
     setValue: createResource(setValueOptions),
@@ -193,12 +199,47 @@ export function createDocumentResource(options, vm) {
     update,
   })
 
+  for (let method in options.whitelistedMethods) {
+    let methodName = options.whitelistedMethods[method]
+    out[method] = createResource({
+      method: 'run_doc_method',
+      makeParams(values) {
+        return {
+          dt: out.doctype,
+          dn: out.name,
+          method: methodName,
+          args: JSON.stringify(values),
+        }
+      },
+      onSuccess(data) {
+        if (data.docs) {
+          for (let doc of data.docs) {
+            if (doc.doctype === out.doctype && doc.name === out.name) {
+              out.doc = postprocess(doc)
+              break
+            }
+          }
+        }
+      },
+    })
+  }
+
   function update(updatedOptions) {
     out.doctype = updatedOptions.doctype
     out.name = updatedOptions.name
     out.get.fetch()
   }
 
+  function postprocess(doc) {
+    if (options.postprocess) {
+      let returnValue = options.postprocess(doc)
+      if (typeof returnValue === 'object') {
+        return returnValue
+      }
+    }
+    return doc
+  }
+
   // fetch the doc
   out.get.fetch()
   // cache
@@ -248,7 +289,7 @@ let createMixin = (mixinOptions) => ({
               } else {
                 resource.update(updatedOptions)
               }
-              if (resource.auto) {
+              if (resource && resource.auto) {
                 resource.fetch()
               }
             },