vueless 1.0.2-beta.4 → 1.0.2-beta.40

package/README.md

@@ -13,6 +13,7 @@ Vueless is simple enough for everyday use and powerful enough for advanced scena
 ### Key features
 
 - 🧩 65+ UI components (including range date picker, multi-selects, and nested table)
+- 🪄 Automatic on-demand component import (as you use them)
 - 📘 Built-in Storybook support
 - 🌈 Beautiful, modern default UI theme
 - 🌗 Light and dark mode support
@@ -66,12 +67,13 @@ createApp(App).use(vueless).mount('#app');
 4. Add Vite plugins.
 
 ```javascript
-import { Vueless, UnpluginComponents } from "vueless/plugin-vite";
+import { Vueless, TailwindCSS, UnpluginComponents } from "vueless/plugin-vite";
 
 export default defineConfig({
   plugins: [
     ...
     Vueless(),
+    TailwindCSS(),
     UnpluginComponents(),
   ],
   ...

package/composables/useUI.ts

@@ -2,7 +2,6 @@ import { ref, watch, getCurrentInstance, toValue, useAttrs, computed } from "vue
 import { isEqual } from "lodash-es";
 
 import { cx, cva, setColor, vuelessConfig, getMergedConfig } from "../utils/ui.ts";
-import { isCSR } from "../utils/helper.ts";
 import {
   CVA_CONFIG_KEY,
   SYSTEM_CONFIG_KEY,
@@ -141,7 +140,7 @@ export default function useUI<T>(
         keyConfig = config.value[configKey] as NestedComponent;
       }
 
-      const isDev = isCSR && import.meta.env?.DEV;
+      const isDev = import.meta.env?.DEV;
       const isTopLevelKey = (topLevelClassKey || firstClassKey) === configKey;
 
       const extendsClasses = getExtendsClasses(configKey);

package/constants.js

@@ -9,6 +9,7 @@ export const NEUTRAL_COLOR = "neutral";
 export const SECONDARY_COLOR = "secondary";
 export const GRAYSCALE_COLOR = "grayscale";
 export const INHERIT_COLOR = "inherit";
+export const TEXT_COLOR = "text"; // the default design system text color
 
 /* Vueless keys */
 export const TEXT = "text";
@@ -391,7 +392,7 @@ export const ICONS_CACHED_DIR = `${VUELESS_CACHE_DIR}/${ICONS_DIR}`;
 export const ICONS_VIRTUAL_MODULE_ID = "virtual:vueless/icons";
 export const RESOLVED_ICONS_VIRTUAL_MODULE_ID = `\0${ICONS_VIRTUAL_MODULE_ID}`;
 
-export const VUELESS_TAILWIND_SAFELIST = `${VUELESS_CACHE_DIR}/safelist.txt`;
+export const VUELESS_TAILWIND_SAFELIST = `${VUELESS_CACHE_DIR}/tailwind/safelist.txt`;
 export const VUELESS_CONFIGS_CACHED_DIR = `${VUELESS_CACHE_DIR}/configs`;
 export const VUELESS_MERGED_CONFIGS_CACHED_DIR = `${VUELESS_CACHE_DIR}/mergedConfigs`;
 export const VUELESS_CONFIG_FILE_NAME = "vueless.config";

package/directives/clickOutside/storybook/docs.mdx

@@ -6,6 +6,5 @@ import * as stories from "./stories.ts";
 <Title of={stories} />
 <Subtitle of={stories} />
 <Description of={stories} />
-<Primary of={stories}  />
 <Controls of={stories.Default} />
 <Stories of={stories} />

package/directives/clickOutside/storybook/stories.ts

@@ -48,15 +48,15 @@ const DefaultTemplate: StoryFn<VOnClickOutsideArgs> = (args: VOnClickOutsideArgs
 
     <UCalendar v-model="date" v-if="isShownCalendar" class="mt-2" />
 
-    <UAlert class="mt-4" variant="outlined">
-      <p>
-        Click on calendar itself will trigger directive callback, use ignore option to prevent this behavior.
-      </p>
-    </UAlert>
+    <UAlert
+      variant="soft"
+      description="Click on calendar itself will trigger directive callback."
+      class="mt-4"
+    />
   `,
 });
 
