frappe-ui 0.0.31 → 0.0.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.0.31",
+  "version": "0.0.36",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {
@@ -24,6 +24,7 @@
     "@tiptap/extension-image": "^2.0.0-beta.27",
     "@tiptap/extension-link": "^2.0.0-beta.37",
     "@tiptap/extension-placeholder": "^2.0.0-beta.48",
+    "@tiptap/extension-text-align": "^2.0.0-beta.31",
     "@tiptap/starter-kit": "^2.0.0-beta.183",
     "@tiptap/vue-3": "^2.0.0-beta.90",
     "autoprefixer": "^10.4.2",

package/src/components/Autocomplete.vue

@@ -0,0 +1,121 @@
+<template>
+  <Combobox v-model="selectedValue" v-slot="{ open: isComboBoxOpen }" nullable>
+    <Popover class="w-full">
+      <template #target="{ open: openPopover }">
+        <ComboboxInput
+          :displayValue="displayValue"
+          :class="['w-full form-input', { 'rounded-b-none': isComboBoxOpen }]"
+          type="text"
+          @change="
+            (e) => {
+              query = e.target.value
+              openPopover()
+            }
+          "
+          @focus="
+            () => {
+              openPopover()
+              showCombobox = true
+            }
+          "
+          @keydown.enter="showCombobox = false"
+          autocomplete="off"
+          v-bind="$attrs"
+        />
+      </template>
+      <template #body>
+        <ComboboxOptions
+          :class="[
+            'p-1.5 bg-white rounded-md shadow-md rounded-t-none',
+            { hidden: !showCombobox },
+          ]"
+          :static="true"
+        >
+          <ComboboxOption
+            as="template"
+            v-for="option in filteredOptions"
+            :key="option.value"
+            :value="option"
+            v-slot="{ active, selected }"
+          >
+            <li
+              :class="[
+                'px-2.5 py-1.5 rounded-md text-base',
+                { 'bg-gray-100': active },
+              ]"
+            >
+              {{ option.label }}
+            </li>
+          </ComboboxOption>
+          <li
+            v-if="filteredOptions.length == 0"
+            class="px-2.5 py-1.5 rounded-md text-base text-gray-600"
+          >
+            No results found
+          </li>
+        </ComboboxOptions>
+      </template>
+    </Popover>
+  </Combobox>
+</template>
+<script>
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxOptions,
+  ComboboxOption,
+} from '@headlessui/vue'
+import Popover from './Popover.vue'
+
+export default {
+  name: 'Autocomplete',
+  inheritAttrs: false,
+  props: ['modelValue', 'options', 'value'],
+  emits: ['update:modelValue', 'change'],
+  components: {
+    Popover,
+    Combobox,
+    ComboboxInput,
+    ComboboxOptions,
+    ComboboxOption,
+  },
+  data() {
+    return {
+      showCombobox: false,
+      query: '',
+    }
+  },
+  computed: {
+    valuePropPassed() {
+      return 'value' in this.$props && this.$props.value !== undefined
+    },
+    selectedValue: {
+      get() {
+        return this.valuePropPassed ? this.value : this.modelValue
+      },
+      set(val) {
+        this.$emit(this.valuePropPassed ? 'change' : 'update:modelValue', val)
+      },
+    },
+    filteredOptions() {
+      if (!this.query) {
+        return this.options
+      }
+      return this.options.filter((option) => {
+        let searchTexts = [option.label, option.value]
+        return searchTexts.some((text) =>
+          (text || '').toLowerCase().includes(this.query.toLowerCase())
+        )
+      })
+    },
+  },
+  methods: {
+    displayValue(option) {
+      if (typeof option === 'string') {
+        return option
+      }
+      return option?.label
+    },
+  },
+}
+</script>

package/src/components/FeatherIcon.vue

