@veritree/ui 0.52.2 → 0.54.0

package/package.json

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

package/src/components/Button/VTButton.vue

@@ -19,7 +19,9 @@
         : isPrimary
         ? 'bg-secondary-400 hover:bg-secondary-500 focus:bg-secondary-600 active:bg-secondary-600 border-transparent text-white disabled:bg-gray-200 disabled:text-gray-400'
         : isSecondary
-        ? 'border-gray-400 bg-white text-gray-700  hover:bg-gray-100 focus:bg-gray-200 active:bg-gray-200 disabled:border-gray-300 disabled:text-gray-400'
+        ? isGhost
+          ? 'border-gray-500 text-gray-100 hover:bg-white hover:text-gray-700'
+          : 'border-gray-400 bg-white text-gray-700 hover:bg-gray-100 focus:bg-gray-200 active:bg-gray-200 disabled:border-gray-300 disabled:text-gray-400'
         : isTertiary
         ? 'border-transparent text-gray-600 hover:text-gray-800 focus:text-gray-800 active:text-gray-800 disabled:text-gray-400'
         : isIcon
@@ -152,6 +154,11 @@ export default {
       type: Boolean,
       default: false,
     },
+
+    appearance: {
+      type: String,
+      default: 'normal', // normal or ghost
+    },
   },
 
   computed: {
@@ -183,6 +190,10 @@ export default {
       return this.disabled || this.busy;
     },
 
+    isGhost() {
+      return this.appearance === 'ghost';
+    },
+
     tag() {
       return this.href ? 'a' : this.to ? 'NuxtLink' : 'button';
     },

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