@veritree/ui 0.39.2 → 0.40.0

package/index.js

@@ -1,71 +1,76 @@
-import VTAlert from "./src/components/Alert/VTAlert.vue";
-import VTAvatar from "./src/components/Avatar/VTAvatar.vue";
-import VTAvatarImage from "./src/components/Avatar/VTAvatarImage.vue";
-import VTAvatarText from "./src/components/Avatar/VTAvatarText.vue";
-import VTButton from "./src/components/Button/VTButton.vue";
-import VTImage from "./src/components/Image/VTImage.vue";
-import VTImageCounter from "./src/components/Image/VTImageCounter.vue";
-import VTImageHover from "./src/components/Image/VTImageHover.vue";
-import VTDropdownMenu from "./src/components/DropdownMenu/VTDropdownMenu.vue";
-import VTDropdownMenuContent from "./src/components/DropdownMenu/VTDropdownMenuContent.vue";
-import VTDropdownMenuDivider from "./src/components/DropdownMenu/VTDropdownMenuDivider.vue";
-import VTDropdownMenuGroup from "./src/components/DropdownMenu/VTDropdownMenuGroup.vue";
-import VTDropdownMenuItem from "./src/components/DropdownMenu/VTDropdownMenuItem.vue";
-import VTDropdownMenuLabel from "./src/components/DropdownMenu/VTDropdownMenuLabel.vue";
-import VTDropdownMenuTrigger from "./src/components/DropdownMenu/VTDropdownMenuTrigger.vue";
-import VTPopover from "./src/components/Popover/VTPopover.vue";
-import VTPopoverContent from "./src/components/Popover/VTPopoverContent.vue";
-import VTPopoverDivider from "./src/components/Popover/VTPopoverDivider.vue";
-import VTPopoverGroup from "./src/components/Popover/VTPopoverGroup.vue";
-import VTPopoverItem from "./src/components/Popover/VTPopoverItem.vue";
-import VTPopoverTrigger from "./src/components/Popover/VTPopoverTrigger.vue";
-import VTFormFeedback from "./src/components/Form/VTFormFeedback.vue";
-import VTFormGroup from "./src/components/Form/VTFormGroup.vue";
-import VTInput from "./src/components/Form/VTInput.vue";
-import VTInputIcon from "./src/components/Form/VTInputIcon.vue";
-import VTInputPassword from "./src/components/Form/VTInputPassword.vue";
-import VTListbox from "./src/components/Listbox/VTListbox.vue";
-import VTListboxContent from "./src/components/Listbox/VTListboxContent.vue";
-import VTListboxItem from "./src/components/Listbox/VTListboxItem.vue";
-import VTListboxLabel from "./src/components/Listbox/VTListboxLabel.vue";
-import VTListboxList from "./src/components/Listbox/VTListboxList.vue";
-import VTListboxSearch from "./src/components/Listbox/VTListboxSearch.vue";
-import VTListboxTrigger from "./src/components/Listbox/VTListboxTrigger.vue";
-import VTSpinner from "./src/components/Spinner/VTSpinner.vue";
-import VTInputDate from "./src/components/Input/VTInputDate.vue";
-import VTInputFile from "./src/components/Input/VTInputFile.vue";
-import VTInputUpload from "./src/components/Input/VTInputUpload.vue";
-import VTProgressBar from "./src/components/ProgressBar/VTProgressBar.vue";
-import VTTextarea from "./src/components/Textarea/VTTextarea.vue";
-import VTModal from "./src/components/Modal/VTModal.vue";
-import VTTab from "./src/components/Tabs/VTTab.vue";
-import VTTabGroup from "./src/components/Tabs/VTTabGroup.vue";
-import VTTabList from "./src/components/Tabs/VTTabList.vue";
-import VTTabPanel from "./src/components/Tabs/VTTabPanel.vue";
-import VTTabPanels from "./src/components/Tabs/VTTabPanels.vue";
-import VTDialog from "./src/components/Dialog/VTDialog.vue";
-import VTDialogClose from "./src/components/Dialog/VTDialogClose.vue";
-import VTDialogContent from "./src/components/Dialog/VTDialogContent.vue";
-import VTDialogFooter from "./src/components/Dialog/VTDialogFooter.vue";
-import VTDialogHeader from "./src/components/Dialog/VTDialogHeader.vue";
-import VTDialogMain from "./src/components/Dialog/VTDialogMain.vue";
-import VTDialogOverlay from "./src/components/Dialog/VTDialogOverlay.vue";
-import VTDialogTitle from "./src/components/Dialog/VTDialogTitle.vue";
-import VTDrawer from "./src/components/Drawer/VTDrawer.vue";
-import VTDrawerClose from "./src/components/Drawer/VTDrawerClose.vue";
-import VTDrawerContent from "./src/components/Drawer/VTDrawerContent.vue";
-import VTDrawerFooter from "./src/components/Drawer/VTDrawerFooter.vue";
-import VTDrawerHeader from "./src/components/Drawer/VTDrawerHeader.vue";
-import VTDrawerTitle from "./src/components/Drawer/VTDrawerTitle.vue";
-import VTDrawerMain from "./src/components/Drawer/VTDrawerMain.vue";
-import VTDrawerOverlay from "./src/components/Drawer/VTDrawerOverlay.vue";
-import VTDisclosure from "./src/components/Disclosure/VTDisclosure.vue";
-import VTDisclosureDetails from "./src/components/Disclosure/VTDisclosureDetails.vue";
-import VTDisclosureHeader from "./src/components/Disclosure/VTDisclosureHeader.vue";
-import VTDisclosureIcon from "./src/components/Disclosure/VTDisclosureIcon.vue";
-import VTDisclosureContent from "./src/components/Disclosure/VTDisclosureContent.vue";
-import VTSkeleton from "./src/components/Skeleton/VTSkeleton.vue";
-import VTSkeletonItem from "./src/components/Skeleton/VTSkeletonItem.vue";
+import VTAlert from './src/components/Alert/VTAlert.vue';
+import VTAvatar from './src/components/Avatar/VTAvatar.vue';
+import VTAvatarImage from './src/components/Avatar/VTAvatarImage.vue';
+import VTAvatarText from './src/components/Avatar/VTAvatarText.vue';
+import VTButton from './src/components/Button/VTButton.vue';
+import VTImage from './src/components/Image/VTImage.vue';
+import VTImageCounter from './src/components/Image/VTImageCounter.vue';
+import VTImageHover from './src/components/Image/VTImageHover.vue';
+import VTDropdownMenu from './src/components/DropdownMenu/VTDropdownMenu.vue';
+import VTDropdownMenuContent from './src/components/DropdownMenu/VTDropdownMenuContent.vue';
+import VTDropdownMenuDivider from './src/components/DropdownMenu/VTDropdownMenuDivider.vue';
+import VTDropdownMenuGroup from './src/components/DropdownMenu/VTDropdownMenuGroup.vue';
+import VTDropdownMenuItem from './src/components/DropdownMenu/VTDropdownMenuItem.vue';
+import VTDropdownMenuLabel from './src/components/DropdownMenu/VTDropdownMenuLabel.vue';
+import VTDropdownMenuTrigger from './src/components/DropdownMenu/VTDropdownMenuTrigger.vue';
+import VTPopover from './src/components/Popover/VTPopover.vue';
+import VTPopoverContent from './src/components/Popover/VTPopoverContent.vue';
+import VTPopoverDivider from './src/components/Popover/VTPopoverDivider.vue';
+import VTPopoverGroup from './src/components/Popover/VTPopoverGroup.vue';
+import VTPopoverItem from './src/components/Popover/VTPopoverItem.vue';
+import VTPopoverTrigger from './src/components/Popover/VTPopoverTrigger.vue';
+import VTForm from './src/components/Form/VTForm.vue';
+import VTFormRow from './src/components/Form/VTFormRow.vue';
+import VTFormCol from './src/components/Form/VTFormCol.vue';
+import VTFieldset from './src/components/Form/VTFieldset.vue';
+import VTLegend from './src/components/Form/VTLegend.vue';
+import VTFormFeedback from './src/components/Form/VTFormFeedback.vue';
+import VTFormGroup from './src/components/Form/VTFormGroup.vue';
+import VTInput from './src/components/Form/VTInput.vue';
+import VTInputIcon from './src/components/Form/VTInputIcon.vue';
+import VTInputPassword from './src/components/Form/VTInputPassword.vue';
+import VTListbox from './src/components/Listbox/VTListbox.vue';
+import VTListboxContent from './src/components/Listbox/VTListboxContent.vue';
+import VTListboxItem from './src/components/Listbox/VTListboxItem.vue';
+import VTListboxLabel from './src/components/Listbox/VTListboxLabel.vue';
+import VTListboxList from './src/components/Listbox/VTListboxList.vue';
+import VTListboxSearch from './src/components/Listbox/VTListboxSearch.vue';
+import VTListboxTrigger from './src/components/Listbox/VTListboxTrigger.vue';
+import VTSpinner from './src/components/Spinner/VTSpinner.vue';
+import VTInputDate from './src/components/Input/VTInputDate.vue';
+import VTInputFile from './src/components/Input/VTInputFile.vue';
+import VTInputUpload from './src/components/Input/VTInputUpload.vue';
+import VTProgressBar from './src/components/ProgressBar/VTProgressBar.vue';
+import VTTextarea from './src/components/Textarea/VTTextarea.vue';
+import VTModal from './src/components/Modal/VTModal.vue';
+import VTTab from './src/components/Tabs/VTTab.vue';
+import VTTabGroup from './src/components/Tabs/VTTabGroup.vue';
+import VTTabList from './src/components/Tabs/VTTabList.vue';
+import VTTabPanel from './src/components/Tabs/VTTabPanel.vue';
+import VTTabPanels from './src/components/Tabs/VTTabPanels.vue';
+import VTDialog from './src/components/Dialog/VTDialog.vue';
+import VTDialogClose from './src/components/Dialog/VTDialogClose.vue';
+import VTDialogContent from './src/components/Dialog/VTDialogContent.vue';
+import VTDialogFooter from './src/components/Dialog/VTDialogFooter.vue';
+import VTDialogHeader from './src/components/Dialog/VTDialogHeader.vue';
+import VTDialogMain from './src/components/Dialog/VTDialogMain.vue';
+import VTDialogOverlay from './src/components/Dialog/VTDialogOverlay.vue';
+import VTDialogTitle from './src/components/Dialog/VTDialogTitle.vue';
+import VTDrawer from './src/components/Drawer/VTDrawer.vue';
+import VTDrawerClose from './src/components/Drawer/VTDrawerClose.vue';
+import VTDrawerContent from './src/components/Drawer/VTDrawerContent.vue';
+import VTDrawerFooter from './src/components/Drawer/VTDrawerFooter.vue';
+import VTDrawerHeader from './src/components/Drawer/VTDrawerHeader.vue';
+import VTDrawerTitle from './src/components/Drawer/VTDrawerTitle.vue';
+import VTDrawerMain from './src/components/Drawer/VTDrawerMain.vue';
+import VTDrawerOverlay from './src/components/Drawer/VTDrawerOverlay.vue';
+import VTDisclosure from './src/components/Disclosure/VTDisclosure.vue';
+import VTDisclosureDetails from './src/components/Disclosure/VTDisclosureDetails.vue';
+import VTDisclosureHeader from './src/components/Disclosure/VTDisclosureHeader.vue';
+import VTDisclosureIcon from './src/components/Disclosure/VTDisclosureIcon.vue';
+import VTDisclosureContent from './src/components/Disclosure/VTDisclosureContent.vue';
+import VTSkeleton from './src/components/Skeleton/VTSkeleton.vue';
+import VTSkeletonItem from './src/components/Skeleton/VTSkeletonItem.vue';
 
 export {
   VTAvatar,
@@ -89,8 +94,13 @@ export {
   VTPopoverGroup,
   VTPopoverItem,
   VTPopoverTrigger,
+  VTForm,
+  VTFormCol,
   VTFormFeedback,
   VTFormGroup,
+  VTFormRow,
+  VTFieldset,
+  VTLegend,
   VTListbox,
   VTListboxContent,
   VTListboxItem,
@@ -135,5 +145,5 @@ export {
   VTDisclosureIcon,
   VTDisclosureContent,
   VTSkeleton,
-  VTSkeletonItem
+  VTSkeletonItem,
 };

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.2",
+  "version": "0.40.0",
   "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/VTDialog.vue

@@ -46,15 +46,14 @@ export default {
 
         const emit = () => this.emit();
 
-        const full = this.full;
-
         return {
           componentId,
           hide,
           emit,
           registerContent,
           registerOverlay,
-          full,
+          full: this.full,
+          type: this.type,
         };
       },
     };
@@ -65,14 +64,18 @@ export default {
   },
 
   props: {
-    visible: {
+    headless: {
       type: Boolean,
       default: false,
     },
-    headless: {
+    visible: {
       type: Boolean,
       default: false,
     },
+    type: {
+      type: String,
+      default: null, // null or static: when set to static, the dialog will not close when clicking outside it or on esc.
+    },
     full: {
       type: Boolean,
       default: false,
@@ -136,7 +139,7 @@ export default {
      */
     onClick(ev) {
       if (!ev || ev.target.id !== this.overlay?.id) return;
-      this.hide();
+      if (this.type !== 'static') this.hide();
     },
   },
 };

package/src/components/Dialog/VTDialogContent.vue

@@ -17,7 +17,7 @@
           : `relative m-auto flex flex-col overflow-auto rounded bg-white p-4 focus:outline-none lg:p-6 ${classes}`
       "
       tabindex="-1"
-      @keydown.esc.stop="hide"
+      @keydown.esc.stop="onEsc"
     >
       <slot></slot>
     </div>
@@ -55,6 +55,10 @@ export default {
     full() {
       return this.apiDialog().full;
     },
+
+    type() {
+      return this.apiDialog().type;
+    },
   },
 
   mounted() {
@@ -65,6 +69,11 @@ export default {
   },
 
   methods: {
+    onEsc() {
+      if (this.type === 'static') return;
+      this.hide();
+    },
+
     show() {
       this.visible = true;
     },

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/Form/VTFieldset.vue

@@ -0,0 +1,5 @@
+<template>
+  <fieldset class="grid gap-3">
+    <slot />
+  </fieldset>
+</template>

package/src/components/Form/VTForm.vue

@@ -1,3 +1,11 @@
 <template>
-  <form class="grid gap-3"><slot /></form>
+  <form class="grid gap-3" @submit.prevent="$emit('submit')">
+    <slot />
+  </form>
 </template>
+
+<script>
+export default {
+  name: 'VTForm',
+};
+</script>

package/src/components/Form/VTLegend.vue

@@ -0,0 +1,5 @@
+<template>
+  <legend class="text-body mb-1 block w-full font-normal text-gray-500">
+    <slot />
+  </legend>
+</template>

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/VTListboxTrigger.vue

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