pimelon-ui 0.0.98

package/src/components/Popover.vue

@@ -0,0 +1,253 @@
+<template>
+  <div ref="reference">
+    <div
+      ref="target"
+      :class="['inline-block', $attrs.class]"
+      @click="updatePosition"
+      @focusin="updatePosition"
+      @keydown="updatePosition"
+      @mouseover="onMouseover"
+      @mouseleave="onMouseleave"
+    >
+      <slot
+        name="target"
+        v-bind="{ togglePopover, updatePosition, open, close, isOpen }"
+      />
+    </div>
+    <teleport to="#melonui-popper-root">
+      <div
+        ref="popover"
+        :class="popoverClass"
+        class="popover-container relative z-[100]"
+        :style="{ minWidth: targetWidth ? targetWidth + 'px' : null }"
+        @mouseover="pointerOverTargetOrPopup = true"
+        @mouseleave="onMouseleave"
+      >
+        <transition v-bind="popupTransition">
+          <div v-show="isOpen">
+            <slot
+              name="body"
+              v-bind="{ togglePopover, updatePosition, open, close, isOpen }"
+            >
+              <div class="rounded-lg border border-gray-100 bg-white shadow-xl">
+                <slot
+                  name="body-main"
+                  v-bind="{
+                    togglePopover,
+                    updatePosition,
+                    open,
+                    close,
+                    isOpen,
+                  }"
+                />
+              </div>
+            </slot>
+          </div>
+        </transition>
+      </div>
+    </teleport>
+  </div>
+</template>
+
+<script>
+import { createPopper } from '@popperjs/core'
+
+export default {
+  name: 'Popover',
+  inheritAttrs: false,
+  props: {
+    show: {
+      default: undefined,
+    },
+    trigger: {
+      type: String,
+      default: 'click', // click, hover
+    },
+    hoverDelay: {
+      type: Number,
+      default: 0,
+    },
+    leaveDelay: {
+      type: Number,
+      default: 0,
+    },
+    placement: {
+      type: String,
+      default: 'bottom-start',
+    },
+    popoverClass: [String, Object, Array],
+    transition: {
+      default: null,
+    },
+    hideOnBlur: {
+      default: true,
+    },
+  },
+  emits: ['open', 'close', 'update:show'],
+  expose: ['open', 'close'],
+  data() {
+    return {
+      showPopup: false,
+      targetWidth: null,
+      pointerOverTargetOrPopup: false,
+    }
+  },
+  watch: {
+    show(val) {
+      if (val) {
+        this.open()
+      } else {
+        this.close()
+      }
+    },
+  },
+  created() {
+    if (typeof window === 'undefined') return
+    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.hideOnBlur) {
+      document.addEventListener('click', this.listener)
+    }
+    this.$nextTick(() => {
+      this.targetWidth = this.$refs['target'].clientWidth
+    })
+  },
+  beforeDestroy() {
+    this.popper && this.popper.destroy()
+    document.removeEventListener('click', this.listener)
+  },
+  computed: {
+    showPropPassed() {
+      return this.show != null
+    },
+    isOpen: {
+      get() {
+        if (this.showPropPassed) {
+          return this.show
+        }
+        return this.showPopup
+      },
+      set(val) {
+        val = Boolean(val)
+        if (this.showPropPassed) {
+          this.$emit('update:show', val)
+        } else {
+          this.showPopup = val
+        }
+        if (val === false) {
+          this.$emit('close')
+        } else if (val === true) {
+          this.$emit('open')
+        }
+      },
+    },
+    popupTransition() {
+      let templates = {
+        default: {
+          enterActiveClass: 'transition duration-200 ease-out',
+          enterFromClass: 'translate-y-1 opacity-0',
+          enterToClass: 'translate-y-0 opacity-100',
+          leaveActiveClass: 'transition duration-150 ease-in',
+          leaveFromClass: 'translate-y-0 opacity-100',
+          leaveToClass: 'translate-y-1 opacity-0',
+        },
+      }
+      if (typeof this.transition === 'string') {
+        return templates[this.transition]
+      }
+      return this.transition
+    },
+  },
+  methods: {
+    setupPopper() {
+      if (!this.popper) {
+        this.popper = createPopper(this.$refs.reference, this.$refs.popover, {
+          placement: this.placement,
+        })
+      } else {
+        this.updatePosition()
+      }
+    },
+    updatePosition() {
+      this.popper && this.popper.update()
+    },
+    togglePopover(flag) {
+      if (flag instanceof Event) {
+        flag = null
+      }
+      if (flag == null) {
+        flag = !this.isOpen
+      }
+      flag = Boolean(flag)
+      if (flag) {
+        this.open()
+      } else {
+        this.close()
+      }
+    },
+    open() {
+      this.isOpen = true
+      this.$nextTick(() => this.setupPopper())
+    },
+    close() {
+      this.isOpen = false
+    },
+    onMouseover() {
+      this.pointerOverTargetOrPopup = true
+      if (this.leaveTimer) {
+        clearTimeout(this.leaveTimer)
+        this.leaveTimer = null
+      }
+      if (this.trigger === 'hover') {
+        if (this.hoverDelay) {
+          this.hoverTimer = setTimeout(() => {
+            if (this.pointerOverTargetOrPopup) {
+              this.open()
+            }
+          }, Number(this.hoverDelay) * 1000)
+        } else {
+          this.open()
+        }
+      }
+    },
+    onMouseleave(e) {
+      this.pointerOverTargetOrPopup = false
+      if (this.hoverTimer) {
+        clearTimeout(this.hoverTimer)
+        this.hoverTimer = null
+      }
+      if (this.trigger === 'hover') {
+        if (this.leaveTimer) {
+          clearTimeout(this.leaveTimer)
+        }
+        if (this.leaveDelay) {
+          this.leaveTimer = setTimeout(() => {
+            if (!this.pointerOverTargetOrPopup) {
+              this.close()
+            }
+          }, Number(this.leaveDelay) * 1000)
+        } else {
+          if (!this.pointerOverTargetOrPopup) {
+            this.close()
+          }
+        }
+      }
+    },
+  },
+}
+</script>

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/TextEditor/FontColor.vue

