index.mjs 2.2 KB

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