sprintify-ui 0.7.3 → 0.7.5

package/dist/types/components/BasePassword.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">;
     };
     name: {
         default: undefined;
@@ -48,7 +48,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     size: {
         default: undefined;
-        type: PropType<"xs" | "sm" | "md">;
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
     };
     name: {
         default: undefined;
@@ -73,7 +73,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/BaseRichText.vue.d.ts

@@ -11,7 +11,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     size: {
         default: undefined;
-        type: PropType<"xs" | "sm" | "md">;
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
     };
     toolbar: {
         type: PropType<string | unknown[] | Record<string, any> | undefined>;
@@ -54,7 +54,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     size: {
         default: undefined;
-        type: PropType<"xs" | "sm" | "md">;
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
     };
     toolbar: {
         type: PropType<string | unknown[] | Record<string, any> | undefined>;
@@ -89,7 +89,7 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     required: boolean;
     modelValue: string | Delta | null | undefined;
-    size: "xs" | "sm" | "md";
+    size: "xs" | "sm" | "md" | "lg" | "xl";
     name: string;
     placeholder: string;
     disabled: boolean;

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

@@ -16,7 +16,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     size: {
         default: undefined;
-        type: PropType<"xs" | "sm" | "md">;
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
     };
     placeholder: {
         default: string;
@@ -67,7 +67,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     size: {
         default: undefined;
-        type: PropType<"xs" | "sm" | "md">;
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
     };
     placeholder: {
         default: string;
@@ -107,7 +107,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     class: string | string[];
     required: boolean;
     modelValue: SelectOption | undefined;
-    size: "xs" | "sm" | "md";
+    size: "xs" | "sm" | "md" | "lg" | "xl";
     options: RawOption[];
     labelKey: string;
     valueKey: string;

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

@@ -14,7 +14,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     size: {
         default: string;
-        type: PropType<"xs" | "sm" | "base" | "lg" | "xl">;
+        type: PropType<"xs" | "sm" | "lg" | "xl" | "base">;
     };
     hasError: {
         default: boolean;
@@ -53,7 +53,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     size: {
         default: string;
-        type: PropType<"xs" | "sm" | "base" | "lg" | "xl">;
+        type: PropType<"xs" | "sm" | "lg" | "xl" | "base">;
     };
     hasError: {
         default: boolean;
@@ -80,7 +80,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }, {
     required: boolean;
     modelValue: string | number | boolean | null | undefined;
-    size: "xs" | "sm" | "base" | "lg" | "xl";
+    size: "xs" | "sm" | "lg" | "xl" | "base";
     color: "info" | "success" | "danger" | "warning" | "primary" | "dark" | "light";
     name: string;
     disabled: boolean;

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

@@ -154,8 +154,8 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     field: string;
-    width: number;
     searchable: boolean;
+    width: number;
     meta: unknown[] | Record<string, any>;
     label: string;
     customKey: string | number;

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.3",
+  "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/BaseAutocomplete.vue

@@ -44,7 +44,7 @@
       </div>
 
       <div
-        v-if="showDeleteButtonInternal"
+        v-if="showRemoveButtonInternal"
         class="absolute right-0 top-0 flex h-full p-1"
       >
         <button
@@ -197,7 +197,7 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
-  showDeleteButton: {
+  showRemoveButton: {
     default: true,
     type: Boolean,
   },
@@ -515,7 +515,7 @@ const deleteButtonIconClasses = computed(() => {
 
 const inputClasses = computed(() => {
   const base = 'w-full';
-  const paddingRight = showDeleteButtonInternal.value ? 'pr-5' : '';
+  const paddingRight = showRemoveButtonInternal.value ? 'pr-5' : '';
   const withSelect = props.select ? 'rounded-l-none' : '';
 
   return [
@@ -525,8 +525,8 @@ const inputClasses = computed(() => {
   ];
 })
 
-const showDeleteButtonInternal = computed(() => {
-  return normalizedModelValue.value && !props.disabled && props.showModelValue && props.showDeleteButton;
+const showRemoveButtonInternal = computed(() => {
+  return normalizedModelValue.value && !props.disabled && props.showModelValue && props.showRemoveButton;
 });
 
 defineExpose({

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/BaseAutocompleteFetch.vue

@@ -20,7 +20,7 @@
     :focus-on-mount="focusOnMount"
     :show-empty-option="showEmptyOption"
     :empty-option-label="emptyOptionLabel"
-    :show-delete-button="showDeleteButton"
+    :show-remove-button="showRemoveButton"
     :select="select"
     :filter="filterOptions"
     @clear="onClear"
@@ -155,7 +155,7 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
-  showDeleteButton: {
+  showRemoveButton: {
     default: true,
     type: Boolean,
   },

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/BaseBelongsTo.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"
@@ -116,7 +116,7 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
-  showDeleteButton: {
+  showRemoveButton: {
     default: true,
     type: Boolean,
   },

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',