vueless 0.0.579 → 0.0.580

package/ui.form-date-picker/UDatePicker.vue

@@ -1,47 +1,43 @@
 <script setup lang="ts" generic="TModelValue extends string | Date">
-import { computed, nextTick, ref, useId, useTemplateRef } from "vue";
+import { computed, nextTick, ref, useId, useTemplateRef, watchEffect } from "vue";
 import { merge } from "lodash-es";
 
+import useUI from "../composables/useUI.ts";
+
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UInput from "../ui.form-input/UInput.vue";
 import UCalendar from "../ui.form-calendar/UCalendar.vue";
 import { View, LocaleType, ARROW_KEYS, TOKEN_REG_EXP } from "../ui.form-calendar/constants.ts";
 
-import { getDefault } from "../utils/ui.ts";
+import { getDefaults } from "../utils/ui.ts";
 
 import { getSortedLocale } from "../ui.form-calendar/utilDate.ts";
 import { formatDate, parseDate } from "../ui.form-calendar/utilCalendar.ts";
 
-import useAttrs from "./useAttrs.js";
 import { useLocale } from "../composables/useLocale.ts";
-import { useAutoPosition } from "../composables/useAutoPosition.ts";
+import { Direction, useAutoPosition } from "../composables/useAutoPosition.ts";
 
 import defaultConfig from "./config.ts";
 import { UDatePicker } from "./constants.ts";
 
 import { vClickOutside } from "../directives";
 
