vueless 0.0.383 → 0.0.384

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.383",
+  "version": "0.0.384",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

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

@@ -1,66 +1,44 @@
-import useUI from "../composables/useUI.js";
-import { cva } from "../utils/utilUI.js";
 import { computed, watchEffect } from "vue";
 import { merge } from "lodash-es";
+import useUI from "../composables/useUI.js";
 
 import defaultConfig from "./config.js";
 import { POSITION } from "../composables/useAutoPosition.js";
 
 export default function useAttrs(props, { isShownCalendar, isTop, isRight }) {
-  const { config, getAttrs, isSystemKey, hasSlotContent, isCVA } = useUI(
+  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI(
     defaultConfig,
     () => props.config,
   );
-  const attrs = {};
-
-  for (const key in defaultConfig) {
-    if (isSystemKey(key)) continue;
-
-    const classes = computed(() => {
-      let value = config.value[key];
 
-      if (isCVA(value)) {
-        value = cva(value)({
-          ...props,
-          openDirectionY: isTop.value ? POSITION.top : POSITION.bottom,
-          openDirectionX: isRight.value ? POSITION.right : POSITION.left,
-          error: Boolean(props.error),
-          description: Boolean(props.description),
-        });
-      }
+  const mutatedProps = computed(() => ({
+    openDirectionY: isTop.value ? POSITION.top : POSITION.bottom,
+    openDirectionX: isRight.value ? POSITION.right : POSITION.left,
+    error: Boolean(props.error),
+    description: Boolean(props.description),
+  }));
 
-      return value;
-    });
+  const extendingKeys = ["inputFocused"];
+  const extendingKeysClasses = getExtendingKeysClasses(extendingKeys, mutatedProps);
 
-    attrs[`${key}Attrs`] = getAttrs(key, { classes });
-
-    if (key === "input") {
-      const inputAttrs = attrs[`${key}Attrs`];
-
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...inputAttrs.value,
-        config: {
-          ...inputAttrs.value.config,
-          ...(isShownCalendar.value ? config.value.inputFocused : {}),
-        },
-      }));
-    }
+  const keysAttrs = getKeysAttrs(mutatedProps, extendingKeys, {
+    input: {
+      extend: computed(() => [isShownCalendar.value && extendingKeysClasses.inputFocused.value]),
+    },
+  });
 
-    if (key === "calendar") {
-      /* Merging DatePicker's i18n translations into Calendar's i18n translations. */
-      watchEffect(() => {
-        const calendarConfig = attrs[`${key}Attrs`].value.config || {};
+  /* Merging DatePicker's i18n translations into Calendar's i18n translations. */
+  watchEffect(() => {
+    const calendarConfig = keysAttrs.calendarAttrs.value.config || {};
 
-        if (!calendarConfig.i18n || props.config.i18n) {
-          attrs[`${key}Attrs`].value.config.i18n = merge(calendarConfig.i18n, config.value.i18n);
-        }
-      });
+    if (!calendarConfig.i18n || props.config.i18n) {
+      keysAttrs.calendarAttrs.value.config.i18n = merge(calendarConfig.i18n, config.value.i18n);
     }
-  }
+  });
 
   return {
-    ...attrs,
     config,
+    ...keysAttrs,
     hasSlotContent,
   };
 }

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

@@ -98,7 +98,7 @@
           :is-period="isPeriod"
           :custom-range-button="customRangeButton"
           :locale="locale"
-          :attrs="periodDatesMenuAttrs"
+          :attrs="keysAttrs"
           :date-format="dateFormat"
           :min-date="minDate"
           :max-date="maxDate"
@@ -120,7 +120,7 @@
           :locale="locale"
           :date-format="dateFormat"
           :config="config"
-          :attrs="rangeInputsAttrs"
+          :attrs="keysAttrs"
         />
 
         <div v-if="inputRangeToError || inputRangeFromError" v-bind="inputRangeErrorAttrs">
