pimelon-ui 0.0.73 → 0.0.84

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pimelon-ui",
-  "version": "0.0.73",
+  "version": "0.0.84",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {
@@ -39,6 +39,7 @@
     "feather-icons": "^4.28.0",
     "idb-keyval": "^6.2.0",
     "postcss": "^8.4.5",
+    "showdown": "^2.1.0",
     "socket.io-client": "^4.5.1",
     "tailwindcss": "^3.0.12",
     "tippy.js": "^6.3.7"

package/src/components/Button.vue

@@ -4,6 +4,7 @@
     :class="buttonClasses"
     @click="handleClick"
     :disabled="isDisabled"
+    :aria-label="ariaLabel"
   >
     <LoadingIndicator
       v-if="loading"
@@ -136,6 +137,9 @@ export default {
     isDisabled() {
       return this.disabled || this.loading
     },
+    ariaLabel() {
+      return this.icon ? this.label : null
+    },
   },
   methods: {
     handleClick() {

package/src/components/Dialog.vue

@@ -10,7 +10,8 @@
       @close="open = false"
     >
       <div
-        class="flex min-h-screen flex-col items-center justify-center px-4 pt-4 pb-20 text-center"
+        class="flex min-h-screen flex-col items-center px-4 pt-4 pb-20 text-center"
+        :class="dialogPositionClasses"
       >
         <TransitionChild
           as="template"
@@ -36,7 +37,20 @@
           leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
         >
           <div
-            class="my-8 inline-block w-full max-w-lg transform overflow-hidden rounded-lg bg-white text-left align-middle shadow-xl transition-all"
+            class="my-8 inline-block w-full transform overflow-hidden rounded-lg bg-white text-left align-middle shadow-xl transition-all"
+            :class="{
+              'max-w-7xl': options.size === '7xl',
+              'max-w-6xl': options.size === '6xl',
+              'max-w-5xl': options.size === '5xl',
+              'max-w-4xl': options.size === '4xl',
+              'max-w-3xl': options.size === '3xl',
+              'max-w-2xl': options.size === '2xl',
+              'max-w-xl': options.size === 'xl',
+              'max-w-md': options.size === 'md',
+              'max-w-lg': options.size === 'lg' || !options.size,
+              'max-w-sm': options.size === 'sm',
+              'max-w-xs': options.size === 'xs',
+            }"
           >
             <slot name="body">
               <slot name="body-main">
@@ -76,7 +90,10 @@
                       </DialogTitle>
 
                       <slot name="body-content">
-                        <p class="text-sm text-gray-600" v-if="options.message">
+                        <p
+                          class="text-base text-gray-600"
+                          v-if="options.message"
+                        >
                           {{ options.message }}
                         </p>
                       </slot>
@@ -118,7 +135,8 @@ import {
   TransitionChild,
   TransitionRoot,
 } from '@headlessui/vue'
-import { Button, FeatherIcon } from 'pimelon-ui'
+import Button from './Button.vue'
+import FeatherIcon from './FeatherIcon.vue'
 
 export default {
   name: 'Dialog',
@@ -187,6 +205,13 @@ export default {
       }
       return icon
     },
+    dialogPositionClasses() {
+      let position = this.options?.position || 'center'
+      return {
+        'justify-center': position === 'center',
+        'pt-[20vh]': position === 'top',
+      }
+    },
   },
 }
 </script>

package/src/components/Dropdown.vue

@@ -64,7 +64,7 @@
 
 <script>
 import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
-import { FeatherIcon } from 'pimelon-ui'
+import FeatherIcon from './FeatherIcon.vue'
 
 export default {
   name: 'NewDropdown',

package/src/components/TextEditor/InsertImage.vue

@@ -1,9 +1,9 @@
 <template>
-  <slot v-bind="{ openDialog, resetAddImage }"></slot>
+  <slot v-bind="{ onClick: openDialog }"></slot>
   <Dialog
     :options="{ title: 'Add Image' }"
     v-model="addImageDialog.show"
-    @after-leave="resetAddImage"
+    @after-leave="reset"
   >
     <template #body-content>
       <label
@@ -29,12 +29,14 @@
       <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',
@@ -45,7 +47,7 @@ export default {
       addImageDialog: { url: '', file: null, show: false },
     }
   },
