vueless 1.2.5-beta.1 → 1.2.5-beta.3

package/constants.d.ts

@@ -10,7 +10,6 @@ export const ROUNDING: "rounding";
 export const DISABLED_OPACITY: "disabled-opacity";
 export const LETTER_SPACING: "letter-spacing";
 export const COLOR_MODE_KEY: "vl-color-mode";
-export const AUTO_MODE_KEY: "vl-auto-mode";
 export const DARK_MODE_CLASS: "vl-dark";
 export const LIGHT_MODE_CLASS: "vl-light";
 export const DEFAULT_PRIMARY_COLOR: "grayscale";
@@ -293,11 +292,9 @@ export namespace DEFAULT_SVGO_CONFIG {
     let plugins: {
         name: string;
         params: {
-            overrides: {
-                convertColors: {
-                    currentColor: boolean;
-                };
-            };
+            attributes: {
+                fill: string;
+            }[];
         };
     }[];
 }

package/constants.js

@@ -20,7 +20,6 @@ export const LETTER_SPACING = "letter-spacing";
 
 /* Vueless color mode keys */
 export const COLOR_MODE_KEY = "vl-color-mode";
-export const AUTO_MODE_KEY = "vl-auto-mode";
 export const DARK_MODE_CLASS = "vl-dark";
 export const LIGHT_MODE_CLASS = "vl-light";
 
@@ -368,13 +367,9 @@ export const TAILWIND_MERGE_EXTENSION = {
 export const DEFAULT_SVGO_CONFIG = {
   plugins: [
     {
-      name: "preset-default",
+      name: "addAttributesToSVGElement",
       params: {
-        overrides: {
-          convertColors: {
-            currentColor: true,
-          },
-        },
+        attributes: [{ fill: "currentColor" }],
       },
     },
   ],

package/index.d.ts

@@ -8,13 +8,10 @@ export {
   isCSR,
   setTitle,
   getRandomId,
-  getCookie,
-  setCookie,
-  deleteCookie,
   createDebounce,
   hasSlotContent
 } from "./utils/helper";
-export { getStored, setTheme, cssVar } from "./utils/theme";
+export { getStored, getTheme, setTheme, resetTheme, cssVar } from "./utils/theme";
 export { isMac, isPWA, isIOS, isAndroid, isMobileApp, isWindows } from "./utils/platform";
 export { cx, cva, compose, getDefaults, setVuelessConfig, setColor, vuelessConfig } from "./utils/ui";
 export { getArgTypes, getSlotNames, getSlotsFragment, getSource, getDocsDescription } from "./utils/storybook";

package/index.ts

@@ -14,13 +14,10 @@ export {
   isCSR,
   setTitle,
   getRandomId,
-  getCookie,
-  setCookie,
-  deleteCookie,
   createDebounce,
   hasSlotContent
 } from "./utils/helper";
-export { getStored, setTheme, cssVar } from "./utils/theme";
+export { getStored, getTheme, setTheme, resetTheme, cssVar } from "./utils/theme";
 export { isMac, isPWA, isIOS, isAndroid, isMobileApp, isWindows } from "./utils/platform";
 export { cx, cva, compose, getDefaults, setVuelessConfig, setColor, vuelessConfig } from "./utils/ui";
 export { getArgTypes, getSlotNames, getSlotsFragment, getSource, getDocsDescription } from "./utils/storybook";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.2.5-beta.1",
+  "version": "1.2.5-beta.3",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",
@@ -56,7 +56,7 @@
     "@vue/eslint-config-typescript": "^14.6.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.7.0",
-    "@vueless/storybook": "^1.2.1",
+    "@vueless/storybook": "^1.2.2",
     "eslint": "^9.32.0",
     "eslint-plugin-storybook": "^9.0.18",
     "eslint-plugin-vue": "^10.3.0",

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,8 +58,17 @@ 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];
@@ -77,8 +87,18 @@ describe("UAccordion", () => {
     });
 
     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);

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

