sprintify-ui 0.7.3 → 0.7.5

package/src/components/BaseTagAutocomplete.vue

@@ -428,6 +428,8 @@ const wrapperClass = computed(() => {
     'xs': 'min-h-control-xs gap-0.5 p-0.5',
     'sm': 'min-h-control-sm gap-0.5 p-0.5',
     'md': 'min-h-control-md gap-1 p-1',
+    'lg': 'min-h-control-lg gap-1 p-1',
+    'xl': 'min-h-control-xl gap-1 p-1',
   }[sizeInternal.value];
 
   const focus = opened.value ? 'input-focus border-blue-300' : '';
@@ -440,6 +442,8 @@ const innerHeight = computed(() => {
     'xs': 'h-[calc(theme(spacing.control-xs)_-_theme(spacing[0.5])_-_theme(spacing[0.5])_-_2px)]',
     'sm': 'h-[calc(theme(spacing.control-sm)_-_theme(spacing[0.5])_-_theme(spacing[0.5])_-_2px)]',
     'md': 'h-[calc(theme(spacing.control-md)_-_theme(spacing.1)_-_theme(spacing.1)_-_2px)]',
+    'lg': 'h-[calc(theme(spacing.control-lg)_-_theme(spacing.1)_-_theme(spacing.1)_-_2px)]',
+    'xl': 'h-[calc(theme(spacing.control-xl)_-_theme(spacing.1)_-_theme(spacing.1)_-_2px)]',
   }[sizeInternal.value];
 
   return height;
@@ -455,6 +459,8 @@ const inputClasses = computed(() => {
     'xs': 'pl-1.5',
     'sm': 'pl-2',
     'md': 'pl-2.5',
+    'lg': 'pl-2.5',
+    'xl': 'pl-2.5',
   }[sizeInternal.value];
 
   return [base, padding, innerHeight.value, focus, disabled, sizeConfig.fontSize];
@@ -468,12 +474,16 @@ const selectionClass = (selection: NormalizedOption): string => {
     'xs': 'text-xs',
     'sm': 'text-xs',
     'md': 'text-sm',
+    'lg': 'text-base',
+    'xl': 'text-base',
   }[sizeInternal.value];
 
   const padding = {
     'xs': 'pl-2',
     'sm': 'pl-2',
     'md': 'pl-3',
+    'lg': 'pl-3',
+    'xl': 'pl-4',
   }[sizeInternal.value];
 
   let color = 'bg-slate-200 border-slate-300';
@@ -497,6 +507,8 @@ const selectionDeleteClasses = computed(() => {
     'xs': 'pl-1 pr-2',
     'sm': 'pl-1 pr-2',
     'md': 'pl-1 pr-3',
+    'lg': 'pl-2 pr-3',
+    'xl': 'pl-3 pr-4',
   }[sizeInternal.value];
 
   const disabled = props.disabled ? 'cursor-not-allowed opacity-60' : '';

package/src/components/BaseTagAutocompleteFetch.stories.js

@@ -1,10 +1,8 @@
 import BaseTagAutocompleteFetch from './BaseTagAutocompleteFetch.vue';
 import ShowValue from '@/../.storybook/components/ShowValue.vue';
-import { createFieldStory } from '../../.storybook/utils';
+import { createFieldStory, sizes } from '../../.storybook/utils';
 import BaseAppSnackbars from './BaseAppSnackbars.vue';
 
-const sizes = ['xs', 'sm', 'md'];
-
 export default {
   title: 'Form/BaseTagAutocompleteFetch',
   component: BaseTagAutocompleteFetch,

package/src/components/BaseTextarea.stories.js

@@ -1,8 +1,6 @@
-import { createFieldStory } from '../../.storybook/utils';
+import { createFieldStory, sizes } from '../../.storybook/utils';
 import BaseTextarea from './BaseTextarea.vue';
 
-const sizes = ['xs', 'sm', 'md'];
-
 export default {
   title: 'Form/BaseTextarea',
   component: BaseTextarea,
@@ -54,7 +52,6 @@ const TemplateSizes = (args) => ({
   components: { BaseTextarea },
   setup() {
     const value = ref(null);
-    const sizes = ['xs', 'sm', 'md'];
     return { args, value, sizes };
   },
   template: `

package/src/components/BaseTextarea.vue

@@ -124,6 +124,8 @@ const classes = computed(() => {
     xs: 'p-2',
     sm: 'p-2.5',
     md: 'p-3',
+    lg: 'p-3',
+    xl: 'p-4',
   }[sizeInternal.value];
 
   return twMerge(base, disabled, error, focus, sizeConfig.fontSize, padding, props.class);

package/src/components/BaseTextareaAutoresize.stories.js

@@ -1,8 +1,6 @@
 import BaseTextareaAutoresize from './BaseTextareaAutoresize.vue';
 import ShowValue from '@/../.storybook/components/ShowValue.vue';
-import { createFieldStory } from '../../.storybook/utils';
-
-const sizes = ['xs', 'sm', 'md'];
+import { createFieldStory, sizes } from '../../.storybook/utils';
 
 export default {
   title: 'Form/BaseTextareaAutoresize',
@@ -98,7 +96,6 @@ const TemplateSizes = (args) => ({
   components: { BaseTextareaAutoresize },
   setup() {
     const value = ref(null);
-    const sizes = ['xs', 'sm', 'md'];
     return { args, value, sizes };
   },
   template: `

package/src/components/BaseTextareaAutoresize.vue

@@ -145,7 +145,7 @@ function onFocus(event: FocusEvent) {
 }
 
 const textareaClasses = computed(() => {
-  const base = 'input-rounded leading-normal tracking-normal border transition-colors duration-200';
+  const base = 'input-rounded leading-normal tracking-normal border transition-colors duration-200 min-h-[1rem]';
   const disabled = 'disabled:cursor-not-allowed disabled:text-slate-300';
   const focus = 'focus:input-focus';
   const error = hasErrorInternal.value ? 'border-red-500 focus:input-focus-error' : 'border-slate-300';
@@ -153,9 +153,11 @@ const textareaClasses = computed(() => {
   const sizeConfig = sizes[sizeInternal.value];
 
   const sizeClasses = {
-    xs: 'px-2 py-[0.26rem] min-h-control-xs',
-    sm: 'px-2.5 py-[0.31rem] min-h-control-sm',
-    md: 'px-3 py-[0.43rem] min-h-control-md',
+    xs: 'px-2 py-[4px]',
+    sm: 'px-2.5 py-[5px]',
+    md: 'px-3 py-[7px]',
+    lg: 'px-3 py-[9px]',
+    xl: 'px-4 py-[13px]',
   }[sizeInternal.value];
 
   return twMerge(

package/src/components/BaseTimePicker.stories.js

@@ -1,9 +1,7 @@
-import { createFieldStory } from '../../.storybook/utils';
+import { createFieldStory, sizes } from '../../.storybook/utils';
 import BaseTimePicker from './BaseTimePicker.vue';
 import ShowValue from '@/../.storybook/components/ShowValue.vue';
 
-const sizes = ['xs', 'sm', 'md'];
-
 export default {
   title: 'Form/BaseTimePicker',
   component: BaseTimePicker,
@@ -51,7 +49,6 @@ const TemplateSizes = (args) => ({
   components: { BaseTimePicker },
   setup() {
     const value = ref(null);
-    const sizes = ['xs', 'sm', 'md'];
     return { args, value, sizes };
   },
   template: `

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;