-  components: { Dialog },
+  components: { Button, Dialog },
   methods: {
     openDialog() {
       this.addImageDialog.show = true
@@ -62,10 +64,10 @@ export default {
     },
     addImage(src) {
       this.editor.chain().focus().setImage({ src }).run()
-      this.resetAddImage()
+      this.reset()
     },
-    resetAddImage() {
-      this.addImageDialog = { show: false, url: null, file: null }
+    reset() {
+      this.addImageDialog = this.$options.data().addImageDialog
     },
   },
 }

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/Menu.vue

@@ -38,7 +38,7 @@
                     class="w-full rounded px-2 py-1 text-left text-base hover:bg-gray-50"
                     @click="
                       () => {
-                        onClick(option)
+                        onButtonClick(option)
                         close()
                       }
                     "
@@ -50,88 +50,47 @@
             </template>
           </Popover>
         </div>
-        <button
-          v-else
-          class="flex rounded p-1 text-gray-800 transition-colors"
-          :class="button.isActive(editor) ? 'bg-gray-100' : 'hover:bg-gray-100'"
-          @click="onClick(button)"
-          :title="button.label"
-        >
-          <component v-if="button.icon" :is="button.icon" class="h-4 w-4" />
-          <span class="inline-block h-4 min-w-[1rem] text-sm leading-4" v-else>
-            {{ button.text }}
-          </span>
-        </button>
+        <component v-else :is="button.component || 'div'" v-bind="{ editor }">
+          <template v-slot="componentSlotProps">
+            <button
+              class="flex rounded p-1 text-gray-800 transition-colors"
+              :class="
+                button.isActive(editor) ? 'bg-gray-100' : 'hover:bg-gray-100'
+              "
+              @click="
+                componentSlotProps?.onClick
+                  ? componentSlotProps.onClick(button)
+                  : onButtonClick(button)
+              "
+              :title="button.label"
+            >
+              <component v-if="button.icon" :is="button.icon" class="h-4 w-4" />
+              <span
+                class="inline-block h-4 min-w-[1rem] text-sm leading-4"
+                v-else
+              >
+                {{ button.text }}
+              </span>
+            </button>
+          </template>
+        </component>
       </template>
     </div>
-
-    <Dialog :options="{ title: 'Set Link' }" v-model="setLinkDialog.show">
-      <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>
-    <InsertImage ref="insertImage" :editor="editor" />
   </div>
 </template>
 <script>
-import { Popover, Dialog, Input, Button } from 'pimelon-ui'
-import InsertImage from './InsertImage.vue'
+import Popover from '../Popover.vue'
+
 export default {
   name: 'TipTapMenu',
   props: ['buttons'],
   inject: ['editor'],
   components: {
     Popover,
-    Dialog,
-    Input,
-    Button,
-    InsertImage,
-  },
-  data() {
-    return {
-      setLinkDialog: { url: '', show: false },
-    }
   },
   methods: {
-    onClick(button) {
-      if (button.label === 'Link') {
-        this.setLinkDialog.show = true
-        let existingURL = this.editor.getAttributes('link').href
-        if (existingURL) {
-          this.setLinkDialog.url = existingURL
-        }
-      } else if (button.label === 'Image') {
-        this.$refs.insertImage.openDialog()
-      } else {
-        button.action(this.editor)
-      }
-    },
-    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 = ''
+    onButtonClick(button) {
+      button.action(this.editor)
     },
   },
 }

package/src/components/TextEditor/TextEditor.vue

@@ -24,11 +24,14 @@ import TableCell from '@tiptap/extension-table-cell'
 import TableHeader from '@tiptap/extension-table-header'
 import TableRow from '@tiptap/extension-table-row'
 import Image from './image-extension'
+import Video from './video-extension'
 import Link from '@tiptap/extension-link'
 import configureMention from './mention'
 import TextEditorFixedMenu from './TextEditorFixedMenu.vue'
 import TextEditorBubbleMenu from './TextEditorBubbleMenu.vue'
 import TextEditorFloatingMenu from './TextEditorFloatingMenu.vue'
+import { detectMarkdown, markdownToHTML } from '../../utils/markdown'
+import { DOMParser } from 'prosemirror-model'
 
 export default {
   name: 'TextEditor',
@@ -133,6 +136,7 @@ export default {
           types: ['heading', 'paragraph'],
         }),
         Image,
+        Video,
         Link,
         Placeholder.configure({
           showOnlyWhenEditable: false,
@@ -161,6 +165,26 @@ export default {
             this.editorClass,
           ]),
         },
+        clipboardTextParser: (text, $context) => {
+          if (!detectMarkdown(text)) return
+          if (
+            !confirm(
+              'Do you want to convert markdown content to HTML before pasting?'
+            )
+          )
+            return
+
+          let dom = document.createElement('div')
+          dom.innerHTML = markdownToHTML(text)
+          let parser =
+            this.editor.view.someProp('clipboardParser') ||
+            this.editor.view.someProp('domParser') ||
+            DOMParser.fromSchema(this.editor.schema)
+          return parser.parseSlice(dom, {
+            preserveWhitespace: true,
+            context: $context,
+          })
+        },
       }
     },
   },
