frappe-ui 0.0.57 → 0.0.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.0.57",
+  "version": "0.0.60",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {
@@ -36,6 +36,7 @@
     "@tiptap/vue-3": "^2.0.0-beta.96",
     "autoprefixer": "^10.4.2",
     "feather-icons": "^4.28.0",
+    "idb-keyval": "^6.2.0",
     "postcss": "^8.4.5",
     "socket.io-client": "^4.5.1",
     "tailwindcss": "^3.0.12",

package/src/components/Autocomplete.vue

@@ -31,7 +31,7 @@
       </template>
       <template #body>
         <ComboboxOptions
-          class="max-h-[11rem] overflow-y-auto rounded-md rounded-t-none bg-white px-1.5 pb-1.5 shadow-md"
+          class="max-h-[15rem] overflow-y-auto rounded-md rounded-t-none bg-white px-1.5 pb-1.5 shadow-md"
           static
           v-show="isComboboxOpen"
         >
@@ -52,24 +52,36 @@
             />
             <Button icon="x" @click="selectedValue = null" />
           </div>
-          <ComboboxOption
-            as="template"
-            v-for="option in filteredOptions"
-            :key="option.value"
-            :value="option"
-            v-slot="{ active, selected }"
+          <div
+            v-for="group in groups"
+            :key="group.key"
+            v-show="group.items.length > 0"
           >
-            <li
-              :class="[
-                'rounded-md px-2.5 py-1.5 text-base',
-                { 'bg-gray-100': active },
-              ]"
+            <div
+              v-if="group.group && !group.hideLabel"
+              class="px-2 py-1 text-xs font-semibold uppercase tracking-wider text-gray-500"
+            >
+              {{ group.group }}
+            </div>
+            <ComboboxOption
+              as="template"
+              v-for="option in group.items"
+              :key="option.value"
+              :value="option"
+              v-slot="{ active, selected }"
             >
-              {{ option.label }}
-            </li>
-          </ComboboxOption>
+              <li
+                :class="[
+                  'rounded-md px-2.5 py-1.5 text-base',
+                  { 'bg-gray-100': active },
+                ]"
+              >
+                {{ option.label }}
+              </li>
+            </ComboboxOption>
+          </div>
           <li
-            v-if="filteredOptions.length == 0"
+            v-if="groups.length == 0"
             class="rounded-md px-2.5 py-1.5 text-base text-gray-600"
           >
             No results found
@@ -119,11 +131,31 @@ export default {
         this.$emit(this.valuePropPassed ? 'change' : 'update:modelValue', val)
       },
     },