@@ -0,0 +1,108 @@
+<template>
+  <Popover transition="default">
+    <template #target="{ togglePopover, isOpen }">
+      <slot
+        v-bind="{ onClick: () => togglePopover(), isActive: isOpen }"
+      ></slot>
+    </template>
+    <template #body-main>
+      <div class="p-2">
+        <div class="text-sm text-gray-700">Text Color</div>
+        <div class="mt-1 grid grid-cols-8 gap-1">
+          <Tooltip
+            class="flex"
+            v-for="color in foregroundColors"
+            :key="color.name"
+            :text="color.name"
+          >
+            <button
+              :aria-label="color.name"
+              class="flex h-5 w-5 items-center justify-center rounded border text-base"
+              :style="{
+                color: color.hex,
+              }"
+              @click="setForegroundColor(color)"
+            >
+              A
+            </button>
+          </Tooltip>
+        </div>
+        <div class="mt-2 text-sm text-gray-700">Background Color</div>
+        <div class="mt-1 grid grid-cols-8 gap-1">
+          <Tooltip
+            class="flex"
+            v-for="color in backgroundColors"
+            :key="color.name"
+            :text="color.name"
+          >
+            <button
+              :aria-label="color.name"
+              class="flex h-5 w-5 items-center justify-center rounded border text-base text-gray-900"
+              :class="!color.hex ? 'border-gray-200' : 'border-transparent'"
+              :style="{
+                backgroundColor: color.hex,
+              }"
+              @click="setBackgroundColor(color)"
+            >
+              A
+            </button>
+          </Tooltip>
+        </div>
+      </div>
+    </template>
+  </Popover>
+</template>
+<script>
+import Popover from '../Popover.vue'
+import Tooltip from '../Tooltip.vue'
+
+export default {
+  name: 'FontColor',
+  props: ['editor'],
+  components: { Popover, Tooltip },
+  methods: {
+    setBackgroundColor(color) {
+      if (color.name != 'Default') {
+        this.editor.chain().focus().toggleHighlight({ color: color.hex }).run()
+      } else {
+        this.editor.chain().focus().unsetHighlight().run()
+      }
+    },
+    setForegroundColor(color) {
+      if (color.name != 'Default') {
+        this.editor.chain().focus().setColor(color.hex).run()
+      } else {
+        this.editor.chain().focus().unsetColor().run()
+      }
+    },
+  },
+  computed: {
+    foregroundColors() {
+      // tailwind css colors, scale 600
+      return [
+        { name: 'Default', hex: '#1F272E' },
+        { name: 'Yellow', hex: '#ca8a04' },
+        { name: 'Orange', hex: '#ea580c' },
+        { name: 'Red', hex: '#dc2626' },
+        { name: 'Green', hex: '#16a34a' },
+        { name: 'Blue', hex: '#1579D0' },
+        { name: 'Purple', hex: '#9333ea' },
+        { name: 'Pink', hex: '#db2777' },
+      ]
+    },
+    backgroundColors() {
+      // tailwind css colors, scale 100
+      return [
+        { name: 'Default', hex: null },
+        { name: 'Yellow', hex: '#fef9c3' },
+        { name: 'Orange', hex: '#ffedd5' },
+        { name: 'Red', hex: '#fee2e2' },
+        { name: 'Green', hex: '#dcfce7' },
+        { name: 'Blue', hex: '#D3E9FC' },
+        { name: 'Purple', hex: '#f3e8ff' },
+        { name: 'Pink', hex: '#fce7f3' },
+      ]
+    },
+  },
+}
+</script>

