pimelon-ui 0.1.23 → 0.1.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pimelon-ui",
-  "version": "0.1.23",
+  "version": "0.1.31",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {
@@ -67,7 +67,7 @@
     "autoprefixer": "^10.4.13",
     "cross-fetch": "^3.1.5",
     "histoire": "^0.16.2",
-    "husky": "^9.0.10",
+    "husky": "^9.0.11",
     "lint-staged": ">=10",
     "postcss": "^8.4.21",
     "prettier": "2.7.1",

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,15 +14,12 @@
               :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>
+                <span class="text-base leading-5 text-gray-600" v-else>
                   {{ placeholder || '' }}
                 </span>
               </div>
@@ -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/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/ListView/ListHeader.vue

@@ -19,6 +19,7 @@
         v-for="column in list.columns"
         :key="column.key"
         :item="column"
+        @columnWidthUpdated="emit('columnWidthUpdated', column)"
       />
     </slot>
   </div>
@@ -30,5 +31,7 @@ import ListHeaderItem from './ListHeaderItem.vue'
 import { getGridTemplateColumns } from './utils'
 import { inject } from 'vue'
 
+const emit = defineEmits(['columnWidthUpdated'])
+
 const list = inject('list')
 </script>

package/src/components/ListView/ListHeaderItem.vue

@@ -1,22 +1,93 @@
 <template>
   <div
-    class="flex items-center space-x-2 text-base text-gray-600"
+    ref="columnRef"
+    class="group flex items-center justify-between"
     :class="alignmentMap[item.align]"
   >
-    <slot name="prefix" v-bind="{ item }" />
-    <div>
-      {{ item.label }}
+    <div
+      class="flex items-center space-x-2 truncate text-sm text-gray-600"
+      :class="$attrs.class"
+    >
+      <slot name="prefix" v-bind="{ item }" />
+      <div class="truncate">
+        {{ item.label }}
+      </div>
+      <slot name="suffix" v-bind="{ item }" />
     </div>
-    <slot name="suffix" v-bind="{ item }" />
+    <slot v-if="list.options.resizeColumn" name="resizer" v-bind="{ item }">
+      <div
+        class="flex h-4 w-2 cursor-col-resize justify-center"
+        @mousedown="startResizing"
+      >
+        <div
+          ref="resizer"
+          class="h-full w-[2px] rounded-full transition-all duration-300 ease-in-out group-hover:bg-gray-400"
+        />
+      </div>
+    </slot>
   </div>
 </template>
 
 <script setup>
 import { alignmentMap } from './utils'
+import { useDebounceFn } from '@vueuse/core'
+import { ref, computed, inject } from 'vue'
+
 const props = defineProps({
   item: {
     type: Object,
     required: true,
   },
+  debounce: {
+    type: Number,
+    default: 1000,
+  },
+})
+
+const emit = defineEmits(['columnWidthUpdated'])
+
+const resizer = ref(null)
+const columnRef = ref(null)
+
+const widthInPx = computed(() => {
+  if (typeof props.item.width === 'string') {
+    const parsedWidth = parseInt(props.item.width)
+    if (props.item.width.includes('rem')) {
+      return parsedWidth * 16
+    } else if (props.item.width.includes('px')) {
+      return parsedWidth
+    }
+  }
+  return columnRef.value.offsetWidth
 })
+
+const startResizing = (e) => {
+  const initialX = e.clientX
+  const initialWidth = widthInPx.value
+  const onMouseMove = (e) => {
+    document.body.classList.add('select-none')
+    document.body.classList.add('cursor-col-resize')
+    resizer.value.style.backgroundColor = 'rgb(199 199 199)'
+    let newWidth = initialWidth + (e.clientX - initialX)
+
+    props.item.width = `${newWidth < 50 ? 50 : newWidth}px`
+    updateWidth(props.item.width)
+  }
+  const onMouseUp = () => {
+    document.body.classList.remove('select-none')
+    document.body.classList.remove('cursor-col-resize')
+    resizer.value.style.backgroundColor = ''
+    window.removeEventListener('mousemove', onMouseMove)
+    window.removeEventListener('mouseup', onMouseUp)
+  }
+  window.addEventListener('mousemove', onMouseMove)
+  window.addEventListener('mouseup', onMouseUp)
+}
+
+const updateWidth = useDebounceFn((width) => {
+  props.item.width = width
+  emit('columnWidthUpdated')
+}, props.debounce)
+
+const list = inject('list')
 </script>

package/src/components/ListView/ListRow.vue

@@ -2,11 +2,12 @@
   <component
     :is="list.options.getRowRoute ? 'router-link' : 'div'"
     class="flex cursor-pointer flex-col transition-all duration-300 ease-in-out"
-    v-bind="
-      list.options.getRowRoute
-        ? { to: list.options.getRowRoute(row) }
-        : { onClick: () => list.options.onRowClick(row) }
-    "
+    v-bind="{
+      to: list.options.getRowRoute ? list.options.getRowRoute(row) : undefined,
+      onClick: list.options.onRowClick
+        ? () => list.options.onRowClick(row)
+        : undefined,
+    }"
   >
     <component
       :is="list.options.getRowRoute ? 'template' : 'button'"