@@ -187,6 +211,11 @@ export default {
   height: 0;
 }
 
+.ProseMirror-selectednode video,
+img.ProseMirror-selectednode {
+  border: 2px solid theme('colors.blue.300');
+}
+
 /* Mentions */
 .mention {
   font-weight: 600;

package/src/components/TextEditor/TextEditorBubbleMenu.vue

@@ -42,6 +42,7 @@ export default {
           'Numbered List',
           'Separator',
           'Image',
+          'Video',
           'Blockquote',
           'Code',
           [

package/src/components/TextEditor/TextEditorFixedMenu.vue

@@ -39,6 +39,7 @@ export default {
           'Align Right',
           'Separator',
           'Image',
+          'Video',
           'Link',
           'Blockquote',
           'Code',

package/src/components/TextEditor/commands.js

@@ -1,3 +1,4 @@
+import { defineAsyncComponent } from 'vue'
 import H1 from './icons/h-1.vue'
 import H2 from './icons/h-2.vue'
 import H3 from './icons/h-3.vue'
@@ -17,6 +18,7 @@ import DoubleQuotes from './icons/double-quotes-r.vue'
 import CodeView from './icons/code-view.vue'
 import Link from './icons/link.vue'
 import Image from './icons/image-add-line.vue'
+import Video from './icons/video-add-line.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'
@@ -147,11 +149,19 @@ export default {
     label: 'Link',
     icon: Link,
     isActive: (editor) => editor.isActive('link'),
+    component: defineAsyncComponent(() => import('./InsertLink.vue')),
   },
   Image: {
     label: 'Image',
     icon: Image,
     isActive: (editor) => false,
+    component: defineAsyncComponent(() => import('./InsertImage.vue')),
+  },
+  Video: {
+    label: 'Video',
+    icon: Video,
+    isActive: (editor) => false,
+    component: defineAsyncComponent(() => import('./InsertVideo.vue')),
   },
   Undo: {
     label: 'Undo',

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/index.js

@@ -1 +1,5 @@
 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'

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

@@ -47,7 +47,7 @@
   </teleport>
 </template>
 <script>
-import { FeatherIcon } from 'pimelon-ui'
+import FeatherIcon from './FeatherIcon.vue'
 const positions = [
   'top-right',
   'top-center',

package/src/resources/listResource.js

@@ -40,6 +40,8 @@ export function createListResource(options, vm, getResource) {
             fields: out.fields,
             filters: out.filters,
             order_by: out.order_by,
+            start: out.start,
+            limit: out.limit,
             limit_start: out.start,
             limit_page_length: out.limit,
             parent: out.parent,
@@ -77,18 +79,9 @@ export function createListResource(options, vm, getResource) {
         onSuccess(data) {
           if (data.length > 0 && out.originalData) {
             let doc = data[0]
-            let index = out.originalData.findIndex((d) => d.name === doc.name)
-            out.originalData = out.originalData.filter(
-              (d) => d.name !== doc.name
-            )
-            out.originalData = [
-              out.originalData.slice(0, index),
-              data,
-              out.originalData.slice(index),
-            ].flat()
+            updateRowInListResource(out.doctype, doc)
           }
 
-          out.data = transform(out.originalData)
           options.fetchOne?.onSuccess?.call(vm, out.data)
         },
         onError: options.fetchOne?.onError,
@@ -125,9 +118,9 @@ export function createListResource(options, vm, getResource) {
             fieldname: values,
           }
         },
-        onSuccess(data) {
-          out.list.fetch()
-          options.setValue?.onSuccess?.call(vm, data)
+        onSuccess(doc) {
+          updateRowInListResource(out.doctype, doc)
+          options.setValue?.onSuccess?.call(vm, doc)
         },
         onError: options.setValue?.onError,
       },
@@ -189,7 +182,7 @@ export function createListResource(options, vm, getResource) {
   function transform(data) {
     if (options.transform) {
       let returnValue = options.transform.call(vm, data)
-      if (typeof returnValue != null) {
+      if (returnValue != null) {
         return returnValue
       }
     }
@@ -256,6 +249,7 @@ export function getCachedListResource(cacheKey) {
 }
 
 export function updateRowInListResource(doctype, doc) {
+  if (!doc.name) return
   let resources = resourcesByDocType[doctype] || []
   for (let resource of resources) {
     if (resource.originalData) {

package/src/resources/resources.js

@@ -31,6 +31,7 @@ export function createResource(options, vm, getResource) {
     loading: false,
     fetched: false,
     error: null,
+    promise: null,
     auto: options.auto,
     params: null,
     fetch: fetchFunction,
@@ -85,7 +86,8 @@ export function createResource(options, vm, getResource) {
     }
 
     try {
-      let data = await resourceFetcher(options.method, params || options.params)
+      out.promise = resourceFetcher(options.method, params || options.params)
+      let data = await out.promise
       saveLocal(cacheKey, data)
       out.data = transform(data)
       out.fetched = true
@@ -155,7 +157,7 @@ export function createResource(options, vm, getResource) {
   function transform(data) {
     if (options.transform) {
       let returnValue = options.transform.call(vm, data)
-      if (typeof returnValue != null) {
+      if (returnValue != null) {
         return returnValue
       }
     }

package/src/utils/markdown.js

@@ -0,0 +1,29 @@
+import showdown from 'showdown'
+
+export function markdownToHTML(text) {
+  const converter = new showdown.Converter()
+  return converter.makeHtml(text)
+}
+
+export function htmlToMarkdown(text) {
+  const converter = new showdown.Converter()
+  return converter.makeMarkdown(text)
+}
+
+export function detectMarkdown(text) {
+  const lines = text.split('\n')
+  const markdown = lines.filter(
+    (line) =>
+      line.startsWith('![') ||
+      line.startsWith('#') ||
+      line.startsWith('> ') ||
+      line.startsWith('*') ||
+      line.startsWith('- ') ||
+      line.startsWith('1. ') ||
+      line.startsWith('```') ||
+      line.startsWith('`') ||
+      line.startsWith('[') ||
+      line.startsWith('---')
+  )
+  return markdown.length > 0
+}

package/src/utils/tailwind.config.js

@@ -71,6 +71,13 @@ module.exports = {
           50: '#F8F8FC',
         },
       },
+      typography: (theme) => ({
+        gray: {
+          css: {
+            '--tw-prose-body': theme('colors.gray.900'),
+          },
+        },
+      }),
     },
     container: {
       padding: {