@@ -12,10 +12,11 @@ export default {
       validator(value) {
         const valid = validIcons.includes(value)
         if (!valid) {
-          console.warn(
-            `name property for feather-icon must be one of `,
-            validIcons
+          console.groupCollapsed(
+            '[frappe-ui] name property for feather-icon must be one of '
           )
+          console.dir(validIcons)
+          console.groupEnd()
         }
         return valid
       },
@@ -31,6 +32,9 @@ export default {
   },
   render() {
     let icon = feather.icons[this.name]
+    if (!icon) {
+      icon = feather.icons['circle']
+    }
     return h(
       'svg',
       mergeProps(

package/src/components/Popover.vue

@@ -2,7 +2,7 @@
   <div ref="reference">
     <div
       ref="target"
-      class="inline-block"
+      :class="['inline-block', $attrs.class]"
       @click="updatePosition"
       @focusin="updatePosition"
       @keydown="updatePosition"
@@ -53,6 +53,7 @@ import { createPopper } from '@popperjs/core'
 
 export default {
   name: 'Popover',
+  inheritAttrs: false,
   props: {
     show: {
       default: undefined,

package/src/components/TextEditor/Menu.vue

@@ -6,6 +6,37 @@
           class="border-l w-[2px] h-4"
           v-if="button.type === 'separator'"
         ></div>
+        <div v-else-if="button.map">
+          <Popover>
+            <template #target="{ togglePopover }">
+              <button
+                class="px-2 py-1 text-base font-medium text-gray-800 transition-colors rounded hover:bg-gray-100"
+                @click="togglePopover"
+              >
+                {{
+                  (button.find((b) => b.isActive(editor)) || button[0]).label
+                }}
+              </button>
+            </template>
+            <template #body="{ close }">
+              <ul class="p-1 bg-white border rounded shadow-md">
+                <li class="w-full" v-for="option in button">
+                  <button
+                    class="w-full px-2 py-1 text-base rounded hover:bg-gray-50"
+                    @click="
+                      () => {
+                        onClick(option)
+                        close()
+                      }
+                    "
+                  >
+                    {{ option.label }}
+                  </button>
+                </li>
+              </ul>
+            </template>
+          </Popover>
+        </div>
         <button
           v-else
           class="flex p-1 text-gray-800 transition-colors rounded"
@@ -13,7 +44,7 @@
           @click="onClick(button)"
           :title="button.label"
         >
-          <FeatherIcon v-if="button.icon" :name="button.icon" class="w-4" />
+          <component v-if="button.icon" :is="button.icon" class="w-4 h-4" />
           <span class="inline-block h-4 text-sm leading-4 min-w-[1rem]" v-else>
             {{ button.text }}
           </span>
@@ -39,11 +70,12 @@
   </div>
 </template>
 <script>
-import { FeatherIcon } from 'frappe-ui'
+import { Popover } from 'frappe-ui'
+
 export default {
   name: 'TipTapMenu',
   props: ['editor', 'buttons'],
-  components: { FeatherIcon },
+  components: { Popover },
   data() {
     return {
       setLinkDialog: { url: '', show: false },

package/src/components/TextEditor/TextEditor.vue

@@ -34,7 +34,7 @@
         @click="() => button.action(editor)"
         :title="button.label"
       >
-        <FeatherIcon v-if="button.icon" :name="button.icon" class="w-4" />
+        <component v-if="button.icon" :is="button.icon" class="w-4 h-4" />
         <span class="inline-block h-4 text-sm leading-4 min-w-[1rem]" v-else>
           {{ button.text }}
         </span>
@@ -48,10 +48,12 @@
 import { Editor, EditorContent, BubbleMenu, FloatingMenu } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import Placeholder from '@tiptap/extension-placeholder'
+import TextAlign from '@tiptap/extension-text-align'
 import Image from '@tiptap/extension-image'
 import Link from '@tiptap/extension-link'
 import Menu from './Menu.vue'
 import commands from './commands'
+import { normalizeClass } from 'vue'
 
 export default {
   name: 'TextEditor',
@@ -90,20 +92,27 @@ export default {
     editable(value) {
       this.editor.setEditable(value)
     },
+    editorProps: {
+      deep: true,
+      handler(value) {
+        this.editor.setOptions({
+          editorProps: value,
+        })
+      },
+    },
   },
   mounted() {
     this.editor = new Editor({
       content: this.content || null,
-      editorProps: {
-        attributes: {
-          class: ['prose prose-sm prose-p:my-1', this.editorClass].join(' '),
-        },
-      },
+      editorProps: this.editorProps,
       editable: this.editable,
       extensions: [
         StarterKit.configure({
           ...this.starterkitOptions,
         }),
+        TextAlign.configure({
+          types: ['heading', 'paragraph'],
+        }),
         Image,
         Link,
         Placeholder.configure({
@@ -128,15 +137,26 @@ export default {
         buttons = this.fixedMenu
       } else {
         buttons = [
+          [
+            'Heading 1',
+            'Heading 2',
+            'Heading 3',
+            'Heading 4',
+            'Heading 5',
+            'Heading 6',
+          ],
           'Paragraph',
-          'Heading 2',
-          'Heading 3',
           'Separator',
           'Bold',
           'Italic',
           'Separator',
           'Bullet List',
           'Numbered List',
+          'Separator',
+          'Align Left',
+          'Align Center',
+          'Align Right',
+          'Separator',
           'Blockquote',
           'Code',
           'Horizontal Rule',
@@ -191,10 +211,23 @@ export default {
       }
       return buttons.map(createEditorButton)
     },
+    editorProps() {
+      return {
+        attributes: {
+          class: normalizeClass([
+            'prose prose-sm prose-p:my-1',
+            this.editorClass,
+          ]),
+        },
+      }
+    },
   },
 }
 
 function createEditorButton(option) {
+  if (option instanceof Array) {
+    return option.map(createEditorButton)
+  }
   if (typeof option == 'object') {
     return option
   }

package/src/components/TextEditor/commands.js

@@ -1,13 +1,44 @@
+import H1 from './icons/h-1.vue'
+import H2 from './icons/h-2.vue'
+import H3 from './icons/h-3.vue'
+import H4 from './icons/h-4.vue'
+import H5 from './icons/h-5.vue'
+import H6 from './icons/h-6.vue'
+import Text from './icons/text.vue'
+import Bold from './icons/bold.vue'
+import Italic from './icons/italic.vue'
+import Underline from './icons/underline.vue'
+import AlignCenter from './icons/align-center.vue'
+import AlignLeft from './icons/align-left.vue'
+import AlignRight from './icons/align-right.vue'
+import ListOrdered from './icons/list-ordered.vue'
+import ListUnordered from './icons/list-unordered.vue'
+import DoubleQuotes from './icons/double-quotes-r.vue'
+import CodeView from './icons/code-view.vue'
+import Link from './icons/link.vue'
+import ArrowGoBack from './icons/arrow-go-back-line.vue'
+import ArrowGoForward from './icons/arrow-go-forward-line.vue'
+import Separator from './icons/separator.vue'
+
 export default {
   Paragraph: {
     label: 'Paragraph',
-    icon: 'type',
+    icon: Text,
     action: (editor) => editor.chain().focus().setParagraph().run(),
     isActive: (editor) => editor.isActive('paragraph'),
   },
+  'Heading 1': {
+    label: 'Heading 1',
+    text: 'H1',
+    icon: H1,
+    action: (editor) =>
+      editor.chain().focus().toggleHeading({ level: 1 }).run(),
+    isActive: (editor) => editor.isActive('heading', { level: 1 }),
+  },
   'Heading 2': {
     label: 'Heading 2',
     text: 'H2',
+    icon: H2,
     action: (editor) =>
       editor.chain().focus().toggleHeading({ level: 2 }).run(),
     isActive: (editor) => editor.isActive('heading', { level: 2 }),
@@ -15,66 +46,115 @@ export default {
   'Heading 3': {
     label: 'Heading 3',
     text: 'H3',
+    icon: H3,
     action: (editor) =>
       editor.chain().focus().toggleHeading({ level: 3 }).run(),
     isActive: (editor) => editor.isActive('heading', { level: 3 }),
   },
+  'Heading 4': {
+    label: 'Heading 4',
+    text: 'H4',
+    icon: H4,
+    action: (editor) =>
+      editor.chain().focus().toggleHeading({ level: 4 }).run(),
+    isActive: (editor) => editor.isActive('heading', { level: 4 }),
+  },
+  'Heading 5': {
+    label: 'Heading 5',
+    text: 'H5',
+    icon: H5,
+    action: (editor) =>
+      editor.chain().focus().toggleHeading({ level: 5 }).run(),
+    isActive: (editor) => editor.isActive('heading', { level: 5 }),
+  },
+  'Heading 6': {
+    label: 'Heading 6',
+    text: 'H6',
+    icon: H6,
+    action: (editor) =>
+      editor.chain().focus().toggleHeading({ level: 6 }).run(),
+    isActive: (editor) => editor.isActive('heading', { level: 6 }),
+  },
   Bold: {
     label: 'Bold',
-    icon: 'bold',
+    icon: Bold,
     action: (editor) => editor.chain().focus().toggleBold().run(),
     isActive: (editor) => editor.isActive('bold'),
   },
   Italic: {
     label: 'Italic',
-    icon: 'italic',
+    icon: Italic,
     action: (editor) => editor.chain().focus().toggleItalic().run(),
     isActive: (editor) => editor.isActive('italic'),
   },
+  Underline: {
+    label: 'Underline',
+    icon: Underline,
+    action: (editor) => editor.chain().focus().toggleUnderline().run(),
+    isActive: (editor) => editor.isActive('underline'),
+  },
   'Bullet List': {
     label: 'Bullet List',
-    icon: 'list',
+    icon: ListOrdered,
     action: (editor) => editor.chain().focus().toggleBulletList().run(),
     isActive: (editor) => editor.isActive('bulletList'),
   },
   'Numbered List': {
     label: 'Numbered List',
-    text: '1.',
+    icon: ListUnordered,
     action: (editor) => editor.chain().focus().toggleOrderedList().run(),
     isActive: (editor) => editor.isActive('orderedList'),
   },
+  'Align Center': {
+    label: 'Align Center',
+    icon: AlignCenter,
+    action: (editor) => editor.chain().focus().setTextAlign('center').run(),
+    isActive: (editor) => editor.isActive({ textAlign: 'center' }),
+  },
+  'Align Left': {
+    label: 'Align Left',
+    icon: AlignLeft,
+    action: (editor) => editor.chain().focus().setTextAlign('left').run(),
+    isActive: (editor) => editor.isActive({ textAlign: 'left' }),
+  },
+  'Align Right': {
+    label: 'Align Right',
+    icon: AlignRight,
+    action: (editor) => editor.chain().focus().setTextAlign('right').run(),
+    isActive: (editor) => editor.isActive({ textAlign: 'right' }),
+  },
   Blockquote: {
     label: 'Blockquote',
-    icon: 'chevron-right',
+    icon: DoubleQuotes,
     action: (editor) => editor.chain().focus().toggleBlockquote().run(),
     isActive: (editor) => editor.isActive('blockquote'),
   },
   Code: {
     label: 'Code',
-    icon: 'code',
+    icon: CodeView,
     action: (editor) => editor.chain().focus().toggleCodeBlock().run(),
     isActive: (editor) => editor.isActive('codeBlock'),
   },
   'Horizontal Rule': {
     label: 'Horizontal Rule',
-    icon: 'minus',
+    icon: Separator,
     action: (editor) => editor.chain().focus().setHorizontalRule().run(),
     isActive: (editor) => false,
   },
   Link: {
     label: 'Link',
-    icon: 'link',
+    icon: Link,
     isActive: (editor) => editor.isActive('link'),
   },
   Undo: {
     label: 'Undo',
-    icon: 'corner-up-left',
+    icon: ArrowGoBack,
     action: (editor) => editor.chain().focus().undo().run(),
     isActive: (editor) => false,
   },
   Redo: {
     label: 'Redo',
-    icon: 'corner-up-right',
+    icon: ArrowGoForward,
     action: (editor) => editor.chain().focus().redo().run(),
     isActive: (editor) => false,
   },

package/src/components/TextEditor/icons/align-center.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M3 4h18v2H3V4zm2 15h14v2H5v-2zm-2-5h18v2H3v-2zm2-5h14v2H5V9z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/align-justify.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M3 4h18v2H3V4zm0 15h18v2H3v-2zm0-5h18v2H3v-2zm0-5h18v2H3V9z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/align-left.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M3 4h18v2H3V4zm0 15h14v2H3v-2zm0-5h18v2H3v-2zm0-5h14v2H3V9z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/align-right.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M3 4h18v2H3V4zm4 15h14v2H7v-2zm-4-5h18v2H3v-2zm4-5h14v2H7V9z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/arrow-go-back-line.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M5.828 7l2.536 2.536L6.95 10.95 2 6l4.95-4.95 1.414 1.414L5.828 5H13a8 8 0 1 1 0 16H4v-2h9a6 6 0 1 0 0-12H5.828z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/arrow-go-forward-line.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M18.172 7H11a6 6 0 1 0 0 12h9v2h-9a8 8 0 1 1 0-16h7.172l-2.536-2.536L17.05 1.05 22 6l-4.95 4.95-1.414-1.414L18.172 7z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/bold.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M8 11h4.5a2.5 2.5 0 1 0 0-5H8v5zm10 4.5a4.5 4.5 0 0 1-4.5 4.5H6V4h6.5a4.5 4.5 0 0 1 3.256 7.606A4.498 4.498 0 0 1 18 15.5zM8 13v5h5.5a2.5 2.5 0 1 0 0-5H8z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/code-view.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M16.95 8.464l1.414-1.414 4.95 4.95-4.95 4.95-1.414-1.414L20.485 12 16.95 8.464zm-9.9 0L3.515 12l3.535 3.536-1.414 1.414L.686 12l4.95-4.95L7.05 8.464z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/double-quotes-r.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M19.417 6.679C20.447 7.773 21 9 21 10.989c0 3.5-2.457 6.637-6.03 8.188l-.893-1.378c3.335-1.804 3.987-4.145 4.247-5.621-.537.278-1.24.375-1.929.311-1.804-.167-3.226-1.648-3.226-3.489a3.5 3.5 0 0 1 3.5-3.5c1.073 0 2.099.49 2.748 1.179zm-10 0C10.447 7.773 11 9 11 10.989c0 3.5-2.457 6.637-6.03 8.188l-.893-1.378c3.335-1.804 3.987-4.145 4.247-5.621-.537.278-1.24.375-1.929.311C4.591 12.322 3.17 10.841 3.17 9a3.5 3.5 0 0 1 3.5-3.5c1.073 0 2.099.49 2.748 1.179z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/font-color.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M15.246 14H8.754l-1.6 4H5l6-15h2l6 15h-2.154l-1.6-4zm-.8-2L12 5.885 9.554 12h4.892zM3 20h18v2H3v-2z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/format-clear.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M12.651 14.065L11.605 20H9.574l1.35-7.661-7.41-7.41L4.93 3.515 20.485 19.07l-1.414 1.414-6.42-6.42zm-.878-6.535l.27-1.53h-1.8l-2-2H20v2h-5.927L13.5 9.257 11.773 7.53z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/h-1.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0H24V24H0z" />
+    <path
+      d="M13 20h-2v-7H4v7H2V4h2v7h7V4h2v16zm8-12v12h-2v-9.796l-2 .536V8.67L19.5 8H21z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/h-2.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0H24V24H0z" />
+    <path
+      d="M4 4v7h7V4h2v16h-2v-7H4v7H2V4h2zm14.5 4c2.071 0 3.75 1.679 3.75 3.75 0 .857-.288 1.648-.772 2.28l-.148.18L18.034 18H22v2h-7v-1.556l4.82-5.546c.268-.307.43-.709.43-1.148 0-.966-.784-1.75-1.75-1.75-.918 0-1.671.707-1.744 1.606l-.006.144h-2C14.75 9.679 16.429 8 18.5 8z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/h-3.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0H24V24H0z" />
+    <path
+      d="M22 8l-.002 2-2.505 2.883c1.59.435 2.757 1.89 2.757 3.617 0 2.071-1.679 3.75-3.75 3.75-1.826 0-3.347-1.305-3.682-3.033l1.964-.382c.156.806.866 1.415 1.718 1.415.966 0 1.75-.784 1.75-1.75s-.784-1.75-1.75-1.75c-.286 0-.556.069-.794.19l-1.307-1.547L19.35 10H15V8h7zM4 4v7h7V4h2v16h-2v-7H4v7H2V4h2z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/h-4.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0H24V24H0z" />
+    <path
+      d="M13 20h-2v-7H4v7H2V4h2v7h7V4h2v16zm9-12v8h1.5v2H22v2h-2v-2h-5.5v-1.34l5-8.66H22zm-2 3.133L17.19 16H20v-4.867z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/h-5.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0H24V24H0z" />
+    <path
+      d="M22 8v2h-4.323l-.464 2.636c.33-.089.678-.136 1.037-.136 2.21 0 4 1.79 4 4s-1.79 4-4 4c-1.827 0-3.367-1.224-3.846-2.897l1.923-.551c.24.836 1.01 1.448 1.923 1.448 1.105 0 2-.895 2-2s-.895-2-2-2c-.63 0-1.193.292-1.56.748l-1.81-.904L16 8h6zM4 4v7h7V4h2v16h-2v-7H4v7H2V4h2z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/h-6.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0H24V24H0z" />
+    <path
+      d="M21.097 8l-2.598 4.5c2.21 0 4.001 1.79 4.001 4s-1.79 4-4 4-4-1.79-4-4c0-.736.199-1.426.546-2.019L18.788 8h2.309zM4 4v7h7V4h2v16h-2v-7H4v7H2V4h2zm14.5 10.5c-1.105 0-2 .895-2 2s.895 2 2 2 2-.895 2-2-.895-2-2-2z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/italic.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M15 20H7v-2h2.927l2.116-12H9V4h8v2h-2.927l-2.116 12H15z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/link.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M18.364 15.536L16.95 14.12l1.414-1.414a5 5 0 1 0-7.071-7.071L9.879 7.05 8.464 5.636 9.88 4.222a7 7 0 0 1 9.9 9.9l-1.415 1.414zm-2.828 2.828l-1.415 1.414a7 7 0 0 1-9.9-9.9l1.415-1.414L7.05 9.88l-1.414 1.414a5 5 0 1 0 7.071 7.071l1.414-1.414 1.415 1.414zm-.708-10.607l1.415 1.415-7.071 7.07-1.415-1.414 7.071-7.07z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/list-ordered.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M8 4h13v2H8V4zM5 3v3h1v1H3V6h1V4H3V3h2zM3 14v-2.5h2V11H3v-1h3v2.5H4v.5h2v1H3zm2 5.5H3v-1h2V18H3v-1h3v4H3v-1h2v-.5zM8 11h13v2H8v-2zm0 7h13v2H8v-2z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/list-unordered.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M8 4h13v2H8V4zM4.5 6.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0 7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0 6.9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM8 11h13v2H8v-2zm0 7h13v2H8v-2z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/readme.md

@@ -0,0 +1 @@
+Icons from https://remixicon.com/

package/src/components/TextEditor/icons/separator.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M2 11h2v2H2v-2zm4 0h12v2H6v-2zm14 0h2v2h-2v-2z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/strikethrough.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M17.154 14c.23.516.346 1.09.346 1.72 0 1.342-.524 2.392-1.571 3.147C14.88 19.622 13.433 20 11.586 20c-1.64 0-3.263-.381-4.87-1.144V16.6c1.52.877 3.075 1.316 4.666 1.316 2.551 0 3.83-.732 3.839-2.197a2.21 2.21 0 0 0-.648-1.603l-.12-.117H3v-2h18v2h-3.846zm-4.078-3H7.629a4.086 4.086 0 0 1-.481-.522C6.716 9.92 6.5 9.246 6.5 8.452c0-1.236.466-2.287 1.397-3.153C8.83 4.433 10.271 4 12.222 4c1.471 0 2.879.328 4.222.984v2.152c-1.2-.687-2.515-1.03-3.946-1.03-2.48 0-3.719.782-3.719 2.346 0 .42.218.786.654 1.099.436.313.974.562 1.613.75.62.18 1.297.414 2.03.699z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/table-2.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M13 10v4h6v-4h-6zm-2 0H5v4h6v-4zm2 9h6v-3h-6v3zm-2 0v-3H5v3h6zm2-14v3h6V5h-6zm-2 0H5v3h6V5zM4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/text.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path d="M13 6v15h-2V6H5V4h14v2z" fill="currentColor" />
+  </svg>
+</template>

package/src/components/TextEditor/icons/underline.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M8 3v9a4 4 0 1 0 8 0V3h2v9a6 6 0 1 1-12 0V3h2zM4 20h16v2H4v-2z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/index.js

@@ -1,5 +1,6 @@
 // components
 export { default as Alert } from './components/Alert.vue'
+export { default as Autocomplete } from './components/Autocomplete.vue'
 export { default as Avatar } from './components/Avatar.vue'
 export { default as Badge } from './components/Badge.vue'
 export { default as Button } from './components/Button.vue'

package/src/utils/pageMeta.js

@@ -18,7 +18,10 @@ function createMixin() {
             try {
               return this.$options.pageMeta.call(this)
             } catch (error) {
-              console.warn('Failed to parse pageMeta\n\n', error)
+              let debugInfo = `${this.$options.name} (${
+                this.$options.__file || ''
+              })`
+              console.warn('Failed to parse pageMeta in', debugInfo)
               return null
             }
           },

package/src/utils/resources.js

@@ -58,6 +58,10 @@ export function createResource(options, vm, getResource) {
       options.onFetch.call(vm, out.params)
     }
 
+    if (options.beforeSubmit) {
+      options.beforeSubmit.call(vm, out.params)
+    }
+
     let validateFunction = tempOptions.validate || options.validate
     let errorFunctions = [options.onError, tempOptions.onError]
     let successFunctions = [options.onSuccess, tempOptions.onSuccess]
@@ -67,14 +71,14 @@ export function createResource(options, vm, getResource) {
       try {
         invalidMessage = await validateFunction.call(vm, out.params)
         if (invalidMessage && typeof invalidMessage == 'string') {
+          out.loading = false
           let error = new Error(invalidMessage)
           handleError(error, errorFunctions)
-          out.loading = false
           return
         }
       } catch (error) {
-        handleError(error, errorFunctions)
         out.loading = false
+        handleError(error, errorFunctions)
         return
       }
     }
@@ -92,6 +96,7 @@ export function createResource(options, vm, getResource) {
       handleError(error, errorFunctions)
     }
     out.loading = false
+    return out.data
   }
 
   function update({ method, params, auto }) {
@@ -117,7 +122,6 @@ export function createResource(options, vm, getResource) {
   }
 
   function handleError(error, errorFunctions) {
-    console.error(error)
     if (out.previousData) {
       out.data = out.previousData
     }
@@ -127,6 +131,7 @@ export function createResource(options, vm, getResource) {
         fn.call(vm, error)
       }
     }
+    throw error
   }
 
   // usage:
@@ -173,11 +178,18 @@ export function createDocumentResource(options, vm) {
         fieldname: values,
       }
     },
+    beforeSubmit(params) {
+      out.previousDoc = JSON.stringify(out.doc)
+      Object.assign(out.doc, params.fieldname || {})
+    },
     onSuccess(data) {
       out.doc = transform(data)
       options.setValue?.onSuccess?.call(vm, data)
     },
-    onError: options.setValue?.onError,
+    onError(error) {
+      out.doc = JSON.parse(out.previousDoc)
+      options.setValue?.onError?.call(vm, error)
+    },
   }
 
   let out = reactive({