element-plus/es/hooks/use-css-var/index.mjs.map

A Component Library for Vue 3

{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-css-var/index.ts"],"sourcesContent":["import {\n  watch,\n  isRef,\n  onMounted,\n  computed,\n  unref,\n  inject,\n  onUnmounted,\n  provide,\n  ref,\n} from 'vue'\nimport type { Ref, WatchStopHandle, InjectionKey } from 'vue'\n\ntype VarsType = Ref<Record<string, string>> | Record<string, string>\n\nconst VAR_PREFIX = '--el-'\n\nconst setVars = (target: HTMLElement, val: Record<string, string>) => {\n  Object.keys(val).forEach((key) => {\n    if (key.startsWith(VAR_PREFIX)) {\n      target?.style.setProperty(key, val[key])\n    } else {\n      target?.style.setProperty(VAR_PREFIX + key, val[key])\n    }\n  })\n}\n\nexport const themeVarsKey: InjectionKey<VarsType> = 'themeVars' as any\n\n/**\n * @param vars\n * @param target\n * @returns stopWatchHandler\n * @example\n *\n * If you pass a Ref vars param, it will generate a watch handler.\n *\n * In main.ts:\n *\n * ```ts\n * const themeVars = {\n *  '--el-color-primary': '#f44336',\n *  '--el-color-white': '#2196f3',\n * }\n * app.provide(themeVarsKey, themeVars)\n * ```\n * Usually you need to use this function in the root component.\n * In components' steup:\n *\n * ```ts\n * setup() {\n *  const themeVars = ref({\n *    '--el-button-default-background-color': '#f44336',\n *    '--el-button-default-font-color': '#2196f3',\n *  })\n *  useCssVar(themeVars)\n * }\n * ```\n */\nexport function useCssVar(\n  vars: VarsType,\n  target?: Ref<HTMLElement> | HTMLElement\n) {\n  let stopWatchCssVar: WatchStopHandle | null = null\n\n  const elRef = computed(\n    () => unref(target) || window?.document?.documentElement\n  )\n\n  const themeVars = useThemeVars()\n  const customVars = { ...themeVars, ...unref(vars) }\n\n  provide(themeVarsKey, ref(customVars))\n\n  onMounted(() => {\n    isRef(vars)\n      ? (stopWatchCssVar = watch(\n          vars,\n          (val) => {\n            setVars(elRef.value, {\n              ...unref(themeVars),\n              ...val,\n            })\n          },\n          {\n            immediate: true,\n            deep: true,\n          }\n        ))\n      : setVars(elRef.value, {\n          ...unref(themeVars),\n          ...vars,\n        })\n  })\n\n  onUnmounted(() => stopWatchCssVar && stopWatchCssVar())\n}\n\nexport const useThemeVars = () => {\n  const themeVars = inject(themeVarsKey, {})\n  return themeVars\n}\n"],"names":[],"mappings":";;AAeA,MAAM,aAAa;AAEnB,MAAM,UAAU,CAAC,QAAqB,QAAgC;AACpE,SAAO,KAAK,KAAK,QAAQ,CAAC,QAAQ;AAChC,QAAI,IAAI,WAAW,aAAa;AAC9B,uCAAQ,MAAM,YAAY,KAAK,IAAI;AAAA,WAC9B;AACL,uCAAQ,MAAM,YAAY,aAAa,KAAK,IAAI;AAAA;AAAA;AAAA;MAKzC,eAAuC;mBAiClD,MACA,QACA;AACA,MAAI,kBAA0C;AAE9C,QAAM,QAAQ,SACZ,MAAG;AAlEP;AAkEU,iBAAM,mDAAmB,aAAR,mBAAkB;AAAA;AAG3C,QAAM,YAAY;AAClB,QAAM,aAAa,KAAK,cAAc,MAAM;AAE5C,UAAQ,cAAc,IAAI;AAE1B,YAAU,MAAM;AACd,UAAM,QACD,kBAAkB,MACjB,MACA,CAAC,QAAQ;AACP,cAAQ,MAAM,OAAO;AAAA,WAChB,MAAM;AAAA,WACN;AAAA;AAAA,OAGP;AAAA,MACE,WAAW;AAAA,MACX,MAAM;AAAA,SAGV,QAAQ,MAAM,OAAO;AAAA,SAChB,MAAM;AAAA,SACN;AAAA;AAAA;AAIX,cAAY,MAAM,mBAAmB;AAAA;MAG1B,eAAe,MAAM;AAChC,QAAM,YAAY,OAAO,cAAc;AACvC,SAAO;AAAA;;;;"}