@@ -33,11 +34,14 @@
           class="cursor-pointer duration-300"
         />
         <div
-          v-for="column in list.columns"
+          v-for="(column, i) in list.columns"
           :key="column.key"
-          :class="alignmentMap[column.align]"
+          :class="[
+            alignmentMap[column.align],
+            i == 0 ? 'text-gray-900' : 'text-gray-700',
+          ]"
         >
-          <slot v-bind="{ column, item: row[column.key] }">
+          <slot v-bind="{ idx: i, column, item: row[column.key] }">
             <ListRowItem :item="row[column.key]" :align="column.align" />
           </slot>
         </div>

package/src/components/ListView/ListView.vue

@@ -42,6 +42,7 @@ const props = defineProps({
       onRowClick: null,
       showTooltip: true,
       selectable: true,
+      resizeColumn: true,
     },
   },
 })
@@ -64,6 +65,7 @@ let _options = computed(() => {
     onRowClick: props.options.onRowClick || null,
     showTooltip: defaultTrue(props.options.showTooltip),
     selectable: defaultTrue(props.options.selectable),
+    resizeColumn: defaultTrue(props.options.resizeColumn),
   }
 })
 

package/src/components/ListView.story.md

@@ -77,6 +77,8 @@ required to be passed in the `row` object.
    select/multiselect rows and perform some action on them - default is true
 4. showTooltip (Boolean) - if true, tooltip will be shown on hover of row -
    default is true
+5. resizeColumn (Boolean) - if true, column can be resized by dragging the
+   resizer on the right side of the column header - default is true
 
 ---
 

package/src/components/ListView.story.vue

@@ -15,9 +15,10 @@ import { reactive } from 'vue'
 const state = reactive({
   selectable: true,
   showTooltip: true,
+  resizeColumn: true,
 })
 
-const simple_columns = [
+const simple_columns = reactive([
   {
     label: 'Name',
     key: 'name',
@@ -36,7 +37,7 @@ const simple_columns = [
     label: 'Status',
     key: 'status',
   },
-]
+])
 
 const simple_rows = [
   {
@@ -55,7 +56,7 @@ const simple_rows = [
   },
 ]
 
-const custom_columns = [
+const custom_columns = reactive([
   {
     label: 'Name',
     key: 'name',
@@ -78,7 +79,7 @@ const custom_columns = [
     key: 'status',
     icon: 'check-circle',
   },
-]
+])
 
 const custom_rows = [
   {
@@ -127,6 +128,7 @@ const custom_rows = [
           getRowRoute: (row) => ({ name: 'User', params: { userId: row.id } }),
           selectable: state.selectable,
           showTooltip: state.showTooltip,
+          resizeColumn: state.resizeColumn,
         }"
         row-key="id"
       />
@@ -140,6 +142,7 @@ const custom_rows = [
           onRowClick: (row) => console.log(row),
           selectable: state.selectable,
           showTooltip: state.showTooltip,
+          resizeColumn: state.resizeColumn,
         }"
         row-key="id"
       >
@@ -203,6 +206,7 @@ const custom_rows = [
     <template #controls>
       <HstCheckbox v-model="state.selectable" title="Selectable" />
       <HstCheckbox v-model="state.showTooltip" title="Show tooltip" />
+      <HstCheckbox v-model="state.resizeColumn" title="Resize Column" />
     </template>
   </Story>
 </template>

package/src/components/Progress.vue

@@ -10,11 +10,13 @@
       <!-- Empty for alignment -->
       <span v-else></span>
 
-      <span
-        class="self-end text-base font-medium text-gray-500"
-        v-if="props.hint"
-        >{{ props.value }}%</span
-      >
+      <span class="self-end" v-if="props.hint || $slots.hint">
+        <slot name="hint">
+          <span class="text-base font-medium text-gray-500">
+            {{ props.value }}%
+          </span>
+        </slot>
+      </span>
     </div>
 
     <div

package/src/resources/plugin.js

@@ -16,14 +16,18 @@ let createMixin = (mixinOptions) => ({
         if (typeof options == 'function') {
           watch(
             () => {
+              let out = null
               try {
-                return options.call(this)
+                out = options.call(this)
               } catch (error) {
                 console.warn('Failed to get resource options\n\n', error)
-                return null
+                out = null
               }
+              return JSON.stringify(out)
             },
-            (options, oldOptions) => {
+            (_options, _oldOptions) => {
+              let options = _options ? JSON.parse(_options) : null
+              let oldOptions = _oldOptions ? JSON.parse(_oldOptions) : null
               if (!options) {
                 return
               }
@@ -37,6 +41,7 @@ let createMixin = (mixinOptions) => ({
             },
             {
               immediate: true,
+              deep: true,
             }
           )
         } else {