pimelon-ui 0.0.57 → 0.0.84

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "pimelon-ui",
-  "version": "0.0.57",
+  "version": "0.0.84",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {
     "test": "npx prettier --check ./src",
     "prettier": "npx prettier -w ./src",
     "prepare": "husky install",
-    "bump-and-release": "yarn version --patch && git push && git push --tags"
+    "bump-and-release": "git pull --rebase origin main && yarn version --patch && git push && git push --tags"
   },
   "files": [
     "src"
@@ -33,10 +33,13 @@
     "@tiptap/extension-table-row": "^2.0.0-beta.22",
     "@tiptap/extension-text-align": "^2.0.0-beta.31",
     "@tiptap/starter-kit": "^2.0.0-beta.191",
+    "@tiptap/suggestion": "^2.0.0-beta.195",
     "@tiptap/vue-3": "^2.0.0-beta.96",
     "autoprefixer": "^10.4.2",
     "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/Autocomplete.vue

@@ -31,7 +31,7 @@
       </template>
       <template #body>
         <ComboboxOptions
-          class="max-h-[11rem] overflow-y-auto rounded-md rounded-t-none bg-white px-1.5 pb-1.5 shadow-md"
+          class="max-h-[15rem] overflow-y-auto rounded-md rounded-t-none bg-white px-1.5 pb-1.5 shadow-md"
           static
           v-show="isComboboxOpen"
         >
@@ -52,24 +52,36 @@
             />
             <Button icon="x" @click="selectedValue = null" />
           </div>
-          <ComboboxOption
-            as="template"
-            v-for="option in filteredOptions"
-            :key="option.value"
-            :value="option"
-            v-slot="{ active, selected }"
+          <div
+            v-for="group in groups"
+            :key="group.key"
+            v-show="group.items.length > 0"
           >
-            <li
-              :class="[
-                'rounded-md px-2.5 py-1.5 text-base',
-                { 'bg-gray-100': active },
-              ]"
+            <div
+              v-if="group.group && !group.hideLabel"
+              class="px-2 py-1 text-xs font-semibold uppercase tracking-wider text-gray-500"
+            >
+              {{ group.group }}
+            </div>
+            <ComboboxOption
+              as="template"
+              v-for="option in group.items"
+              :key="option.value"
+              :value="option"
+              v-slot="{ active, selected }"
             >
-              {{ option.label }}
-            </li>
-          </ComboboxOption>
+              <li
+                :class="[
+                  'rounded-md px-2.5 py-1.5 text-base',
+                  { 'bg-gray-100': active },
+                ]"
+              >
+                {{ option.label }}
+              </li>
+            </ComboboxOption>
+          </div>
           <li
-            v-if="filteredOptions.length == 0"
+            v-if="groups.length == 0"
             class="rounded-md px-2.5 py-1.5 text-base text-gray-600"
           >
             No results found
@@ -119,11 +131,31 @@ export default {
         this.$emit(this.valuePropPassed ? 'change' : 'update:modelValue', val)
       },
     },
