vueless 0.0.219 → 0.0.220

package/composable.ui/index.js

@@ -31,6 +31,7 @@ const SYSTEM_CONFIG_KEY = {
   i18n: "i18n",
   strategy: "strategy",
   safelist: "safelist",
+  component: "component",
   safelistColors: "safelistColors",
   defaultVariants: "defaultVariants",
   compoundVariants: "compoundVariants",
@@ -71,7 +72,7 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
   });
 
   function getAttrs(configKey, options) {
-    const nestedComponent = options?.isComponent || getNestedComponent(defaultConfig[configKey]); // TODO: Remove `options?.isComponent` when all `attrs.composable.js` will be migranted
+    const nestedComponent = getNestedComponent(defaultConfig[configKey]);
 
     const attrs = useAttrs();
     const isDev = import.meta.env.DEV;
@@ -206,6 +207,7 @@ function mergeConfigs({
     i18n,
     strategy,
     safelist,
+    component,
     safelistColors,
     defaultVariants,
     compoundVariants,
@@ -215,13 +217,20 @@ function mergeConfigs({
 
   for (let key in composedConfig) {
     if (isGlobalConfig || isPropsConfig) {
-      if (key === strategy) {
-        config[key] = propsConfig[key] || globalConfig[key] || defaultConfig[key];
-      } else if (key === safelist || key === safelistColors) {
+      if (key === safelist || key === safelistColors) {
         if (propsConfig[key]) {
           // eslint-disable-next-line no-console
           console.warn(`Passing '${key}' key in 'config' prop is not allowed.`);
         }
+      } else if (key === component) {
+        config[key] = propsConfig[key] || defaultConfig[key];
+
+        if (globalConfig[key]) {
+          // eslint-disable-next-line no-console
+          console.warn(`Passing '${key}' key in 'config' prop or by global config is not allowed.`);
+        }
+      } else if (key === strategy) {
+        config[key] = propsConfig[key] || globalConfig[key] || defaultConfig[key];
       } else if (key === defaultVariants) {
         config[key] = { ...defaultConfig[key], ...globalConfig[key], ...propsConfig[key] };
       } else if (key === compoundVariants) {
@@ -391,7 +400,8 @@ function getBaseClasses(value) {
  */
 function getNestedComponent(value) {
   const classes = getBaseClasses(value);
-  const match = classes.match(nestedComponentRegEx);
+  const component = value?.component || "";
+  const match = classes.match(nestedComponentRegEx) || component.match(nestedComponentRegEx);
 
   return match ? match[1] : "";
 }

package/package.json

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

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

@@ -4,34 +4,26 @@ export default /*tw*/ {
     base: "flex flex-wrap",
     variants: {
       size: {
-        xs: "gap-2",
-        sm: "gap-2",
-        md: "gap-3",
-        lg: "gap-3",
-        xl: "gap-4",
+        sm: "gap-2 mt-px",
+        md: "gap-3 mt-0.5",
+        lg: "gap-3 mt-1",
       },
     },
   },
-  radio: {
-    radio: "{URadio} cursor-pointer bg-{color}-500 border-{color}-500 hover:border-{color}-500",
-  },
   unselected: "relative flex",
-  unselectedRadio: {
-    radio: {
-      base: "{URadio}",
-      compoundVariants: [
-        {
-          color: "grayscale",
-          class: "text-white !border-gray-300 hover:!border-gray-400 focus:!border-gray-400 active:!border-gray-500",
-        },
-      ],
-    },
-  },
   unselectedIcon: "{UIcon} absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
   unselectedIconName: "close",
+  unselectedRadio: {
+    component: "{URadio}",
+    radio: "!text-white !border-gray-300 hover:!border-gray-400 focus:!border-gray-400 active:!border-gray-500",
+  },
+  radio: {
+    component: "{URadio}",
+    radio: "bg-{color}-500 border-{color}-500 hover:border-{color}-500",
+  },
   defaultVariants: {
-    name: "UColorPicker",
     size: "md",
+    name: "colorPicker",
     disabled: false,
     colorOptions: [
       "red",

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

@@ -15,7 +15,7 @@
           :id="id"
           :name="name"
           :size="size"
-          color="grayscale"
+          color="gray"
           :checked="selectedItem === ''"
           :disabled="disabled"
           v-bind="unselectedRadioAttrs"
@@ -108,7 +108,7 @@ const props = defineProps({
 
   /**
    * Color picker size.
-   * @values xs, sm, md, lg, xl
+   * @values sm, md, lg
    */
   size: {
     type: String,

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

@@ -42,15 +42,6 @@ export default function useAttrs(props, { isShownMenu, isTop, isRight }) {
       }));
     }
 
-    if (key === "input") {
-      const inputAttrs = attrs[`${key}Attrs`];
-
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...inputAttrs.value,
-        class: cx([inputAttrs.value.class, isShownMenu.value && config.value.inputFocus]),
-      }));
-    }
-
     if (key === "buttonWrapper") {
       const buttonWrapperAttrs = attrs[`${key}Attrs`];
 

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

@@ -1,9 +1,6 @@
 export default /*tw*/ {
   wrapper: "relative",
   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

package/ui.form-radio/index.vue

@@ -100,7 +100,7 @@ const props = defineProps({
 
   /**
    * Radio color.
-   * @values brand, grayscale, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
+   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
    */
   color: {
     type: String,

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.219",
+  "version": "0.0.220",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -1681,7 +1681,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "UColorPicker"
+              "default": "colorPicker"
             },
             {
               "name": "label",
@@ -1715,7 +1715,7 @@
               "description": "Color picker size.",
               "value": {
                 "kind": "expression",
-                "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
+                "type": "'sm' | 'md' | 'lg'"
               },
               "default": "md"
             },
@@ -6499,7 +6499,7 @@
               "description": "Radio color.",
               "value": {
                 "kind": "expression",
-                "type": "'brand' | 'grayscale' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose'"
+                "type": "'brand' | 'grayscale' | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose'"
               },
               "default": "brand"
             },