maz-ui 4.0.0-alpha.5 → 4.0.0-beta.1

package/dist/plugins/maz-ui.js

@@ -0,0 +1,468 @@
+import { reactive, ref } from "vue";
+function parseHSL(hsl) {
+  const match = hsl.match(/^(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)%$/);
+  if (!match)
+    throw new Error(`Invalid HSL format: ${hsl}`);
+  return {
+    h: Number.parseFloat(match[1]),
+    s: Number.parseFloat(match[2]),
+    l: Number.parseFloat(match[3])
+  };
+}
+function formatHSL(h, s, l) {
+  const roundedH = Math.round(h * 10) / 10, roundedS = Math.round(s * 10) / 10, roundedL = Math.round(l * 10) / 10;
+  return `${roundedH} ${roundedS}% ${roundedL}%`;
+}
+const LUMINOSITY_OFFSETS = {
+  50: 45,
+  // Base + 45% = very light
+  100: 40,
+  // Base + 40% = light
+  200: 30,
+  // Base + 30% = moderately light
+  300: 20,
+  // Base + 20% = light-medium
+  400: 10,
+  // Base + 10% = slightly lighter
+  500: 0,
+  // Base (original color)
+  600: -10,
+  // Base - 10% = slightly darker
+  700: -20,
+  // Base - 20% = dark
+  800: -30,
+  // Base - 30% = very dark
+  900: -40
+  // Base - 40% = extremely dark
+};
+function calculateSaturationMultiplier(baseVariant, targetVariant, baseSaturation) {
+  if (targetVariant === baseVariant)
+    return 1;
+  const saturationFactor = Math.min(baseSaturation / 100, 1), variantDiff = Math.abs(targetVariant - baseVariant);
+  if (targetVariant < baseVariant) {
+    const reduction = variantDiff / 500 * 0.25 * saturationFactor;
+    return Math.max(0.3, 1 - reduction);
+  } else {
+    const increase = variantDiff / 400 * 0.15 * saturationFactor;
+    return Math.min(1.3, 1 + increase);
+  }
+}
+function generateColorScale(baseColor) {
+  const { h, s, l } = parseHSL(baseColor), baseVariant = 500, baseLuminosity = l, variants = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900], scale = {};
+  return variants.forEach((variant) => {
+    if (variant === baseVariant)
+      scale[variant.toString()] = formatHSL(h, s, l);
+    else {
+      const luminosityOffset = LUMINOSITY_OFFSETS[variant];
+      let targetLuminosity = baseLuminosity + luminosityOffset;
+      targetLuminosity = Math.min(95, Math.max(5, targetLuminosity));
+      const saturationMultiplier = calculateSaturationMultiplier(baseVariant, variant, s), adjustedSaturation = Math.min(100, Math.max(5, s * saturationMultiplier));
+      scale[variant.toString()] = formatHSL(h, adjustedSaturation, targetLuminosity);
+    }
+  }), scale;
+}
+function getCookie(key) {
+  if (typeof document > "u")
+    return null;
+  const cookie = document.cookie.split(";").find((c) => c.trim().startsWith(`${key}=`));
+  return cookie ? decodeURIComponent(cookie.split("=")[1]) : null;
+}
+const DEFAULT_CRITICAL_COLORS = [
+  "background",
+  "foreground",
+  "primary",
+  "primary-foreground",
+  "secondary",
+  "secondary-foreground",
+  "accent",
+  "accent-foreground",
+  "destructive",
+  "destructive-foreground",
+  "success",
+  "success-foreground",
+  "warning",
+  "warning-foreground",
+  "info",
+  "info-foreground",
+  "contrast",
+  "contrast-foreground",
+  "muted",
+  "shadow",
+  "border"
+], DEFAULT_CRITICAL_FOUNDATION = [
+  "radius",
+  "font-family",
+  "base-font-size",
+  "border-width"
+], scaleColors = ["primary", "secondary", "accent", "destructive", "success", "warning", "info", "contrast", "background", "foreground", "border", "muted", "overlay", "shadow"];
+function generateCriticalCSS(preset, options = {}) {
+  const {
+    criticalColors = DEFAULT_CRITICAL_COLORS,
+    criticalFoundation = DEFAULT_CRITICAL_FOUNDATION,
+    mode = "both",
+    darkSelectorStrategy = "class",
+    prefix = "maz"
+  } = options, lightCritical = extractCriticalVariables(preset.colors.light, criticalColors), darkCritical = extractCriticalVariables(preset.colors.dark, criticalColors), foundationCritical = extractCriticalFoundation(preset.foundation, criticalFoundation);
+  let css = `@layer maz-ui-theme {
+`;
+  return (mode === "light" || mode === "both") && (css += generateVariablesBlock({
+    selector: ":root",
+    colors: lightCritical,
+    foundation: foundationCritical,
+    prefix
+  })), (mode === "dark" || mode === "both") && (css += generateVariablesBlock({
+    selector: darkSelectorStrategy === "media" ? ":root" : ".dark",
+    mediaQuery: darkSelectorStrategy === "media" ? "@media (prefers-color-scheme: dark)" : void 0,
+    colors: darkCritical,
+    foundation: foundationCritical,
+    prefix
+  })), css += `}
+`, css;
+}
+function generateFullCSS(preset, options = {}) {
+  const {
+    excludeCritical = DEFAULT_CRITICAL_COLORS,
+    mode = "both",
+    darkSelectorStrategy = "class",
+    prefix = "maz",
+    includeColorScales = !0
+  } = options, lightColors = excludeVariables(preset.colors.light, excludeCritical), darkColors = excludeVariables(preset.colors.dark, excludeCritical), foundation = excludeFoundationVariables(preset.foundation, DEFAULT_CRITICAL_FOUNDATION);
+  let css = `@layer maz-ui-theme {
+`;
+  return (mode === "light" || mode === "both") && (css += generateVariablesBlock({
+    selector: ":root",
+    colors: lightColors,
+    foundation,
+    prefix,
+    includeScales: includeColorScales,
+    preset
+  })), (mode === "dark" || mode === "both") && (css += generateVariablesBlock({
+    selector: darkSelectorStrategy === "media" ? ":root" : ".dark",
+    mediaQuery: darkSelectorStrategy === "media" ? "@media (prefers-color-scheme: dark)" : void 0,
+    colors: darkColors,
+    foundation: mode === "dark" ? foundation : void 0,
+    // Appearance only if dark mode only
+    prefix,
+    includeScales: includeColorScales,
+    preset,
+    isDark: !0
+  })), css += `}
+`, css;
+}
+function extractCriticalVariables(colors, criticalKeys) {
+  return Object.fromEntries(
+    criticalKeys.filter((key) => colors[key]).map((key) => [key, colors[key]])
+  );
+}
+function extractCriticalFoundation(foundation, criticalKeys) {
+  return foundation ? Object.fromEntries(
+    criticalKeys.filter((key) => foundation[key]).map((key) => [key, foundation[key]])
+  ) : {};
+}
+function excludeVariables(colors, excludeKeys) {
+  return Object.fromEntries(
+    Object.entries(colors).filter(([key]) => !excludeKeys.includes(key))
+  );
+}
+function excludeFoundationVariables(foundation, excludeKeys) {
+  return foundation ? Object.fromEntries(
+    Object.entries(foundation).filter(([key]) => !excludeKeys.includes(key))
+  ) : {};
+}
+function generateVariablesBlock({
+  selector,
+  mediaQuery,
+  colors,
+  foundation,
+  prefix,
+  includeScales = !1,
+  preset,
+  isDark = !1
+}) {
+  const variables = [];
+  if (colors && Object.entries(colors).forEach(([key, value]) => {
+    value && variables.push(`  --${prefix}-${key}: ${value};`);
+  }), foundation && Object.entries(foundation).forEach(([key, value]) => {
+    value && variables.push(`  --${prefix}-${key}: ${value};`);
+  }), includeScales && preset) {
+    const sourceColors = isDark ? preset.colors.dark : preset.colors.light, colorScales = generateAllColorScales(sourceColors, prefix);
+    variables.push(...colorScales);
+  }
+  const content = variables.join(`
+`);
+  return mediaQuery ? `
+  ${mediaQuery} {
+    ${selector} {
+${content.replace(/^/gm, "  ")}
+    }
+  }
+` : `
+  ${selector} {
+${content}
+  }
+`;
+}
+function generateAllColorScales(colors, prefix) {
+  const colorScales = [];
+  return scaleColors.forEach((colorName) => {
+    const baseColor = colors[colorName];
+    if (baseColor) {
+      const scale = generateColorScale(baseColor);
+      Object.entries(scale).forEach(([scaleKey, scaleValue]) => {
+        colorScales.push(`  --${prefix}-${colorName}-${scaleKey}: ${scaleValue};`);
+      });
+    }
+  }), colorScales;
+}
+function injectCSS(css, id = "maz-theme-vars") {
+  if (typeof document > "u")
+    return;
+  let styleElement = document.getElementById(id);
+  styleElement || (styleElement = document.createElement("style"), styleElement.id = id, document.head.appendChild(styleElement)), styleElement.textContent = css;
+}
+function isPresetObject(preset) {
+  return typeof preset == "object" && preset !== null && !!preset.name;
+}
+async function getPreset(preset) {
+  if (isPresetObject(preset))
+    return preset;
+  if (preset === "mazUi" || !preset || preset === "maz-ui") {
+    const { mazUi } = await import("../chunks/mazUi.D6UdqpTO.js");
+    return mazUi;
+  }
+  if (preset === "ocean") {
+    const { ocean } = await import("../chunks/ocean.pHrY5H_S.js");
+    return ocean;
+  }
+  if (preset === "pristine") {
+    const { pristine } = await import("../chunks/pristine.ylgbwjxO.js");
+    return pristine;
+  }
+  if (preset === "obsidian") {
+    const { obsidian } = await import("../chunks/obsidian.Cy0R8RHy.js");
+    return obsidian;
+  }
+  throw new TypeError(`[@maz-ui/themes] Preset ${preset} not found`);
+}
+function getColorMode(colorMode) {
+  if (colorMode && ["light", "dark"].includes(colorMode))
+    return colorMode;
+  const savedMode = getCookie("maz-color-mode");
+  return savedMode && ["light", "dark"].includes(savedMode) ? savedMode : getSystemPrefersDark();
+}
+function getSystemPrefersDark() {
+  return typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function applyDarkMode(darkModeStrategy, isDark) {
+  typeof document > "u" || darkModeStrategy !== "class" || (isDark ? document.documentElement.classList.add("dark") : document.documentElement.classList.remove("dark"));
+}
+function injectThemeCSS(finalPreset, config) {
+  if (typeof document > "u")
+    return;
+  const cssOptions = {
+    mode: "both",
+    prefix: config.prefix
+  };
+  if (config.injectCriticalCSS) {
+    const criticalCSS = generateCriticalCSS(finalPreset, cssOptions);
+    injectCSS(criticalCSS, "maz-theme-critical");
+  }
+  if (!config.injectFullCSS)
+    return;
+  const fullCSS = generateFullCSS(finalPreset, cssOptions);
+  config.strategy === "runtime" ? injectCSS(fullCSS, "maz-theme-full") : config.strategy === "hybrid" && requestIdleCallback(() => {
+    injectCSS(fullCSS, "maz-theme-full");
+  }, { timeout: 100 });
+}
+function injectThemeState(app, themeState) {
+  app.provide("mazThemeState", themeState), app.config.globalProperties.$mazThemeState = themeState;
+}
+const MazUiTheme = {
+  async install(app, options = {}) {
+    const config = {
+      preset: "maz-ui",
+      strategy: "runtime",
+      darkModeStrategy: "class",
+      colorMode: "auto",
+      prefix: "maz",
+      injectCriticalCSS: !0,
+      injectFullCSS: !0,
+      ...options
+    }, colorMode = getColorMode(config.colorMode), isDark = colorMode === "auto" ? getSystemPrefersDark() === "dark" : colorMode === "dark", themeState = reactive({
+      // @ts-expect-error - empty currentPreset to avoid error
+      currentPreset: {},
+      colorMode,
+      isDark,
+      strategy: config.strategy,
+      darkModeStrategy: config.darkModeStrategy
+    });
+    applyDarkMode(config.darkModeStrategy, themeState.isDark), injectThemeState(app, themeState);
+    const preset = await getPreset(config.preset), finalPreset = config.overrides ? {
+      ...preset,
+      foundation: {
+        ...preset.foundation,
+        ...config.overrides.foundation
+      },
+      colors: {
+        light: { ...preset.colors.light, ...config.overrides.colors?.light },
+        dark: { ...preset.colors.dark, ...config.overrides.colors?.dark }
+      }
+    } : preset;
+    themeState.currentPreset = finalPreset, config.strategy !== "buildtime" && injectThemeCSS(finalPreset, config);
+  }
+}, defaultLocaleLoaders = {
+  en: () => import("../chunks/en.BzBlrE0C.js"),
+  fr: () => import("../chunks/fr.BVPG-7Dk.js"),
+  es: () => import("../chunks/es.BV1TlfTw.js"),
+  de: () => import("../chunks/de.B15Maq8Z.js"),
+  it: () => import("../chunks/it.Be9xhI4P.js"),
+  pt: () => import("../chunks/pt.CfaFSxVt.js"),
+  "zh-CN": () => import("../chunks/zh-CN.CCkuvk-E.js"),
+  ja: () => import("../chunks/ja.CWU7KYEA.js")
+};
+function get(obj, path) {
+  return path.split(".").reduce((current, key) => current?.[key], obj);
+}
+function set(obj, path, value) {
+  const keys = path.split("."), lastKey = keys.pop(), target = keys.reduce((current, key) => ((!current[key] || typeof current[key] != "object") && (current[key] = {}), current[key]), obj);
+  target[lastKey] = value;
+}
+function isFlattened(obj) {
+  return !obj || typeof obj != "object" ? !1 : Object.keys(obj).some((key) => key.includes("."));
+}
+function flattenToNested(flatObj) {
+  if (!isFlattened(flatObj))
+    return flatObj;
+  const nested = {};
+  for (const [key, value] of Object.entries(flatObj))
+    key.includes(".") ? set(nested, key, value) : nested[key] = value;
+  return nested;
+}
+function merge(target, source) {
+  const normalizedSource = flattenToNested(source), result = { ...flattenToNested(target) };
+  for (const key in normalizedSource)
+    normalizedSource[key] && typeof normalizedSource[key] == "object" ? result[key] = merge(result[key] || {}, normalizedSource[key]) : result[key] = normalizedSource[key];
+  return result;
+}
+function interpolate(message, variables) {
+  return variables ? message.replace(/\{(\w+)\}/g, (match, key) => variables[key] !== void 0 ? String(variables[key]) : match) : message;
+}
+async function createMazTranslations(options = {}) {
+  const {
+    locale: initialLocale = "en",
+    fallbackLocale = "en",
+    preloadFallback = !0,
+    messages = {}
+  } = options, locale = ref(initialLocale), messagesRef = ref({}), loadedLocales = ref(/* @__PURE__ */ new Set()), loadingPromises = ref(/* @__PURE__ */ new Map()), userMessageLoaders = ref({});
+  for (const [loc, msgs] of Object.entries(messages))
+    userMessageLoaders.value[loc] = typeof msgs == "function" ? msgs : () => Promise.resolve(msgs);
+  function loadLocaleMessages(targetLocale) {
+    if (loadedLocales.value.has(targetLocale))
+      return;
+    if (loadingPromises.value.has(targetLocale))
+      return loadingPromises.value.get(targetLocale);
+    const loadingPromise = (async () => {
+      try {
+        let defaultMessages = {}, userMessages = {};
+        defaultLocaleLoaders[targetLocale] && (defaultMessages = (await defaultLocaleLoaders[targetLocale]()).default);
+        const userLoader = userMessageLoaders.value[targetLocale];
+        userLoader && (typeof userLoader == "function" ? userMessages = await userLoader() : userMessages = userLoader), messagesRef.value[targetLocale] = merge(defaultMessages, userMessages), loadedLocales.value.add(targetLocale);
+      } catch (error) {
+        console.error(`Failed to load translations for locale "${targetLocale}":`, error), messagesRef.value[targetLocale] = {}, loadedLocales.value.add(targetLocale);
+      } finally {
+        loadingPromises.value.delete(targetLocale);
+      }
+    })();
+    return loadingPromises.value.set(targetLocale, loadingPromise), loadingPromise;
+  }
+  const localePromises = [];
+  return localePromises.push(loadLocaleMessages(initialLocale)), preloadFallback && fallbackLocale !== initialLocale && localePromises.push(loadLocaleMessages(fallbackLocale)), await Promise.all(localePromises), { locale, t: (key, variables) => {
+    let message = get(messagesRef.value[locale.value], key);
+    if (!message && locale.value !== fallbackLocale) {
+      if (!loadedLocales.value.has(fallbackLocale))
+        return loadLocaleMessages(fallbackLocale)?.catch(console.error), console.warn(`Fallback locale "${fallbackLocale}" not loaded yet for key "${key}", loading...`), key;
+      message = get(messagesRef.value[fallbackLocale], key);
+    }
+    if (!message && fallbackLocale !== "en" && locale.value !== "en") {
+      if (!loadedLocales.value.has("en"))
+        return loadLocaleMessages("en")?.catch(console.error), console.warn(`English fallback not loaded yet for key "${key}", loading...`), key;
+      message = get(messagesRef.value.en, key);
+    }
+    return message ? interpolate(String(message), variables) : (console.warn(`Translation key "${key}" not found for locale "${locale.value}"`), key);
+  }, setLocale: async (newLocale) => {
+    loadedLocales.value.has(newLocale) || await loadLocaleMessages(newLocale), locale.value = newLocale;
+  } };
+}
+const MazTranslations = {
+  async install(app, options = {}) {
+    const i18n = await createMazTranslations(options);
+    return app.config.globalProperties.$mazTranslations = i18n, app.provide("mazTranslations", i18n), i18n;
+  }
+}, MazUi = {
+  // eslint-disable-next-line complexity, sonarjs/cognitive-complexity
+  async install(app, options = {}) {
+    const { theme, translations } = options;
+    app.use(MazUiTheme, theme), app.use(MazTranslations, translations);
+    const pluginPromises = [];
+    if (options.plugins?.dialog) {
+      const dialogOptions = typeof options.plugins.dialog == "boolean" ? void 0 : options.plugins.dialog;
+      pluginPromises.push(
+        import("./dialog.js").then(({ DialogPlugin }) => {
+          app.use(DialogPlugin, dialogOptions);
+        })
+      );
+    }
+    if (options.plugins?.toast) {
+      const toastOptions = typeof options.plugins.toast == "boolean" ? void 0 : options.plugins.toast;
+      pluginPromises.push(
+        import("./toast.js").then(({ ToastPlugin }) => {
+          app.use(ToastPlugin, toastOptions);
+        })
+      );
+    }
+    if (options.plugins?.wait && pluginPromises.push(
+      import("./wait.js").then(({ WaitPlugin }) => {
+        app.use(WaitPlugin);
+      })
+    ), options.plugins?.aos) {
+      const aosOptions = typeof options.plugins.aos == "boolean" ? void 0 : options.plugins.aos;
+      pluginPromises.push(
+        import("./aos.js").then(({ AosPlugin }) => {
+          app.use(AosPlugin, aosOptions);
+        })
+      );
+    }
+    if (options.directives?.vTooltip) {
+      const vTooltipOptions = typeof options.directives.vTooltip == "boolean" ? void 0 : options.directives.vTooltip;
+      pluginPromises.push(
+        import("../directives/vTooltip.js").then(({ vTooltipInstall }) => {
+          app.use(vTooltipInstall, vTooltipOptions);
+        })
+      );
+    }
+    if (options.directives?.vLazyImg) {
+      const vLazyImgOptions = typeof options.directives.vLazyImg == "boolean" ? void 0 : options.directives.vLazyImg;
+      pluginPromises.push(
+        import("../directives/vLazyImg.js").then(({ vLazyImgInstall }) => {
+          app.use(vLazyImgInstall, vLazyImgOptions);
+        })
+      );
+    }
+    options.directives?.vClickOutside && pluginPromises.push(
+      import("../directives/vClickOutside.js").then(({ vClickOutsideInstall }) => {
+        app.use(vClickOutsideInstall);
+      })
+    ), options.directives?.vFullscreenImg && pluginPromises.push(
+      import("../directives/vFullscreenImg.js").then(({ vFullscreenImgInstall }) => {
+        app.use(vFullscreenImgInstall);
+      })
+    ), options.directives?.vZoomImg && pluginPromises.push(
+      import("../directives/vZoomImg.js").then(({ vZoomImgInstall }) => {
+        app.use(vZoomImgInstall);
+      })
+    ), await Promise.all(pluginPromises);
+  }
+};
+export {
+  MazUi
+};