@veritree/ui 0.82.0-1 → 0.82.0-10

package/mixins/form-control.js

@@ -33,6 +33,10 @@ export const formControlMixin = {
       type: String,
       default: 'large',
     },
+    min: {
+      type: [String, Number],
+      default: null,
+    },
   },
 
   computed: {

package/package.json

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

package/src/components/Avatar/VTAvatarImage.vue

@@ -1,18 +1,5 @@
 <template>
-  <VTImage
-    v-if="src"
-    :src="src"
-    v-bind="attrs"
-    :width="width"
-    :height="height"
-  />
-  <VTImage
-    v-else-if="cdnSrc"
-    :cdn-src="cdnSrc"
-    v-bind="attrs"
-    :width="width"
-    :height="height"
-  />
+  <VTImage :src="src" :width="width" :height="height" class="h-auto w-full" />
 </template>
 
 <script>
@@ -24,18 +11,10 @@ export default {
   components: { VTImage },
 
   props: {
-    alt: {
-      type: String,
-      required: true,
-    },
     src: {
       type: String,
       default: '',
     },
-    cdnSrc: {
-      type: [String, Object],
-      default: null,
-    },
     width: {
       type: String,
       default: '40',
@@ -45,14 +24,5 @@ export default {
       default: null,
     },
   },
-
-  computed: {
-    attrs() {
-      return {
-        alt: this.alt,
-        class: 'h-auto w-full',
-      };
-    },
-  },
 };
 </script>

package/src/components/Disclosure/VTDisclosureContent.vue

@@ -76,6 +76,7 @@ export default {
     collapse() {
       this.expanded = false;
     },
+
     isVisible() {
       return this.expanded;
     },

package/src/components/Form/VTInput.vue

@@ -3,6 +3,7 @@
     :class="classComputed"
     :value="value"
     :disabled="disabled"
+    :min="min"
     v-on="listeners"
   />
 </template>

package/src/components/Form/VTInputDate.vue

@@ -22,6 +22,7 @@
         :maximum-view="maximumView"
         :show-edge-dates="showEdgeDates"
         :disabled-dates="disabledDatesComputed"
+        :use-utc="useUtc"
         @input="onInput"
       >
         <template #prevIntervalBtn>
@@ -46,6 +47,9 @@ import VTPopoverContent from './../Popover/VTPopoverContent.vue';
 import Datepicker from '@sum.cumo/vue-datepicker';
 import { IconChevronLeft, IconChevronRight } from '@veritree/icons';
 import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+
+dayjs.extend(utc);
 
 export default {
   name: 'VTInputDate',
@@ -98,6 +102,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    useUtc: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   computed: {
@@ -112,7 +120,13 @@ export default {
     },
 
     valueModelFormatted() {
-      return dayjs(this.value).format(this.format);
+      let date = dayjs(this.value);
+
+      if (this.useUtc) {
+        date = date.utc();
+      }
+
+      return date.format(this.format);
     },
 
     disabledDatesComputed() {

package/src/components/Form/VTInputNumber.vue

@@ -6,6 +6,8 @@
     <input
       v-model="valueFormatted"
       :disabled="disabled"
+      :inputmode="inputmode"
+      :placeholder="placeholder"
       class="w-full"
       @input="onInput"
       @change="onChange"
@@ -37,24 +39,32 @@ export default {
       type: String,
       default: 'USD',
     },
+    // different type of number input (e.g. 'integer', 'decimal', 'currency')
+    format: {
+      type: String,
+      default: 'integer',
+    },
     locale: {
       type: String,
       default: 'en-US',
     },
-    // different type of number input (e.g. 'integer', 'decimal', 'currency')
-    format: {
+    placeholder: {
       type: String,
-      default: 'integer',
+      default: null,
     },
     value: {
       type: [String, Number, Object, Array, Date],
       default: null,
     },
+    inputmode: {
+      type: String,
+      default: 'decimal',
+    },
   },
 
   data() {
     return {
-      event: 'input',
+      event: null,
       key: null,
     };
   },
@@ -82,7 +92,7 @@ export default {
         let options = {};
 
         // only add the fraction digits on blur because on input it won't behave nicely
-        if (this.format === 'currency' && this.event === 'blur') {
+        if (this.format === 'currency' && this.event !== 'input') {
           options = {
             minimumFractionDigits: 2,
             maximumFractionDigits: 2,
@@ -91,7 +101,9 @@ export default {
           options = {};
         }
 
-        return Number(this.value).toLocaleString(this.locale, options);
+        const number = Number(this.value).toLocaleString(this.locale, options);
+
+        return number === '0' ? null : number;
       },
       set(value) {
         // value without formatting that will be

package/src/components/Image/VTImage.vue

@@ -6,8 +6,8 @@
       headless
         ? null
         : hasObjectFit
-        ? `h-full w-full ${objectFitComputed}`
-        : null,
+          ? `h-full w-full ${objectFitComputed}`
+          : null,
     ]"
     v-bind="$attrs"
     @load="onLoad"
@@ -83,8 +83,8 @@ export default {
         ? this.objectFit === 'cover'
           ? 'object-cover'
           : this.objectFit === 'contain'
-          ? 'object-contain'
-          : null
+            ? 'object-contain'
+            : null
         : null;
     },
   },

package/src/components/Listbox/VTListboxTrigger.vue

@@ -15,14 +15,14 @@
     <span :class="[headless ? 'listbox-button__text' : 'truncate text-left']">
       <slot></slot>
     </span>
-    <VTSpinner v-if="loading" class="-mr-0.5 max-w-4 max-h-4" />
     <span
-      v-else
       :class="[
         headless ? 'listbox-button__icon' : '-mr-1 ml-2 shrink-0 text-gray-500',
       ]"
     >
+      <VTSpinner v-if="loading" class="mr-0.5 max-w-4 max-h-4" />
       <IconChevronDown
+        v-else
         class="w-5 text-gray-700 transition-transform"
         :class="{ 'rotate-180': expanded }"
       />