vueless 0.0.349 → 0.0.351

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.349",
+  "version": "0.0.351",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/preset.tailwind.js

@@ -1,5 +1,5 @@
 import forms from "@tailwindcss/forms";
-import defaultTheme from "tailwindcss/defaultTheme.js";
+import colors from "tailwindcss/colors.js";
 import {
   COLOR_SHADES,
   BRAND_COLOR,
@@ -8,7 +8,6 @@ import {
   DARK_MODE_SELECTOR,
 } from "./constants.js";
 
-const safelist = getSafelist();
 const isStrategyOverride = process.env.VUELESS_STRATEGY === "override";
 
 /**
@@ -38,46 +37,62 @@ export const vuelessContentNuxt = [
   "./layouts/**/*.vue",
   "./pages/**/*.vue",
   "./plugins/**/*.{js,ts}",
-  "./app.vue",
-  "./error.vue",
+  "./utils/**/*.{js,ts}",
+  "./App.{js,ts,vue}",
+  "./app.{js,ts,vue}",
+  "./Error.{js,ts,vue}",
+  "./error.{js,ts,vue}",
+  "./app.config.{js,ts}",
 ];
 
+/**
+ * Vueless tailwind static config.
+ * Exported to use in `@vueless/module-nuxt`.
+ */
+const safelist = getSafelist();
+const brandColors = getPalette(BRAND_COLOR);
+const grayColors = getPalette(GRAY_COLOR);
+
+export const vuelessTailwindConfig = {
+  darkMode: DARK_MODE_SELECTOR,
+  content: [...vuelessContent, ...vuelessContentVue, ...vuelessContentNuxt],
+  safelist,
+  theme: {
+    extend: {
+      colors: {
+        [BRAND_COLOR]: brandColors || {},
+        [GRAY_COLOR]: grayColors || {},
+        [COOL_COLOR]: { ...(colors[GRAY_COLOR] || {}) },
+      },
+      spacing: {
+        "safe-top": "env(safe-area-inset-top)",
+        "safe-bottom": "env(safe-area-inset-bottom)",
+        "safe-left": "env(safe-area-inset-left)",
+        "safe-right": "env(safe-area-inset-right)",
+      },
+      fontSize: {
+        "2xs": ["0.625rem", "0.875rem"] /* 10px / 14px */,
+      },
+      ringWidth: {
+        dynamic: "var(--vl-ring)",
+      },
+      ringOffsetWidth: {
+        dynamic: "var(--vl-ring-offset)",
+      },
+      borderRadius: {
+        dynamic: "var(--vl-rounding)",
+      },
+    },
+  },
+};
+
 /**
  * Generates preset for TailwindCSS base on Vueless config.
  * @returns {Object}
  */
 export function vuelessPreset() {
   return {
-    darkMode: DARK_MODE_SELECTOR,
-    content: [...vuelessContent, ...vuelessContentVue, ...vuelessContentNuxt],
-    safelist,
-    theme: {
-      extend: {
-        colors: {
-          [BRAND_COLOR]: getPalette(BRAND_COLOR),
-          [GRAY_COLOR]: getPalette(GRAY_COLOR),
-          [COOL_COLOR]: { ...defaultTheme.colors[GRAY_COLOR] },
-        },
-        spacing: {
-          "safe-top": "env(safe-area-inset-top)",
-          "safe-bottom": "env(safe-area-inset-bottom)",
-          "safe-left": "env(safe-area-inset-left)",
-          "safe-right": "env(safe-area-inset-right)",
-        },
-        fontSize: {
-          "2xs": ["0.625rem", "0.875rem"] /* 10px / 14px */,
-        },
-        ringWidth: {
-          dynamic: "var(--vl-ring)",
-        },
-        ringOffsetWidth: {
-          dynamic: "var(--vl-ring-offset)",
-        },
-        borderRadius: {
-          dynamic: "var(--vl-rounding)",
-        },
-      },
-    },
+    ...vuelessTailwindConfig,
     plugins: [forms],
   };
 }
