frappe-ui 0.0.13 → 0.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.0.13",
+  "version": "0.0.17",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {
@@ -17,7 +17,7 @@
   "author": "Frappe Technologies Pvt. Ltd.",
   "license": "MIT",
   "dependencies": {
-    "@headlessui/vue": "^1.4.3",
+    "@headlessui/vue": "^1.5.0",
     "@popperjs/core": "^2.11.2",
     "@tailwindcss/forms": "^0.4.0",
     "@tailwindcss/typography": "^0.5.0",

package/src/components/Avatar.vue

@@ -44,7 +44,7 @@ export default {
   computed: {
     styleClasses() {
       const sizeClasses = {
-        sm: 'w-4 h-4',
+        sm: 'w-5 h-5',
         md: 'w-8 h-8',
         lg: 'w-12 h-12',
       }[this.size]

package/src/components/Dropdown.vue

@@ -40,7 +40,7 @@
                 active ? 'bg-gray-100' : 'text-gray-900',
                 'group flex rounded-md items-center w-full px-2 py-2 text-sm',
               ]"
-              :onClick="item.onClick"
+              @click="item.onClick"
             >
               <FeatherIcon
                 v-if="item.icon"
@@ -97,7 +97,7 @@ export default {
     groups() {
       let groups = this.options[0]?.group
         ? this.options
-        : [{ group: '', items: this.filterOptions(this.options) }]
+        : [{ group: '', items: this.options }]
 
       return groups.map((group, i) => {
         return {

package/src/components/Input.vue

@@ -1,5 +1,5 @@
 <template>
-  <label :class="type == 'checkbox' ? 'flex' : 'block'">
+  <label :class="[type == 'checkbox' ? 'flex' : 'block', $attrs.class]">
     <span
       v-if="label && type != 'checkbox'"
       class="block mb-2 text-sm leading-4 text-gray-700"

package/src/components/TextEditor/Menu.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="inline-flex px-1 py-1 bg-white">
     <div class="inline-flex items-center gap-1">
-      <template v-for="button in menuButtons" :key="button.label">
+      <template v-for="button in buttons" :key="button.label">
         <div
           class="border-l w-[2px] h-4"
           v-if="button.type === 'separator'"
@@ -9,8 +9,8 @@
         <button
           v-else
           class="flex p-1 text-gray-800 transition-colors rounded"
-          :class="button.isActive() ? 'bg-gray-100' : 'hover:bg-gray-100'"
-          @click="button.action"
+          :class="button.isActive(editor) ? 'bg-gray-100' : 'hover:bg-gray-100'"
+          @click="() => button.action(editor)"
           :title="button.label"
         >
           <FeatherIcon v-if="button.icon" :name="button.icon" class="w-4" />
@@ -26,96 +26,7 @@
 import { FeatherIcon } from 'frappe-ui'
 export default {
   name: 'TipTapMenu',
-  props: ['editor'],
+  props: ['editor', 'buttons'],
   components: { FeatherIcon },
-  computed: {
-    menuButtons() {
-      return [
-        {
-          label: 'Paragraph',
-          icon: 'type',
-          action: () => this.editor.chain().focus().setParagraph().run(),
-          isActive: () => this.editor.isActive('paragraph'),
-        },
-        {
-          label: 'Heading 2',
-          text: 'H2',
-          action: () =>
-            this.editor.chain().focus().toggleHeading({ level: 2 }).run(),
-          isActive: () => this.editor.isActive('heading', { level: 2 }),
-        },
-        {
-          label: 'Heading 3',
-          text: 'H3',
-          action: () =>
-            this.editor.chain().focus().toggleHeading({ level: 3 }).run(),
-          isActive: () => this.editor.isActive('heading', { level: 3 }),
-        },
-        {
-          type: 'separator',
-        },
-        {
-          label: 'Bold',
-          icon: 'bold',
-          action: () => this.editor.chain().focus().toggleBold().run(),
-          isActive: () => this.editor.isActive('bold'),
-        },
-        {
-          label: 'Italic',
-          icon: 'italic',
-          action: () => this.editor.chain().focus().toggleItalic().run(),
-          isActive: () => this.editor.isActive('italic'),
-        },
-        {
-          type: 'separator',
-        },
-        {
-          label: 'Bullet List',
-          icon: 'list',
-          action: () => this.editor.chain().focus().toggleBulletList().run(),
-          isActive: () => this.editor.isActive('bulletList'),
-        },
-        {
-          label: 'Numbered List',
-          text: '1.',
-          action: () => this.editor.chain().focus().toggleOrderedList().run(),
-          isActive: () => this.editor.isActive('orderedList'),
-        },
-        {
-          label: 'Blockquote',
-          icon: 'chevron-right',
-          action: () => this.editor.chain().focus().toggleBlockquote().run(),
-          isActive: () => this.editor.isActive('blockquote'),
-        },
-        {
-          label: 'Code',
-          icon: 'code',
-          action: () => this.editor.chain().focus().toggleCodeBlock().run(),
-          isActive: () => this.editor.isActive('codeBlock'),
-        },
-        {
-          label: 'Horizontal Rule',
-          icon: 'minus',
-          action: () => this.editor.chain().focus().setHorizontalRule().run(),
-          isActive: () => false,
-        },
-        {
-          type: 'separator',
-        },
-        {
-          label: 'Undo',
-          icon: 'corner-up-left',
-          action: () => this.editor.chain().focus().undo().run(),
-          isActive: () => false,
-        },
-        {
-          label: 'Redo',
-          icon: 'corner-up-right',
-          action: () => this.editor.chain().focus().redo().run(),
-          isActive: () => false,
-        },
-      ]
-    },
-  },
 }
 </script>

package/src/components/TextEditor/TextEditor.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="relative w-full" :class="{ 'pt-6': showMenu }" v-if="editor">
+  <div class="relative w-full" :class="$attrs.class" v-if="editor">
     <BubbleMenu
-      v-if="showBubbleMenu"
+      v-if="bubbleMenuButtons"
       class="bubble-menu"
       :tippy-options="{ duration: 100 }"
       :editor="editor"
@@ -9,27 +9,48 @@
       <Menu
         :editor="editor"
         class="border border-gray-100 rounded-md shadow-sm"
+        :buttons="bubbleMenuButtons"
       />
     </BubbleMenu>
 
     <Menu
-      v-if="showMenu"
-      class="absolute top-0 left-0 right-0 border rounded-t-lg border-gray-50 border-b-gray-100"
+      v-if="fixedMenuButtons"
+      class="w-full border rounded-t-lg border-gray-50 border-b-gray-100"
       :editor="editor"
+      :buttons="fixedMenuButtons"
     />
-    <editor-content
+
+    <FloatingMenu
+      v-if="floatingMenuButtons"
+      :tippy-options="{ duration: 100 }"
       :editor="editor"
-      :class="$attrs.class || 'prose-sm prose'"
-    />
+      class="flex"
+    >
+      <button
+        v-for="button in floatingMenuButtons"
+        :key="button.label"
+        class="flex p-1 text-gray-800 transition-colors rounded"
+        :class="button.isActive(editor) ? 'bg-gray-100' : 'hover:bg-gray-100'"
+        @click="() => button.action(editor)"
+        :title="button.label"
+      >
+        <FeatherIcon v-if="button.icon" :name="button.icon" class="w-4" />
+        <span class="inline-block h-4 text-sm leading-4 min-w-[1rem]" v-else>
+          {{ button.text }}
+        </span>
+      </button>
+    </FloatingMenu>
+    <editor-content :editor="editor" />
   </div>
 </template>
 
 <script>
-import { Editor, EditorContent, BubbleMenu } from '@tiptap/vue-3'
+import { Editor, EditorContent, BubbleMenu, FloatingMenu } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import Placeholder from '@tiptap/extension-placeholder'
 import Image from '@tiptap/extension-image'
 import Menu from './Menu.vue'
+import commands from './commands'
 
 export default {
   name: 'TextEditor',
@@ -37,14 +58,17 @@ export default {
   components: {
     EditorContent,
     BubbleMenu,
+    FloatingMenu,
     Menu,
   },
   props: [
     'content',
     'placeholder',
     'editorClass',
-    'showMenu',
-    'showBubbleMenu',
+    'fixedMenu',
+    'bubbleMenu',
+    'floatingMenu',
+    'extensions',
   ],
   emits: ['change'],
   expose: ['editor'],
@@ -58,7 +82,7 @@ export default {
       content: this.content || '<p></p>',
       editorProps: {
         attributes: {
-          class: ['prose-p:my-1', this.editorClass].join(' '),
+          class: ['prose prose-sm prose-p:my-1', this.editorClass].join(' '),
         },
       },
       extensions: [
@@ -67,6 +91,7 @@ export default {
         Placeholder.configure({
           placeholder: this.placeholder || 'Write something...',
         }),
+        ...(this.extensions || []),
       ],
       onUpdate: ({ editor }) => {
         this.$emit('change', editor.getHTML())
@@ -76,6 +101,85 @@ export default {
   beforeUnmount() {
     this.editor.destroy()
   },
+  computed: {
+    fixedMenuButtons() {
+      if (!this.fixedMenu) return false
+
+      let buttons
+      if (Array.isArray(this.fixedMenu)) {
+        buttons = this.fixedMenu
+      } else {
+        buttons = [
+          'Paragraph',
+          'Heading 2',
+          'Heading 3',
+          'Separator',
+          'Bold',
+          'Italic',
+          'Separator',
+          'Bullet List',
+          'Numbered List',
+          'Blockquote',
+          'Code',
+          'Horizontal Rule',
+          'Separator',
+          'Undo',
+          'Redo',
+        ]
+      }
+      return buttons.map(createEditorButton)
+    },
+    bubbleMenuButtons() {
+      if (!this.bubbleMenu) return false
+
+      let buttons
+      if (Array.isArray(this.bubbleMenu)) {
+        buttons = this.bubbleMenu
+      } else {
+        buttons = [
+          'Paragraph',
+          'Heading 2',
+          'Heading 3',
+          'Separator',
+          'Bold',
+          'Italic',
+          'Separator',
+          'Bullet List',
+          'Numbered List',
+          'Blockquote',
+          'Code',
+        ]
+      }
+      return buttons.map(createEditorButton)
+    },
+    floatingMenuButtons() {
+      if (!this.floatingMenu) return false
+
+      let buttons
+      if (Array.isArray(this.floatingMenu)) {
+        buttons = this.floatingMenu
+      } else {
+        buttons = [
+          'Paragraph',
+          'Heading 2',
+          'Heading 3',
+          'Bullet List',
+          'Numbered List',
+          'Blockquote',
+          'Code',
+          'Horizontal Rule',
+        ]
+      }
+      return buttons.map(createEditorButton)
+    },
+  },
+}
+
+function createEditorButton(option) {
+  if (typeof option == 'object') {
+    return option
+  }
+  return commands[option]
 }
 </script>
 <style>

package/src/components/TextEditor/commands.js

@@ -0,0 +1,79 @@
+export default {
+  Paragraph: {
+    label: 'Paragraph',
+    icon: 'type',
+    action: (editor) => editor.chain().focus().setParagraph().run(),
+    isActive: (editor) => editor.isActive('paragraph'),
+  },
+  'Heading 2': {
+    label: 'Heading 2',
+    text: 'H2',
+    action: (editor) =>
+      editor.chain().focus().toggleHeading({ level: 2 }).run(),
+    isActive: (editor) => editor.isActive('heading', { level: 2 }),
+  },
+  'Heading 3': {
+    label: 'Heading 3',
+    text: 'H3',
+    action: (editor) =>
+      editor.chain().focus().toggleHeading({ level: 3 }).run(),
+    isActive: (editor) => editor.isActive('heading', { level: 3 }),
+  },
+  Bold: {
+    label: 'Bold',
+    icon: 'bold',
+    action: (editor) => editor.chain().focus().toggleBold().run(),
+    isActive: (editor) => editor.isActive('bold'),
+  },
+  Italic: {
+    label: 'Italic',
+    icon: 'italic',
+    action: (editor) => editor.chain().focus().toggleItalic().run(),
+    isActive: (editor) => editor.isActive('italic'),
+  },
+  'Bullet List': {
+    label: 'Bullet List',
+    icon: 'list',
+    action: (editor) => editor.chain().focus().toggleBulletList().run(),
+    isActive: (editor) => editor.isActive('bulletList'),
+  },
+  'Numbered List': {
+    label: 'Numbered List',
+    text: '1.',
+    action: (editor) => editor.chain().focus().toggleOrderedList().run(),
+    isActive: (editor) => editor.isActive('orderedList'),
+  },
+  Blockquote: {
+    label: 'Blockquote',
+    icon: 'chevron-right',
+    action: (editor) => editor.chain().focus().toggleBlockquote().run(),
+    isActive: (editor) => editor.isActive('blockquote'),
+  },
+  Code: {
+    label: 'Code',
+    icon: 'code',
+    action: (editor) => editor.chain().focus().toggleCodeBlock().run(),
+    isActive: (editor) => editor.isActive('codeBlock'),
+  },
+  'Horizontal Rule': {
+    label: 'Horizontal Rule',
+    icon: 'minus',
+    action: (editor) => editor.chain().focus().setHorizontalRule().run(),
+    isActive: (editor) => false,
+  },
+  Undo: {
+    label: 'Undo',
+    icon: 'corner-up-left',
+    action: (editor) => editor.chain().focus().undo().run(),
+    isActive: (editor) => false,
+  },
+  Redo: {
+    label: 'Redo',
+    icon: 'corner-up-right',
+    action: (editor) => editor.chain().focus().redo().run(),
+    isActive: (editor) => false,
+  },
+  Separator: {
+    type: 'separator',
+  },
+}

package/src/components/Toast.vue

@@ -0,0 +1,135 @@
+<template>
+  <teleport to="#frappeui-toast-root">
+    <transition :name="position.includes('top') ? 'toast-top' : 'toast-bottom'">
+      <div
+        v-if="shown"
+        :style="style"
+        :class="[
+          'absolute transition duration-200 ease-out m-4 pointer-events-auto',
+          position.includes('center') ? '-translate-x-1/2' : '',
+        ]"
+      >
+        <div
+          class="px-2.5 py-2 bg-white border rounded-lg shadow-md min-w-[15rem]"
+        >
+          <div class="flex items-center justify-between">
+            <div class="text-lg">
+              <slot> Toast Content </slot>
+            </div>
+            <div>
+              <slot name="actions">
+                <Button icon="x" @click="shown = false" />
+              </slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </teleport>
+</template>
+<script>
+const positions = [
+  'top-right',
+  'top-center',
+  'top-left',
+  'bottom-right',
+  'bottom-center',
+  'bottom-left',
+]
+
+export default {
+  name: 'Toast',
+  props: {
+    position: {
+      type: String,
+      default: 'top-right',
+    },
+    text: {
+      type: String,
+    },
+  },
+  created() {
+    if (!document.getElementById('frappeui-toast-root')) {
+      const root = document.createElement('div')
+      root.id = 'frappeui-toast-root'
+      root.style.position = 'fixed'
+      root.style.top = '16px'
+      root.style.right = '16px'
+      root.style.bottom = '16px'
+      root.style.left = '16px'
+      root.style.zIndex = '9999'
+      root.style.pointerEvents = 'none'
+      document.body.appendChild(root)
+    }
+  },
+  mounted() {
+    this.shown = true
+    // setTimeout(() => {
+    //   this.shown = false
+    // }, 3000)
+  },
+  data() {
+    return {
+      shown: false,
+    }
+  },
+  computed: {
+    style() {
+      let style = {}
+      if (this.position.includes('top')) {
+        style.top = 0
+      }
+      if (this.position.includes('bottom')) {
+        style.bottom = 0
+      }
+      if (this.position.includes('right')) {
+        style.right = 0
+      }
+      if (this.position.includes('left')) {
+        style.left = 0
+      }
+      if (this.position.includes('center')) {
+        style.left = '50%'
+        // style.transform = 'translateX(-50%)'
+      }
+      return style
+    },
+    transitionProps() {
+      let props = {
+        enterActiveClass: 'transition duration-200 ease-out',
+        enterFromClass: 'opacity-0',
+        enterToClass: 'translate-y-0 opacity-100',
+        leaveActiveClass: 'transition duration-100 ease-in',
+        leaveFromClass: 'scale-100 translate-y-0 opacity-100',
+        leaveToClass: 'scale-75 translate-y-4 opacity-0',
+      }
+
+      if (this.position.includes('top')) {
+        props.enterFromClass += ' -translate-y-12'
+      }
+      if (this.position.includes('bottom')) {
+        props.enterFromClass += ' translate-y-12'
+      }
+      return props
+    },
+  },
+}
+</script>
+<style>
+.toast-top-enter-active,
+.toast-bottom-enter-active {
+  transition: all 200ms ease-out;
+}
+.toast-top-leave-active,
+.toast-bottom-leave-active {
+  transition: all 100ms ease-in;
+}
+.toast-top-enter-from {
+  opacity: 0;
+  transform: translateY(0);
+}
+.toast-top-enter-to {
+  opacity: 1;
+  transform: translateY(0);
+}
+</style>

package/src/utils/resources.js

@@ -167,61 +167,74 @@ export function createDocumentResource(options, vm) {
     doctype: options.doctype,
     name: options.name,
     doc: null,
-    get: createResource({
-      method: 'frappe.client.get',
-      makeParams() {
-        return {
-          doctype: out.doctype,
-          name: out.name,
-        }
+    get: createResource(
+      {
+        method: 'frappe.client.get',
+        makeParams() {
+          return {
+            doctype: out.doctype,
+            name: out.name,
+          }
+        },
+        onSuccess(data) {
+          out.doc = postprocess(data)
+        },
       },
-      onSuccess(data) {
-        out.doc = postprocess(data)
+      vm
+    ),
+    setValue: createResource(setValueOptions, vm),
+    setValueDebounced: createResource(
+      {
+        ...setValueOptions,
+        debounce: options.debounce || 500,
       },
-    }),
-    setValue: createResource(setValueOptions),
-    setValueDebounced: createResource({
-      ...setValueOptions,
-      debounce: options.debounce || 500,
-    }),
-    delete: createResource({
-      method: 'frappe.client.delete',
-      makeParams() {
-        return {
-          doctype: out.doctype,
-          name: out.name,
-        }
-      },
-      onSuccess() {
-        out.doc = null
+      vm
+    ),
+    delete: createResource(
+      {
+        method: 'frappe.client.delete',
+        makeParams() {
+          return {
+            doctype: out.doctype,
+            name: out.name,
+          }
+        },
+        onSuccess() {
+          out.doc = null
+        },
       },
-    }),
+      vm
+    ),
     update,
+    reload,
   })
 
   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
+    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
+              }
             }
           }
-        }
+        },
       },
-    })
+      vm
+    )
   }
 
   function update(updatedOptions) {
@@ -230,9 +243,13 @@ export function createDocumentResource(options, vm) {
     out.get.fetch()
   }
 
+  function reload() {
+    out.get.fetch()
+  }
+
   function postprocess(doc) {
     if (options.postprocess) {
-      let returnValue = options.postprocess(doc)
+      let returnValue = options.postprocess.call(vm, doc)
       if (typeof returnValue === 'object') {
         return returnValue
       }
@@ -247,10 +264,79 @@ export function createDocumentResource(options, vm) {
   return out
 }
 
+function createListResource(options, vm, getResource) {
+  if (!options.doctype) return
+
+  let out = reactive({
+    doctype: options.doctype,
+    fields: options.fields,
+    filters: options.filters,
+    order_by: options.order_by,
+    start: options.start,
+    limit: options.limit,
+    data: null,
+    list: createResource(
+      {
+        method: 'frappe.client.get_list',
+        makeParams() {
+          return {
+            doctype: out.doctype,
+            fields: out.fields,
+            filters: out.filters,
+            order_by: out.order_by,
+            limit_start: out.start,
+            limit_page_length: out.limit,
+          }
+        },
+        onSuccess(data) {
+          out.data = data
+        },
+      },
+      vm
+    ),
+    insert: createResource(
+      {
+        method: 'frappe.client.insert',
+        makeParams(values) {
+          return {
+            doc: {
+              doctype: out.doctype,
+              ...values,
+            },
+          }
+        },
+        onSuccess() {
+          out.list.fetch()
+        },
+      },
+      vm
+    ),
+    update,
+  })
+
+  function update(updatedOptions) {
+    out.doctype = updatedOptions.doctype
+    out.fields = updatedOptions.fields
+    out.filters = updatedOptions.filters
+    out.order_by = updatedOptions.order_by
+    out.start = updatedOptions.start
+    out.limit = updatedOptions.limit
+    out.list.fetch()
+  }
+
+  // fetch list
+  out.list.fetch()
+
+  return out
+}
+
 function createResourceForOptions(options, vm, getResource) {
   if (options.type === 'document') {
     return createDocumentResource(options, vm, getResource)
   }
+  if (options.type === 'list') {
+    return createListResource(options, vm, getResource)
+  }
   return createResource(options, vm, getResource)
 }
 
@@ -270,8 +356,19 @@ let createMixin = (mixinOptions) => ({
 
         if (typeof options == 'function') {
           watch(
-            () => options.call(this),
+            () => {
+              try {
+                return options.call(this)
+              } catch (error) {
+                console.warn('Failed to get resource options\n\n', error)
+                return null
+              }
+            },
             (updatedOptions, oldVal) => {
+              if (!updatedOptions) {
+                return
+              }
+
               let changed =
                 !oldVal ||
                 JSON.stringify(updatedOptions) !== JSON.stringify(oldVal)