vueless 0.0.553 → 0.0.555

package/composables/useUI.ts

@@ -17,7 +17,8 @@ import {
   STRATEGY_TYPE,
   CVA_CONFIG_KEY,
   SYSTEM_CONFIG_KEY,
-  NESTED_COMPONENT_REG_EXP,
+  NESTED_COMPONENT_PATTERN_REG_EXP,
+  EXTENDS_PATTERN_REG_EXP,
 } from "../constants.js";
 
 import type { ComponentInternalInstance, Slot, VNode, ComputedRef } from "vue";
@@ -127,14 +128,16 @@ export default function useUI<T>(
     extendingKeys: string[] = [],
     keysToExtendConfig: Record<string, KeysToExtend> = {},
   ) {
-    const keysToExtend = Object.keys(keysToExtendConfig);
     const keysAttrs: UnknownObject = {};
 
-    for (const key in defaultConfig) {
+    // TODO: should be removed after migration of all components to the new api.
+    for (const key in config.value) {
       if (isSystemKey(key) || extendingKeys.includes(key)) continue;
 
       keysAttrs[`${key}Attrs`] = getAttrs(key, getClasses(key, mutatedProps));
 
+      const keysToExtend = Object.keys(keysToExtendConfig);
+
       if (keysToExtend.includes(key)) {
         const { base, extend } = keysToExtendConfig[key];
         const keyAttrs = keysAttrs[`${key}Attrs`] as ComputedRef<KeyAttrs>;
@@ -150,6 +153,33 @@ export default function useUI<T>(
       }
     }
 
+    for (const key in config.value) {
+      if (isSystemKey(key)) continue;
+
+      const baseClasses = getBaseClasses(config.value[key]);
+      const extendsMatches = baseClasses.match(EXTENDS_PATTERN_REG_EXP);
+
+      if (extendsMatches) {
+        keysAttrs[`${key}Attrs`] = getAttrs(key, getClasses(key, mutatedProps));
+
+        // retrieves extends keys from patterns:
+        // Example: `{>someKey} {>someOtherKey}` >>> `["someKey", "someOtherKey"]`.
+        const extendsKeys = extendsMatches.map((pattern) => pattern.slice(2, -1));
+        const classes = getExtendingKeysClasses(extendsKeys, mutatedProps);
+        const extendsClasses = Object.values(classes).map((item) => toValue(item));
+
+        const keyAttrs = keysAttrs[`${key}Attrs`] as ComputedRef<KeyAttrs>;
+
+        keysAttrs[`${key}Attrs`] = computed(() => ({
+          ...keyAttrs.value,
+          class: cx([
+            ...extendsClasses,
+            keyAttrs.value.class?.replaceAll(EXTENDS_PATTERN_REG_EXP, ""),
+          ]),
+        }));
+      }
+    }
+
     return keysAttrs;
   }
 
@@ -157,7 +187,7 @@ export default function useUI<T>(
    * Get an element attributes for a given key.
    */
   function getAttrs(configKey: string, classes: ComputedRef) {
-    const nestedComponent = getNestedComponent(defaultConfig[configKey] || "");
+    const nestedComponent = getNestedComponent(config.value[configKey] || "");
 
     const attrs = useAttrs();
     const isDev = isCSR && import.meta.env?.DEV;
@@ -221,7 +251,8 @@ function getNestedComponent(value: string | NestedComponent | CVA) {
   const component = (value as NestedComponent)?.component as ComponentNames;
 
   const match =
-    classes.match(NESTED_COMPONENT_REG_EXP) || component?.match(NESTED_COMPONENT_REG_EXP);
+    classes.match(NESTED_COMPONENT_PATTERN_REG_EXP) ||
+    component?.match(NESTED_COMPONENT_PATTERN_REG_EXP);
 
   return match ? match[1] : "";
 }

package/constants.js

@@ -200,7 +200,8 @@ export const VUELESS_ICONS_CACHED_DIR = `${VUELESS_CACHE_DIR}/${ICONS_DIR}`;
 
 /* Other */
 export const PX_IN_REM = 16;
-export const NESTED_COMPONENT_REG_EXP = /\{U[^}]*}/g;
+export const NESTED_COMPONENT_PATTERN_REG_EXP = /\{U[^}]*}/g;
+export const EXTENDS_PATTERN_REG_EXP = /\{>[^}]*}/g;
 export const DYNAMIC_COLOR_PATTERN = "{color}";
 export const TAILWIND_COLOR_OPACITY_DELIMITER = "/";
 export const TAILWIND_VARIANT_DELIMITER = ":";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.553",
+  "version": "0.0.555",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.form-calendar/UCalendar.vue

@@ -789,7 +789,6 @@ defineExpose({
       <UButton
         variant="thirdary"
         size="sm"
-        square
         filled
         no-ring
         color="grayscale"

package/ui.form-calendar/config.ts

@@ -1,73 +1,73 @@
 export default /*tw*/ {
-  wrapper: "p-2 w-80 border border-gray-300 rounded-dynamic bg-white shadow overflow-hidden focus:outline-none",
+  wrapper: "p-3 w-[19rem] border border-gray-300 rounded-dynamic bg-white shadow overflow-hidden focus:outline-none",
   navigation: "mb-2 pb-2 border-b flex items-center justify-between",
   viewSwitchButton: "{UButton}",
   nextPrevButton: "{UButton}",
   dayView: "",
   weekDays: "grid grid-cols-7 justify-items-center gap-1",
-  weekDay: "flex size-8 items-center justify-center text-xs uppercase text-gray-500",
+  weekDay: "flex size-8 items-center justify-center text-xs capitalize text-gray-500 font-medium",
   days: {
-    base: "grid grid-cols-7 justify-items-center gap-1",
+    base: "grid grid-cols-7 justify-items-center gap-0.5",
     variants: {
       range: {
         true: "gap-0 gap-y-0.5",
       },
     },
   },
-  dateInRange: "bg-brand/15 font-semibold !text-brand-900 hover:bg-brand/30 rounded-none",
+  dateInRange: "bg-brand/5 !text-brand-900 hover:bg-brand/15 rounded-none",
   edgeDateInRange: "",
   firstDateInRange: "rounded-r-none",
   lastDateInRange: "rounded-l-none",
   anotherMonthDate: "text-gray-400",
   activeDate: "bg-brand-100",
-  selectedDate: "font-semibold",
-  currentDate: "border-2 border-brand-600 font-semibold",
-  day: "{UButton} size-9 w-full font-normal",
-  currentDay: "",
-  dayInRange: "",
-  currentDayInRange: "",
-  anotherMonthDay: "",
-  firstDayInRange: "font-semibold",
-  anotherMonthFirstDayInRange: "",
-  lastDayInRange: "font-semibold",
-  currentLastDayInRange: "",
+  selectedDate: "",
+  currentDate: "border-2 border-brand-600",
+  day: "{UButton} size-9 w-full",
+  currentDay: "{>day} {>currentDate}",
+  dayInRange: "{>day} {>dateInRange}",
+  currentDayInRange: "{>day} {>dateInRange} {>currentDate}",
+  anotherMonthDay: "{>day} {>anotherMonthDate} font-normal",
+  firstDayInRange: "{>day} {>edgeDateInRange} {>firstDateInRange}",
+  anotherMonthFirstDayInRange: "{>day} {>anotherMonthDay} {>edgeDateInRange} {>firstDateInRange}",
+  lastDayInRange: "{>day} {>edgeDateInRange} {>lastDateInRange}",
+  currentLastDayInRange: "{>day} {>edgeDateInRange} {>lastDateInRange} {>currentDate}",
   currentFirstDayInRange: "",
-  anotherMonthLastDayInRange: "",
-  selectedDay: "",
-  activeDay: "",
+  anotherMonthLastDayInRange: "{>day} {>anotherMonthDay} {>edgeDateInRange} {>lastDateInRange}",
+  selectedDay: "{>day} {>selectedDate}",
+  activeDay: "{>day} {>activeDate}",
   monthView: "grid grid-cols-4 justify-items-center gap-1",
   month: "{UButton} mx-auto flex h-12 w-full",
-  currentMonth: "",
-  currentMonthInRange: "",
-  currentLastMonthInRange: "",
-  currentFirstMonthInRange: "",
-  lastMonthInRange: "",
-  firstMonthInRange: "",
-  singleMonthInRange: "rounded-dynamic",
-  singleCurrentMonthInRange: "rounded-dynamic",
-  monthInRange: "",
-  selectedMonth: "",
-  activeMonth: "",
+  currentMonth: "{>month} {>currentDate}",
+  currentMonthInRange: "{>month} {>currentDate} {>dateInRange}",
+  currentLastMonthInRange: "{>month} {>edgeDateInRange} {>lastDateInRange} {>currentDate}",
+  currentFirstMonthInRange: "{>month} {>edgeDateInRange} {>firstDateInRange} {>currentDate}",
+  lastMonthInRange: "{>month} {>edgeDateInRange} {>lastDateInRange}",
+  firstMonthInRange: "{>month} {>edgeDateInRange} {>firstDateInRange}",
+  singleMonthInRange: "{>month} {>dateInRange} rounded-dynamic",
+  singleCurrentMonthInRange: "{>month} {>dateInRange} {>currentDate} rounded-dynamic",
+  monthInRange: "{>month} {>dateInRange}",
+  selectedMonth: "{>month} {>selectedDate}",
+  activeMonth: "{>month} {>activeDate}",
   yearView: "grid grid-cols-4 justify-items-center gap-1",
   year: "{UButton} mx-auto flex h-12 w-full",
-  currentYear: "",
-  currentYearInRange: "",
-  firstYearInRange: "",
-  lastYearInRange: "",
-  yearInRange: "",
-  singleYearInRange: "rounded-dynamic",
-  singleCurrentYearInRange: "rounded-dynamic",
-  currentLastYearInRange: "",
-  currentFirstYearInRange: "",
-  selectedYear: "",
-  activeYear: "",
-  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-dynamic border border-brand-300",
-  timepickerInput: "w-11 border-none px-2.5 py-1.5 text-center text-sm focus:ring-brand-700/15",
-  timepickerInputHours: "rounded-l-dynamic",
-  timepickerInputMinutes: "",
-  timepickerInputSeconds: "rounded-r-dynamic",
+  currentYear: "{>year} {>currentDate}",
+  currentYearInRange: "{>year} {>currentDate} {>dateInRange}",
+  currentLastYearInRange: "{>year} {>edgeDateInRange} {>lastDateInRange} {>currentDate}",
+  currentFirstYearInRange: "{>year} {>edgeDateInRange} {>firstDateInRange} {>currentDate}",
+  lastYearInRange: "{>year} {>edgeDateInRange} {>lastDateInRange}",
+  firstYearInRange: "{>year} {>edgeDateInRange} {>firstDateInRange}",
+  yearInRange: "{>year} {>dateInRange}",
+  singleYearInRange: "{>year} {>dateInRange} rounded-dynamic",
+  singleCurrentYearInRange: "{>year} {>dateInRange} {>currentDate} rounded-dynamic",
+  selectedYear: "{>year} {>selectedDate}",
+  activeYear: "{>year} {>activeDate}",
+  timepicker: "mt-2 pl-1 pt-3 text-sm flex items-stretch justify-between gap-2 border-t border-gray-200",
+  timepickerLabel: "w-full self-center",
+  timepickerInputWrapper: "flex items-center rounded-dynamic border border-brand-300",
+  timepickerInput: "w-10 border-none px-1.5 py-1.5 text-center text-sm focus:ring-0 focus:placeholder:text-gray-900",
+  timepickerInputHours: "{>timepickerInput} rounded-l-dynamic",
+  timepickerInputMinutes: "{>timepickerInput}",
+  timepickerInputSeconds: "{>timepickerInput} rounded-r-dynamic",
   timepickerSubmitButton: "{UButton} py-2 border-0",
   i18n: {
     weekdays: {

package/ui.form-calendar/useAttrs.ts

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

package/utils/node/tailwindSafelist.js

@@ -17,7 +17,7 @@ import {
   DYNAMIC_COLOR_PATTERN,
   TAILWIND_VARIANT_DELIMITER,
   TAILWIND_MERGE_EXTENSION,
-  NESTED_COMPONENT_REG_EXP,
+  NESTED_COMPONENT_PATTERN_REG_EXP,
   TAILWIND_COLOR_OPACITY_DELIMITER,
   TAILWIND_VARIANT_DELIMITER_REG_EXP,
   STRATEGY_TYPE,
@@ -28,7 +28,7 @@ const twMerge = extendTailwindMerge(merge(TAILWIND_MERGE_EXTENSION, vuelessConfi
 
 export const { cx } = defineConfig({
   hooks: {
-    onComplete: (classNames) => twMerge(classNames).replace(NESTED_COMPONENT_REG_EXP, ""),
+    onComplete: (classNames) => twMerge(classNames).replace(NESTED_COMPONENT_PATTERN_REG_EXP, ""),
   },
 });
 

package/utils/ui.ts

@@ -7,8 +7,8 @@ import {
   BRAND_COLOR,
   GRAYSCALE_COLOR,
   DEFAULT_BRAND_COLOR,
-  NESTED_COMPONENT_REG_EXP,
   TAILWIND_MERGE_EXTENSION,
+  NESTED_COMPONENT_PATTERN_REG_EXP,
 } from "../constants.js";
 
 import type {
@@ -79,7 +79,8 @@ export const {
   cva: classVarianceAuthority,
 } = defineConfig({
   hooks: {
-    onComplete: (classNames) => twMerge(classNames).replace(NESTED_COMPONENT_REG_EXP, ""),
+    onComplete: (classNames) =>
+      twMerge(classNames).replaceAll(NESTED_COMPONENT_PATTERN_REG_EXP, ""),
   },
 });
 

package/web-types.json

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