@@ -88,11 +103,7 @@ export function vuelessPreset() {
  * @returns {Function}
  */
 function twColorWithOpacity(variableName) {
-  return ({ opacityValue }) => {
-    return opacityValue !== undefined
-      ? `rgba(var(${variableName}), ${opacityValue})`
-      : `rgb(var(${variableName}))`;
-  };
+  return `rgba(var(${variableName}))`;
 }
 
 /**

package/ui.dropdown-badge/config.js

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   wrapper: "relative inline-block",
-  dropdownBadge: "{UBadge}",
-  dropdownBadgeActive: "group ring-dynamic ring-offset-dynamic ring-brand-700/15 border-brand-500 hover:border-brand-500",
+  dropdownBadge: "{UBadge} transition",
+  dropdownBadgeActive: "group ring-dynamic ring-offset-dynamic ring-{color}-700/15",
   dropdownIcon: "{UIcon} transition duration-300 group-[]:rotate-180",
   dropdownList: {
     component: "{UDropdownList}",
@@ -30,4 +30,5 @@ export default /*tw*/ {
     /* icons */
     dropdownIcon: "keyboard_arrow_down",
   },
+  safelist: (colors) => [{ pattern: `ring-(${colors})-700` }],
 };

package/ui.dropdown-badge/useAttrs.js