@@ -403,6 +403,7 @@ const elementId = props.id || useId();
 
 const {
   config,
+  keysAttrs,
   wrapperAttrs,
   calendarAttrs,
   inputAttrs,
@@ -412,8 +413,6 @@ const {
   shiftRangeButtonAttrs,
   rangeInputWrapperAttrs,
   inputRangeErrorAttrs,
-  periodDatesMenuAttrs,
-  rangeInputsAttrs,
 } = useAttrs(props, { isShownMenu, isTop, isRight, isPeriod });
 
 const calendarValue = ref(props.modelValue);

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

@@ -5,7 +5,7 @@
       v-model="rangeStart"
       :error="inputRangeFromError"
       size="md"
-      v-bind="attrs.rangeInputFirstAttrs"
+      v-bind="rangeInputFirstAttrs"
       :name="rangeInputName"
       @input="onInputRangeInput($event, INPUT_RANGE_TYPE.start)"
     />
@@ -15,7 +15,7 @@
       v-model="rangeEnd"
       :error="inputRangeToError"
       size="md"
-      v-bind="attrs.rangeInputLastAttrs"
+      v-bind="rangeInputLastAttrs"
       :name="rangeInputName"
       @input="onInputRangeInput($event, INPUT_RANGE_TYPE.end)"
     />
@@ -58,6 +58,8 @@ const props = defineProps({
   },
 });
 
+const { rangeInputFirstAttrs, rangeInputLastAttrs } = props.attrs;
+
 const localValue = defineModel("localValue", { required: true, type: Object });
 const inputRangeFromError = defineModel("inputRangeFromError", { required: true, type: String });
 const inputRangeToError = defineModel("inputRangeToError", { required: true, type: String });

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

@@ -1,5 +1,5 @@
 <template>
-  <div v-bind="attrs.periodsRowAttrs">
+  <div v-bind="periodsRowAttrs">
     <template v-for="periodButton in periods" :key="periodButton.name">
       <UButton
         v-if="periodButton.name !== period"
@@ -9,7 +9,7 @@
         size="xs"
         variant="thirdary"
         :label="periodButton.title"
-        v-bind="attrs.periodButtonAttrs"
+        v-bind="periodButtonAttrs"
         @click="onClickPeriodButton(periodButton.name)"
       />
 
@@ -21,13 +21,13 @@
         size="xs"
         variant="thirdary"
         :label="periodButton.title"
-        v-bind="attrs.periodButtonActiveAttrs"
+        v-bind="periodButtonActiveAttrs"
         @click="onClickPeriodButton(periodButton.name)"
       />
     </template>
   </div>
 
-  <div v-bind="attrs.periodsRowAttrs">
+  <div v-bind="periodsRowAttrs">
     <UButton
       v-if="customRangeButton.range.to && customRangeButton.range.from && PERIOD.custom !== period"
       square
@@ -35,13 +35,13 @@
       no-ring
       size="xs"
       variant="thirdary"
-      v-bind="attrs.periodButtonAttrs"
+      v-bind="periodButtonAttrs"
       @click="onClickCustomRangeButton"
     >
       {{ customRangeButton.label }}
       <span
         v-if="customRangeButton.description"
-        v-bind="attrs.customRangeDescription"
+        v-bind="customRangeDescription"
         v-text="customRangeButton.description"
       />
     </UButton>
@@ -53,13 +53,13 @@
       no-ring
       size="xs"
       variant="thirdary"
-      v-bind="attrs.periodButtonActiveAttrs"
+      v-bind="periodButtonActiveAttrs"
       @click="onClickCustomRangeButton"
     >
       {{ customRangeButton.label }}
       <span
         v-if="customRangeButton.description"
-        v-bind="attrs.customRangeDescription"
+        v-bind="customRangeDescription"
         v-text="customRangeButton.description"
       />
     </UButton>
@@ -73,7 +73,7 @@
       variant="thirdary"
       :label="locale.ownRange"
       :left-icon="config.defaults.ownRangeIcon"
-      v-bind="attrs.periodButtonAttrs"
+      v-bind="periodButtonAttrs"
       @click="onClickOwnRange"
     />
 
@@ -86,13 +86,13 @@
       variant="thirdary"
       :label="locale.ownRange"
       :left-icon="config.defaults.ownRangeIcon"
-      v-bind="attrs.periodButtonActiveAttrs"
+      v-bind="periodButtonActiveAttrs"
       @click="onClickOwnRange"
     />
   </div>
 
   <template v-if="!isPeriod.ownRange && !isPeriod.custom">
-    <div v-bind="attrs.rangeSwitchWrapperAttrs">
+    <div v-bind="rangeSwitchWrapperAttrs">
       <UButton
         square
         no-ring
@@ -100,11 +100,11 @@
         color="gray"
         variant="thirdary"
         :left-icon="config.defaults.prevIcon"
-        v-bind="attrs.rangeSwitchButtonAttrs"
+        v-bind="rangeSwitchButtonAttrs"
         @click="emit('clickPrev')"
       />
 
