pimelon-ui 0.0.19 → 0.0.73

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "pimelon-ui",
-  "version": "0.0.19",
+  "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"
+    "prettier": "npx prettier -w ./src",
+    "prepare": "husky install",
+    "bump-and-release": "git pull --rebase origin main && yarn version --patch && git push && git push --tags"
   },
   "files": [
     "src"
@@ -15,19 +17,39 @@
     "url": "https://github.com/amonak/pimelon-ui.git"
   },
   "author": "Alphamonak Solutions",
+  "license": "MIT",
   "dependencies": {
     "@headlessui/vue": "^1.5.0",
     "@popperjs/core": "^2.11.2",
     "@tailwindcss/forms": "^0.4.0",
     "@tailwindcss/typography": "^0.5.0",
-    "@tiptap/extension-image": "^2.0.0-beta.27",
-    "@tiptap/extension-placeholder": "^2.0.0-beta.48",
-    "@tiptap/starter-kit": "^2.0.0-beta.183",
-    "@tiptap/vue-3": "^2.0.0-beta.90",
+    "@tiptap/extension-image": "^2.0.0-beta.30",
+    "@tiptap/extension-link": "^2.0.0-beta.43",
+    "@tiptap/extension-mention": "^2.0.0-beta.102",
+    "@tiptap/extension-placeholder": "^2.0.0-beta.53",
+    "@tiptap/extension-table": "^2.0.0-beta.54",
+    "@tiptap/extension-table-cell": "^2.0.0-beta.23",
+    "@tiptap/extension-table-header": "^2.0.0-beta.25",
+    "@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": "^2.4.0",
-    "tailwindcss": "^3.0.12"
+    "socket.io-client": "^4.5.1",
+    "tailwindcss": "^3.0.12",
+    "tippy.js": "^6.3.7"
+  },
+  "devDependencies": {
+    "husky": "^8.0.3",
+    "lint-staged": ">=10",
+    "prettier": "2.7.1",
+    "prettier-plugin-tailwindcss": "^0.1.13"
+  },
+  "lint-staged": {
+    "*.{js,css,md,vue}": "prettier --write"
   }
 }

package/src/components/Alert.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="block w-full">
     <div
-      class="items-start px-4 md:px-5 py-3.5 text-base rounded-md flex"
+      class="flex items-start rounded-md px-4 py-3.5 text-base md:px-5"
       :class="classes"
     >
       <svg
@@ -19,8 +19,8 @@
           fill="#318AD8"
         />
       </svg>
-      <div class="w-full ml-2">
-        <div class="flex flex-col md:items-baseline md:flex-row">
+      <div class="ml-2 w-full">
+        <div class="flex flex-col md:flex-row md:items-baseline">
           <h3 class="text-lg font-medium text-gray-900" v-if="title">
             {{ title }}
           </h3>

package/src/components/Autocomplete.vue

