vueless 0.0.742 → 0.0.744

package/package.json

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

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

@@ -547,9 +547,9 @@ const {
   datepickerCalendarAttrs,
   datepickerInputAttrs,
   menuAttrs,
-  buttonWrapperAttrs,
-  buttonAttrs,
-  shiftRangeButtonAttrs,
+  rangeButtonAttrs,
+  rangeButtonShiftAttrs,
+  rangeButtonSelectAttrs,
   rangeInputWrapperAttrs,
   rangeInputErrorAttrs,
   datepickerInputActiveAttrs,
@@ -572,7 +572,7 @@ const {
 /* Merging DatePickerRange's i18n translations into Calendar's i18n translations. */
 
 /* TODO:
-   Find way to do it more explicity. 
+   Find way to do it more explicity.
    It is not really clear that i18n changes datepickerCalendarAttrs now.
 */
 watchEffect(() => {
@@ -624,7 +624,7 @@ watchEffect(() => {
       </template>
     </UInput>
 
-    <div v-if="isVariant.button" v-bind="buttonWrapperAttrs">
+    <div v-if="isVariant.button" v-bind="rangeButtonAttrs">
       <UButton
         ref="button-prev"
         square
@@ -633,7 +633,7 @@ watchEffect(() => {
         :disabled="disabled"
         variant="thirdary"
         :left-icon="config.defaults.prevIcon"
-        v-bind="shiftRangeButtonAttrs"
+        v-bind="rangeButtonShiftAttrs"
         @click="onClickShiftRange(ShiftAction.Prev)"
       />
 
@@ -646,7 +646,7 @@ watchEffect(() => {
         :disabled="disabled"
         :label="userFormatDate"
         variant="thirdary"
-        v-bind="buttonAttrs"
+        v-bind="rangeButtonSelectAttrs"
         @click="activate"
       />
 
@@ -658,7 +658,7 @@ watchEffect(() => {
         :disabled="disabled"
         variant="thirdary"
         :left-icon="config.defaults.nextIcon"
-        v-bind="shiftRangeButtonAttrs"
+        v-bind="rangeButtonShiftAttrs"
         @click="onClickShiftRange(ShiftAction.Next)"
       />
     </div>

package/ui.form-date-picker-range/config.ts

@@ -22,9 +22,9 @@ export default /*tw*/ {
       },
     },
   },
-  buttonWrapper: "flex rounded-dynamic max-md:justify-between",
-  button: "{UButton} shrink-0 grow rounded-none",
-  shiftRangeButton: `
+  rangeButton: "flex rounded-dynamic max-md:justify-between",
+  rangeButtonSelect: "{UButton} shrink-0 grow rounded-none",
+  rangeButtonShift: `
     first:rounded-dynamic first:rounded-r-none
     last:rounded-dynamic last:rounded-l-none
   `,

package/ui.image-icon/UIcon.vue

@@ -38,6 +38,7 @@ const generatedIcons = computed(() => {
 
 const dynamicComponent = computed(() => {
   const FILL_SUFFIX = "-fill";
+  const ICON_EXTENSION = ".svg";
 
   const userLibrary = config.value.defaults.library as IconLibraries;
 
@@ -69,12 +70,15 @@ const dynamicComponent = computed(() => {
   /* Dynamic import */
   if (!name) return "";
 
-  function getIcon(params: (string | number)[]) {
+  function getIcon(name: string, params: (string | number)[] = []) {
+    // eslint-disable-next-line prettier/prettier
+    const iconName = isFill
+      ? name + FILL_SUFFIX + ICON_EXTENSION
+      : name + ICON_EXTENSION;
+
     const [, component] =
       generatedIcons.value.find(([path]) =>
-        params.every(
-          (param) => (isFill || !path.includes(FILL_SUFFIX)) && path.includes(String(param)),
-        ),
+        [iconName, ...params].every((param) => path.includes(String(param))),
       ) || [];
 
     return component;
@@ -84,21 +88,21 @@ const dynamicComponent = computed(() => {
   const libraries = {
     "vueless": async () => {
       return import.meta.env.PROD
-        ? await getIcon([name])
+        ? await getIcon(name)
         : isSSR
           ? import(/* @vite-ignore */ `${VUELESS_ICONS_CACHED_DIR}/${VUELESS_LIBRARY}/${name}.svg?component`)
           : import(/* @vite-ignore */ `/${VUELESS_ICONS_CACHED_DIR}/${VUELESS_LIBRARY}/${name}.svg?component`);
     },
     "@material-symbols": async () => {
       return import.meta.env.PROD
-        ? await getIcon([library, weight, style, name])
+        ? await getIcon(name, [library, weight, style])
         : isSSR
           ? import(/* @vite-ignore */ `node_modules/${library}/svg-${weight}/${style}/${name}.svg?component`)
           : import(/* @vite-ignore */ `/node_modules/${library}/svg-${weight}/${style}/${name}.svg?component`);
     },
     "bootstrap-icons": async () => {
       return import.meta.env.PROD
-        ? await getIcon([library, name])
+        ? await getIcon(name, [library])
         : isSSR
           ? import(/* @vite-ignore */ `node_modules/${library}/icons/${name}.svg?component`)
           : import(/* @vite-ignore */ `/node_modules/${library}/icons/${name}.svg?component`);
@@ -107,14 +111,14 @@ const dynamicComponent = computed(() => {
       const fillType = isFill ? "solid" : "outline";
 
       return import.meta.env.PROD
-        ? await getIcon([library, fillType, name])
+        ? await getIcon(name, [library, fillType])
         : isSSR
           ? import(/* @vite-ignore */ `node_modules/${library}/24/${fillType}/${name}.svg?component`)
           : import(/* @vite-ignore */ `/node_modules/${library}/24/${fillType}/${name}.svg?component`);
     },
     "custom-icons": async () => {
       return import.meta.env.PROD
-        ? await getIcon([library, name])
+        ? await getIcon(name, [library])
         : isSSR
           ? import(/* @vite-ignore */ `${customLibraryPath}/${name}.svg?component`)
           : import(/* @vite-ignore */ `/${customLibraryPath}/${name}.svg?component`);