sprintify-ui 0.7.4 → 0.7.5

package/src/components/BaseContainer.vue

@@ -1,50 +1,64 @@
 <template>
   <div
-    class="mx-auto w-full md:px-8"
-    :class="[width, { 'px-4': !paddinglessMobile }]"
+    :class="classInternal"
   >
     <slot />
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  props: {
-    size: {
-      default: '7xl',
-      type: String,
-    },
-    paddinglessMobile: {
-      default: false,
-      type: Boolean,
-    },
-    fluid: {
-      default: false,
-      type: Boolean,
-    },
-  },
-  computed: {
-    width() {
-      if (this.fluid) {
-        return 'max-w-full';
-      }
-
-      const sizes = {
-        lg: 'max-w-lg',
-        xl: 'max-w-xl',
-        '2xl': 'max-w-2xl',
-        '3xl': 'max-w-3xl',
-        '4xl': 'max-w-4xl',
-        '5xl': 'max-w-5xl',
-        '6xl': 'max-w-6xl',
-        '7xl': 'max-w-7xl',
-        full: 'max-w-full',
-      } as { [key: string]: string };
-
-      return sizes[this.size] || 'max-w-5xl';
-    },
-  },
+<script lang="ts" setup>
+import { twMerge } from 'tailwind-merge';
+
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const sizes = {
+  lg: 'max-w-lg',
+  xl: 'max-w-xl',
+  '2xl': 'max-w-2xl',
+  '3xl': 'max-w-3xl',
+  '4xl': 'max-w-4xl',
+  '5xl': 'max-w-5xl',
+  '6xl': 'max-w-6xl',
+  '7xl': 'max-w-7xl',
+  full: 'max-w-full',
+} as { [key: string]: string };
+
+type Size = keyof typeof sizes;
+
+const props = withDefaults(defineProps<{
+  class?: string | string[];
+  size?: Size,
+  paddinglessMobile?: boolean;
+  fluid?: boolean;
+}>(), {
+  class: '',
+  size: '7xl',
+  paddinglessMobile: false,
+  fluid: false,
+});
+
+const widthClass = computed(() => {
+  if (props.fluid) {
+    return 'max-w-full';
+  }
+
+  return sizes[props.size] || 'max-w-5xl';
 });
+
+const classInternal = computed(() => {
+
+  const baseClass = 'mx-auto w-full';
+  const paddingClass = props.paddinglessMobile ? 'px-0 md:px-8' : 'px-4 md:px-8';
+
+  return twMerge(
+    baseClass,
+    paddingClass,
+    widthClass.value,
+    props.class,
+  );
+});
+
 </script>

package/src/components/BaseDataIterator.stories.js

@@ -3,8 +3,7 @@ import BaseSelect from './BaseSelect.vue';
 import BaseCard from './BaseCard.vue';
 import BaseCardRow from './BaseCardRow.vue';
 import BaseLoadingCover from './BaseLoadingCover.vue';
