pimelon-ui 0.0.98

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/components/TextEditor/icons/video-add-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="M16 4c.552 0 1 .448 1 1v4.2l5.213-3.65c.226-.158.538-.103.697.124.058.084.09.184.09.286v12.08c0 .276-.224.5-.5.5-.103 0-.203-.032-.287-.09L17 14.8V19c0 .552-.448 1-1 1H2c-.552 0-1-.448-1-1V5c0-.552.448-1 1-1h14zm-1 2H3v12h12V6zM8 8h2v3h3v2H9.999L10 16H8l-.001-3H5v-2h3V8zm13 .841l-4 2.8v.718l4 2.8V8.84z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/image-extension.js

@@ -0,0 +1,152 @@
+// Plugin adapted from the following examples:
+// - https://github.com/ueberdosis/tiptap/blob/main/packages/extension-image/src/image.ts
+// - https://gist.github.com/slava-vishnyakov/16076dff1a77ddaca93c4bccd4ec4521
+
+import { mergeAttributes, Node, nodeInputRule } from '@tiptap/core'
+import { Plugin } from 'prosemirror-state'
+import fileToBase64 from '../../utils/file-to-base64'
+
+export const inputRegex =
+  /(?:^|\s)(!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/
+
+export default Node.create({
+  name: 'image',
+  addOptions() {
+    return {
+      inline: false,
+      HTMLAttributes: {},
+    }
+  },
+  inline() {
+    return this.options.inline
+  },
+  group() {
+    return this.options.inline ? 'inline' : 'block'
+  },
+  draggable: true,
+  addAttributes() {
+    return {
+      src: {
+        default: null,
+      },
+      alt: {
+        default: null,
+      },
+      title: {
+        default: null,
+      },
+    }
+  },
+  parseHTML() {
+    return [
+      {
+        tag: 'img[src]',
+      },
+    ]
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ['img', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)]
+  },
+
+  addCommands() {
+    return {
+      setImage:
+        (options) =>
+        ({ commands }) => {
+          return commands.insertContent({
+            type: this.name,
+            attrs: options,
+          })
+        },
+    }
+  },
+
+  addInputRules() {
+    return [
+      nodeInputRule({
+        find: inputRegex,
+        type: this.type,
+        getAttributes: (match) => {
+          const [, , alt, src, title] = match
+
+          return { src, alt, title }
+        },
+      }),
+    ]
+  },
+
+  addProseMirrorPlugins() {
+    return [dropImagePlugin()]
+  },
+})
+
+const dropImagePlugin = () => {
+  return new Plugin({
+    props: {
+      handlePaste(view, event, slice) {
+        const items = Array.from(event.clipboardData?.items || [])
+        const { schema } = view.state
+
+        items.forEach((item) => {
+          const image = item.getAsFile()
+          if (!image) return
+
+          if (item.type.indexOf('image') === 0) {
+            event.preventDefault()
+
+            fileToBase64(image).then((base64) => {
+              const node = schema.nodes.image.create({
+                src: base64,
+              })
+              const transaction = view.state.tr.replaceSelectionWith(node)
+              view.dispatch(transaction)
+            })
+          }
+        })
+
+        return false
+      },
+      handleDOMEvents: {
+        drop: (view, event) => {
+          const hasFiles =
+            event.dataTransfer &&
+            event.dataTransfer.files &&
+            event.dataTransfer.files.length
+
+          if (!hasFiles) {
+            return false
+          }
+
+          const images = Array.from(event.dataTransfer?.files ?? []).filter(
+            (file) => /image/i.test(file.type)
+          )
+
+          if (images.length === 0) {
+            return false
+          }
+
+          event.preventDefault()
+
+          const { schema } = view.state
+          const coordinates = view.posAtCoords({
+            left: event.clientX,
+            top: event.clientY,
+          })
+          if (!coordinates) return false
+
+          images.forEach(async (image) => {
+            fileToBase64(image).then((base64) => {
+              const node = schema.nodes.image.create({
+                src: base64,
+              })
+              const transaction = view.state.tr.insert(coordinates.pos, node)
+              view.dispatch(transaction)
+            })
+          })
+
+          return true
+        },
+      },
+    },
+  })
+}

package/src/components/TextEditor/index.js

