sprintify-ui 0.6.62 → 0.6.64

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

@@ -47,6 +47,10 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
+    requiredFields: {
+        type: import("vue").PropType<(keyof Address)[]>;
+        default: () => string[];
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:model-value": (...args: any[]) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -87,6 +91,10 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
+    requiredFields: {
+        type: import("vue").PropType<(keyof Address)[]>;
+        default: () => string[];
+    };
 }>> & {
     "onUpdate:model-value"?: ((...args: any[]) => any) | undefined;
 }, {
@@ -98,5 +106,6 @@ declare const _default: import("vue").DefineComponent<{
     restrictCountry: boolean;
     hideRegion: boolean;
     hideCountry: boolean;
+    requiredFields: (keyof Address)[];
 }, {}>;
 export default _default;

package/package.json

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

package/src/components/BaseAddressForm.stories.js

@@ -55,7 +55,8 @@ const Template = (args) => ({
 });
 
 export const Demo = Template.bind({});
-Demo.args = {};
+Demo.args = {
+};
 
 export const Required = Template.bind({});
 Required.args = {

package/src/components/BaseAddressForm.vue

@@ -8,7 +8,7 @@
         :label="t('sui.address')"
         :name="`${namePrefix}address_1`"
         class="col-span-2"
-        :required="required"
+        :required="requiredFields.includes('address_1')"
         :size="size"
       >
         <BaseInput
@@ -26,7 +26,7 @@
       <BaseField
         :name="`${namePrefix}address_2`"
         class="col-span-2"
-        :required="false"
+        :required="requiredFields.includes('address_2')"
         :size="size"
       >
         <BaseInput
@@ -40,7 +40,7 @@
 
     <BaseField
       :label="t('sui.city')"
-      :required="required"
+      :required="requiredFields.includes('city')"
       :name="`${namePrefix}city`"
       class="col-span-2 || sm:col-span-1"
       :size="size"
@@ -54,7 +54,7 @@
 
     <BaseField
       :label="t('sui.postal_code_zip_code')"
-      :required="required"
+      :required="requiredFields.includes('postal_code')"
       :name="`${namePrefix}postal_code`"
       class="col-span-2 || sm:col-span-1"
       :size="size"
@@ -70,7 +70,7 @@
       v-if="!props.hideCountry"
       :label="t('sui.country')"
       :name="`${namePrefix}country`"
-      :required="required"
+      :required="requiredFields.includes('country') && !props.restrictCountry"
       class="col-span-2 || sm:col-span-1"
       :size="size"
     >
@@ -89,7 +89,7 @@
       v-if="!props.hideRegion"
       :label="t('sui.region')"
       :name="`${namePrefix}region`"
-      :required="required"
+      :required="requiredFields.includes('region')"
       class="col-span-2 || sm:col-span-1"
       :size="size"
     >
@@ -141,6 +141,7 @@ const props = withDefaults(
     size?: Size;
     hideRegion?: boolean;
     hideCountry?: boolean;
+    requiredFields?: (keyof Address)[];
   }>(),
   {
     modelValue() {
@@ -157,6 +158,9 @@ const props = withDefaults(
     size: undefined,
     hideRegion: false,
     hideCountry: false,
+    requiredFields() {
+      return ['address_1', 'city', 'postal_code', 'country', 'region'];
+    }
   }
 );
 

package/src/components/BaseDatePicker.vue

@@ -25,7 +25,7 @@
     >
     <div
       v-if="modelValueFormatted && !disabled && showInput"
-      class="absolute top-0 right-0 h-full flex p-1"
+      :class="closeWrapClasses"
     >
       <button
         type="button"
@@ -43,7 +43,7 @@
 
 <script lang="ts" setup>
 import { Ref } from 'vue';
-import { isArray, isEqual } from 'lodash';
+import { isArray, isEqual, size } from 'lodash';
 import { DateTime } from 'luxon';
 import { Icon as BaseIcon } from '@iconify/vue';
 import { useField } from '@/composables/field';
@@ -307,7 +307,7 @@ const classes = computed(() => {
   const disabled = 'disabled:cursor-not-allowed disabled:text-slate-300';
   const sizeConfig = sizes[sizeInternal.value];
   const padding = {
-    'xs': 'pl-6 pr-5',
+    'xs': 'pl-[1.54rem] pr-5',
     'sm': 'pl-[2.1rem] pr-6',
     'md': 'pl-10 pr-7',
   }[sizeInternal.value];
@@ -327,7 +327,8 @@ const classes = computed(() => {
 });
 
 const iconWrapClasses = computed(() => {
-  const base = 'pointer-events-none absolute top-0 left-0 h-full flex items-center justify-center';
+  const base = 'pointer-events-none absolute top-0 left-0 flex items-center justify-center';
+  const sizeConfig = sizes[sizeInternal.value];
   const padding = {
     'xs': 'pl-2',
     'sm': 'pl-2.5',
@@ -336,10 +337,21 @@ const iconWrapClasses = computed(() => {
 
   return twMerge(
     base,
+    sizeConfig.height,
     padding
   );
 });
 
+const closeWrapClasses = computed(() => {
+  const base = 'absolute top-0 right-0 flex justify-center p-1';
+  const sizeConfig = sizes[sizeInternal.value];
+
+  return twMerge(
+    base,
+    sizeConfig.height,
+  );
+});
+
 const iconClasses = computed(() => {
   const base = '';
   const error = hasErrorInternal.value ? 'text-red-500' : 'text-slate-500';