@veritree/ui 0.55.0 → 0.57.0

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/mixins/form-control.js

@@ -69,7 +69,7 @@ export const formControlStyleMixin = {
           ? 'border-error-300'
           : this.isSuccess
           ? 'border-success-300'
-          : this?.isOutline
+          : this.isOutline
           ? 'border-gray-700'
           : 'border-gray-300',
         // height styles
@@ -86,5 +86,11 @@ export const formControlStyleMixin = {
           : null,
       ];
     },
+
+    // not all places as form control is used needs outline,
+    // so this is here mostly as a placeholder
+    isOutline() {
+      return null
+    }
   },
 };

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.55.0",
+  "version": "0.57.0",
   "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;
     },