@veritree/ui 0.19.2-20 → 0.19.2-22

package/src/components/Dialog/VTDialogHeader.vue

@@ -2,10 +2,12 @@
   <component
     :is="as"
     :id="id"
-    :class="{
-      'Dialog-header': headless,
-      'mb-8 flex justify-between gap-x-3 items-center w-full': !headless,
-    }"
+    :class="[
+      headless
+        ? '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>
@@ -18,6 +20,10 @@ export default {
   inject: ['apiDialog'],
 
   props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
     as: {
       type: String,
       default: 'header',
@@ -25,16 +31,8 @@ export default {
   },
 
   computed: {
-    dark() {
-      return this.apiDialog().isDark;
-    },
-
-    headless() {
-      return this.apiDialog().isHeadless;
-    },
-
     id() {
-      return `${this.apiDialog().id}-header`;
+      return `dialog-header-${this.apiDialog().componentId}`;
     },
   },
 

package/src/components/Dialog/VTDialogMain.vue

@@ -2,10 +2,7 @@
   <component
     :is="as"
     :id="id"
-    :class="{
-      'Dialog-body': headless,
-      'flex-1 w-full h-full overflow-y-auto': !headless,
-    }"
+    :class="[headless ? 'dialog-body' : 'h-full flex-1 overflow-y-auto']"
   >
     <slot></slot>
   </component>
@@ -18,6 +15,10 @@ export default {
   inject: ['apiDialog'],
 
   props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
     as: {
       type: String,
       default: 'main',
@@ -25,16 +26,8 @@ export default {
   },
 
   computed: {
-    dark() {
-      return this.apiDialog().isDark;
-    },
-
-    headless() {
-      return this.apiDialog().isHeadless;
-    },
-
     id() {
-      return `${this.apiDialog().id}-desc`;
+      return `dialog-main-${this.apiDialog().componentId}`;
     },
   },
 

package/src/components/Dialog/VTDialogOverlay.vue

@@ -3,11 +3,8 @@
     <div
       v-if="visible"
       :id="id"
-      :class="{
-        'Dialog-overlay': headless,
-        'bg-primary-200/80 fixed inset-0': !headless,
-      }"
-    ></div>
+      :class="[headless ? 'dialog-overlay' : 'bg-primary-200/80 fixed inset-0']"
+    />
   </FadeInOut>
 </template>
 
@@ -23,6 +20,13 @@ export default {
 
   inject: ['apiDialog'],
 
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
   data() {
     return {
       visible: false,
@@ -33,14 +37,6 @@ export default {
     id() {
       return `dialog-overlay-${this.apiDialog().componentId}`;
     },
-
-    dark() {
-      return this.apiDialog().isDark;
-    },
-
-    headless() {
-      return this.apiDialog().isHeadless;
-    },
   },
 
   mounted() {

package/src/components/Dialog/VTDialogTitle.vue

@@ -1,7 +1,7 @@
 <template>
   <span
     :id="id"
-    :class="{ 'Dialog-header': headless, 'text-2xl font-semibold': !headless }"
+    :class="[headless ? 'dialog-header' : 'text-2xl font-semibold']"
   >
     <slot></slot
   ></span>
@@ -13,13 +13,16 @@ export default {
 
   inject: ['apiDialog'],
 
-  computed: {
-    headless() {
-      return this.apiDialog().isHeadless;
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
     },
+  },
 
+  computed: {
     id() {
-      return `${this.apiDialog().id}-title`;
+      return `dialog-overlay-${this.apiDialog().componentId}`;
     },
   },
 };

package/src/components/Disclosure/VTDisclosureHeader.vue

@@ -4,7 +4,7 @@
     :class="[
       headless
         ? 'details-header'
-        : 'flex cursor-pointer justify-between gap-3 text-body font-semibold',
+        : 'text-body flex cursor-pointer justify-between gap-3 font-semibold',
     ]"
     :aria-controls="ariaControls"
     :aria-expanded="String(ariaExpanded)"

package/src/components/DropdownMenu/VTDropdownMenu.vue

@@ -56,12 +56,31 @@ export default {
       type: Boolean,
       default: false,
     },
+    placement: {
+      type: String,
+      default: 'bottom-start',
+    },
   },
 
   data() {
     return {
       componentId: genId(),
       items: [],
+      /**
+       * Explaining the need for the floatingUiMinWidth data
+       *
+       * The floating ui is a result of two items:
+       *
+       * 1. Trigger: the action button
+       * 2. Content: the popper/wrapper that appears after triggering the action button
+       *
+       * By default, the content will match the triggers width.
+       * The problem with this is that the trigger width
+       * might be too small causing the content to not fit
+       * what is inside it properly. So, to avoid this,
+       * a min width is needed.
+       */
+      floatingUiMinWidth: 200,
     };
   },
 

package/src/components/DropdownMenu/VTDropdownMenuContent.vue

@@ -1,10 +1,9 @@
 <template>
   <FloatingUi
-    :visible="visible"
     :id="id"
+    :visible="visible"
     :headless="headless"
-    :class="{ 'dropdown-menu-content': headless }"
-    :floating-ui-class="floatingUiClass"
+    component="dropdown"
   >
     <slot></slot>
   </FloatingUi>
@@ -16,6 +15,8 @@ import { floatingUiContentMixin } from '../../../mixins/floating-ui-content';
 export default {
   name: 'VTDropdownMenuContent',
 
+  inheritAttrs: false,
+
   mixins: [floatingUiContentMixin],
 
   inject: ['apiDropdownMenu'],
@@ -39,13 +40,20 @@ export default {
       id: this.id,
       hide: this.hide,
       show: this.show,
-      getMousemove: this.getMousemove,
-      setMousemove: this.setMousemove,
-      unsetMousemove: this.unsetMousemove,
       setActiveDescedant: this.setActiveDescedant,
     };
 
     this.apiDropdownMenu().registerContent(content);
   },
+
+  methods: {
+    hidden() {
+      this.$emit('hidden');
+    },
+
+    shown() {
+      this.$emit('shown');
+    },
+  },
 };
 </script>

package/src/components/DropdownMenu/VTDropdownMenuDivider.vue

@@ -1,9 +1,8 @@
 <template>
   <div
-    :class="{
-      PopoverDivider: headless,
-      '-mx-3 my-2 h-[1px]': !headless,
-    }"
+    :class="[
+      headless ? 'dropdown-menu-divider' : '-mx-3 my-2 h-[1px] bg-gray-200',
+    ]"
   ></div>
 </template>
 
@@ -13,18 +12,10 @@ export default {
 
   inject: ['apiDropdownMenu'],
 
-  headless: {
-    type: Boolean,
-    default: false,
-  },
-
-  computed: {
-    dark() {
-      return this.apiDropdownMenu().isDark;
-    },
-
-    headless() {
-      return this.apiDropdownMenu().isHeadless;
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
     },
   },
 };

package/src/components/DropdownMenu/VTDropdownMenuItem.vue

@@ -9,8 +9,8 @@
     class="-mx-3"
     role="menuitem"
     @click.stop.prevent="onClick"
-    @keydown.down.prevent="focusPreviousItem"
-    @keydown.up.prevent="focusNextItem"
+    @keydown.down.prevent="focusNextItem"
+    @keydown.up.prevent="focusPreviousItem"
     @keydown.home.prevent="focusFirstItem"
     @keydown.end.prevent="focusLastItem"
     @keydown.esc.prevent="onKeyEsc"
@@ -51,11 +51,7 @@ export default {
 
   computed: {
     as() {
-      return this.href
-        ? 'a'
-        : this.to
-        ? resolveComponent('NuxtLink')
-        : 'button';
+      return this.href ? 'a' : this.to ? 'NuxtLink' : 'button';
     },
   },
 };

package/src/components/DropdownMenu/VTDropdownMenuLabel.vue

@@ -1,11 +1,6 @@
 <template>
   <span
-    :class="{
-      MenuLabel: headless,
-      'mb-2 block text-xs uppercase': !headless,
-      'text-inherit': !dark,
-      'text-white': dark,
-    }"
+    :class="[headless ? 'dropdown-menu-label' : 'mb-2 block text-xs uppercase']"
   >
     <slot></slot>
   </span>