-      <div v-bind="attrs.rangeSwitchTitleAttrs">
+      <div v-bind="rangeSwitchTitleAttrs">
         {{ rangeSwitchTitle }}
       </div>
 
@@ -115,12 +115,12 @@
         color="gray"
         variant="thirdary"
         :left-icon="config.defaults.nextIcon"
-        v-bind="attrs.rangeSwitchButtonAttrs"
+        v-bind="rangeSwitchButtonAttrs"
         @click="emit('clickNext')"
       />
     </div>
 
-    <div v-if="isDatePeriodOutOfRange" v-bind="attrs.periodDateListAttrs">
+    <div v-if="isDatePeriodOutOfRange" v-bind="periodDateListAttrs">
       <template v-for="(date, index) in periodDateList" :key="date.title">
         <UButton
           v-if="getDatePeriodState(date, index).isActive"
@@ -128,7 +128,7 @@
           size="sm"
           variant="thirdary"
           :disabled="isDatePeriodOutOfRange(date)"
-          v-bind="attrs.periodDateActiveAttrs"
+          v-bind="periodDateActiveAttrs"
           :label="String(date.title)"
           :class="{ 'rounded-dynamic': getDatePeriodState(date, index).isSingleItem }"
           @click="selectDate(date), toggleMenu()"
@@ -140,7 +140,7 @@
           size="sm"
           variant="thirdary"
           :disabled="isDatePeriodOutOfRange(date)"
-          v-bind="attrs.firstPeriodGridDateAttrs"
+          v-bind="firstPeriodGridDateAttrs"
           :label="String(date.title)"
           :class="{ 'rounded-dynamic': getDatePeriodState(date, index).isSingleItem }"
           @click="selectDate(date), toggleMenu()"
@@ -152,7 +152,7 @@
           size="sm"
           variant="thirdary"
           :disabled="isDatePeriodOutOfRange(date)"
-          v-bind="attrs.firstPeriodListDateAttrs"
+          v-bind="firstPeriodListDateAttrs"
           :label="String(date.title)"
           :class="{ 'rounded-dynamic': getDatePeriodState(date, index).isSingleItem }"
           @click="selectDate(date), toggleMenu()"
@@ -164,7 +164,7 @@
           size="sm"
           variant="thirdary"
           :disabled="isDatePeriodOutOfRange(date)"
-          v-bind="attrs.lastPeriodGridDateAttrs"
+          v-bind="lastPeriodGridDateAttrs"
           :label="String(date.title)"
           :class="{ 'rounded-dynamic': getDatePeriodState(date, index).isSingleItem }"
           @click="selectDate(date), toggleMenu()"
@@ -176,7 +176,7 @@
           size="sm"
           variant="thirdary"
           :disabled="isDatePeriodOutOfRange(date)"
-          v-bind="attrs.lastPeriodListDateAttrs"
+          v-bind="lastPeriodListDateAttrs"
           :label="String(date.title)"
           :class="{ 'rounded-dynamic': getDatePeriodState(date, index).isSingleItem }"
           @click="selectDate(date), toggleMenu()"
@@ -188,7 +188,7 @@
           size="sm"
           variant="thirdary"
           :disabled="isDatePeriodOutOfRange(date)"
-          v-bind="attrs.periodDateInRangeAttrs"
+          v-bind="periodDateInRangeAttrs"
           :label="String(date.title)"
           :class="{ 'rounded-dynamic': getDatePeriodState(date, index).isSingleItem }"
           @click="selectDate(date), toggleMenu()"
@@ -200,7 +200,7 @@
           size="sm"
           variant="thirdary"
           :disabled="isDatePeriodOutOfRange(date)"
-          v-bind="attrs.periodDateAttrs"
+          v-bind="periodDateAttrs"
           :label="String(date.title)"
           @click="selectDate(date), toggleMenu()"
         />
@@ -274,6 +274,24 @@ const period = defineModel("period", { required: true, type: String });
 
 const isDatePeriodOutOfRange = inject("isDatePeriodOutOfRange", null);
 
