@veritree/ui 0.19.2-21 → 0.19.2-22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.19.2-21",
+  "version": "0.19.2-22",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",

package/src/components/Alert/VTAlert.vue

@@ -1,11 +1,9 @@
 <template>
   <div
-    v-if="show"
+    v-if="modelValue"
     :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/Dialog/VTDialog.vue

@@ -3,10 +3,11 @@
     <div
       v-if="modelValue"
       :id="id"
-      :class="{
-        Dialog: headless,
-        'fixed inset-0 z-50 grid grid-cols-1 grid-rows-1 p-4 md:p-8': !headless,
-      }"
+      :class="
+        headless
+          ? 'dialog'
+          : `fixed inset-0 z-50 grid grid-cols-1 grid-rows-1 ${classes}`
+      "
       aria-modal="true"
       v-bind="$attrs"
       @click="onClick"
@@ -27,10 +28,7 @@ export default {
   provide() {
     return {
       apiDialog: () => {
-        const id = this.id;
         const componentId = this.componentId;
-        const isDark = this.dark;
-        const isHeadless = this.headless;
 
         const registerContent = (content) => {
           if (!content) return;
@@ -46,15 +44,15 @@ export default {
 
         const emit = () => this.emit();
 
+        const full = this.full;
+
         return {
-          id,
           componentId,
-          isDark,
-          isHeadless,
           hide,
           emit,
           registerContent,
           registerOverlay,
+          full,
         };
       },
     };
@@ -69,7 +67,7 @@ export default {
       type: Boolean,
       default: false,
     },
-    dark: {
+    full: {
       type: Boolean,
       default: false,
     },
@@ -88,6 +86,10 @@ export default {
       return `dialog-${this.componentId}`;
     },
 
+    classes() {
+      return !this.full ? 'p-4 md:p-6' : '';
+    },
+
     hasContent() {
       return this.content !== null;
     },

package/src/components/Dialog/VTDialogClose.vue

@@ -2,13 +2,13 @@
   <VTButton
     variant="icon"
     :id="id"
-    :class="{
-      'Dialog-close': headless,
-    }"
-    :theme="theme"
+    :class="[headless ? 'dialog-close' : null]"
     @click.prevent="hide"
-    ><slot><IconClose class="h-5 w-5" /></slot
-  ></VTButton>
+  >
+    <slot>
+      <IconClose class="h-4 w-4" />
+    </slot>
+  </VTButton>
 </template>
 
 <script>
@@ -22,23 +22,17 @@ export default {
 
   inject: ['apiDialog'],
 
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
   computed: {
     id() {
       return `dialog-close-${this.apiDialog().componentId}`;
     },
-
-    dark() {
-      return this.apiDialog().isDark;
-    },
-
-    headless() {
-      return this.apiDialog().isHeadless;
-    },
-
-    // temporary till button theme is implemented
-    theme() {
-      return this.dark ? 'dark' : null;
-    },
   },
 
   methods: {

package/src/components/Dialog/VTDialogContent.vue

@@ -1,25 +1,23 @@
 <template>
   <transition
     enter-active-class="duration-300 ease-out"
-    enter-from-class="translate-y-[50px] opacity-0"
+    enter-class="translate-y-[50px] opacity-0"
     enter-to-class="translate-y-0 opacity-100"
     leave-active-class="duration-300 ease-out"
-    leave-from-class="translate-y-0 opacity-100"
+    leave-class="translate-y-0 opacity-100"
     leave-to-class="translate-y-[50px] opacity-0"
     @after-leave="hideDialog"
   >
     <div
       v-show="visible"
       :id="id"
-      :class="{
-        'Dialog-content': headless,
-        'relative m-auto max-h-full max-w-full overflow-auto rounded p-6 focus:outline-none sm:p-10 flex flex-col':
-          !headless,
-        'bg-white': !dark,
-        'bg-fd-600': dark,
-      }"
+      :class="
+        headless
+          ? 'dialog-content'
+          : `relative m-auto flex flex-col overflow-auto rounded bg-white p-4 focus:outline-none lg:p-6 ${classes}`
+      "
       tabindex="-1"
-      @keyup.esc="hide"
+      @keydown.esc.stop="hide"
     >
       <slot></slot>
     </div>
@@ -32,6 +30,13 @@ export default {
 
   inject: ['apiDialog'],
 
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
   data() {
     return {
       visible: false,
@@ -43,12 +48,12 @@ export default {
       return `dialog-content-${this.apiDialog().componentId}`;
     },
 
-    dark() {
-      return this.apiDialog().isDark;
+    classes() {
+      return this.full ? 'h-screen w-screen' : 'max-h-full max-w-full';
     },
 
-    headless() {
-      return this.apiDialog().isHeadless;
+    full() {
+      return this.apiDialog().full;
     },
   },
 

package/src/components/Dialog/VTDialogFooter.vue

@@ -1,7 +1,11 @@
 <template>
   <component
     :is="as"
-    :class="{ 'Dialog-footer': headless, 'w-full': !headless }"
+    :class="[
+      headless
+        ? 'dialog-footer'
+        : '-mx-4 -mb-4 flex items-center justify-between gap-x-3 p-4 md:-mx-6 md:-mb-6 md:p-6',
+    ]"
   >
     <slot></slot>
   </component>
@@ -10,24 +14,15 @@
 <script>
 export default {
   name: 'VTDialogFooter',
-
-  inject: ['apiDialog'],
-
   props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
     as: {
       type: String,
       default: 'footer',
     },
   },
-
-  computed: {
-    dark() {
-      return this.apiDialog().isDark;
-    },
-
-    headless() {
-      return this.apiDialog().isHeadless;
-    },
-  },
 };
 </script>

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;
     },