index.mjs 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. import { computed, getCurrentInstance, inject, ref, unref } from "vue";
  2. //#region ../../packages/hooks/use-namespace/index.ts
  3. const defaultNamespace = "el";
  4. const statePrefix = "is-";
  5. const _bem = (namespace, block, blockSuffix, element, modifier) => {
  6. let cls = `${namespace}-${block}`;
  7. if (blockSuffix) cls += `-${blockSuffix}`;
  8. if (element) cls += `__${element}`;
  9. if (modifier) cls += `--${modifier}`;
  10. return cls;
  11. };
  12. const namespaceContextKey = Symbol("namespaceContextKey");
  13. const useGetDerivedNamespace = (namespaceOverrides) => {
  14. const derivedNamespace = namespaceOverrides || (getCurrentInstance() ? inject(namespaceContextKey, ref(defaultNamespace)) : ref(defaultNamespace));
  15. return computed(() => {
  16. return unref(derivedNamespace) || defaultNamespace;
  17. });
  18. };
  19. const useNamespace = (block, namespaceOverrides) => {
  20. const namespace = useGetDerivedNamespace(namespaceOverrides);
  21. const b = (blockSuffix = "") => _bem(namespace.value, block, blockSuffix, "", "");
  22. const e = (element) => element ? _bem(namespace.value, block, "", element, "") : "";
  23. const m = (modifier) => modifier ? _bem(namespace.value, block, "", "", modifier) : "";
  24. const be = (blockSuffix, element) => blockSuffix && element ? _bem(namespace.value, block, blockSuffix, element, "") : "";
  25. const em = (element, modifier) => element && modifier ? _bem(namespace.value, block, "", element, modifier) : "";
  26. const bm = (blockSuffix, modifier) => blockSuffix && modifier ? _bem(namespace.value, block, blockSuffix, "", modifier) : "";
  27. const bem = (blockSuffix, element, modifier) => blockSuffix && element && modifier ? _bem(namespace.value, block, blockSuffix, element, modifier) : "";
  28. const is = (name, ...args) => {
  29. const state = args.length >= 1 ? args[0] : true;
  30. return name && state ? `${statePrefix}${name}` : "";
  31. };
  32. const cssVar = (object) => {
  33. const styles = {};
  34. for (const key in object) if (object[key]) styles[`--${namespace.value}-${key}`] = object[key];
  35. return styles;
  36. };
  37. const cssVarBlock = (object) => {
  38. const styles = {};
  39. for (const key in object) if (object[key]) styles[`--${namespace.value}-${block}-${key}`] = object[key];
  40. return styles;
  41. };
  42. const cssVarName = (name) => `--${namespace.value}-${name}`;
  43. const cssVarBlockName = (name) => `--${namespace.value}-${block}-${name}`;
  44. return {
  45. namespace,
  46. b,
  47. e,
  48. m,
  49. be,
  50. em,
  51. bm,
  52. bem,
  53. is,
  54. cssVar,
  55. cssVarName,
  56. cssVarBlock,
  57. cssVarBlockName
  58. };
  59. };
  60. //#endregion
  61. export { defaultNamespace, namespaceContextKey, useGetDerivedNamespace, useNamespace };
  62. //# sourceMappingURL=index.mjs.map