@@ -0,0 +1,176 @@
+<template>
+  <Combobox v-model="selectedValue" nullable v-slot="{ open: isComboboxOpen }">
+    <Popover class="w-full">
+      <template #target="{ open: openPopover }">
+        <div class="w-full">
+          <ComboboxButton
+            class="flex w-full items-center justify-between rounded-md bg-gray-100 py-1.5 pl-3 pr-2"
+            :class="{ 'rounded-b-none': isComboboxOpen }"
+            @click="
+              () => {
+                openPopover()
+              }
+            "
+          >
+            <span
+              class="overflow-hidden text-ellipsis text-base"
+              v-if="selectedValue"
+            >
+              {{ displayValue(selectedValue) }}
+            </span>
+            <span class="text-base text-gray-500" v-else>
+              {{ placeholder || '' }}
+            </span>
+            <FeatherIcon
+              name="chevron-down"
+              class="h-4 w-4 text-gray-500"
+              aria-hidden="true"
+            />
+          </ComboboxButton>
+        </div>
+      </template>
+      <template #body>
+        <ComboboxOptions
+          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"
+        >
+          <div
+            class="items-st sticky top-0 mb-1.5 flex items-stretch space-x-1.5 bg-white pt-1.5"
+          >
+            <ComboboxInput
+              class="form-input w-full placeholder-gray-500"
+              type="text"
+              @change="
+                (e) => {
+                  query = e.target.value
+                }
+              "
+              :value="query"
+              autocomplete="off"
+              placeholder="Search by keyword"
+            />
+            <Button icon="x" @click="selectedValue = null" />
+          </div>
+          <div
+            v-for="group in groups"
+            :key="group.key"
+            v-show="group.items.length > 0"
+          >
+            <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 }"
+            >
+              <li
+                :class="[
+                  'rounded-md px-2.5 py-1.5 text-base',
+                  { 'bg-gray-100': active },
+                ]"
+              >
+                {{ option.label }}
+              </li>
+            </ComboboxOption>
+          </div>
+          <li
+            v-if="groups.length == 0"
+            class="rounded-md px-2.5 py-1.5 text-base text-gray-600"
+          >
+            No results found
+          </li>
+        </ComboboxOptions>
+      </template>
+    </Popover>
+  </Combobox>
+</template>
+<script>
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxOptions,
+  ComboboxOption,
+  ComboboxButton,
+} from '@headlessui/vue'
+import Popover from './Popover.vue'
+
+export default {
+  name: 'Autocomplete',
+  props: ['modelValue', 'options', 'placeholder'],
+  emits: ['update:modelValue', 'change'],
+  components: {
+    Popover,
+    Combobox,
+    ComboboxInput,
+    ComboboxOptions,
+    ComboboxOption,
+    ComboboxButton,
+  },
+  data() {
+    return {
+      query: '',
+    }
+  },
+  computed: {
+    valuePropPassed() {
+      return 'value' in this.$attrs
+    },
+    selectedValue: {
+      get() {
+        return this.valuePropPassed ? this.$attrs.value : this.modelValue
+      },
+      set(val) {
+        this.query = ''
+        this.$emit(this.valuePropPassed ? 'change' : 'update:modelValue', val)
+      },
+    },
+    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 options
+      }
+      return options.filter((option) => {
+        let searchTexts = [option.label, option.value]
+        return searchTexts.some((text) =>
+          (text || '')
+            .toString()
+            .toLowerCase()
+            .includes(this.query.toLowerCase())
+        )
+      })
+    },
+    displayValue(option) {
+      if (typeof option === 'string') {
+        return option
+      }
+      return option?.label
+    },
+  },
+}
+</script>

package/src/components/Avatar.vue

@@ -1,14 +1,15 @@
 <template>
-  <div class="overflow-hidden" :class="styleClasses">
+  <div class="shrink-0 overflow-hidden" :class="styleClasses">
     <img
       v-if="imageURL"
       :src="imageURL"
       class="object-cover"
       :class="styleClasses"
+      loading="lazy"
     />
     <div
       v-else
-      class="flex items-center justify-center w-full h-full text-gray-600 uppercase bg-gray-200"
+      class="flex h-full w-full items-center justify-center bg-gray-200 uppercase text-gray-600"
       :class="{ sm: 'text-xs', md: 'text-base', lg: 'text-lg' }[size]"
     >
       {{ label && label[0] }}

package/src/components/Badge.vue

@@ -1,39 +1,54 @@
 <template>
   <span
-    class="inline-block px-3 py-1 text-xs font-medium rounded-md cursor-default"
+    class="inline-block cursor-default rounded-md px-3 py-1 text-xs font-medium"
     :class="classes"
   >
     <slot>{{ status }}</slot>
   </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'],
+  props: ['color', 'status', 'colorMap'],
   computed: {
     classes() {
-      let color = this.color
-      if (!color && this.status) {
-        color = {
-          Pending: 'yellow',
-          Running: 'yellow',
-          Success: 'green',
-          Failure: 'red',
-          Active: 'green',
-          Broken: 'red',
-          Updating: 'blue',
-          Rejected: 'red',
-          Published: 'green',
-          Approved: 'green',
-        }[this.status]
-      }
-      return {
-        gray: 'text-gray-700 bg-gray-50',
+      let color = this.getBadgeColor()
+
+      let cssClasses = {
+        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',
         blue: 'text-blue-700 bg-blue-50',
-      }[color || 'gray']
+      }[color]
+
+      return cssClasses
+    },
+  },
+  methods: {
+    getBadgeColor() {
+      let color = this.color
+      if (color) {
+        return color
+      }
+
+      let statusColorMap = Object.assign(DEFAULT_COLOR_MAP, this.colorMap || {})
+      color = statusColorMap[this.status] || 'gray'
+
+      return color
     },
   },
 }

package/src/components/Button.vue

@@ -7,23 +7,26 @@
   >
     <LoadingIndicator
       v-if="loading"
+      class="mr-2 -ml-1 h-3 w-3"
       :class="{
         'text-white': appearance == 'primary',
         'text-gray-600': appearance == 'secondary',
         'text-red-200': appearance == 'danger',
