sprintify-ui 0.6.32 → 0.6.34

package/dist/types/src/components/BaseMediaPicturesItem.vue.d.ts

@@ -48,8 +48,8 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     onRemove?: ((...args: any[]) => any) | undefined;
 }, {
-    disabled: boolean;
     size: number;
+    disabled: boolean;
     showRemove: boolean;
     draggable: boolean;
 }, {}>;

package/dist/types/src/components/BaseMenu.vue.d.ts

@@ -51,9 +51,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: (ObjectConstructor | ArrayConstructor | StringConstructor)[];
     };
 }>>, {
+    size: "xs" | "sm" | "md";
     placement: "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end";
     width: number;
-    size: "xs" | "sm" | "md";
     items: ActionItem[];
     twButton: string | Record<string, any> | unknown[];
     twMenu: string | string[];

package/dist/types/src/components/BaseMenuItem.vue.d.ts

@@ -63,8 +63,8 @@ declare const _default: import("vue").DefineComponent<{
     label: string;
     color: ActionColors;
     icon: string;
+    size: "xs" | "sm" | "md";
     description: string;
     count: number;
-    size: "xs" | "sm" | "md";
 }, {}>;
 export default _default;

package/dist/types/src/components/BaseNavbar.vue.d.ts

@@ -47,8 +47,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }>>, {
     dark: boolean;
     class: string | string[];
-    height: number;
     size: "xs" | "sm" | "md";
+    height: number;
     breakpoint: number;
 }, {}>, {
     navbar?(_: {

package/dist/types/src/components/BaseNavbarItemContent.vue.d.ts

@@ -54,7 +54,7 @@ declare const _default: import("vue").DefineComponent<{
     active: boolean;
     label: string;
     icon: string;
-    count: number;
     size: "xs" | "sm" | "md";
+    count: number;
 }, {}>;
 export default _default;

package/dist/types/src/components/BaseNavbarSideItemContent.vue.d.ts

@@ -54,7 +54,7 @@ declare const _default: import("vue").DefineComponent<{
     active: boolean;
     label: string;
     icon: string;
-    count: number;
     size: "xs" | "sm" | "md";
+    count: number;
 }, {}>;
 export default _default;

package/dist/types/src/components/BasePassword.vue.d.ts

@@ -10,6 +10,10 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    size: {
+        default: undefined;
+        type: PropType<"xs" | "sm" | "md">;
+    };
     name: {
         default: undefined;
         type: StringConstructor;
@@ -30,6 +34,8 @@ declare const _default: import("vue").DefineComponent<{
     focus: typeof focus;
     blur: typeof blur;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    blur: (...args: any[]) => void;
+    focus: (...args: any[]) => void;
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
@@ -40,6 +46,10 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    size: {
+        default: undefined;
+        type: PropType<"xs" | "sm" | "md">;
+    };
     name: {
         default: undefined;
         type: StringConstructor;
@@ -57,10 +67,13 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
     };
 }>> & {
+    onFocus?: ((...args: any[]) => any) | undefined;
+    onBlur?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     required: boolean;
     name: string;
+    size: "xs" | "sm" | "md";
     modelValue: string | null;
     placeholder: string;
     disabled: boolean;

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

@@ -10,6 +10,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
         type: StringConstructor;
     };
+    class: {
+        default: string;
+        type: PropType<string | string[]>;
+    };
+    size: {
+        default: undefined;
+        type: PropType<"xs" | "sm" | "md">;
+    };
     placeholder: {
         default: string;
         type: StringConstructor;
@@ -38,6 +46,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
         type: StringConstructor;
     };
+    visibleFocus: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -49,6 +61,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
         type: StringConstructor;
     };
+    class: {
+        default: string;
+        type: PropType<string | string[]>;
+    };
+    size: {
+        default: undefined;
+        type: PropType<"xs" | "sm" | "md">;
+    };
     placeholder: {
         default: string;
         type: StringConstructor;
@@ -77,16 +97,23 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
         type: StringConstructor;
     };
+    visibleFocus: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
+    class: string | string[];
     required: boolean;
     name: string;
+    size: "xs" | "sm" | "md";
     options: Option[];
     modelValue: SelectOption | undefined;
     placeholder: string;
     disabled: boolean;
     hasError: boolean;
+    visibleFocus: boolean;
     labelKey: string;
     valueKey: string;
 }, {}>, {

package/dist/types/src/components/BaseSideNavigation.vue.d.ts

@@ -1,15 +1,15 @@
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     size: {
-        type: import("vue").PropType<"xs" | "sm" | "lg" | "md">;
+        type: import("vue").PropType<"xs" | "sm" | "md" | "lg">;
         default: string;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     size: {
-        type: import("vue").PropType<"xs" | "sm" | "lg" | "md">;
+        type: import("vue").PropType<"xs" | "sm" | "md" | "lg">;
         default: string;
     };
 }>>, {
-    size: "xs" | "sm" | "lg" | "md";
+    size: "xs" | "sm" | "md" | "lg";
 }, {}>, {
     default?(_: {}): any;
 }>;

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

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

package/dist/types/src/components/BaseTable.vue.d.ts

@@ -199,8 +199,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     "onCell-click"?: ((...args: any[]) => any) | undefined;
 }, {
     data: Row[];
-    loading: boolean;
     size: "sm" | "md";
+    loading: boolean;
     sortField: string;
     sortDirection: string;
     visibleColumns: number[];

package/dist/types/src/components/BaseTabs.vue.d.ts

@@ -1,15 +1,15 @@
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     size: {
-        type: import("vue").PropType<"xs" | "sm" | "lg" | "md">;
+        type: import("vue").PropType<"xs" | "sm" | "md" | "lg">;
         default: string;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     size: {
-        type: import("vue").PropType<"xs" | "sm" | "lg" | "md">;
+        type: import("vue").PropType<"xs" | "sm" | "md" | "lg">;
         default: string;
     };
 }>>, {
-    size: "xs" | "sm" | "lg" | "md";
+    size: "xs" | "sm" | "md" | "lg";
 }, {}>, {
     default?(_: {}): any;
 }>;

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

@@ -64,7 +64,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     size: {
         default: string;
-        type: PropType<"base" | "xs" | "sm">;
+        type: PropType<"xs" | "sm" | "md">;
     };
     dropdownShow: {
         default: string;
@@ -149,7 +149,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     size: {
         default: string;
-        type: PropType<"base" | "xs" | "sm">;
+        type: PropType<"xs" | "sm" | "md">;
     };
     dropdownShow: {
         default: string;
@@ -173,6 +173,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     filter: (option: NormalizedOption) => boolean;
     required: boolean;
     name: string;
+    size: "xs" | "sm" | "md";
     inline: boolean;
     placeholder: string;
     disabled: boolean;
@@ -180,7 +181,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     max: number;
     loading: boolean;
     loadingBottom: boolean;
-    size: "base" | "xs" | "sm";
     dropdownShow: "always" | "focus";
     focusOnMount: boolean;
     twContainer: string | string[];

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

@@ -10,6 +10,14 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    size: {
+        default: undefined;
+        type: PropType<"xs" | "sm" | "md">;
+    };
+    class: {
+        default: string;
+        type: PropType<string | string[]>;
+    };
     autocomplete: {
         default: boolean;
         type: BooleanConstructor;
@@ -56,6 +64,14 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    size: {
+        default: undefined;
+        type: PropType<"xs" | "sm" | "md">;
+    };
+    class: {
+        default: string;
+        type: PropType<string | string[]>;
+    };
     autocomplete: {
         default: boolean;
         type: BooleanConstructor;
@@ -91,9 +107,11 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
+    class: string | string[];
     type: string;
     required: boolean;
     name: string;
+    size: "xs" | "sm" | "md";
     modelValue: string | null | undefined;
     autocomplete: boolean;
     preventSubmit: boolean;

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

@@ -18,6 +18,10 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    size: {
+        default: undefined;
+        type: PropType<"xs" | "sm" | "md">;
+    };
     maxHeight: {
         default: number;
         type: NumberConstructor;
@@ -71,6 +75,10 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    size: {
+        default: undefined;
+        type: PropType<"xs" | "sm" | "md">;
+    };
     maxHeight: {
         default: number;
         type: NumberConstructor;
@@ -106,6 +114,7 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     required: boolean;
+    size: "xs" | "sm" | "md";
     modelValue: string | null;
     placeholder: string;
     disabled: boolean;

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

@@ -1,9 +1,11 @@
+import { Size } from '@/utils/sizes';
 import { Ref } from 'vue';
 interface Config {
     name: Ref<string | null | undefined>;
     required: Ref<boolean>;
     hasError: Ref<boolean | undefined>;
     emit: any;
+    size?: Ref<Size | undefined>;
     errorType?: string;
     labelClass?: string;
 }
@@ -12,6 +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">;
     emitUpdate: (value: any) => void;
     enableForm: () => void;
     disableForm: () => void;

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

@@ -0,0 +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">;
+};
+export { useInputSize };

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

@@ -0,0 +1,19 @@
+declare const sizes: {
+    xs: {
+        fontSize: string;
+        height: string;
+        iconSize: string;
+    };
+    sm: {
+        fontSize: string;
+        height: string;
+        iconSize: string;
+    };
+    md: {
+        fontSize: string;
+        height: string;
+        iconSize: string;
+    };
+};
+type Size = keyof typeof sizes;
+export { sizes, Size };

package/package.json

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

package/src/assets/form.css

@@ -2,5 +2,5 @@
 
 input,
 textarea {
-  @apply placeholder:text-slate-500 placeholder:font-light;
+  @apply placeholder:text-slate-400 placeholder:font-light;
 }

package/src/components/BaseAddressForm.stories.js

@@ -4,7 +4,12 @@ import ShowValue from '../../.storybook/components/ShowValue.vue';
 export default {
   title: 'Form/BaseAddressForm',
   component: BaseAddressForm,
-  argTypes: {},
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['xs', 'sm', 'md'],
+    },
+  },
   args: {
     countries: [
       { name: 'United States', id: 'us' },
@@ -37,7 +42,7 @@ const Template = (args) => ({
         address_2: 'Suite 100',
         city: 'Montreal',
         country: 'ca',
-        region: 'qc',
+        region: 'ca-qc',
         postal_code: 'H2X 4E3',
       },
     });

package/src/components/BaseAddressForm.vue

@@ -1,41 +1,49 @@
 <template>
-  <BaseField
-    :label="t('sui.address')"
-    :name="`${namePrefix}address_1`"
-    class="mb-2"
-    :required="required"
+  <div
+    class="grid grid-cols-2"
+    :class="baseClasses"
   >
-    <BaseInput
-      ref="address1Ref"
-      :model-value="normalizedModelValue.address_1 ?? ''"
-      :placeholder="t('sui.address_1_placeholder')"
-      class="w-full"
-      prevent-submit
-      name="address_search_field"
-      :autocomplete="false"
-      @update:model-value="update('address_1', $event)"
-    />
-  </BaseField>
-
-  <BaseField
-    :name="`${namePrefix}address_2`"
-    class="mb-4"
-    :required="false"
-  >
-    <BaseInput
-      :model-value="normalizedModelValue.address_2 ?? ''"
-      :placeholder="t('sui.address_2_description')"
-      class="w-full"
-      @update:model-value="update('address_2', $event)"
-    />
-  </BaseField>
-
-  <div class="sm:flex sm:space-x-3">
+    <div class="flex flex-col gap-1 col-span-2">
+      <BaseField
+        :label="t('sui.address')"
+        :name="`${namePrefix}address_1`"
+        class="col-span-2"
+        :required="required"
+        :size="size"
+      >
+        <BaseInput
+          ref="address1Ref"
+          :model-value="normalizedModelValue.address_1 ?? ''"
+          :placeholder="t('sui.address_1_placeholder')"
+          class="w-full"
+          prevent-submit
+          name="address_search_field"
+          :autocomplete="false"
+          @update:model-value="update('address_1', $event)"
+        />
+      </BaseField>
+
+      <BaseField
+        :name="`${namePrefix}address_2`"
+        class="col-span-2"
+        :required="false"
+        :size="size"
+      >
+        <BaseInput
+          :model-value="normalizedModelValue.address_2 ?? ''"
+          :placeholder="t('sui.address_2_description')"
+          class="w-full"
+          @update:model-value="update('address_2', $event)"
+        />
+      </BaseField>
+    </div>
+
     <BaseField
       :label="t('sui.city')"
       :required="required"
       :name="`${namePrefix}city`"
-      class="mb-4 flex-1"
+      class="col-span-2 || sm:col-span-1"
+      :size="size"
     >
       <BaseInput
         :model-value="normalizedModelValue.city ?? ''"
@@ -43,11 +51,13 @@
         @update:model-value="update('city', $event)"
       />
     </BaseField>
+
     <BaseField
       :label="t('sui.postal_code_zip_code')"
       :required="required"
       :name="`${namePrefix}postal_code`"
-      class="mb-4 flex-1"
+      class="col-span-2 || sm:col-span-1"
+      :size="size"
     >
       <BaseInput
         :model-value="normalizedModelValue.postal_code ?? ''"
@@ -55,14 +65,14 @@
         @update:model-value="update('postal_code', $event)"
       />
     </BaseField>
-  </div>
-  <div class="sm:flex sm:space-x-3">
+
     <BaseField
       v-if="!props.hideCountry"
       :label="t('sui.country')"
       :name="`${namePrefix}country`"
       :required="required"
-      class="mb-4 flex-1"
+      class="col-span-2 || sm:col-span-1"
+      :size="size"
     >
       <BaseSelect
         :model-value="normalizedModelValue.country ?? ''"
@@ -74,17 +84,20 @@
         @update:model-value="update('country', $event)"
       />
     </BaseField>
+
     <BaseField
       v-if="!props.hideRegion"
       :label="t('sui.region')"
       :name="`${namePrefix}region`"
       :required="required"
-      class="mb-4 flex-1"
+      class="col-span-2 || sm:col-span-1"
+      :size="size"
     >
       <BaseSelect
         :model-value="normalizedModelValue.region ?? ''"
         class="w-full"
         :options="regions"
+        :placeholder="t('sui.region')"
         label-key="name"
         value-key="id"
         @update:model-value="update('region', $event)"
@@ -103,6 +116,8 @@ import BaseInput from './BaseInput.vue';
 import BaseSelect from './BaseSelect.vue';
 import { t } from '@/i18n';
 import { config } from '..';
+import { Size } from '@/utils/sizes';
+import { useInputSize } from '@/composables/inputSize';
 
 const DEFAULT_COUNTRY = 'ca';
 
@@ -123,6 +138,7 @@ const props = withDefaults(
     countries?: Country[];
     regions?: Region[];
     restrictCountry?: boolean;
+    size?: Size;
     hideRegion?: boolean;
     hideCountry?: boolean;
   }>(),
@@ -138,6 +154,7 @@ const props = withDefaults(
       return [];
     },
     restrictCountry: false,
+    size: undefined,
     hideRegion: false,
     hideCountry: false,
   }
@@ -145,6 +162,8 @@ const props = withDefaults(
 
 const emit = defineEmits(['update:model-value']);
 
+const { size } = useInputSize(computed(() => props.size));
+
 const normalizedModelValue = computed((): Address => {
   const form = cloneDeep(props.modelValue ?? {}) as Address;
   form.address_1 = form.address_1 ?? '';
@@ -322,4 +341,12 @@ function fillAddress() {
     emit('update:model-value', newForm);
   });
 }
+
+const baseClasses = computed(() => {
+  return {
+    'xs': 'gap-y-2 gap-x-1',
+    'sm': 'gap-y-2.5 gap-x-1.5',
+    'md': 'gap-y-3 gap-x-2',
+  }[size.value]
+});
 </script>

package/src/components/BaseAutocomplete.stories.js

@@ -3,7 +3,7 @@ import BaseAutocomplete from './BaseAutocomplete.vue';
 import ShowValue from '@/../.storybook/components/ShowValue.vue';
 import { computed } from 'vue';
 
-const sizes = ['xs', 'sm', 'base'];
+const sizes = ['xs', 'sm', 'md'];
 
 export default {
   title: 'Form/BaseAutocomplete',