@veritree/ui 0.22.3 → 0.24.0

package/src/components/Dialog/VTDialogFooter.vue

@@ -1,32 +1,21 @@
 <template>
-  <component
-    :is="as"
-    :class="{ 'Dialog-footer': headless, 'w-full': !headless }"
-  >
+  <component :is="as" :class="[headless ? 'dialog-footer' : 'w-full']">
     <slot></slot>
   </component>
 </template>
 
 <script>
 export default {
-  name: "VTDialogFooter",
-
-  inject: ["api"],
+  name: 'VTDialogFooter',
 
   props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
     as: {
       type: String,
-      default: "footer",
-    },
-  },
-
-  computed: {
-    dark() {
-      return this.api().isDark;
-    },
-
-    headless() {
-      return this.api().isHeadless;
+      default: 'footer',
     },
   },
 };

package/src/components/Dialog/VTDialogHeader.vue

@@ -2,10 +2,11 @@
   <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'
+        : 'mb-8 flex w-full items-center justify-between gap-x-3',
+    ]"
   >
     <slot></slot>
   </component>
@@ -13,28 +14,24 @@
 
 <script>
 export default {
-  name: "VTDialogHeader",
+  name: 'VTDialogHeader',
 
-  inject: ["api"],
+  inject: ['apiDialog'],
 
   props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
     as: {
       type: String,
-      default: "header",
+      default: 'header',
     },
   },
 
   computed: {
-    dark() {
-      return this.api().isDark;
-    },
-
-    headless() {
-      return this.api().isHeadless;
-    },
-
     id() {
-      return `${this.api().id}-header`;
+      return `dialog-header-${this.apiDialog().componentId}`;
     },
   },
 
