vueless 0.0.489 → 0.0.490

package/package.json

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

package/plugin-vite.js

@@ -36,7 +36,7 @@ export const Vueless = function (options = {}) {
   /* if server stopped by developer (Ctrl+C) */
   process.on("SIGINT", async () => {
     /* remove dynamically copied icons */
-    await removeIcons({ debug, isNuxt });
+    await removeIcons({ debug });
 
     /* clear tailwind safelist */
     clearTailwindSafelist(debug);
@@ -63,22 +63,22 @@ export const Vueless = function (options = {}) {
       }
 
       if (config.command === "build") {
-        await removeIcons({ debug, isNuxt });
+        await removeIcons({ debug });
 
         /* dynamically copy used icons before build */
         await copyIcons({ mode: "vuelessIcons", env, debug, targetFiles });
-        await copyIcons({ mode, env, debug, targetFiles, isNuxt });
+        await copyIcons({ mode, env, debug, targetFiles });
       }
 
       if (config.command === "dev" || config.command === "serve") {
         /* remove dynamically copied icons on dev server start */
-        await removeIcons({ debug, isNuxt });
+        await removeIcons({ debug });
       }
     },
 
     /* remove dynamically copied icons after build */
     buildEnd: async () => {
-      await removeIcons({ debug, isNuxt });
+      await removeIcons({ debug });
     },
 
     /* load SVG images as a Vue components */

package/ui.image-icon/UIcon.vue

@@ -127,21 +127,12 @@ const emit = defineEmits([
 const { config, iconAttrs } = useAttrs(props);
 
 const generatedIcons = computed(() => {
-  /**
-   * Use nuxt assets folders to include icons in final build.
-   * TODO: Find another way to include icons in build
-   */
-  if (isSSR) {
-    return (
-      Object.entries(
-        import.meta.glob(`/assets/.vueless/icons/**/*.svg`, { eager: true, query: "?component" }),
-      ) || []
-    );
-  }
-
   return (
     Object.entries(
-      import.meta.glob(`../assets/icons/**/*.svg`, { eager: true, query: "?component" }),
+      import.meta.glob(`/node_modules/.cache/vueless/assets/icons/**/*.svg`, {
+        eager: true,
+        query: "?component",
+      }),
     ) || []
   );
 });
@@ -185,8 +176,8 @@ const dynamicComponent = computed(() => {
       return import.meta.env.PROD
         ? await getIcon([name])
         : isSSR
-          ? import(/* @vite-ignore */ `node_modules/vueless/assets/icons/${name}.svg?component`)
-          : import(/* @vite-ignore */ `../assets/icons/${name}.svg?component`);
+          ? import(/* @vite-ignore */ `node_modules/.cache/vueless/assets/icons/${name}.svg?component`)
+          : import(/* @vite-ignore */ `/node_modules/.cache/vueless/assets/icons/${name}.svg?component`);
     },
     "@material-symbols": async () => {
       return import.meta.env.PROD

package/ui.loader/ULoader.vue

@@ -50,43 +50,41 @@ const { loaderAttrs, ellipseAttrs, config } = useAttrs(props);
 </script>
 
 <style scoped lang="postcss">
-.vueless-loader-ellipse {
-  &:nth-child(1) {
-    animation: ellipse-1 0.6s infinite;
-  }
+.vueless-loader-ellipse:nth-child(1) {
+  animation: ellipse-1 0.6s infinite;
+}
 
-  &:nth-child(4) {
-    animation: ellipse-3 0.6s infinite;
-  }
+.vueless-loader-ellipse:nth-child(4) {
+  animation: ellipse-3 0.6s infinite;
+}
 
-  &-sm {
-    &:nth-child(2) {
-      animation: ellipse-2-sm 0.6s infinite;
-    }
+.vueless-loader-ellipse-sm {
+  &:nth-child(2) {
+    animation: ellipse-2-sm 0.6s infinite;
+  }
 
-    &:nth-child(3) {
-      animation: ellipse-2-sm 0.6s infinite;
-    }
+  &:nth-child(3) {
+    animation: ellipse-2-sm 0.6s infinite;
   }
+}
 
-  &-md {
-    &:nth-child(2) {
-      animation: ellipse-2-md 0.6s infinite;
-    }
+.vueless-loader-ellipse-md {
+  &:nth-child(2) {
+    animation: ellipse-2-md 0.6s infinite;
+  }
 
-    &:nth-child(3) {
-      animation: ellipse-2-md 0.6s infinite;
-    }
+  &:nth-child(3) {
+    animation: ellipse-2-md 0.6s infinite;
   }
+}
 
-  &-lg {
-    &:nth-child(2) {
-      animation: ellipse-2-lg 0.6s infinite;
-    }
+.vueless-loader-ellipse-lg {
+  &:nth-child(2) {
+    animation: ellipse-2-lg 0.6s infinite;
+  }
 
-    &:nth-child(3) {
-      animation: ellipse-2-lg 0.6s infinite;
-    }
+  &:nth-child(3) {
+    animation: ellipse-2-lg 0.6s infinite;
   }
 }
 

package/utils/node/loaderIcon.js

@@ -18,8 +18,8 @@ import { getDirFiles, getDefaultConfigJson, merge } from "./helper.js";
 import { CACHE_PATH, VUELESS_CONFIG_FILE_NAME } from "../../constants.js";
 
 const ICONS_DIR = "assets/icons";
-const NUXT_ASSETS_DIR = path.join(process.cwd(), "assets/.vueless/icons");
-const DEFAULT_ICONS_DIR = path.join(process.cwd(), `src/${ICONS_DIR}`);
+const DEFAULT_ICONS_DIR = path.join(process.cwd(), `node_modules/vueless/${ICONS_DIR}`);
+const DEFAULT_ICONS_LOCAL_DIR = path.join(process.cwd(), `src/${ICONS_DIR}`);
 const CACHED_ICONS_DIR = path.join(process.cwd(), `${CACHE_PATH}/${ICONS_DIR}`);
 const ICON_CONFIG_PATH = "ui.image-icon/config.ts";
 const ICON_COMPONENT_NAME = "UIcon";
@@ -33,21 +33,31 @@ let isVuelessIconsMode = false;
 let cachedIconsDir = CACHED_ICONS_DIR;
 
 // perform icons copy magick... ✨
-export async function copyIcons({ mode = "", env, debug, targetFiles = [], isNuxt } = {}) {
+export async function copyIcons({ mode = "", env, debug, targetFiles = [] } = {}) {
   isDebug = debug || false;
   isVuelessEnv = env === "vueless";
   isDefaultMode = mode === "";
   isStorybookMode = mode === "storybook";
   isVuelessIconsMode = mode === "vuelessIcons";
 
-  if (isVuelessIconsMode && isVuelessEnv) cachedIconsDir = DEFAULT_ICONS_DIR;
+  /* Copy icons which using in vueless components to the cache (vueless env only). */
+  if (isVuelessEnv && fs.existsSync(DEFAULT_ICONS_LOCAL_DIR)) {
+    await cp(DEFAULT_ICONS_LOCAL_DIR, CACHED_ICONS_DIR, { recursive: true });
+  }
+
+  /* Copy icons which using in vueless components to the cache. */
+  if (!isVuelessEnv && fs.existsSync(DEFAULT_ICONS_DIR)) {
+    await cp(DEFAULT_ICONS_DIR, CACHED_ICONS_DIR, { recursive: true });
+  }
+
+  if (isVuelessIconsMode && isVuelessEnv) cachedIconsDir = DEFAULT_ICONS_LOCAL_DIR;
   if (isStorybookMode && isVuelessEnv) cachedIconsDir = CACHED_ICONS_DIR;
 
   if (isStorybookMode) {
     const storybookStoriesJs = await getDirFiles("src", STORYBOOK_STORY_EXTENSIONS[0]);
     const storybookStoriesTs = await getDirFiles("src", STORYBOOK_STORY_EXTENSIONS[1]);
 
-    findAndCopyIcons([...storybookStoriesJs.flat(), ...storybookStoriesTs.flat()]);
+    findAndCopyIcons([...storybookStoriesJs, ...storybookStoriesTs]);
   }
 
   if (isVuelessIconsMode || isDefaultMode || isStorybookMode) {
@@ -69,23 +79,13 @@ export async function copyIcons({ mode = "", env, debug, targetFiles = [], isNux
       `${VUELESS_CONFIG_FILE_NAME}.ts`,
     ]);
   }
-
-  if (isNuxt) {
-    await cp(CACHED_ICONS_DIR, NUXT_ASSETS_DIR, {
-      recursive: true,
-    });
-  }
 }
 
-export async function removeIcons({ debug, isNuxt }) {
+export async function removeIcons({ debug }) {
   if (!fs.existsSync(cachedIconsDir)) return;
 
   await rm(cachedIconsDir, { recursive: true, force: true });
 
-  if (isNuxt) {
-    await rm(NUXT_ASSETS_DIR, { recursive: true, force: true });
-  }
-
   if (debug) {
     console.log("Dynamically copied icons was successfully removed.");
   }
@@ -166,6 +166,13 @@ function findAndCopyIcons(files) {
   function copyFile(name) {
     name = name.toLowerCase();
 
+    const iconNameRegex = /^[a-z0-9_-]+$/;
+
+    /* Filter irrelevant icon name cases. */
+    if (!iconNameRegex.test(name)) {
+      return;
+    }
+
     const library = defaults.library;
     const weight = defaults.weight;
     const style = defaults.style;

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.489",
+  "version": "0.0.490",
   "contributions": {
     "html": {
       "description-markup": "markdown",