vueless 0.0.211 → 0.0.213

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.211",
+  "version": "0.0.213",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
@@ -37,8 +37,8 @@
     "@release-it/bumper": "^6.0.1",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vue/eslint-config-prettier": "^9.0.0",
-    "@vueless/plugin-vite": "^0.0.36",
-    "@vueless/storybook": "^0.0.33",
+    "@vueless/plugin-vite": "^0.0.37",
+    "@vueless/storybook": "^0.0.34",
     "@vueless/web-types": "^0.0.13",
     "autoprefixer": "^10.4.19",
     "cssnano": "^6.1.2",

package/ui.form-calendar/composables/attrs.composable.js

@@ -1,112 +1,71 @@
 import useUI from "../../composable.ui";
-import { cva } from "../../service.ui";
+import { cva, cx } from "../../service.ui";
 
 import { computed } from "vue";
 
 import defaultConfig from "../configs/default.config";
 
 export default function useAttrs(props) {
-  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
-  const { nextPrevWrapper } = config.value;
-
-  const cvaNextPrevWrapper = cva({
-    base: nextPrevWrapper.base,
-    variants: nextPrevWrapper.variants,
-    compoundVariants: nextPrevWrapper.compoundVariants,
-  });
-
-  const optionClasses = computed(() => cvaNextPrevWrapper({ range: props.range }));
-
-  const wrapperAttrs = getAttrs("wrapper");
-  const navigationAttrs = getAttrs("navigation");
-  const navigationSwitchViewButtonAttrs = getAttrs("navigationSwitchViewButton");
-  const dayViewSwitchLabelAttrs = getAttrs("dayViewSwitchLabel");
-  const dayViewSwitchLabelMonthAttrs = getAttrs("dayViewSwitchLabelMonth");
-  const dayViewSwitchLabelIconAttrs = getAttrs("dayViewSwitchLabelIcon");
-  const nextPrevButtonAttrs = getAttrs("nextPrevButton");
-  const nextIconAttrs = getAttrs("nextIcon");
-  const prevIconAttrs = getAttrs("prevIcon");
-  const dayViewAttrs = getAttrs("dayView");
-  const weekDaysAttrs = getAttrs("weekDays");
-  const weekDayAttrs = getAttrs("weekDay");
-  const daysAttrs = getAttrs("days");
-  const activeDayAttrs = getAttrs("activeDay");
-  const selectedDayAttrs = getAttrs("selectedDay");
-  const currentDayAttrs = getAttrs("currentDay");
-  const inRangeDayAttrs = getAttrs("inRangeDay");
-  const inRangeFirstDayAttrs = getAttrs("inRangeFirstDay");
-  const inRangeLastDayAttrs = getAttrs("inRangeLastDay");
-  const anotherMonthDayAttrs = getAttrs("anotherMonthDay");
-  const monthViewAttrs = getAttrs("monthView");
-  const selectedMonthAttrs = getAttrs("selectedMonth");
-  const activeMonthAttrs = getAttrs("activeMonth");
-  const yearViewAttrs = getAttrs("yearView");
-  const selectedYearAttrs = getAttrs("selectedYear");
-  const activeYearAttrs = getAttrs("activeYear");
-  const timepickerAttrs = getAttrs("timepicker");
-  const timepickerLabelAttrs = getAttrs("timepickerLabel");
-  const timepickerInput = getAttrs("timepickerInput");
-  const timepickerInputWrapperAttrs = getAttrs("timepickerInputWrapper");
-  const timepickerLeftInputAttrs = getAttrs("timepickerLeftInput", {
-    classes: timepickerInput.value.class,
-  });
-  const timepickerRightInputAttrs = getAttrs("timepickerRightInput", {
-    classes: timepickerInput.value.class,
-  });
-  const timepickerSubmitButtonAttrs = getAttrs("timepickerSubmitButton");
-
-  const nextPrevWrapperAttrs = getAttrs("nextPrevWrapper", { classes: optionClasses });
-
-  // TODO: Need to find other solution
-  const dayAttrs = (classes) => {
-    return getAttrs("day", { classes }).value;
-  };
+  const { config, getAttrs, isSystemKey } = useUI(defaultConfig, () => props.config);
+  const attrs = {};
 
-  const monthAttrs = (classes) => {
-    return getAttrs("month", { classes, isComponent: true }).value;
-  };
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
 
-  const yearAttrs = (classes) => {
-    return getAttrs("year", { classes, isComponent: true }).value;
-  };
+    const classes = computed(() => {
+      const value = config.value[key];
+
+      if (value.variants || value.compoundVariants) {
+        return cva(value)({
+          ...props,
+        });
+      }
+
+      return "";
+    });
+
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+
+    if (key === "timepickerLeftInput") {
+      const timepickerLeftInputAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...timepickerLeftInputAttrs.value,
+        class: cx([config.value.timepickerInput, timepickerLeftInputAttrs.value.class]),
+      }));
+    }
+
+    if (key === "timepickerRightInput") {
+      const timepickerRightInputAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...timepickerRightInputAttrs.value,
+        class: cx([config.value.timepickerInput, timepickerRightInputAttrs.value.class]),
+      }));
+    }
+
+    // TODO: Need to find other solution
+    if (key === "day") {
+      attrs[`${key}Attrs`] = (classes) => {
+        return getAttrs("day", { classes }).value;
+      };
+    }
+
+    if (key === "month") {
+      attrs[`${key}Attrs`] = (classes) => {
+        return getAttrs("month", { classes }).value;
+      };
+    }
+
+    if (key === "year") {
+      attrs[`${key}Attrs`] = (classes) => {
+        return getAttrs("year", { classes }).value;
+      };
+    }
+  }
 
   return {
+    ...attrs,
     config,
-    wrapperAttrs,
-    navigationAttrs,
-    navigationSwitchViewButtonAttrs,
-    dayViewSwitchLabelAttrs,
-    dayViewSwitchLabelMonthAttrs,
-    dayViewSwitchLabelIconAttrs,
-    nextIconAttrs,
-    nextPrevButtonAttrs,
-    prevIconAttrs,
-    dayViewAttrs,
-    weekDaysAttrs,
-    weekDayAttrs,
-    daysAttrs,
-    activeDayAttrs,
-    selectedDayAttrs,
-    currentDayAttrs,
-    anotherMonthDayAttrs,
-    dayAttrs,
-    inRangeDayAttrs,
-    inRangeFirstDayAttrs,
-    inRangeLastDayAttrs,
-    monthViewAttrs,
-    selectedMonthAttrs,
-    activeMonthAttrs,
-    monthAttrs,
-    yearViewAttrs,
-    selectedYearAttrs,
-    activeYearAttrs,
-    yearAttrs,
-    timepickerAttrs,
-    timepickerLabelAttrs,
-    timepickerInputWrapperAttrs,
-    timepickerLeftInputAttrs,
-    timepickerRightInputAttrs,
-    timepickerSubmitButtonAttrs,
-    nextPrevWrapperAttrs,
   };
 }

