vueless 0.0.579 → 0.0.580

package/ui.dropdown-link/UDropdownLink.vue

@@ -1,37 +1,27 @@
 <script setup lang="ts">
 import { nextTick, computed, provide, ref, useId, useTemplateRef } from "vue";
 
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
+
 import UIcon from "../ui.image-icon/UIcon.vue";
 import ULink from "../ui.button-link/ULink.vue";
 import UDropdownList from "../ui.dropdown-list/UDropdownList.vue";
 
-import { getDefault } from "../utils/ui.ts";
-
 import { vClickOutside } from "../directives";
 
 import { UDropdownLink } from "./constants.ts";
 import defaultConfig from "./config.ts";
-import useAttrs from "./useAttrs.ts";
 
-import type { UDropdownLinkProps, IconSize } from "./types.ts";
+import type { Props, IconSize, Config } from "./types.ts";
 import type { Option } from "../ui.dropdown-list/types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<UDropdownLinkProps>(), {
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, UDropdownLink),
   options: () => [],
-  labelKey: getDefault<UDropdownLinkProps>(defaultConfig, UDropdownLink).labelKey,
-  color: getDefault<UDropdownLinkProps>(defaultConfig, UDropdownLink).color,
-  size: getDefault<UDropdownLinkProps>(defaultConfig, UDropdownLink).size,
-  underlined: getDefault<UDropdownLinkProps>(defaultConfig, UDropdownLink).underlined,
-  dashed: getDefault<UDropdownLinkProps>(defaultConfig, UDropdownLink).dashed,
-  noRing: getDefault<UDropdownLinkProps>(defaultConfig, UDropdownLink).noRing,
-  noIcon: getDefault<UDropdownLinkProps>(defaultConfig, UDropdownLink).noIcon,
-  yPosition: getDefault<UDropdownLinkProps>(defaultConfig, UDropdownLink).yPosition,
-  xPosition: getDefault<UDropdownLinkProps>(defaultConfig, UDropdownLink).xPosition,
-  id: "",
-  dataTest: "",
-  config: () => ({}),
+  label: "",
 });
 
 const emit = defineEmits([
@@ -51,11 +41,6 @@ const dropdownListRef = useTemplateRef<UDropdownListRef>("dropdown-list");
 
 const elementId = props.id || useId();
 
-const { config, wrapperAttrs, dropdownLinkAttrs, dropdownListAttrs, dropdownIconAttrs } = useAttrs(
-  props,
-  { isShownOptions },
-);
-
 const iconSize = computed(() => {
   const sizes = {
     sm: "2xs",
@@ -85,6 +70,18 @@ function onClickList() {
 function onClickOption(option: Option) {
   emit("clickOption", option);
 }
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const mutatedProps = computed(() => ({
+  /* component state, not a props */
+  opened: isShownOptions.value,
+}));
+
+const { config, wrapperAttrs, dropdownLinkAttrs, dropdownListAttrs, dropdownIconAttrs } =
+  useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
 <template>
@@ -133,7 +130,7 @@ function onClickOption(option: Option) {
             interactive
             :color="color"
             :size="iconSize"
-            :name="config.defaults?.dropdownIcon"
+            :name="config.defaults.dropdownIcon"
             v-bind="dropdownIconAttrs"
             :data-test="`${dataTest}-dropdown`"
             @click="onClickLink"

package/ui.dropdown-link/storybook/stories.ts

@@ -10,14 +10,14 @@ import URow from "../../ui.container-row/URow.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { UDropdownLinkProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface DefaultUDropdownLinkArgs extends UDropdownLinkProps {
+interface DefaultUDropdownLinkArgs extends Props {
   slotTemplate?: string;
 }
 
 interface EnumUDropdownLinkArgs extends DefaultUDropdownLinkArgs {
-  enum: keyof Pick<UDropdownLinkProps, "size" | "color">;
+  enum: keyof Pick<Props, "size" | "color">;
 }
 
 export default {

package/ui.dropdown-link/types.ts

@@ -1,12 +1,13 @@
 import defaultConfig from "./config.ts";
 
 import type { Option } from "../ui.dropdown-list/types.ts";
+import type { ComponentConfig } from "../types.ts";
 
-export type Config = Partial<typeof defaultConfig>;
+export type Config = typeof defaultConfig;
 
 export type IconSize = "sm" | "2xs" | "xs";
 
-export interface UDropdownLinkProps {
+export interface Props {
   /**
    * Link label.
    */
@@ -96,7 +97,7 @@ export interface UDropdownLinkProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.dropdown-list/UDropdownList.vue

@@ -2,20 +2,20 @@
 import { watch, computed, useId, ref, useTemplateRef, nextTick } from "vue";
 import { merge } from "lodash-es";
 
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
+import { isMac } from "../utils/platform.ts";
+
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UButton from "../ui.button/UButton.vue";
 
-import { getDefault } from "../utils/ui.ts";
-import { isMac } from "../utils/platform.ts";
-
 import usePointer from "./usePointer.ts";
-import useAttrs from "./useAttrs.ts";
 import { useLocale } from "../composables/useLocale.ts";
 
 import defaultConfig from "./config.ts";
 import { UDropdownList } from "./constants.ts";
 
-import type { Option, UDropdownListProps } from "./types.ts";
+import type { Option, Props, Config } from "./types.ts";
 import type { UnknownObject } from "../types.ts";
 
 defineOptions({ inheritAttrs: false });
@@ -23,17 +23,9 @@ defineOptions({ inheritAttrs: false });
 // TODO: Use props and regular modal value
 const modelValue = defineModel<string | number | UnknownObject>({ default: "" });
 
-const props = withDefaults(defineProps<UDropdownListProps>(), {
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, UDropdownList),
   options: () => [],
-  labelKey: getDefault<UDropdownListProps>(defaultConfig, UDropdownList).labelKey,
-  valueKey: getDefault<UDropdownListProps>(defaultConfig, UDropdownList).valueKey,
-  addOption: getDefault<UDropdownListProps>(defaultConfig, UDropdownList).addOption,
-  size: getDefault<UDropdownListProps>(defaultConfig, UDropdownList).size,
-  visibleOptions: getDefault<UDropdownListProps>(defaultConfig, UDropdownList).visibleOptions,
-  disabled: getDefault<UDropdownListProps>(defaultConfig, UDropdownList).disabled,
-  id: "",
-  dataTest: "",
-  config: () => ({}),
 });
 
 const emit = defineEmits([
@@ -59,22 +51,6 @@ const { pointer, pointerDirty, pointerSet, pointerBackward, pointerForward, poin
 
 const elementId = props.id || useId();
 
-const {
-  config,
-  wrapperAttrs,
-  listAttrs,
-  listItemAttrs,
-  addOptionLabelWrapperAttrs,
-  addOptionLabelAttrs,
-  addOptionLabelHotkeyAttrs,
-  addOptionButtonAttrs,
-  addOptionIconAttrs,
-  optionAttrs,
-  subGroupAttrs,
-  groupAttrs,
-  optionContentAttrs,
-} = useAttrs(props);
-
 const { tm } = useLocale();
 
 const i18nGlobal = tm(UDropdownList);
@@ -239,6 +215,26 @@ defineExpose({
    */
   wrapperRef,
 });
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const {
+  config,
+  wrapperAttrs,
+  listAttrs,
+  listItemAttrs,
+  addOptionLabelWrapperAttrs,
+  addOptionLabelAttrs,
+  addOptionLabelHotkeyAttrs,
+  addOptionButtonAttrs,
+  addOptionIconAttrs,
+  optionAttrs,
+  subGroupAttrs,
+  groupAttrs,
+  optionContentAttrs,
+} = useUI<Config>(defaultConfig);
 </script>
 
 <template>
@@ -344,7 +340,7 @@ defineExpose({
             internal
             color="white"
             size="xs"
-            :name="config.defaults?.addOptionIcon"
+            :name="config.defaults.addOptionIcon"
             v-bind="addOptionIconAttrs"
           />
         </UButton>

package/ui.dropdown-list/storybook/stories.ts

@@ -9,14 +9,14 @@ import UDropdownList from "../../ui.dropdown-list/UDropdownList.vue";
 import URow from "../../ui.container-row/URow.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { UDropdownListProps } from "../types.ts";
+import type { Option, Props } from "../types.ts";
 
-interface DefaultUDropdownListArgs extends UDropdownListProps {
+interface DefaultUDropdownListArgs extends Props {
   slotTemplate?: string;
 }
 
 interface EnumUDropdownListArgs extends DefaultUDropdownListArgs {
-  enum: keyof Pick<UDropdownListProps, "size">;
+  enum: keyof Pick<Props, "size">;
 }
 
 export default {
@@ -120,7 +120,7 @@ OptionSettings.args = {
     {
       label: "option 3",
       id: "3",
-      onClick: (option) => alert("onClick option 3 " + JSON.stringify(option)),
+      onClick: (option: Option) => alert("onClick option 3 " + JSON.stringify(option)),
     },
   ],
 };

package/ui.dropdown-list/types.ts

@@ -1,7 +1,7 @@
-import type { UnknownObject } from "../types.ts";
 import defaultConfig from "./config.ts";
+import type { ComponentConfig, UnknownObject } from "../types.ts";
 
-export type Config = Partial<typeof defaultConfig>;
+export type Config = typeof defaultConfig;
 export type OnClickOption = (option: Omit<Option, "onClick">) => void;
 
 export interface BaseOption {
@@ -16,7 +16,7 @@ export interface Option extends BaseOption {
   [key: string]: string | number | boolean | UnknownObject | OnClickOption | undefined;
 }
 
-export interface UDropdownListProps {
+export interface Props {
   /**
    * List options.
    */
@@ -60,7 +60,7 @@ export interface UDropdownListProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
 
   /**
    * Data-test attribute for automated testing.

package/ui.form-calendar/UCalendar.vue

@@ -2,10 +2,12 @@
 import { computed, ref, watch, useTemplateRef } from "vue";
 import { merge } from "lodash-es";
 
-import UButton from "../ui.button/UButton.vue";
-import { getDefault } from "../utils/ui.ts";
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
 import { isRangeDate } from "./types.ts";
 
+import UButton from "../ui.button/UButton.vue";
+
 import {
   parseDate,
   formatDate,
@@ -16,7 +18,6 @@ import {
 
 import { getDateWithoutTime, addMonths, addDays, addYears, getSortedLocale } from "./utilDate.ts";
 
-import useAttrs from "./useAttrs.ts";
 import { useLocale } from "../composables/useLocale.ts";
 
 import {
@@ -38,7 +39,7 @@ import {
 
 import defaultConfig from "./config.ts";
 
-import type { UCalendarProps, DateValue, RangeDate, Locale } from "./types.ts";
+import type { UCalendarProps, DateValue, RangeDate, Locale, Config } from "./types.ts";
 import type { ComputedRef, Ref } from "vue";
 import type { DateLocale } from "./utilFormatting.ts";
 
@@ -53,21 +54,16 @@ defineOptions({ inheritAttrs: false });
 type Props = UCalendarProps<TModelValue>;
 const props = withDefaults(defineProps<Props>(), {
   view: View.Day,
-  range: getDefault<Props>(defaultConfig, UCalendar).range,
-  timepicker: getDefault<Props>(defaultConfig, UCalendar).timepicker,
-  dateFormat: getDefault<Props>(defaultConfig, UCalendar).dateFormat,
-  dateTimeFormat: getDefault<Props>(defaultConfig, UCalendar).dateTimeFormat,
-  userDateFormat: getDefault<Props>(defaultConfig, UCalendar).userDateFormat,
-  userDateTimeFormat: getDefault<Props>(defaultConfig, UCalendar).userDateTimeFormat,
-  tabindex: getDefault<Props>(defaultConfig, UCalendar).tabindex,
-  dataTest: "",
-  config: () => ({}),
+  ...getDefaults<Props, Config>(defaultConfig, UCalendar),
+  modelValue: undefined,
+  minDate: undefined,
+  maxDate: undefined,
 });
 
 const emit = defineEmits([
   /**
    * Triggers when date value changes.
-   * @property {object} newDate
+   * @property {object} modelValue
    */
   "update:modelValue",
   /**
@@ -97,21 +93,6 @@ const emit = defineEmits([
 
 const { tm } = useLocale();
 
-const {
-  config,
-  wrapperAttrs,
-  navigationAttrs,
-  viewSwitchButtonAttrs,
-  nextPrevButtonAttrs,
-  timepickerAttrs,
-  timepickerLabelAttrs,
-  timepickerInputWrapperAttrs,
-  timepickerInputHoursAttrs,
-  timepickerInputMinutesAttrs,
-  timepickerInputSecondsAttrs,
-  timepickerSubmitButtonAttrs,
-} = useAttrs(props);
-
 const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
 const hoursRef = useTemplateRef<HTMLInputElement>("hours-input");
 const minutesRef = useTemplateRef<HTMLInputElement>("minutes-input");
@@ -184,12 +165,12 @@ const userFormatLocale = computed(() => {
   const { months, weekdays } = currentLocale.value;
 
   const monthsLonghand =
-    Boolean(props.config?.i18n?.months?.userFormat) || Boolean(i18nGlobal?.months?.userFormat)
+    Boolean(currentLocale.value.months.userFormat) || Boolean(i18nGlobal?.months?.userFormat)
       ? months.userFormat
       : months.longhand;
 
   const weekdaysLonghand =
-    Boolean(props.config?.i18n?.weekdays?.userFormat) || Boolean(i18nGlobal?.weekdays?.userFormat)
+    Boolean(currentLocale.value.weekdays.userFormat) || Boolean(i18nGlobal?.weekdays?.userFormat)
       ? weekdays.userFormat
       : weekdays.longhand;
 
@@ -211,7 +192,9 @@ const localValue = computed({
   get: () => {
     if (props.range) {
       const isModelValueRangeType =
-        typeof props.modelValue === "object" && !(props.modelValue instanceof Date);
+        props.modelValue &&
+        typeof props.modelValue === "object" &&
+        !(props.modelValue instanceof Date);
 
       const modelValue = isModelValueRangeType
         ? (props.modelValue as RangeDate)
@@ -656,6 +639,25 @@ defineExpose({
    */
   wrapperRef,
 });
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const {
+  config,
+  wrapperAttrs,
+  navigationAttrs,
+  viewSwitchButtonAttrs,
+  nextPrevButtonAttrs,
+  timepickerAttrs,
+  timepickerLabelAttrs,
+  timepickerInputWrapperAttrs,
+  timepickerInputHoursAttrs,
+  timepickerInputMinutesAttrs,
+  timepickerInputSecondsAttrs,
+  timepickerSubmitButtonAttrs,
+} = useUI<Config>(defaultConfig);
 </script>
 
 <template>
@@ -667,7 +669,7 @@ defineExpose({
         size="sm"
         color="grayscale"
         variant="thirdary"
-        :left-icon="config?.defaults?.prevIcon"
+        :left-icon="config.defaults.prevIcon"
         v-bind="nextPrevButtonAttrs"
         @mousedown.prevent.capture
         @click="onClickPrevButton"
@@ -695,7 +697,7 @@ defineExpose({
         size="sm"
         color="grayscale"
         variant="thirdary"
-        :left-icon="config?.defaults?.nextIcon"
+        :left-icon="config.defaults.nextIcon"
         v-bind="nextPrevButtonAttrs"
         @mousedown.prevent.capture
         @click="onClickNextButton"

package/ui.form-calendar/UCalendarDayView.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
+import useUI from "../composables/useUI.ts";
+
 import { formatDate, dateIsOutOfRange } from "./utilCalendar.ts";
 import {
   isToday,
@@ -10,11 +12,10 @@ import {
   isAnotherMothDay,
 } from "./utilDate.ts";
 
-import useAttrs from "./useAttrs.ts";
-
+import defaultConfig from "./config.ts";
 import { DAYS_IN_WEEK, START_WEEK } from "./constants.ts";
 
-import type { UCalendarViewProps, UCalendarProps } from "./types.ts";
+import type { UCalendarViewProps, Config } from "./types.ts";
 
 import UButton from "../ui.button/UButton.vue";
 
@@ -22,26 +23,6 @@ const props = defineProps<UCalendarViewProps>();
 
 const emit = defineEmits(["input"]);
 
-const {
-  dayViewAttrs,
-  weekDaysAttrs,
-  weekDayAttrs,
-  daysAttrs,
-  dayAttrs,
-  currentDayAttrs,
-  dayInRangeAttrs,
-  currentDayInRangeAttrs,
-  anotherMonthDayAttrs,
-  firstDayInRangeAttrs,
-  anotherMonthFirstDayInRangeAttrs,
-  lastDayInRangeAttrs,
-  anotherMonthLastDayInRangeAttrs,
-  selectedDayAttrs,
-  activeDayAttrs,
-  currentLastDayInRangeAttrs,
-  currentFirstDayInRangeAttrs,
-} = useAttrs(props as unknown as UCalendarProps<unknown>);
-
 const localSelectedDate = computed(() => {
   return props.selectedDate === null ? getDateWithoutTime() : props.selectedDate;
 });
@@ -207,6 +188,30 @@ function onClickDay(day: Date) {
 
   emit("input", day);
 }
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const {
+  dayViewAttrs,
+  weekDaysAttrs,
+  weekDayAttrs,
+  daysAttrs,
+  dayAttrs,
+  currentDayAttrs,
+  dayInRangeAttrs,
+  currentDayInRangeAttrs,
+  anotherMonthDayAttrs,
+  firstDayInRangeAttrs,
+  anotherMonthFirstDayInRangeAttrs,
+  lastDayInRangeAttrs,
+  anotherMonthLastDayInRangeAttrs,
+  selectedDayAttrs,
+  activeDayAttrs,
+  currentLastDayInRangeAttrs,
+  currentFirstDayInRangeAttrs,
+} = useUI<Config>(defaultConfig);
 </script>
 
 <template>

package/ui.form-calendar/UCalendarMonthView.vue

@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
+import useUI from "../composables/useUI.ts";
+
 import { formatDate, dateIsOutOfRange } from "./utilCalendar.ts";
 import { isSameMonth, getDateWithoutTime, isCurrentMonth } from "./utilDate.ts";
 
-import useAttrs from "./useAttrs.ts";
-
+import defaultConfig from "./config.ts";
 import { MONTHS_PER_VIEW } from "./constants.ts";
 
-import type { UCalendarViewProps, UCalendarProps } from "./types.ts";
+import type { UCalendarViewProps, Config } from "./types.ts";
 
 import UButton from "../ui.button/UButton.vue";
 
@@ -16,22 +17,6 @@ const props = defineProps<UCalendarViewProps>();
 
 const emit = defineEmits(["input"]);
 
-const {
-  monthViewAttrs,
-  monthAttrs,
-  currentMonthAttrs,
-  currentMonthInRangeAttrs,
-  lastMonthInRangeAttrs,
-  firstMonthInRangeAttrs,
-  singleMonthInRangeAttrs,
-  monthInRangeAttrs,
-  selectedMonthAttrs,
-  activeMonthAttrs,
-  currentLastMonthInRangeAttrs,
-  currentFirstMonthInRangeAttrs,
-  singleCurrentMonthInRangeAttrs,
-} = useAttrs(props as unknown as UCalendarProps<unknown>);
-
 const localSelectedDate = computed(() => {
   return props.selectedDate === null ? getDateWithoutTime() : props.selectedDate;
 });
@@ -117,6 +102,26 @@ function isMoreThanOneMonthDiff(date: Date, dateTo: Date) {
 function onClickMonth(month: Date) {
   emit("input", month);
 }
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const {
+  monthViewAttrs,
+  monthAttrs,
+  currentMonthAttrs,
+  currentMonthInRangeAttrs,
+  lastMonthInRangeAttrs,
+  firstMonthInRangeAttrs,
+  singleMonthInRangeAttrs,
+  monthInRangeAttrs,
+  selectedMonthAttrs,
+  activeMonthAttrs,
+  currentLastMonthInRangeAttrs,
+  currentFirstMonthInRangeAttrs,
+  singleCurrentMonthInRangeAttrs,
+} = useUI<Config>(defaultConfig);
 </script>
 
 <template>

package/ui.form-calendar/UCalendarYearView.vue

@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
+import useUI from "../composables/useUI.ts";
+
 import { formatDate, getYearsRange, dateIsOutOfRange } from "./utilCalendar.ts";
 import { isSameMonth, getDateWithoutTime, isCurrentYear } from "./utilDate.ts";
 
-import useAttrs from "./useAttrs.ts";
-
+import defaultConfig from "./config.ts";
 import { YEARS_PER_VIEW } from "./constants.ts";
 
-import type { UCalendarProps, UCalendarViewProps } from "./types.ts";
+import type { UCalendarViewProps, Config } from "./types.ts";
 
 import UButton from "../ui.button/UButton.vue";
 
@@ -16,22 +17,6 @@ const props = defineProps<UCalendarViewProps>();
 
 const emit = defineEmits(["input"]);
 
-const {
-  yearViewAttrs,
-  yearAttrs,
-  currentYearAttrs,
-  currentYearInRangeAttrs,
-  firstYearInRangeAttrs,
-  lastYearInRangeAttrs,
-  yearInRangeAttrs,
-  singleYearInRangeAttrs,
-  selectedYearAttrs,
-  activeYearAttrs,
-  singleCurrentYearInRangeAttrs,
-  currentLastYearInRangeAttrs,
-  currentFirstYearInRangeAttrs,
-} = useAttrs(props as unknown as UCalendarProps<unknown>);
-
 const localSelectedDate = computed(() => {
   return props.selectedDate === null ? getDateWithoutTime() : props.selectedDate;
 });
@@ -115,6 +100,26 @@ function getYearState(year: Date, index: number) {
 function onClickYear(year: Date) {
   emit("input", year);
 }
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const {
+  yearViewAttrs,
+  yearAttrs,
+  currentYearAttrs,
+  currentYearInRangeAttrs,
+  firstYearInRangeAttrs,
+  lastYearInRangeAttrs,
+  yearInRangeAttrs,
+  singleYearInRangeAttrs,
+  selectedYearAttrs,
+  activeYearAttrs,
+  singleCurrentYearInRangeAttrs,
+  currentLastYearInRangeAttrs,
+  currentFirstYearInRangeAttrs,
+} = useUI<Config>(defaultConfig);
 </script>
 
 <template>

package/ui.form-calendar/config.ts

@@ -152,11 +152,11 @@ export default /*tw*/ {
   defaults: {
     userDateFormat: "j F, Y",
     userDateTimeFormat: "j F, Y - H:i:S",
-    range: false,
-    timepicker: false,
     dateFormat: undefined,
     dateTimeFormat: undefined,
     tabindex: 1,
+    range: false,
+    timepicker: false,
     /* icons */
     viewSwitchIcon: "keyboard_arrow_down",
     nextIcon: "keyboard_arrow_right",

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

@@ -10,9 +10,9 @@ import UCalendar from "../../ui.form-calendar/UCalendar.vue";
 
 import { UCalendar as UCalendarName } from "../constants.ts";
 
-import type { UCalendarProps } from "../types.ts";
+import type { DateValue, UCalendarProps } from "../types.ts";
 
-interface UCalendarArgs extends UCalendarProps<unknown> {
+interface UCalendarArgs extends UCalendarProps<DateValue> {
   slotTemplate?: string;
   enum: "size";
 }