@veritree/ui 0.19.2-19 → 0.19.2-20

package/mixins/form-control-icon.js

@@ -1,9 +1,9 @@
-import { formControlMixin } from './form-control';
+import { formControlMixin, formControlStyleMixin } from '../mixins/form-control';
 
 export const formControlIconMixin = {
   inheritAttrs: false,
 
-  mixins: [formControlMixin],
+  mixins: [formControlMixin, formControlStyleMixin],
 
   data() {
     return {

package/mixins/form-control.js

@@ -66,7 +66,7 @@ export const formControlStyleMixin = {
           ? null
           : this.name === 'textarea'
           ? 'min-h-10' // limit it because input type number height can be different from other input types
-          : 'h-10',
+          : 'h-12 md:h-10',
       ];
     },
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.19.2-19",
+  "version": "0.19.2-20",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.0.4",
-    "@veritree/icons": "^0.36.1-0"
+    "@veritree/icons": "^0.45.1"
   },
   "devDependencies": {
     "@nuxt/kit": "^3.0.0",

package/src/components/Button/VTButton.vue

@@ -16,11 +16,11 @@
       headless
         ? `button--${variant}`
         : isPrimary
-        ? 'border-transparent bg-secondary-400 text-white hover:bg-secondary-500 active:bg-secondary-600 disabled:bg-gray-200 disabled:text-gray-400'
+        ? 'bg-secondary-400 hover:bg-secondary-500 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 active:bg-gray-200 disabled:border-gray-300 disabled:text-gray-400'
         : isTertiary
-        ? 'border-transparent text-secondary-400 hover:text-secondary-500 active:text-secondary-500 disabled:text-gray-400'
+        ? 'text-secondary-400 hover:text-secondary-500 active:text-secondary-500 border-transparent disabled:text-gray-400'
         : isIcon
         ? 'text-primary-100 focus-within:bg-gray-200 hover:bg-gray-200 active:bg-gray-300'
         : null,
@@ -30,7 +30,7 @@
         : isLarge
         ? isIcon
           ? 'h-8 w-8'
-          : 'h-10'
+          : 'h-12 sm:h-10'
         : isSmall
         ? isIcon
           ? 'h-6 w-6 p-1'
@@ -41,7 +41,7 @@
     <VTSpinner v-if="busy" class="absolute inset-0 m-auto" />
     <span
       :class="[
-        headless ? null : 'inline-flex items-center gap-2 self-center mx-auto',
+        headless ? null : 'mx-auto inline-flex items-center gap-2 self-center',
         headless && busy ? 'button--busy' : busy ? 'invisible' : null,
       ]"
     >

package/src/components/Form/VTInput.vue

@@ -31,6 +31,7 @@ input[type='date']::-webkit-calendar-picker-indicator {
 input[type='number'] {
   appearance: textfield;
 }
+
 input[type='number']::-webkit-inner-spin-button,
 input[type='number']::-webkit-outer-spin-button {
   appearance: none;

package/src/components/Form/VTInputPassword.vue

@@ -20,6 +20,7 @@
 </template>
 
 <script>
+import { IconVisibilityOn, IconVisibilityOff } from '@veritree/icons';
 import { formControlIconMixin } from '../../../mixins/form-control-icon';
 
 export default {
@@ -27,6 +28,11 @@ export default {
 
   mixins: [formControlIconMixin],
 
+  components: {
+    IconVisibilityOn,
+    IconVisibilityOff,
+  },
+
   props: {
     iconPlacement: {
       type: String,