index.mjs 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. import { getCurrentInstance, inject, ref, computed, unref } from 'vue';
  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 namespaceContextKey = Symbol("namespaceContextKey");
  18. const useGetDerivedNamespace = (namespaceOverrides) => {
  19. const derivedNamespace = namespaceOverrides || (getCurrentInstance() ? inject(namespaceContextKey, ref(defaultNamespace)) : ref(defaultNamespace));
  20. const namespace = computed(() => {
  21. return unref(derivedNamespace) || defaultNamespace;
  22. });
  23. return namespace;
  24. };
  25. const useNamespace = (block, namespaceOverrides) => {
  26. const namespace = useGetDerivedNamespace(namespaceOverrides);
  27. const b = (blockSuffix = "") => _bem(namespace.value, block, blockSuffix, "", "");
  28. const e = (element) => element ? _bem(namespace.value, block, "", element, "") : "";
  29. const m = (modifier) => modifier ? _bem(namespace.value, block, "", "", modifier) : "";
  30. const be = (blockSuffix, element) => blockSuffix && element ? _bem(namespace.value, block, blockSuffix, element, "") : "";
  31. const em = (element, modifier) => element && modifier ? _bem(namespace.value, block, "", element, modifier) : "";
  32. const bm = (blockSuffix, modifier) => blockSuffix && modifier ? _bem(namespace.value, block, blockSuffix, "", modifier) : "";
  33. const bem = (blockSuffix, element, modifier) => blockSuffix && element && modifier ? _bem(namespace.value, block, blockSuffix, element, modifier) : "";
  34. const is = (name, ...args) => {
  35. const state = args.length >= 1 ? args[0] : true;
  36. return name && state ? `${statePrefix}${name}` : "";
  37. };
  38. const cssVar = (object) => {
  39. const styles = {};
  40. for (const key in object) {
  41. if (object[key]) {
  42. styles[`--${namespace.value}-${key}`] = object[key];
  43. }
  44. }
  45. return styles;
  46. };
  47. const cssVarBlock = (object) => {
  48. const styles = {};
  49. for (const key in object) {
  50. if (object[key]) {
  51. styles[`--${namespace.value}-${block}-${key}`] = object[key];
  52. }
  53. }
  54. return styles;
  55. };
  56. const cssVarName = (name) => `--${namespace.value}-${name}`;
  57. const cssVarBlockName = (name) => `--${namespace.value}-${block}-${name}`;
  58. return {
  59. namespace,
  60. b,
  61. e,
  62. m,
  63. be,
  64. em,
  65. bm,
  66. bem,
  67. is,
  68. cssVar,
  69. cssVarName,
  70. cssVarBlock,
  71. cssVarBlockName
  72. };
  73. };
  74. export { defaultNamespace, namespaceContextKey, useGetDerivedNamespace, useNamespace };
  75. //# sourceMappingURL=index.mjs.map