pimelon-ui 0.1.24 → 0.1.50

package/license.md

@@ -1,8 +0,0 @@
-The MIT License (MIT)
-Copyright © 2022 Alphamonak Solutions
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pimelon-ui",
-  "version": "0.1.24",
+  "version": "0.1.50",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {
@@ -8,9 +8,6 @@
     "prettier": "npx prettier -w ./src",
     "prepare": "husky install",
     "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",
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
@@ -53,6 +50,7 @@
     "@vueuse/core": "^10.4.1",
     "feather-icons": "^4.28.0",
     "idb-keyval": "^6.2.0",
+    "radix-vue": "^1.5.3",
     "showdown": "^2.1.0",
     "socket.io-client": "^4.5.1",
     "tippy.js": "^6.3.7"
@@ -62,12 +60,12 @@
     "vue-router": "^4.1.6"
   },
   "devDependencies": {
-    "@histoire/plugin-vue": "^0.16.1",
+    "@histoire/plugin-vue": "^0.17.14",
     "@vitejs/plugin-vue": "^4.0.0",
     "autoprefixer": "^10.4.13",
     "cross-fetch": "^3.1.5",
-    "histoire": "^0.16.2",
-    "husky": "^9.0.10",
+    "histoire": "^0.17.14",
+    "husky": "^9.0.11",
     "lint-staged": ">=10",
     "postcss": "^8.4.21",
     "prettier": "2.7.1",
@@ -75,7 +73,6 @@
     "tailwindcss": "^3.2.7",
     "typescript": "^5.0.2",
     "vite": "^4.1.0",
-    "vitepress": "^1.0.0-alpha.29",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6"
   },

package/src/components/Autocomplete.story.vue

@@ -2,24 +2,102 @@
 import { ref } from 'vue'
 import Autocomplete from './Autocomplete.vue'
 
-const value = ref('')
+const single = ref('')
+const people = ref(null)
 const options = [
-  { label: 'John Doe', value: 'john-doe' },
-  { label: 'Jane Doe', value: 'jane-doe' },
-  { label: 'John Smith', value: 'john-smith' },
-  { label: 'Jane Smith', value: 'jane-smith' },
-  { label: 'John Wayne', value: 'john-wayne' },
-  { label: 'Jane Wayne', value: 'jane-wayne' },
+  {
+    label: 'John Doe',
+    value: 'john-doe',
+    image: 'https://randomuser.me/api/portraits/men/59.jpg',
+  },
+  {
+    label: 'Jane Doe',
+    value: 'jane-doe',
+    image: 'https://randomuser.me/api/portraits/women/58.jpg',
+  },
+  {
+    label: 'John Smith',
+    value: 'john-smith',
+    image: 'https://randomuser.me/api/portraits/men/59.jpg',
+  },
+  {
+    label: 'Jane Smith',
+    value: 'jane-smith',
+    image: 'https://randomuser.me/api/portraits/women/59.jpg',
+  },
+  {
+    label: 'John Wayne',
+    value: 'john-wayne',
+    image: 'https://randomuser.me/api/portraits/men/57.jpg',
+  },
+  {
+    label: 'Jane Wayne',
+    value: 'jane-wayne',
+    image: 'https://randomuser.me/api/portraits/women/51.jpg',
+  },
 ]
 </script>
 <template>
   <Story :layout="{ width: 500, type: 'grid' }" autoPropsDisabled>
-    <div class="p-2">
-      <Autocomplete
-        :options="options"
-        v-model="value"
-        placeholder="Select person"
-      />
-    </div>
+    <Variant title="Single option">
+      <div class="p-2">
+        <Autocomplete
+          :options="options"
+          v-model="single"
+          placeholder="Select person"
+        />
+      </div>
+    </Variant>
+    <Variant title="Single option with prefix slots">
+      <div class="p-2">
+        <Autocomplete
+          :options="options"
+          v-model="single"
+          placeholder="Select person"
+        >
+          <template #prefix>
+            <img
+              v-if="single"
+              :src="single.image"
+              class="mr-2 h-4 w-4 rounded-full"
+            />
+          </template>
+          <template #item-prefix="{ option }">
+            <img :src="option.image" class="h-4 w-4 rounded-full" />
+          </template>
+        </Autocomplete>
+      </div>
+    </Variant>
+    <Variant title="Single option without search">
+      <div class="p-2">
+        <Autocomplete
+          :options="options"
+          v-model="single"
+          placeholder="Select person"
+          hide-search="true"
+        />
+      </div>
+    </Variant>
+    <Variant title="Multiple options">
+      <div class="p-2">
+        <Autocomplete
+          :options="options"
+          v-model="people"
+          placeholder="Select people"
+          multiple="true"
+        />
+      </div>
+    </Variant>
+    <Variant title="Multiple options without search">
+      <div class="p-2">
+        <Autocomplete
+          :options="options"
+          v-model="people"
+          placeholder="Select people"
+          multiple="true"
+          hide-search="true"
+        />
+      </div>
+    </Variant>
   </Story>
 </template>

