vueless 0.0.218 → 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.218",
+  "version": "0.0.220",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.button/configs/default.config.js

@@ -130,12 +130,6 @@ export default /*tw*/ {
         class: "bg-gray-800 bg-opacity-10 hover:bg-opacity-15 focus:bg-opacity-15 active:bg-opacity-20",
       },
       { filled: true, variant: "thirdary", color: "white", class: "bg-gray-50" },
-      { square: true, size: "2xs", class: "p-1" },
-      { square: true, size: "xs", class: "p-1.5" },
-      { square: true, size: "sm", class: "p-2" },
-      { square: true, size: "md", class: "p-3" },
-      { square: true, size: "lg", class: "p-3.5" },
-      { square: true, size: "xl", class: "p-4" },
       { iconLeft: true, size: "2xs", class: "pl-1" },
       { iconLeft: true, size: "xs", class: "pl-1.5" },
       { iconLeft: true, size: "sm", class: "pl-2" },
@@ -148,6 +142,12 @@ export default /*tw*/ {
       { iconRight: true, size: "md", class: "pr-4" },
       { iconRight: true, size: "lg", class: "pr-5" },
       { iconRight: true, size: "xl", class: "pr-6" },
+      { square: true, size: "2xs", class: "p-1" },
+      { square: true, size: "xs", class: "p-1.5" },
+      { square: true, size: "sm", class: "p-2" },
+      { square: true, size: "md", class: "p-3" },
+      { square: true, size: "lg", class: "p-3.5" },
+      { square: true, size: "xl", class: "p-4" },
     ],
   },
   text: "whitespace-nowrap focus-visible:outline-none",

package/ui.button/index.vue

@@ -27,7 +27,13 @@
           :icon-size="iconSize"
           :icon-color="componentColor"
         >
-          <UIcon v-if="iconLeft" :name="iconLeft" :size="iconSize" :color="componentColor" />
+          <UIcon
+            v-if="iconLeft"
+            :name="iconLeft"
+            :size="iconSize"
+            :color="componentColor"
+            internal
+          />
         </slot>
       </div>
 
@@ -59,7 +65,13 @@
           :icon-size="iconSize"
           :icon-color="componentColor"
         >
