sprintify-ui 0.6.61 → 0.6.63

package/dist/types/src/components/BaseDatePicker.vue.d.ts

@@ -53,7 +53,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     disableDates: {
-        type: import("vue").PropType<string[] | Date[] | ((date: Date) => boolean)>;
+        type: import("vue").PropType<(string | Date | ((date: Date) => boolean))[]>;
         default: () => never[];
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -112,7 +112,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     disableDates: {
-        type: import("vue").PropType<string[] | Date[] | ((date: Date) => boolean)>;
+        type: import("vue").PropType<(string | Date | ((date: Date) => boolean))[]>;
         default: () => never[];
     };
 }>> & {
@@ -131,6 +131,6 @@ declare const _default: import("vue").DefineComponent<{
     showInput: boolean;
     enableTime: boolean;
     noCalendar: boolean;
-    disableDates: string[] | Date[] | ((date: Date) => boolean);
+    disableDates: (string | Date | ((date: Date) => boolean))[];
 }, {}>;
 export default _default;

package/package.json

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

package/src/components/BaseDatePicker.stories.js

@@ -81,6 +81,26 @@ DisableDates.args = {
   ],
 };
 
+const DisableMondayAndTuesdayTemplate = (args) => ({
+  components: { BaseDatePicker, ShowValue },
+  setup() {
+    const value = ref('2022-01-03');
+    const disableDates = [
+      (date) => {
+        return date.getDay() == 1 || date.getDay() == 2;
+      }
+    ]
+    return { value, args, disableDates };
+  },
+  template: `
+    <BaseDatePicker v-model="value" v-bind="args" :disableDates="disableDates">
+    </BaseDatePicker>
+    <ShowValue :value="value" />
+  `,
+});
+
+export const DisableMondayAndTuesday = DisableMondayAndTuesdayTemplate.bind({});
+
 export const RangeDisableDates = Template.bind({});
 RangeDisableDates.args = {
   disableDates: [

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';
@@ -72,7 +72,7 @@ const props = withDefaults(
     enableTime?: boolean;
     mode?: 'single' | 'multiple' | 'range' | 'time';
     noCalendar?: boolean;
-    disableDates?: string[] | Date[] | ((date: Date) => boolean);
+    disableDates?: (string | Date | ((date: Date) => boolean))[];
   }>(),
   {
     modelValue: null,
@@ -167,6 +167,7 @@ const datepicker = ref(null) as Ref<HTMLInputElement | null>;
 let picker = null as Instance | null;
 
 const flatpickrConfig = computed(() => {
+
   return {
     enableTime: props.enableTime,
     dateFormat: formatInternal.value,
@@ -306,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];
@@ -326,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',
@@ -335,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';