vueless 0.0.554 → 0.0.556

package/ui.dropdown-button/useAttrs.ts

@@ -15,25 +15,12 @@ export default function useAttrs(
   props: UDropdownButtonProps,
   { isShownOptions }: DropdownButtonState,
 ): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI(
-    defaultConfig,
-    () => props.config,
-  );
+  const { config, getKeysAttrs } = useUI(defaultConfig, () => props.config);
 
-  const extendingKeys = ["dropdownButtonActive"];
-  const extendingKeysClasses = getExtendingKeysClasses(extendingKeys);
+  const mutatedProps = computed(() => ({
+    /* component state, not a props */
+    opened: isShownOptions.value,
+  }));
 
-  const keysAttrs = getKeysAttrs({}, extendingKeys, {
-    dropdownButton: {
-      extend: computed(() => [
-        isShownOptions.value && extendingKeysClasses.dropdownButtonActive.value,
-      ]),
-    },
-  });
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs(mutatedProps) };
 }

package/ui.dropdown-link/config.ts

@@ -1,6 +1,12 @@
 export default /*tw*/ {
-  wrapper: "relative inline-block",
-  wrapperActive: "group",
+  wrapper: {
+    base: "relative inline-block",
+    variants: {
+      opened: {
+        true: "group",
+      },
+    },
+  },
   dropdownLink: "{ULink}",
   dropdownIcon: "{UIcon} block transition duration-300 group-[]:rotate-180",
   dropdownList: {

package/ui.dropdown-link/useAttrs.ts

@@ -1,36 +1,26 @@
-import { computed, type Ref } from "vue";
+import { computed } from "vue";
 import useUI from "../composables/useUI.ts";
 
 import defaultConfig from "./config.ts";
 
+import type { Ref } from "vue";
 import type { Config, UDropdownLinkProps } from "./types.ts";
 import type { UseAttrs } from "../types.ts";
 
-interface DropdownLinkState {
+interface ComponentState {
   isShownOptions: Ref<boolean>;
 }
 
 export default function useAttrs(
   props: UDropdownLinkProps,
-  { isShownOptions }: DropdownLinkState,
+  { isShownOptions }: ComponentState,
 ): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI(
-    defaultConfig,
-    () => props.config,
-  );
+  const { config, getKeysAttrs } = useUI(defaultConfig, () => props.config);
 
-  const extendingKeys = ["wrapperActive"];
-  const extendingKeysClasses = getExtendingKeysClasses(extendingKeys);
+  const mutatedProps = computed(() => ({
+    /* component state, not a props */
+    opened: isShownOptions.value,
+  }));
 
-  const keysAttrs = getKeysAttrs({}, extendingKeys, {
-    wrapper: {
-      extend: computed(() => [isShownOptions.value && extendingKeysClasses.wrapperActive.value]),
-    },
-  });
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs(mutatedProps) };
 }

package/ui.dropdown-list/config.ts

@@ -39,12 +39,13 @@ export default /*tw*/ {
     },
   },
   group: `
+    {>groupBase}
     border-t border-gray-100 group-first/item:border-none
     mt-1.5 group-first/item:mt-0
     pt-4 group-first/item:pt-2
   `,
-  subGroup: "pt-2",
-  addOptionLabelWrapper: "-mb-[1.375rem] active:bg-brand-100",
+  subGroup: "{>groupBase} pt-2",
+  addOptionLabelWrapper: "{>option} -mb-[1.375rem] active:bg-brand-100",
   addOptionLabel: "leading-none font-medium",
   addOptionLabelHotkey: "text-gray-500",
   addOptionButton: "{UButton} !leading-none sticky left-[calc(100%-2.15rem)] bottom-2 p-1",

package/ui.dropdown-list/useAttrs.ts

@@ -1,4 +1,3 @@
-import { computed } from "vue";
 import useUI from "../composables/useUI.ts";
 
 import defaultConfig from "./config.ts";
@@ -7,29 +6,7 @@ import type { Config, UDropdownListProps } from "./types.ts";
 import type { UseAttrs } from "../types.ts";
 
 export default function useAttrs(props: UDropdownListProps): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI(
-    defaultConfig,
-    () => props.config,
-  );
+  const { config, getKeysAttrs } = useUI(defaultConfig, () => props.config);
 