@@ -0,0 +1,6 @@
+export { default } from './TextEditor.vue'
+export { default as TextEditor } from './TextEditor.vue'
+export { default as TextEditorBubbleMenu } from './TextEditorBubbleMenu.vue'
+export { default as TextEditorFixedMenu } from './TextEditorFixedMenu.vue'
+export { default as TextEditorFloatingMenu } from './TextEditorFloatingMenu.vue'
+export { EditorContent as TextEditorContent } from '@tiptap/vue-3'

package/src/components/TextEditor/mention.js

@@ -0,0 +1,72 @@
+import tippy from 'tippy.js'
+import { VueRenderer } from '@tiptap/vue-3'
+import Mention from '@tiptap/extension-mention'
+import MentionList from './MentionList.vue'
+
+export default function configureMention(options) {
+  return Mention.configure({
+    HTMLAttributes: {
+      class: 'mention',
+    },
+    suggestion: getSuggestionOptions(options),
+  })
+}
+
+function getSuggestionOptions(options) {
+  return {
+    items: ({ query }) => {
+      return options
+        .filter((item) =>
+          item.label.toLowerCase().startsWith(query.toLowerCase())
+        )
+        .slice(0, 5)
+    },
+
+    render: () => {
+      let component
+      let popup
+
+      return {
+        onStart: (props) => {
+          component = new VueRenderer(MentionList, {
+            props,
+            editor: props.editor,
+          })
+          if (!props.clientRect) {
+            return
+          }
+          popup = tippy('body', {
+            getReferenceClientRect: props.clientRect,
+            appendTo: () => document.body,
+            content: component.element,
+            showOnCreate: true,
+            interactive: true,
+            trigger: 'manual',
+            placement: 'bottom-start',
+          })
+        },
+        onUpdate(props) {
+          component.updateProps(props)
+          if (!props.clientRect) {
+            return
+          }
+          popup[0].setProps({
+            getReferenceClientRect: props.clientRect,
+          })
+        },
+        onKeyDown(props) {
+          if (props.event.key === 'Escape') {
+            popup[0].hide()
+
+            return true
+          }
+          return component.ref?.onKeyDown(props)
+        },
+        onExit() {
+          popup[0].destroy()
+          component.destroy()
+        },
+      }
+    },
+  }
+}

package/src/components/TextEditor/utils.js

@@ -0,0 +1,11 @@
+import commands from './commands'
+
+export function createEditorButton(option) {
+  if (option instanceof Array) {
+    return option.map(createEditorButton)
+  }
+  if (typeof option == 'object') {
+    return option
+  }
+  return commands[option]
+}

package/src/components/TextEditor/video-extension.js