package/src/components/TextEditor/InsertImage.vue

@@ -0,0 +1,74 @@
+<template>
+  <slot v-bind="{ onClick: openDialog }"></slot>
+  <Dialog
+    :options="{ title: 'Add Image' }"
+    v-model="addImageDialog.show"
+    @after-leave="reset"
+  >
+    <template #body-content>
+      <label
+        class="relative cursor-pointer rounded-lg bg-gray-100 py-1 focus-within:bg-gray-200 hover:bg-gray-200"
+      >
+        <input
+          type="file"
+          class="w-full opacity-0"
+          @change="onImageSelect"
+          accept="image/*"
+        />
+        <span class="absolute inset-0 select-none px-2 py-1 text-base">
+          {{ addImageDialog.file ? 'Select another image' : 'Select an image' }}
+        </span>
+      </label>
+      <img
+        v-if="addImageDialog.url"
+        :src="addImageDialog.url"
+        class="mt-2 w-full rounded-lg"
+      />
+    </template>
+    <template #actions>
+      <Button appearance="primary" @click="addImage(addImageDialog.url)">
+        Insert Image
+      </Button>
+      <Button @click="reset"> Cancel </Button>
+    </template>
+  </Dialog>
+</template>
+<script>
+import fileToBase64 from '../../utils/file-to-base64'
+import Dialog from '../Dialog.vue'
+import Button from '../Button.vue'
+
+export default {
+  name: 'InsertImage',
+  props: ['editor'],
+  expose: ['openDialog'],
+  data() {
+    return {
+      addImageDialog: { url: '', file: null, show: false },
+    }
+  },
+  components: { Button, Dialog },
+  methods: {
+    openDialog() {
+      this.addImageDialog.show = true
+    },
+    onImageSelect(e) {
+      let file = e.target.files[0]
+      if (!file) {
+        return
+      }
+      this.addImageDialog.file = file
+      fileToBase64(file).then((base64) => {
+        this.addImageDialog.url = base64
+      })
+    },
+    addImage(src) {
+      this.editor.chain().focus().setImage({ src }).run()
+      this.reset()
+    },
+    reset() {
+      this.addImageDialog = this.$options.data().addImageDialog
+    },
+  },
+}
+</script>

package/src/components/TextEditor/InsertLink.vue

@@ -0,0 +1,67 @@
+<template>
+  <slot v-bind="{ onClick: openDialog }"></slot>
+  <Dialog
+    :options="{ title: 'Set Link' }"
+    v-model="setLinkDialog.show"
+    @after-leave="reset"
+  >
+    <template #body-content>
+      <Input
+        type="text"
+        label="URL"
+        v-model="setLinkDialog.url"
+        @keydown.enter="(e) => setLink(e.target.value)"
+      />
+    </template>
+    <template #actions>
+      <Button appearance="primary" @click="setLink(setLinkDialog.url)">
+        Save
+      </Button>
+    </template>
+  </Dialog>
+</template>
+<script>
+import Dialog from '../Dialog.vue'
+import Button from '../Button.vue'
+import Input from '../Input.vue'
+
+export default {
+  name: 'InsertLink',
+  props: ['editor'],
+  components: { Button, Input, Dialog },
+  data() {
+    return {
+      setLinkDialog: { url: '', show: false },
+    }
+  },
+  methods: {
+    openDialog() {
+      let existingURL = this.editor.getAttributes('link').href
+      if (existingURL) {
+        this.setLinkDialog.url = existingURL
+      }
+      this.setLinkDialog.show = true
+    },
+    setLink(url) {
+      // empty
+      if (url === '') {
+        this.editor.chain().focus().extendMarkRange('link').unsetLink().run()
+      } else {
+        // update link
+        this.editor
+          .chain()
+          .focus()
+          .extendMarkRange('link')
+          .setLink({ href: url })
+          .run()
+      }
+
+      this.setLinkDialog.show = false
+      this.setLinkDialog.url = ''
+    },
+    reset() {
+      this.setLinkDialog = this.$options.data().setLinkDialog
+    },
+  },
+}
+</script>

