@veritree/ui 0.53.0 → 0.55.0

package/mixins/form-control.js

@@ -61,7 +61,7 @@ export const formControlStyleMixin = {
       return [
         this.headless
           ? `${this.name}`
-          : 'leading-0 flex w-full max-w-full appearance-none placeholder:font-light placeholder:text-gray-500 items-center justify-between rounded border border-solid px-3 py-2 font-inherit text-base text-inherit file:hidden focus:border-secondary-200 focus:placeholder:text-gray-400',
+          : 'leading-0 flex w-full max-w-full relative appearance-none placeholder:font-light placeholder:text-gray-500 items-center justify-between rounded border border-solid px-3 py-2 font-inherit text-base text-inherit file:hidden focus:border-gray-600 focus:placeholder:text-gray-400',
         // variant styles
         this.headless
           ? `${this.name}--${this.variant}`
@@ -69,6 +69,8 @@ export const formControlStyleMixin = {
           ? 'border-error-300'
           : this.isSuccess
           ? 'border-success-300'
+          : this?.isOutline
+          ? 'border-gray-700'
           : 'border-gray-300',
         // height styles
         this.headless

package/package.json

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

package/src/components/Dialog/VTDialog.vue

@@ -42,14 +42,11 @@ export default {
           this.overlay = overlay;
         };
 
-        const hide = () => this.hide();
-
-        const emit = () => this.emit();
-
         return {
           componentId,
-          hide,
-          emit,
+          hide: this.hide,
+          emitHidden: this.emitHidden,
+          emitShown: this.emitShown,
           registerContent,
           registerOverlay,
           full: this.full,
@@ -125,13 +122,19 @@ export default {
       if (this.hasContent) this.content.hide();
     },
 
-    emit() {
+    emitHidden() {
       this.$nextTick(() => {
         this.$emit('input', false);
         this.$emit('hidden');
       });
     },
 
+    emitShown() {
+      this.$nextTick(() => {
+        this.$emit('shown');
+      });
+    },
+
     /**
      * Hides the dialog when clicking outside its content.
      *

package/src/components/Dialog/VTDialogContent.vue

@@ -6,6 +6,7 @@
     leave-active-class="duration-300 ease-out"
     leave-class="translate-y-0 opacity-100"
     leave-to-class="translate-y-[50px] opacity-0"
+    @after-enter="showDialog"
     @after-leave="hideDialog"
   >
     <div
@@ -83,7 +84,11 @@ export default {
     },
 
     hideDialog() {
-      this.apiDialog().emit();
+      this.apiDialog().emitHidden();
+    },
+
+    showDialog() {
+      this.apiDialog().emitShown();
     },
   },
 };

package/src/components/Listbox/VTListboxTrigger.vue

@@ -11,6 +11,17 @@
     @keydown.up.prevent="onKeyDownOrUp"
     @keydown.esc.stop="onKeyEsc"
   >
+    <template v-if="hasBadge">
+      <span
+        :class="[
+          headless
+            ? 'listbox-button__badge'
+            : 'absolute -right-2 -top-2 grid h-5 min-w-[20px] place-content-center rounded-full bg-gray-800 text-xs font-medium text-white',
+        ]"
+      >
+        {{ valueLength }}
+      </span>
+    </template>
     <span :class="[headless ? 'listbox-button__text' : 'truncate text-left']">
       <slot></slot>
     </span>
@@ -59,6 +70,10 @@ export default {
       return this.apiListbox().componentContent;
     },
 
+    multiple() {
+      return this.apiListbox().multiple;
+    },
+
     items() {
       return this.apiListbox().items;
     },
@@ -70,6 +85,22 @@ export default {
     lastMenuItem() {
       return this.items[this.items.length - 1];
     },
+
+    valueLength() {
+      if (this.multiple) {
+        return this.apiListbox().valueComputed.length;
+      }
+
+      return 0;
+    },
+
+    hasBadge() {
+      return this.valueLength > 0;
+    },
+
+    isOutline() {
+      return this.valueLength > 0;
+    },
   },
 
   mounted() {