@veritree/ui 0.89.2 → 0.89.4

package/package.json

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

package/src/components/Dialog/VTDialog.vue

@@ -6,7 +6,7 @@
       :class="
         headless
           ? 'dialog'
-          : `fixed inset-0 z-50 grid grid-cols-1 grid-rows-1 ${classes}`
+          : `fixed inset-0 ${zIndexClass} grid grid-cols-1 grid-rows-1 ${classes}`
       "
       aria-modal="true"
       @click="onClick"
@@ -77,6 +77,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    zIndex: {
+      type: String,
+      default: 'highest',
+    },
   },
 
   data() {
@@ -92,6 +96,21 @@ export default {
       return `dialog-${this.componentId}`;
     },
 
+    zIndexClass() {
+      switch (this.zIndex) {
+        case 'highest':
+          return 'z-50';
+        case 'high':
+          return 'z-40';
+        case 'normal':
+          return 'z-30';
+        case 'low':
+          return 'z-20';
+        case 'lowest':
+          return 'z-10';
+      }
+    },
+
     classes() {
       return !this.full ? 'p-4 md:p-6' : '';
     },

package/src/components/Form/VTInputDate.vue

@@ -38,6 +38,11 @@
           <IconChevronRight />
         </template>
       </Datepicker>
+      <div class="flex mt-2">
+        <VTButton size="small" variant="secondary" @click.prevent="onClear"
+          >Clear</VTButton
+        >
+      </div>
     </VTPopoverContent>
   </VTPopover>
 </template>
@@ -188,6 +193,15 @@ export default {
     },
 
     onInput() {
+      this.cancel();
+    },
+
+    onClear() {
+      this.valueModel = null;
+      this.cancel();
+    },
+
+    cancel() {
       this.$refs.trigger.cancel();
     },
   },
@@ -201,10 +215,8 @@ export default {
 
 .vdp-datepicker {
   font-size: 14px;
-}
-
-.vdp-datepicker__calendar .today {
-  background-color: #f2f2f2;
+  width: 268px;
+  max-width: 100%;
 }
 
 .vdp-datepicker__calendar {
@@ -216,11 +228,16 @@ export default {
   & button:disabled {
     color: #ddd;
   }
+
+  .today {
+    background-color: #f2f2f2;
+  }
 }
 
 /* header */
 .vdp-datepicker__calendar header {
   display: flex;
+  margin-bottom: 0.25rem;
 
   & button {
     border: none;
@@ -317,8 +334,6 @@ export default {
     border-radius: 50%;
     /* height: 2rem; */
     aspect-ratio: 1 / 1;
-    width: 2.5rem;
-    height: 2.5rem;
   }
 }
 
@@ -388,17 +403,24 @@ export default {
   }
 }
 
-/* .vdp-datepicker__calendar .picker-view {
-  width: inherit;
-} */
+.vdp-datepicker__calendar .picker-view {
+  min-height: 256px;
+  display: flex;
+  flex-direction: column;
+}
 
 .vdp-datepicker__calendar .picker-view .cells-wrapper {
   overflow: hidden;
   position: relative;
+  width: 100%;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
 }
 
 .vdp-datepicker__calendar .picker-view .cells-wrapper .picker-cells {
   transition: all 0.25s ease-in-out;
+  flex-grow: 1;
 }
 
 .vdp-datepicker__calendar .picker-view .slide-right-enter-active {
@@ -408,6 +430,8 @@ export default {
 .vdp-datepicker__calendar .picker-view .slide-right-leave-active {
   position: absolute;
   top: 0;
+  left: 0;
+  right: 0;
 }
 
 .vdp-datepicker__calendar .picker-view .slide-right-enter {
@@ -425,6 +449,8 @@ export default {
 .vdp-datepicker__calendar .picker-view .slide-left-leave-active {
   position: absolute;
   top: 0;
+  left: 0;
+  right: 0;
 }
 
 .vdp-datepicker__calendar .picker-view .slide-left-enter {