package/src/components/TextEditor/InsertVideo.vue

@@ -0,0 +1,94 @@
+<template>
+  <slot v-bind="{ onClick: openDialog }"></slot>
+  <Dialog
+    :options="{ title: 'Add Video' }"
+    v-model="addVideoDialog.show"
+    @after-leave="reset"
+  >
+    <template #body-content>
+      <FileUploader
+        file-types="video/*"
+        @success="(file) => (addVideoDialog.url = file.file_url)"
+      >
+        <template v-slot="{ file, progress, uploading, openFileSelector }">
+          <div class="flex items-center space-x-2">
+            <Button @click="openFileSelector">
+              {{
+                uploading
+                  ? `Uploading ${progress}%`
+                  : addVideoDialog.url
+                  ? 'Change Video'
+                  : 'Upload Video'
+              }}
+            </Button>
+            <Button
+              v-if="addVideoDialog.url"
+              @click="
+                () => {
+                  addVideoDialog.url = null
+                  addVideoDialog.file = null
+                }
+              "
+            >
+              Remove
+            </Button>
+          </div>
+        </template>
+      </FileUploader>
+      <video
+        v-if="addVideoDialog.url"
+        :src="addVideoDialog.url"
+        class="mt-2 w-full rounded-lg"
+        type="video/mp4"
+        controls
+      />
+    </template>
+    <template #actions>
+      <Button appearance="primary" @click="addVideo(addVideoDialog.url)">
+        Insert Video
+      </Button>
+      <Button @click="reset">Cancel</Button>
+    </template>
+  </Dialog>
+</template>
+<script>
+import Button from '../Button.vue'
+import Dialog from '../Dialog.vue'
+import FileUploader from '../FileUploader.vue'
+
+export default {
+  name: 'InsertImage',
+  props: ['editor'],
+  expose: ['openDialog'],
+  data() {
+    return {
+      addVideoDialog: { url: '', file: null, show: false },
+    }
+  },
+  components: { Button, Dialog, FileUploader },
+  methods: {
+    openDialog() {
+      this.addVideoDialog.show = true
+    },
+    onVideoSelect(e) {
+      let file = e.target.files[0]
+      if (!file) {
+        return
+      }
+      this.addVideoDialog.file = file
+    },
+
+    addVideo(src) {
+      this.editor
+        .chain()
+        .focus()
+        .insertContent(`<video src="${src}"></video>`)
+        .run()
+      this.reset()
+    },
+    reset() {
+      this.addVideoDialog = this.$options.data().addVideoDialog
+    },
+  },
+}
+</script>

package/src/components/TextEditor/MentionList.vue

@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <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"
+      >
+        {{ item.label }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    items: {
+      type: Array,
+      required: true,
+    },
+    command: {
+      type: Function,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      selectedIndex: 0,
+    }
+  },
+  watch: {
+    items() {
+      this.selectedIndex = 0
+    },
+  },
+  methods: {
+    onKeyDown({ event }) {
+      if (event.key === 'ArrowUp') {
+        this.upHandler()
+        return true
+      }
+      if (event.key === 'ArrowDown') {
+        this.downHandler()
+        return true
+      }
+      if (event.key === 'Enter') {
+        this.enterHandler()
+        return true
+      }
+      return false
+    },
+    upHandler() {
+      this.selectedIndex =
+        (this.selectedIndex + this.items.length - 1) % this.items.length
+    },
+    downHandler() {
+      this.selectedIndex = (this.selectedIndex + 1) % this.items.length
+    },
+    enterHandler() {
+      this.selectItem(this.selectedIndex)
+    },
+    selectItem(index) {
+      const item = this.items[index]
+      if (item) {
+        this.command({ id: item.value, label: item.label })
+      }
+    },
+  },
+}
+</script>
+
+<style>
+.item {
+  display: block;
+  margin: 0;
+  width: 100%;
+  text-align: left;
+  background: transparent;
+  border-radius: 0.4rem;
+  border: 1px solid transparent;
+  padding: 0.2rem 0.4rem;
+}
+.item.is-selected {
+  border-color: #000;
+}
+</style>