pimelon-ui 0.0.19

package/src/components/Popover.vue

@@ -0,0 +1,192 @@
+<template>
+  <div ref="reference">
+    <div
+      class="h-full"
+      ref="target"
+      @click="updatePosition"
+      @focusin="updatePosition"
+      @keydown="updatePosition"
+    >
+      <slot
+        name="target"
+        v-bind="{ togglePopover, updatePosition, open, close }"
+      ></slot>
+    </div>
+    <teleport to="#melonui-popper-root">
+      <div
+        ref="popover"
+        :class="popoverClass"
+        class="relative z-[100] popover-container"
+        :style="{ minWidth: targetWidth ? targetWidth + 'px' : null }"
+      >
+        <div v-if="!hideArrow" class="popover-arrow" ref="popover-arrow"></div>
+        <slot
+          name="content"
+          v-bind="{ togglePopover, updatePosition, open, close }"
+        ></slot>
+      </div>
+    </teleport>
+  </div>
+</template>
+
+<script>
+import { createPopper } from '@popperjs/core'
+
+export default {
+  name: 'Popover',
+  props: {
+    hideArrow: {
+      type: Boolean,
+      default: true,
+    },
+    show: {
+      default: null,
+    },
+    right: Boolean,
+    placement: {
+      type: String,
+      default: 'bottom-start',
+    },
+    popoverClass: [String, Object, Array],
+  },
+  emits: ['init', 'open', 'close'],
+  watch: {
+    show: {
+      immediate: true,
+      handler(val) {
+        if (val) {
+          this.open()
+        } else {
+          this.close()
+        }
+      },
+    },
+  },
+  data() {
+    return {
+      isOpen: false,
+      targetWidth: null,
+    }
+  },
+  created() {
+    if (!document.getElementById('melonui-popper-root')) {
+      const root = document.createElement('div')
+      root.id = 'melonui-popper-root'
+      document.body.appendChild(root)
+    }
+  },
+  mounted() {
+    this.listener = (e) => {
+      let $els = [this.$refs.reference, this.$refs.popover]
+      let insideClick = $els.some(
+        ($el) => $el && (e.target === $el || $el.contains(e.target))
+      )
+      if (insideClick) {
+        return
+      }
+      this.close()
+    }
+    if (this.show == null) {
+      document.addEventListener('click', this.listener)
+    }
+    this.$nextTick(() => {
+      this.targetWidth = this.$refs['target'].clientWidth
+    })
+  },
+  beforeDestroy() {
+    this.popper && this.popper.destroy()
+    document.removeEventListener('click', this.listener)
+  },
+  methods: {
+    setupPopper() {
+      if (!this.popper) {
+        this.popper = createPopper(this.$refs.reference, this.$refs.popover, {
+          placement: this.placement,
+          modifiers: !this.hideArrow
+            ? [
+                {
+                  name: 'arrow',
+                  options: {
+                    element: this.$refs['popover-arrow'],
+                  },
+                },
+                {
+                  name: 'offset',
+                  options: {
+                    offset: [0, 10],
+                  },
+                },
+              ]
+            : [],
+        })
+      } else {
+        this.updatePosition()
+      }
+      this.$emit('init')
+    },
+    updatePosition() {
+      this.popper && this.popper.update()
+    },
+    togglePopover(flag) {
+      if (flag == null) {
+        flag = !this.isOpen
+      }
+      flag = Boolean(flag)
+      if (flag) {
+        this.open()
+      } else {
+        this.close()
+      }
+    },
+    open() {
+      if (this.isOpen) {
+        return
+      }
+      this.isOpen = true
+      this.$nextTick(() => this.setupPopper())
+      this.$emit('open')
+    },
+    close() {
+      if (!this.isOpen) {
+        return
+      }
+      this.isOpen = false
+      this.$emit('close')
+    },
+  },
+}
+</script>
+<style scoped>
+.popover-arrow,
+.popover-arrow::after {
+  position: absolute;
+  width: theme('spacing.4');
+  height: theme('spacing.4');
+  z-index: -1;
+}
+
+.popover-arrow::after {
+  content: '';
+  background: white;
+  transform: rotate(45deg);
+  border-top: 1px solid theme('borderColor.gray.400');
+  border-left: 1px solid theme('borderColor.gray.400');
+  border-top-left-radius: 6px;
+}
+
+.popover-container[data-popper-placement^='top'] > .popover-arrow {
+  bottom: calc(theme('spacing.2') * -1);
+}
+
+.popover-container[data-popper-placement^='bottom'] > .popover-arrow {
+  top: calc(theme('spacing.2') * -1);
+}
+
+.popover-container[data-popper-placement^='left'] > .popover-arrow {
+  right: calc(theme('spacing.2') * -1);
+}
+
+.popover-container[data-popper-placement^='right'] > .popover-arrow {
+  left: calc(theme('spacing.2') * -1);
+}
+</style>