@@ -54,7 +54,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 +67,7 @@ const isOpened = computed(() => {
     return isEqual(selectedItem, props.value);
   }
 
-  return props.opened || internalOpened.value;
+  return internalOpened.value;
 });
 
 const toggleIconName = computed(() => {

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.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",

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/theme.ts

@@ -1,12 +1,11 @@
 import { cloneDeep, merge } from "lodash-es";
 
 import { vuelessConfig } from "./ui";
-import { isCSR, setCookie } from "./helper";
+import { isCSR, isSSR, setCookie, deleteCookie } from "./helper";
 
 import {
   PX_IN_REM,
   COLOR_MODE_KEY,
-  AUTO_MODE_KEY,
   LIGHT_MODE_CLASS,
   DARK_MODE_CLASS,
   GRAYSCALE_COLOR,
@@ -78,15 +77,11 @@ function toggleColorModeClass() {
 /**
  * Sets color mode.
  * @param {string} mode (dark | light | auto)
- * @param {boolean} isCachedAutoMode
  * @return {string} current color mode
  */
-function setColorMode(mode: `${ColorMode}`, isCachedAutoMode?: boolean): string {
+function setColorMode(mode: `${ColorMode}`): string {
   const colorMode = mode || getStored(COLOR_MODE_KEY) || vuelessConfig.colorMode || ColorMode.Light;
 
-  // TODO: This always true `!!Number(getStored(AUTO_MODE_KEY))` > `!!Number(undefined) = true`
-  isCachedAutoMode = isCachedAutoMode ?? !!Number(getStored(AUTO_MODE_KEY));
-
   const isAutoMode = colorMode === ColorMode.Auto;
   const isSystemDarkMode = isAutoMode && prefersColorSchemeDark && prefersColorSchemeDark?.matches;
   const isDarkMode = colorMode === ColorMode.Dark || isSystemDarkMode;
@@ -97,7 +92,7 @@ function setColorMode(mode: `${ColorMode}`, isCachedAutoMode?: boolean): string
   }
 
   /* Adding system color mode change event listener. */
-  if ((isAutoMode || isCachedAutoMode) && prefersColorSchemeDark) {
+  if (isAutoMode && prefersColorSchemeDark) {
     prefersColorSchemeDark.addEventListener("change", toggleColorModeClass);
   }
 
@@ -117,10 +112,7 @@ function setColorMode(mode: `${ColorMode}`, isCachedAutoMode?: boolean): string
 
   if (mode) {
     setCookie(COLOR_MODE_KEY, currentColorMode);
-    setCookie(AUTO_MODE_KEY, String(Number(isAutoMode || isCachedAutoMode)));
-
     localStorage.setItem(COLOR_MODE_KEY, currentColorMode);
-    localStorage.setItem(AUTO_MODE_KEY, String(Number(isAutoMode || isCachedAutoMode)));
   }
 
   return currentColorMode;
@@ -139,7 +131,73 @@ export function cssVar(name: string) {
  * @return string | undefined
  */
 export function getStored(key: string) {
-  return isCSR ? localStorage.getItem(key) : undefined;
+  if (isSSR) return;
+
+  return localStorage.getItem(key) ?? undefined;
+}
+
+/**
+ * Resets all theme data by clearing cookies and localStorage.
+ * This removes all stored theme preferences including color mode, colors, text sizes,
+ * outline sizes, rounding values, letter spacing, and disabled opacity.
+ */
+export function resetTheme() {
+  if (!isCSR) return;
+
+  const themeKeys = [
+    COLOR_MODE_KEY,
+    `vl-${PRIMARY_COLOR}`,
+    `vl-${NEUTRAL_COLOR}`,
+    `vl-${TEXT}-xs`,
+    `vl-${TEXT}-sm`,
+    `vl-${TEXT}-md`,
+    `vl-${TEXT}-lg`,
+    `vl-${OUTLINE}-sm`,
+    `vl-${OUTLINE}-md`,
+    `vl-${OUTLINE}-lg`,
+    `vl-${ROUNDING}-sm`,
+    `vl-${ROUNDING}-md`,
+    `vl-${ROUNDING}-lg`,
+    `vl-${LETTER_SPACING}`,
+    `vl-${DISABLED_OPACITY}`,
+  ];
+
+  themeKeys.forEach((key) => {
+    localStorage.removeItem(key);
+    deleteCookie(key);
+  });
+}
+
+/**
+ * Retrieves the current theme configuration.
+ * @return ThemeConfig - current theme configuration
+ */
+export function getTheme(): ThemeConfig {
+  const colorMode = getStored(COLOR_MODE_KEY) || vuelessConfig.colorMode || ColorMode.Light;
+  const primary = getPrimaryColor();
+  const neutral = getNeutralColor();
+
+  const text = getText();
+  const outline = getOutlines();
+  const rounding = getRoundings();
+  const letterSpacing = getLetterSpacing();
+  const disabledOpacity = getDisabledOpacity();
+
+  const lightTheme = merge({}, DEFAULT_LIGHT_THEME, vuelessConfig.lightTheme);
+  const darkTheme = merge({}, DEFAULT_DARK_THEME, vuelessConfig.darkTheme);
+
+  return {
+    colorMode: colorMode as `${ColorMode}`,
+    primary,
+    neutral,
+    text,
+    outline,
+    rounding,
+    letterSpacing,
+    disabledOpacity,
+    lightTheme,
+    darkTheme,
+  };
 }
 
 /**
@@ -147,8 +205,8 @@ export function getStored(key: string) {
  * Changes and reset Vueless CSS variables.
  * @return string - CSS variables
  */
-export function setTheme(config: ThemeConfig = {}, isCachedAutoMode?: boolean) {
-  if (isCSR) setColorMode(config.colorMode as ColorMode, isCachedAutoMode);
+export function setTheme(config: ThemeConfig = {}) {
+  if (isCSR) setColorMode(config.colorMode as ColorMode);
 
   const text = getText(config.text);
   const outline = getOutlines(config.outline);
@@ -306,6 +364,12 @@ function getText(text?: ThemeConfig["text"]) {
 
   const runtimeText = primitiveToObject(text) as ThemeConfigText;
   const globalText = primitiveToObject(vuelessConfig.text) as ThemeConfigText;
+  const storedText = {
+    xs: getStored(storageKey.xs),
+    sm: getStored(storageKey.sm),
+    md: getStored(storageKey.md),
+    lg: getStored(storageKey.lg),
+  };
 
   const textMd = Math.max(0, Number(runtimeText.md ?? globalText.md ?? DEFAULT_TEXT));
   const textXs = Math.max(0, textMd - TEXT_DECREMENT * 2);
@@ -319,20 +383,22 @@ function getText(text?: ThemeConfig["text"]) {
     lg: Math.max(0, Number(runtimeText.lg ?? getStored(storageKey.lg) ?? globalText.lg ?? 0)),
   };
 
+  /* eslint-disable prettier/prettier,vue/max-len */
   const mergedText = {
-    xs: runtimeText.xs === undefined && globalText.xs === undefined ? textXs : definedText.xs,
-    sm: runtimeText.sm === undefined && globalText.sm === undefined ? textSm : definedText.sm,
-    md: runtimeText.md === undefined && globalText.md === undefined ? textMd : definedText.md,
-    lg: runtimeText.lg === undefined && globalText.lg === undefined ? textLg : definedText.lg,
+    xs: runtimeText.xs === undefined && globalText.xs === undefined && (storedText.xs === undefined || typeof text === "number") ? textXs : definedText.xs,
+    sm: runtimeText.sm === undefined && globalText.sm === undefined && (storedText.sm === undefined || typeof text === "number") ? textSm : definedText.sm,
+    md: runtimeText.md === undefined && globalText.md === undefined && storedText.md === undefined ? textMd : definedText.md,
+    lg: runtimeText.lg === undefined && globalText.lg === undefined && (storedText.lg === undefined || typeof text === "number") ? textLg : definedText.lg,
   };
+  /* eslint-enable prettier/prettier,vue/max-len */
 
-  if (isCSR && text) {
-    setCookie(storageKey.sm, String(mergedText.xs));
+  if (isCSR && text !== undefined) {
+    setCookie(storageKey.xs, String(mergedText.xs));
     setCookie(storageKey.sm, String(mergedText.sm));
     setCookie(storageKey.md, String(mergedText.md));
     setCookie(storageKey.lg, String(mergedText.lg));
 
-    localStorage.setItem(storageKey.sm, String(mergedText.xs));
+    localStorage.setItem(storageKey.xs, String(mergedText.xs));
     localStorage.setItem(storageKey.sm, String(mergedText.sm));
     localStorage.setItem(storageKey.md, String(mergedText.md));
     localStorage.setItem(storageKey.lg, String(mergedText.lg));
@@ -354,6 +420,11 @@ function getOutlines(outline?: ThemeConfig["outline"]) {
 
   const runtimeOutline = primitiveToObject(outline) as ThemeConfigOutline;
   const globalOutline = primitiveToObject(vuelessConfig.outline) as ThemeConfigOutline;
+  const storedOutline = {
+    sm: getStored(storageKey.sm),
+    md: getStored(storageKey.md),
+    lg: getStored(storageKey.lg),
+  };
 
   const outlineMd = Math.max(0, Number(runtimeOutline.md ?? globalOutline.md ?? DEFAULT_OUTLINE));
   const outlineSm = Math.max(0, outlineMd - OUTLINE_DECREMENT);
@@ -369,15 +440,15 @@ function getOutlines(outline?: ThemeConfig["outline"]) {
     lg: Math.max(0, Number(runtimeOutline.lg ?? getStored(storageKey.lg) ?? globalOutline.lg ?? 0)),
   };
 
-  /* eslint-disable prettier/prettier */
+  /* eslint-disable prettier/prettier,vue/max-len */
   const mergedOutline = {
-    sm: runtimeOutline.sm === undefined && globalOutline.sm === undefined ? outlineSm : definedOutline.sm,
-    md: runtimeOutline.md === undefined && globalOutline.md === undefined ? outlineMd : definedOutline.md,
-    lg: runtimeOutline.lg === undefined && globalOutline.lg === undefined ? outlineLg : definedOutline.lg,
+    sm: runtimeOutline.sm === undefined && globalOutline.sm === undefined && (storedOutline.sm === undefined || typeof outline === "number") ? outlineSm : definedOutline.sm,
+    md: runtimeOutline.md === undefined && globalOutline.md === undefined && storedOutline.md === undefined ? outlineMd : definedOutline.md,
+    lg: runtimeOutline.lg === undefined && globalOutline.lg === undefined && (storedOutline.lg === undefined || typeof outline === "number") ? outlineLg : definedOutline.lg,
   };
-  /* eslint-enable prettier/prettier */
+  /* eslint-enable prettier/prettier,vue/max-len */
 
-  if (isCSR && outline) {
+  if (isCSR && outline !== undefined) {
     setCookie(storageKey.sm, String(mergedOutline.sm));
     setCookie(storageKey.md, String(mergedOutline.md));
     setCookie(storageKey.lg, String(mergedOutline.lg));
@@ -403,6 +474,11 @@ function getRoundings(rounding?: ThemeConfig["rounding"]) {
 
   const runtimeRounding = primitiveToObject(rounding) as ThemeConfigRounding;
   const globalRounding = primitiveToObject(vuelessConfig.rounding) as ThemeConfigRounding;
+  const storedRounding = {
+    sm: getStored(storageKey.sm),
+    md: getStored(storageKey.md),
+    lg: getStored(storageKey.lg),
+  };
 
   // eslint-disable-next-line prettier/prettier
   const roundingMd = Math.max(0, Number(runtimeRounding.md ?? globalRounding.md ?? DEFAULT_ROUNDING));
@@ -421,7 +497,7 @@ function getRoundings(rounding?: ThemeConfig["rounding"]) {
     roundingLg = ROUNDING_INCREMENT - ROUNDING_DECREMENT;
   }
 
-  /* eslint-disable prettier/prettier */
+  /* eslint-disable prettier/prettier,vue/max-len */
   const definedRounding = {
     sm: Math.max(0, Number(runtimeRounding.sm ?? getStored(storageKey.sm) ?? globalRounding.sm ?? 0)),
     md: Math.max(0, Number(runtimeRounding.md ?? getStored(storageKey.md) ?? globalRounding.md ?? 0)),
@@ -429,13 +505,13 @@ function getRoundings(rounding?: ThemeConfig["rounding"]) {
   };
 
   const mergedRounding = {
-    sm: runtimeRounding.sm === undefined && globalRounding.sm === undefined ? roundingSm : definedRounding.sm,
-    md: runtimeRounding.md === undefined && globalRounding.md === undefined ? roundingMd : definedRounding.md,
-    lg: runtimeRounding.lg === undefined && globalRounding.lg === undefined ? roundingLg : definedRounding.lg,
+    sm: runtimeRounding.sm === undefined && globalRounding.sm === undefined && (storedRounding.sm === undefined || typeof rounding === "number") ? roundingSm : definedRounding.sm,
+    md: runtimeRounding.md === undefined && globalRounding.md === undefined && storedRounding.md === undefined ? roundingMd : definedRounding.md,
+    lg: runtimeRounding.lg === undefined && globalRounding.lg === undefined && (storedRounding.lg === undefined || typeof rounding === "number") ? roundingLg : definedRounding.lg,
   };
-  /* eslint-enable prettier/prettier */
+  /* eslint-enable prettier/prettier,vue/max-len */
 
-  if (isCSR && rounding) {
+  if (isCSR && rounding !== undefined) {
     setCookie(storageKey.sm, String(mergedRounding.sm));
     setCookie(storageKey.md, String(mergedRounding.md));
     setCookie(storageKey.lg, String(mergedRounding.lg));
@@ -456,9 +532,9 @@ function getLetterSpacing(letterSpacing?: ThemeConfig["letterSpacing"]) {
   const storageKey = `vl-${LETTER_SPACING}`;
 
   const spacing = letterSpacing ?? getStored(storageKey) ?? vuelessConfig.letterSpacing;
-  const mergedSpacing = Number(spacing ?? DEFAULT_LETTER_SPACING);
+  const mergedSpacing = Math.max(0, Number(spacing ?? DEFAULT_LETTER_SPACING));
 
-  if (isCSR && letterSpacing) {
+  if (isCSR && letterSpacing !== undefined) {
     setCookie(storageKey, String(mergedSpacing));
     localStorage.setItem(storageKey, String(mergedSpacing));
   }
@@ -476,7 +552,7 @@ function getDisabledOpacity(disabledOpacity?: ThemeConfig["disabledOpacity"]) {
   const opacity = disabledOpacity ?? getStored(storageKey) ?? vuelessConfig.disabledOpacity;
   const mergedOpacity = Math.max(0, Number(opacity ?? DEFAULT_DISABLED_OPACITY));
 
-  if (isCSR && disabledOpacity) {
+  if (isCSR && disabledOpacity !== undefined) {
     setCookie(storageKey, String(mergedOpacity));
     localStorage.setItem(storageKey, String(mergedOpacity));
   }