@veritree/ui 0.24.0 → 0.25.0-0

package/index.js

@@ -1,69 +1,65 @@
-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 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 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 VTInput from './src/components/Form/VTInput.vue';
+import VTProgressBar from './src/components/ProgressBar/VTProgressBar.vue';
+import VTTextarea from './src/components/Textarea/VTTextarea.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,
@@ -98,14 +94,8 @@ export {
   VTListboxTrigger,
   VTButton,
   VTInput,
-  VTInputIcon,
-  VTInputPassword,
-  VTInputDate,
-  VTInputFile,
-  VTInputUpload,
   VTProgressBar,
   VTTextarea,
-  VTModal,
   VTTab,
   VTTabGroup,
   VTTabList,
@@ -132,4 +122,6 @@ export {
   VTDisclosureHeader,
   VTDisclosureIcon,
   VTDisclosureContent,
+  VTSkeleton,
+  VTSkeletonItem,
 };

package/mixins/floating-ui-content.js

@@ -20,7 +20,7 @@ export const floatingUiContentMixin = {
   },
 
   mounted() {
-    document.addEventListener('click', (e) => this.onDocumentClick(e));
+    document.addEventListener('click', this.onDocumentClick);
   },
 
   destroyed() {

package/mixins/floating-ui-item.js

@@ -32,7 +32,7 @@ export const floatingUiItemMixin = {
         // default styles
         this.headless
           ? `${this.componentName}`
-          : 'relative z-10 flex items-center gap-2 px-3 py-2 text-inherit no-underline',
+          : 'relative z-10 flex items-center gap-2 px-3 py-2 text-inherit no-underline cursor-pointer',
         // disabled state styles
         this.headless
           ? this.disabled
@@ -84,7 +84,7 @@ export const floatingUiItemMixin = {
     this.addMouseEventListeners();
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.apiInjected().unregisterItem(this.id);
     this.removeMouseEventListeners();
   },
@@ -95,7 +95,7 @@ export const floatingUiItemMixin = {
 
       const item = {
         id: this.id,
-        text: this.$slots.default[0].text,
+        text: '',
         select: this.select,
         unselect: this.unselect,
         isSelected: this.isSelected,
@@ -208,7 +208,9 @@ export const floatingUiItemMixin = {
       }
 
       // focus new item
-      this.items[newSelectedIndex].focus();
+      if (this.items[newSelectedIndex]) {
+        this.items[newSelectedIndex].focus();
+      }
     },
 
     getItemSelectedIndex() {
@@ -243,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
@@ -259,4 +263,4 @@ export const floatingUiItemMixin = {
       this.unselect();
     },
   },
-};
+};

package/mixins/floating-ui.js

@@ -1,6 +1,13 @@
 import { computePosition, flip, shift, offset, size } from '@floating-ui/dom';
 
 export const floatingUiMixin = {
+  props: {
+    offset: {
+      type: [Number, String],
+      default: 5,
+    },
+  },
+
   data() {
     return {
       component: null,
@@ -40,7 +47,7 @@ export const floatingUiMixin = {
       computePosition(trigger, content, {
         placement: this.placement,
         middleware: [
-          offset(5),
+          offset(Number(this.offset)),
           flip(),
           shift({ padding: 5 }),
           size({

package/mixins/form-control-icon.js

@@ -43,11 +43,11 @@ export const formControlIconMixin = {
         this.headless
           ? null
           : this.isLeft
-          ? 'left-0'
+          ? 'left-1'
           : this.isRight
-          ? 'right-0'
+          ? 'right-1'
           : null,
       ];
     },
   },
-};
+};

package/mixins/form-control.js

@@ -1,9 +1,4 @@
 export const formControlMixin = {
-  model: {
-    prop: 'value',
-    event: 'input',
-  },
-
   props: {
     disabled: {
       type: Boolean,
@@ -13,7 +8,7 @@ export const formControlMixin = {
       type: Boolean,
       default: false,
     },
-    value: {
+    modelValue: {
       type: [String, Number, Object, Array],
       default: null,
     },
@@ -24,21 +19,21 @@ export const formControlMixin = {
   },
 
   computed: {
-    listeners() {
+    attrsComputed() {
       // `Object.assign` merges objects together to form a new object
       return Object.assign(
         {},
         // We add all the listeners from the parent
-        this.$listeners,
+        this.$attrs,
         // Then we can add custom listeners or override the
         // behavior of some listeners.
         {
           // This ensures that the component works with v-model
-          input: (event) => {
+          onInput: (event) => {
             // if (this.lazy) return;
-            this.$emit('input', event.target.value);
+            this.$emit('update:modelValue', event.target.value);
           },
-          blur: (event) => {
+          onBlur: (event) => {
             this.$emit('blur', event);
           },
         }
@@ -57,7 +52,7 @@ export const formControlStyleMixin = {
       return [
         this.headless
           ? `${this.name}`
-          : 'leading-0 flex w-full max-w-full appearance-none items-center justify-between rounded border border-solid px-3 py-2 font-inherit text-base text-inherit file:hidden focus:border-secondary-200',
+          : 'leading-0 flex outline-none w-full max-w-full appearance-none items-center justify-between rounded border border-solid px-3 py-2 font-inherit text-base text-inherit file:hidden focus:border-secondary-200 appearance-none',
         // variant styles
         this.headless
           ? `${this.name}--${this.variant}`
@@ -69,8 +64,8 @@ export const formControlStyleMixin = {
           ? null
           : this.name === 'textarea'
           ? 'min-h-10' // limit it because input type number height can be different from other input types
-          : 'h-10',
+          : 'h-12 md:h-10',
       ];
     },
   },
-};
+};

package/nuxt.js

@@ -1,27 +1,33 @@
-import { join } from 'path';
+import { defineNuxtModule } from '@nuxt/kit';
+import { fileURLToPath } from 'node:url';
 
 const components = [
-  'src/components/Alert',
-  'src/components/Avatar',
-  'src/components/Button',
-  'src/components/Drawer',
-  'src/components/Dialog',
-  'src/components/Disclosure',
-  'src/components/DropdownMenu',
-  'src/components/Form',
-  'src/components/Listbox',
-  'src/components/Image',
-  'src/components/Popover',
-  'src/components/ProgressBar',
-  'src/components/Tabs',
-  'src/components/Tooltip',
-]
+  './src/components/Alert',
+  './src/components/Avatar',
+  './src/components/Button',
+  './src/components/Checkbox',
+  './src/components/Drawer',
+  './src/components/Dialog',
+  './src/components/Disclosure',
+  './src/components/DropdownMenu',
+  './src/components/Form',
+  './src/components/Listbox',
+  './src/components/Image',
+  './src/components/Popover',
+  './src/components/ProgressBar',
+  './src/components/Skeleton',
+  './src/components/Tabs',
+  './src/components/Tooltip',
+];
 
-export default function () {
-  this.nuxt.hook('components:dirs', dirs => {
-    // Add ./components dir to the list
-    components.forEach((component) => {
-      dirs.push(join(__dirname, component))
-    });
-  })
-}
+export default defineNuxtModule({
+  hooks: {
+    'components:dirs'(dirs) {
+      components.forEach((component) => {
+        dirs.push({
+          path: fileURLToPath(new URL(component, import.meta.url)),
+        });
+      });
+    },
+  },
+});

package/package.json

@@ -1,23 +1,31 @@
 {
   "name": "@veritree/ui",
-  "version": "0.24.0",
+  "version": "0.25.0-0",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",
   "repository": "https://github.com/tentree-org/veritree-ui.git",
-  "author": "cyroveritree <cyro@veritree.com>",
+  "author": "jb",
   "license": "MIT",
   "publishConfig": {
-    "access": "public"
+    "registry": "https://registry.npmjs.org"
+  },
+  "scripts": {
+    "release": "np --no-tests --no-2fa --branch=next"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.0.4",
-    "@linusborg/vue-simple-portal": "^0.1.5",
-    "@veritree/icons": "^0.39.0"
+    "@floating-ui/dom": "^1.4.5",
+    "@veritree/icons": "^0.45.1"
   },
   "devDependencies": {
+    "@nuxt/kit": "^3.0.0",
+    "np": "^8.0.4",
     "prettier": "^2.7.1",
     "prettier-plugin-tailwindcss": "^0.1.13",
     "tailwindcss": "^3.2.4"
+  },
+  "engines": {
+    "npm": ">=8.0.0",
+    "node": ">=18.0.0"
   }
 }

package/src/components/Alert/VTAlert.vue

@@ -1,11 +1,9 @@
 <template>
   <div
-    v-if="show"
+    v-if="isVisible"
     :class="[
       // default styles
-      headless
-        ? 'alert'
-        : 'flex items-start gap-3 rounded border border-solid p-3',
+      headless ? 'alert' : 'flex items-start gap-3 rounded border border-solid',
       // variant styles
       headless
         ? `alert--${variant}`
@@ -16,6 +14,14 @@
         : isWarning
         ? 'border-warning-300 bg-warning-200 text-warning-700'
         : null,
+      // sizes styles
+      headless
+        ? `alert--${size}`
+        : isLarge
+        ? 'p-3'
+        : isSmall
+        ? 'py-1 px-2 text-sm'
+        : null,
     ]"
     role="alert"
   >
@@ -23,9 +29,15 @@
     <button
       v-if="dismissable"
       :class="[
-        !headless
-          ? 'ml-auto mt-1 h-4 w-4 shrink-0 text-current'
-          : 'alert-close',
+        // default styles
+        headless ? 'alert-close' : 'ml-auto  h-4 w-4 shrink-0 text-current',
+        headless
+          ? `alert-close--${variant}`
+          : isLarge
+          ? 'mt-1'
+          : isSmall
+          ? 'mt-0.5'
+          : null,
       ]"
       @click="hide"
     >
@@ -35,14 +47,30 @@
 </template>
 
 <script>
+import IconClose from '@veritree/icons/src/components/IconClose.vue';
+
 export default {
   name: 'VTAlert',
 
+  components: {
+    IconClose,
+  },
+
+  data() {
+    return {
+      modelValueLocal: true,
+    };
+  },
+
   props: {
     variant: {
       type: String,
       default: 'success',
     },
+    size: {
+      type: String,
+      default: 'large',
+    },
     headless: {
       type: Boolean,
       default: false,
@@ -51,12 +79,10 @@ export default {
       type: Boolean,
       default: false,
     },
-  },
-
-  data() {
-    return {
-      show: true,
-    };
+    modelValue: {
+      type: Boolean,
+      default: null,
+    },
   },
 
   computed: {
@@ -71,12 +97,27 @@ export default {
     isWarning() {
       return this.variant === 'warning';
     },
+
+    isLarge() {
+      return this.size === 'large';
+    },
+
+    isSmall() {
+      return this.size === 'small';
+    },
+
+    isVisible() {
+      return this.modelValue !== null ? this.modelValue : this.modelValueLocal;
+    },
   },
 
   methods: {
     hide() {
+      this.modelValue !== null
+        ? this.$emit('update:modelValue', false)
+        : (this.modelValueLocal = false);
+
       this.$emit('dismiss');
-      this.show = false;
     },
   },
 };

package/src/components/Avatar/VTAvatarImage.vue

@@ -1,25 +1,13 @@
 <template>
-  <VTImage
-    v-if="src"
-    :src="src"
-    v-bind="attrs"
-    :width="width"
-    :height="height"
-  />
-  <VTImage
-    v-else-if="cdnSrc"
-    :cdn-src="cdnSrc"
-    v-bind="attrs"
-    :width="width"
-    :height="height"
-  />
+  <VTImage v-if="src" :src="src" v-bind="attrs" width="40" />
+  <VTImage v-else-if="cdnSrc" :cdn-src="cdnSrc" v-bind="attrs" width="40" />
 </template>
 
 <script>
-import VTImage from '../Image/VTImage.vue';
+import VTImage from "../Image/VTImage.vue";
 
 export default {
-  name: 'VTAvatarImage',
+  name: "VTAvatarImage",
 
   components: { VTImage },
 
@@ -30,27 +18,19 @@ export default {
     },
     src: {
       type: String,
-      default: '',
+      default: "",
     },
     cdnSrc: {
       type: [String, Object],
       default: null,
     },
-    width: {
-      type: String,
-      default: '40',
-    },
-    height: {
-      type: String || null,
-      default: null,
-    },
   },
 
   computed: {
     attrs() {
       return {
         alt: this.alt,
-        class: 'h-auto w-full',
+        class: "h-auto w-full",
       };
     },
   },