@@ -5,7 +5,7 @@ import defaultConfig from "./config.js";
 import { computed } from "vue";
 
 export default function useAttrs(props, { isShownOptions }) {
-  const { config, getAttrs, hasSlotContent, isSystemKey, isCVA } = useUI(
+  const { config, getColor, setColor, getAttrs, hasSlotContent, isSystemKey, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -20,10 +20,11 @@ export default function useAttrs(props, { isShownOptions }) {
       if (isCVA(value)) {
         value = cva(value)({
           ...props,
+          color: getColor(props.color),
         });
       }
 
-      return value;
+      return setColor(value, props.color);
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
@@ -35,7 +36,7 @@ export default function useAttrs(props, { isShownOptions }) {
         ...badgeAttrs.value,
         class: cx([
           badgeAttrs.value.class,
-          isShownOptions.value && config.value.dropdownBadgeActive,
+          isShownOptions.value && setColor(config.value.dropdownBadgeActive, props.color),
         ]),
       }));
     }

package/ui.dropdown-button/config.js

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   wrapper: "relative inline-block",
   dropdownButton: "{UButton}",
-  dropdownButtonActive: "group ring-dynamic ring-offset-dynamic ring-brand-700/15 border-brand-500 hover:border-brand-500",
+  dropdownButtonActive: "group ring-dynamic ring-offset-dynamic ring-{color}-700/15",
   dropdownIcon: "{UIcon} transition duration-300 group-[]:rotate-180",
   dropdownList: {
     base: "{UDropdownList} w-fit",
@@ -32,4 +32,5 @@ export default /*tw*/ {
     /* icons */
     dropdownIcon: "keyboard_arrow_down",
   },
+  safelist: (colors) => [{ pattern: `ring-(${colors})-700` }],
 };

package/ui.dropdown-button/useAttrs.js

@@ -5,7 +5,7 @@ import defaultConfig from "./config.js";
 import { computed } from "vue";
 
 export default function useAttrs(props, { isShownOptions }) {
-  const { config, getAttrs, hasSlotContent, isSystemKey, isCVA } = useUI(
+  const { config, getColor, setColor, getAttrs, hasSlotContent, isSystemKey, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -20,10 +20,11 @@ export default function useAttrs(props, { isShownOptions }) {
       if (isCVA(value)) {
         value = cva(value)({
           ...props,
+          color: getColor(props.color),
         });
       }
 
-      return value;
+      return setColor(value, props.color);
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
@@ -35,7 +36,7 @@ export default function useAttrs(props, { isShownOptions }) {
         ...dropdownButton.value,
         class: cx([
           dropdownButton.value.class,
-          isShownOptions.value && config.value.dropdownButtonActive,
+          isShownOptions.value && setColor(config.value.dropdownButtonActive, props.color),
         ]),
       }));
     }

package/ui.dropdown-link/useAttrs.js

@@ -5,7 +5,7 @@ import defaultConfig from "./config.js";
 import { computed } from "vue";
 
 export default function useAttrs(props, { isShownOptions }) {
-  const { config, getAttrs, hasSlotContent, isSystemKey, isCVA } = useUI(
+  const { config, getColor, setColor, getAttrs, hasSlotContent, isSystemKey, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -18,12 +18,13 @@ export default function useAttrs(props, { isShownOptions }) {
       let value = config.value[key];
 
       if (isCVA(value)) {
-        return cva(value)({
+        value = cva(value)({
           ...props,
+          color: getColor(props.color),
         });
       }
 
-      return value;
+      return setColor(value, props.color);
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
@@ -33,7 +34,10 @@ export default function useAttrs(props, { isShownOptions }) {
 
       attrs[`${key}Attrs`] = computed(() => ({
         ...linkAttrs.value,
-        class: cx([linkAttrs.value.class, isShownOptions.value && config.value.dropdownLinkActive]),
+        class: cx([
+          linkAttrs.value.class,
+          isShownOptions.value && setColor(config.value.dropdownLinkActive, props.color),
+        ]),
       }));
     }
   }

package/ui.form-input-money/UInputMoney.vue

@@ -243,7 +243,7 @@ const elementId = props.id || useId();
 
 const { inputAttrs } = useAttrs(props);
 
-const { formattedValue, rawValue, setValue } = useFormatCurrency(`#${props.id}`, () => ({
+const { formattedValue, rawValue, setValue } = useFormatCurrency(`#${elementId}`, () => ({
   minFractionDigits: props.minFractionDigits,
   maxFractionDigits: props.maxFractionDigits,
   decimalSeparator: props.decimalSeparator,

package/utils/utilTheme.js

@@ -1,6 +1,7 @@
 import colors from "tailwindcss/colors.js";
 
 import { vuelessConfig } from "./utilUI.js";
+import { isSSR, isCSR } from "./utilHelper.js";
 import {
   GRAY_COLOR,
   COOL_COLOR,
@@ -15,12 +16,11 @@ import {
   GRAY_COLORS,
   PX_IN_REM,
 } from "../constants.js";
-import { isSSR } from "./utilHelper.js";
 
 export function themeInit() {
   if (isSSR) return;
 
-  const prefersColorSchemeDark = window && window.matchMedia("(prefers-color-scheme: dark)");
+  const prefersColorSchemeDark = window.matchMedia("(prefers-color-scheme: dark)");
 
   setTheme({ systemDarkMode: prefersColorSchemeDark.matches });
 
@@ -30,8 +30,6 @@ export function themeInit() {
 }
 
 export function setTheme(config = {}) {
-  if (isSSR) return;
-
   const isDarkMode = setDarkMode(config);
   const ring = config?.ring ?? vuelessConfig?.ring ?? DEFAULT_RING;
   const ringOffset = config?.ringOffset ?? vuelessConfig?.ringOffset ?? DEFAULT_RING_OFFSET;
@@ -79,22 +77,28 @@ export function setTheme(config = {}) {
     variables[`--vl-color-brand-${key}`] = convertHexInRgb(colors[brand][key]);
   }
 
-  const style = document.createElement("style");
   const stringVariables = Object.entries(variables)
     .map(([key, value]) => `${key}: ${value};`)
     .join(" ");
 
-  style.innerHTML = `:root {${stringVariables}`;
+  const rootVariables = `:root {${stringVariables}`;
+
+  if (isCSR) {
+    const style = document.createElement("style");
+
+    style.innerHTML = rootVariables;
+    document.head.appendChild(style);
+  }
 
-  document.head.appendChild(style);
+  return rootVariables;
 }
 
 function setDarkMode(config) {
   config?.darkMode === undefined
-    ? localStorage.removeItem(DARK_MODE_SELECTOR)
-    : localStorage.setItem(DARK_MODE_SELECTOR, Number(!!config?.darkMode));
+    ? isCSR && localStorage.removeItem(DARK_MODE_SELECTOR)
+    : isCSR && localStorage.setItem(DARK_MODE_SELECTOR, Number(!!config?.darkMode));
 
-  const storedDarkMode = localStorage.getItem(DARK_MODE_SELECTOR);
+  const storedDarkMode = isCSR ? localStorage.getItem(DARK_MODE_SELECTOR) : null;
 
   let isDarkMode =
     storedDarkMode !== null
@@ -102,8 +106,8 @@ function setDarkMode(config) {
       : !!(config?.darkMode ?? vuelessConfig?.darkMode ?? config?.systemDarkMode);
 
   isDarkMode
-    ? document.documentElement.classList.add(DARK_MODE_SELECTOR)
-    : document.documentElement.classList.remove(DARK_MODE_SELECTOR);
+    ? isCSR && document.documentElement.classList.add(DARK_MODE_SELECTOR)
+    : isCSR && document.documentElement.classList.remove(DARK_MODE_SELECTOR);
 
   return isDarkMode;
 }

package/web-types.json

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