+const {
+  periodButtonAttrs,
+  periodsRowAttrs,
+  periodButtonActiveAttrs,
+  customRangeDescription,
+  rangeSwitchWrapperAttrs,
+  rangeSwitchButtonAttrs,
+  rangeSwitchTitleAttrs,
+  periodDateListAttrs,
+  periodDateActiveAttrs,
+  firstPeriodGridDateAttrs,
+  firstPeriodListDateAttrs,
+  lastPeriodGridDateAttrs,
+  lastPeriodListDateAttrs,
+  periodDateInRangeAttrs,
+  periodDateAttrs,
+} = props.attrs;
+
 const periods = computed(() => [
   { name: PERIOD.week, title: props.locale.week },
   { name: PERIOD.month, title: props.locale.month },

package/ui.form-date-picker-range/config.js

@@ -64,20 +64,25 @@ export default /*tw*/ {
   periodDateActive: "bg-gray-100",
   customRangeDescription: "",
   rangeInputWrapper: "flex mt-4 -space-x-px group/range-input-wrapper",
-  rangeInputFirst: "group/range-input-first",
-  rangeInputLast: "group/range-input-last",
-  rangeInput: {
+  rangeInputFirst: {
     component: "{UInput}",
     label: {
       component: "{ULabel}",
       wrapper: "w-full hover:z-10 focus:z-10",
       description: "hidden",
     },
-    block: `
-      focus-within:z-10 focus-within:ring-0
-      group-[]/range-input-first:rounded-r-none group-[]/range-input-last:rounded-l-none
-    `,
-    input: "group-[]/range-input-first:rounded-r-none group-[]/range-input-last:rounded-l-none",
+    block: "focus-within:z-10 focus-within:ring-0 rounded-r-none",
+    input: "rounded-r-none",
+  },
+  rangeInputLast: {
+    component: "{UInput}",
+    label: {
+      component: "{ULabel}",
+      wrapper: "w-full hover:z-10 focus:z-10",
+      description: "hidden",
+    },
+    block: "focus-within:z-10 focus-within:ring-0 rounded-l-none",
+    input: "rounded-l-none",
   },
   inputRangeError: "text-xs font-normal leading-none mt-2 text-center text-red-500",
   calendar: {

package/ui.form-date-picker-range/useAttrs.js

@@ -1,223 +1,115 @@
-import useUI from "../composables/useUI.js";
-import { cx, cva } from "../utils/utilUI.js";
-
 import { computed, watchEffect } from "vue";
 import { merge } from "lodash-es";
 
+import useUI from "../composables/useUI.js";
+
 import defaultConfig from "./config.js";
 import { POSITION } from "../composables/useAutoPosition.js";
 
 export default function useAttrs(props, { isShownMenu, isTop, isRight, isPeriod }) {
-  const { config, getAttrs, isSystemKey, hasSlotContent, isCVA } = useUI(
+  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI(
     defaultConfig,
     () => props.config,
   );
-  const attrs = {};
 
-  const variantKeys = [
-    "rangeInputFirst",
-    "rangeInputLast",
-    "periodButtonActive",
-    "periodDateWeekList",
+  const mutatedProps = computed(() => ({
+    openDirectionY: isTop.value ? POSITION.top : POSITION.bottom,
+    openDirectionX: isRight.value ? POSITION.right : POSITION.left,
+    error: Boolean(props.error),
+    description: Boolean(props.description),
+  }));
+
+  const extendingKeys = [
+    "buttonWrapperActive",
+    "buttonActive",
+    "edgePeriodDate",
     "periodDateMonthList",
-    "periodDateQuarterList",
-    "periodDateYearList",
-    "firstPeriodGridDate",
-    "firstPeriodListDate",
-    "lastPeriodGridDate",
-    "lastPeriodListDate",
-    "periodDateActive",
-    "periodDateInRange",
   ];
+  const extendingKeysClasses = getExtendingKeysClasses(
+    [
+      ...extendingKeys,
+      "periodButton",
+      "periodDateList",
+      "periodDate",
+      "periodDateWeekList",
+      "periodDateQuarterList",
+      "periodDateYearList",
+    ],
+    mutatedProps,
+  );
 
-  for (const key in defaultConfig) {
-    if (isSystemKey(key) && variantKeys.includes(key)) continue;
-
-    const classes = computed(() => {
-      let value = config.value[key];
-
-      if (isCVA(value)) {
-        value = cva(value)({
-          ...props,
-          error: Boolean(props.error),
-          description: Boolean(props.description),
-        });
-      }
-
-      return value;
-    });
-
-    attrs[`${key}Attrs`] = getAttrs(key, { classes });
-
-    if (key === "menu") {
-      const menuAttrs = attrs[`${key}Attrs`];
-
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...menuAttrs.value,
-        class: cx([
-          cva(config.value.menu)({
-            openDirectionY: isTop.value ? POSITION.top : POSITION.bottom,
-            openDirectionX: isRight.value ? POSITION.right : POSITION.left,
-          }),
-          menuAttrs.value.class,
-        ]),
-      }));
-    }
-
-    if (key === "buttonWrapper") {
-      const buttonWrapperAttrs = attrs[`${key}Attrs`];
-
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...buttonWrapperAttrs.value,
-        class: cx([
-          buttonWrapperAttrs.value.class,
-          isShownMenu.value && config.value.buttonWrapperActive,
-        ]),
-      }));
-    }
-
-    if (key === "button") {
-      const buttonAttrs = attrs[`${key}Attrs`];
-
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...buttonAttrs.value,
-        class: cx([buttonAttrs.value.class, isShownMenu.value && config.value.buttonActive]),
-      }));
-    }
-
-    if (key === "calendar") {
-      /* Merging DatePickerRange's i18n translations into Calendar's i18n translations. */
-      watchEffect(() => {
-        const calendarConfig = attrs[`${key}Attrs`].value.config || {};
-
-        if (!calendarConfig.i18n || props.config.i18n) {
-          attrs[`${key}Attrs`].value.config.i18n = merge(calendarConfig.i18n, config.value.i18n);
-        }
-      });
-    }
-  }
-
-  for (const key of variantKeys) {
-    if (key === "rangeInputFirst") {
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...attrs.rangeInputAttrs.value,
-        class: cx([attrs.rangeInputAttrs.value.class, config.value.rangeInputFirst]),
-      }));
-    }
-
-    if (key === "rangeInputLast") {
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...attrs.rangeInputAttrs.value,
-        class: cx([attrs.rangeInputAttrs.value.class, config.value.rangeInputLast]),
-      }));
-    }
-
-    if (key === "periodButtonActive") {
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...attrs.periodButtonAttrs.value,
-        class: cx([attrs.periodButtonAttrs.value.class, config.value.periodButtonActive]),
-      }));
-    }
-
-    if (key === "periodDateWeekList") {
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...attrs.periodDateListAttrs.value,
-        class: cx([attrs.periodDateListAttrs.value.class, config.value.periodDateWeekList]),
-      }));
-    }
-
-    if (key === "periodDateMonthList") {
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...attrs.periodDateListAttrs.value,
-        class: cx([attrs.periodDateListAttrs.value.class, config.value.periodDateMonthList]),
-      }));
-    }
-
-    if (key === "periodDateQuarterList") {
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...attrs.periodDateListAttrs.value,
-        class: cx([attrs.periodDateListAttrs.value.class, config.value.periodDateQuarterList]),
-      }));
-    }
-
-    if (key === "periodDateYearList") {
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...attrs.periodDateListAttrs.value,
-        class: cx([attrs.periodDateListAttrs.value.class, config.value.periodDateYearList]),
-      }));
-    }
-
-    if (key === "periodDateActive") {
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...attrs.periodDateAttrs.value,
-        class: cx([attrs.periodDateAttrs.value.class, config.value.periodDateActive]),
-      }));
-    }
+  const keysAttrs = getKeysAttrs(mutatedProps, extendingKeys, {
+    buttonWrapper: {
+      extend: computed(() => [isShownMenu.value && extendingKeysClasses.buttonWrapperActive.value]),
+    },
+    button: {
+      extend: computed(() => [isShownMenu.value && extendingKeysClasses.buttonActive.value]),
+    },
+    periodDateList: {
+      extend: computed(() => [
+        isPeriod.value.week && extendingKeysClasses.periodDateWeekList.value,
+        isPeriod.value.month && extendingKeysClasses.periodDateMonthList.value,
+        isPeriod.value.quarter && extendingKeysClasses.periodDateQuarterList.value,
+        isPeriod.value.year && extendingKeysClasses.periodDateYearList.value,
+      ]),
+    },
+    periodButtonActive: {
+      base: computed(() => [extendingKeysClasses.periodButton.value]),
+    },
+    periodDateWeekList: {
+      base: computed(() => [extendingKeysClasses.periodDateList.value]),
+    },
+    periodDateQuarterList: {
+      base: computed(() => [extendingKeysClasses.periodDateList.value]),
+    },
+    periodDateYearList: {
+      base: computed(() => [extendingKeysClasses.periodDateList.value]),
+    },
+    periodDateActive: {
+      base: computed(() => [extendingKeysClasses.periodDate.value]),
+    },
+    periodDateInRange: {
+      base: computed(() => [extendingKeysClasses.periodDate.value]),
+    },
+    firstPeriodGridDate: {
+      base: computed(() => [
+        extendingKeysClasses.periodDate.value,
+        extendingKeysClasses.edgePeriodDate.value,
+      ]),
+    },
+    firstPeriodListDate: {
+      base: computed(() => [
+        extendingKeysClasses.periodDate.value,
+        extendingKeysClasses.edgePeriodDate.value,
+      ]),
+    },
+    lastPeriodGridDate: {
+      base: computed(() => [
+        extendingKeysClasses.periodDate.value,
+        extendingKeysClasses.edgePeriodDate.value,
+      ]),
+    },
+    lastPeriodListDate: {
+      base: computed(() => [
+        extendingKeysClasses.periodDate.value,
+        extendingKeysClasses.edgePeriodDate.value,
+      ]),
+    },
+  });
 