package/src/components/Autocomplete.vue

@@ -1,5 +1,10 @@
 <template>
-  <Combobox v-model="selectedValue" nullable v-slot="{ open: isComboboxOpen }">
+  <Combobox
+    v-model="selectedValue"
+    :multiple="multiple"
+    nullable
+    v-slot="{ open: isComboboxOpen }"
+  >
     <Popover class="w-full" v-model:show="showOptions">
       <template #target="{ open: openPopover, togglePopover }">
         <slot name="target" v-bind="{ open: openPopover, togglePopover }">
@@ -9,12 +14,9 @@
               :class="{ 'bg-gray-200': isComboboxOpen }"
               @click="() => togglePopover()"
             >
-              <div class="flex items-center">
+              <div class="flex items-center overflow-hidden">
                 <slot name="prefix" />
-                <span
-                  class="overflow-hidden text-ellipsis whitespace-nowrap text-base leading-5"
-                  v-if="selectedValue"
-                >
+                <span class="truncate text-base leading-5" v-if="selectedValue">
                   {{ displayValue(selectedValue) }}
                 </span>
                 <span class="text-base leading-5 text-gray-500" v-else>
@@ -30,97 +32,161 @@
           </div>
         </slot>
       </template>
-      <template #body="{ isOpen }">
+      <template #body="{ isOpen, togglePopover }">
         <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
+            class="relative mt-1 rounded-lg bg-white text-base shadow-2xl"
+            :class="bodyClasses"
           >
-            <div
-              class="sticky top-0 z-10 flex items-stretch space-x-1.5 bg-white pt-1.5"
-            >
-              <div class="relative w-full">
-                <ComboboxInput
-                  ref="search"
-                  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>
-            <div
-              class="mt-1.5"
-              v-for="group in groups"
-              :key="group.key"
-              v-show="group.items.length > 0"
+            <ComboboxOptions
+              class="max-h-[15rem] overflow-y-auto px-1.5 pb-1.5"
+              :class="{ 'pt-1.5': hideSearch }"
+              static
             >
               <div
-                v-if="group.group && !group.hideLabel"
-                class="px-2.5 py-1.5 text-sm font-medium text-gray-500"
+                v-if="!hideSearch"
+                class="sticky top-0 z-10 flex items-stretch space-x-1.5 bg-white py-1.5"
               >
-                {{ group.group }}
+                <div class="relative w-full">
+                  <ComboboxInput
+                    ref="searchInput"
+                    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
+                v-for="group in groups"
+                :key="group.key"
+                v-show="group.items.length > 0"
               >
-                <li
-                  :class="[
-                    'flex items-center rounded px-2.5 py-1.5 text-base',
-                    { 'bg-gray-100': active },
-                  ]"
+                <div
+                  v-if="group.group && !group.hideLabel"
+                  class="sticky top-10 truncate bg-white px-2.5 py-1.5 text-sm font-medium text-gray-600"
+                >
+                  {{ group.group }}
+                </div>
+                <ComboboxOption
+                  as="template"
+                  v-for="(option, idx) in group.items.slice(0, 50)"
+                  :key="option?.value || idx"
+                  :value="option"
+                  v-slot="{ active, selected }"
                 >
-                  <slot
-                    name="item-prefix"
-                    v-bind="{ active, selected, option }"
+                  <li
+                    :class="[
+                      'flex cursor-pointer items-center justify-between rounded px-2.5 py-1.5 text-base',
+                      { 'bg-gray-100': active },
+                    ]"
+                  >
+                    <div class="flex flex-1 gap-2 overflow-hidden">
+                      <div
+                        v-if="$slots['item-prefix'] || $props.multiple"
+                        class="flex-shrink-0"
+                      >
+                        <slot
+                          name="item-prefix"
+                          v-bind="{ active, selected, option }"
+                        >
+                          <FeatherIcon
+                            name="check"
+                            v-if="isOptionSelected(option)"
+                            class="h-4 w-4 text-gray-700"
+                          />
+                          <div v-else class="h-4 w-4" />
+                        </slot>
+                      </div>
+                      <span class="flex-1 truncate">
+                        {{ getLabel(option) }}
+                      </span>
+                    </div>
+
+                    <div
+                      v-if="$slots['item-suffix'] || option?.description"
+                      class="ml-2 flex-shrink-0"
+                    >
+                      <slot
+                        name="item-suffix"
+                        v-bind="{ active, selected, option }"
+                      >
+                        <div
+                          v-if="option?.description"
+                          class="text-sm text-gray-600"
+                        >
+                          {{ option.description }}
+                        </div>
+                      </slot>
+                    </div>
+                  </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 v-if="$slots.footer || multiple" class="border-t p-1">
+              <slot name="footer" v-bind="{ togglePopover }">
+                <div v-if="multiple" class="flex items-center justify-end">
+                  <Button
+                    v-if="!areAllOptionsSelected"
+                    label="Select All"
+                    @click.stop="selectAll"
                   />