@@ -18,10 +13,6 @@ export default {
   inject: ['apiDropdownMenu'],
 
   computed: {
-    dark() {
-      return this.apiDropdownMenu().isDark;
-    },
-
     headless() {
       return this.apiDropdownMenu().isHeadless;
     },

package/src/components/DropdownMenu/VTDropdownMenuTrigger.vue

@@ -24,14 +24,13 @@ export default {
       hasPopup: false,
       controls: null,
       trigger: null,
-      id: null,
     };
   },
 
   computed: {
-    // id() {
-    //   return `dropdown-menu-trigger-${this.apiDropdownMenu().id}`;
-    // },
+    id() {
+      return `dropdown-menu-trigger-${this.apiDropdownMenu().id}`;
+    },
 
     componentContent() {
       return this.apiDropdownMenu().componentContent;
@@ -57,8 +56,6 @@ export default {
   },
 
   mounted() {
-    this.id = `dropdown-menu-trigger-${this.apiDropdownMenu().id}`;
-
     const trigger = {
       id: this.id,
       el: this.$el,
@@ -92,9 +89,7 @@ export default {
      * errors related to adding the event listener.
      */
     addTriggerEvents() {
-      this.trigger.addEventListener('click', (e) => {
-        this.onClick(e);
-      });
+      this.trigger.addEventListener('click', this.onClick);
     },
 
     init(e) {

package/src/components/Listbox/VTListbox.vue

@@ -16,26 +16,44 @@ 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.search = search;
+          this.componentSearch = search;
         };
 
-        // const registerList = (list) => {
-        //   if (!list) return;
-        //   this.list = list;
-        // };
-
         const registerItem = (item) => {
           if (!item) return;
           this.items.push(item);
@@ -46,9 +64,18 @@ export default {
           this.items.splice(index, 1);
         };
 
+        const pushSearch = (key) => {
+          key === 'Backspace' && this.search.length
+            ? (this.search = this.search.slice(0, -1))
+            : (this.search += key);
+        };
+
+        const clearSearch = () => {
+          this.search = '';
+        };
+
         const emit = (value) => {
-          this.$emit('update:modelValue', value);
-          this.$emit('change', value);
+          this.valueComputed = value;
         };
 
         return {
@@ -56,14 +83,18 @@ export default {
           component: this.component,
           componentTrigger: this.componentTrigger,
           componentContent: this.componentContent,
+          componentSearch: this.componentSearch,
           items: this.items,
+          multiple: this.multiple,
           search: this.search,
+          $mutable,
           registerTrigger,
           registerContent,
           registerSearch,
-          // registerList,
           registerItem,
           unregisterItem,
+          pushSearch,
+          clearSearch,
           emit,
         };
       },
@@ -71,19 +102,52 @@ export default {
   },
 
   props: {
-    value: {
-      type: [String, Number, Object],
+    /**
+     * The value of the component. Can be a string, number, object, or array.
+     * @type {string|number|object|array}
+     * @default null
+     */
+    modelValue: {
+      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,
     },
-    dark: {
+    /**
+     * 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,
     },
-    right: {
+    /**
+     * Determines whether the component should allow multiple selections.
+     * @type {boolean}
+     * @default false
+     */
+    multiple: {
       type: Boolean,
       default: false,
     },
@@ -92,8 +156,25 @@ export default {
   data() {
     return {
       componentId: genId(),
-      search: null,
+      componentSearch: null,
+      search: '',
       items: [],
+      itemsChecked: [],
+      /**
+       * Explaining the need for the floatingUiMinWidth data
+       *
+       * The floating ui is a result of two items:
+       *
+       * 1. Trigger: the action button
+       * 2. Content: the popper/wrapper that appears after triggering the action button
+       *
+       * By default, the content will match the triggers width.
+       * The problem with this is that the trigger width
+       * might be too small causing the content to not fit
+       * what is inside it properly. So, to avoid this,
+       * a min width is needed.
+       */
+      floatingUiMinWidth: 200,
     };
   },
 
@@ -101,6 +182,16 @@ export default {
     id() {
       return `listbox-${this.componentId}`;
     },
+
+    valueComputed: {
+      get() {
+        return this.modelValue;
+      },
+      set(newValue) {
+        this.$emit('update:modelValue', newValue);
+        this.$emit('change', newValue);
+      },
+    },
   },
 };
 </script>

package/src/components/Listbox/VTListboxContent.vue

@@ -1,11 +1,10 @@
 <template>
   <FloatingUi
-    :visible="visible"
     :id="id"
-    :aria-activedescendant="activeDescedant"
+    :visible="visible"
     :headless="headless"
-    :class="{ 'listbox-content': headless }"
-    :floating-ui-class="floatingUiClass"
+    :aria-activedescendant="activeDescedant"
+    component="listbox"
     role="listbox"
   >
     <slot></slot>
@@ -47,9 +46,6 @@ export default {
       id: this.id,
       show: this.show,
       hide: this.hide,
-      getMousemove: this.getMousemove,
-      setMousemove: this.setMousemove,
-      unsetMousemove: this.unsetMousemove,
       setActiveDescedant: this.setActiveDescedant,
     };