-    if (key === "periodDateInRange") {
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...attrs.periodDateAttrs.value,
-        class: cx([attrs.periodDateAttrs.value.class, config.value.periodDateInRange]),
-      }));
-    }
+  /* Merging DatePickerRange's i18n translations into Calendar's i18n translations. */
+  watchEffect(() => {
+    const calendarConfig = keysAttrs.calendarAttrs.value.config || {};
 
-    if (
-      [
-        "firstPeriodGridDate",
-        "firstPeriodListDate",
-        "lastPeriodGridDate",
-        "lastPeriodListDate",
-      ].includes(key)
-    ) {
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...attrs.periodDateAttrs.value,
-        class: cx([
-          attrs.periodDateAttrs.value.class,
-          config.value.edgePeriodDate,
-          config.value[key],
-        ]),
-      }));
+    if (!calendarConfig.i18n || props.config.i18n) {
+      keysAttrs.calendarAttrs.value.config.i18n = merge(calendarConfig.i18n, config.value.i18n);
     }
-  }
-
-  const periodDateListAttrs = computed(() => {
-    if (isPeriod.value.week) return attrs.periodDateWeekListAttrs.value;
-    if (isPeriod.value.month) return attrs.periodDateMonthListAttrs.value;
-    if (isPeriod.value.quarter) return attrs.periodDateQuarterListAttrs.value;
-    if (isPeriod.value.year) return attrs.periodDateYearListAttrs.value;
-
-    return attrs.periodDateListAttrs.value;
   });
 