-    filteredOptions() {
+    groups() {
+      if (!this.options || this.options.length == 0) return []
+
+      let groups = this.options[0]?.group
+        ? this.options
+        : [{ group: '', items: this.options }]
+
+      return groups
+        .map((group, i) => {
+          return {
+            key: i,
+            group: group.group,
+            hideLabel: group.hideLabel || false,
+            items: this.filterOptions(group.items),
+          }
+        })
+        .filter((group) => group.items.length > 0)
+    },
+  },
+  methods: {
+    filterOptions(options) {
       if (!this.query) {
-        return this.options
+        return options
       }
-      return this.options.filter((option) => {
+      return options.filter((option) => {
         let searchTexts = [option.label, option.value]
         return searchTexts.some((text) =>
           (text || '')
@@ -133,8 +165,6 @@ export default {
         )
       })
     },
-  },
-  methods: {
     displayValue(option) {
       if (typeof option === 'string') {
         return option

package/src/components/Badge.vue

@@ -7,23 +7,22 @@
   </span>
 </template>
 <script>
+const DEFAULT_COLOR_MAP = {
+  Pending: 'yellow',
+  Running: 'yellow',
+  Success: 'green',
+  Failure: 'red',
+  Active: 'green',
+  Broken: 'red',
+  Updating: 'blue',
+  Rejected: 'red',
+  Published: 'green',
+  Approved: 'green',
+}
+
 export default {
   name: 'Badge',
   props: ['color', 'status', 'colorMap'],
-  data: {
-    defaultColorMap: {
-      Pending: 'yellow',
-      Running: 'yellow',
-      Success: 'green',
-      Failure: 'red',
-      Active: 'green',
-      Broken: 'red',
-      Updating: 'blue',
-      Rejected: 'red',
-      Published: 'green',
-      Approved: 'green',
-    },
-  },
   computed: {
     classes() {
       let color = this.getBadgeColor()
@@ -46,10 +45,7 @@ export default {
         return color
       }
 
-      let statusColorMap = Object.assign(
-        this.defaultColorMap,
-        this.colorMap || {}
-      )
+      let statusColorMap = Object.assign(DEFAULT_COLOR_MAP, this.colorMap || {})
       color = statusColorMap[this.status] || 'gray'
 
       return color

package/src/components/TextEditor/MentionList.vue

@@ -1,20 +1,22 @@
 <template>
-  <div
-    v-if="items.length"
-    class="min-w-40 rounded-lg border bg-white p-1 text-base shadow-lg"
-  >
-    <button
-      :class="[
-        index === selectedIndex ? 'bg-gray-100' : 'text-gray-900',
-        'flex w-full items-center whitespace-nowrap rounded-md px-2 py-2 text-sm',
-      ]"
-      v-for="(item, index) in items"
-      :key="index"
-      @click="selectItem(index)"
-      @mouseover="selectedIndex = index"
+  <div>
+    <div
+      v-if="items.length"
+      class="min-w-40 rounded-lg border bg-white p-1 text-base shadow-lg"
     >
-      {{ item.label }}
-    </button>
+      <button
+        :class="[
+          index === selectedIndex ? 'bg-gray-100' : 'text-gray-900',
+          'flex w-full items-center whitespace-nowrap rounded-md px-2 py-2 text-sm',
+        ]"
+        v-for="(item, index) in items"
+        :key="index"
+        @click="selectItem(index)"
+        @mouseover="selectedIndex = index"
+      >
+        {{ item.label }}
+      </button>
+    </div>
   </div>
 </template>
 

package/src/components/TextEditor/TextEditor.vue

@@ -2,13 +2,13 @@
   <div class="relative w-full" :class="$attrs.class" v-if="editor">
     <BubbleMenu
       v-if="bubbleMenuButtons"
-      class="bubble-menu"
+      class="bubble-menu rounded-md shadow-sm"
       :tippy-options="{ duration: 100 }"
       :editor="editor"
     >
       <Menu
         :editor="editor"
-        class="rounded-md border border-gray-100 shadow-sm"
+        class="rounded-md border border-gray-100 shadow-lg"
         :buttons="bubbleMenuButtons"
       />
     </BubbleMenu>
@@ -131,9 +131,11 @@ export default {
     editorProps: {
       deep: true,
       handler(value) {
-        this.editor.setOptions({
-          editorProps: value,
-        })
+        if (this.editor) {
+          this.editor.setOptions({
+            editorProps: value,
+          })
+        }
       },
     },
   },
@@ -247,8 +249,25 @@ export default {
           'Separator',
           'Bullet List',
           'Numbered List',
+          'Separator',
+          'Image',
           'Blockquote',
           'Code',
+          [
+            'InsertTable',
+            'AddColumnBefore',
+            'AddColumnAfter',
+            'DeleteColumn',
+            'AddRowBefore',
+            'AddRowAfter',
+            'DeleteRow',
+            'MergeCells',
+            'SplitCell',
+            'ToggleHeaderColumn',
+            'ToggleHeaderRow',
+            'ToggleHeaderCell',
+            'DeleteTable',
+          ],
         ]
       }
       return buttons.map(createEditorButton)

package/src/components/TextEditor/commands.js

@@ -97,13 +97,13 @@ export default {
   },
   'Bullet List': {
     label: 'Bullet List',
-    icon: ListOrdered,
+    icon: ListUnordered,
     action: (editor) => editor.chain().focus().toggleBulletList().run(),
     isActive: (editor) => editor.isActive('bulletList'),
   },
   'Numbered List': {
     label: 'Numbered List',
-    icon: ListUnordered,
+    icon: ListOrdered,
     action: (editor) => editor.chain().focus().toggleOrderedList().run(),
     isActive: (editor) => editor.isActive('orderedList'),
   },

package/src/directives/onOutsideClick.js

@@ -1,28 +1,34 @@
-let instances = []
+const instanceMap = new Map()
 
 function onDocumentClick(e, el, fn) {
   let target = e.target
   if (el !== target && !el.contains(target)) {
-    fn(e)
+    fn?.(e)
   }
 }
 
 export default {
   beforeMount(el, binding) {
-    el.dataset.outsideClickIndex = instances.length
-
     const fn = binding.value
-    const click = function (e) {
+    const clickHandler = function (e) {
       onDocumentClick(e, el, fn)
     }
 
-    document.addEventListener('click', click)
-    instances.push(click)
+    removeHandlerIfPresent(el)
+    instanceMap.set(el, clickHandler)
+    document.addEventListener('click', clickHandler)
   },
   unmounted(el) {
-    const index = el.dataset.outsideClickIndex
-    const handler = instances[index]
-    document.addEventListener('click', handler)
-    instances.splice(index, 1)
+    removeHandlerIfPresent(el)
   },
 }
+
+function removeHandlerIfPresent(el) {
+  const clickHandler = instanceMap.get(el)
+  if (!clickHandler) {
+    return
+  }
+
+  instanceMap.delete(el)
+  document.removeEventListener('click', clickHandler)
+}

package/src/index.js

@@ -36,7 +36,7 @@ export {
   createResource,
   createDocumentResource,
   createListResource,
-} from './utils/resources.js'
+} from './resources'
 
 // plugin
 export { default as FrappeUI } from './utils/plugin.js'

package/src/resources/documentResource.js

@@ -0,0 +1,171 @@
+import { reactive } from 'vue'
+import { getCacheKey, createResource } from './resources'
+import {
+  updateRowInListResource,
+  deleteRowInListResource,
+  revertRowInListResource,
+} from './listResource'
+import { getLocal, saveLocal } from './local'
+
+let documentCache = reactive({})
+
+export function createDocumentResource(options, vm) {
+  if (!(options.doctype && options.name)) return
+
+  let cacheKey = getCacheKey([options.doctype, options.name])
+  if (documentCache[cacheKey]) {
+    return documentCache[cacheKey]
+  }
+
+  let setValueOptions = {
+    method: 'frappe.client.set_value',
+    makeParams(values) {
+      return {
+        doctype: out.doctype,
+        name: out.name,
+        fieldname: values,
+      }
+    },
+    beforeSubmit(params) {
+      out.previousDoc = JSON.stringify(out.doc)
+      Object.assign(out.doc, params.fieldname || {})
+      // update data in list resources
+      updateRowInListResource(out.doctype, out.doc)
+    },
+    onSuccess(data) {
+      out.doc = transform(data)
+      options.setValue?.onSuccess?.call(vm, data)
+    },
+    onError(error) {
+      out.doc = JSON.parse(out.previousDoc)
+      options.setValue?.onError?.call(vm, error)
+      // revert data in list resource
+      revertRowInListResource(out.doctype, out.doc)
+    },
+  }
+
+  let out = reactive({
+    doctype: options.doctype,
+    name: options.name,
+    doc: null,
+    auto: true,
+    get: createResource(
+      {
+        method: 'frappe.client.get',
+        makeParams() {
+          return {
+            doctype: out.doctype,
+            name: out.name,
+          }
+        },
+        onSuccess(data) {
+          saveLocal(cacheKey, data)
+          out.doc = transform(data)
+          options.onSuccess?.call(vm, out.doc)
+        },
+        onError: options.onError,
+      },
+      vm
+    ),
+    setValue: createResource(setValueOptions, vm),
+    setValueDebounced: createResource(
+      {
+        ...setValueOptions,
+        debounce: options.debounce || 500,
+      },
+      vm
+    ),
+    delete: createResource(
+      {
+        method: 'frappe.client.delete',
+        makeParams() {
+          return {
+            doctype: out.doctype,
+            name: out.name,
+          }
+        },
+        onSuccess() {
+          out.doc = null
+          options.delete?.onSuccess?.call(vm)
+          // delete from list resources
+          deleteRowInListResource(out.doctype, out.name)
+        },
+        onError: options.delete?.onError,
+      },
+      vm
+    ),
+    update,
+    reload,
+    setDoc,
+  })
+
+  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 = transform(doc)
+                break
+              }
+            }
+          }
+        },
+      },
+      vm
+    )
+  }
+
+  function update(updatedOptions) {
+    out.doctype = updatedOptions.doctype
+    out.name = updatedOptions.name
+    out.get.fetch()
+  }
+
+  function reload() {
+    return out.get.fetch()
+  }
+
+  function setDoc(doc) {
+    if (typeof doc === 'function') {
+      doc = doc.call(vm, out.doc)
+    }
+    out.doc = transform(doc)
+  }
+
+  function transform(doc) {
+    if (options.transform) {
+      let returnValue = options.transform.call(vm, doc)
+      if (typeof returnValue === 'object') {
+        return returnValue
+      }
+    }
+    return doc
+  }
+
+  // cache
+  documentCache[cacheKey] = out
+  // offline
+  getLocal(cacheKey).then((data) => {
+    if (out.get.loading && data) {
+      out.doc = transform(data)
+    }
+  })
+  return out
+}
+
+export function getCachedDocumentResource(doctype, name) {
+  let cacheKey = getCacheKey([doctype, name])
+  return documentCache[cacheKey] || null
+}

package/src/resources/index.js

@@ -0,0 +1,3 @@
+export { createResource } from './resources'
+export { createDocumentResource } from './documentResource'
+export { createListResource } from './listResource'