-
-const sizes = ['xs', 'sm', 'md'];
+import { sizes } from '../../.storybook/utils';
 
 export default {
   title: 'Data/BaseDataIterator',

package/src/components/BaseDataIteratorSectionButton.vue

@@ -12,7 +12,7 @@
       v-if="section.count"
       class="ml-2"
       color="blue"
-      :size="size == 'sm' ? 'sm' : 'base'"
+      :size="size == 'sm' ? 'sm' : 'md'"
     >
       {{ section.count }}
     </BaseBadge>

package/src/components/BaseDatePicker.stories.js

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

package/src/components/BaseDatePicker.vue

@@ -312,6 +312,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';
@@ -335,6 +337,8 @@ const iconWrapClasses = computed(() => {
     'xs': 'pl-2',
     'sm': 'pl-2.5',
     'md': 'pl-3',
+    'lg': 'pl-3',
+    'xl': 'pl-3',
   }[sizeInternal.value];
 
   return twMerge(

package/src/components/BaseDateSelect.stories.js

@@ -1,8 +1,6 @@
 import BaseDateSelect from './BaseDateSelect.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/BaseDateSelect',
@@ -51,7 +49,6 @@ const TemplateSizes = (args) => ({
   components: { BaseDateSelect },
   setup() {
     const value = ref(null);
-    const sizes = ['xs', 'sm', 'md'];
     return { args, value, sizes };
   },
   template: `

package/src/components/BaseDateSelect.vue

@@ -6,6 +6,8 @@
         sizeInternal === 'xs' ? 'gap-0.5' : '',
         sizeInternal === 'sm' ? 'gap-0.5' : '',
         sizeInternal === 'md' ? 'gap-1' : '',
+        sizeInternal === 'lg' ? 'gap-1' : '',
+        sizeInternal === 'xl' ? 'gap-1' : '',
       ]"
     >
       <BaseSelect

package/src/components/BaseHasMany.stories.js

@@ -1,12 +1,10 @@
 import BaseHasMany from './BaseHasMany.vue';
 import ShowValue from '@/../.storybook/components/ShowValue.vue';
-import { createFieldStory, options } from '../../.storybook/utils';
+import { createFieldStory, options, sizes } from '../../.storybook/utils';
 import BaseAppSnackbars from './BaseAppSnackbars.vue';
 import QueryString from 'qs';
 import { random } from 'lodash';
 
-const sizes = ['xs', 'sm', 'md'];
-
 export default {
   title: 'Form/BaseHasMany',
   component: BaseHasMany,

package/src/components/BaseInput.stories.js

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

package/src/components/BaseInput.vue

@@ -315,6 +315,8 @@ const baseClasses = computed(() => {
     xs: [hasLeftDecoration.value ? 'pl-0' : 'pl-2', hasRightDecoration.value ? 'pr-0' : 'pr-2'],
     sm: [hasLeftDecoration.value ? 'pl-0' : 'pl-2.5', hasRightDecoration.value ? 'pr-0' : 'pr-2.5'],
     md: [hasLeftDecoration.value ? 'pl-0' : 'pl-3', hasRightDecoration.value ? 'pr-1' : 'pr-3'],
+    lg: [hasLeftDecoration.value ? 'pl-0' : 'pl-4', hasRightDecoration.value ? 'pr-0' : 'pr-4'],
+    xl: [hasLeftDecoration.value ? 'pl-0' : 'pl-5', hasRightDecoration.value ? 'pr-0' : 'pr-5'],
   }[sizeInternal.value];
 
   return [
@@ -331,6 +333,8 @@ const decorationWrapClasses = computed(() => {
     xs: 'first:pl-0.5 last:pr-0.5 py-0.5',
     sm: 'first:pl-1 last:pr-1 py-1',
     md: 'first:pl-1 last:pr-1 py-1',
+    lg: 'first:pl-1 last:pr-1 py-1.5',
+    xl: 'first:pl-1 last:pr-1 py-2',
   }[sizeInternal.value];
 
   return [
@@ -346,6 +350,8 @@ const decorationClasses = computed(() => {
     xs: 'p-1',
     sm: 'p-1.5',
     md: 'p-2',
+    lg: 'p-1.5',
+    xl: 'p-1.5',
   }[sizeInternal.value];
 
   return `${base} ${textColor} ${padding}`;

package/src/components/BaseInputError.vue

@@ -26,6 +26,8 @@ const classes = computed(() => {
     'xs': 'text-xs mb-0.5',
     'sm': 'text-xs mb-1',
     'md': 'text-sm mb-1',
+    'lg': 'text-base mb-1',
+    'xl': 'text-base mb-1',
   }[size.value];
 
   return [

package/src/components/BaseInputLabel.vue

@@ -73,6 +73,8 @@ const classes = computed(() => {
     'xs': 'text-xs mb-[0.2rem]',
     'sm': 'text-sm mb-1',
     'md': 'text-sm mb-1',
+    'lg': 'text-base mb-1',
+    'xl': 'text-base mb-1',
   }[size.value];
 
   return twMerge(base, responsive, props.class);

package/src/components/BaseJsonReader.stories.js

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

package/src/components/BaseJsonReaderItem.vue

@@ -99,6 +99,14 @@ const classSizeChevron = computed(() => {
       width: 'w-3.5',
       height: 'h-3.5',
     },
+    lg: {
+      width: 'w-4',
+      height: 'h-4',
+    },
+    xl: {
+      width: 'w-5',
+      height: 'h-5',
+    },
   };
 
   const sizeConfig = chevronSizes[props.size];

package/src/components/BasePassword.stories.js

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

package/src/components/BaseRichText.stories.js

@@ -1,8 +1,7 @@
 import BaseRichText from './BaseRichText.vue';
 import ShowValue from '@/../.storybook/components/ShowValue.vue';
 import { createFieldStory } from '@/../.storybook/utils';
-
-const sizes = ['xs', 'sm', 'md'];
+import { sizes } from '../../.storybook/utils';
 
 const toolbarOptions = [
   'full',

package/src/components/BaseRichText.vue

@@ -3,8 +3,11 @@
     class="base-rich-text relative"
     :class="[
       hasErrorInternal ? 'error' : '',
-      sizeInternal == 'sm' ? 'base-rich-text-sm' : '',
       sizeInternal == 'xs' ? 'base-rich-text-xs' : '',
+      sizeInternal == 'sm' ? 'base-rich-text-sm' : '',
+      sizeInternal == 'md' ? 'base-rich-text-base' : '',
+      sizeInternal == 'lg' ? 'base-rich-text-lg' : '',
+      sizeInternal == 'xl' ? 'base-rich-text-xl' : '',
     ]"
   >
     <quill-editor

package/src/components/BaseSelect.stories.js

@@ -1,7 +1,7 @@
 import BaseSelect from './BaseSelect.vue';
 import BaseInputLabel from './BaseInputLabel.vue';
 import ShowValue from '../../.storybook/components/ShowValue.vue';
-import { createFieldStory } from '../../.storybook/utils.js';
+import { createFieldStory, sizes } from '../../.storybook/utils.js';
 import { options } from '../../.storybook/utils';
 import { computed } from 'vue';
 
@@ -82,7 +82,6 @@ const TemplateSizes = (args) => ({
   components: { BaseSelect },
   setup() {
     const value = ref(null);
-    const sizes = ['xs', 'sm', 'md'];
     return { args, value, sizes, options };
   },
   template: `

package/src/components/BaseSelect.vue

@@ -221,6 +221,8 @@ const classes = computed(() => {
     xs: 'pl-2 pr-7',
     sm: 'pl-2.5 pr-8',
     md: 'pl-3 pr-10',
+    lg: 'pl-4 pr-11',
+    xl: 'pl-4 pr-11',
   }[sizeInternal.value];
 
   return twMerge([

package/src/components/BaseShortcut.stories.js

@@ -3,8 +3,6 @@ import { palette } from '@/utils/colors';
 
 const colors = [...Object.keys(palette), '#ff0000', '#dbeafe'];
 
-const sizes = ['base', 'lg'];
-
 export default {
   title: 'Components/BaseShortcut',
   component: BaseShortcut,
@@ -42,7 +40,7 @@ Basic.args = {
 export const Colors = (args) => ({
   components: { BaseShortcut },
   setup() {
-    return { args, colors, sizes };
+    return { args, colors };
   },
   template: `
   <div v-for="color in colors" :key="color">
@@ -64,7 +62,7 @@ Colors.args = {
 export const Contrast = (args) => ({
   components: { BaseShortcut },
   setup() {
-    return { args, colors, sizes };
+    return { args, colors };
   },
   template: `
   <div v-for="color in colors" :key="color">

package/src/components/BaseSwitch.stories.js

@@ -1,6 +1,6 @@
 import BaseSwitch from './BaseSwitch.vue';
 import BaseContainer from './BaseContainer.vue';
-import { createFieldStory } from '../../.storybook/utils';
+import { createFieldStory, sizes } from '../../.storybook/utils';
 
 export default {
   title: 'Form/BaseSwitch',
@@ -82,8 +82,6 @@ const Colors = (args) => ({
 export const AllColors = Colors.bind({});
 AllColors.args = {};
 
-const sizes = ['xs', 'sm', 'base', 'lg', 'xl'];
-
 const Sizes = (args) => ({
   components: {
     BaseSwitch,

package/src/components/BaseTagAutocomplete.stories.js

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

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: `