-          <UIcon v-if="iconRight" :name="iconRight" :size="iconSize" :color="componentColor" />
+          <UIcon
+            v-if="iconRight"
+            :name="iconRight"
+            :size="iconSize"
+            :color="componentColor"
+            internal
+          />
         </slot>
       </div>
     </template>

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,17 +1,16 @@
 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
   `,
-  button: "{UButton} shrink-0 grow rounded-none focus:ring-0",
+  button: "{UButton} shrink-0 grow rounded-none !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",
+  nextIconName: "keyboard_arrow_right",
+  prevIconName: "keyboard_arrow_left",
   menu: {
     base: "absolute z-40 my-2 w-80 overflow-hidden rounded-lg border border-brand-300 bg-white p-2 shadow focus:outline-none",
     variants: {
@@ -33,19 +32,12 @@ export default /*tw*/ {
     leaveToClass: "opacity-0 scale-95",
   },
   periodsRow: "mb-1 flex min-w-64 gap-1",
-  periodButton: `
-    {UButton} h-[3.125rem] w-full flex flex-col items-center justify-center
-    [&_span]:block [&_span]:font-normal [&_span]:text-brand-500
-  `,
-  periodButtonIcon: "{UIcon}",
+  periodButton: "{UButton} h-[3.125rem] w-full !ring-0",
   periodButtonIconName: "apps",
-  periodButtonActive: "bg-gray-200",
+  periodButtonActive: "!bg-opacity-20",
   rangeSwitchWrapper: "flex items-center justify-between py-2",
+  rangeSwitchButton: "{UButton}",
   rangeSwitchTitle: "font-medium text-sm",
-  nextIcon: "{UIcon}",
-  nextIconName: "keyboard_arrow_right",
-  prevIcon: "{UIcon}",
-  prevIconName: "keyboard_arrow_left",
   periodDateList: "",
   periodDateMonthList: "grid grid-cols-3 grid-rows-1 gap-0.5",
   periodDateWeekList: "",
@@ -53,25 +45,24 @@ export default /*tw*/ {
   periodDateQuarterList: "",
   periodDate: "w-full",
   periodDateActive: "bg-gray-100",
-  rangeInputWrapper: "flex mt-4",
+  rangeInputWrapper: "flex mt-4 -space-x-px",
   rangeInput: {
-    block: `focus-within:z-10 group-first/range-input-wrapper:rounded-r-none group-last/range-input-wrapper:rounded-l-none`,
+    component: "{UInput}",
     label: {
-      wrapper: "group/range-input-wrapper",
+      component: "{ULabel}",
+      wrapper: "group/range-input-wrapper w-full hover:z-10 focus:z-10",
       description: "hidden",
     },
-    input: {
-      base: "{UInput} text-sm border-brand-100 px-4 py-2.5",
-      variants: {
-        size: {
-          md: "pt-2.5 pb-2.5",
-        },
-      },
-    },
+    block: `
+      focus-within:z-10 focus-within:ring-0
+      group-first/range-input-wrapper:rounded-r-none group-last/range-input-wrapper:rounded-l-none
+    `,
+    input: "group-first/range-input-wrapper:rounded-r-none group-last/range-input-wrapper:rounded-l-none",
   },
-  inputRangeError: "text-xs font-normal !leading-none mt-2 text-center text-red-500",
+  inputRangeError: "text-xs font-normal leading-none mt-2 text-center text-red-500",
   calendar: {
-    wrapper: "{UCalendar} p-0 mt-2 w-full border-none shadow-none",
+    component: "{UCalendar}",
+    wrapper: "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.vue

@@ -5,13 +5,13 @@
       :id="id"
       ref="inputRef"
       v-model="userFormatDate"
+      :size="size"
       :label="label"
+      :disabled="disabled"
       :placeholder="placeholder"
-      :error="error"
       :description="description"
+      :error="error"
       readonly
-      :disabled="disabled"
-      :size="size"
       v-bind="inputAttrs"
       @focus="activate"
     >
@@ -19,8 +19,8 @@
         <slot name="left" />
       </template>
 
-      <template #right-icon>
-        <slot name="right-icon" />
+      <template #icon-right>
+        <slot name="icon-right" />
       </template>
 
       <template #right>
@@ -36,21 +36,20 @@
         :disabled="disabled"
         variant="thirdary"
         filled
+        :icon-left="config.prevIconName"
         v-bind="shiftRangeButtonAttrs"
         @click="onClickShiftRange('prev')"
-      >
-        <UIcon internal interactive size="sm" :name="config.prevIconName" v-bind="prevIconAttrs" />
-      </UButton>
+      />
 
       <UButton
         :id="id"
         ref="buttonRef"
         square
+        filled
         :size="size"
         :disabled="disabled"
         :label="userFormatDate"
         variant="thirdary"
-        filled
         v-bind="buttonAttrs"
         @click="activate"
       />
@@ -58,15 +57,14 @@
       <UButton
         ref="buttonNextRef"
         square
+        filled
         :size="size"
         :disabled="disabled"
         variant="thirdary"
-        filled
+        :icon-left="config.nextIconName"
         v-bind="shiftRangeButtonAttrs"
         @click="onClickShiftRange('next')"
-      >
-        <UIcon internal interactive size="sm" :name="config.nextIconName" v-bind="nextIconAttrs" />
-      </UButton>
+      />
     </div>
 
     <Transition v-bind="config.menuTransition">
@@ -82,12 +80,11 @@
           <UButton
             v-for="periodButton in periods"
             :key="periodButton.name"
-            :label="periodButton.title"
-            variant="thirdary"
-            size="xs"
             square
             filled
-            color="brand"
+            size="xs"
+            variant="thirdary"
+            :label="periodButton.title"
             v-bind="periodButtonAttrs(getPeriodButtonsClasses(periodButton.name))"
             @click="onClickPeriodButton(periodButton.name)"
           />
@@ -96,9 +93,10 @@
         <div v-bind="periodsRowAttrs">
           <UButton
             v-if="customRangeButton.range.to && customRangeButton.range.from"
-            variant="thirdary"
+            square
             filled
-            color="brand"
+            size="xs"
+            variant="thirdary"
             v-bind="periodButtonAttrs(getPeriodButtonsClasses(PERIOD.custom))"
             @click="onClickCustomRangeButton"
           >
@@ -107,62 +105,51 @@
           </UButton>
 
           <UButton
-            variant="thirdary"
-            size="xs"
+            square
             filled
-            color="brand"
+            size="xs"
+            variant="thirdary"
+            :label="locale.ownRange"
+            :icon-left="config.periodButtonIconName"
             v-bind="periodButtonAttrs(getPeriodButtonsClasses(PERIOD.ownRange))"
             @click="onClickOwnRange"
-          >
-            <UIcon
-              internal
-              :name="config.periodButtonIconName"
-              size="xs"
-              v-bind="periodButtonIconAttrs"
-            />
-            {{ locale.ownRange }}
-          </UButton>
+          />
         </div>
 
         <template v-if="!isPeriod.ownRange && !isPeriod.custom">
           <div v-bind="rangeSwitchWrapperAttrs">
-            <UButton size="sm" color="brand" variant="thirdary" square>
-              <UIcon
-                internal
-                interactive
-                size="sm"
-                color="gray"
-                :name="config.prevIconName"
-                v-bind="prevIconAttrs"
-                @click="onClickShiftDatesList('prev')"
-              />
-            </UButton>
+            <UButton
+              square
+              size="xs"
+              color="gray"
+              variant="thirdary"
+              :icon-left="config.prevIconName"
+              v-bind="rangeSwitchButtonAttrs"
+              @click="onClickShiftDatesList('prev')"
+            />
 
             <div v-bind="rangeSwitchTitleAttrs">
               {{ rangeSwitchTitle }}
             </div>
 
-            <UButton size="sm" color="brand" variant="thirdary" square>
-              <UIcon
-                internal
-                interactive
-                size="sm"
-                color="gray"
-                :name="config.nextIconName"
-                v-bind="nextIconAttrs"
-                @click="onClickShiftDatesList('next')"
-              />
-            </UButton>
+            <UButton
+              square
+              size="xs"
+              color="gray"
+              variant="thirdary"
+              :icon-left="config.nextIconName"
+              v-bind="rangeSwitchButtonAttrs"
+              @click="onClickShiftDatesList('next')"
+            />
           </div>
 
           <div v-bind="periodDateListAttrs(getPeriodDateListClasses())">
             <UButton
               v-for="date in periodDateList"
               :key="date.title"
-              :disabled="isDatePeriodOutOfRange(date)"
-              variant="thirdary"
-              color="brand"
               size="sm"
+              variant="thirdary"
+              :disabled="isDatePeriodOutOfRange(date)"
               v-bind="periodDateAttrs(getPeriodDateClasses(date))"
               :label="String(date.title)"
               @click="selectDate(date), toggleMenu()"
@@ -175,7 +162,7 @@
             ref="rangeInputStartRef"
             v-model="rangeStart"
             :error="inputRangeFromError"
-            size="sm"
+            size="md"
             v-bind="rangeInputAttrs"
             :name="rangeInputName"
             @input="onInputRangeInput($event, INPUT_RANGE_TYPE.start)"
@@ -185,14 +172,14 @@
             ref="rangeInputEndRef"
             v-model="rangeEnd"
             :error="inputRangeToError"
-            size="sm"
+            size="md"
             v-bind="rangeInputAttrs"
             :name="rangeInputName"
             @input="onInputRangeInput($event, INPUT_RANGE_TYPE.end)"
           />
         </div>
 
-        <div v-bind="inputRangeErrorAttrs">
+        <div v-if="inputRangeToError || inputRangeFromError" v-bind="inputRangeErrorAttrs">
           {{ inputRangeToError || inputRangeFromError }}
         </div>
 
@@ -216,7 +203,6 @@
 import { computed, watch, ref, nextTick } from "vue";
 import { merge } from "lodash-es";
 
-import UIcon from "../ui.image-icon";
 import UInput from "../ui.form-input";
 import UButton from "../ui.button";
 import UCalendar from "../ui.form-calendar";
@@ -469,12 +455,10 @@ const {
   menuAttrs,
   periodsRowAttrs,
   periodButtonAttrs,
-  periodButtonIconAttrs,
-  rangeSwitchWrapperAttrs,
-  nextIconAttrs,
-  prevIconAttrs,
   periodDateAttrs,
   periodDateListAttrs,
+  rangeSwitchWrapperAttrs,
+  rangeSwitchButtonAttrs,
   rangeSwitchTitleAttrs,
   buttonWrapperAttrs,
   buttonAttrs,

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

@@ -22,7 +22,7 @@ export default /*tw*/ {
       },
       error: {
         true: `