-const SettingsTemplate: StoryFn<VOnClickOutsideArgs> = (args: VOnClickOutsideArgs) => ({
+const IgnoreOptionsTemplate: StoryFn<VOnClickOutsideArgs> = (args: VOnClickOutsideArgs) => ({
   components: { UButton, UCalendar, UAlert },
   directives: { clickOutside },
   setup() {
@@ -98,25 +98,31 @@ const SettingsTemplate: StoryFn<VOnClickOutsideArgs> = (args: VOnClickOutsideArg
       <UCalendar v-model="date" v-if="isShownCalendar" class="mt-2" />
     </div>
 
-    <UAlert class="mt-4" variant="outlined">
-      <p>
-        Click on calendar will not trigger directive callback now.
-      </p>
-    </UAlert>
+    <UAlert class="mt-4" variant="soft" description="Click on calendar will not trigger directive callback now." />
   `,
 });
 
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const Settings = SettingsTemplate.bind({});
-Settings.args = {};
-
-Settings.parameters = {
+export const IgnoreOptions = IgnoreOptionsTemplate.bind({});
+IgnoreOptions.args = {};
+IgnoreOptions.parameters = {
   docs: {
+    description: {
+      story: `
+This story demonstrates the \`ignore\` option of v-click-outside,
+which prevents the callback when clicking inside specified elements (e.g., the calendar),
+allowing it to stay open during interaction.
+      `,
+    },
     source: {
       code: `
         <UButton @click="toggleCalendar" v-click-outside="[closeCalendar, { ignore: [calendarRef] }]" />
+
+        <div ref="calendar" class="w-fit">
+          <UCalendar v-model="date" v-if="isShownCalendar" class="mt-2" />
+        </div>
       `,
     },
   },

package/directives/tooltip/storybook/docs.mdx

@@ -6,6 +6,5 @@ import * as stories from "./stories.ts";
 <Title of={stories} />
 <Subtitle of={stories} />
 <Description of={stories} />
-<Primary of={stories}  />
 <Controls of={stories.Default} />
 <Stories of={stories} />

package/directives/tooltip/storybook/stories.ts

@@ -1,9 +1,10 @@
 import type { Meta, StoryFn } from "@storybook/vue3";
 
 import UIcon from "../../../ui.image-icon/UIcon.vue";
-import URow from "../../../ui.container-row/URow.vue";
+import UCol from "../../../ui.container-col/UCol.vue";
 import UAlert from "../../../ui.text-alert/UAlert.vue";
 import ULink from "../../../ui.button-link/ULink.vue";
+import UText from "../../../ui.text-block/UText.vue";
 import tooltip from "../vTooltip.ts";
 
 import type { Props } from "tippy.js";
@@ -33,30 +34,36 @@ const DefaultTemplate: StoryFn<VTooltipArgs> = (args: VTooltipArgs) => ({
   `,
 });
 
-const SettingsTemplate: StoryFn<VTooltipArgs> = (args: VTooltipArgs) => ({
-  components: { UIcon, URow, UAlert, ULink },
+const TooltipSettingsTemplate: StoryFn<VTooltipArgs> = (args: VTooltipArgs) => ({
+  components: { UIcon, UCol, UAlert, ULink, UText },
   directives: { tooltip },
   setup() {
     return { args };
   },
   template: `
-    <URow align="center">
-      <UAlert variant="outlined">
-        <p>
-          See all available settings in <ULink label="Tippy.js docs" href="https://atomiks.github.io/tippyjs/v6/all-props/" underlined />
-        </p>
-      </UAlert>
+    <UCol>
       <UIcon
         interactive
         name="sentiment_satisfied"
-        v-tooltip="{ content: '<b>Tooltip</b>', placement: 'bottom', allowHTML: true, zIndex: 42 }"
+        v-tooltip="{ content: '<b>Tooltip</b>', placement: 'bottom', allowHTML: true }"
       />
-    </URow>
+    </UCol>
   `,
 });
 
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const Settings = SettingsTemplate.bind({});
-Settings.args = {};
+export const TooltipSettings = TooltipSettingsTemplate.bind({});
+TooltipSettings.args = {};
+TooltipSettings.parameters = {
+  docs: {
+    description: {
+      story: `
+This story demonstrates how to pass custom options to the v-tooltip directive,
+including HTML content and tooltip placement. For more settings,
+refer to the <a href="https://atomiks.github.io/tippyjs/v6/all-props/" target="_blank" class="!no-underline">Tippy.js documentation</a>.
+      `,
+    },
+  },
+};

package/icons/internal/home.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M222.15-182.15h143.78v-251.92h228.14v251.92h143.78v-386.89L480-762.37 222.15-568.96v386.81Zm-68.13 68.13v-489.09L480-847.65l326.22 244.54v489.09H528.57v-254.55h-97.14v254.55H154.02ZM480-472.76Z"/></svg>

package/icons/storybook/account_balance.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M206.5-239.09v-339H272v339h-65.5Zm244.87 0v-339h65.26v339h-65.26ZM74.02-116.46v-68.13h812.2v68.13H74.02ZM688-239.09v-339h65.5v339H688ZM74.02-632.59v-63.04L480-926.5l406.22 230.87v63.04H74.02Zm149.31-68.37h513.34-513.34Zm0 0h513.34L480-848.17 223.33-700.96Z"/></svg>

package/icons/storybook/arrow_back.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m283.8-445.93 244.18 244.17L480-154.02 154.02-480 480-806.22l47.98 47.98L283.8-514.07h522.42v68.14H283.8Z"/></svg>

package/icons/storybook/arrow_forward.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M676.2-445.93H154.02v-68.14H676.2L432.02-758.24 480-806.22 806.22-480 480-154.02l-47.98-47.74L676.2-445.93Z"/></svg>

package/icons/storybook/asterisk.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M445.93-114.02V-398.2l-200.6 200.37-47.74-47.74L397.72-445.7h-283.7v-68.37H399.2L197.83-715.43l47.5-47.98 200.6 200.37v-283.18h68.14v283.7L715.2-763.41l47.97 47.98L561.8-514.07h284.42v68.37H563.28l199.89 200.13-47.74 47.74-201.36-201.13v284.94h-68.14Z"/></svg>

package/icons/storybook/brightness_1.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M480.03-74.02q-83.46 0-157.54-31.88-74.07-31.88-129.39-87.2-55.32-55.32-87.2-129.36-31.88-74.04-31.88-157.51 0-84.46 31.88-158.54 31.88-74.07 87.16-128.9 55.28-54.84 129.34-86.82 74.06-31.99 157.55-31.99 84.48 0 158.59 31.97 74.1 31.97 128.91 86.77 54.82 54.8 86.79 128.88 31.98 74.08 31.98 158.6 0 83.5-31.99 157.57-31.98 74.07-86.82 129.36-54.83 55.29-128.87 87.17-74.04 31.88-158.51 31.88Zm-.03-68.13q141.04 0 239.45-98.75 98.4-98.76 98.4-239.1 0-141.04-98.4-239.45-98.41-98.4-239.57-98.4-140.16 0-238.95 98.4-98.78 98.41-98.78 239.57 0 140.16 98.75 238.95 98.76 98.78 239.1 98.78ZM480-480Z"/></svg>

package/icons/storybook/celebration.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m73.3-69 193.42-540.8 350.39 346.39L73.3-69Zm114.63-114.63L494.04-293 296.3-491.74 187.93-183.63Zm376-258.74L527.3-479l236.9-236.89q32.95-32.96 83.75-33.46 50.79-.5 83.98 32.46l17 17-36.86 36.63-19-19q-19-19-44.12-19.5-25.12-.5-44.88 19.5L563.93-442.37Zm-164.5-160.26L362.8-639.5l28.81-29.04q23.24-23 21.74-52.38-1.5-29.38-21.74-49.62l-28-28 36.87-36.63 26 26q35.95 36.19 35.45 90.25-.5 54.05-36.45 90.25l-26.05 26.04ZM483.3-523l-36.87-36.63 149.85-149.85q19-19 18.5-48.5t-19.5-48.5l-61-61 36.87-36.87 63 63q31.96 33.2 32.96 83.37 1 50.18-31.96 83.13L483.3-523Zm163.5 164.5-36.87-36.87 46.05-45.8q36.19-36.2 86.75-37.2 50.55-1 86.75 35.2l51 51-36.87 36.87-52-52q-23-23-48-23t-48 23l-48.81 48.8ZM187.93-183.63Z"/></svg>

package/icons/storybook/contract.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M227.15-74.02q-47.14 0-80.13-33.03-33-33.03-33-80.22v-142.77h120.24v-556.18h611.96v699.07q0 47.14-33 80.13-33 33-80.13 33H227.15ZM733-142.15q19.09 0 32.09-12.94 13-12.94 13-32.06v-630.7H302.63v487.81h385.46v142.89q0 19.12 12.91 32.06 12.91 12.94 32 12.94ZM362.63-640.48v-64.54h355.46v64.54H362.63Zm0 124.78v-64.78h355.46v64.78H362.63ZM226.15-142.15h393.57v-119.76H182.15v74.64q0 19.17 13 32.15 13 12.97 31 12.97Zm0 0h-44 437.57-393.57Z"/></svg>

package/icons/storybook/cookie.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M480.19-75.93q-83.55 0-157.06-31.86-73.52-31.86-128.5-86.84-54.98-54.98-86.84-128.74Q75.93-397.13 75.93-480q0-85.39 32.34-158.97 32.34-73.57 87.41-128.57 55.08-55 127.92-86.26 72.83-31.27 153.39-31.27 20.29 0 40.18 1.74 19.9 1.74 39.61 5.98-6.24 40.72 5.43 79.22 11.66 38.5 37.68 67.76 26.02 29.26 65.9 44.64 39.88 15.38 89.84 9.62-5.56 63.72 22.84 109.48 28.4 45.76 104.36 51.56 1 9.72 1.12 19.44.12 9.72.12 18.4 0 82.43-31.5 155.32-31.5 72.88-85.98 127.68-54.48 54.81-128.28 86.55-73.79 31.75-158.12 31.75ZM420.12-558Q446-558 464-576.12q18-18.12 18-44T463.88-664q-18.12-18-44-18T376-663.88q-18 18.12-18 44T376.12-576q18.12 18 44 18Zm-80 200Q366-358 384-376.12q18-18.12 18-44T383.88-464q-18.12-18-44-18T296-463.88q-18 18.12-18 44T296.12-376q18.12 18 44 18ZM600-320q17 0 28.5-11.5T640-360q0-17-11.5-28.5T600-400q-17 0-28.5 11.5T560-360q0 17 11.5 28.5T600-320ZM480.07-144.07q139.82 0 232.12-91.58 92.31-91.59 104.27-225.96-53.05-20-86.31-59.26-33.26-39.26-41.26-89.54-80.04-11.24-135.9-69.76-55.86-58.53-64.58-136.29-70.89-2.04-133.71 24-62.83 26.05-109.61 71.73-46.79 45.69-73.91 108.07-27.11 62.39-27.11 132.66 0 140.43 97.75 238.18t238.25 97.75Zm.69-340.21Z"/></svg>

package/icons/storybook/credit_card.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M886.22-737.85v515.7q0 27.6-20.34 47.86-20.33 20.27-48.03 20.27h-675.7q-27.6 0-47.86-20.27-20.27-20.26-20.27-47.86v-515.7q0-27.7 20.27-48.03 20.26-20.34 47.86-20.34h675.7q27.7 0 48.03 20.34 20.34 20.33 20.34 48.03ZM142.15-631.48h675.7v-106.37h-675.7v106.37Zm0 129v280.33h675.7v-280.33h-675.7Zm0 280.33v-515.7 515.7Z"/></svg>

package/icons/storybook/description.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M319-249.52h322v-62.63H319v62.63Zm0-170h322v-62.63H319v62.63Zm-96.85 345.5q-27.6 0-47.86-20.27-20.27-20.26-20.27-47.86v-675.7q0-27.7 20.27-48.03 20.26-20.34 47.86-20.34h361.48l222.59 222.59v521.48q0 27.6-20.34 47.86-20.33 20.27-48.03 20.27h-515.7Zm326.7-557.83v-186h-326.7v675.7h515.7v-489.7h-189Zm-326.7-186v186-186 675.7-675.7Z"/></svg>

package/icons/storybook/directions_bike.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M193.44-74.02q-80.29 0-136.86-56.41Q0-186.84 0-267.24q0-80.39 56.55-136.91 56.55-56.52 136.78-56.52 80.52 0 137.04 56.55 56.52 56.55 56.52 136.78 0 80.51-56.58 136.92-56.59 56.4-136.87 56.4Zm-.09-66.46q53.63 0 90.36-36.59 36.72-36.58 36.72-90.14 0-53.55-36.68-90.28-36.69-36.73-90.31-36.73-53.63 0-90.3 36.64-36.68 36.64-36.68 90.26 0 53.62 36.63 90.23 36.64 36.61 90.26 36.61Zm253.54-55.24v-201.67l-133.8-118.28q-11.48-9.48-16.84-22.86-5.36-13.37-5.36-28.13 0-14.54 5.74-27.31t15.98-23.25l120.9-120.66q11.01-11.01 24.91-16.49 13.9-5.48 29.15-5.48 15.63 0 29.84 5.24 14.22 5.24 25.46 16.48l79.02 79.02q29.46 29.46 67.09 47.22 37.64 17.76 79.45 17.76v66.46q-55.61 0-105.78-22.12t-89.41-61.36l-38.81-38.81L426.3-540.83l87.05 93.57v251.54h-66.46Zm175.54-557.32q-30.8 0-52.78-21.82t-21.98-52.82q0-30.99 21.9-52.97t52.82-21.98q30.91 0 52.89 21.87t21.98 52.93q0 31.07-21.88 52.93-21.87 21.86-52.95 21.86ZM766.67-74.02q-80.52 0-136.92-56.41-56.4-56.41-56.4-136.81 0-80.39 56.41-136.91 56.41-56.52 136.8-56.52 80.4 0 136.92 56.55Q960-347.57 960-267.34q0 80.51-56.55 136.92-56.55 56.4-136.78 56.4Zm-.14-66.46q53.56 0 90.29-36.59 36.72-36.58 36.72-90.14 0-53.55-36.63-90.28-36.64-36.73-90.26-36.73-53.63 0-90.24 36.64-36.61 36.64-36.61 90.26 0 53.62 36.59 90.23 36.59 36.61 90.14 36.61Z"/></svg>

package/icons/storybook/directions_car.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M200.48-198.02v48.5q0 15.09-10.42 25.29-10.42 10.21-25.56 10.21H150q-15.14 0-25.56-10.42-10.42-10.42-10.42-25.56v-325.26l85.24-256.65q5.48-15.92 18.61-25.11 13.13-9.2 30.13-9.2h464q17 0 30.13 9.2 13.13 9.19 18.61 25.11l85.48 256.65V-150q0 15.14-10.59 25.56-10.58 10.42-25.63 10.42h-15.5q-15.39 0-25.18-10.21-9.8-10.2-9.8-25.29v-48.5H200.48ZM205.63-534h548.98l-54.28-163.85H259.67L205.63-534Zm-23.48 60v207.85V-474Zm104.81 158.8q23 0 38.62-15.75 15.62-15.75 15.62-38.25 0-23.33-15.87-39.66-15.87-16.34-38.13-16.34-23.58 0-39.79 16.27-16.21 16.26-16.21 39.5 0 23.23 16.14 38.73 16.15 15.5 39.62 15.5Zm387.08 0q23.34 0 39.67-15.75 16.33-15.75 16.33-38.25 0-23.33-16.26-39.66-16.27-16.34-39.5-16.34-23.24 0-38.74 16.27-15.5 16.26-15.5 39.5 0 23.23 15.75 38.73 15.75 15.5 38.25 15.5Zm-491.89 49.05h595.7V-474h-595.7v207.85Z"/></svg>

package/icons/storybook/done_all.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M294.24-230.52 64.5-460.26 113-509l181 181 48.74 48.74-48.5 48.74ZM464-236.26 234.02-466.48l48.98-48.5 181 181L847.76-717.5l48.98 48.5L464-236.26Zm0-175.98-48.5-48.74 257-257 48.5 48.74-257 257Z"/></svg>

package/icons/storybook/east.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m600-193.78-47.74-47.98 204.41-204.17H74.26v-68.14h682.41L552.02-718.48 600-766.22 886.22-480 600-193.78Z"/></svg>

package/icons/storybook/handyman.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M771.65-67.33q-6.72 0-12.55-2.35-5.84-2.36-11.32-7.84L502.2-323.11q-5.48-5.48-7.84-11.31-2.36-5.84-2.36-12.56 0-6.72 2.36-12.67 2.36-5.96 7.84-11.44l85.47-85.48q5.48-5.47 11.32-7.95 5.84-2.48 12.79-2.48 6.72 0 12.56 2.48 5.83 2.48 11.31 7.95l245.59 245.83q5.48 5.48 7.96 11.2 2.47 5.71 2.47 12.67 0 6.72-2.59 12.67-2.6 5.96-7.84 11.2l-85.48 85.48q-5.48 5.48-11.31 7.84-5.84 2.35-12.8 2.35Zm.24-77.97 41.57-41.57-201.92-202.15-41.56 41.56L771.89-145.3Zm-584.3 77.74q-6.72 0-13.06-2.24-6.33-2.24-11.81-7.72L78.24-162q-5.48-5.24-7.72-11.46-2.24-6.21-2.24-13.17 0-6.72 2.24-12.67 2.24-5.96 7.72-11.44L308.74-441h87.15l37.28-37.28L255.3-656.15h-58.43L66.85-786.17l104.5-104.5 130.02 130.02v58.43l177.87 177.87 130.72-130.72-68.2-68.19 56-55.76h-113l-20.15-20.39 134.22-134.46 20.39 20.63v112.76l56-56 174.02 174.26q15.48 15.72 24.46 35.94 8.97 20.21 8.97 42.93 0 21.44-7.45 41.25-7.46 19.82-20.42 35.77l-87.15-87.15-57.43 57.44-53.2-53.2-215.06 215.07v86.39L211.46-77.52q-5.48 5.48-11.2 7.72-5.72 2.24-12.67 2.24Zm0-77.74 202.39-202.16v-41.56h-41.57L146.02-186.87l41.57 41.57Zm0 0-41.57-41.57 21.28 20.28 20.29 21.29Zm584.3 0 41.57-41.57-41.57 41.57Z"/></svg>

package/icons/storybook/keyboard_tab.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M817.85-235.93v-488.14h68.37v488.14h-68.37Zm-345.74 2.67L423.13-281 588.3-445.93H74.02v-68.14H588.3L424.37-679l47.74-47.74L718.85-480 472.11-233.26Z"/></svg>

package/icons/storybook/keyboard_tab_rtl.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M142.15-235.93H74.02v-488.14h68.13v488.14Zm345.74 2.67L241.15-480l246.74-246.74L535.63-679 371.7-514.07h514.52v68.14H371.7L536.87-281l-48.98 47.74Z"/></svg>

package/icons/storybook/notifications.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M154.02-194.02v-68.13h77.85v-298.02q0-86.08 50.34-154.77 50.33-68.69 133.72-86.41v-20.56q0-26.8 18.69-45.55 18.69-18.76 45.38-18.76t45.38 18.76q18.69 18.75 18.69 45.55v20.56q83.39 17.48 133.84 86.25 50.46 68.77 50.46 154.93v298.02h77.85v68.13h-652.2ZM480-501.04Zm.12 429.17q-33.83 0-57.93-24.13t-24.1-58.02h164.06q0 33.95-24.15 58.05-24.15 24.1-57.88 24.1ZM300-262.15h360v-298.02q0-74.76-52.5-127.38Q555-740.17 480-740.17t-127.5 52.62Q300-634.93 300-560.17v298.02Z"/></svg>

package/icons/storybook/phone_iphone.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M262.39-34.02q-28.45 0-48.41-19.89-19.96-19.89-19.96-48.24v-755.7q0-27.7 20.34-48.03 20.33-20.34 48.03-20.34h433.22q28.45 0 48.41 19.96 19.96 19.96 19.96 48.41v144.65q18 4.05 30.12 18.6 12.12 14.55 12.12 32.7v73.7q0 19.48-12.12 34.2-12.12 14.72-30.12 18.69v433.16q0 28.35-19.96 48.24t-48.41 19.89H262.39Zm-.24-67.89h433.7v-756.18h-433.7v756.18Zm0 0v-756.18 756.18Zm110.48-83.59h212.98q14.37 0 24.1-9.87 9.72-9.87 9.72-24.55 0-14.68-9.65-24.19-9.66-9.52-24.17-9.52H372.63q-14.48 0-24.27 9.87t-9.79 24.41q0 14.53 9.82 24.19 9.82 9.66 24.24 9.66Z"/></svg>

package/icons/storybook/question_mark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M428.13-330.96q1-75.58 17.46-110.74 16.45-35.15 60.17-72.95 41.28-36.33 62.83-68.26 21.54-31.92 21.54-68.63 0-43.57-28.92-72.49-28.93-28.93-80.54-28.93-50.56 0-78.8 28.67-28.24 28.66-41.48 62.81l-92.61-40.59q23.2-62.58 77.49-105.28 54.3-42.69 135.35-42.69 102.2 0 157.4 57.09t55.2 137.65q0 50.87-20.62 91.42-20.62 40.55-65.86 82.84-48.28 45.32-58.52 70.44-10.24 25.12-11 79.64H428.13ZM480.62-73.3q-31.34 0-53.39-22.06-22.06-22.05-22.06-53.32t22.04-53.33q22.03-22.06 53.44-22.06 31.42 0 53.47 22.06 22.05 22.06 22.05 53.33t-22.1 53.32Q511.96-73.3 480.62-73.3Z"/></svg>

package/icons/storybook/schedule.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m624.37-286.04 49.06-48.59-157.8-158.86v-198.55h-65.26v224.89l174 181.11ZM480.03-74.02q-83.46 0-157.51-31.95-74.05-31.94-129.32-87.21-55.28-55.26-87.23-129.3-31.95-74.03-31.95-157.49 0-83.46 32-157.54 32-74.07 87.2-129.27 55.2-55.2 129.25-87.32 74.05-32.12 157.53-32.12t157.53 32.12q74.05 32.12 129.25 87.32 55.2 55.2 87.32 129.25 32.12 74.05 32.12 157.53T854.1-322.47q-32.12 74.05-87.32 129.25-55.2 55.2-129.24 87.2t-157.51 32ZM480-480Zm-.12 337.85q139.16 0 238.57-99.17 99.4-99.16 99.4-238.56t-99.37-238.69Q619.11-817.85 480-817.85q-139.28 0-238.57 99.26-99.28 99.25-99.28 238.59 0 139.52 99.28 238.68 99.28 99.17 238.45 99.17Z"/></svg>

package/icons/storybook/straighten.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M142.63-235.46q-27.6 0-47.86-20.33-20.27-20.34-20.27-48.04v-352.34q0-26.7 20.27-47.54 20.26-20.83 47.86-20.83h674.74q27.6 0 47.86 20.83 20.27 20.84 20.27 47.54v352.34q0 27.7-20.27 48.04-20.26 20.33-47.86 20.33H142.63Zm0-68.37h674.74v-352.34H690V-480h-60v-176.17H510V-480h-60v-176.17H330V-480h-60v-176.17H142.63v352.34ZM270-480h60-60Zm180 0h60-60Zm180 0h60-60Zm-150 0Z"/></svg>

package/icons/storybook/trending_up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m122.76-234.74-48.74-48.74 298.94-297.69 167 167 231.91-232.4H647.02v-68.36h239.2v239.19h-67.37v-121.09L538.96-316.7l-167-167-249.2 248.96Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.0.2-beta.4",
+  "version": "1.0.2-beta.40",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [
@@ -30,13 +30,13 @@
   "scripts": {
     "pre:start": "npx node .scripts/icons",
     "dev:docs": "storybook dev -p 6006 --docs --no-open",
-    "dev": "STORYBOOK_FULL=1 storybook dev -p 6006 --no-open",
+    "dev": "storybook dev -p 6006 --no-open",
     "build": "storybook build --docs",
     "preview": "vite preview --host --outDir=storybook-static",
     "ts:check": "vue-tsc --build --force",
     "release:prepare": "npm run pre:start && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE README.md dist/ && npx node .scripts/writeLocales",
     "release:beta": "release-it --ci --npm.publish --preRelease=beta --increment=prerelease",
-    "release:patch": "release-it patch --ci --npm.publish",
+    "release:patch": "release-it patch --ci --npm.publish --git.tag --github.release",
     "release:minor": "release-it minor --ci --npm.publish --git.tag --github.release",
     "release:major": "release-it major --ci --npm.publish --git.tag --github.release",
     "lint": "eslint --no-fix src/ .storybook/",
@@ -75,7 +75,7 @@
     "@vue/eslint-config-typescript": "^14.5.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.7.0",
-    "@vueless/storybook": "^1.0.0",
+    "@vueless/storybook": "^1.0.1-beta.1",
     "eslint": "^9.27.0",
     "eslint-plugin-storybook": "^0.12.0",
     "eslint-plugin-vue": "^10.1.0",

package/plugin-vite.js

@@ -2,9 +2,6 @@
  * The file has a `.js ` extension because it is a node script.
  * Please do not change the extension if you do not fully understand the consequences.
  */
-import path from "node:path";
-import { watch } from "chokidar";
-import { cwd } from "node:process";
 import TailwindVite from "@tailwindcss/vite";
 import TailwindPostcss from "@tailwindcss/postcss";
 import UnpluginVueComponents from "unplugin-vue-components/vite";
@@ -16,6 +13,8 @@ import {
   copyIconsCache,
   generateIconExports,
   reloadServerOnIconsCacheUpdate,
+  extractIconLines,
+  isIconChanged,
 } from "./utils/node/loaderIcon.js";
 import { createTailwindSafelist, clearTailwindSafelist } from "./utils/node/tailwindSafelist.js";
 import { componentResolver, directiveResolver } from "./utils/node/vuelessResolver.js";
@@ -28,20 +27,18 @@ import {
   getVuelessConfigDirs,
   cacheMergedConfigs,
 } from "./utils/node/helper.js";
-
 import {
-  VUE_EXT,
-  TYPESCRIPT_EXT,
-  JAVASCRIPT_EXT,
   INTERNAL_ENV,
   STORYBOOK_ENV,
   NUXT_MODULE_ENV,
-  DEFAULT_EXIT_CODE,
-  ICONS_VIRTUAL_MODULE_ID,
-  RESOLVED_ICONS_VIRTUAL_MODULE_ID,
   VUELESS_LOCAL_DIR,
   VUELESS_PACKAGE_DIR,
-  ICONS_CACHED_DIR,
+  ICONS_VIRTUAL_MODULE_ID,
+  RESOLVED_ICONS_VIRTUAL_MODULE_ID,
+  DEFAULT_EXIT_CODE,
+  JAVASCRIPT_EXT,
+  TYPESCRIPT_EXT,
+  VUE_EXT,
 } from "./constants.js";
 
 /* TailwindCSS Vite plugins. */
@@ -71,8 +68,8 @@ export const Vueless = function (options = {}) {
 
   const vuelessSrcDir = isInternalEnv ? VUELESS_LOCAL_DIR : VUELESS_PACKAGE_DIR;
 
-  const iconsCachePath = path.join(cwd(), ICONS_CACHED_DIR);
-  const iconsCacheWatcher = watch(iconsCachePath);
+  // Cache to store previous icon content for change detection
+  const iconContentCache = new Map();
 
   const targetFiles = [
     ...(include || []),
@@ -93,6 +90,8 @@ export const Vueless = function (options = {}) {
     /* clear tailwind safelist */
     await clearTailwindSafelist(debug);
 
+    iconContentCache.clear();
+
     /* stop a command line process */
     process.exit(DEFAULT_EXIT_CODE);
   });
@@ -126,11 +125,12 @@ export const Vueless = function (options = {}) {
         await cacheMergedConfigs(vuelessSrcDir);
       }
 
+      await buildWebTypes(vuelessSrcDir);
+      await setCustomPropTypes(vuelessSrcDir);
+
       if (isInternalEnv || isStorybookEnv) {
-        await buildWebTypes(vuelessSrcDir);
         await showHiddenStories(vuelessSrcDir);
         await hideHiddenStories(vuelessSrcDir);
-        await setCustomPropTypes(vuelessSrcDir);
       }
 
       /* collect used in project colors for tailwind safelist */
@@ -141,10 +141,34 @@ export const Vueless = function (options = {}) {
     },
 
     /* update icons cache in dev env */
-    handleHotUpdate: async ({ file }) => {
-      if ([JAVASCRIPT_EXT, TYPESCRIPT_EXT, VUE_EXT].some((extension) => file.endsWith(extension))) {
+    handleHotUpdate: async ({ file, server, read }) => {
+      const isScriptFile = [JAVASCRIPT_EXT, TYPESCRIPT_EXT, VUE_EXT].some((extension) =>
+        file.endsWith(extension),
+      );
+
+      if (!isScriptFile) {
+        return;
+      }
+
+      const currentContent = await read();
+
+      const currentIconLines = extractIconLines(currentContent);
+      const previousIconLines = iconContentCache.get(file) || [];
+      const hasIconChanges = isIconChanged(currentIconLines, previousIconLines);
+
+      iconContentCache.set(file, currentIconLines);
+
+      if (hasIconChanges && currentIconLines.length) {
         /* cache vueless built-in and project icons */
-        await prepareIcons();
+        await createIconsCache({ env, debug, targetFiles: [file] });
+
+        if (isNuxtModuleEnv) {
+          await copyIconsCache(mirrorCacheDir);
+        }
+
+        reloadServerOnIconsCacheUpdate(server);
+
+        return [];
       }
     },
 
@@ -157,20 +181,15 @@ export const Vueless = function (options = {}) {
 
     /* load SVG images as a Vue components */
     load: async (id) => {
-      return id === RESOLVED_ICONS_VIRTUAL_MODULE_ID
-        ? generateIconExports()
-        : await loadSvg(id, options);
-    },
+      if (id === RESOLVED_ICONS_VIRTUAL_MODULE_ID) {
+        return generateIconExports();
+      }
 
-    /**
-     * reload vite server when cached icons updated,
-     * to immediately show new icons in dev env.
-     */
-    configureServer: (server) => reloadServerOnIconsCacheUpdate(server, iconsCacheWatcher),
+      return await loadSvg(id, options);
+    },
 
     /* remove cached icons */
     buildEnd: async () => {
-      iconsCacheWatcher.close();
       await removeIconsCache(mirrorCacheDir);
     },
   };

package/tailwind.css

@@ -6,12 +6,12 @@
 
 /* ------ Development sources ------ */
 
-@source "../node_modules/.cache/vueless/safelist.txt";
+@source "../node_modules/.cache/vueless/tailwind";
 @source "../node_modules/.cache/vueless/mergedConfigs";
 
 /* ------ Production sources ------ */
 
-@source "../.cache/vueless/safelist.txt";
+@source "../.cache/vueless/tailwind";
 @source "../.cache/vueless/mergedConfigs";
 
 /* ------ Color mode settings ------ */

package/ui.boilerplate/UBoilerplate.vue

@@ -35,5 +35,5 @@ const { wrapperAttrs } = useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
 <template>
-  <div v-bind="wrapperAttrs">Boilerplate</div>
+  <div v-bind="wrapperAttrs" :data-test="dataTest">Boilerplate</div>
 </template>

package/ui.boilerplate/tests/UBoilerplate.test.ts

@@ -0,0 +1,60 @@
+import { mount } from "@vue/test-utils";
+import { describe, it, expect } from "vitest";
+
+import UBoilerplate from "../UBoilerplate.vue";
+import defaultConfig from "../config.ts";
+
+describe("UBoilerplate.vue", () => {
+  // Props tests
+  describe("Props", () => {
+    // DataTest prop
+    it("accepts the dataTest prop", () => {
+      const dataTest = "test-boilerplate";
+
+      const component = mount(UBoilerplate, {
+        props: {
+          dataTest,
+        },
+      });
+
+      expect(component.attributes("data-test")).toBe(dataTest);
+    });
+
+    // Config prop
+    it("applies custom config when provided", () => {
+      const customClass = "custom-class";
+      const config = {
+        wrapper: customClass,
+      };
+
+      const component = mount(UBoilerplate, {
+        props: {
+          config,
+        },
+      });
+
+      expect(component.attributes("class")).toContain(customClass);
+      // The default config is merged with the custom config, not replaced
+      expect(component.attributes("class")).toContain(defaultConfig.wrapper);
+    });
+  });
+
+  /*
+  // Slots tests
+  describe("Slots", () => {
+    // Default slot
+    it("renders content from default slot", () => {
+      const slotContent = "Custom Content";
+
+      const component = mount(UBoilerplate, {
+        slots: {
+          default: slotContent,
+        },
+      });
+
+      expect(component.text()).not.toBe("Boilerplate");
+      expect(component.text()).toBe(slotContent);
+    });
+  });
+  */
+});

package/ui.button/storybook/stories.ts

@@ -138,7 +138,7 @@ export const Slots: StoryFn<UButtonArgs> = (args) => ({
     <URow>
       <UButton v-bind="args" label="Profile">
         <template #left>
-          <UAvatar src="https://avatar.iran.liara.run/public" size="2xs" rounded="full" />
+          <UAvatar src="https://i.pravatar.cc/300" size="2xs" rounded="full" />
         </template>
       </UButton>