package/src/components/Resource.vue

@@ -0,0 +1,21 @@
+<script>
+export default {
+  name: 'Resource',
+  props: ['options'],
+  resources: {
+    resource() {
+      return this.options
+    },
+  },
+  render() {
+    return this.$slots.default({
+      resource: this.$resources.resource,
+      data: this.$resources.resource.data,
+      error: this.$resources.resource.error,
+      loading: this.$resources.resource.loading,
+      fetch: (params) => this.$resources.resource.fetch(params),
+      submit: (params) => this.$resources.resource.submit(params),
+    })
+  },
+}
+</script>

package/src/components/Spinner.vue

@@ -0,0 +1,27 @@
+<template>
+  <svg
+    class="animate-spin"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <circle
+      class="opacity-25"
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      stroke-width="4"
+    ></circle>
+    <path
+      class="opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    ></path>
+  </svg>
+</template>
+<script>
+export default {
+  name: 'Spinner',
+}
+</script>

package/src/components/SuccessMessage.vue

@@ -0,0 +1,15 @@
+<template>
+  <div
+    v-if="message"
+    class="text-sm text-green-600 whitespace-pre-line"
+    role="success"
+    v-html="message"
+  ></div>
+</template>
+
+<script>
+export default {
+  name: 'SuccessMessage',
+  props: ['message'],
+}
+</script>

package/src/components/TextEditor/Menu.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="inline-flex px-1 py-1 bg-white">
+    <div class="inline-flex items-center gap-1">
+      <template v-for="button in buttons" :key="button.label">
+        <div
+          class="border-l w-[2px] h-4"
+          v-if="button.type === 'separator'"
+        ></div>
+        <button
+          v-else
+          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>
+      </template>
+    </div>
+  </div>
+</template>
+<script>
+import { FeatherIcon } from 'pimelon-ui'
+export default {
+  name: 'TipTapMenu',
+  props: ['editor', 'buttons'],
+  components: { FeatherIcon },
+}
+</script>

package/src/components/TextEditor/TextEditor.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="relative w-full" :class="$attrs.class" v-if="editor">
+    <BubbleMenu
+      v-if="bubbleMenuButtons"
+      class="bubble-menu"
+      :tippy-options="{ duration: 100 }"
+      :editor="editor"
+    >
+      <Menu
+        :editor="editor"
+        class="border border-gray-100 rounded-md shadow-sm"
+        :buttons="bubbleMenuButtons"
+      />
+    </BubbleMenu>
+
+    <Menu
+      v-if="fixedMenuButtons"
+      class="w-full border rounded-t-lg border-gray-50 border-b-gray-100"
+      :editor="editor"
+      :buttons="fixedMenuButtons"
+    />
+
+    <FloatingMenu
+      v-if="floatingMenuButtons"
+      :tippy-options="{ duration: 100 }"
+      :editor="editor"
+      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, 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',
+  inheritAttrs: false,
+  components: {
+    EditorContent,
+    BubbleMenu,
+    FloatingMenu,
+    Menu,
+  },
+  props: [
+    'content',
+    'placeholder',
+    'editorClass',
+    'fixedMenu',
+    'bubbleMenu',
+    'floatingMenu',
+    'extensions',
+  ],
+  emits: ['change'],
+  expose: ['editor'],
+  data() {
+    return {
+      editor: null,
+    }
+  },
+  mounted() {
+    this.editor = new Editor({
+      content: this.content || '<p></p>',
+      editorProps: {
+        attributes: {
+          class: ['prose prose-sm prose-p:my-1', this.editorClass].join(' '),
+        },
+      },
+      extensions: [
+        StarterKit,
+        Image,
+        Placeholder.configure({
+          placeholder: this.placeholder || 'Write something...',
+        }),
+        ...(this.extensions || []),
+      ],
+      onUpdate: ({ editor }) => {
+        this.$emit('change', editor.getHTML())
+      },
+    })
+  },
+  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>
+.ProseMirror:not(.ProseMirror-focused) p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: theme('colors.gray.500');
+  pointer-events: none;
+  height: 0;
+}
+</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/TextEditor/index.js

@@ -0,0 +1 @@
+export { default } from './TextEditor.vue'