winbox-ui-next/lib/color-picker/_mixins/use-css-vars-class.js

We Design Vue 2.0: A Vue.js 3 UI Library

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports[Symbol.toStringTag] = "Module";
var vue = require("vue");
var cssRender = require("css-render");
var vue3Ssr = require("@css-render/vue3-ssr");
var context = require("../config-provider/src/context.js");
var warn = require("../_utils/naive/warn.js");
require("../_utils/vue/wrapper.js");
var index = require("../_utils/cssr/index.js");
require("../_utils/composable/use-adjusted-to.js");
require("vueuc");
require("../_utils/composable/use-lock-html-scroll.js");
require("../_utils/composable/use-is-composing.js");
function useThemeClass(componentName, hashRef, cssVarsRef, props) {
  var _a;
  if (!cssVarsRef)
    warn.throwError("useThemeClass", "cssVarsRef is not passed");
  const mergedThemeHashRef = (_a = vue.inject(context.configProviderInjectionKey, null)) == null ? void 0 : _a.mergedThemeHashRef;
  const themeClassRef = vue.ref("");
  const ssrAdapter = vue3Ssr.useSsrAdapter();
  let renderCallback;
  const hashClassPrefix = `__${componentName}`;
  const mountStyle = () => {
    let finalThemeHash = hashClassPrefix;
    const hashValue = hashRef ? hashRef.value : void 0;
    const themeHash = mergedThemeHashRef == null ? void 0 : mergedThemeHashRef.value;
    if (themeHash)
      finalThemeHash += `-${themeHash}`;
    if (hashValue)
      finalThemeHash += `-${hashValue}`;
    const { themeOverrides, builtinThemeOverrides } = props;
    if (themeOverrides) {
      finalThemeHash += `-${cssRender.hash(JSON.stringify(themeOverrides))}`;
    }
    if (builtinThemeOverrides) {
      finalThemeHash += `-${cssRender.hash(JSON.stringify(builtinThemeOverrides))}`;
    }
    themeClassRef.value = finalThemeHash;
    renderCallback = () => {
      const cssVars = cssVarsRef.value;
      let style = "";
      for (const key in cssVars) {
        style += `${key}: ${cssVars[key]};`;
      }
      index.c(`.${finalThemeHash}`, style).mount({
        id: finalThemeHash,
        ssr: ssrAdapter
      });
      renderCallback = void 0;
    };
  };
  vue.watchEffect(() => {
    mountStyle();
  });
  return {
    themeClass: themeClassRef,
    onRender: () => {
      renderCallback == null ? void 0 : renderCallback();
    }
  };
}
exports.useThemeClass = useThemeClass;