-                  {{ option.label }}
-                </li>
-              </ComboboxOption>
+                  <Button
+                    v-if="areAllOptionsSelected"
+                    label="Clear All"
+                    @click.stop="clearAll"
+                  /></div
+              ></slot>
             </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>
         </div>
       </template>
     </Popover>
   </Combobox>
 </template>
+
 <script>
 import {
   Combobox,
+  ComboboxButton,
   ComboboxInput,
-  ComboboxOptions,
   ComboboxOption,
-  ComboboxButton,
+  ComboboxOptions,
 } from '@headlessui/vue'
+import { nextTick } from 'vue'
 import Popover from './Popover.vue'
 import Button from './Button.vue'
 import FeatherIcon from './FeatherIcon.vue'
 
 export default {
   name: 'Autocomplete',
-  props: ['modelValue', 'options', 'placeholder'],
+  props: [
+    'modelValue',
+    'options',
+    'placeholder',
+    'bodyClasses',
+    'multiple',
+    'hideSearch',
+  ],
   emits: ['update:modelValue', 'update:query', 'change'],
   components: {
     Popover,
@@ -132,6 +198,7 @@ export default {
     ComboboxOption,
     ComboboxButton,
   },
+  expose: ['togglePopover'],
   data() {
     return {
       query: '',
@@ -139,19 +206,25 @@ export default {
     }
   },
   computed: {
-    valuePropPassed() {
-      return 'value' in this.$attrs
-    },
     selectedValue: {
       get() {
-        return this.valuePropPassed ? this.$attrs.value : this.modelValue
+        if (!this.multiple) {
+          return this.findOption(this.modelValue)
+        }
+        // in case of `multiple`, modelValue is an array of values
+        // if the modelValue is a list of values, convert them to options
+        return isOptionOrValue(this.modelValue?.[0]) === 'value'
+          ? this.modelValue?.map((v) => this.findOption(v))
+          : this.modelValue
       },
       set(val) {
         this.query = ''
-        if (val) {
-          this.showOptions = false
+        if (val && !this.multiple) this.showOptions = false
+        if (!this.multiple) {
+          this.$emit('update:modelValue', val)
+          return
         }
-        this.$emit(this.valuePropPassed ? 'change' : 'update:modelValue', val)
+        this.$emit('update:modelValue', val)
       },
     },
     groups() {
@@ -159,7 +232,7 @@ export default {
 
       let groups = this.options[0]?.group
         ? this.options
-        : [{ group: '', items: this.options }]
+        : [{ group: '', items: this.sanitizeOptions(this.options) }]
 
       return groups
         .map((group, i) => {
@@ -167,47 +240,89 @@ export default {
             key: i,
             group: group.group,
             hideLabel: group.hideLabel || false,
-            items: this.filterOptions(group.items),
+            items: this.filterOptions(this.sanitizeOptions(group.items)),
           }
         })
         .filter((group) => group.items.length > 0)
     },
+    allOptions() {
+      return this.groups.flatMap((group) => group.items)
+    },
+    areAllOptionsSelected() {
+      if (!this.multiple) return false
+      return this.allOptions.length === this.selectedValue?.length
+    },
   },
   watch: {
     query(q) {
       this.$emit('update:query', q)
     },
     showOptions(val) {
-      if (val) {
-        this.$nextTick(() => {
-          this.$refs.search.el.focus()
-        })
-      }
+      if (val) nextTick(() => this.$refs.searchInput?.$el?.focus())
     },
   },
   methods: {
+    togglePopover(val) {
+      this.showOptions = val ?? !this.showOptions
+    },
+    findOption(option) {
+      if (!option) return option
+      const value = isOptionOrValue(option) === 'value' ? option : option.value
+      return this.allOptions.find((o) => o.value === value)
+    },
     filterOptions(options) {
-      if (!this.query) {
-        return 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())
+        return (
+          option.label.toLowerCase().includes(this.query.toLowerCase()) ||
+          option.value.toLowerCase().includes(this.query.toLowerCase())
         )
       })
     },
     displayValue(option) {
-      if (typeof option === 'string') {
-        let allOptions = this.groups.flatMap((group) => group.items)
-        let selectedOption = allOptions.find((o) => o.value === option)
-        return selectedOption?.label || option
+      if (!option) return ''
+
+      if (!this.multiple) {
+        return this.getLabel(this.findOption(option))
+      }
+
+      if (!Array.isArray(option)) return ''
+
+      // in case of `multiple`, option is an array of values
+      // so the display value should be comma separated labels
+      return option.map((v) => this.getLabel(this.findOption(v))).join(', ')
+    },
+    getLabel(option) {
+      if (isOptionOrValue(option) === 'value') return option
+      return option?.label || option?.value || 'No label'
+    },
+    sanitizeOptions(options) {
+      if (!options) return []
+      // in case the options are just values, convert them to objects
+      return options.map((option) => {
+        return isOptionOrValue(option) === 'option'
+          ? option
+          : { label: option, value: option }
+      })
+    },
+    isOptionSelected(option) {
+      if (!this.selectedValue) return false
+      const value = isOptionOrValue(option) === 'value' ? option : option.value
+      if (!this.multiple) {
+        return this.selectedValue?.value === value
       }
-      return option?.label
+      return this.selectedValue?.find((v) => v && v.value === value)
+    },
+    selectAll() {
+      this.selectedValue = this.allOptions
+    },
+    clearAll() {
+      this.selectedValue = []
     },
   },
 }
+
+function isOptionOrValue(optionOrValue) {
+  return typeof optionOrValue === 'object' ? 'option' : 'value'
+}
 </script>

package/src/components/Avatar.vue

@@ -6,6 +6,7 @@
     <img
       v-if="image"
       :src="image"
+      :alt="label"
       :class="[shapeClasses, 'h-full w-full object-cover']"
     />
     <div

package/src/components/Dialog.vue

@@ -53,7 +53,7 @@
               <slot name="body-main">
                 <div class="bg-white px-4 pb-6 pt-5 sm:px-6">
                   <div class="flex">
-                    <div class="flex-1">
+                    <div class="w-full flex-1">
                       <div class="mb-6 flex items-center justify-between">
                         <div class="flex items-center space-x-2">
                           <div

package/src/components/FormControl.story.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive } from 'vue'
+import { reactive, ref } from 'vue'
 import FormControl from './FormControl.vue'
 import FeatherIcon from './FeatherIcon.vue'
 import Avatar from './Avatar.vue'
@@ -10,8 +10,11 @@ const state = reactive({
   placeholder: 'Placeholder',
   disabled: false,
   label: 'Label',
-  modelValue: '',
 })
+const inputValue = ref('')
+const selectValue = ref(null)
+const autocompleteValue = ref(null)
+const checkboxValue = ref(false)
 
 const inputTypes = [
   'text',
@@ -34,11 +37,7 @@ const variants = ['subtle', 'outline']
       :title="inputType"
     >
       <div class="p-2">
-        <FormControl
-          :type="inputType"
-          v-bind="state"
-          v-model="state.modelValue"
-        />
+        <FormControl :type="inputType" v-bind="state" v-model="inputValue" />
       </div>
     </Variant>
     <Variant title="select">
@@ -51,10 +50,11 @@ const variants = ['subtle', 'outline']
             { label: 'Three', value: '3' },
           ]"
           v-bind="state"
+          v-model="selectValue"
         />
       </div>
     </Variant>
-    <Variant title="select">
+    <Variant title="autocomplete">
       <div class="p-2">
         <FormControl
           type="autocomplete"
@@ -64,12 +64,13 @@ const variants = ['subtle', 'outline']
             { label: 'Three', value: '3' },
           ]"
           v-bind="state"
+          v-model="autocompleteValue"
         />
       </div>
     </Variant>
     <Variant title="checkbox">
       <div class="p-2">
-        <FormControl type="checkbox" v-bind="state" />
+        <FormControl type="checkbox" v-bind="state" v-model="checkboxValue" />
       </div>
     </Variant>
 

package/src/components/ListFilter/ListFilter.vue

@@ -114,7 +114,7 @@
 </template>
 
 <script setup>
-import { Autocomplete, FeatherIcon, FormControl } from 'pimelon-ui'
+import { Autocomplete, FeatherIcon, FormControl } from '../../index'
 import { computed, h } from 'vue'
 import FilterIcon from './FilterIcon.vue'
 import NestedPopover from './NestedPopover.vue'