package/ui.form-calendar/configs/default.config.js

@@ -14,10 +14,10 @@ export default /*tw*/ {
       },
     },
   },
-  nextPrevButton: "",
-  nextIcon: "",
+  nextPrevButton: "{UButton}",
+  nextIcon: "{UIcon}",
   nextIconName: "keyboard_arrow_right",
-  prevIcon: "",
+  prevIcon: "{UIcon}",
   prevIconName: "keyboard_arrow_left",
   dayView: "",
   weekDays: "grid grid-cols-7",
@@ -32,19 +32,19 @@ export default /*tw*/ {
   currentDay: "hover:bg-brand-100 border-2 border-brand-900",
   anotherMonthDay: "hover:bg-brand-100 text-brand-400",
   monthView: "grid grid-cols-4 items-center justify-center",
-  month: "mx-auto flex h-12 w-full rounded-lg hover:!bg-brand-900 hover:text-white",
+  month: "{UButton} mx-auto flex h-12 w-full rounded-lg hover:!bg-brand-900 hover:text-white",
   selectedMonth: "bg-brand-900 hover:bg-brand-900 text-white",
   activeMonth: "bg-brand-100",
   yearView: "grid grid-cols-4 items-center justify-center",
-  year: "mx-auto flex h-12 w-full rounded-lg hover:!bg-brand-900 hover:text-white",
+  year: "{UButton} mx-auto flex h-12 w-full rounded-lg hover:!bg-brand-900 hover:text-white",
   selectedYear: "bg-brand-900 hover:bg-brand-900 text-white",
   activeYear: "bg-brand-100",
   timepicker: "mt-2 pl-1 pt-3 text-sm flex items-center justify-between gap-2 border-t border-brand-200",
   timepickerLabel: "w-full",
   timepickerInputWrapper: "flex items-center gap-px rounded-lg border border-brand-300",
-  timepickerInput: "w-11 border-none px-2.5 py-1.5 text-center text-sm focus:ring-brand-500",
-  timepickerLeftInput: "rounded-l-lg",
-  timepickerRightInput: "rounded-r-lg",
+  timepickerInput: " w-11 border-none px-2.5 py-1.5 text-center text-sm focus:ring-brand-500",
+  timepickerLeftInput: " rounded-l-lg",
+  timepickerRightInput: " rounded-r-lg",
   timepickerSubmitButton: "py-2 focus:ring-0 border-0",
   i18n: {
     weekdays: {

package/ui.form-calendar/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames } from "../service.storybook";
+import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
 
 import UCalendar from "../ui.form-calendar";
 
@@ -36,9 +36,7 @@ const DefaultTemplate = (args) => ({
   },
   template: `
       <UCalendar v-bind="args" v-model="value">
-        <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-          <template v-if="args[slot]">{{ args[slot] }}</template>
-        </template>
+        ${allSlotsFragment}
       </UCalendar>
 
       <div class="mt-4">

package/ui.form-calendar/index.vue

@@ -287,12 +287,44 @@ const props = defineProps({
 });
 
 const emit = defineEmits([
+  /**
+   * Triggers when date value changes.
+   * @property {object} newDate
+   */
   "update:modelValue",
+
+  /**
+   * Triggers when calendar view changes.
+   * @property {string} view
+   */
   "update:view",
+
+  /**
+   * Triggers when date value changes.
+   * @property {object} value
+   */
   "input",
+
+  /**
+   * Triggers when calendar date is selected by clicking "Enter".
+   */
   "submit",
+
+  /**
+   * Triggers when arrow keys are used to change calendar date.
+   */
   "keydown",
+
+  /**
+   * Triggers when the date input value is changed by the user.
+   * @property {string} value
+   */
   "userDateChange",
+
+  /**
+   * Triggers when the date format applied to the input changes.
+   * @property {string} value
+   */
   "formattedDateChange",
 ]);
 

package/ui.form-color-picker/composables/attrs.composable.js

@@ -4,46 +4,37 @@ import { cva } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 
-export function useAttrs(props) {
-  const { config, getAttrs, setColor, getColor } = useUI(defaultConfig, () => props.config);
-  const { list, radio } = config.value;
-
-  const cvaList = cva({
-    base: list.base,
-    variants: list.variants,
-    compoundVariants: list.compoundVariants,
-  });
-
-  const cvaRadio = cva({
-    base: radio.base,
-    variants: radio.variants,
-    compoundVariants: radio.compoundVariants,
-  });
-
-  const listClasses = computed(() => cvaList({ size: props.size }));
-  const radioClasses = computed(() =>
-    setColor(
-      cvaRadio({
-        color: getColor(props.color),
-      }),
-      props.color,
-    ),
+export default function useAttrs(props) {
+  const { config, getAttrs, setColor, getColor, isSystemKey } = useUI(
+    defaultConfig,
+    () => props.config,
   );
+  const attrs = {};
 
-  const labelAttrs = getAttrs("label");
-  const listAttrs = getAttrs("list", { classes: listClasses });
-  const unselectedAttrs = getAttrs("unselected");
-  const unselectedRadioAttrs = getAttrs("unselectedRadio", { isComponent: true });
-  const unselectedIconAttrs = getAttrs("unselectedIcon", { isComponent: true });
-  const radioAttrs = getAttrs("radio", { classes: radioClasses, isComponent: true });
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
+
+    const classes = computed(() => {
+      const value = config.value[key];
+
+      if (value.variants || value.compoundVariants) {
+        return setColor(
+          cva(value)({
+            ...props,
+            color: getColor(props.color),
+          }),
+          props.color,
+        );
+      }
+
+      return "";
+    });
+
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+  }
 
   return {
+    ...attrs,
     config,
-    listAttrs,
-    labelAttrs,
-    radioAttrs,
-    unselectedIconAttrs,
-    unselectedAttrs,
-    unselectedRadioAttrs,
   };
 }

package/ui.form-color-picker/configs/default.config.js

@@ -13,13 +13,12 @@ export default /*tw*/ {
     },
   },
   radio: {
-    radio: {
-      base: "cursor-pointer bg-{color}-500 border-{color}-500 hover:border-{color}-500",
-    },
+    radio: "{URadio} cursor-pointer bg-{color}-500 border-{color}-500 hover:border-{color}-500",
   },
   unselected: "relative flex",
   unselectedRadio: {
     radio: {
+      base: "{URadio}",
       compoundVariants: [
         {
           color: "grayscale",
@@ -28,7 +27,7 @@ export default /*tw*/ {
       ],
     },
   },
-  unselectedIcon: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
+  unselectedIcon: "{UIcon} absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
   unselectedIconName: "close",
   defaultVariants: {
     name: "UColorPicker",

package/ui.form-color-picker/index.vue

@@ -60,7 +60,7 @@ import UIService, { getRandomId } from "../service.ui";
 
 import { UColorPicker } from "./constants";
 import defaultConfig from "./configs/default.config";
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UColorPicker", inheritAttrs: false });
@@ -157,7 +157,13 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits([
+  /**
+   * Triggers when color value changes.
+   * @property {string} value
+   */
+  "update:modelValue",
+]);
 
 const {
   config,

package/ui.form-date-picker/composables/attrs.composable.js

@@ -1,80 +1,94 @@
 import useUI from "../../composable.ui";
-import { cva } from "../../service.ui";
+import { cva, cx } from "../../service.ui";
 import { computed, watchEffect } from "vue";
 
 import defaultConfig from "../configs/default.config";
 import { POSITION } from "../../composable.adjustElementPosition";
 
 export default function useAttrs(props, { isShownCalendar, isTop, isRight }) {
-  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
-  const { calendar } = config.value;
-
-  const openDirectionY = computed(() => (isTop.value ? POSITION.top : POSITION.bottom));
-  const openDirectionX = computed(() => (isRight.value ? POSITION.right : POSITION.left));
-
-  const cvaCalendarWrapper = cva({
-    base: calendar.wrapper.base,
-    variants: calendar.wrapper.variants,
-    compoundVariants: calendar.wrapper.compoundVariants,
-  });
-
-  const calendarWrapperClasses = computed(() =>
-    cvaCalendarWrapper({
-      openDirectionY: openDirectionY.value,
-      openDirectionX: openDirectionX.value,
-    }),
-  );
-
-  const calendarAttrs = getAttrs("calendar", {
-    isComponent: true,
-    classes: calendarWrapperClasses,
-  });
-  const inputBlurAttrs = getAttrs("input");
-  const inputActiveAttrs = getAttrs("inputActive");
-  const wrapperAttrs = getAttrs("wrapper");
-
-  const inputAttrs = computed(() => {
-    return isShownCalendar.value ? inputActiveAttrs.value : inputBlurAttrs.value;
-  });
-
-  // This watcher rewrites default calendar locales with datepicker range locales
-  // Watcher will not rewrite custom calendar locales
-  watchEffect(() => {
-    if (!calendarAttrs.value.config) {
-      calendarAttrs.value.config = {};
-    }
+  const { config, getAttrs, isSystemKey } = useUI(defaultConfig, () => props.config);
+  const attrs = {};
 
-    if (calendarAttrs.value.config.i18n || !props.config.i18n) {
-      return;
-    }
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
+
+    const classes = computed(() => {
+      const value = config.value[key];
+
+      if (value.variants || value.compoundVariants) {
+        return cva(value)({
+          ...props,
+        });
+      }
+
+      return "";
+    });
+
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+
+    if (key === "input") {
+      const inputAttrs = attrs[`${key}Attrs`];
 
-    calendarAttrs.value.config.i18n = {
-      ...config.value.i18n,
-      weekdays: {
-        shorthand: { ...config.value.i18n.weekdays.shorthand },
-        longhand: { ...config.value.i18n.weekdays.longhand },
-      },
-      months: {
-        shorthand: { ...config.value.i18n.months.shorthand },
-        longhand: { ...config.value.i18n.months.longhand },
-      },
-    };
-
-    if (props.config.i18n.weekdays.userFormat) {
-      calendarAttrs.value.config.i18n.userFormat = {
-        ...config.value.i18n.weekdays.userFormat,
-      };
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...inputAttrs.value,
+        class: cx([inputAttrs.value.class, isShownCalendar.value && config.value.inputFocus]),
+      }));
     }
 
-    if (props.config.i18n.months.userFormat) {
-      calendarAttrs.value.config.i18n.userFormat = { ...config.value.i18n.months.userFormat };
+    if (key === "calendar") {
+      const calendarAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...calendarAttrs.value,
+        class: cx([
+          cva(config.value.calendar.wrapper)({
+            openDirectionY: isTop.value ? POSITION.top : POSITION.bottom,
+            openDirectionX: isRight.value ? POSITION.right : POSITION.left,
+          }),
+          calendarAttrs.value.class,
+        ]),
+      }));
+
+      // This watcher rewrites default calendar locales with datepicker range locales
+      // Watcher will not rewrite custom calendar locales
+      watchEffect(() => {
+        if (!attrs[`${key}Attrs`].value.config) {
+          attrs[`${key}Attrs`].value.config = {};
+        }
+
+        if (attrs[`${key}Attrs`].value.config.i18n || !props.config.i18n) {
+          return;
+        }
+
+        attrs[`${key}Attrs`].value.config.i18n = {
+          ...config.value.i18n,
+          weekdays: {
+            shorthand: { ...config.value.i18n.weekdays.shorthand },
+            longhand: { ...config.value.i18n.weekdays.longhand },
+          },
+          months: {
+            shorthand: { ...config.value.i18n.months.shorthand },
+            longhand: { ...config.value.i18n.months.longhand },
+          },
+        };
+
+        if (props.config.i18n.weekdays.userFormat) {
+          attrs[`${key}Attrs`].value.config.i18n.userFormat = {
+            ...config.value.i18n.weekdays.userFormat,
+          };
+        }
+
+        if (props.config.i18n.months.userFormat) {
+          attrs[`${key}Attrs`].value.config.i18n.userFormat = {
+            ...config.value.i18n.months.userFormat,
+          };
+        }
+      });
     }
-  });
+  }
 
   return {
+    ...attrs,
     config,
-    calendarAttrs,
-    inputAttrs,
-    wrapperAttrs,
   };
 }

package/ui.form-date-picker/configs/default.config.js

@@ -1,14 +1,12 @@
 export default /*tw*/ {
   wrapper: "relative",
   input: "",
-  inputActive: {
-    block: {
-      base: "ring-4 ring-brand-600/[.15] border-brand-500 hover:border-brand-500",
-    },
+  inputFocus: {
+    block: "ring-4 ring-brand-600/[.15] border-brand-500 hover:border-brand-500",
   },
   calendar: {
     wrapper: {
-      base: "absolute z-40 my-2",
+      base: "{UCalendar} absolute z-40 my-2",
       variants: {
         openDirectionX: {
           left: "left-0",

package/ui.form-date-picker/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames } from "../service.storybook";
+import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
 
 import UDatePicker from "../ui.form-date-picker";
 import UIcon from "../ui.image-icon";
@@ -40,9 +40,7 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UDatePicker v-bind="args" v-model="value">
-      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-        <template v-if="args[slot]">{{ args[slot] }}</template>
-      </template>
+      ${allSlotsFragment}
     </UDatePicker>
 
     <div class="mt-4">

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

@@ -15,14 +15,17 @@
       @focus="activate"
     >
       <template #left>
+        <!-- @slot Use it add something before the date. -->
         <slot name="left" />
       </template>
 
       <template #right-icon>
+        <!-- @slot Use it add an icon after the date. -->
         <slot name="right-icon" />
       </template>
 
       <template #right>
+        <!-- @slot Use it add something after the date. -->
         <slot name="right" />
       </template>
     </UInput>
@@ -215,7 +218,19 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["update:modelValue", "input"]);
+const emit = defineEmits([
+  /**
+   * Triggers when date picker value changes.
+   * @property {string} value
+   */
+  "update:modelValue",
+
+  /**
+   * Triggers when date picker value changes.
+   * @property {object} value
+   */
+  "input",
+]);
 
 const STANDARD_USER_FORMAT = "l, j F, Y";
 

package/ui.form-date-picker-range/composables/attrs.composable.js

@@ -7,124 +7,130 @@ import defaultConfig from "../configs/default.config";
 import { POSITION } from "../../composable.adjustElementPosition";
 
 export default function useAttrs(props, { isShownMenu, isTop, isRight }) {
-  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
-  const { menu } = config.value;
-
-  const openDirectionY = computed(() => (isTop.value ? POSITION.top : POSITION.bottom));
-  const openDirectionX = computed(() => (isRight.value ? POSITION.right : POSITION.left));
-
-  const cvaMenu = cva({
-    base: menu.base,
-    variants: menu.variants,
-    compoundVariants: menu.compoundVariants,
-  });
-
-  const menuClasses = computed(() =>
-    cvaMenu({ openDirectionY: openDirectionY.value, openDirectionX: openDirectionX.value }),
-  );
-
-  const wrapperAttrs = getAttrs("wrapper");
-  const buttonWrapperAttrsRaw = getAttrs("buttonWrapper");
-  const buttonAttrsRaw = getAttrs("button");
-  const shiftRangeButtonAttrs = getAttrs("shiftRangeButton");
-  const calendarAttrs = getAttrs("calendar", { isComponent: true });
-  const inputBlurAttrs = getAttrs("input", { isComponent: true });
-  const inputActiveAttrs = getAttrs("inputActive");
-  const rangeInputAttrs = getAttrs("rangeInput", { isComponent: true });
-  const rangeInputWrapperAttrs = getAttrs("rangeInputWrapper");
-  const inputRangeErrorAttrs = getAttrs("inputRangeError");
-
-  // This watcher rewrites default calendar locales with datepicker range locales
-  // Watcher will not rewrite custom calendar locales
-  watchEffect(() => {
-    if (!calendarAttrs.value.config) {
-      calendarAttrs.value.config = {};
+  const { config, getAttrs, isSystemKey } = useUI(defaultConfig, () => props.config);
+  const attrs = {};
+
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
+
+    const classes = computed(() => {
+      const value = config.value[key];
+
+      if (value.variants || value.compoundVariants) {
+        return cva(value)({
+          ...props,
+        });
+      }
+
+      return "";
+    });
+
+    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 (calendarAttrs.value.config.i18n || !props.config.i18n) {
-      return;
+    if (key === "input") {
+      const inputAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...inputAttrs.value,
+        class: cx([inputAttrs.value.class, isShownMenu.value && config.value.inputFocus]),
+      }));
     }
 
-    calendarAttrs.value.config.i18n = {
-      ...config.value.i18n,
-      weekdays: {
-        shorthand: { ...config.value.i18n.weekdays.shorthand },
-        longhand: { ...config.value.i18n.weekdays.longhand },
-      },
-      months: {
-        shorthand: { ...config.value.i18n.months.shorthand },
-        longhand: { ...config.value.i18n.months.longhand },
-      },
-    };
-
-    if (props.config.i18n.weekdays.userFormat) {
-      calendarAttrs.value.config.i18n.userFormat = {
-        ...config.value.i18n.weekdays.userFormat,
-      };
+    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 (props.config.i18n.months.userFormat) {
-      calendarAttrs.value.config.i18n.userFormat = { ...config.value.i18n.months.userFormat };
+    if (key === "button") {
+      const buttonAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...buttonAttrs.value,
+        class: cx([buttonAttrs.value.class, isShownMenu.value && config.value.buttonActive]),
+      }));
     }
-  });
-
-  const inputAttrs = computed(() => {
-    return isShownMenu.value ? inputActiveAttrs.value : inputBlurAttrs.value;
-  });
-
-  const menuAttrs = getAttrs("menu", { classes: menuClasses });
-  const periodsRowAttrs = getAttrs("periodsRow");
-  const rangeSwitchWrapperAttrs = getAttrs("rangeSwitchWrapper");
-  const nextIconAttrs = getAttrs("nextIcon");
-  const prevIconAttrs = getAttrs("prevIcon");
-  const periodButtonIconAttrs = getAttrs("periodButtonIcon");
-  const rangeSwitchTitleAttrs = getAttrs("rangeSwitchTitle");
-
-  const periodButtonAttrs = (classes = []) => {
-    return getAttrs("periodButton", { classes }).value;
-  };
 
-  const periodDateListAttrs = (classes = []) => {
-    return getAttrs("periodDateList", { classes }).value;
-  };
+    if (key === "periodButton") {
+      attrs[`${key}Attrs`] = (classes) => {
+        return getAttrs("periodButton", { classes }).value;
+      };
+    }
 
-  const periodDateAttrs = (classes = []) => {
-    return getAttrs("periodDate", { classes }).value;
-  };
+    if (key === "periodDateList") {
+      attrs[`${key}Attrs`] = (classes) => {
+        return getAttrs("periodDateList", { classes }).value;
+      };
+    }
 
-  const buttonWrapperAttrs = computed(() => ({
-    ...buttonWrapperAttrsRaw.value,
-    class: cx([
-      buttonWrapperAttrsRaw.value.class,
-      isShownMenu.value && config.value.buttonWrapperActive,
-    ]),
-  }));
+    if (key === "periodDate") {
+      attrs[`${key}Attrs`] = (classes) => {
+        return getAttrs("periodDate", { classes }).value;
+      };
+    }
 
-  const buttonAttrs = computed(() => ({
-    ...buttonAttrsRaw.value,
-    class: cx([buttonAttrsRaw.value.class, isShownMenu.value && config.value.buttonActive]),
-  }));
+    if (key === "calendar") {
+      // This watcher rewrites default calendar locales with datepicker range locales
+      // Watcher will not rewrite custom calendar locales
+      watchEffect(() => {
+        if (!attrs[`${key}Attrs`].value.config) {
+          attrs[`${key}Attrs`].value.config = {};
+        }
+
+        if (attrs[`${key}Attrs`].value.config.i18n || !props.config.i18n) {
+          return;
+        }
+
+        attrs[`${key}Attrs`].value.config.i18n = {
+          ...config.value.i18n,
+          weekdays: {
+            shorthand: { ...config.value.i18n.weekdays.shorthand },
+            longhand: { ...config.value.i18n.weekdays.longhand },
+          },
+          months: {
+            shorthand: { ...config.value.i18n.months.shorthand },
+            longhand: { ...config.value.i18n.months.longhand },
+          },
+        };
+
+        if (props.config.i18n.weekdays.userFormat) {
+          attrs[`${key}Attrs`].value.config.i18n.userFormat = {
+            ...config.value.i18n.weekdays.userFormat,
+          };
+        }
+
+        if (props.config.i18n.months.userFormat) {
+          attrs[`${key}Attrs`].value.config.i18n.userFormat = {
+            ...config.value.i18n.months.userFormat,
+          };
+        }
+      });
+    }
+  }
 
   return {
+    ...attrs,
     config,
-    wrapperAttrs,
-    calendarAttrs,
-    inputAttrs,
-    menuAttrs,
-    periodsRowAttrs,
-    periodButtonAttrs,
-    periodButtonIconAttrs,
-    rangeSwitchWrapperAttrs,
-    nextIconAttrs,
-    prevIconAttrs,
-    periodDateAttrs,
-    periodDateListAttrs,
-    rangeSwitchTitleAttrs,
-    buttonWrapperAttrs,
-    buttonAttrs,
-    shiftRangeButtonAttrs,
-    rangeInputAttrs,
-    rangeInputWrapperAttrs,
-    inputRangeErrorAttrs,
   };
 }

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

@@ -1,14 +1,14 @@
 export default /*tw*/ {
   wrapper: "relative",
-  input: "",
-  inputActive: {
+  input: "{UInput}",
+  inputFocus: {
     block: "ring-4 ring-brand-700 ring-opacity-20 border-brand-500 hover:border-brand-500",
   },
   buttonWrapper: `
     flex rounded-lg max-md:justify-between
     focus-within:ring-4 focus-within:ring-brand-700 focus-within:ring-opacity-20
   `,
-  button: "shrink-0 grow rounded-none focus:ring-0",
+  button: "{UButton} shrink-0 grow rounded-none focus:ring-0",
   buttonActive: "ring-0",
   buttonWrapperActive: "ring-4 ring-brand-700 ring-opacity-20",
   shiftRangeButton: "focus:ring-0 last:rounded-l-none last:rounded-r-lg first:rounded-l-lg first:rounded-r-none",
@@ -34,17 +34,17 @@ export default /*tw*/ {
   },
   periodsRow: "mb-1 flex min-w-64 gap-1",
   periodButton: `
-    h-[3.125rem] w-full flex flex-col items-center justify-center
+    {UButton} h-[3.125rem] w-full flex flex-col items-center justify-center
     [&_span]:block [&_span]:font-normal [&_span]:text-brand-500
   `,
-  periodButtonIcon: "",
+  periodButtonIcon: "{UIcon}",
   periodButtonIconName: "apps",
   periodButtonActive: "bg-gray-200",
   rangeSwitchWrapper: "mb-2.5 mt-4 flex items-center justify-between py-2",
   rangeSwitchTitle: "font-medium text-sm",
-  nextIcon: "",
+  nextIcon: "{UIcon}",
   nextIconName: "keyboard_arrow_right",
-  prevIcon: "",
+  prevIcon: "{UIcon}",
   prevIconName: "keyboard_arrow_left",
   periodDateList: "",
   periodDateMonthList: "grid grid-cols-3 grid-rows-1 gap-0.5",
@@ -61,7 +61,7 @@ export default /*tw*/ {
       description: "hidden",
     },
     input: {
-      base: "text-sm border-brand-100 px-4 py-2.5",
+      base: "{UInput} text-sm border-brand-100 px-4 py-2.5",
       variants: {
         size: {
           md: "pt-2.5 pb-2.5",
@@ -71,7 +71,7 @@ export default /*tw*/ {
   },
   inputRangeError: "text-xs font-normal !leading-none mt-2 text-center text-red-500",
   calendar: {
-    wrapper: "p-0 mt-2 w-full border-none shadow-none",
+    wrapper: "{UCalendar} p-0 mt-2 w-full border-none shadow-none",
     navigation: "mb-0 border-none",
     navigationSwitchViewButton: "rounded-lg px-3",
     day: "w-full h-10 mb-0.5",

package/ui.form-date-picker-range/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames } from "../service.storybook";
+import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
 
 import UDatePickerRange from "../ui.form-date-picker-range";
 import URow from "../ui.container-row";
@@ -44,9 +44,7 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UDatePickerRange v-bind="args" v-model="value">
-      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-        <template v-if="args[slot]">{{ args[slot] }}</template>
-      </template>
+      ${allSlotsFragment}
     </UDatePickerRange>
 
     <div class="mt-4">

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

@@ -423,7 +423,13 @@ const props = defineProps({
 
 const inputRangeFormat = "d.m.Y";
 
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits([
+  /**
+   * Triggers when date picker range value changes.
+   * @property {string} value
+   */
+  "update:modelValue",
+]);
 
 const isShownMenu = ref(false);
 const wrapperRef = ref(null);

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.211",
+  "version": "0.0.213",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -1077,25 +1077,72 @@
           ],
           "events": [
             {
-              "name": "update:modelValue"
+              "name": "update:modelValue",
+              "description": "Triggers when date value changes.",
+              "properties": [
+                {
+                  "type": [
+                    "object"
+                  ],
+                  "name": "newDate"
+                }
+              ]
             },
             {
-              "name": "update:view"
+              "name": "update:view",
+              "description": "Triggers when calendar view changes.",
+              "properties": [
+                {
+                  "type": [
+                    "string"
+                  ],
+                  "name": "view"
+                }
+              ]
             },
             {
-              "name": "input"
+              "name": "input",
+              "description": "Triggers when date value changes.",
+              "properties": [
+                {
+                  "type": [
+                    "object"
+                  ],
+                  "name": "value"
+                }
+              ]
             },
             {
-              "name": "submit"
+              "name": "submit",
+              "description": "Triggers when calendar date is selected by clicking \"Enter\"."
             },
             {
-              "name": "keydown"
+              "name": "keydown",
+              "description": "Triggers when arrow keys are used to change calendar date."
             },
             {
-              "name": "userDateChange"
+              "name": "userDateChange",
+              "description": "Triggers when the date input value is changed by the user.",
+              "properties": [
+                {
+                  "type": [
+                    "string"
+                  ],
+                  "name": "value"
+                }
+              ]
             },
             {
-              "name": "formattedDateChange"
+              "name": "formattedDateChange",
+              "description": "Triggers when the date format applied to the input changes.",
+              "properties": [
+                {
+                  "type": [
+                    "string"
+                  ],
+                  "name": "value"
+                }
+              ]
             }
           ],
           "source": {
@@ -1720,7 +1767,16 @@
           ],
           "events": [
             {
-              "name": "update:modelValue"
+              "name": "update:modelValue",
+              "description": "Triggers when color value changes.",
+              "properties": [
+                {
+                  "type": [
+                    "string"
+                  ],
+                  "name": "value"
+                }
+              ]
             }
           ],
           "source": {
@@ -2076,21 +2132,42 @@
           ],
           "events": [
             {
-              "name": "update:modelValue"
+              "name": "update:modelValue",
+              "description": "Triggers when date picker value changes.",
+              "properties": [
+                {
+                  "type": [
+                    "string"
+                  ],
+                  "name": "value"
+                }
+              ]
             },
             {
-              "name": "input"
+              "name": "input",
+              "description": "Triggers when date picker value changes.",
+              "properties": [
+                {
+                  "type": [
+                    "object"
+                  ],
+                  "name": "value"
+                }
+              ]
             }
           ],
           "slots": [
             {
-              "name": "left"
+              "name": "left",
+              "description": "Use it add something before the date."
             },
             {
-              "name": "right-icon"
+              "name": "right-icon",
+              "description": "Use it add an icon after the date."
             },
             {
-              "name": "right"
+              "name": "right",
+              "description": "Use it add something after the date."
             }
           ],
           "source": {
@@ -2255,7 +2332,16 @@
           ],
           "events": [
             {
-              "name": "update:modelValue"
+              "name": "update:modelValue",
+              "description": "Triggers when date picker range value changes.",
+              "properties": [
+                {
+                  "type": [
+                    "string"
+                  ],
+                  "name": "value"
+                }
+              ]
             }
           ],
           "slots": [