vueless 1.2.5-beta.0 → 1.2.5-beta.10

package/plugin-vite.js

@@ -28,17 +28,19 @@ import {
   autoImportUserConfigs,
 } from "./utils/node/helper.js";
 import {
+  VUE_EXT,
+  JAVASCRIPT_EXT,
+  TYPESCRIPT_EXT,
   INTERNAL_ENV,
   STORYBOOK_ENV,
   NUXT_MODULE_ENV,
   VUELESS_LOCAL_DIR,
   VUELESS_PACKAGE_DIR,
+  SRC_USER_COMPONENTS_DIR,
+  VUELESS_USER_COMPONENTS_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. */
@@ -49,6 +51,7 @@ export const TailwindCSS = (options) => {
 /* Automatically importing Vueless components on demand */
 export const UnpluginComponents = (options) =>
   UnpluginVueComponents({
+    dirs: [VUELESS_USER_COMPONENTS_DIR, SRC_USER_COMPONENTS_DIR],
     resolvers: [componentResolver, directiveResolver],
     dts: true,
     ...options,
@@ -103,6 +106,11 @@ export const Vueless = function (options = {}) {
       define: {
         "process.env": {},
       },
+      build: {
+        rollupOptions: {
+          external: ["node:fs/promises"],
+        },
+      },
       optimizeDeps: {
         include: isInternalEnv
           ? []

package/types.ts

@@ -129,6 +129,11 @@ export interface ThemeConfig {
    */
   colorMode?: `${ColorMode}`;
 
+  /**
+   * Defines the color mode to auto.
+   */
+  isColorModeAuto?: boolean;
+
   /**
    * Light theme design system CSS variables.
    */
@@ -185,6 +190,12 @@ export interface Config extends ThemeConfig {
   tailwindMerge?: UnknownObject;
 }
 
+export type MergedThemeConfig = Omit<ThemeConfig, "text | outline | rounding"> & {
+  text: Partial<ThemeConfigText>;
+  outline: Partial<ThemeConfigOutline>;
+  rounding: Partial<ThemeConfigRounding>;
+};
+
 export type UnknownObject = Record<string, unknown>;
 export type UnknownArray = unknown[];
 export type UnknownType = string | number | boolean | UnknownObject | undefined | null;

package/ui.boilerplate/UBoilerplate.vue

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

package/ui.container-accordion/UAccordion.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, provide, useTemplateRef, ref, watch } from "vue";
+import { computed, provide, useTemplateRef, ref, watch, onMounted } from "vue";
 
 import useUI from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
@@ -15,7 +15,7 @@ defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<Props>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
-  modelValue: undefined,
+  modelValue: () => [],
   options: () => [],
 });
 
@@ -42,6 +42,16 @@ const selectedItem = computed({
   },
 });
 
+onMounted(() => {
+  const initiallyOpened = props.options
+    .filter((option) => option.opened)
+    .map((option) => option.value);
+
+  if (initiallyOpened.length > 0) {
+    selectedItem.value = props.multiple ? initiallyOpened : initiallyOpened[0];
+  }
+});
+
 provide<SetAccordionSelectedItem>("setAccordionSelectedItem", (value, opened) => {
   if (props.multiple) {
     let current: string[] = [];
@@ -101,7 +111,6 @@ const { getDataTest, accordionItemAttrs, accordionAttrs } = useUI<Config>(defaul
         :key="index"
         :model-value="selectedItem"
         :value="option.value"
-        :opened="option.opened"
         :title="option.title"
         :description="option.description"
         :size="size"

package/ui.container-accordion/storybook/stories.ts

@@ -28,7 +28,7 @@ export default {
   title: "Containers / Accordion",
   component: UAccordion,
   args: {
-    modelValue: "2",
+    modelValue: null,
     options: [
       {
         value: "1",
@@ -40,6 +40,7 @@ export default {
       },
       {
         value: "2",
+        opened: true,
         title: "Pioneering Cutting-Edge Solutions",
         description:
           trimText(`Our team stays ahead of the curve, integrating the latest technologies

package/ui.container-accordion/tests/UAccordion.test.ts

@@ -1,3 +1,4 @@
+import { ref } from "vue";
 import { mount } from "@vue/test-utils";
 import { describe, it, expect } from "vitest";
 
@@ -57,40 +58,59 @@ describe("UAccordion", () => {
   // Events
   describe("Events", () => {
     it("emits update:modelValue when an item is toggled (single)", async () => {
+      const modelValue = ref<string | null>(null);
+
       const component = mount(UAccordion, {
-        props: { options },
+        props: {
+          options,
+          modelValue: modelValue.value,
+          "onUpdate:modelValue": (value: string | null) => {
+            modelValue.value = value;
+            component.setProps({ modelValue: value });
+          },
+        },
       });
 
       const firstItem = component.findAllComponents(UAccordionItem)[0];
 
-      await firstItem.trigger("click");
+      await firstItem.find("[vl-child-key='title']").trigger("click");
 
       const updates = component.emitted("update:modelValue");
 
       expect(updates).toBeTruthy();
       expect(updates?.[0]).toEqual(["a"]);
 
-      await firstItem.trigger("click");
+      await firstItem.find("[vl-child-key='title']").trigger("click");
       const updates2 = component.emitted("update:modelValue");
 
       expect(updates2?.[1]).toEqual([null]);
     });
 
     it("emits update:modelValue with arrays when multiple=true", async () => {
+      const modelValue = ref<string[]>([]);
+
       const component = mount(UAccordion, {
-        props: { options, multiple: true },
+        props: {
+          options,
+          multiple: true,
+          modelValue: modelValue.value,
+          "onUpdate:modelValue": (value: string[]) => {
+            modelValue.value = value;
+            component.setProps({ modelValue: value });
+          },
+        },
       });
 
       const [firstItem, secondItem] = component.findAllComponents(UAccordionItem);
 
-      await firstItem.trigger("click");
-      await secondItem.trigger("click");
+      await firstItem.find("[vl-child-key='title']").trigger("click");
+      await secondItem.find("[vl-child-key='title']").trigger("click");
       const updates = component.emitted("update:modelValue");
 
       expect(updates?.[0]).toEqual([["a"]]);
       expect(updates?.[1]).toEqual([["a", "b"]]);
 
-      await firstItem.trigger("click");
+      await firstItem.find("[vl-child-key='title']").trigger("click");
       const updates2 = component.emitted("update:modelValue");
 
       expect(updates2?.[2]).toEqual([["b"]]);

package/ui.container-accordion-item/UAccordionItem.vue

@@ -42,8 +42,7 @@ const emit = defineEmits([
 ]);
 
 const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
-const descriptionRef = useTemplateRef<HTMLDivElement>("description");
-const contentRef = useTemplateRef<HTMLDivElement>("content");
+const titleRef = useTemplateRef<HTMLDivElement>("title");
 
 const accordionSize = ref(toValue(getAccordionSize) || props.size);
 const accordionDisabled = ref(toValue(getAccordionDisabled) || props.disabled);
@@ -54,7 +53,7 @@ watchEffect(() => (accordionDisabled.value = toValue(getAccordionDisabled) || pr
 const slots = useSlots();
 const elementId = props.id || useId();
 
-const internalOpened = ref(false);
+const internalOpened = ref(props.opened || false);
 
 const isOpened = computed(() => {
   const selectedItem = toValue(getAccordionSelectedItem);
@@ -67,7 +66,7 @@ const isOpened = computed(() => {
     return isEqual(selectedItem, props.value);
   }
 
-  return props.opened || internalOpened.value;
+  return internalOpened.value;
 });
 
 const toggleIconName = computed(() => {
@@ -79,10 +78,9 @@ const toggleIconName = computed(() => {
 });
 
 function onClickItem(event: MouseEvent) {
-  const clickedInsideContent = contentRef.value?.contains(event.target as Node);
-  const clickedDescription = descriptionRef.value?.contains(event.target as Node);
+  const clickedOnTitle = titleRef.value?.contains(event.target as Node);
 
-  if (props.disabled || clickedDescription || clickedInsideContent) return;
+  if (!clickedOnTitle || props.disabled) return;
 
   emit("click", elementId, !isOpened.value);
 
@@ -123,7 +121,7 @@ const {
 <template>
   <div ref="wrapper" v-bind="wrapperAttrs" :data-test="getDataTest()" @click="onClickItem">
     <div v-bind="bodyAttrs">
-      <div v-bind="titleAttrs">
+      <div v-bind="titleAttrs" ref="title">
         {{ title }}
         <!--
           @slot Use it to add something instead of the toggle icon.
@@ -144,12 +142,11 @@ const {
       <div
         v-if="description"
         :id="`description-${elementId}`"
-        ref="description"
         v-bind="descriptionAttrs"
         v-text="description"
       />
 
-      <div v-if="isOpened && hasSlotContent(slots['default'])" ref="content" v-bind="contentAttrs">
+      <div v-if="isOpened && hasSlotContent(slots['default'])" v-bind="contentAttrs">
         <!-- @slot Use it to add accordion content. -->
         <slot />
       </div>

package/ui.container-accordion-item/storybook/stories.ts

@@ -27,6 +27,7 @@ export default {
   title: "Containers / Accordion Item",
   component: UAccordionItem,
   args: {
+    opened: true,
     title: "Committed to Quality and Performance",
     description: trimText(
       `We take pride in delivering high-quality solutions tailored to your needs.

package/ui.container-accordion-item/tests/UAccordionItem.test.ts

@@ -171,7 +171,7 @@ describe("UAccordionItem", () => {
       expect(toggleElement.attributes("data-opened")).toBe("false");
 
       // Click to toggle
-      await component.trigger("click");
+      await component.find("[vl-key='title']").trigger("click");
 
       expect(toggleElement.attributes("data-opened")).toBe("true");
     });
@@ -190,12 +190,12 @@ describe("UAccordionItem", () => {
 
       expect(component.find(`.${slotClass}`).exists()).toBe(false);
 
-      await component.trigger("click");
+      await component.find("[vl-key='title']").trigger("click");
 
       expect(component.find(`.${slotClass}`).exists()).toBe(true);
       expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
 
-      await component.trigger("click");
+      await component.find("[vl-key='title']").trigger("click");
 
       expect(component.find(`.${slotClass}`).exists()).toBe(false);
     });
@@ -217,7 +217,7 @@ describe("UAccordionItem", () => {
     it("does not render content wrapper when default slot is empty", async () => {
       const component = mount(UAccordionItem, { props: { name: "test" } });
 
-      await component.trigger("click");
+      await component.find("[vl-key='title']").trigger("click");
 
       expect(component.find("[vl-key='content']").exists()).toBe(false);
     });
@@ -235,7 +235,7 @@ describe("UAccordionItem", () => {
         },
       });
 
-      await component.trigger("click");
+      await component.find("[vl-key='title']").trigger("click");
 
       const emitted = component.emitted("click");
 
@@ -243,7 +243,7 @@ describe("UAccordionItem", () => {
       expect(emitted?.[0]).toEqual([id, true]);
 
       // Click again to toggle back
-      await component.trigger("click");
+      await component.find("[vl-key='title']").trigger("click");
 
       const emittedAgain = component.emitted("click");
 
@@ -281,13 +281,13 @@ describe("UAccordionItem", () => {
       expect(descriptionElement.classes()).not.toContain(openedClass);
 
       // Click to open
-      await component.trigger("click");
+      await component.find("[vl-key='title']").trigger("click");
 
       // Should be opened
       expect(descriptionElement.classes()).toContain(openedClass);
 
       // Click to close
-      await component.trigger("click");
+      await component.find("[vl-key='title']").trigger("click");
 
       // Should be closed again
       expect(descriptionElement.classes()).not.toContain(openedClass);

package/ui.image-icon/config.ts

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   icon: {
-    base: "text-{color} fill-current shrink-0 grow-0 focus:outline-0",
+    base: "text-{color} shrink-0 grow-0 focus:outline-0",
     variants: {
       variant: {
         light: "brightness-125",
@@ -40,7 +40,7 @@ export default /*tw*/ {
     interactive: false,
     /* icon library */
     library: "@material-symbols",
-    path: "", // set for `custom-icons` library only.
+    path: "", // set for `custom` library only.
     style: "outlined",
     weight: 500,
   },

package/ui.image-icon/types.ts

@@ -6,7 +6,7 @@ import type { ComponentConfig } from "../types";
 
 export type Config = typeof defaultConfig;
 
-export type IconLibraries = "@material-symbols" | "bootstrap-icons" | "heroicons" | "custom-icons";
+export type IconLibraries = "@material-symbols" | "bootstrap-icons" | "heroicons" | "custom";
 
 export interface Props {
   /**

package/ui.navigation-pagination/UPagination.vue

@@ -25,12 +25,6 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits([
-  /**
-   * Triggers when current page changes.
-   * @property {number} value
-   */
-  "change",
-
   /**
    * Triggers when current page changes.
    * @property {number} value
@@ -44,7 +38,6 @@ const currentPage = computed({
   get: () => props.modelValue,
   set: (value) => {
     emit("update:modelValue", value);
-    emit("change", value);
   },
 });
 

package/ui.navigation-pagination/tests/UPagination.test.ts

@@ -346,30 +346,6 @@ describe("UPagination.vue", () => {
 
   // Events tests
   describe("Events", () => {
-    // Change event
-    it("emits change event when page is changed", async () => {
-      const component = mount(UPagination, {
-        props: {
-          modelValue: 1,
-          total: 100,
-          perPage: 10,
-        },
-      });
-
-      // Find the second page button and click it
-      const pageButtons = component.findAllComponents(UButton).filter((button) => {
-        const text = button.text();
-
-        return text && !isNaN(Number(text));
-      });
-
-      // Second button
-      await pageButtons[1].trigger("click");
-
-      expect(component.emitted("change")).toBeTruthy();
-      expect(component.emitted("change")?.[0]).toEqual([2]); // Second button value
-    });
-
     // Update:modelValue event
     it("emits update:modelValue event when page is changed", async () => {
       const component = mount(UPagination, {

package/utils/helper.ts

@@ -184,3 +184,35 @@ export function isEmptyValue(value: object | null | undefined | string | unknown
     (typeof value === "object" && !Object.keys(value).length)
   );
 }
+
+/**
+ * Converts the given value to a number if possible.
+ *
+ * @param {unknown} value - The value to be converted to a number. Can be of any data type.
+ * @return {number | undefined} The numeric representation of the value if conversion is successful; otherwise, undefined.
+ */
+export function toNumber(value: unknown): number | undefined {
+  if (typeof value === "number") {
+    return value;
+  }
+
+  if (typeof value === "string" && value.trim() !== "") {
+    const number = Number(value);
+
+    if (!Number.isNaN(number)) {
+      return number;
+    }
+  }
+
+  return;
+}
+
+/**
+ * Get a stored value from local storage.
+ * @return string | undefined
+ */
+export function getStored(key: string) {
+  if (isSSR) return;
+
+  return localStorage.getItem(key) ?? undefined;
+}

package/utils/node/helper.d.ts

@@ -7,7 +7,7 @@ export function getVueDirs(): string[];
 export function getVuelessConfigDirs(): string[];
 export function getMergedComponentConfig(name: any): Promise<any>;
 export function getDefaultComponentConfig(name: any, configDir: any): Promise<{}>;
-export function cacheMergedConfigs(srcDir: any): Promise<void>;
+export function cacheMergedConfigs(basePath: any): Promise<void>;
 export function buildTSFile(entryPath: any, configOutFile: any): Promise<void>;
 export function removeFolderIfEmpty(dirPath: any): Promise<void>;
 export function detectTypeScript(): Promise<boolean>;

package/utils/node/helper.js

@@ -5,7 +5,7 @@ import { pathToFileURL } from "node:url";
 import { existsSync, statSync } from "node:fs";
 import { mkdir, readdir, rmdir, readFile, writeFile } from "node:fs/promises";
 
-import { vuelessConfig, getMergedConfig } from "./vuelessConfig.js";
+import { getMergedConfig, getVuelessConfig } from "./vuelessConfig.js";
 
 import {
   COMPONENTS,
@@ -117,11 +117,12 @@ export async function getDefaultComponentConfig(name, configDir) {
   return config;
 }
 
-export async function cacheMergedConfigs(srcDir) {
+export async function cacheMergedConfigs(basePath) {
+  const vuelessConfig = await getVuelessConfig(basePath);
   const componentNames = Object.entries(COMPONENTS);
 
   for await (const [componentName, componentDir] of componentNames) {
-    const defaultComponentConfigPath = path.join(srcDir, componentDir, "config.ts");
+    const defaultComponentConfigPath = path.join(basePath, componentDir, "config.ts");
 
     const defaultConfig = await getDefaultComponentConfig(
       componentName,

package/utils/node/loaderSvg.js

@@ -2,13 +2,15 @@ import fs from "node:fs";
 import { compileTemplate } from "vue/compiler-sfc";
 import { optimize as optimizeSvg } from "svgo";
 
+import { getVuelessConfig } from "./vuelessConfig.js";
 import { DEFAULT_SVGO_CONFIG } from "../../constants.js";
 
 export async function loadSvg(id, options) {
-  const {
+  let {
+    basePath = "",
     defaultImport = "url",
+    svgoConfig = {},
     svgo = true,
-    svgoConfig = DEFAULT_SVGO_CONFIG,
     debug = false,
   } = options;
   const svgRegex = /\.svg(\?(raw|url|component|skipsvgo))?$/;
@@ -45,7 +47,11 @@ export async function loadSvg(id, options) {
   }
 
   if (svgo !== false && query !== "skipsvgo") {
+    const vuelessConfig = getVuelessConfig(basePath);
+    const isLucideLibrary = vuelessConfig.components?.UIcon?.defaults?.library === "lucide-static";
+
     svg = optimizeSvg(svg, {
+      ...(isLucideLibrary ? {} : DEFAULT_SVGO_CONFIG),
       ...svgoConfig,
       svgPath,
     }).data;

package/utils/node/vuelessConfig.js

@@ -17,14 +17,6 @@ import {
 
 export let vuelessConfig = {};
 
-/**
- * Load Vueless config from the project root.
- * IIFE is used to prevent top level await issue.
- */
-(async () => {
-  vuelessConfig = await getVuelessConfig();
-})();
-
 /**
  * Retrieves the Vueless config from the project root.
  *