frappe-ui 0.0.25 → 0.0.28

package/package.json

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

package/src/components/Input.vue

@@ -30,12 +30,13 @@
     <textarea
       v-if="type === 'textarea'"
       v-bind="inputAttributes"
+      :placeholder="placeholder"
+      class="placeholder-gray-500"
       :class="['block w-full resize-none form-textarea', inputClass]"
       ref="input"
       :value="passedInputValue"
       :disabled="disabled"
       :rows="rows || 3"
-      @blur="$emit('blur', $event)"
     ></textarea>
     <select
       v-bind="inputAttributes"
@@ -48,6 +49,7 @@
         v-for="option in selectOptions"
         :key="option.value"
         :value="option.value"
+        :disabled="option.disabled || false"
         :selected="passedInputValue === option.value"
       >
         {{ option.label }}
@@ -114,7 +116,7 @@ export default {
       type: String,
     },
   },
-  emits: ['blur', 'input', 'change', 'update:modelValue'],
+  emits: ['input', 'change', 'update:modelValue'],
   methods: {
     focus() {
       this.$refs.input.focus()
@@ -158,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">
@@ -18,12 +18,21 @@
         :class="popoverClass"
         class="relative z-[100] popover-container"
         :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>
@@ -48,6 +57,10 @@ export default {
       default: 'bottom-start',
     },
     popoverClass: [String, Object, Array],
+    transition: {
+      type: Object,
+      default: null,
+    },
   },
   emits: ['init', 'open', 'close'],
   watch: {

package/src/index.js

@@ -29,6 +29,7 @@ export { default as onOutsideClickDirective } from './directives/onOutsideClick.
 export { default as call, createCall } from './utils/call.js'
 export { default as debounce } from './utils/debounce.js'
 export { createResource } from './utils/resources.js'
+export { default as pageMeta } from './utils/pageMeta.js'
 
 // plugin
 export { default as FrappeUI } from './utils/plugin.js'

package/src/utils/pageMeta.js

@@ -0,0 +1,47 @@
+import { watch } from 'vue'
+
+export default {
+  install(app) {
+    app.mixin(createMixin())
+  },
+}
+
+function createMixin() {
+  let faviconRef = document.querySelector('link[rel="icon"]')
+  let defaultFavIcon = faviconRef.href
+
+  return {
+    created() {
+      if (this.$options.pageMeta) {
+        watch(
+          () => {
+            try {
+              return this.$options.pageMeta.call(this)
+            } catch (error) {
+              console.warn('Failed to parse pageMeta\n\n', error)
+              return null
+            }
+          },
+          (pageMeta) => {
+            if (!pageMeta) return
+            if (pageMeta.title) {
+              document.title = pageMeta.title
+            }
+            if (pageMeta.emoji) {
+              let href = `data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>${pageMeta.emoji}</text></svg>`
+              faviconRef.href = href
+            } else if (pageMeta.icon) {
+              faviconRef.href = pageMeta.icon
+            } else {
+              faviconRef.href = defaultFavIcon
+            }
+          },
+          {
+            immediate: true,
+            deep: true,
+          }
+        )
+      }
+    },
+  }
+}

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]
   }