pimelon-ui 0.0.57 → 0.0.73

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "pimelon-ui",
-  "version": "0.0.57",
+  "version": "0.0.73",
   "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,9 +33,11 @@
     "@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",
     "socket.io-client": "^4.5.1",
     "tailwindcss": "^3.0.12",

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/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>
@@ -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/MentionList.vue

@@ -1,20 +1,22 @@
 <template>
-  <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"
+  <div>
+    <div
+      v-if="items.length"
+      class="min-w-40 rounded-lg border bg-white p-1 text-base shadow-lg"
     >
-      {{ item.label }}
-    </button>
+      <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>
 

package/src/components/TextEditor/Menu.vue

@@ -88,7 +88,8 @@ import { Popover, Dialog, Input, Button } from 'pimelon-ui'
 import InsertImage from './InsertImage.vue'
 export default {
   name: 'TipTapMenu',
-  props: ['editor', 'buttons'],
+  props: ['buttons'],
+  inject: ['editor'],
   components: {
     Popover,
     Dialog,