@veritree/ui 0.23.0 → 0.24.0-0

package/src/components/Drawer/VTDrawerMain.vue

@@ -12,7 +12,7 @@
 export default {
   name: 'VTDrawerMain',
 
-  inject: ['api'],
+  inject: ['apiDrawer'],
 
   props: {
     as: {
@@ -23,15 +23,15 @@ export default {
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDrawer().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDrawer().isHeadless;
     },
 
     id() {
-      return `${this.api().id}-desc`;
+      return `${this.apiDrawer().id}-desc`;
     },
   },
 
@@ -42,7 +42,7 @@ 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.apiDrawer().id);
 
       if (dialog) {
         dialog.setAttribute('aria-describedby', this.id);

package/src/components/Drawer/VTDrawerOverlay.vue

@@ -12,14 +12,14 @@
 </template>
 
 <script>
-import FadeInOut from "../Transitions/FadeInOut.vue";
+import FadeInOut from '../Transitions/FadeInOut.vue';
 
 export default {
   components: {
     FadeInOut,
   },
 
-  inject: ["api"],
+  inject: ['apiDrawer'],
 
   data() {
     return {
@@ -29,21 +29,21 @@ export default {
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDrawer().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDrawer().isHeadless;
     },
 
     id() {
-      return `${this.api().id}-overlay`;
+      return `${this.apiDrawer().id}-overlay`;
     },
   },
 
   mounted() {
     this.visible = true;
-    this.api().registerOverlay(this);
+    this.apiDrawer().registerOverlay(this);
   },
 
   methods: {

package/src/components/Drawer/VTDrawerTitle.vue

@@ -15,7 +15,7 @@
 export default {
   name: 'VTDrawerTitle',
 
-  inject: ['api'],
+  inject: ['apiDrawer'],
 
   props: {
     as: {
@@ -26,15 +26,15 @@ export default {
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDrawer().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDrawer().isHeadless;
     },
 
     id() {
-      return `${this.api().id}-title`;
+      return `${this.apiDrawer().id}-title`;
     },
   },
 
@@ -45,7 +45,7 @@ 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.apiDrawer().id);
 
       if (dialog) {
         dialog.setAttribute('aria-labelledby', this.id);

package/src/components/DropdownMenu/VTDropdownMenu.vue

@@ -83,11 +83,5 @@ export default {
       floatingUiMinWidth: 200,
     };
   },
-
-  computed: {
-    id() {
-      return `dropdown-menu-${this.componentId}`;
-    },
-  },
 };
 </script>

package/src/components/DropdownMenu/VTDropdownMenuContent.vue

@@ -3,7 +3,6 @@
     :id="id"
     :visible="visible"
     :headless="headless"
-    :portal-class="$vnode.data.staticClass"
     component="dropdown"
   >
     <slot></slot>
@@ -46,5 +45,15 @@ export default {
 
     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

@@ -51,7 +51,11 @@ export default {
 
   computed: {
     as() {
-      return this.href ? 'a' : this.to ? 'NuxtLink' : 'button';
+      return this.href
+        ? 'a'
+        : this.to
+        ? resolveComponent('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

@@ -57,7 +57,7 @@ export default {
 
   mounted() {
     const trigger = {
-      id: this.id,
+      id: this.$el.getAttribute('id'), // avoids issues with hydration
       el: this.$el,
       cancel: this.cancel,
       focus: this.focus,
@@ -89,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/Form/VTFormFeedback.vue

@@ -19,7 +19,13 @@
           : null,
       ]"
     />
-    <span :class="[headless ? 'form-feedback--text' : 'text-sm text-gray-500']">
+    <span
+      :class="[
+        headless
+          ? 'form-feedback--text'
+          : 'text-sm lowercase text-gray-500 first-letter:uppercase',
+      ]"
+    >
       <slot />
     </span>
   </div>

package/src/components/Form/VTFormGroup.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="as" :class="classes" class="form-group">
+  <component :is="as" :class="[headless ? 'form-control' : 'mt-3']">
     <slot></slot>
   </component>
 </template>
@@ -11,12 +11,10 @@ export default {
       type: String,
       default: 'div',
     },
-  },
-
-  data() {
-    return {
-      classes: {},
-    };
+    headless: {
+      type: Boolean,
+      default: false,
+    },
   },
 };
 </script>

package/src/components/Form/VTFormLabel.vue

@@ -0,0 +1,22 @@
+<template>
+  <label
+    :class="[
+      headless
+        ? 'form-label'
+        : 'mb-1 flex justify-between gap-3 text-sm font-semibold',
+    ]"
+  >
+    <slot />
+  </label>
+</template>
+
+<script>
+export default {
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>

package/src/components/Form/VTFormRow.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="grid grid-cols-1 md:grid-cols-2 md:gap-4">
+    <slot />
+  </div>
+</template>

package/src/components/Form/VTInput.vue

@@ -1,9 +1,9 @@
 <template>
   <input
     :class="classComputed"
-    :value="value"
+    :value="modelValue"
     :disabled="disabled"
-    v-on="listeners"
+    v-bind="attrsComputed"
   />
 </template>
 
@@ -12,10 +12,8 @@ import {
   formControlMixin,
   formControlStyleMixin,
 } from '../../../mixins/form-control';
-
 export default {
   mixins: [formControlMixin, formControlStyleMixin],
-
   data() {
     return {
       name: 'input',
@@ -30,7 +28,6 @@ input[type='date']::-webkit-calendar-picker-indicator {
   position: absolute;
   opacity: 0;
 } */
-
 input[type='number'] {
   appearance: textfield;
 }

package/src/components/Form/VTInputIcon.vue

@@ -4,8 +4,7 @@
       :class="classComputed"
       :value="value"
       :disabled="disabled"
-      v-bind="$attrs"
-      v-on="listeners"
+      v-bind="attrsComputed"
     />
     <div :class="classComputedWrapperIcon">
       <component :is="icon" class="h-5 w-5" />

package/src/components/Form/VTInputPassword.vue

@@ -2,21 +2,25 @@
   <div :class="classComputedWrapper">
     <input
       :class="classComputed"
-      :value="value"
+      :value="modelValue"
       :disabled="disabled"
       :type="reveal ? 'text' : 'password'"
-      v-bind="$attrs"
-      v-on="listeners"
+      v-bind="attrsComputed"
     />
     <div :class="classComputedWrapperIcon">
-      <VTButton v-show="value.length" variant="icon" @click="reveal = !reveal">
-        <component :is="iconVisibility" class="h-5 w-5" />
+      <VTButton
+        v-show="modelValue.length"
+        variant="icon"
+        @click="reveal = !reveal"
+      >
+        <component :is="iconVisibility" class="h-5 w-5 text-gray-500" />
       </VTButton>
     </div>
   </div>
 </template>
 
 <script>
+import { IconVisibilityOn, IconVisibilityOff } from '@veritree/icons';
 import { formControlIconMixin } from '../../../mixins/form-control-icon';
 
 export default {
@@ -24,6 +28,11 @@ export default {
 
   mixins: [formControlIconMixin],
 
+  components: {
+    IconVisibilityOn,
+    IconVisibilityOff,
+  },
+
   props: {
     iconPlacement: {
       type: String,

package/src/components/Form/VTTextarea.vue

@@ -3,18 +3,15 @@
     :class="classComputed"
     :value="value"
     :disabled="disabled"
-    v-on="listeners"
+    v-bind="attrsComputed"
   />
 </template>
 
 <script>
-import {
-  formControlMixin,
-  formControlStyleMixin,
-} from '../../../mixins/form-control';
+import { formControlMixin } from '../../../mixins/form-control';
 
 export default {
-  mixins: [formControlMixin, formControlStyleMixin],
+  mixins: [formControlMixin],
 
   data() {
     return {

package/src/components/Image/VTImage.vue

@@ -1,7 +1,14 @@
 <template>
   <img
     :src="srcComputed"
-    :class="{ 'animate-pulse': !isLoaded }"
+    :class="[
+      headless ? null : isLoaded ? null : 'animate-pulse',
+      headless
+        ? null
+        : hasObjectFit
+        ? `h-full w-full ${objectFitComputed}`
+        : null,
+    ]"
     v-bind="$attrs"
     @load="onLoad"
     @error="onError"
@@ -15,18 +22,26 @@ export default {
   name: 'VTImage',
 
   props: {
-    src: {
-      type: String,
-      default: '',
+    headless: {
+      type: Boolean,
+      default: false,
     },
     cdnSrc: {
       type: [String, Object],
       default: null,
     },
+    objectFit: {
+      type: String,
+      default: null,
+    },
     placeholder: {
       type: String,
       default: `data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22600%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20%25%7Bw%7D%20%25%7Bh%7D%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3A%23bbb%3B%22%3E%3C%2Frect%3E%3C%2Fsvg%3E`,
     },
+    src: {
+      type: String,
+      default: '',
+    },
   },
 
   data() {
@@ -45,17 +60,33 @@ export default {
           return this.placeholder;
         }
 
-        if (this.cdnSrc) {
-          return this.handleImageResizing(this.cdnSrc, this.$attrs.width);
+        if (this.src) {
+          return this.src.includes('cloudfront.net/')
+            ? handleImageResizing(this.src, this.$attrs.width)
+            : this.src;
         }
 
-        if (this.src) {
-          return this.src;
+        if (this.cdnSrc) {
+          return handleImageResizing(this.cdnSrc, this.$attrs.width);
         }
       }
 
       return null;
     },
+
+    hasObjectFit() {
+      return this.objectFit;
+    },
+
+    objectFitComputed() {
+      return this.hasObjectFit
+        ? this.objectFit === 'cover'
+          ? 'object-cover'
+          : this.objectFit === 'contain'
+          ? 'object-contain'
+          : null
+        : null;
+    },
   },
 
   methods: {

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: {
-    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,
     },
+    /**
+     * 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.modelValue;
+      },
+      set(newValue) {
+        this.$emit('update:modelValue', newValue);
+        this.$emit('change', newValue);
+      },
+    },
   },
 };
 </script>

package/src/components/Listbox/VTListboxContent.vue

@@ -4,7 +4,6 @@
     :visible="visible"
     :headless="headless"
     :aria-activedescendant="activeDescedant"
-    :portal-class="$vnode.data.staticClass"
     component="listbox"
     role="listbox"
   >

package/src/components/Listbox/VTListboxItem.vue

@@ -16,6 +16,16 @@
     @keydown.enter.prevent="onClick"
     @keydown.tab.prevent
   >
+    <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" />
@@ -75,7 +85,7 @@ export default {
     wasSelected() {
       return (
         JSON.stringify(this.value) ===
-        JSON.stringify(this.apiListbox().selectedValue)
+        JSON.stringify(this.apiListbox().$mutable.valueComputed)
       );
     },
   },