-  const periodDatesMenuAttrs = computed(() => ({
-    periodsRowAttrs: attrs.periodsRowAttrs.value,
-    periodButtonAttrs: attrs.periodButtonAttrs.value,
-    periodButtonActiveAttrs: attrs.periodButtonActiveAttrs.value,
-    periodDateAttrs: attrs.periodDateAttrs.value,
-    periodDateActiveAttrs: attrs.periodDateActiveAttrs.value,
-    periodDateInRangeAttrs: attrs.periodDateInRangeAttrs.value,
-    periodDateListAttrs: periodDateListAttrs.value,
-    rangeSwitchWrapperAttrs: attrs.rangeSwitchWrapperAttrs.value,
-    rangeSwitchButtonAttrs: attrs.rangeSwitchButtonAttrs.value,
-    rangeSwitchTitleAttrs: attrs.rangeSwitchTitleAttrs.value,
-    lastPeriodGridDateAttrs: attrs.lastPeriodGridDateAttrs.value,
-    firstPeriodGridDateAttrs: attrs.firstPeriodGridDateAttrs.value,
-    lastPeriodListDateAttrs: attrs.lastPeriodListDateAttrs.value,
-    firstPeriodListDateAttrs: attrs.firstPeriodListDateAttrs.value,
-    customRangeDescription: attrs.customRangeDescriptionAttrs.value,
-  }));
-
-  const rangeInputsAttrs = computed(() => ({
-    rangeInputFirstAttrs: attrs.rangeInputFirstAttrs.value,
-    rangeInputLastAttrs: attrs.rangeInputLastAttrs.value,
-  }));
-
   return {
-    ...attrs,
-    periodDatesMenuAttrs,
-    rangeInputsAttrs,
-    periodDateListAttrs,
     config,
+    keysAttrs,
+    ...keysAttrs,
     hasSlotContent,
   };
 }

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.383",
+  "version": "0.0.384",
   "contributions": {
     "html": {
       "description-markup": "markdown",