@veritree/ui 0.39.1 → 0.39.3

package/mixins/floating-ui-item.js

@@ -245,8 +245,10 @@ export const floatingUiItemMixin = {
         return;
       }
 
-      // unselect all items before selecting new item
-      this.items.forEach((item) => item.unselect());
+      // unselect all items before selecting new one
+      for (const item of this.items) {
+        item.unselect();
+      }
 
       /**
        * Select item passing the event type to decide if

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.39.1",
+  "version": "0.39.3",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",

package/src/components/Button/VTButton.vue

@@ -47,6 +47,7 @@
         headless && busy ? 'button--busy' : busy ? 'invisible' : null,
       ]"
     >
+      <!-- @slot Use this slot for the button content -->
       <slot></slot>
     </span>
   </component>
@@ -55,36 +56,98 @@
 <script>
 import VTSpinner from '../Spinner/VTSpinner.vue';
 
+/**
+ * The veritree button.
+ * @displayName VTButton
+ */
 export default {
   name: 'VTButton',
 
   components: { VTSpinner },
 
   props: {
+    /**
+     * Specifies the visual style variant of the button
+     *
+     * @values
+     * - 'primary': The default primary style for the button
+     * - 'secondary': A secondary style for the button
+     * - 'tertiary': A tertiary style for the button
+     */
     variant: {
       type: String,
       default: 'primary',
     },
+
+    /**
+     * Specifies the size of the button
+     *
+     * @values
+     * - 'small': A smaller size for the button
+     * - 'large': A larger size for the button
+     */
     size: {
       type: String,
       default: 'large',
     },
+
+    /**
+     * Specifies the target URL of the button when clicked, using Vue Router's syntax for dynamic routes.
+     * @values
+     *
+     * - String: A static URL string
+     * - Object: A Vue Router route object
+     * - null: The button will not be clickable
+     */
+
     to: {
       type: [String, Object],
       default: null,
     },
+
+    /**
+     * Specifies the target URL of the button when clicked, using standard URL syntax.
+     * @values
+     *
+     * - String: A static URL string
+     * - Object: An object to be serialized into URL parameters
+     * - null: The button will not be clickable
+     */
     href: {
       type: [String, Object],
       default: null,
     },
+
+    /**
+     * Determines whether the button will use its default atomic style (tailwind) or its default class
+     *
+     * @values
+     * - true: The button will have no default style and can be fully customized with a custom class
+     * - false: The button will use its default atomic style (tailwind) and can be further customized with additional classes
+     */
     headless: {
       type: Boolean,
       default: false,
     },
+
+    /**
+     * Determines whether the button is currently in a loading or processing state
+     *
+     * @values
+     * - true: The button is in a loading or processing state and should not be interacted with until the processing is complete
+     * - false: The button is not in a loading or processing state and can be interacted with as usual
+     */
+
     busy: {
       type: Boolean,
       default: false,
     },
+
+    /**
+     * Determines whether the button is disabled or not
+     *
+     * @values true, false
+     */
     disabled: {
       type: Boolean,
       default: false,

package/src/components/Dialog/VTDialogHeader.vue

@@ -7,6 +7,7 @@
         ? 'dialog-header'
         : '-mx-4 -mt-4 flex items-center justify-between gap-x-3 p-4 md:-mx-6 md:-mt-6 md:p-6',
     ]"
+    @click.stop
   >
     <slot></slot>
   </component>

package/src/components/Listbox/VTListbox.vue

@@ -16,16 +16,39 @@ 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.
+         */
         const registerTrigger = (trigger) => {
           if (!trigger) return;
           this.componentTrigger = trigger;
         };
 
+        /**
+         * Registers content to be used in the children components by setting its value to the componentContent property of the current object.
+         * @param {any} content - The content to be registered.
+         */
         const registerContent = (content) => {
           if (!content) return;
           this.componentContent = content;
         };
 
+        /**
+         * Registers search to be used in the children components by setting its value to the componentSearch property of the current object.
+         * @param {any} search - The search to be registered.
+         */
         const registerSearch = (search) => {
           if (!search) return;
           this.componentSearch = search;
@@ -52,8 +75,7 @@ export default {
         };
 
         const emit = (value) => {
-          this.$emit('input', value);
-          this.$emit('change', value);
+          this.valueComputed = value;
         };
 
         return {
@@ -63,8 +85,9 @@ export default {
           componentContent: this.componentContent,
           componentSearch: this.componentSearch,
           items: this.items,
+          multiple: this.multiple,
           search: this.search,
-          selectedValue: this.value,
+          $mutable,
           registerTrigger,
           registerContent,
           registerSearch,
@@ -79,22 +102,55 @@ export default {
   },
 
   props: {
+    /**
+     * The value of the component. Can be a string, number, object, or array.
+     * @type {string|number|object|array}
+     * @default null
+     */
     value: {
-      type: [String, Number, Object],
+      type: [String, Number, Object, Array],
       default: null,
     },
+    /**
+     * Determines whether the button will use its default atomic style (tailwind) or its default class
+     * @type {boolean}
+     * @values
+     * - true: The button will have no default style and can be fully customized with a custom class
+     * - false: The button will use its default atomic style (tailwind) and can be further customized with additional classes
+     * @default null
+     */
     headless: {
       type: Boolean,
       default: false,
     },
+    /**
+     * The placement of the component relative to its trigger element.
+     * @type {string}
+     * @values 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'
+     * @default 'bottom-start'
+     */
     placement: {
       type: String,
       default: 'bottom-start',
     },
+    /**
+     * Determines whether the component should be aligned to the right of its trigger element.
+     * @type {boolean}
+     * @default false
+     */
     right: {
       type: Boolean,
       default: false,
     },
+    /**
+     * Determines whether the component should allow multiple selections.
+     * @type {boolean}
+     * @default false
+     */
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data() {
@@ -103,6 +159,7 @@ export default {
       componentSearch: null,
       search: '',
       items: [],
+      itemsChecked: [],
       /**
        * Explaining the need for the floatingUiMinWidth data
        *
@@ -125,6 +182,16 @@ export default {
     id() {
       return `listbox-${this.componentId}`;
     },
+
+    valueComputed: {
+      get() {
+        return this.value;
+      },
+      set(newValue) {
+        this.$emit('input', newValue);
+        this.$emit('change', newValue);
+      },
+    },
   },
 };
 </script>

package/src/components/Listbox/VTListboxItem.vue

@@ -16,9 +16,16 @@
     @keydown.enter.prevent="onClick"
     @keydown.tab.prevent
   >
-    <!-- <span v-if="multiple">
-      <input type="radio" v-model="options" :value="value" />
-    </span> -->
+    <span v-if="apiListbox().multiple">
+      <input
+        v-model="apiListbox().$mutable.valueComputed"
+        :id="`${id}-checkbox`"
+        :value="value"
+        type="checkbox"
+        @click.stop
+        @change="onChange"
+      />
+    </span>
     <slot></slot>
     <span v-if="wasSelected" class="ml-auto">
       <IconCheckOutline class="text-secondary-200 h-5 w-5" />
@@ -53,7 +60,6 @@ export default {
       // apiInjected is used in the mixin floating-ui-item
       apiInjected: this.apiListbox,
       componentName: 'listbox-item',
-      options: [],
     };
   },
 
@@ -79,7 +85,7 @@ export default {
     wasSelected() {
       return (
         JSON.stringify(this.value) ===
-        JSON.stringify(this.apiListbox().selectedValue)
+        JSON.stringify(this.apiListbox().$mutable.valueComputed)
       );
     },
   },

package/src/components/Listbox/VTListboxLabel.vue

@@ -1,10 +1,9 @@
 <template>
   <component
     :is="as"
-    :class="{
-      ListboxLabel: headless,
-      'mb-2 block text-xs font-normal uppercase': !headless,
-    }"
+    :class="[
+      headless ? 'listbox-label' : 'mb-2 block text-xs font-normal uppercase',
+    ]"
   >
     <slot></slot>
   </component>

package/src/components/Listbox/VTListboxList.vue

@@ -2,7 +2,9 @@
   <ul
     :id="id"
     :class="[
-      headless ? 'listbox-list' : '-mx-3 max-h-[160px] w-auto overflow-y-auto',
+      headless
+        ? 'listbox-list'
+        : '-mx-3 max-h-[160px] w-auto overflow-y-auto scroll-auto',
     ]"
   >
     <slot></slot>

package/src/components/Listbox/VTListboxSearch.vue

@@ -111,6 +111,7 @@ export default {
 
       // select new item
       if (this.items[newSelectedIndex]) {
+        this.index = newSelectedIndex;
         this.items[newSelectedIndex].select();
       }
     },

package/src/components/Listbox/VTListboxTrigger.vue

@@ -123,6 +123,7 @@ export default {
 
     onClick(e) {
       this.init(e);
+      this.$emit('click');
     },
 
     onKeyDownOrUp(e) {

package/src/components/Utils/FloatingUi.vue

@@ -15,7 +15,7 @@
         :class="[
           headless
             ? `${this.component}-content`
-            : `shadow-300 absolute z-50 grid overflow-x-hidden rounded-md  ${this.classes} ${this.portalClass}`,
+            : `shadow-300 absolute z-50 grid overflow-hidden rounded-md  ${this.classes} ${this.portalClass}`,
         ]"
         v-bind="$attrs"
       >