sprintify-ui 0.7.4 → 0.7.5

package/dist/types/components/BaseTagAutocomplete.vue.d.ts

@@ -64,7 +64,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     size: {
         default: undefined;
-        type: PropType<"xs" | "sm" | "md">;
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
     };
     dropdownShow: {
         default: string;
@@ -153,7 +153,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     size: {
         default: undefined;
-        type: PropType<"xs" | "sm" | "md">;
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
     };
     dropdownShow: {
         default: string;
@@ -180,7 +180,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }, {
     filter: (option: NormalizedOption) => boolean;
     required: boolean;
-    size: "xs" | "sm" | "md";
+    size: "xs" | "sm" | "md" | "lg" | "xl";
     name: string;
     placeholder: string;
     loading: boolean;

package/dist/types/components/BaseTextarea.vue.d.ts

@@ -12,7 +12,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     size: {
         default: undefined;
-        type: PropType<"xs" | "sm" | "md">;
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
     };
     class: {
         default: string;
@@ -68,7 +68,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     size: {
         default: undefined;
-        type: PropType<"xs" | "sm" | "md">;
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
     };
     class: {
         default: string;
@@ -115,7 +115,7 @@ declare const _default: import("vue").DefineComponent<{
     type: string;
     required: boolean;
     modelValue: string | null | undefined;
-    size: "xs" | "sm" | "md";
+    size: "xs" | "sm" | "md" | "lg" | "xl";
     name: string;
     placeholder: string;
     disabled: boolean;

package/dist/types/components/BaseTextareaAutoresize.vue.d.ts

@@ -20,7 +20,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     size: {
         default: undefined;
-        type: PropType<"xs" | "sm" | "md">;
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
     };
     maxHeight: {
         default: number;
@@ -77,7 +77,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     size: {
         default: undefined;
-        type: PropType<"xs" | "sm" | "md">;
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
     };
     maxHeight: {
         default: number;
@@ -115,7 +115,7 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     required: boolean;
     modelValue: string | null;
-    size: "xs" | "sm" | "md";
+    size: "xs" | "sm" | "md" | "lg" | "xl";
     name: string;
     placeholder: string;
     disabled: boolean;

package/dist/types/components/BaseTimePicker.vue.d.ts

@@ -6,7 +6,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     size: {
         default: undefined;
-        type: PropType<"xs" | "sm" | "md">;
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
     };
     class: {
         default: string;
@@ -57,7 +57,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     size: {
         default: undefined;
-        type: PropType<"xs" | "sm" | "md">;
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
     };
     class: {
         default: string;
@@ -105,7 +105,7 @@ declare const _default: import("vue").DefineComponent<{
     class: string | string[];
     required: boolean;
     modelValue: string | null | undefined;
-    size: "xs" | "sm" | "md";
+    size: "xs" | "sm" | "md" | "lg" | "xl";
     name: string;
     placeholder: string;
     disabled: boolean;

package/dist/types/composables/field.d.ts

@@ -14,7 +14,7 @@ export declare function useField(config: Config): {
     nameInternal: import("vue").ComputedRef<string>;
     hasErrorInternal: import("vue").ComputedRef<boolean>;
     errorMessageInternal: import("vue").ComputedRef<string | null | undefined>;
-    sizeInternal: import("vue").ComputedRef<"xs" | "sm" | "md">;
+    sizeInternal: import("vue").ComputedRef<"xs" | "sm" | "md" | "lg" | "xl">;
     emitUpdate: (value: any) => void;
     enableForm: () => void;
     disableForm: () => void;

package/dist/types/composables/inputSize.d.ts

@@ -1,6 +1,6 @@
 import { Size } from "@/utils/sizes";
 import { MaybeRef } from "vue";
 declare function useInputSize(size: MaybeRef<Size | '' | undefined | null>): {
-    size: import("vue").ComputedRef<"xs" | "sm" | "md">;
+    size: import("vue").ComputedRef<"xs" | "sm" | "md" | "lg" | "xl">;
 };
 export { useInputSize };

package/dist/types/utils/sizeBehaviors.d.ts

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

package/dist/types/utils/sizes.d.ts

@@ -3,16 +3,31 @@ declare const sizes: {
         fontSize: string;
         height: string;
         iconSize: string;
+        buttonClass: string;
     };
     sm: {
         fontSize: string;
         height: string;
         iconSize: string;
+        buttonClass: string;
     };
     md: {
         fontSize: string;
         height: string;
         iconSize: string;
+        buttonClass: string;
+    };
+    lg: {
+        fontSize: string;
+        height: string;
+        iconSize: string;
+        buttonClass: string;
+    };
+    xl: {
+        fontSize: string;
+        height: string;
+        iconSize: string;
+        buttonClass: string;
     };
 };
 type Size = keyof typeof sizes;

package/package.json

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

package/src/assets/base-rich-text.css

@@ -217,4 +217,105 @@ body {
       }
     }
   }
+
+  /* Size: md */
+  .base-rich-text-md {
+   
+  }
+
+  /* Size: lg */
+  .base-rich-text-lg {
+    .ql-editor {
+
+      @apply p-5;
+
+      &.ql-blank::before {
+        @apply text-lg left-5;
+      }
+
+
+      h1 {
+        @apply text-5xl;
+      }
+
+      h2 {
+        @apply text-4xl;
+      }
+
+      h3 {
+        @apply text-3xl;
+      }
+
+      h4 {
+        @apply text-2xl;
+      }
+
+      p {
+        @apply text-lg;
+      }
+
+      ol,
+      ul {
+        li {
+          @apply text-lg;
+        }
+      }
+
+      blockquote {
+        @apply text-lg;
+      }
+
+      pre, .ql-syntax {
+        @apply text-lg;
+      }
+    }
+  }
+
+  /* Size: xl */
+  .base-rich-text-xl {
+    .ql-editor {
+
+      @apply p-6;
+
+      &.ql-blank::before {
+        @apply text-xl left-6;
+      }
+
+
+      h1 {
+        @apply text-6xl;
+      }
+
+      h2 {
+        @apply text-5xl;
+      }
+
+      h3 {
+        @apply text-2xl;
+      }
+
+      h4 {
+        @apply text-xl;
+      }
+
+      p {
+        @apply text-xl;
+      }
+
+      ol,
+      ul {
+        li {
+          @apply text-xl;
+        }
+      }
+
+      blockquote {
+        @apply text-xl;
+      }
+
+      pre, .ql-syntax {
+        @apply text-xl;
+      }
+    }
+  }
 }

package/src/components/BaseAddressForm.stories.js

@@ -1,5 +1,6 @@
 import BaseAddressForm from './BaseAddressForm.vue';
 import ShowValue from '../../.storybook/components/ShowValue.vue';
+import { sizes } from '../../.storybook/utils';
 
 export default {
   title: 'Form/BaseAddressForm',
@@ -7,7 +8,7 @@ export default {
   argTypes: {
     size: {
       control: { type: 'select' },
-      options: ['xs', 'sm', 'md'],
+      options: sizes,
     },
   },
   args: {

package/src/components/BaseAddressForm.vue

@@ -375,6 +375,8 @@ const baseClasses = computed(() => {
     'xs': 'gap-y-2 gap-x-1',
     'sm': 'gap-y-2.5 gap-x-1.5',
     'md': 'gap-y-3 gap-x-2',
+    'lg': 'gap-y-3 gap-x-2',
+    'xl': 'gap-y-4 gap-x-2',
   }[size.value]
 });
 </script>

package/src/components/BaseAutocomplete.stories.js

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

package/src/components/BaseAutocompleteFetch.stories.js

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

package/src/components/BaseBadge.stories.js

@@ -1,11 +1,10 @@
+import { sizes } from '../../.storybook/utils';
 import BaseBadge from './BaseBadge.vue';
 
 import { palette } from '@/utils/colors';
 
 const colors = [...Object.keys(palette), '#ff0000', '#dbeafe'];
 
-const sizes = ['sm', 'md', 'lg'];
-
 export default {
   title: 'Components/BaseBadge',
   component: BaseBadge,
@@ -52,7 +51,7 @@ export const Colors = (args) => ({
   template: `
   <div v-for="color in colors" :key="color" class="mb-1">
     <p class="text-xs text-slate-600 leading-tight">{{ color }}</p>
-    <BaseBadge v-bind="args" :color="color" icon="heroicons:beaker-20-solid">
+    <BaseBadge v-bind="args" :color="color">
       Administrator
     </BaseBadge>
   </div>
@@ -61,6 +60,7 @@ export const Colors = (args) => ({
 
 Colors.args = {
   contrast: 'high',
+  icon: 'heroicons:beaker-20-solid',
 };
 
 export const Contrast = (args) => ({
@@ -71,7 +71,7 @@ export const Contrast = (args) => ({
   template: `
   <div v-for="color in colors" :key="color" class="mb-1">
     <p class="text-xs text-slate-600 leading-tight">{{ color }}</p>
-    <BaseBadge v-bind="args" :color="color" icon="heroicons:beaker-20-solid">
+    <BaseBadge v-bind="args" :color="color">
       Administrator
     </BaseBadge>
   </div>
@@ -80,6 +80,7 @@ export const Contrast = (args) => ({
 
 Contrast.args = {
   contrast: 'low',
+  icon: 'heroicons:beaker-20-solid',
 };
 
 export const Sizes = (args) => ({
@@ -97,6 +98,12 @@ export const Sizes = (args) => ({
   `,
 });
 
+Sizes.args = {
+  contrast: 'high',
+  icon: 'heroicons:beaker-20-solid',
+};
+
+
 export const Wrap = (args) => ({
   components: { BaseBadge },
   setup() {

package/src/components/BaseBadge.vue

@@ -15,11 +15,10 @@
 
 <script lang="ts" setup>
 import { getColorConfig } from '@/utils/colors';
+import { Size, sizes } from '@/utils/sizes';
 import { Icon as BaseIcon } from '@iconify/vue';
 import { twMerge } from 'tailwind-merge';
 
-const sizes = ['sm', 'md', 'lg'];
-
 defineOptions({
   inheritAttrs: false,
 });
@@ -29,7 +28,7 @@ const props = withDefaults(
     class?: string | string[];
     contrast?: 'low' | 'high';
     color?: string;
-    size?: typeof sizes[number];
+    size?: Size;
     icon?: string;
     wrap?: boolean;
     bordered?: boolean;
@@ -61,7 +60,7 @@ const colorStyle = computed((): Record<string, string> => {
 });
 
 const sizeInternal = computed(() => {
-  if (!sizes.includes(props.size)) {
+  if (!Object.keys(sizes).includes(props.size)) {
     return 'md';
   }
 
@@ -71,9 +70,11 @@ const sizeInternal = computed(() => {
 const classes = computed(() => {
   const base = 'inline-flex items-center rounded leading-tight';
   const size = {
+    xs: 'px-1 py-px text-[9px]',
     sm: 'px-1.5 py-px text-[10px]',
     md: 'px-1.5 py-0.5 text-xs',
     lg: 'px-1.5 py-0.5 text-sm',
+    xl: 'px-2.5 py-1.5 text-sm',
   }[sizeInternal.value];
 
   const wrap = props.wrap ? '' : 'whitespace-nowrap';
@@ -84,9 +85,11 @@ const classes = computed(() => {
 const iconSizeClasses = computed(() => {
 
   const size = {
+    xs: 'h-2 w-2 mr-1',
     sm: 'h-2.5 w-2.5 mr-1',
     md: 'h-3 w-3 mr-1',
     lg: 'h-4 w-4 mr-1',
+    xl: 'h-5 w-5 mr-1.5',
   }[sizeInternal.value];
 
   return size;

package/src/components/BaseBelongsTo.stories.js

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

package/src/components/BaseBelongsToFetch.stories.js

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

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,