@@ -45,10 +42,10 @@ export default {
   methods: {
     // In here because if there is no header, the dialog will not be labelled by
     setDialogLabelledby() {
-      const dialog = document.getElementById(this.api().id);
+      const dialog = document.getElementById(this.apiDialog().id);
 
       if (dialog) {
-        dialog.setAttribute("aria-labelledby", this.id);
+        dialog.setAttribute('aria-labelledby', this.id);
       }
     },
   },

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 w-full flex-1 overflow-y-auto']"
   >
     <slot></slot>
   </component>
@@ -13,28 +10,24 @@
 
 <script>
 export default {
-  name: "VTDialogMain",
+  name: 'VTDialogMain',
 
-  inject: ["api"],
+  inject: ['apiDialog'],
 
   props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
     as: {
       type: String,
-      default: "main",
+      default: 'main',
     },
   },
 
   computed: {
-    dark() {
-      return this.api().isDark;
-    },
-
-    headless() {
-      return this.api().isHeadless;
-    },
-
     id() {
-      return `${this.api().id}-desc`;
+      return `dialog-main-${this.apiDialog().componentId}`;
     },
   },
 
@@ -45,10 +38,10 @@ export default {
   methods: {
     // In here because if there is no body, the dialog will not be described by
     setDialogDescribedby() {
-      const dialog = document.getElementById(this.api().id);
+      const dialog = document.getElementById(this.apiDialog().id);
 
       if (dialog) {
-        dialog.setAttribute("aria-describedby", this.id);
+        dialog.setAttribute('aria-describedby', this.id);
       }
     },
   },

package/src/components/Dialog/VTDialogOverlay.vue

@@ -3,25 +3,29 @@
     <div
       v-if="visible"
       :id="id"
-      :class="{
-        'Dialog-overlay': headless,
-        'fixed inset-0 bg-fd-450/80': !headless,
-      }"
-    ></div>
+      :class="[headless ? 'dialog-overlay' : 'bg-primary-200/80 fixed inset-0']"
+    />
   </FadeInOut>
 </template>
 
 <script>
-import FadeInOut from "../Transitions/FadeInOut.vue";
+import FadeInOut from '../Transitions/FadeInOut.vue';
 
 export default {
-  name: "VTDialogOverlay",
+  name: 'VTDialogOverlay',
 
   components: {
     FadeInOut,
   },
 
-  inject: ["api"],
+  inject: ['apiDialog'],
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
 
   data() {
     return {
@@ -31,21 +35,13 @@ export default {
 
   computed: {
     id() {
-      return `dialog-overlay-${this.api().componentId}`;
-    },
-
-    dark() {
-      return this.api().isDark;
-    },
-
-    headless() {
-      return this.api().isHeadless;
+      return `dialog-overlay-${this.apiDialog().componentId}`;
     },
   },
 
   mounted() {
     this.visible = true;
-    this.api().registerOverlay(this);
+    this.apiDialog().registerOverlay(this);
   },
 
   methods: {

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>
@@ -9,17 +9,20 @@
 
 <script>
 export default {
-  name: "VTDialogTitle",
+  name: 'VTDialogTitle',
 
-  inject: ["api"],
+  inject: ['apiDialog'],
 
-  computed: {
-    headless() {
-      return this.api().isHeadless;
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
     },
+  },
 
+  computed: {
     id() {
-      return `${this.api().id}-title`;
+      return `dialog-overlay-${this.apiDialog().componentId}`;
     },
   },
 };

package/src/components/Drawer/VTDrawerContent.vue

@@ -22,7 +22,7 @@
         'bottom-0': position === 'bottom',
       }"
       tabindex="-1"
-      @keyup.esc="hide"
+      @keydown.esc.stop="hide"
     >
       <slot></slot>
     </div>

package/src/components/Drawer/VTDrawerFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="as" :class="{ 'Dialog-footer': headless }">
+  <component :is="as" :class="{ 'dialog-footer': headless }">
     <slot></slot>
   </component>
 </template>

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,10 @@
 <template>
   <FloatingUi
-    :visible="visible"
     :id="id"
+    :visible="visible"
     :headless="headless"
-    :class="{ 'dropdown-menu-content': headless }"
-    :floating-ui-class="floatingUiClass"
+    :portal-class="$vnode.data.staticClass"
+    component="dropdown"
   >
     <slot></slot>
   </FloatingUi>
@@ -16,6 +16,8 @@ import { floatingUiContentMixin } from '../../../mixins/floating-ui-content';
 export default {
   name: 'VTDropdownMenuContent',
 
+  inheritAttrs: false,
+
   mixins: [floatingUiContentMixin],
 
   inject: ['apiDropdownMenu'],
@@ -39,9 +41,6 @@ export default {
       id: this.id,
       hide: this.hide,
       show: this.show,
-      getMousemove: this.getMousemove,
-      setMousemove: this.setMousemove,
-      unsetMousemove: this.unsetMousemove,
       setActiveDescedant: this.setActiveDescedant,
     };
 

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"

package/src/components/Form/VTFormFeedback.vue

@@ -1,25 +1,25 @@
 <template>
   <div
     :class="[
-      headless ? 'form-feedback' : 'flex gap-2 mt-1 items-baseline',
+      headless ? 'form-feedback' : 'mt-1 flex items-baseline gap-2',
       // variant styles
-      headless ? `form-feedback--{$variant}` : null,
+      headless ? `form-feedback--${variant}` : null,
     ]"
   >
     <component
       v-if="showIcon"
       :is="icon"
       :class="[
-        headless ? 'form-feedback__icon' : 'relative top-1 shrink-0 h-4 w-4',
+        headless ? 'form-feedback__icon' : 'relative top-1 h-4 w-4 shrink-0',
         // variant styles
         headless
-          ? `form-feedback__icon--{$variant}`
+          ? `form-feedback__icon--${variant}`
           : isError
           ? 'text-error-500'
           : null,
       ]"
     />
-    <span :class="[headless ? 'form-feedback--text' : 'text-gray-500 text-sm']">
+    <span :class="[headless ? 'form-feedback--text' : 'text-sm text-gray-500']">
       <slot />
     </span>
   </div>

package/src/components/Form/VTInput.vue

@@ -8,10 +8,13 @@
 </template>
 
 <script>
-import { formControlMixin } from '../../../mixins/form-control';
+import {
+  formControlMixin,
+  formControlStyleMixin,
+} from '../../../mixins/form-control';
 
 export default {
-  mixins: [formControlMixin],
+  mixins: [formControlMixin, formControlStyleMixin],
 
   data() {
     return {

package/src/components/Form/VTTextarea.vue

@@ -8,10 +8,13 @@
 </template>
 
 <script>
-import { formControlMixin } from '../../../mixins/form-control';
+import {
+  formControlMixin,
+  formControlStyleMixin,
+} from '../../../mixins/form-control';
 
 export default {
-  mixins: [formControlMixin],
+  mixins: [formControlMixin, formControlStyleMixin],
 
   data() {
     return {

package/src/components/Listbox/VTListbox.vue

@@ -28,14 +28,9 @@ export default {
 
         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,6 +41,16 @@ 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('input', value);
           this.$emit('change', value);
@@ -56,14 +61,17 @@ export default {
           component: this.component,
           componentTrigger: this.componentTrigger,
           componentContent: this.componentContent,
+          componentSearch: this.componentSearch,
           items: this.items,
           search: this.search,
+          selectedValue: this.value,
           registerTrigger,
           registerContent,
           registerSearch,
-          // registerList,
           registerItem,
           unregisterItem,
+          pushSearch,
+          clearSearch,
           emit,
         };
       },
@@ -79,9 +87,9 @@ export default {
       type: Boolean,
       default: false,
     },
-    dark: {
-      type: Boolean,
-      default: false,
+    placement: {
+      type: String,
+      default: 'bottom-start',
     },
     right: {
       type: Boolean,
@@ -92,8 +100,24 @@ export default {
   data() {
     return {
       componentId: genId(),
-      search: null,
+      componentSearch: null,
+      search: '',
       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/Listbox/VTListboxContent.vue

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