sprintify-ui 0.7.4 → 0.7.6

package/src/components/BaseTimePicker.vue

@@ -156,7 +156,7 @@ const props = defineProps({
     type: String,
   },
   placeholder: {
-    default () {
+    default() {
       return t('sui.click_or_select_time');
     },
     type: String,
@@ -198,18 +198,18 @@ const { nameInternal, hasErrorInternal, emitUpdate, sizeInternal } =
     emit: emit,
   });
 
-  const timeRegex = computed(() => {
-    if (props.disabledSeconds) {
-      return new RegExp(
-        `^([01]?[0-9]|2[0-3]):([0-5][0-9])$`
-      );
-    }
-
+const timeRegex = computed(() => {
+  if (props.disabledSeconds) {
     return new RegExp(
-      `^([01]?[0-9]|2[0-3]):([0-5][0-9])(:([0-5][0-9]))?$`
+      `^([01]?[0-9]|2[0-3]):([0-5][0-9])$`
     );
-  });
-  // const timeRegex = /^([0-1]?[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$/;
+  }
+
+  return new RegExp(
+    `^([01]?[0-9]|2[0-3]):([0-5][0-9])(:([0-5][0-9]))?$`
+  );
+});
+// const timeRegex = /^([0-1]?[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$/;
 const modelValueFormatted = computed((): string | string[] | null => {
   if (!props.modelValue) {
     return null;
@@ -232,6 +232,8 @@ const classes = computed(() => {
     'xs': 'pl-[1.54rem] pr-5',
     'sm': 'pl-[2.1rem] pr-6',
     'md': 'pl-10 pr-7',
+    'lg': 'pl-10 pr-7',
+    'xl': 'pl-11 pr-7',
   }[sizeInternal.value];
 
   const paddingRight = props.modelValue ? padding : 'pr-0';
@@ -265,6 +267,8 @@ const iconWrapClasses = computed(() => {
     'xs': 'pl-2',
     'sm': 'pl-2.5',
     'md': 'pl-3',
+    'lg': 'pl-3',
+    'xl': 'pl-3',
   }[sizeInternal.value];
 
   return twMerge(
@@ -316,7 +320,7 @@ const minutes = computed(() => generateValues(60, props.minuteStep));
 const seconds = computed(() => generateValues(60, props.secondStep));
 
 function selectTime(time: string, type: string) {
-  
+
   if (type === 'hour') {
     hourValue.value = time;
   }
@@ -328,7 +332,7 @@ function selectTime(time: string, type: string) {
   }
 
   if (props.disabledSeconds) {
-      secondValue.value = '00';
+    secondValue.value = '00';
   }
 }
 
@@ -336,7 +340,7 @@ function ok(close: () => void) {
   let time = `${hourValue.value}:${minuteValue.value}:${secondValue.value}`;
 
   if (props.disabledSeconds) {
-      time = `${hourValue.value}:${minuteValue.value}`;
+    time = `${hourValue.value}:${minuteValue.value}`;
   }
 
   if (!timeRegex.value.test(time)) {
@@ -358,7 +362,7 @@ function now(close: () => void) {
   let time = `${hourValue.value}:${minuteValue.value}:${secondValue.value}`;
 
   if (props.disabledSeconds) {
-      time = `${hourValue.value}:${minuteValue.value}`;
+    time = `${hourValue.value}:${minuteValue.value}`;
   }
 
   emitUpdate(time);
@@ -367,9 +371,9 @@ function now(close: () => void) {
 }
 
 const clearSelectedValues = () => {
-    hourValue.value = null;
-    minuteValue.value = null;
-    secondValue.value = null;
+  hourValue.value = null;
+  minuteValue.value = null;
+  secondValue.value = null;
 };
 
 </script>

package/src/stories/PageInputSizes.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="p-5 flex flex-col gap-4 overflow-x-scroll overflow-y-visible pb-[400px]">
     <div
-      v-for="size in sizes"
+      v-for="(sizeObj, size) in sizes"
       :key="size"
     >
       <div class="flex gap-1">
@@ -140,7 +140,7 @@
     </div>
 
     <div
-      v-for="size in sizes"
+      v-for="(sizeObj, size) in sizes"
       :key="size"
       class="flex flex-col gap-3"
     >
@@ -157,7 +157,7 @@
     </div>
 
     <div
-      v-for="size in sizes"
+      v-for="(sizeObj, size) in sizes"
       :key="size"
       class="flex flex-col gap-3"
     >
@@ -176,7 +176,7 @@
 </template>
 
 <script lang="ts" setup>
-import { Size } from '@/utils/sizes';
+import { sizes } from '@/utils/sizes';
 import BaseField from '@/components/BaseField.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 import BaseAutocomplete from '@/components/BaseAutocomplete.vue';
@@ -195,8 +195,6 @@ import BaseDatePicker from '@/components/BaseDatePicker.vue';
 import BaseDateSelect from '@/components/BaseDateSelect.vue';
 import BaseTimePicker from '@/components/BaseTimePicker.vue';
 
-const sizes = ref<Size[]>(['xs', 'sm', 'md']);
-
 const text = ref('');
 const number = ref('');
 
@@ -214,18 +212,18 @@ const colors = ref([]);
 const date = ref(null);
 
 const options = [
-    { label: 'Dark Vader', value: 'dark_vader', type: 'sith' },
-    { label: 'Darth Maul', value: 'darth_maul', type: 'sith' },
-    { label: 'Dark Sidious', value: 'dark_sidious', type: 'sith' },
-    { label: 'Obi Wan Kenobi', value: 'obiwan', type: 'jedi' },
-    { label: 'Anakin Skywalker', value: 'anakin', type: 'jedi' },
-    { label: 'Mace Windu', value: 'windu', type: 'jedi' },
-    { label: 'Padme Amidala', value: 'padme', type: 'jedi' },
-    { label: 'Princesse Leila', value: 'leila', type: 'jedi' },
-    { label: 'Qui Gon Gin', value: 'quigon', type: 'jedi' },
-    { label: 'Chewbaca', value: 'chewbaca', type: 'jedi' },
-    { label: 'C3P0', value: 'c3p0', type: 'jedi' },
-    { label: 'R2D2', value: 'r2d2', type: 'jedi' },
+  { label: 'Dark Vader', value: 'dark_vader', type: 'sith' },
+  { label: 'Darth Maul', value: 'darth_maul', type: 'sith' },
+  { label: 'Dark Sidious', value: 'dark_sidious', type: 'sith' },
+  { label: 'Obi Wan Kenobi', value: 'obiwan', type: 'jedi' },
+  { label: 'Anakin Skywalker', value: 'anakin', type: 'jedi' },
+  { label: 'Mace Windu', value: 'windu', type: 'jedi' },
+  { label: 'Padme Amidala', value: 'padme', type: 'jedi' },
+  { label: 'Princesse Leila', value: 'leila', type: 'jedi' },
+  { label: 'Qui Gon Gin', value: 'quigon', type: 'jedi' },
+  { label: 'Chewbaca', value: 'chewbaca', type: 'jedi' },
+  { label: 'C3P0', value: 'c3p0', type: 'jedi' },
+  { label: 'R2D2', value: 'r2d2', type: 'jedi' },
 ];
 
 </script>

package/src/utils/sizeBehaviors.ts

@@ -0,0 +1,4 @@
+export enum SizeBehavior {
+    default = 'default',
+    input = 'input',
+}

package/src/utils/sizes.ts

@@ -2,18 +2,33 @@ const sizes = {
     xs: {
         fontSize: 'text-xs',
         height: 'h-control-xs',
-        iconSize: 'h-[0.9rem] w-[0.9rem]'
+        iconSize: 'h-[0.9rem] w-[0.9rem]',
+        buttonClass: 'btn-xs',
     },
     sm: {
         fontSize: 'text-sm',
         height: 'h-control-sm',
-        iconSize: 'h-[1.125rem] w-[1.125rem]'
+        iconSize: 'h-[1.125rem] w-[1.125rem]',
+        buttonClass: 'btn-sm',
     },
     md: {
         fontSize: 'text-base',
         height: 'h-control-md',
-        iconSize: 'h-5 w-5'
+        iconSize: 'h-5 w-5',
+        buttonClass: 'btn-md',
     },
+    lg: {
+        fontSize: 'text-lg',
+        height: 'h-control-lg',
+        iconSize: 'h-6 w-6',
+        buttonClass: 'btn-lg',
+    },
+    xl: {
+        fontSize: 'text-xl',
+        height: 'h-control-xl',
+        iconSize: 'h-7 w-7',
+        buttonClass: 'btn-xl',
+    }
 };
 
 type Size = keyof typeof sizes;