-    filteredOptions() {
+    groups() {
+      if (!this.options || this.options.length == 0) return []
+
+      let groups = this.options[0]?.group
+        ? this.options
+        : [{ group: '', items: this.options }]
+
+      return groups
+        .map((group, i) => {
+          return {
+            key: i,
+            group: group.group,
+            hideLabel: group.hideLabel || false,
+            items: this.filterOptions(group.items),
+          }
+        })
+        .filter((group) => group.items.length > 0)
+    },
+  },
+  methods: {
+    filterOptions(options) {
       if (!this.query) {
-        return this.options
+        return options
       }
-      return this.options.filter((option) => {
+      return options.filter((option) => {
         let searchTexts = [option.label, option.value]
         return searchTexts.some((text) =>
           (text || '')
@@ -133,8 +165,6 @@ export default {
         )
       })
     },
-  },
-  methods: {
     displayValue(option) {
       if (typeof option === 'string') {
         return option

package/src/components/Avatar.vue

@@ -5,6 +5,7 @@
       :src="imageURL"
       class="object-cover"
       :class="styleClasses"
+      loading="lazy"
     />
     <div
       v-else

package/src/components/Badge.vue

@@ -7,29 +7,28 @@
   </span>
 </template>
 <script>
+const DEFAULT_COLOR_MAP = {
+  Pending: 'yellow',
+  Running: 'yellow',
+  Success: 'green',
+  Failure: 'red',
+  Active: 'green',
+  Broken: 'red',
+  Updating: 'blue',
+  Rejected: 'red',
+  Published: 'green',
+  Approved: 'green',
+}
+
 export default {
   name: 'Badge',
   props: ['color', 'status', 'colorMap'],
-  data: {
-    defaultColorMap: {
-      Pending: 'yellow',
-      Running: 'yellow',
-      Success: 'green',
-      Failure: 'red',
-      Active: 'green',
-      Broken: 'red',
-      Updating: 'blue',
-      Rejected: 'red',
-      Published: 'green',
-      Approved: 'green',
-    },
-  },
   computed: {
     classes() {
       let color = this.getBadgeColor()
 
       let cssClasses = {
-        gray: 'text-gray-700 bg-gray-50',
+        gray: 'text-gray-700 bg-gray-100',
         green: 'text-green-700 bg-green-50',
         red: 'text-red-700 bg-red-50',
         yellow: 'text-yellow-700 bg-yellow-50',
@@ -46,10 +45,7 @@ export default {
         return color
       }
 
-      let statusColorMap = Object.assign(
-        this.defaultColorMap,
-        this.colorMap || {}
-      )
+      let statusColorMap = Object.assign(DEFAULT_COLOR_MAP, this.colorMap || {})
       color = statusColorMap[this.status] || 'gray'
 
       return color

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

@@ -42,15 +42,18 @@
               ]"
               @click="item.onClick"
             >
-              <FeatherIcon
-                v-if="item.icon"
-                :name="item.icon"
-                class="mr-2 h-4 w-4 flex-shrink-0 text-gray-500"
-                aria-hidden="true"
-              />
-              <span class="whitespace-nowrap">
-                {{ item.label }}
-              </span>
+              <component :is="item.component" v-if="item.component" />
+              <template v-else>
+                <FeatherIcon
+                  v-if="item.icon"
+                  :name="item.icon"
+                  class="mr-2 h-4 w-4 flex-shrink-0 text-gray-500"
+                  aria-hidden="true"
+                />
+                <span class="whitespace-nowrap">
+                  {{ item.label }}
+                </span>
+              </template>
             </button>
           </MenuItem>
         </div>
@@ -61,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',
@@ -79,10 +82,12 @@ export default {
       if (!onClick && option.route && this.$router) {
         onClick = () => this.$router.push(option.route)
       }
+
       return {
         label: option.label,
         icon: option.icon,
         group: option.group,
+        component: option.component,
         onClick,
       }
     },

package/src/components/ErrorMessage.vue

@@ -3,7 +3,7 @@
     v-if="message"
     class="whitespace-pre-line text-sm text-red-600"
     role="alert"
-    v-html="message"
+    v-html="errorMessage"
   ></div>
 </template>
 
@@ -11,5 +11,14 @@
 export default {
   name: 'ErrorMessage',
   props: ['message'],
+  computed: {
+    errorMessage() {
+      if (!this.message) return ''
+      if (this.message instanceof Error) {
+        return this.message.messages || this.message.message
+      }
+      return this.message
+    },
+  },
 }
 </script>

package/src/components/Input.vue

@@ -6,55 +6,70 @@
     >
       {{ label }}
     </span>
-    <input
-      v-if="
-        ['text', 'number', 'checkbox', 'email', 'password', 'date'].includes(
-          type
-        )
-      "
-      v-bind="inputAttributes"
-      class="border-gray-400 placeholder-gray-500"
-      ref="input"
-      :class="[
-        {
-          'form-input block w-full': type != 'checkbox',
-          'form-checkbox': type == 'checkbox',
-        },
-        inputClass,
-      ]"
-      :type="type || 'text'"
-      :disabled="disabled"
-      :placeholder="placeholder"
-      :value="passedInputValue"
-    />
-    <textarea
-      v-if="type === 'textarea'"
-      v-bind="inputAttributes"
-      :placeholder="placeholder"
-      class="placeholder-gray-500"
-      :class="['form-textarea block w-full resize-none', inputClass]"
-      ref="input"
-      :value="passedInputValue"
-      :disabled="disabled"
-      :rows="rows || 3"
-    ></textarea>
-    <select
-      v-bind="inputAttributes"
-      class="form-select block w-full"
-      ref="input"
-      v-if="type === 'select'"
-      :disabled="disabled"
+    <div
+      class="relative flex"
+      :class="{ 'items-center': isNormalInput || type == 'select' }"
     >
-      <option
-        v-for="option in selectOptions"
-        :key="option.value"
-        :value="option.value"
-        :disabled="option.disabled || false"
-        :selected="passedInputValue === option.value"
+      <FeatherIcon
+        v-if="iconLeft && type != 'checkbox'"
+        :name="iconLeft"
+        class="absolute mx-2 h-4 w-4 text-gray-600"
+        :class="{ 'mt-2': type == 'textarea' }"
+      />
+      <input
+        v-if="isNormalInput"
+        v-bind="inputAttributes"
+        class="border-gray-400 placeholder-gray-500"
+        ref="input"
+        :class="[
+          {
+            'form-input block w-full': type != 'checkbox',
+            'form-checkbox': type == 'checkbox',
+            'pl-8': iconLeft && type != 'checkbox',
+          },
+          inputClass,
+        ]"
+        :type="type || 'text'"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        :value="passedInputValue"
+      />
+      <textarea
+        v-if="type === 'textarea'"
+        v-bind="inputAttributes"
+        :placeholder="placeholder"
+        class="placeholder-gray-500"
+        :class="[
+          'form-textarea block w-full resize-none',
+          inputClass,
+          {
+            'pl-8': iconLeft,
+          },
+        ]"
+        ref="input"
+        :value="passedInputValue"
+        :disabled="disabled"
+        :rows="rows || 3"
+      ></textarea>
+      <select
+        v-if="type === 'select'"
+        v-bind="inputAttributes"
+        class="form-select block w-full"
+        :class="{ 'pl-8': iconLeft }"
+        ref="input"
+        :disabled="disabled"
       >
-        {{ option.label }}
-      </option>
-    </select>
+        <option
+          v-for="option in selectOptions"
+          :key="option.value"
+          :value="option.value"
+          :disabled="option.disabled || false"
+          :selected="passedInputValue === option.value"
+        >
+          {{ option.label }}
+        </option>
+      </select>
+    </div>
     <span
       v-if="label && type == 'checkbox'"
       class="ml-2 inline-block text-base leading-4"
@@ -66,11 +81,13 @@
 
 <script>
 import { debounce } from 'pimelon-ui'
+import FeatherIcon from './FeatherIcon.vue'
 
 export default {
   name: 'Input',
   inheritAttrs: false,
   expose: ['getInputValue'],
+  components: { FeatherIcon },
   props: {
     label: {
       type: String,
@@ -116,6 +133,9 @@ export default {
     placeholder: {
       type: String,
     },
+    iconLeft: {
+      type: String,
+    },
   },
   emits: ['input', 'change', 'update:modelValue'],
   methods: {
@@ -173,6 +193,16 @@ export default {
         })
         .filter(Boolean)
     },
+    isNormalInput() {
+      return [
+        'text',
+        'number',
+        'checkbox',
+        'email',
+        'password',
+        'date',
+      ].includes(this.type)
+    },
   },
 }
 </script>

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>