pimelon-ui 0.0.104 → 0.1.0-alpha.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pimelon-ui",
-  "version": "0.0.104",
+  "version": "0.1.0-alpha.4",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {
@@ -10,7 +10,12 @@
     "bump-and-release": "git pull --rebase origin main && yarn version --patch && git push && git push --tags",
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
-    "docs:serve": "vitepress serve docs"
+    "docs:serve": "vitepress serve docs",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "files": [
     "src"
@@ -22,45 +27,62 @@
   "author": "Alphamonak Solutions",
   "license": "MIT",
   "dependencies": {
-    "@headlessui/vue": "^1.5.0",
+    "@headlessui/vue": "^1.7.14",
     "@popperjs/core": "^2.11.2",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/typography": "^0.5.0",
-    "@tiptap/extension-color": "^2.0.0-beta.205",
-    "@tiptap/extension-highlight": "^2.0.0-beta.205",
-    "@tiptap/extension-image": "^2.0.0-beta.205",
-    "@tiptap/extension-link": "^2.0.0-beta.205",
-    "@tiptap/extension-mention": "^2.0.0-beta.205",
-    "@tiptap/extension-placeholder": "^2.0.0-beta.205",
-    "@tiptap/extension-table": "^2.0.0-beta.205",
-    "@tiptap/extension-table-cell": "^2.0.0-beta.205",
-    "@tiptap/extension-table-header": "^2.0.0-beta.205",
-    "@tiptap/extension-table-row": "^2.0.0-beta.205",
-    "@tiptap/extension-text-align": "^2.0.0-beta.205",
-    "@tiptap/extension-text-style": "^2.0.0-beta.205",
-    "@tiptap/extension-typography": "^2.0.0-beta.205",
-    "@tiptap/pm": "^2.0.0-beta.220",
-    "@tiptap/prosemirror-tables": "^1.1.3",
-    "@tiptap/starter-kit": "^2.0.0-beta.205",
-    "@tiptap/suggestion": "^2.0.0-beta.205",
-    "@tiptap/vue-3": "^2.0.0-beta.205",
-    "autoprefixer": "^10.4.2",
+    "@tiptap/extension-color": "^2.0.3",
+    "@tiptap/extension-highlight": "^2.0.3",
+    "@tiptap/extension-image": "^2.0.3",
+    "@tiptap/extension-link": "^2.0.3",
+    "@tiptap/extension-mention": "^2.0.3",
+    "@tiptap/extension-placeholder": "^2.0.3",
+    "@tiptap/extension-table": "^2.0.3",
+    "@tiptap/extension-table-cell": "^2.0.3",
+    "@tiptap/extension-table-header": "^2.0.3",
+    "@tiptap/extension-table-row": "^2.0.3",
+    "@tiptap/extension-text-align": "^2.0.3",
+    "@tiptap/extension-text-style": "^2.0.3",
+    "@tiptap/extension-typography": "^2.0.3",
+    "@tiptap/pm": "^2.0.3",
+    "@tiptap/starter-kit": "^2.0.3",
+    "@tiptap/suggestion": "^2.0.3",
+    "@tiptap/vue-3": "^2.0.3",
     "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"
   },
+  "peerDependencies": {
+    "vue": "^3.2.45",
+    "vue-router": "^4.1.6"
+  },
   "devDependencies": {
+    "@storybook/addon-essentials": "^7.0.0-beta.61",
+    "@storybook/addon-interactions": "^7.0.0-beta.61",
+    "@storybook/addon-links": "^7.0.0-beta.61",
+    "@storybook/blocks": "^7.0.0-alpha.8",
+    "@storybook/testing-library": "^0.0.14-next.1",
+    "@storybook/vue3": "^7.0.0-beta.61",
+    "@storybook/vue3-vite": "^7.0.0-beta.61",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "autoprefixer": "^10.4.13",
     "cross-fetch": "^3.1.5",
     "husky": "^8.0.3",
     "lint-staged": ">=10",
+    "postcss": "^8.4.21",
     "prettier": "2.7.1",
     "prettier-plugin-tailwindcss": "^0.1.13",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.0.0-beta.61",
+    "tailwindcss": "^3.2.7",
+    "typescript": "^5.0.2",
+    "vite": "^4.1.0",
     "vitepress": "^1.0.0-alpha.29",
-    "vue": "^3.2.45"
+    "vue": "^3.2.45",
+    "vue-router": "^4.1.6"
   },
   "lint-staged": {
     "*.{js,css,md,vue}": "prettier --write"

package/src/components/Alert.vue

@@ -24,10 +24,10 @@
           <h3 class="text-lg font-medium text-gray-900" v-if="title">
             {{ title }}
           </h3>
-          <div class="mt-1 md:mt-0 md:ml-2">
+          <div class="mt-1 md:ml-2 md:mt-0">
             <slot></slot>
           </div>
-          <div class="mt-3 md:mt-0 md:ml-auto">
+          <div class="mt-3 md:ml-auto md:mt-0">
             <slot name="actions"></slot>
           </div>
         </div>

package/src/components/Autocomplete.vue

@@ -1,15 +1,15 @@
 <template>
   <Combobox v-model="selectedValue" nullable v-slot="{ open: isComboboxOpen }">
-    <Popover class="w-full">
-      <template #target="{ open: openPopover }">
+    <Popover class="w-full" v-model:show="showOptions">
+      <template #target="{ open: openPopover, togglePopover }">
         <div class="w-full">
-          <ComboboxButton
-            class="flex w-full items-center justify-between rounded-md bg-gray-100 py-1 pl-3 pr-2"
-            :class="{ 'rounded-b-none': isComboboxOpen }"
-            @click="() => openPopover()"
+          <button
+            class="flex h-7 w-full items-center justify-between rounded bg-gray-100 py-1 pl-3 pr-2 transition-colors hover:bg-gray-200 focus:ring-2 focus:ring-gray-400"
+            :class="{ 'bg-gray-200': isComboboxOpen }"
+            @click="() => togglePopover()"
           >
             <span
-              class="overflow-hidden text-ellipsis text-base leading-5"
+              class="overflow-hidden text-ellipsis whitespace-nowrap text-base leading-5"
               v-if="selectedValue"
             >
               {{ displayValue(selectedValue) }}
@@ -22,67 +22,77 @@
               class="h-4 w-4 text-gray-500"
               aria-hidden="true"
             />
-          </ComboboxButton>
+          </button>
         </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"
+      <template #body="{ isOpen }">
+        <div v-show="isOpen">
+          <ComboboxOptions
+            class="mt-1 max-h-[15rem] overflow-y-auto rounded-lg bg-white px-1.5 pb-1.5 shadow-2xl"
+            static
           >
             <div
-              v-if="group.group && !group.hideLabel"
-              class="px-2 py-1 text-xs font-semibold uppercase tracking-wider text-gray-500"
+              class="sticky top-0 z-10 flex items-stretch space-x-1.5 bg-white pt-1.5"
             >
-              {{ group.group }}
+              <div class="relative w-full">
+                <ComboboxInput
+                  class="form-input w-full"
+                  type="text"
+                  @change="
+                    (e) => {
+                      query = e.target.value
+                    }
+                  "
+                  :value="query"
+                  autocomplete="off"
+                  placeholder="Search"
+                />
+                <button
+                  class="absolute right-0 inline-flex h-7 w-7 items-center justify-center"
+                  @click="selectedValue = null"
+                >
+                  <FeatherIcon name="x" class="w-4" />
+                </button>
+              </div>
             </div>
-            <ComboboxOption
-              as="template"
-              v-for="option in group.items"
-              :key="option.value"
-              :value="option"
-              v-slot="{ active, selected }"
+            <div
+              class="mt-1.5"
+              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.5 py-1.5 text-sm font-medium text-gray-500"
               >
-                {{ 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>
+                {{ group.group }}
+              </div>
+              <ComboboxOption
+                as="template"
+                v-for="option in group.items"
+                :key="option.value"
+                :value="option"
+                v-slot="{ active, selected }"
+              >
+                <li
+                  :class="[
+                    'flex items-center rounded px-2.5 py-1.5 text-base',
+                    { 'bg-gray-100': active },
+                  ]"
+                >
+                  <slot name="prefix" v-bind="{ active, selected, option }" />
+                  {{ 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>
+        </div>
       </template>
     </Popover>
   </Combobox>
@@ -102,7 +112,7 @@ import FeatherIcon from './FeatherIcon.vue'
 export default {
   name: 'Autocomplete',
   props: ['modelValue', 'options', 'placeholder'],
-  emits: ['update:modelValue', 'change'],
+  emits: ['update:modelValue', 'update:query', 'change'],
   components: {
     Popover,
     Button,
@@ -116,6 +126,7 @@ export default {
   data() {
     return {
       query: '',
+      showOptions: false,
     }
   },
   computed: {
@@ -128,6 +139,9 @@ export default {
       },
       set(val) {
         this.query = ''
+        if (val) {
+          this.showOptions = false
+        }
         this.$emit(this.valuePropPassed ? 'change' : 'update:modelValue', val)
       },
     },
@@ -150,6 +164,11 @@ export default {
         .filter((group) => group.items.length > 0)
     },
   },
+  watch: {
+    query(q) {
+      this.$emit('update:query', q)
+    },
+  },
   methods: {
     filterOptions(options) {
       if (!this.query) {
@@ -167,7 +186,9 @@ export default {
     },
     displayValue(option) {
       if (typeof option === 'string') {
-        return option
+        let allOptions = this.groups.flatMap((group) => group.items)
+        let selectedOption = allOptions.find((o) => o.value === option)
+        return selectedOption?.label || option
       }
       return option?.label
     },

package/src/components/Avatar.stories.ts

@@ -0,0 +1,110 @@
+import { Avatar } from '../index'
+
+const IconOnline = {
+  template: `<svg xmlns="http://www.w3.org/2000/svg" class="h-full w-full text-green-500" viewBox="0 0 20 20" fill="currentColor"><circle cx="10" cy="10" r="10"/></svg>`,
+}
+
+const IconOffline = {
+  template: `<svg xmlns="http://www.w3.org/2000/svg" class="h-full w-full text-gray-500" viewBox="0 0 20 20" fill="currentColor"><circle cx="10" cy="10" r="10"/></svg>`,
+}
+
+const IconSleep = {
+  template: `<svg class="h-full w-full" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="18" height="18" rx="9" fill="white"/>
+    <path d="M16.9819 9.71993C16.9899 9.63114 16.8851 9.57883 16.8161 9.63536C15.7802 10.4848 14.4551 10.9946 13.0109 10.9946C9.69415 10.9946 7.00543 8.30585 7.00543 4.98914C7.00543 3.54495 7.51521 2.21982 8.36464 1.18388C8.42117 1.11495 8.36886 1.0101 8.28008 1.01809C4.19856 1.3855 1 4.8156 1 8.99276C1 13.415 4.58496 17 9.00724 17C13.1844 17 16.6145 13.8014 16.9819 9.71993Z" fill="#7C7C7C"/>
+    </svg>
+    `,
+}
+
+const IconUser = {
+  template: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+  <path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd" />
+</svg>`,
+}
+
+export default {
+  component: Avatar,
+  tags: ['autodocs'],
+  render: function (args, { argTypes }) {
+    return {
+      props: Object.keys(argTypes),
+      components: { Avatar },
+      template: `<Avatar v-bind="$props">
+            <template v-if="$props.default" #default>
+                <component :is="$props.default" />
+            </template>
+            <template v-if="$props.indicator" #indicator>
+                <component :is="$props.indicator" />
+            </template>
+        </Avatar>`,
+    }
+  },
+  argTypes: {
+    size: {
+      options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'],
+      control: { type: 'inline-radio' },
+    },
+    shape: {
+      options: ['circle', 'square'],
+      control: { type: 'inline-radio' },
+    },
+    indicator: {
+      options: ['online', 'offline', 'sleep'],
+      mapping: {
+        online: IconOnline,
+        offline: IconOffline,
+        sleep: IconSleep,
+      },
+    },
+    default: {
+      options: ['user', 'none'],
+      mapping: {
+        none: null,
+        user: IconUser,
+      },
+    },
+  },
+  args: {
+    size: '3xl',
+    shape: 'circle',
+  },
+}
+
+export const Normal = {
+  args: {
+    image: 'https://randomuser.me/api/portraits/women/1.jpg',
+  },
+}
+
+export const SizeSmall = {
+  args: {
+    size: 'sm',
+    image: 'https://randomuser.me/api/portraits/women/2.jpg',
+  },
+}
+
+export const Label = {
+  args: {
+    label: 'A',
+  },
+}
+
+export const RoundedSquare = {
+  args: {
+    shape: 'square',
+    image: 'https://randomuser.me/api/portraits/women/3.jpg',
+  },
+}
+
+export const WithIndicator = {
+  args: {
+    indicator: 'online',
+    image: 'https://randomuser.me/api/portraits/women/4.jpg',
+  },
+}
+
+export const IconViaDefaultSlot = {
+  args: {
+    default: 'user',
+  },
+}

package/src/components/Avatar.vue

@@ -1,62 +1,127 @@
 <template>
-  <div class="shrink-0 overflow-hidden" :class="styleClasses">
+  <div
+    class="relative inline-block shrink-0"
+    :class="[sizeClasses, shapeClasses]"
+  >
     <img
-      v-if="imageURL"
-      :src="imageURL"
-      class="object-cover"
-      :class="styleClasses"
-      loading="lazy"
+      v-if="image"
+      :src="image"
+      :class="[shapeClasses, 'h-full w-full object-cover']"
     />
     <div
       v-else
-      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]"
+      class="flex h-full w-full items-center justify-center bg-gray-100 uppercase text-gray-600"
+      :class="[labelClasses, shapeClasses]"
     >
-      {{ label && label[0] }}
+      <div :class="iconClasses" v-if="$slots.default">
+        <slot></slot>
+      </div>
+      <template v-else>
+        {{ label && label[0] }}
+      </template>
+    </div>
+    <div
+      v-if="$slots.indicator"
+      :class="[
+        'absolute bottom-0 right-0 grid place-items-center rounded-full bg-white',
+        indicatorContainerClasses,
+      ]"
+    >
+      <div :class="indicatorClasses">
+        <slot name="indicator"></slot>
+      </div>
     </div>
   </div>
 </template>
 
-<script>
-const validShapes = ['square', 'circle']
-
-export default {
-  name: 'Avatar',
-  props: {
-    imageURL: String,
-    label: String,
-    size: {
-      default: 'md',
-    },
-    shape: {
-      default: 'circle',
-      validator(value) {
-        const valid = validShapes.includes(value)
-        if (!valid) {
-          console.warn(
-            `shape property for <Avatar /> must be one of `,
-            validShapes
-          )
-        }
-        return valid
-      },
-    },
-  },
-  computed: {
-    styleClasses() {
-      const sizeClasses = {
-        sm: 'w-5 h-5',
-        md: 'w-8 h-8',
-        lg: 'w-12 h-12',
-      }[this.size]
-
-      const shapeClass = {
-        circle: 'rounded-full',
-        square: 'rounded-lg',
-      }[this.shape]
-
-      return `${shapeClass} ${sizeClasses}`
-    },
-  },
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface AvatarProps {
+  image?: string
+  label?: string
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
+  shape?: 'circle' | 'square'
 }
+
+const props = withDefaults(defineProps<AvatarProps>(), {
+  size: 'md',
+  shape: 'circle',
+})
+
+const shapeClasses = computed(() => {
+  return {
+    circle: 'rounded-full',
+    square: {
+      xs: 'rounded-[4px]',
+      sm: 'rounded-[5px]',
+      md: 'rounded-[5px]',
+      lg: 'rounded-[6px]',
+      xl: 'rounded-[6px]',
+      '2xl': 'rounded-[8px]',
+      '3xl': 'rounded-[10px]',
+    }[props.size],
+  }[props.shape]
+})
+
+const sizeClasses = computed(() => {
+  return {
+    xs: 'w-4 h-4',
+    sm: 'w-5 h-5',
+    md: 'w-6 h-6',
+    lg: 'w-7 h-7',
+    xl: 'w-8 h-8',
+    '2xl': 'w-10 h-10',
+    '3xl': 'w-11.5 h-11.5',
+  }[props.size]
+})
+
+const labelClasses = computed(() => {
+  let sizeClass = {
+    xs: 'text-2xs',
+    sm: 'text-sm',
+    md: 'text-base',
+    lg: 'text-base',
+    xl: 'text-lg',
+    '2xl': 'text-xl',
+    '3xl': 'text-2xl',
+  }[props.size]
+  return ['font-medium', sizeClass]
+})
+
+const indicatorContainerClasses = computed(() => {
+  return {
+    xs: '-mr-[.1rem] -mb-[.1rem] h-2 w-2',
+    sm: '-mr-[.1rem] -mb-[.1rem] h-[9px] w-[9px]',
+    md: '-mr-[.1rem] -mb-[.1rem] h-2.5 w-2.5',
+    lg: '-mr-[.1rem] -mb-[.1rem] h-3 w-3',
+    xl: '-mr-[.1rem] -mb-[.1rem] h-3 w-3',
+    '2xl': '-mr-[.1rem] -mb-[.1rem] h-3.5 w-3.5',
+    '3xl': '-mr-[.2rem] -mb-[.2rem] h-4 w-4',
+  }[props.size]
+})
+
+const indicatorClasses = computed(() => {
+  return {
+    xs: 'h-1 w-1',
+    sm: 'h-[5px] w-[5px]',
+    md: 'h-1.5 w-1.5',
+    lg: 'h-2 w-2',
+    xl: 'h-2 w-2',
+    '2xl': 'h-2.5 w-2.5',
+    '3xl': 'h-3 w-3',
+  }[props.size]
+})
+
+const iconClasses = computed(() => {
+  return {
+    xs: 'h-2.5 w-2.5',
+    sm: 'h-3 w-3',
+    md: 'h-4 w-4',
+    lg: 'h-4 w-4',
+    xl: 'h-4 w-4',
+    '2xl': 'h-5 w-5',
+    '3xl': 'h-5 w-5',
+  }[props.size]
+})
 </script>