vueless 0.0.382 → 0.0.384

package/composables/useUI.js

@@ -22,11 +22,11 @@ import {
 } from "../constants.js";
 
 /**
-  Merging component configs in a given sequence (bigger number = bigger priority):
-  1. Default component config
-  2. Custom global component config (/vueless.config.js)
-  3. Component config (:config="{...}" props)
-  4. Component classes (class="...")
+ * Merging component configs in a given sequence (bigger number = bigger priority):
+ * 1. Default component config
+ * 2. Custom global component config (/vueless.config.js)
+ * 3. Component config (:config="{...}" props)
+ * 4. Component classes (class="...")
  */
 export default function useUI(defaultConfig = {}, propsConfigGetter = null, topLevelClassKey) {
   const { type, props } = getCurrentInstance();
@@ -109,7 +109,7 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
    * @param keysToExtendConfig
    * @returns {Object}
    */
-  function getKeysAttrs(mutatedProps, extendingKeys = [], keysToExtendConfig = {}) {
+  function getKeysAttrs(mutatedProps = {}, extendingKeys = [], keysToExtendConfig = {}) {
     const keysToExtend = Object.keys(keysToExtendConfig);
     const keysAttrs = {};
 
@@ -124,7 +124,6 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
         const { base, extend } = keysToExtendConfig[key];
         const keyAttrs = keysAttrs[`${key}Attrs`];
 
-        // TODO: if value of the key contains keys related to the nested nested component it should be skipped
         keysAttrs[`${key}Attrs`] = computed(() => ({
           ...keyAttrs.value,
           class: cx([
@@ -210,13 +209,13 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
 }
 
 /**
-  Get merged config based on config merging strategy.
-  @param {Object} defaultConfig
-  @param {Object} globalConfig
-  @param {Object} propsConfig
-  @param {string} vuelessStrategy - vueless top level merge strategy.
-
-  @returns {Object}
+ * Get merged config based on config merging strategy.
+ * @param {Object} defaultConfig
+ * @param {Object} globalConfig
+ * @param {Object} propsConfig
+ * @param {string} vuelessStrategy - vueless top level merge strategy.
+ *
+ * @returns {Object}
  */
 function getMergedConfig({ defaultConfig, globalConfig, propsConfig, vuelessStrategy }) {
   defaultConfig = cloneDeep(defaultConfig);
@@ -243,15 +242,15 @@ function getMergedConfig({ defaultConfig, globalConfig, propsConfig, vuelessStra
 }
 
 /**
-  Recursively merge config objects with removing tailwind classes duplicates.
-  @param {Object} defaultConfig
-  @param {Object} globalConfig
-  @param {Object} propsConfig
-  @param {Object} config - final merged config.
-  @param {boolean} isReplace - enables class replacement instead of merge.
-  @param {boolean} isVarinants - if true, prevents adding a "base" key into nested objects.
-
-  @returns {Object}
+ * Recursively merge config objects with removing tailwind classes duplicates.
+ * @param {Object} defaultConfig
+ * @param {Object} globalConfig
+ * @param {Object} propsConfig
+ * @param {Object} config - final merged config.
+ * @param {boolean} isReplace - enables class replacement instead of merge.
+ * @param {boolean} isVarinants - if true, prevents adding a "base" key into nested objects.
+ *
+ * @returns {Object}
  */
 function mergeConfigs({
   defaultConfig,
@@ -369,14 +368,14 @@ function stringToObject(value, { addBase = false }) {
 }
 
 /**
-  Merge CVA compound variants arrays.
-  @param {Object} defaultConfig
-  @param {Object} globalConfig
-  @param {Object} propsConfig
-  @param {string} key
-  @param {boolean} isReplace - enables class replacement instead of merge.
-
-  @returns {Array}
+ * Merge CVA compound variants arrays.
+ * @param {Object} defaultConfig
+ * @param {Object} globalConfig
+ * @param {Object} propsConfig
+ * @param {string} key
+ * @param {boolean} isReplace - enables class replacement instead of merge.
+ *
+ * @returns {Array}
  */
 function mergeCompoundVariants({ defaultConfig, globalConfig, propsConfig, key, isReplace }) {
   if (
@@ -393,9 +392,9 @@ function mergeCompoundVariants({ defaultConfig, globalConfig, propsConfig, key,
 
   const config = defaultConfig[key].map((defaultConfigItem) => {
     /**
-     Compare two objects by keys for match.
-     @param {Object} configItem
-     @returns {Boolean}
+     * Compare two objects by keys for match.
+     * @param {Object} configItem
+     * @returns {Boolean}
      */
     function isSameItem(configItem) {
       const hasConfigItemKeys = Object.keys(defaultConfigItem)
@@ -410,9 +409,9 @@ function mergeCompoundVariants({ defaultConfig, globalConfig, propsConfig, key,
     }
 
     /**
-     Find the same compound variant item in custom config if exist.
-     @param {Object} config
-     @returns {Object|undefined}
+     * Find the same compound variant item in custom config if exist.
+     * @param {Object} config
+     * @returns {Object|undefined}
      */
     function findItem(config = []) {
       const globalConfigUniqueItemIndex = globalConfigUniqueItems.findIndex(isSameItem);
@@ -446,12 +445,12 @@ function mergeCompoundVariants({ defaultConfig, globalConfig, propsConfig, key,
 }
 
 /**
-  Merge component classes from "class" attribute into final config.
-  @param {Object} config
-  @param {Object} attrs
-  @param {string} topLevelClassKey
-
-  @returns {Object}
+ * Merge component classes from "class" attribute into final config.
+ * @param {Object} config
+ * @param {Object} attrs
+ * @param {string} topLevelClassKey
+ *
+ * @returns {Object}
  */
 function mergeClassesIntoConfig(config, topLevelClassKey, attrs) {
   if (typeof config[topLevelClassKey] === "object") {
@@ -464,18 +463,18 @@ function mergeClassesIntoConfig(config, topLevelClassKey, attrs) {
 }
 
 /**
- Return base classes.
- @param { String | Object } value
- @returns { String }
+ * Return base classes.
+ * @param { String | Object } value
+ * @returns { String }
  */
 function getBaseClasses(value) {
   return typeof value === "object" ? value.base || "" : value || "";
 }
 
 /**
- Check is config key contains component name and if contains return it.
- @param { String | Object } value
- @returns { String }
+ * Check is config key contains component name and if contains return it.
+ * @param { String | Object } value
+ * @returns { String }
  */
 function getNestedComponent(value) {
   const classes = getBaseClasses(value);
@@ -487,9 +486,9 @@ function getNestedComponent(value) {
 }
 
 /**
- Check is config key not contains classes or CVA config object.
- @param { String } key
- @returns { Boolean }
+ * Check is config key not contains classes or CVA config object.
+ * @param { String } key
+ * @returns { Boolean }
  */
 function isSystemKey(key) {
   const isExactKey = Object.values(SYSTEM_CONFIG_KEY).some((value) => value === key);
@@ -498,9 +497,9 @@ function isSystemKey(key) {
 }
 
 /**
- Check is config contains default CVA keys.
- @param { Object | String } config
- @returns { Boolean }
+ * Check is config contains default CVA keys.
+ * @param { Object | String } config
+ * @returns { Boolean }
  */
 function isCVA(config) {
   if (typeof config !== "object") return false;
@@ -511,11 +510,11 @@ function isCVA(config) {
 }
 
 /**
-  Check if slot defined, and have a content.
-  @param slot
-  @param props
-
-  @returns {boolean}
+ * Check if slot defined, and have a content.
+ * @param slot
+ * @param props
+ *
+ * @returns {boolean}
  */
 function hasSlotContent(slot, props = {}) {
   const asArray = (arg) => (Array.isArray(arg) ? arg : arg != null ? [arg] : []);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.382",
+  "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/utils/utilHelper.js

@@ -1,9 +1,9 @@
 /**
- Deeply clone given object (same as lodash.cloneDeep).
- @param {Object} entity
- @param cache
-
- @returns {Object}
+ * Deeply clone given object (same as lodash.cloneDeep).
+ * @param {Object} entity
+ * @param cache
+ *
+ * @returns {Object}
  */
 export function cloneDeep(entity, cache = new WeakMap()) {
   // primitives
@@ -38,11 +38,11 @@ export function cloneDeep(entity, cache = new WeakMap()) {
 }
 
 /**
- Creates a debounced function with delay (same as lodash.debounce).
- @param {Function} func
- @param {Number} ms
-
- @returns {Function}
+ * Creates a debounced function with delay (same as lodash.debounce).
+ * @param {Function} func
+ * @param {Number} ms
+ *
+ * @returns {Function}
  */
 export function createDebounce(func, ms) {
   let timeout;
@@ -54,13 +54,13 @@ export function createDebounce(func, ms) {
 }
 
 /**
- Change page title in runtime by provided config.
- @param {Object} config
- @param {string} config.title
- @param {string} config.separator
- @param {string} config.suffix
-
- @returns {VoidFunction}
+ * Change page title in runtime by provided config.
+ * @param {Object} config
+ * @param {string} config.title
+ * @param {string} config.separator
+ * @param {string} config.suffix
+ *
+ * @returns {VoidFunction}
  */
 export function setTitle({ title, separator = " / ", suffix = "" }) {
   if (isCSR) {
@@ -69,13 +69,13 @@ export function setTitle({ title, separator = " / ", suffix = "" }) {
 }
 
 /**
- Check is code rendering on the server side.
- @returns {boolean}
+ * Check is code rendering on the server side.
+ * @returns {boolean}
  */
 export const isSSR = typeof window === "undefined";
 
 /**
- Check is code rendering on the client side.
- @returns {boolean}
+ * Check is code rendering on the client side.
+ * @returns {boolean}
  */
 export const isCSR = typeof window !== "undefined";

package/utils/utilStorybook.js

@@ -144,13 +144,6 @@ export function getSource(defaultConfig) {
   return defaultConfig.replace("export default /*tw*/ ", "").replace(";", "");
 }
 
-// TODO: remove it when allSlotsFragment will be replaced to getSlotsFragment
-export const allSlotsFragment = `
-  <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-    <template v-if="args[slot + 'Slot']">{{ args[slot + 'Slot'] }}</template>
-  </template>
-`;
-
 export function getSlotsFragment(defaultTemplate) {
   return `
   <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>

package/utils/utilUI.js

@@ -10,9 +10,9 @@ import {
 } from "../constants.js";
 
 /**
- Load Vueless config from the project root.
- Both for server and client side renderings.
- IIFE for SSR is used to prevent top level await issue.
+ * Load Vueless config from the project root.
+ * Both for server and client side renderings.
+ * IIFE for SSR is used to prevent top level await issue.
  */
 export let vuelessConfig = {};
 
@@ -35,9 +35,9 @@ if (isCSR) {
 }
 
 /**
- Extend twMerge (tailwind merge) by vueless and user config:
- All list of rules available here:
- https://github.com/dcastil/tailwind-merge/blob/v2.3.0/src/lib/default-config.ts
+ * Extend twMerge (tailwind merge) by vueless and user config:
+ * All list of rules available here:
+ * https://github.com/dcastil/tailwind-merge/blob/v2.3.0/src/lib/default-config.ts
  */
 const twMerge = extendTailwindMerge(
   merge(
@@ -59,11 +59,11 @@ const twMerge = extendTailwindMerge(
 );
 
 /**
- Export cva (class variance authority) methods:
-  * extended with tailwind-merge
-  * remove all Vueless nested component names ({U...} strings) from class list string.
- Learn more here: https://beta.cva.style
-*/
+ * Export cva (class variance authority) methods:
+ * – extended with tailwind-merge
+ * – remove all Vueless nested component names ({U...} strings) from class list string.
+ * Learn more here: https://beta.cva.style
+ */
 export const {
   cx,
   compose,
@@ -84,11 +84,11 @@ export const cva = ({ base = "", variants = {}, compoundVariants = [], defaultVa
   });
 
 /**
- Return default values for component props, icons, etc..
- @param { Object } defaultConfig
- @param { String } name
-
- @returns { Object }
+ * Return default values for component props, icons, etc..
+ * @param { Object } defaultConfig
+ * @param { String } name
+ *
+ * @returns { Object }
  */
 export function getDefault(defaultConfig, name) {
   const defaults = merge(
@@ -102,10 +102,11 @@ export function getDefault(defaultConfig, name) {
 }
 
 /**
- Return `grayscale` color if in component config it `brand` but in vueless config it `grayscale`
- Otherwise return given color.
- @param { String } color
- @returns { String }
+ * Return `grayscale` color if in component config it `brand` but in vueless config it `grayscale`
+ * Otherwise return given color.
+ * @param { String } color
+ *
+ * @returns { String }
  */
 export function getColor(color) {
   return (vuelessConfig.brand ?? DEFAULT_BRAND_COLOR) === GRAYSCALE_COLOR && color === BRAND_COLOR
@@ -114,11 +115,11 @@ export function getColor(color) {
 }
 
 /**
- Replace in tailwind classes `{color}` variable into given color.
- @param { String } classes
- @param { String } color
-
- @returns { String }
+ * Replace in tailwind classes `{color}` variable into given color.
+ * @param { String } classes
+ * @param { String } color
+ *
+ * @returns { String }
  */
 export function setColor(classes, color) {
   if (typeof classes !== "string") {
@@ -129,9 +130,10 @@ export function setColor(classes, color) {
 }
 
 /**
- Generates simple unique identifier.
- @param { Number } length
- @returns { String }
+ * Generates simple unique identifier.
+ * @param { Number } length
+ *
+ * @returns { String }
  */
 export function getRandomId(length = 15) {
   const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";

package/web-types.json

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