+        'text-green-200': appearance == 'success',
+        'text-yellow-200': appearance == 'warning',
       }"
     />
     <FeatherIcon
       v-else-if="iconLeft"
       :name="iconLeft"
-      class="w-4 h-4 mr-1.5"
+      class="mr-1.5 h-4 w-4"
       aria-hidden="true"
     />
     <template v-if="loading && loadingText">{{ loadingText }}</template>
     <template v-else-if="icon">
-      <FeatherIcon :name="icon" class="w-4 h-4" :aria-label="label" />
+      <FeatherIcon :name="icon" class="h-4 w-4" :aria-label="label" />
     </template>
-    <span :class="icon ? 'sr-only' : ''">
+    <span v-else :class="icon ? 'sr-only' : ''">
       <slot>
         {{ label }}
       </slot>
@@ -31,7 +34,7 @@
     <FeatherIcon
       v-if="iconRight"
       :name="iconRight"
-      class="w-4 h-4 ml-2"
+      class="ml-2 h-4 w-4"
       aria-hidden="true"
     />
   </button>
@@ -40,7 +43,15 @@
 import FeatherIcon from './FeatherIcon.vue'
 import LoadingIndicator from './LoadingIndicator.vue'
 
-const ValidAppearances = ['primary', 'secondary', 'danger', 'white', 'minimal']
+const ValidAppearances = [
+  'primary',
+  'secondary',
+  'danger',
+  'success',
+  'warning',
+  'white',
+  'minimal',
+]
 
 export default {
   name: 'Button',
@@ -98,19 +109,23 @@ export default {
     buttonClasses() {
       let appearanceClasses = {
         primary:
-          'bg-blue-500 hover:bg-blue-600 text-white focus:ring-2 focus:ring-offset-2 focus:ring-blue-500',
+          'bg-blue-500 hover:bg-blue-600 border-transparent text-white focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500',
         secondary:
-          'bg-gray-100 hover:bg-gray-200 text-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-gray-500',
+          'bg-gray-100 hover:bg-gray-200 border-transparent text-gray-900 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-500',
         danger:
-          'bg-red-500 hover:bg-red-400 text-white focus:ring-2 focus:ring-offset-2 focus:ring-red-500',
+          'bg-red-500 hover:bg-red-400 border-transparent text-white focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-red-500',
+        success:
+          'bg-green-500 hover:bg-green-400 border-transparent text-white focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-green-500',
+        warning:
+          'bg-yellow-500 hover:bg-yellow-400 border-transparent text-white focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-yellow-500',
         white:
-          'bg-white text-gray-900 border hover:bg-gray-50 focus:ring-2 focus:ring-offset-2 focus:ring-gray-400',
-        minimal: `active:bg-gray-200 focus:bg-gray-200 text-gray-900 ${
+          'bg-white text-gray-900 border-gray-200 hover:bg-gray-50 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-400',
+        minimal: `active:bg-gray-200 border-transparent focus:bg-gray-200 text-gray-900 ${
           this.active ? 'bg-gray-200' : 'bg-transparent hover:bg-gray-200'
         }`,
       }
       return [
-        'inline-flex items-center justify-center text-base leading-5 rounded-md transition-colors focus:outline-none',
+        'inline-flex items-center justify-center text-base leading-5 rounded-md border transition-colors focus:outline-none',
         this.icon ? 'p-1.5' : 'px-3 py-1',
         this.isDisabled
           ? 'opacity-50 cursor-not-allowed pointer-events-none'

package/src/components/Card.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col px-6 py-5 bg-white border rounded-lg shadow">
+  <div class="flex flex-col rounded-lg border bg-white px-6 py-5 shadow">
     <div class="flex items-baseline justify-between">
       <div class="flex items-baseline space-x-2">
         <div class="flex items-center space-x-2" v-if="$slots['actions-left']">
@@ -11,16 +11,16 @@
         <slot name="actions"></slot>
       </div>
     </div>
-    <p class="text-base text-gray-600 mt-1.5" v-if="subtitle">
+    <p class="mt-1.5 text-base text-gray-600" v-if="subtitle">
       {{ subtitle }}
     </p>
     <div
       v-if="loading"
-      class="flex flex-col items-center justify-center flex-auto mt-4 rounded-md"
+      class="mt-4 flex flex-auto flex-col items-center justify-center rounded-md"
     >
       <LoadingText />
     </div>
-    <div class="flex-auto mt-4 overflow-auto" v-else-if="$slots['default']">
+    <div class="mt-4 flex-auto overflow-auto" v-else-if="$slots['default']">
       <slot></slot>
     </div>
   </div>