@veritree/ui 0.57.0 → 0.58.0

package/package.json

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

package/src/components/Drawer/VTDrawer.vue

@@ -29,7 +29,7 @@ export default {
 
   provide() {
     return {
-      api: () => {
+      apiDrawer: () => {
         const id = this.id;
         const isDark = this.dark;
         const isHeadless = this.headless;

package/src/components/Drawer/VTDrawerClose.vue

@@ -2,8 +2,8 @@
   <VTButton
     variant="icon"
     :class="{
-      'Drawer-close': headless,
-      'ml-auto -mr-2 text-inherit': !headless,
+      'drawer-close': headless,
+      '-mr-2 ml-auto shrink-0 text-inherit': !headless,
     }"
     :theme="theme"
     @click.prevent="hide"
@@ -20,19 +20,19 @@ export default {
 
   components: { IconLeft, VTButton },
 
-  inject: ['api'],
+  inject: ['apiDrawer'],
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDrawer().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDrawer().isHeadless;
     },
 
     right() {
-      return this.api().isRight;
+      return this.apiDrawer().isRight;
     },
 
     // temporary till button theme is implemented
@@ -43,7 +43,7 @@ export default {
 
   methods: {
     hide() {
-      this.api().hide();
+      this.apiDrawer().hide();
     },
   },
 };

package/src/components/Drawer/VTDrawerContent.vue

@@ -11,8 +11,8 @@
     <div
       v-show="visible"
       :class="{
-        'Drawer-content': headless,
-        'fixed z-20 flex h-screen max-h-full max-w-full flex-col overflow-auto p-5 outline-0 sm:px-10 sm:py-6':
+        'drawer-content': headless,
+        'fixed z-20 flex h-screen max-h-full max-w-full flex-col overflow-auto outline-0':
           !headless,
         'bg-white text-gray-600': !dark,
         'bg-fd-600': dark,
@@ -33,7 +33,14 @@
 export default {
   name: 'VTDrawerContent',
 
-  inject: ['api'],
+  inject: ['apiDrawer'],
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
 
   data() {
     return {
@@ -43,15 +50,11 @@ export default {
 
   computed: {
     dark() {
-      return this.api().isDark;
-    },
-
-    headless() {
-      return this.api().isHeadless;
+      return this.apiDrawer().isDark;
     },
 
     position() {
-      return this.api().position;
+      return this.apiDrawer().position;
     },
 
     activeClass() {
@@ -73,6 +76,7 @@ export default {
         default:
           translateClass = '-translate-x-full';
       }
+
       return `opacity-0 ${translateClass}`;
     },
 
@@ -91,6 +95,7 @@ export default {
         default:
           translateClass = 'translate-x-0';
       }
+
       return `opacity-100 ${translateClass}`;
     },
 
@@ -109,6 +114,7 @@ export default {
         default:
           translateClass = 'translate-x-0';
       }
+
       return `opacity-100 ${translateClass}`;
     },
 
@@ -127,12 +133,13 @@ export default {
         default:
           translateClass = '-translate-x-full';
       }
+
       return `opacity-0 ${translateClass}`;
     },
   },
 
   mounted() {
-    this.api().registerContent(this);
+    this.apiDrawer().registerContent(this);
     this.show();
 
     this.$nextTick(() => this.$el.focus());
@@ -148,7 +155,7 @@ export default {
     },
 
     hideDrawer() {
-      this.api().emit();
+      this.apiDrawer().emit();
     },
   },
 };

package/src/components/Drawer/VTDrawerDivider.vue

@@ -0,0 +1,16 @@
+<template>
+  <div :class="[headless ? 'drawer-divider' : 'h-[1px] bg-gray-200']" />
+</template>
+
+<script>
+export default {
+  name: 'VTDrawerDivider',
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>

package/src/components/Drawer/VTDrawerFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="as" :class="{ 'dialog-footer': headless }">
+  <component :is="as" :class="[headless ? 'dialog-footer' : 'px-5 py-4']">
     <slot></slot>
   </component>
 </template>
@@ -8,22 +8,16 @@
 export default {
   name: 'VTDrawerFooter',
 
-  inject: ['api'],
+  inject: ['apiDrawer'],
 
   props: {
     as: {
       type: String,
       default: 'footer',
     },
-  },
-
-  computed: {
-    dark() {
-      return this.api().isDark;
-    },
-
-    headless() {
-      return this.api().isHeadless;
+    headless: {
+      type: Boolean,
+      default: false,
     },
   },
 };

package/src/components/Drawer/VTDrawerHeader.vue

@@ -3,8 +3,8 @@
     :is="as"
     :id="id"
     :class="{
-      'Drawer-header': headless,
-      'mb-8 flex items-center justify-between gap-3': !headless,
+      'drawer-header': headless,
+      'flex items-center justify-between gap-3 px-5 py-4': !headless,
     }"
   >
     <slot></slot>
@@ -15,26 +15,22 @@
 export default {
   name: 'VTDrawerHeader',
 
-  inject: ['api'],
+  inject: ['apiDrawer'],
 
   props: {
     as: {
       type: String,
       default: 'header',
     },
+    headless: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   computed: {
-    dark() {
-      return this.api().isDark;
-    },
-
-    headless() {
-      return this.api().isHeadless;
-    },
-
     id() {
-      return `${this.api().id}-header`;
+      return `${this.apiDrawer().id}-header`;
     },
   },
 };

package/src/components/Drawer/VTDrawerMain.vue

@@ -2,7 +2,10 @@
   <component
     :is="as"
     :id="id"
-    :class="{ 'Drawer-body': headless, 'flex-1': !headless }"
+    :class="{
+      'drawer-body': headless,
+      'grow overflow-hidden overflow-y-auto px-5 py-6': !headless,
+    }"
   >
     <slot></slot>
   </component>
@@ -12,26 +15,22 @@
 export default {
   name: 'VTDrawerMain',
 
-  inject: ['api'],
+  inject: ['apiDrawer'],
 
   props: {
     as: {
       type: String,
       default: 'main',
     },
+    headless: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   computed: {
-    dark() {
-      return this.api().isDark;
-    },
-
-    headless() {
-      return this.api().isHeadless;
-    },
-
     id() {
-      return `${this.api().id}-desc`;
+      return `${this.apiDrawer().id}-desc`;
     },
   },
 
@@ -42,7 +41,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

@@ -4,22 +4,22 @@
       v-if="visible"
       :id="id"
       :class="{
-        'Drawer-overlay': headless,
-        'fixed inset-0 z-10 bg-fd-450/80': !headless,
+        'drawer-overlay': headless,
+        'bg-fd-450/80 fixed inset-0 z-10': !headless,
       }"
     ></div>
   </FadeInOut>
 </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

@@ -3,7 +3,7 @@
     :is="as"
     :id="id"
     :class="{
-      'Drawer-title': headless,
+      'drawer-title': headless,
       'text-2xl font-semibold': !headless,
     }"
   >
@@ -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/Listbox/VTListbox.vue

@@ -83,9 +83,13 @@ export default {
          * is also only used when the prop multiple is true.
          */
         const removeValueFromValueComputed = (value) => {
-          this.valueComputed = this.valueComputed.filter(
-            (valueComputed) => valueComputed !== value
-          );
+          this.valueComputed = this.valueComputed.filter((valueComputed) => {
+            if (typeof valueComputed === 'object') {
+              return JSON.stringify(valueComputed) !== JSON.stringify(value);
+            }
+
+            return valueComputed !== value;
+          });
         };
 
         return {