-  const extendingKeys = ["option", "groupBase"];
-  const extendingKeysClasses = getExtendingKeysClasses(extendingKeys);
-
-  const keysAttrs = getKeysAttrs({}, [], {
-    addOptionLabelWrapper: {
-      base: computed(() => [extendingKeysClasses.option.value]),
-    },
-    group: {
-      base: computed(() => [extendingKeysClasses.groupBase.value]),
-    },
-    subGroup: {
-      base: computed(() => [extendingKeysClasses.groupBase.value]),
-    },
-  });
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs() };
 }

package/ui.form-calendar/config.ts

@@ -23,51 +23,51 @@ export default /*tw*/ {
   selectedDate: "",
   currentDate: "border-2 border-brand-600",
   day: "{UButton} size-9 w-full",
-  currentDay: "",
-  dayInRange: "",
-  currentDayInRange: "",
-  anotherMonthDay: "font-normal",
-  firstDayInRange: "",
-  anotherMonthFirstDayInRange: "",
-  lastDayInRange: "",
-  currentLastDayInRange: "",
+  currentDay: "{>day} {>currentDate}",
+  dayInRange: "{>day} {>dateInRange}",
+  currentDayInRange: "{>day} {>dateInRange} {>currentDate}",
+  anotherMonthDay: "{>day} {>anotherMonthDate} font-normal",
+  firstDayInRange: "{>day} {>edgeDateInRange} {>firstDateInRange}",
+  anotherMonthFirstDayInRange: "{>day} {>anotherMonthDay} {>edgeDateInRange} {>firstDateInRange}",
+  lastDayInRange: "{>day} {>edgeDateInRange} {>lastDateInRange}",
+  currentLastDayInRange: "{>day} {>edgeDateInRange} {>lastDateInRange} {>currentDate}",
   currentFirstDayInRange: "",
-  anotherMonthLastDayInRange: "",
-  selectedDay: "",
-  activeDay: "",
+  anotherMonthLastDayInRange: "{>day} {>anotherMonthDay} {>edgeDateInRange} {>lastDateInRange}",
+  selectedDay: "{>day} {>selectedDate}",
+  activeDay: "{>day} {>activeDate}",
   monthView: "grid grid-cols-4 justify-items-center gap-1",
   month: "{UButton} mx-auto flex h-12 w-full",
-  currentMonth: "",
-  currentMonthInRange: "",
-  currentLastMonthInRange: "",
-  currentFirstMonthInRange: "",
-  lastMonthInRange: "",
-  firstMonthInRange: "",
-  singleMonthInRange: "rounded-dynamic",
-  singleCurrentMonthInRange: "rounded-dynamic",
-  monthInRange: "",
-  selectedMonth: "",
-  activeMonth: "",
+  currentMonth: "{>month} {>currentDate}",
+  currentMonthInRange: "{>month} {>currentDate} {>dateInRange}",
+  currentLastMonthInRange: "{>month} {>edgeDateInRange} {>lastDateInRange} {>currentDate}",
+  currentFirstMonthInRange: "{>month} {>edgeDateInRange} {>firstDateInRange} {>currentDate}",
+  lastMonthInRange: "{>month} {>edgeDateInRange} {>lastDateInRange}",
+  firstMonthInRange: "{>month} {>edgeDateInRange} {>firstDateInRange}",
+  singleMonthInRange: "{>month} {>dateInRange} rounded-dynamic",
+  singleCurrentMonthInRange: "{>month} {>dateInRange} {>currentDate} rounded-dynamic",
+  monthInRange: "{>month} {>dateInRange}",
+  selectedMonth: "{>month} {>selectedDate}",
+  activeMonth: "{>month} {>activeDate}",
   yearView: "grid grid-cols-4 justify-items-center gap-1",
   year: "{UButton} mx-auto flex h-12 w-full",
-  currentYear: "",
-  currentYearInRange: "",
-  firstYearInRange: "",
-  lastYearInRange: "",
-  yearInRange: "",
-  singleYearInRange: "rounded-dynamic",
-  singleCurrentYearInRange: "rounded-dynamic",
-  currentLastYearInRange: "",
-  currentFirstYearInRange: "",
-  selectedYear: "",
-  activeYear: "",
+  currentYear: "{>year} {>currentDate}",
+  currentYearInRange: "{>year} {>currentDate} {>dateInRange}",
+  currentLastYearInRange: "{>year} {>edgeDateInRange} {>lastDateInRange} {>currentDate}",
+  currentFirstYearInRange: "{>year} {>edgeDateInRange} {>firstDateInRange} {>currentDate}",
+  lastYearInRange: "{>year} {>edgeDateInRange} {>lastDateInRange}",
+  firstYearInRange: "{>year} {>edgeDateInRange} {>firstDateInRange}",
+  yearInRange: "{>year} {>dateInRange}",
+  singleYearInRange: "{>year} {>dateInRange} rounded-dynamic",
+  singleCurrentYearInRange: "{>year} {>dateInRange} {>currentDate} rounded-dynamic",
+  selectedYear: "{>year} {>selectedDate}",
+  activeYear: "{>year} {>activeDate}",
   timepicker: "mt-2 pl-1 pt-3 text-sm flex items-stretch justify-between gap-2 border-t border-gray-200",
   timepickerLabel: "w-full self-center",
   timepickerInputWrapper: "flex items-center rounded-dynamic border border-brand-300",
   timepickerInput: "w-10 border-none px-1.5 py-1.5 text-center text-sm focus:ring-0 focus:placeholder:text-gray-900",
-  timepickerInputHours: "rounded-l-dynamic",
-  timepickerInputMinutes: "",
-  timepickerInputSeconds: "rounded-r-dynamic",
+  timepickerInputHours: "{>timepickerInput} rounded-l-dynamic",
+  timepickerInputMinutes: "{>timepickerInput}",
+  timepickerInputSeconds: "{>timepickerInput} rounded-r-dynamic",
   timepickerSubmitButton: "{UButton} py-2 border-0",
   i18n: {
     weekdays: {

package/ui.form-calendar/useAttrs.ts

@@ -1,4 +1,3 @@
-import { computed } from "vue";
 import useUI from "../composables/useUI.ts";
 
 import defaultConfig from "./config.js";
@@ -7,268 +6,7 @@ import type { UseAttrs } from "../types.ts";
 import type { UCalendarProps, Config } from "./types.ts";
 
 export default function useAttrs(props: UCalendarProps<unknown>): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI<Config>(
-    defaultConfig,
-    () => props.config,
-  );
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
 
-  const extendingKeys = [
-    "firstDateInRange",
-    "lastDateInRange",
-    "anotherMonthDate",
-    "activeDate",
-    "selectedDate",
-    "currentDate",
-    "edgeDateInRange",
-    "dateInRange",
-    "timepickerInput",
-  ];
-
-  const extendingKeysClasses = getExtendingKeysClasses([...extendingKeys, "day", "month", "year"]);
-
-  const keysAttrs = getKeysAttrs({}, extendingKeys, {
-    timepickerInputHours: {
-      base: computed(() => [extendingKeysClasses.timepickerInput.value]),
-    },
-    timepickerInputMinutes: {
-      base: computed(() => [extendingKeysClasses.timepickerInput.value]),
-    },
-    timepickerInputSeconds: {
-      base: computed(() => [extendingKeysClasses.timepickerInput.value]),
-    },
-    dayInRange: {
-      base: computed(() => [
-        extendingKeysClasses.day.value,
-        extendingKeysClasses.dateInRange.value,
-      ]),
-    },
-    selectedDay: {
-      base: computed(() => [
-        extendingKeysClasses.day.value,
-        extendingKeysClasses.selectedDate.value,
-      ]),
-    },
-    activeDay: {
-      base: computed(() => [extendingKeysClasses.day.value, extendingKeysClasses.activeDate.value]),
-    },
-    anotherMonthDay: {
-      base: computed(() => [
-        extendingKeysClasses.day.value,
-        extendingKeysClasses.anotherMonthDate.value,
-      ]),
-    },
-    currentDay: {
-      base: computed(() => [
-        extendingKeysClasses.day.value,
-        extendingKeysClasses.currentDate.value,
-      ]),
-    },
-    currentDayInRange: {
-      base: computed(() => [
-        extendingKeysClasses.day.value,
-        extendingKeysClasses.dateInRange.value,
-        extendingKeysClasses.currentDate.value,
-      ]),
-    },
-    currentFirstDayInRange: {
-      base: computed(() => [
-        extendingKeysClasses.day.value,
-        extendingKeysClasses.edgeDateInRange.value,
-        extendingKeysClasses.firstDateInRange.value,
-        extendingKeysClasses.currentDate.value,
-      ]),
-    },
-    currentLastDayInRange: {
-      base: computed(() => [
-        extendingKeysClasses.day.value,
-        extendingKeysClasses.edgeDateInRange.value,
-        extendingKeysClasses.lastDateInRange.value,
-        extendingKeysClasses.currentDate.value,
-      ]),
-    },
-    firstDayInRange: {
-      base: computed(() => [
-        extendingKeysClasses.day.value,
-        extendingKeysClasses.edgeDateInRange.value,
-        extendingKeysClasses.firstDateInRange.value,
-      ]),
-    },
-    lastDayInRange: {
-      base: computed(() => [
-        extendingKeysClasses.day.value,
-        extendingKeysClasses.edgeDateInRange.value,
-        extendingKeysClasses.lastDateInRange.value,
-      ]),
-    },
-    anotherMonthLastDayInRange: {
-      base: computed(() => [
-        extendingKeysClasses.day.value,
-        extendingKeysClasses.anotherMonthDay.value,
-        extendingKeysClasses.edgeDateInRange.value,
-        extendingKeysClasses.lastDateInRange.value,
-      ]),
-    },
-    anotherMonthFirstDayInRange: {
-      base: computed(() => [
-        extendingKeysClasses.day.value,
-        extendingKeysClasses.anotherMonthDay.value,
-        extendingKeysClasses.edgeDateInRange.value,
-        extendingKeysClasses.firstDateInRange.value,
-      ]),
-    },
-    currentMonth: {
-      base: computed(() => [
-        extendingKeysClasses.month.value,
-        extendingKeysClasses.currentDate.value,
-      ]),
-    },
-    monthInRange: {
-      base: computed(() => [
-        extendingKeysClasses.month.value,
-        extendingKeysClasses.dateInRange.value,
-      ]),
-    },
-    singleMonthInRange: {
-      base: computed(() => [
-        extendingKeysClasses.month.value,
-        extendingKeysClasses.dateInRange.value,
-      ]),
-    },
-    singleCurrentMonthInRange: {
-      base: computed(() => [
-        extendingKeysClasses.year.value,
-        extendingKeysClasses.dateInRange.value,
-        extendingKeysClasses.currentDate.value,
-      ]),
-    },
-    currentFirstYearInRange: {
-      base: computed(() => [
-        extendingKeysClasses.year.value,
-        extendingKeysClasses.edgeDateInRange.value,
-        extendingKeysClasses.firstDateInRange.value,
-        extendingKeysClasses.currentDate.value,
-      ]),
-    },
-    currentLastYearInRange: {
-      base: computed(() => [
-        extendingKeysClasses.year.value,
-        extendingKeysClasses.edgeDateInRange.value,
-        extendingKeysClasses.lastDateInRange.value,
-        extendingKeysClasses.currentDate.value,
-      ]),
-    },
-    currentMonthInRange: {
-      base: computed(() => [
-        extendingKeysClasses.month.value,
-        extendingKeysClasses.currentDate.value,
-        extendingKeysClasses.dateInRange.value,
-      ]),
-    },
-    lastMonthInRange: {
-      base: computed(() => [
-        extendingKeysClasses.month.value,
-        extendingKeysClasses.edgeDateInRange.value,
-        extendingKeysClasses.lastDateInRange.value,
-      ]),
-    },
-    currentFirstMonthInRange: {
-      base: computed(() => [
-        extendingKeysClasses.month.value,
-        extendingKeysClasses.edgeDateInRange.value,
-        extendingKeysClasses.firstDateInRange.value,
-        extendingKeysClasses.currentDate.value,
-      ]),
-    },
-    currentLastMonthInRange: {
-      base: computed(() => [
-        extendingKeysClasses.month.value,
-        extendingKeysClasses.edgeDateInRange.value,
-        extendingKeysClasses.lastDateInRange.value,
-        extendingKeysClasses.currentDate.value,
-      ]),
-    },
-    firstMonthInRange: {
-      base: computed(() => [
-        extendingKeysClasses.month.value,
-        extendingKeysClasses.edgeDateInRange.value,
-        extendingKeysClasses.firstDateInRange.value,
-      ]),
-    },
-    selectedMonth: {
-      base: computed(() => [
-        extendingKeysClasses.month.value,
-        extendingKeysClasses.selectedDate.value,
-      ]),
-    },
-    activeMonth: {
-      base: computed(() => [
-        extendingKeysClasses.month.value,
-        extendingKeysClasses.activeDate.value,
-      ]),
-    },
-    currentYear: {
-      base: computed(() => [
-        extendingKeysClasses.year.value,
-        extendingKeysClasses.currentDate.value,
-      ]),
-    },
-    yearInRange: {
-      base: computed(() => [
-        extendingKeysClasses.year.value,
-        extendingKeysClasses.dateInRange.value,
-      ]),
-    },
-    singleCurrentYearInRange: {
-      base: computed(() => [
-        extendingKeysClasses.year.value,
-        extendingKeysClasses.dateInRange.value,
-        extendingKeysClasses.currentDate.value,
-      ]),
-    },
-    singleYearInRange: {
-      base: computed(() => [
-        extendingKeysClasses.year.value,
-        extendingKeysClasses.dateInRange.value,
-      ]),
-    },
-    currentYearInRange: {
-      base: computed(() => [
-        extendingKeysClasses.year.value,
-        extendingKeysClasses.currentDate.value,
-        extendingKeysClasses.dateInRange.value,
-      ]),
-    },
-    lastYearInRange: {
-      base: computed(() => [
-        extendingKeysClasses.year.value,
-        extendingKeysClasses.edgeDateInRange.value,
-        extendingKeysClasses.lastDateInRange.value,
-      ]),
-    },
-    firstYearInRange: {
-      base: computed(() => [
-        extendingKeysClasses.year.value,
-        extendingKeysClasses.edgeDateInRange.value,
-        extendingKeysClasses.firstDateInRange.value,
-      ]),
-    },
-    selectedYear: {
-      base: computed(() => [
-        extendingKeysClasses.year.value,
-        extendingKeysClasses.selectedDate.value,
-      ]),
-    },
-    activeYear: {
-      base: computed(() => [
-        extendingKeysClasses.year.value,
-        extendingKeysClasses.activeDate.value,
-      ]),
-    },
-  });
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs() };
 }

package/ui.form-checkbox/useAttrs.ts

@@ -16,7 +16,7 @@ export default function useAttrs(
   props: UCheckboxProps,
   { checkboxColor, checkboxSize }: ComponentState,
 ): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
 
   const mutatedProps = computed(() => ({
     color: checkboxColor.value,
@@ -25,11 +25,5 @@ export default function useAttrs(
     error: Boolean(props.error),
   }));
 
-  const keysAttrs = getKeysAttrs(mutatedProps);
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs(mutatedProps) };
 }

