sprintify-ui 0.6.62 → 0.6.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.6.62",
+  "version": "0.6.63",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseDatePicker.vue

@@ -25,7 +25,7 @@
     >
     <div
       v-if="modelValueFormatted && !disabled && showInput"
-      class="absolute top-0 right-0 h-full flex p-1"
+      :class="closeWrapClasses"
     >
       <button
         type="button"
@@ -43,7 +43,7 @@
 
 <script lang="ts" setup>
 import { Ref } from 'vue';
-import { isArray, isEqual } from 'lodash';
+import { isArray, isEqual, size } from 'lodash';
 import { DateTime } from 'luxon';
 import { Icon as BaseIcon } from '@iconify/vue';
 import { useField } from '@/composables/field';
@@ -307,7 +307,7 @@ const classes = computed(() => {
   const disabled = 'disabled:cursor-not-allowed disabled:text-slate-300';
   const sizeConfig = sizes[sizeInternal.value];
   const padding = {
-    'xs': 'pl-6 pr-5',
+    'xs': 'pl-[1.54rem] pr-5',
     'sm': 'pl-[2.1rem] pr-6',
     'md': 'pl-10 pr-7',
   }[sizeInternal.value];
@@ -327,7 +327,8 @@ const classes = computed(() => {
 });
 
 const iconWrapClasses = computed(() => {
-  const base = 'pointer-events-none absolute top-0 left-0 h-full flex items-center justify-center';
+  const base = 'pointer-events-none absolute top-0 left-0 flex items-center justify-center';
+  const sizeConfig = sizes[sizeInternal.value];
   const padding = {
     'xs': 'pl-2',
     'sm': 'pl-2.5',
@@ -336,10 +337,21 @@ const iconWrapClasses = computed(() => {
 
   return twMerge(
     base,
+    sizeConfig.height,
     padding
   );
 });
 
+const closeWrapClasses = computed(() => {
+  const base = 'absolute top-0 right-0 flex justify-center p-1';
+  const sizeConfig = sizes[sizeInternal.value];
+
+  return twMerge(
+    base,
+    sizeConfig.height,
+  );
+});
+
 const iconClasses = computed(() => {
   const base = '';
   const error = hasErrorInternal.value ? 'text-red-500' : 'text-slate-500';