-          hover:bg-red-300 border-red-300
+          border-red-300
           hover:border-red-400 hover:focus-within:border-red-500
           focus-within:border-red-500 focus-within:ring-red-100
         `,
@@ -47,7 +47,7 @@ export default /*tw*/ {
       },
       error: {
         true: `
-        bg-red-50 border-red-900 hover:border-red-400 focus:border-red-500 focus:ring-red-100
+        bg-red-50 hover:border-red-400 focus:border-red-500 focus:ring-red-100
         focus-within:border-red-500 focus-within:ring-red-100
       `,
       },

package/ui.form-input/index.vue

@@ -23,7 +23,7 @@
           @binding {string} icon-size
         -->
         <slot name="icon-left" :icon-name="iconLeft" :icon-size="iconSize">
-          <UIcon v-if="iconLeft" :name="iconLeft" :size="iconSize" />
+          <UIcon v-if="iconLeft" :name="iconLeft" :size="iconSize" internal />
         </slot>
       </span>
 
@@ -77,7 +77,7 @@
           @binding {string} icon-size
         -->
         <slot name="icon-right" :icon-name="iconLeft" :icon-size="iconSize">
-          <UIcon v-if="iconRight" :name="iconRight" :size="iconSize" />
+          <UIcon v-if="iconRight" :name="iconRight" :size="iconSize" internal />
         </slot>
       </span>
     </label>

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/ui.form-select/index.vue

@@ -85,7 +85,7 @@
             @binding {string} icon-size
           -->
           <slot name="icon-left" :icon-name="iconLeft" :icon-size="iconSize">
-            <UIcon v-if="iconLeft" :name="iconLeft" :size="iconSize" />
+            <UIcon v-if="iconLeft" :name="iconLeft" :size="iconSize" internal />
           </slot>
         </span>
 
@@ -196,7 +196,7 @@
             @binding {string} icon-size
           -->
           <slot name="icon-right" :icon-name="iconRight" :icon-size="iconSize">
-            <UIcon v-if="iconRight" :name="iconRight" :size="iconSize" />
+            <UIcon v-if="iconRight" :name="iconRight" :size="iconSize" internal />
           </slot>
         </span>
       </div>

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.218",
+  "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"
             },
@@ -2349,7 +2349,7 @@
               "name": "left"
             },
             {
-              "name": "right-icon"
+              "name": "icon-right"
             },
             {
               "name": "right"
@@ -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"
             },