vueless 0.0.633 → 0.0.635

package/composables/useUI.ts

@@ -125,14 +125,17 @@ export default function useUI<T>(
     const attrs = useAttrs() as KeyAttrs;
     const isDev = isCSR && import.meta.env?.DEV;
     const isTopLevelKey = (topLevelClassKey || firstClassKey) === configKey;
-    const nestedComponent = getNestedComponent(config.value[configKey] || "");
+
+    const extendsKeyConfig = getExtendsKeyConfig(configKey);
+    const extendsKeyNestedComponent = getNestedComponent(extendsKeyConfig);
+    const keyNestedComponent = getNestedComponent(config.value[configKey]);
+    const nestedComponent = extendsKeyNestedComponent || keyNestedComponent || componentName;
 
     const commonAttrs: KeyAttrs = {
       ...(isTopLevelKey ? attrs : {}),
       "vl-component": isDev ? attrs["vl-component"] || componentName || null : null,
       "vl-key": isDev ? attrs["vl-key"] || configKey || null : null,
-      "vl-child-component":
-        isDev && attrs["vl-component"] ? nestedComponent || componentName : null,
+      "vl-child-component": isDev && attrs["vl-component"] ? nestedComponent : null,
       "vl-child-key": isDev && attrs["vl-component"] ? configKey : null,
     };
 
@@ -145,25 +148,25 @@ export default function useUI<T>(
      * Updating Vueless attributes.
      */
     function updateVuelessAttrs() {
-      let configAttr: NestedComponent = {};
+      let keyConfig: NestedComponent = {};
 
       if (typeof config.value[configKey] === "object") {
-        configAttr = config.value[configKey] as NestedComponent;
+        keyConfig = config.value[configKey] as NestedComponent;
       }
 
       const extendsClasses = getExtendsClasses(configKey);
-      const extendsConfigAttr = getExtendsConfigAttr(configKey);
+      const extendsKeyConfig = getExtendsKeyConfig(configKey);
 
       vuelessAttrs.value = {
         ...commonAttrs,
         class: cx([...extendsClasses, toValue(classes)]),
         config: getMergedConfig({
-          defaultConfig: extendsConfigAttr,
-          globalConfig: configAttr,
+          defaultConfig: extendsKeyConfig,
+          globalConfig: keyConfig,
         }),
         ...getDefaults({
-          ...(extendsConfigAttr.defaults || {}),
-          ...(configAttr.defaults || {}),
+          ...(extendsKeyConfig.defaults || {}),
+          ...(keyConfig.defaults || {}),
         }),
       };
     }
@@ -195,8 +198,8 @@ export default function useUI<T>(
      * Merge extends nested component configs.
      * TODO: Add ability to merge multiple keys in one (now works for merging only 1 first key).
      */
-    function getExtendsConfigAttr(configKey: string) {
-      let extendsConfigAttr: NestedComponent = {};
+    function getExtendsKeyConfig(configKey: string) {
+      let extendsKeyConfig: NestedComponent = {};
 
       const propsConfig = props.config as ComponentConfig<T>;
       const extendsKeys = getExtendsKeys(config.value[configKey]);
@@ -204,14 +207,14 @@ export default function useUI<T>(
       if (extendsKeys.length) {
         const [firstKey] = extendsKeys;
 
-        extendsConfigAttr = getMergedConfig({
+        extendsKeyConfig = getMergedConfig({
           defaultConfig: config.value[firstKey],
           globalConfig: globalConfig[firstKey],
           propsConfig: propsConfig[firstKey],
         }) as NestedComponent;
       }
 
-      return extendsConfigAttr;
+      return extendsKeyConfig;
     }
 
     /**
@@ -242,7 +245,7 @@ export default function useUI<T>(
 /**
  * Return base classes.
  */
-function getBaseClasses(value: string | CVA | undefined) {
+function getBaseClasses(value?: string | CVA | NestedComponent) {
   return typeof value === "object" ? value.base || "" : value || "";
 }
 
@@ -250,7 +253,7 @@ function getBaseClasses(value: string | CVA | undefined) {
  * Retrieves extends keys from patterns:
  * Example: `{>someKey} {>someOtherKey}` >>> `["someKey", "someOtherKey"]`.
  */
-function getExtendsKeys(configItemValue?: CVA | string): string[] {
+function getExtendsKeys(configItemValue?: string | CVA | NestedComponent): string[] {
   const values = getBaseClasses(configItemValue);
   const matches = values.match(EXTENDS_PATTERN_REG_EXP);
 
@@ -260,7 +263,7 @@ function getExtendsKeys(configItemValue?: CVA | string): string[] {
 /**
  * Check is config key contains component name and returns it.
  */
-function getNestedComponent(value: string | CVA) {
+function getNestedComponent(value?: string | CVA | NestedComponent) {
   const classes = getBaseClasses(value);
   const match = classes.match(NESTED_COMPONENT_PATTERN_REG_EXP);
 

package/constants.js

@@ -223,7 +223,7 @@ export const VUELESS_CONFIGS_CACHED_DIR = `${VUELESS_CACHE_DIR}/configs`;
 
 /* Other */
 export const PX_IN_REM = 16;
-export const NESTED_COMPONENT_PATTERN_REG_EXP = /\{U[^}]*}/g;
+export const NESTED_COMPONENT_PATTERN_REG_EXP = /\{(U[^}]*)}/;
 export const EXTENDS_PATTERN_REG_EXP = /\{>[^}]*}/g;
 export const DYNAMIC_COLOR_PATTERN = "{color}";
 export const TAILWIND_COLOR_OPACITY_DELIMITER = "/";

package/package.json

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

package/types.ts

@@ -252,6 +252,7 @@ export type ComponentConfig<T> = Partial<{
   NestedComponent;
 
 export interface NestedComponent {
+  base?: string;
   defaults?: Record<string, string | UnknownObject>;
   [key: string]: Record<string, string | UnknownObject> | string | undefined;
 }

package/ui.button-toggle-item/UToggleItem.vue

@@ -91,7 +91,7 @@ const mutatedProps = computed(() => ({
   selected: isSelected.value,
 }));
 
-const { toggleButtonAttrs, toggleButtonActiveAttrs, toggleInputAttrs } = useUI<Config>(
+const { toggleButtonInactiveAttrs, toggleButtonActiveAttrs, toggleInputAttrs } = useUI<Config>(
   defaultConfig,
   mutatedProps,
 );
@@ -110,7 +110,7 @@ const { toggleButtonAttrs, toggleButtonActiveAttrs, toggleInputAttrs } = useUI<C
     :square="getToggleSquare()"
     :disabled="getToggleDisabled() || disabled"
     :no-ring="getToggleNoRing() || !getToggleSplit()"
-    v-bind="isSelected ? toggleButtonActiveAttrs : toggleButtonAttrs"
+    v-bind="isSelected ? toggleButtonActiveAttrs : toggleButtonInactiveAttrs"
     @click="onClickSetValue"
   >
     <template #left>

package/ui.button-toggle-item/config.ts

@@ -1,15 +1,15 @@
 export default /*tw*/ {
   toggleButton: {
-    base: "{UButton} font-normal text-gray-900",
+    base: "{UButton} font-normal",
     defaults: {
       variant: "thirdary",
+      color: "brand",
     },
   },
+  toggleButtonInactive: "{>toggleButton} text-gray-900",
   toggleButtonActive: {
-    base: "{UButton} font-normal !bg-{color}-600/15",
+    base: "{>toggleButton} !bg-{color}-600/15",
     defaults: {
-      variant: "thirdary",
-      color: "brand",
       filled: true,
     },
   },

package/ui.dropdown-button/UDropdownButton.vue

@@ -43,6 +43,8 @@ const elementId = props.id || useId();
 
 function onClickOption(option: Option) {
   emit("clickOption", option);
+
+  hideOptions();
 }
 
 function onClickButton() {
@@ -57,10 +59,6 @@ function hideOptions() {
   isShownOptions.value = false;
 }
 
-function onClickList() {
-  hideOptions();
-}
-
 /**
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
@@ -132,7 +130,6 @@ const { config, dropdownButtonAttrs, dropdownListAttrs, dropdownIconAttrs, wrapp
       :label-key="labelKey"
       v-bind="dropdownListAttrs"
       :data-test="`${dataTest}-list`"
-      @click="onClickList"
       @click-option="onClickOption"
     />
   </div>

package/ui.dropdown-link/UDropdownLink.vue

@@ -53,12 +53,10 @@ function hideOptions() {
   isShownOptions.value = false;
 }
 
-function onClickList() {
-  hideOptions();
-}
-
 function onClickOption(option: Option) {
   emit("clickOption", option);
+
+  hideOptions();
 }
 
 /**
@@ -136,7 +134,6 @@ const { config, wrapperAttrs, dropdownLinkAttrs, dropdownListAttrs, dropdownIcon
       :label-key="labelKey"
       v-bind="dropdownListAttrs"
       :data-test="`${dataTest}-list`"
-      @click="onClickList"
       @click-option="onClickOption"
     />
   </div>

package/ui.dropdown-list/types.ts

@@ -20,7 +20,7 @@ export interface Props {
   /**
    * Selected item.
    */
-  modelValue: string | number | UnknownObject;
+  modelValue?: string | number | UnknownObject;
 
   /**
    * List options.

package/ui.form-input-money/utilFormat.ts

@@ -30,7 +30,7 @@ export function getFormattedValue(value: string | number, options: FormatOptions
   } = options;
 
   const invalidValuesRegExp = new RegExp("[^\\d,\\d.\\s-" + decimalSeparator + "]", "g");
-  const doubleValueRegExp = new RegExp("([,\\.\\s-" + decimalSeparator + "])+", "g");
+  const doubleValueRegExp = new RegExp("([,\\.\\s" + decimalSeparator + "])+", "g");
 
   // slice to first decimal mark
   value = String(value)
@@ -51,11 +51,16 @@ export function getFormattedValue(value: string | number, options: FormatOptions
   const isNumber = isNumberValueRegExp.test(value);
   const isFloat = value.endsWith(rawDecimalMark) || value.endsWith(".0");
   const isMinus = value === minus;
+  const isMinusWithin = value.includes(minus) && !value.startsWith(minus);
 
   if (isMinus && positiveOnly) {
     value = "";
   }
 
+  if (isMinusWithin) {
+    value = value.replaceAll(minus, "");
+  }
+
   if (!value || !isNumber || isFloat || isMinus) {
     return `${prefix}${value.replaceAll(rawDecimalMark, decimalSeparator)}`;
   }

package/utils/theme.ts

@@ -42,11 +42,13 @@ export function themeInit() {
 
   setTheme();
 
-  const prefersColorSchemeDark = window.matchMedia("(prefers-color-scheme: dark)");
+  if (vuelessConfig?.colorMode === ColorMode.Auto) {
+    const prefersColorSchemeDark = window.matchMedia("(prefers-color-scheme: dark)");
 
-  prefersColorSchemeDark.addEventListener("change", (event) =>
-    setTheme({ colorMode: event.matches ? ColorMode.Dark : ColorMode.Light }),
-  );
+    prefersColorSchemeDark.addEventListener("change", (event) => {
+      setTheme({ colorMode: event.matches ? ColorMode.Dark : ColorMode.Light });
+    });
+  }
 }
 
 export function setColorMode(colorMode: `${ColorMode}`) {
@@ -98,7 +100,7 @@ export function setColorMode(colorMode: `${ColorMode}`) {
 }
 
 export function setTheme(config: Config = {}) {
-  setColorMode(config?.colorMode || vuelessConfig?.colorMode || ColorMode.Auto);
+  setColorMode(vuelessConfig?.colorMode || config?.colorMode || ColorMode.Light);
 
   const roundingSm = config?.roundingSm ?? vuelessConfig?.roundingSm ?? DEFAULT_ROUNDING_SM;
   const rounding = config?.rounding ?? vuelessConfig.rounding ?? DEFAULT_ROUNDING;

package/utils/ui.ts

@@ -79,8 +79,7 @@ export const {
   cva: classVarianceAuthority,
 } = defineConfig({
   hooks: {
-    onComplete: (classNames) =>
-      twMerge(classNames).replaceAll(NESTED_COMPONENT_PATTERN_REG_EXP, ""),
+    onComplete: (classNames) => twMerge(classNames).replace(NESTED_COMPONENT_PATTERN_REG_EXP, ""),
   },
 });