@veritree/ui 0.51.0 → 0.52.0

package/mixins/floating-ui-item.js

@@ -32,7 +32,7 @@ export const floatingUiItemMixin = {
         // default styles
         this.headless
           ? `${this.componentName}`
-          : 'relative z-10 flex items-center gap-2 px-3 py-2 text-inherit no-underline',
+          : 'relative z-10 flex items-center gap-2 px-3 py-2 text-inherit no-underline cursor-pointer',
         // disabled state styles
         this.headless
           ? this.disabled
@@ -44,7 +44,9 @@ export const floatingUiItemMixin = {
         // selected state styles
         this.headless
           ? this.selected
-            ? `${this.componentName}--selected`
+            ? this.multiple
+              ? null
+              : `${this.componentName}--selected`
             : null
           : this.selected
           ? 'bg-gray-200'
@@ -217,6 +219,20 @@ export const floatingUiItemMixin = {
       return this.items.findIndex((item) => item.isSelected());
     },
 
+    handleToogle() {
+      const checkbox = this.$refs[`${this.id}-checkbox`];
+
+      if (checkbox) {
+        checkbox.click();
+      }
+    },
+
+    handleClick() {
+      this.value !== undefined
+        ? this.apiInjected().emit(this.value)
+        : this.$emit('click');
+    },
+
     leaveMenu() {
       if (this.componentTrigger) {
         this.componentTrigger.cancel();
@@ -225,15 +241,12 @@ export const floatingUiItemMixin = {
     },
 
     onClick() {
-      if (this.disabled) {
+      if (this?.disabled) {
         return;
       }
 
-      this.value !== undefined
-        ? this.apiInjected().emit(this.value)
-        : this.$emit('click');
-
-      this.$nextTick(() => this.leaveMenu());
+      this?.multiple ? this.handleToogle() : this.handleClick();
+      this?.multiple ? null : this.$nextTick(() => this.leaveMenu());
     },
 
     onKeyEsc() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.51.0",
+  "version": "0.52.0",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",
@@ -18,7 +18,7 @@
   "dependencies": {
     "@floating-ui/dom": "^1.2.0",
     "@linusborg/vue-simple-portal": "^0.1.5",
-    "@veritree/icons": "^0.43.0"
+    "@veritree/icons": "^0.49.0"
   },
   "devDependencies": {
     "np": "^8.0.4",

package/src/components/Listbox/VTListbox.vue

@@ -16,17 +16,6 @@ export default {
   provide() {
     return {
       apiListbox: () => {
-        const $mutable = {};
-
-        // Used to get and update the value computed
-        // that will then emit the value up to the
-        // parent component
-        Object.defineProperty($mutable, 'valueComputed', {
-          enumerable: true,
-          get: () => this.valueComputed,
-          set: (value) => (this.valueComputed = value),
-        });
-
         /**
          * This function registers a trigger by setting its value to the componentTrigger property of the current object.
          * @param {VueComponent} trigger - The trigger to be registered.
@@ -78,6 +67,27 @@ export default {
           this.valueComputed = value;
         };
 
+        /**
+         * pushValueToValueComputed handles pushing new selected values
+         * to an array that will replace the valueComputed. It is
+         * only used when the prop multiple is set to true.
+         */
+        const pushValueToValueComputed = (value) => {
+          const newArr = Array.isArray(value) ? value : [value];
+          this.valueComputed = [...this.valueComputed, ...newArr];
+        };
+
+        /**
+         * removeValueFromValueComputed handles removing aselected value
+         * from the valueComputed array by just filtering it out. It
+         * is also only used when the prop multiple is true.
+         */
+        const removeValueFromValueComputed = (value) => {
+          this.valueComputed = this.valueComputed.filter(
+            (valueComputed) => valueComputed !== value
+          );
+        };
+
         return {
           id: this.componentId,
           component: this.component,
@@ -87,7 +97,7 @@ export default {
           items: this.items,
           multiple: this.multiple,
           search: this.search,
-          $mutable,
+          valueComputed: this.valueComputed,
           registerTrigger,
           registerContent,
           registerSearch,
@@ -95,6 +105,8 @@ export default {
           unregisterItem,
           pushSearch,
           clearSearch,
+          pushValueToValueComputed,
+          removeValueFromValueComputed,
           emit,
         };
       },
@@ -105,11 +117,11 @@ export default {
     /**
      * The value of the component. Can be a string, number, object, or array.
      * @type {string|number|object|array}
-     * @default null
+     * @default []
      */
     value: {
       type: [String, Number, Object, Array],
-      default: null,
+      default: () => [],
     },
     /**
      * Determines whether the button will use its default atomic style (tailwind) or its default class

package/src/components/Listbox/VTListboxItem.vue

@@ -16,20 +16,25 @@
     @keydown.enter.prevent="onClick"
     @keydown.tab.prevent
   >
-    <span v-if="apiListbox().multiple">
+    <template v-if="this.multiple">
       <input
-        v-model="apiListbox().$mutable.valueComputed"
         :id="`${id}-checkbox`"
+        :ref="`${id}-checkbox`"
         :value="value"
+        :checked="checked"
+        class="form-control-check"
         type="checkbox"
         @click.stop
-        @change="onChange"
+        @change="onChange(value, $event)"
       />
-    </span>
-    <slot></slot>
-    <span v-if="wasSelected" class="ml-auto">
-      <IconCheckOutline class="text-secondary-300 h-5 w-5" />
-    </span>
+      <slot></slot>
+    </template>
+    <template v-else>
+      <slot></slot>
+      <span v-if="checked" class="ml-auto">
+        <IconCheckOutline class="text-secondary-300 h-5 w-5" />
+      </span>
+    </template>
   </li>
 </template>
 
@@ -76,22 +81,30 @@ export default {
       return this.apiListbox().search;
     },
 
-    /**
-     * The difference between selected (in the mixin) and
-     * wasSelected is that selected is more related to
-     * the aria-selected while wasSelected is the
-     * real selected option for the listbox
-     */
-    wasSelected() {
+    multiple() {
+      return this.apiListbox().multiple;
+    },
+
+    checked() {
+      if (this.multiple) {
+        return this.apiListbox().valueComputed.some(
+          (value) => JSON.stringify(this.value) === JSON.stringify(value)
+        );
+      }
+
       return (
         JSON.stringify(this.value) ===
-        JSON.stringify(this.apiListbox().$mutable.valueComputed)
+        JSON.stringify(this.apiListbox().valueComputed)
       );
     },
   },
 
   mounted() {
-    if (this.wasSelected) {
+    if (this.multiple) {
+      return;
+    }
+
+    if (this.checked) {
       /**
        * There are some conflicts between the portal and the interaction
        * with the element. It's unclear why it happens but if no delay,
@@ -170,6 +183,12 @@ export default {
         this.apiListbox().clearSearch();
       }, 1000);
     },
+
+    onChange(value, event) {
+      event.target.checked
+        ? this.apiListbox().pushValueToValueComputed(value)
+        : this.apiListbox().removeValueFromValueComputed(value);
+    },
   },
 };
 </script>

package/src/components/Listbox/VTListboxTrigger.vue

@@ -15,7 +15,9 @@
       <slot></slot>
     </span>
     <span
-      :class="[headless ? 'listbox-button__icon' : 'shrink-0 text-gray-500']"
+      :class="[
+        headless ? 'listbox-button__icon' : 'ml-2 shrink-0 text-gray-500',
+      ]"
     >
       <IconChevronDown
         class="transition-transform"