frappe-ui 0.0.13 → 0.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "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/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/utils/resources.js

@@ -247,10 +247,64 @@ 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,
+    data: null,
+    list: createResource({
+      method: 'frappe.client.get_list',
+      makeParams() {
+        return {
+          doctype: out.doctype,
+          fields: out.fields,
+          filters: out.filters,
+        }
+      },
+      onSuccess(data) {
+        out.data = data
+      },
+    }),
+    insert: createResource({
+      method: 'frappe.client.insert',
+      makeParams(values) {
+        return {
+          doc: {
+            doctype: out.doctype,
+            ...values,
+          },
+        }
+      },
+      onSuccess() {
+        out.list.fetch()
+      },
+    }),
+    update,
+  })
+
+  function update(updatedOptions) {
+    out.doctype = updatedOptions.doctype
+    out.fields = updatedOptions.fields
+    out.filters = updatedOptions.filters
+    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)
 }