-import type { UDatePickerProps } from "./types.ts";
-import type { ComponentExposed } from "../types.ts";
+import type { ComputedRef } from "vue";
+import type { UDatePickerProps, Config, Locale } from "./types.ts";
+import type { ComponentExposed, Transition } from "../types.ts";
+import type { Config as UCalendarConfig } from "../ui.form-calendar/types.ts";
 import type { DateLocale } from "../ui.form-calendar/utilFormatting.ts";
 
 defineOptions({ inheritAttrs: false });
 
 type Props = UDatePickerProps<TModelValue>;
 const props = withDefaults(defineProps<Props>(), {
-  labelAlign: getDefault<Props>(defaultConfig, UDatePicker).labelAlign,
-  size: getDefault<Props>(defaultConfig, UDatePicker).size,
-  openDirectionX: getDefault<Props>(defaultConfig, UDatePicker).openDirectionX,
-  openDirectionY: getDefault<Props>(defaultConfig, UDatePicker).openDirectionY,
-  timepicker: getDefault<Props>(defaultConfig, UDatePicker).timepicker,
-  dateFormat: getDefault<Props>(defaultConfig, UDatePicker).dateFormat,
-  dateTimeFormat: getDefault<Props>(defaultConfig, UDatePicker).dateTimeFormat,
-  userDateFormat: getDefault<Props>(defaultConfig, UDatePicker).userDateFormat,
-  userDateTimeFormat: getDefault<Props>(defaultConfig, UDatePicker).userDateTimeFormat,
-  rightIcon: getDefault<Props>(defaultConfig, UDatePicker).rightIcon,
-  disabled: getDefault<Props>(defaultConfig, UDatePicker).disabled,
-  dataTest: "",
-  config: () => ({}),
+  ...getDefaults<Props, Config>(defaultConfig, UDatePicker),
+  modelValue: undefined,
+  minDate: undefined,
+  maxDate: undefined,
+  placeholder: "",
+  label: "",
 });
 
 const emit = defineEmits([
@@ -85,7 +81,9 @@ const localValue = computed({
   set: (value) => emit("update:modelValue", value),
 });
 
-const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
+const currentLocale: ComputedRef<Locale> = computed(() =>
+  merge(defaultConfig.i18n, i18nGlobal, props.config.i18n),
+);
 
 const clickOutsideOptions = computed(() => ({ ignore: [datepickerInputRef.value?.inputRef] }));
 
@@ -108,12 +106,6 @@ const locale = computed(() => {
 
 const elementId = props.id || useId();
 
-const { config, datepickerInputAttrs, datepickerInputActiveAttrs, calendarAttrs, wrapperAttrs } =
-  useAttrs(props, {
-    isTop,
-    isRight,
-  });
-
 function activate() {
   isShownCalendar.value = true;
 
@@ -248,6 +240,29 @@ defineExpose({
    */
   formattedDate,
 });
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const mutatedProps = computed(() => ({
+  openDirectionY: isTop.value ? Direction.Top : Direction.Bottom,
+  openDirectionX: isRight.value ? Direction.Right : Direction.Left,
+  error: Boolean(props.error),
+  description: Boolean(props.description),
+}));
+
+const { config, datepickerInputAttrs, datepickerInputActiveAttrs, calendarAttrs, wrapperAttrs } =
+  useUI<Config>(defaultConfig, mutatedProps);
+
+/* Merging DatePicker's i18n translations into Calendar's i18n translations. */
+watchEffect(() => {
+  const calendarConfig = calendarAttrs.value.config as unknown as UCalendarConfig;
+
+  if (!calendarConfig?.i18n || props.config?.i18n) {
+    calendarConfig.i18n = merge(calendarConfig.i18n, config.value.i18n);
+  }
+});
 </script>
 
 <template>
@@ -305,7 +320,7 @@ defineExpose({
       </template>
     </UInput>
 
-    <Transition v-bind="config.calendarTransition">
+    <Transition v-bind="config.calendarTransition as Transition">
       <UCalendar
         v-show="isShownCalendar"
         ref="calendar"

package/ui.form-date-picker/config.ts

@@ -117,18 +117,18 @@ export default /*tw*/ {
     okLabel: "Ok",
   },
   defaults: {
+    size: "md",
     userDateFormat: "r j F, Y",
     userDateTimeFormat: "r j F, Y - H:i:S",
-    size: "md",
+    dateFormat: undefined,
+    dateTimeFormat: undefined,
     openDirectionX: "auto",
     openDirectionY: "auto",
     labelAlign: "topInside",
-    timepicker: false,
-    disabled: false,
-    dateFormat: undefined,
-    dateTimeFormat: undefined,
     maxDate: undefined,
     minDate: undefined,
+    timepicker: false,
+    disabled: false,
     /* icons */
     rightIcon: "calendar_month-fill",
   },

package/ui.form-date-picker/types.ts

@@ -1,6 +1,9 @@
 import defaultConfig from "./config.ts";
 
-export type Config = Partial<typeof defaultConfig>;
+import type { ComponentConfig } from "../types.ts";
+
+export type Locale = typeof defaultConfig.i18n;
+export type Config = typeof defaultConfig;
 
 export interface UDatePickerProps<TModelValue> {
   /**
@@ -106,7 +109,7 @@ export interface UDatePickerProps<TModelValue> {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.form-date-picker-range/UDatePickerRange.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts" generic="TModelValue extends RangeDate">
-import { computed, watch, ref, nextTick, provide, useId, useTemplateRef } from "vue";
-import { getDefault } from "../utils/ui.ts";
+import { computed, watch, ref, nextTick, provide, useId, useTemplateRef, watchEffect } from "vue";
+
+import { merge } from "lodash-es";
+
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UInput from "../ui.form-input/UInput.vue";
@@ -36,8 +40,7 @@ import {
   type DatePeriodRange,
 } from "./utilDateRange.ts";
 
-import useAttrs from "./useAttrs.ts";
-import { useAutoPosition } from "../composables/useAutoPosition.ts";
+import { Direction, useAutoPosition } from "../composables/useAutoPosition.ts";
 import { useLocale } from "./useLocale.ts";
 import { useUserFormat } from "./useUserFormat.ts";
 
@@ -59,31 +62,22 @@ import type {
   UDatePickerRangeProps,
   UDatePickerRangeInputsAttrs,
   UDatePickerRangePeriodMenuAttrs,
+  Config,
 } from "./types.ts";
-import type { RangeDate } from "../ui.form-calendar/types.ts";
+import type { RangeDate, Config as UCalendarConfig } from "../ui.form-calendar/types.ts";
 import type { ComponentExposed } from "../types.ts";
 
 defineOptions({ inheritAttrs: false });
 
 type Props = UDatePickerRangeProps<TModelValue>;
 const props = withDefaults(defineProps<Props>(), {
-  openDirectionX: getDefault<Props>(defaultConfig, UDatePickerRange).openDirectionX,
-  openDirectionY: getDefault<Props>(defaultConfig, UDatePickerRange).openDirectionY,
-  variant: getDefault<Props>(defaultConfig, UDatePickerRange).variant,
-  dateFormat: getDefault<Props>(defaultConfig, UDatePickerRange).dateFormat,
-  userDateFormat: getDefault<Props>(defaultConfig, UDatePickerRange).userDateFormat,
-  size: getDefault<Props>(defaultConfig, UDatePickerRange).size,
-  rightIcon: getDefault<Props>(defaultConfig, UDatePickerRange).rightIcon,
-  labelAlign: getDefault<Props>(defaultConfig, UDatePickerRange).labelAlign,
-  disabled: getDefault<Props>(defaultConfig, UDatePickerRange).disabled,
-  customRangeButton: () => ({
-    range: { from: null, to: null },
-    label: "",
-    description: "",
-  }),
-  id: "",
-  dataTest: "",
-  config: () => ({}),
+  ...getDefaults<Props, Config>(defaultConfig, UDatePickerRange),
+  customRangeButton: () => ({ range: { from: null, to: null } }),
+  modelValue: undefined,
+  minDate: undefined,
+  maxDate: undefined,
+  placeholder: "",
+  label: "",
 });
 
 const emit = defineEmits([
@@ -219,34 +213,6 @@ const clickOutsideOptions = computed(() => {
   };
 });
 
-const {
-  config,
-  wrapperAttrs,
-  calendarAttrs,
-  datepickerInputAttrs,
-  menuAttrs,
-  buttonWrapperAttrs,
-  buttonAttrs,
-  shiftRangeButtonAttrs,
-  rangeInputWrapperAttrs,
-  rangeInputErrorAttrs,
-  datepickerActiveInputAttrs,
-  rangeInputFirstAttrs,
-  rangeInputLastAttrs,
-  periodRowAttrs,
-  periodButtonAttrs,
-  periodButtonActiveAttrs,
-  periodDateAttrs,
-  periodDateCurrentAttrs,
-  periodDateSelectedAttrs,
-  periodDateCurrentSelectedAttrs,
-  periodDateListAttrs,
-  rangeSwitchButtonAttrs,
-  rangeSwitchTitleAttrs,
-  rangeSwitchWrapperAttrs,
-  customRangeDescriptionAttrs,
-} = useAttrs(props, { isShownMenu, isTop, isRight, isPeriod });
-
 const { userFormatDate } = useUserFormat(
   localValue,
   userFormatLocale,
@@ -319,7 +285,14 @@ function isDatePeriodOutOfRange(datePeriod: DatePeriodRange) {
       props.maxDate,
       locale.value,
       props.dateFormat,
-    ) || dateIsOutOfRange(datePeriod.endRange, props.minDate, props.maxDate, props.dateFormat)
+    ) ||
+    dateIsOutOfRange(
+      datePeriod.endRange,
+      props.minDate,
+      props.maxDate,
+      locale.value,
+      props.dateFormat,
+    )
   );
 }
 
@@ -549,6 +522,60 @@ function onMouseoverCalendar() {
 function onInputCalendar(value: RangeDate) {
   calendarInnerValue.value = value;
 }
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const mutatedProps = computed(() => ({
+  openDirectionY: isTop.value ? Direction.Top : Direction.Bottom,
+  openDirectionX: isRight.value ? Direction.Right : Direction.Left,
+  error: Boolean(props.error),
+  description: Boolean(props.description),
+  /* component state, not a props */
+  opened: isShownMenu.value,
+  week: isPeriod.value.week,
+  month: isPeriod.value.month,
+  quarter: isPeriod.value.quarter,
+  year: isPeriod.value.year,
+}));
+
+const {
+  config,
+  wrapperAttrs,
+  calendarAttrs,
+  datepickerInputAttrs,
+  menuAttrs,
+  buttonWrapperAttrs,
+  buttonAttrs,
+  shiftRangeButtonAttrs,
+  rangeInputWrapperAttrs,
+  rangeInputErrorAttrs,
+  datepickerActiveInputAttrs,
+  rangeInputFirstAttrs,
+  rangeInputLastAttrs,
+  periodRowAttrs,
+  periodButtonAttrs,
+  periodButtonActiveAttrs,
+  periodDateAttrs,
+  periodDateCurrentAttrs,
+  periodDateSelectedAttrs,
+  periodDateCurrentSelectedAttrs,
+  periodDateListAttrs,
+  rangeSwitchButtonAttrs,
+  rangeSwitchTitleAttrs,
+  rangeSwitchWrapperAttrs,
+  customRangeDescriptionAttrs,
+} = useUI<Config>(defaultConfig, mutatedProps);
+
+/* Merging DatePickerRange's i18n translations into Calendar's i18n translations. */
+watchEffect(() => {
+  const calendarConfig = calendarAttrs.value.config as unknown as UCalendarConfig;
+
+  if (!calendarConfig.i18n || props.config?.i18n) {
+    calendarConfig.i18n = merge(calendarConfig.i18n, config.value.i18n);
+  }
+});
 </script>
 
 <template>
@@ -607,7 +634,7 @@ function onInputCalendar(value: RangeDate) {
         :size="size"
         :disabled="disabled"
         variant="thirdary"
-        :left-icon="config.defaults?.prevIcon"
+        :left-icon="config.defaults.prevIcon"
         v-bind="shiftRangeButtonAttrs"
         @click="onClickShiftRange(ShiftAction.Prev)"
       />
@@ -634,7 +661,7 @@ function onInputCalendar(value: RangeDate) {
         :size="size"
         :disabled="disabled"
         variant="thirdary"
-        :left-icon="config.defaults?.nextIcon"
+        :left-icon="config.defaults.nextIcon"
         v-bind="shiftRangeButtonAttrs"
         @click="onClickShiftRange(ShiftAction.Next)"
       />

package/ui.form-date-picker-range/types.ts

@@ -1,12 +1,12 @@
 import defaultConfig from "./config.ts";
 import { ShiftAction } from "./constants.ts";
 
-import type { UnknownObject } from "../types.ts";
-import type { DatePeriodRange } from "./utilDateRange.ts";
 import type { Ref } from "vue";
+import type { UnknownObject, ComponentConfig } from "../types.ts";
+import type { DatePeriodRange } from "./utilDateRange.ts";
 
 export type Locale = typeof defaultConfig.i18n;
-export type Config = Partial<typeof defaultConfig>;
+export type Config = typeof defaultConfig;
 export type IsDatePeriodOutOfRange = (datePeriod: DatePeriodRange) => boolean;
 export type ShiftActions = `${ShiftAction}`;
 
@@ -19,6 +19,9 @@ export interface SortedLocale extends Omit<Locale, "weekdays" | "months"> {
     shorthand: string[];
     longhand: string[];
   };
+  today: string;
+  tomorrow: string;
+  yesterday: string;
 }
 
 export interface IsPeriod {
@@ -184,7 +187,7 @@ export interface UDatePickerRangeProps<TModelValue> {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.form-input/UInput.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, useSlots, useId } from "vue";
 
-import { getDefault } from "../utils/ui.ts";
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
 import { hasSlotContent } from "../utils/helper.ts";
 import { useMutationObserver } from "../composables/useMutationObserver.ts";
 
@@ -10,24 +11,16 @@ import ULabel from "../ui.form-label/ULabel.vue";
 
 import defaultConfig from "./config.ts";
 import { UInput } from "./constants.ts";
-import useAttrs from "./useAttrs.ts";
 
-import type { UInputProps, IconSize } from "./types.ts";
+import type { Props, IconSize, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<UInputProps>(), {
-  labelAlign: getDefault<UInputProps>(defaultConfig, UInput).labelAlign,
-  size: getDefault<UInputProps>(defaultConfig, UInput).size,
-  validationRule: getDefault<UInputProps>(defaultConfig, UInput).validationRule,
-  type: getDefault<UInputProps>(defaultConfig, UInput).type,
-  inputmode: getDefault<UInputProps>(defaultConfig, UInput).inputmode,
-  readonly: getDefault<UInputProps>(defaultConfig, UInput).readonly,
-  disabled: getDefault<UInputProps>(defaultConfig, UInput).disabled,
-  noAutocomplete: getDefault<UInputProps>(defaultConfig, UInput).noAutocomplete,
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, UInput),
   modelValue: "",
-  dataTest: "",
-  config: () => ({}),
+  label: "",
+  placeholder: "",
 });
 
 const emit = defineEmits([
@@ -109,18 +102,6 @@ const applyPasswordClasses = computed(() => {
 
 const elementId = props.id || useId();
 
-const {
-  config,
-  inputAttrs,
-  wrapperAttrs,
-  inputLabelAttrs,
-  passwordIconAttrs,
-  leftIconWrapperAttrs,
-  leftIconAttrs,
-  rightIconAttrs,
-  rightIconWrapperAttrs,
-} = useAttrs(props, { applyPasswordClasses });
-
 const iconSize = computed(() => {
   const sizes = {
     sm: "xs",
@@ -137,8 +118,8 @@ const inputType = computed(() => {
 
 const passwordIcon = computed(() => {
   return isShownPassword.value
-    ? config.value?.defaults?.passwordVisibleIcon || ""
-    : config.value?.defaults?.passwordHiddenIcon || "";
+    ? config.value.defaults.passwordVisibleIcon || ""
+    : config.value.defaults.passwordHiddenIcon || "";
 });
 
 onMounted(() => {
@@ -256,6 +237,29 @@ defineExpose({
    */
   inputRef,
 });
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const mutatedProps = computed(() => ({
+  error: Boolean(props.error),
+  label: Boolean(props.label),
+  /* component state, not a props */
+  typePassword: applyPasswordClasses.value,
+}));
+
+const {
+  config,
+  inputAttrs,
+  wrapperAttrs,
+  inputLabelAttrs,
+  passwordIconAttrs,
+  leftIconWrapperAttrs,
+  leftIconAttrs,
+  rightIconAttrs,
+  rightIconWrapperAttrs,
+} = useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
 <template>

package/ui.form-input/storybook/stories.ts

@@ -11,9 +11,9 @@ import UButton from "../../ui.button/UButton.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { UInputProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface UInputArgs extends UInputProps {
+interface UInputArgs extends Props {
   slotTemplate?: string;
   enum: "labelAlign" | "size" | "validationRule";
 }

package/ui.form-input/types.ts

@@ -1,10 +1,12 @@
 import defaultConfig from "./config.ts";
 
-export type Config = Partial<typeof defaultConfig>;
+import type { ComponentConfig } from "../types.ts";
+
+export type Config = typeof defaultConfig;
 
 export type IconSize = "xs" | "sm" | "md";
 
-export interface UInputProps {
+export interface Props {
   /**
    * Input value.
    */
@@ -94,7 +96,7 @@ export interface UInputProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.form-input-file/UInputFile.vue

@@ -2,34 +2,30 @@
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch, useId } from "vue";
 import { merge } from "lodash-es";
 
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
+import { hasSlotContent } from "../utils/helper.ts";
+import { getFileMbSize } from "./utilFileForm.ts";
+
 import UText from "../ui.text-block/UText.vue";
 import ULabel from "../ui.form-label/ULabel.vue";
 import UButton from "../ui.button/UButton.vue";
 import UFiles from "../ui.text-files/UFiles.vue";
 
-import { getDefault } from "../utils/ui.ts";
-import { hasSlotContent } from "../utils/helper.ts";
-import { getFileMbSize } from "./utilFileForm.ts";
-
-import useAttrs from "./useAttrs.ts";
 import { useLocale } from "../composables/useLocale.ts";
 
 import { UInputFile } from "./constants.ts";
 import defaultConfig from "./config.ts";
 
-import type { UInputFileProps, ButtonSize } from "./types.ts";
+import type { Props, ButtonSize, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<UInputFileProps>(), {
-  labelAlign: getDefault<UInputFileProps>(defaultConfig, UInputFile).labelAlign,
-  size: getDefault<UInputFileProps>(defaultConfig, UInputFile).size,
-  maxFileSize: getDefault<UInputFileProps>(defaultConfig, UInputFile).maxFileSize,
-  allowedFileTypes: getDefault<UInputFileProps>(defaultConfig, UInputFile).allowedFileTypes,
-  multiple: getDefault<UInputFileProps>(defaultConfig, UInputFile).multiple,
-  disabled: getDefault<UInputFileProps>(defaultConfig, UInputFile).disabled,
-  dataTest: "",
-  config: () => ({}),
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, UInputFile),
+  modelValue: () => [],
+  allowedFileTypes: () => [],
+  label: "",
 });
 
 const emit = defineEmits([
@@ -53,21 +49,6 @@ const fileInputRef = ref<HTMLInputElement | null>(null);
 
 const elementId = props.id || useId();
 
-const {
-  config,
-  inputLabelAttrs,
-  chooseFileButtonAttrs,
-  dropzoneAttrs,
-  descriptionTopAttrs,
-  descriptionBottomAttrs,
-  contentAttrs,
-  clearButtonAttrs,
-  placeholderAttrs,
-  inputAttrs,
-  fileListAttrs,
-  buttonsAttrs,
-} = useAttrs(props);
-
 const i18nGlobal = tm(UInputFile);
 const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
 
@@ -265,6 +246,30 @@ function onClickRemoveItem(id: string | number) {
     currentFiles.value = currentFiles.value.filter((file) => file.name !== id);
   }
 }
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const mutatedProps = computed(() => ({
+  error: Boolean(props.error),
+  label: Boolean(props.label),
+}));
+
+const {
+  config,
+  inputLabelAttrs,
+  chooseFileButtonAttrs,
+  dropzoneAttrs,
+  descriptionTopAttrs,
+  descriptionBottomAttrs,
+  contentAttrs,
+  clearButtonAttrs,
+  placeholderAttrs,
+  inputAttrs,
+  fileListAttrs,
+  buttonsAttrs,
+} = useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
 <template>
@@ -311,7 +316,7 @@ function onClickRemoveItem(id: string | number) {
               tag="label"
               variant="thirdary"
               :size="buttonSize"
-              :right-icon="config.defaults?.chooseFileIcon"
+              :right-icon="config.defaults.chooseFileIcon"
               :label="currentLocale.uploadFile"
               :disabled="disabled"
               v-bind="chooseFileButtonAttrs"
@@ -339,7 +344,7 @@ function onClickRemoveItem(id: string | number) {
             variant="thirdary"
             :size="buttonSize"
             :disabled="disabled"
-            :left-icon="config.defaults?.clearIcon"
+            :left-icon="config.defaults.clearIcon"
             v-bind="clearButtonAttrs"
             :data-test="`${dataTest}-clear`"
             @click="onClickResetFiles"

package/ui.form-input-file/storybook/stories.ts

@@ -9,9 +9,9 @@ import UInputFile from "../../ui.form-input-file/UInputFile.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { UInputFileProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface UInputFileArgs extends UInputFileProps {
+interface UInputFileArgs extends Props {
   slotTemplate?: string;
   enum: "labelAlign" | "size";
 }