@@ -0,0 +1,60 @@
+import { Node, mergeAttributes } from '@tiptap/core'
+// Inspired by this blog: https://www.codemzy.com/blog/tiptap-video-embed-extension
+
+const Video = Node.create({
+  name: 'video',
+  group: 'block',
+  selectable: true,
+  draggable: true,
+  atom: true,
+
+  addAttributes() {
+    return {
+      src: {
+        default: null,
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'video',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['video', mergeAttributes(HTMLAttributes)]
+  },
+
+  addNodeView() {
+    return ({ editor, node }) => {
+      const div = document.createElement('div')
+      div.className =
+        'relative aspect-w-16 aspect-h-9' +
+        (editor.isEditable ? ' cursor-pointer' : '')
+
+      const video = document.createElement('video')
+      if (editor.isEditable) {
+        video.className = 'pointer-events-none'
+      }
+      video.src = node.attrs.src
+      if (!editor.isEditable) {
+        video.setAttribute('controls', '')
+      } else {
+        let videoPill = document.createElement('div')
+        videoPill.className =
+          'absolute top-0 right-0 text-xs m-2 bg-gray-800 text-white px-2 py-1 rounded-md'
+        videoPill.innerHTML = 'Video'
+        div.append(videoPill)
+      }
+      div.append(video)
+      return {
+        dom: div,
+      }
+    }
+  },
+})
+
+export default Video

package/src/components/Toast.vue

@@ -0,0 +1,83 @@
+<template>
+  <div
+    class="my-2 min-w-[15rem] max-w-[40rem] rounded-lg border bg-white p-4 shadow-md"
+  >
+    <div class="flex items-start">
+      <div v-if="icon" class="mr-3 grid h-5 w-5 place-items-center">
+        <FeatherIcon :name="icon" :class="['h-5 w-5', iconClasses]" />
+      </div>
+      <div>
+        <slot>
+          <p
+            v-if="title"
+            class="text-base font-medium text-gray-900"
+            :class="{ 'mb-1': text }"
+          >
+            {{ title }}
+          </p>
+          <p v-if="text" class="text-base text-gray-600">
+            {{ text }}
+          </p>
+        </slot>
+      </div>
+      <div class="ml-auto pl-2">
+        <slot name="actions">
+          <button
+            class="grid h-5 w-5 place-items-center rounded hover:bg-gray-100"
+            @click="$emit('close')"
+          >
+            <FeatherIcon name="x" class="h-4 w-4 text-gray-700" />
+          </button>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import FeatherIcon from './FeatherIcon.vue'
+const positions = [
+  'top-right',
+  'top-center',
+  'top-left',
+  'bottom-right',
+  'bottom-center',
+  'bottom-left',
+]
+
+export default {
+  name: 'Toast',
+  props: {
+    position: {
+      type: String,
+      default: 'top-center',
+    },
+    icon: {
+      type: String,
+    },
+    iconClasses: {
+      type: String,
+    },
+    title: {
+      type: String,
+    },
+    text: {
+      type: String,
+    },
+    timeout: {
+      type: Number,
+      default: 5,
+    },
+  },
+  emits: ['close'],
+  components: {
+    FeatherIcon,
+  },
+  mounted() {
+    if (this.timeout > 0) {
+      setTimeout(() => {
+        this.$emit('close')
+      }, this.timeout * 1000)
+    }
+  },
+}
+</script>

package/src/components/Tooltip.vue

@@ -0,0 +1,36 @@
+<template>
+  <Popover trigger="hover" :hoverDelay="hoverDelay" :placement="placement">
+    <template #target>
+      <slot />
+    </template>
+    <template #body>
+      <slot name="body">
+        <div
+          v-if="text"
+          class="rounded-lg border border-gray-100 bg-gray-800 px-2 py-1 text-xs text-white shadow-xl"
+        >
+          {{ text }}
+        </div>
+      </slot>
+    </template>
+  </Popover>
+</template>
+<script>
+import Popover from './Popover.vue'
+export default {
+  name: 'Tooltip',
+  components: { Popover },
+  props: {
+    hoverDelay: {
+      default: 0.5,
+    },
+    placement: {
+      default: 'top',
+    },
+    text: {
+      type: String,
+      default: null,
+    },
+  },
+}
+</script>

package/src/components/toast.js

@@ -0,0 +1,98 @@
+import { h, reactive, TransitionGroup, ref, Teleport } from 'vue'
+import Toast from './Toast.vue'
+
+let toasts = ref([])
+
+export let Toasts = {
+  name: 'Toasts',
+  created() {
+    if (typeof window === 'undefined') return
+    if (!document.getElementById('melonui-toast-root')) {
+      const root = document.createElement('div')
+      root.id = 'melonui-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)
+    }
+  },
+  render() {
+    return h(Teleport, { to: '#melonui-toast-root' }, [
+      getToastsGroup('top-left'),
+      getToastsGroup('top-center'),
+      getToastsGroup('top-right'),
+      getToastsGroup('bottom-left'),
+      getToastsGroup('bottom-center'),
+      getToastsGroup('bottom-right'),
+    ])
+  },
+}
+
+function getToastsGroup(position) {
+  let transition =
+    'transition duration-[230ms] ease-[cubic-bezier(.21,1.02,.73,1)]'
+  let classes = ['absolute']
+  if (position === 'top-left') {
+    classes.push('top-0 left-0')
+  }
+  if (position === 'top-right') {
+    classes.push('top-0 right-0')
+  }
+  if (position === 'top-center') {
+    classes.push('top-0 left-1/2 -translate-x-1/2')
+  }
+  if (position === 'bottom-left') {
+    classes.push('bottom-0 left-0')
+  }
+  if (position === 'bottom-right') {
+    classes.push('bottom-0 right-0')
+  }
+  if (position === 'bottom-center') {
+    classes.push('bottom-0 left-1/2 -translate-x-1/2')
+  }
+
+  return h(
+    TransitionGroup,
+    {
+      tag: 'div',
+      class: classes,
+      moveClass: transition,
+      enterActiveClass: transition,
+      enterFromClass: 'translate-y-1 opacity-0',
+      enterToClass: 'translate-y-0 opacity-100',
+      leaveActiveClass: `${transition} absolute`,
+      leaveFromClass: 'translate-y-0 opacity-100',
+      leaveToClass: 'translate-y-1 opacity-0',
+    },
+    () =>
+      toasts.value
+        .filter((toast) => toast.position === position)
+        .map((toast) => {
+          return h(
+            'div',
+            { key: toast.key, class: 'pointer-events-auto flex' },
+            h(Toast, {
+              ...toast,
+              onClose: () => {
+                toasts.value = toasts.value.filter((t) => t !== toast)
+              },
+            })
+          )
+        })
+  )
+}
+
+export function toast(options) {
+  let id = `toast-${Math.random().toString(36).slice(2, 9)}`
+  let toast = reactive({
+    key: id,
+    position: 'top-center',
+    ...options,
+  })
+  toasts.value.push(toast)
+  return id
+}

package/src/directives/onOutsideClick.js

@@ -0,0 +1,34 @@
+const instanceMap = new Map()
+
+function onDocumentClick(e, el, fn) {
+  let target = e.target
+  if (el !== target && !el.contains(target)) {
+    fn?.(e)
+  }
+}
+
+export default {
+  beforeMount(el, binding) {
+    const fn = binding.value
+    const clickHandler = function (e) {
+      onDocumentClick(e, el, fn)
+    }
+
+    removeHandlerIfPresent(el)
+    instanceMap.set(el, clickHandler)
+    document.addEventListener('click', clickHandler)
+  },
+  unmounted(el) {
+    removeHandlerIfPresent(el)
+  },
+}
+
+function removeHandlerIfPresent(el) {
+  const clickHandler = instanceMap.get(el)
+  if (!clickHandler) {
+    return
+  }
+
+  instanceMap.delete(el)
+  document.removeEventListener('click', clickHandler)
+}

package/src/directives/visibility.js

@@ -0,0 +1,24 @@
+import { nextTick } from 'vue'
+
+export default {
+  beforeMount(el, binding, vnode) {
+    let fn = binding.value
+    if (!fn) return
+
+    let observer = new IntersectionObserver((entries) => {
+      let entry = entries[0]
+      let visible = entry.isIntersecting && entry.intersectionRatio > 0
+      fn(visible, entry)
+    })
+    nextTick(() => {
+      observer.observe(el)
+    })
+    el._visibility_observer = observer
+  },
+  unmounted(el) {
+    if (el._visibility_observer) {
+      el._visibility_observer.disconnect()
+      delete el._visibility_observer
+    }
+  },
+}

package/src/index.js

@@ -0,0 +1,56 @@
+// 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'
+export { default as Card } from './components/Card.vue'
+export { default as DatePicker } from './components/DatePicker.vue'
+export { default as Dialog } from './components/Dialog.vue'
+export { default as Dropdown } from './components/Dropdown.vue'
+export { default as ErrorMessage } from './components/ErrorMessage.vue'
+export { default as FeatherIcon } from './components/FeatherIcon.vue'
+export { default as FileUploader } from './components/FileUploader.vue'
+export { default as GreenCheckIcon } from './components/GreenCheckIcon.vue'
+export { default as Input } from './components/Input.vue'
+export { default as Link } from './components/Link.vue'
+export { default as ListItem } from './components/ListItem.vue'
+export { default as LoadingIndicator } from './components/LoadingIndicator.vue'
+export { default as LoadingText } from './components/LoadingText.vue'
+export { default as Popover } from './components/Popover.vue'
+export { default as Resource } from './components/Resource.vue'
+export {
+  TextEditor,
+  TextEditorFixedMenu,
+  TextEditorBubbleMenu,
+  TextEditorFloatingMenu,
+  TextEditorContent,
+} from './components/TextEditor'
+export { default as Toast } from './components/Toast.vue'
+export { toast, Toasts } from './components/toast.js'
+export { default as Tooltip } from './components/Tooltip.vue'
+
+// directives
+export { default as onOutsideClickDirective } from './directives/onOutsideClick.js'
+export { default as visibilityDirective } from './directives/visibility.js'
+
+// utilities
+export { default as call, createCall } from './utils/call.js'
+export { default as debounce } from './utils/debounce.js'
+export { default as fileToBase64 } from './utils/file-to-base64.js'
+
+// data-fetching, resources
+export {
+  createResource,
+  createDocumentResource,
+  createListResource,
+  resourcesPlugin,
+} from './resources'
+export { request } from './utils/request.js'
+export { melonRequest } from './utils/melonRequest.js'
+export { default as initSocket } from './utils/socketio.js'
+export { setConfig, getConfig } from './utils/config.js'
+
+// plugin
+export { default as pageMetaPlugin } from './utils/pageMeta.js'
+export { default as MelonUI } from './utils/plugin.js'