@veritree/ui 0.56.0 → 0.57.1

package/index.js

@@ -3,6 +3,7 @@ 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 VTChip from './src/components/Chip/VTChip.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';
@@ -154,4 +155,5 @@ export {
   VTDisclosureContent,
   VTSkeleton,
   VTSkeletonItem,
+  VTChip,
 };

package/nuxt.js

@@ -4,6 +4,7 @@ const components = [
   'src/components/Alert',
   'src/components/Avatar',
   'src/components/Button',
+  'src/components/Chip',
   'src/components/Drawer',
   'src/components/Dialog',
   'src/components/Disclosure',
@@ -17,13 +18,13 @@ const components = [
   'src/components/Spinner',
   'src/components/Tabs',
   'src/components/Tooltip',
-]
+];
 
 export default function () {
-  this.nuxt.hook('components:dirs', dirs => {
+  this.nuxt.hook('components:dirs', (dirs) => {
     // Add ./components dir to the list
     components.forEach((component) => {
-      dirs.push(join(__dirname, component))
+      dirs.push(join(__dirname, component));
     });
-  })
-}
+  });
+}

package/package.json

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

package/src/components/Chip/VTChip.vue

@@ -0,0 +1,23 @@
+<template>
+  <div
+    class="Chip flex shrink-0 items-center gap-2 rounded-full bg-gray-200 py-0.5 pl-2 pr-[3px] text-sm text-gray-800"
+  >
+    <span class="Chip-text truncate whitespace-nowrap"><slot></slot></span>
+    <button
+      class="Chip-button shrink-0 text-gray-500 hover:text-gray-600"
+      @click.stop.prevent="onCancel"
+    >
+      <IconCancel class="Chip-button__icon h-5 w-5" />
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    onCancel() {
+      this.$emit('cancel');
+    },
+  },
+};
+</script>

package/src/components/Disclosure/VTDisclosureDetails.vue

@@ -69,10 +69,12 @@ export default {
 
   methods: {
     show() {
+      this.$emit('toggle', true);
       this.visible = true;
     },
 
     hide() {
+      this.$emit('toggle', false);
       this.visible = false;
     },
 

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 {