package/ui.form-checkbox-group/useAttrs.ts

@@ -6,13 +6,7 @@ import type { UseAttrs } from "../types.ts";
 import type { UCheckboxGroupProps, Config } from "./types.ts";
 
 export default function useAttrs(props: UCheckboxGroupProps): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
 
-  const keysAttrs = getKeysAttrs();
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs() };
 }

package/ui.form-checkbox-multi-state/useAttrs.ts

@@ -15,7 +15,7 @@ export default function useAttrs(
   props: UCheckboxMultiStateProps,
   { selected }: ComponentState,
 ): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
   const keysAttrs = getKeysAttrs();
 
   const checkboxAttrs = keysAttrs.multiStateCheckboxAttrs as Ref<{
@@ -33,9 +33,5 @@ export default function useAttrs(
     return checkboxAttrs.value;
   });
 
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...keysAttrs };
 }

package/ui.form-color-picker/useAttrs.js

@@ -3,13 +3,7 @@ import useUI from "../composables/useUI.ts";
 import defaultConfig from "./config.js";
 
 export default function useAttrs(props) {
-  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { config, getKeysAttrs } = useUI(defaultConfig, () => props.config);
 
-  const keysAttrs = getKeysAttrs();
-
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...getKeysAttrs() };
 }

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

@@ -18,7 +18,7 @@ export default function useAttrs(
   props: UDatePickerProps<unknown>,
   { isTop, isRight }: ComponentState,
 ): UseAttrs<Config> {
-  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { config, getKeysAttrs } = useUI(defaultConfig, () => props.config);
 
   const mutatedProps = computed(() => ({
     openDirectionY: isTop.value ? Direction.Top : Direction.Bottom,
@@ -39,9 +39,5 @@ export default function useAttrs(
     }
   });
 
-  return {
-    config,
-    ...keysAttrs,
-    hasSlotContent,
-  };
+  return { config, ...keysAttrs };
 }

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

@@ -130,34 +130,6 @@ const isPeriod = computed(() => {
 
 const elementId = props.id || useId();
 
-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 calendarValue = ref(props.modelValue);
 const activeDate: Ref<string | Date | null> = ref(
   props.modelValue.from !== null
@@ -249,6 +221,34 @@ 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,