sprintify-ui 0.7.3 → 0.7.5

package/src/components/BaseBelongsToFetch.vue

@@ -15,7 +15,7 @@
     :dropdown-show="dropdownShow"
     :show-model-value="showModelValue"
     :show-empty-option="showEmptyOption"
-    :show-delete-button="showDeleteButton"
+    :show-remove-button="showRemoveButton"
     :empty-option-label="emptyOptionLabel"
     :visible-focus="visibleFocus"
     :focus-on-mount="focusOnMount"
@@ -127,7 +127,7 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
-  showDeleteButton: {
+  showRemoveButton: {
     default: true,
     type: Boolean,
   },

package/src/components/BaseButton.stories.js

@@ -1,3 +1,4 @@
+import { sizes } from '../../.storybook/utils';
 import BaseButton from './BaseButton.vue';
 
 const colors = [
@@ -24,14 +25,6 @@ const colors = [
   'slate-200-outline',
 ];
 
-const sizes = [
-  'xs',
-  'sm',
-  'md',
-  'lg',
-  'xl',
-];
-
 export default {
   title: 'Components/BaseButton',
   component: BaseButton,

package/src/components/BaseButton.vue

@@ -50,6 +50,9 @@ import { RouteLocationRaw } from 'vue-router';
 import { BaseIcon } from '.';
 import { getColorConfig } from '@/utils/colors';
 import { isSlotEmpty } from '@/utils/slots';
+import { Size, sizes } from '@/utils/sizes';
+import { SizeBehavior } from '@/utils/sizeBehaviors';
+import { useInputSize } from '@/composables/inputSize';
 
 defineOptions({
   inheritAttrs: false,
@@ -57,14 +60,6 @@ defineOptions({
 
 const slots = useSlots();
 
-const sizes = {
-  'xs': 'btn-xs',
-  'sm': 'btn-sm',
-  'md': 'btn-md',
-  'lg': 'btn-lg',
-  'xl': 'btn-xl',
-};
-
 const colors = {
   '': '',
   'primary': 'btn-primary',
@@ -95,7 +90,8 @@ const props = withDefaults(defineProps<{
   href?: string;
   type?: 'button' | 'submit' | 'reset';
   iconPosition?: 'start' | 'end';
-  size?: keyof typeof sizes;
+  size?: Size;
+  sizeBehavior?: SizeBehavior;
   color?: keyof typeof colors | string;
   to?: RouteLocationRaw;
 }>(), {
@@ -108,12 +104,24 @@ const props = withDefaults(defineProps<{
   type: 'submit',
   iconPosition: 'start',
   size: 'md',
+  sizeBehavior: SizeBehavior.default,
   color: '',
   to: undefined,
 });
 
 defineEmits(['click']);
 
+const sizeInternal = computed(() => {
+
+  if (props.sizeBehavior == SizeBehavior.default) {
+    return props.size;
+  }
+
+  const inputSize = useInputSize(props.size);
+
+  return inputSize.size.value;
+});
+
 const iconOnly = computed(() => {
   return props.icon && isSlotEmpty(slots.default);
 });
@@ -131,8 +139,8 @@ const classes = computed(() => {
 
   }
 
-  if (props.size) {
-    classes.push(sizes[props.size]);
+  if (sizeInternal.value) {
+    classes.push(sizes[sizeInternal.value]?.buttonClass);
   }
 
   if (iconOnly.value) {
@@ -166,15 +174,15 @@ const containerClass = computed(() => {
   }
 
   if (props.icon) {
-    if (props.size == 'xs') {
+    if (sizeInternal.value == 'xs') {
       classes.push('gap-0.5');
-    } else if (props.size == 'sm') {
+    } else if (sizeInternal.value == 'sm') {
       classes.push('gap-0.5');
-    } else if (props.size == 'md') {
+    } else if (sizeInternal.value == 'md') {
       classes.push('gap-1');
-    } else if (props.size == 'lg') {
+    } else if (sizeInternal.value == 'lg') {
       classes.push('gap-1');
-    } else if (props.size == 'xl') {
+    } else if (sizeInternal.value == 'xl') {
       classes.push('gap-1');
     }
   }
@@ -193,15 +201,15 @@ const iconClass = computed(() => {
     }
   }
 
-  if (props.size === 'xs') {
+  if (sizeInternal.value === 'xs') {
     classes.push('h-3 w-3');
-  } else if (props.size === 'sm') {
+  } else if (sizeInternal.value === 'sm') {
     classes.push('h-3.5 w-3.5');
-  } else if (props.size === 'md') {
+  } else if (sizeInternal.value === 'md') {
     classes.push('h-4 w-4');
-  } else if (props.size === 'lg') {
+  } else if (sizeInternal.value === 'lg') {
     classes.push('h-5 w-5');
-  } else if (props.size === 'xl') {
+  } else if (sizeInternal.value === 'xl') {
     classes.push('h-6 w-6');
   }
 

package/src/components/BaseButtonGroup.stories.js

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

package/src/components/BaseButtonGroup.vue

@@ -170,6 +170,8 @@ const wrapperClasses = computed(() => {
       "xs": "gap-0.5",
       "sm": "gap-1",
       "md": "gap-1.5",
+      "lg": "gap-1.5",
+      "xl": "gap-1.5",
     }[sizeInternal.value]
   }
 

package/src/components/BaseColor.stories.js

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

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,