@descope/web-components-ui 1.0.62 → 1.0.64

package/dist/cjs/index.cjs.js

@@ -13,10 +13,50 @@ const kebabCase = (str) =>
 
 const kebabCaseJoin = (...args) => kebabCase(args.join('-'));
 
+const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
+
 const getCssVarName = (...args) =>
-	`--${kebabCaseJoin(...args.filter((arg) => !!arg))}`;
+  `--${kebabCaseJoin(...args.filter((arg) => !!arg))}`;
 
-const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
+class ComponentsThemeManager {
+  static mountOnPropName = 'DescopeThemeManager';
+
+  #themes = {};
+
+  #currentThemeName = 'light';
+
+  #callbacks = new Set();
+
+  #notify() {
+    this.#callbacks.forEach(cb => cb?.());
+  };
+
+  get currentThemeName() {
+    return this.#currentThemeName;
+  }
+
+  set currentThemeName(themeName) {
+    this.#currentThemeName = themeName;
+    this.#notify();
+  }
+
+  get currentTheme() {
+    return this.#themes[this.currentThemeName];
+  }
+
+  onCurrentThemeChange(cb) {
+    this.#callbacks.add(cb);
+
+    return () => { this.#callbacks.delete(cb); };
+  };
+
+  set themes(themes) {
+    this.#themes = themes;
+    this.#notify();
+  }
+}
+
+const componentsThemeManager = new ComponentsThemeManager();
 
 const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
 
@@ -46,9 +86,9 @@ const getThemeRefs = (theme, prefix) =>
 const globalsThemeToStyle = (theme, themeName = '') => `
 *[data-theme="${themeName}"] {
 	${Object.entries(themeToCSSVarsObj(theme)).reduce(
-		(acc, entry) => (acc += `${entry.join(':')};\n`),
-		''
-	)}
+	(acc, entry) => (acc += `${entry.join(':')};\n`),
+	''
+)}
 }
 `;
 
@@ -56,10 +96,20 @@ const componentsThemeToStyleObj = (componentsTheme) =>
 	transformTheme(componentsTheme, [], (path, val) => {
 		const [component, ...restPath] = path;
 		const property = restPath.pop();
+		const componentName = getComponentName(component);
+
+		// we need a support for portal components theme (e.g. overlay)
+		// this allows us to generate those themes under different sections
+		// if the theme has root level attribute that starts with #
+		// we are generating a new theme
+		let themeName = 'theme';
+
+		if (restPath[0] && restPath[0].startsWith('#')) {
+			themeName = restPath.shift();
+		}
 
 		// do not start with underscore -> key:value, must have 2 no underscore attrs in a row
 		// starts with underscore -> attribute selector
-
 		const attrsSelector = restPath.reduce((acc, section, idx) => {
 			if (section.startsWith('_'))
 				return (acc += `[${kebabCase(section.replace(/^_/, ''))}="true"]`);
@@ -79,30 +129,53 @@ const componentsThemeToStyleObj = (componentsTheme) =>
 				.join('')}"]`);
 		}, '');
 
-		let selector = `${getComponentName(component)}${attrsSelector}`;
+		let selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;
 
 		return {
-			[selector]: {
-				[property]: val
+			[componentName]: {
+				[themeName]: {
+					[selector]: {
+						[property]: val
+					}
+				}
 			}
 		};
 	});
 
-const componentsThemeToStyle = (componentsTheme, themeName = '') =>
-	Object.entries(componentsThemeToStyleObj(componentsTheme)).reduce(
+
+const createComponentsTheme = (componentsTheme) => {
+	const styleObj = componentsThemeToStyleObj(componentsTheme);
+
+	return Object.keys(styleObj).reduce(
+		(acc, componentName) => {
+			const componentThemes = styleObj[componentName];
+
+			return Object.assign(acc, {
+				[componentName]: Object.keys(componentThemes)
+					.reduce((acc, theme) =>
+						Object.assign(acc, { [theme]: componentsThemeToStyle(componentThemes[theme]) }),
+						{})
+			})
+		},
+		{}
+	);
+};
+
+const componentsThemeToStyle = (componentsTheme) =>
+	Object.entries(componentsTheme).reduce(
 		(acc, [selector, vars]) =>
-			(acc += `*[data-theme="${themeName}"] ${selector} { \n${Object.entries(
-				vars
-			)
-				.map(([key, val]) => `${key}: ${val}`)
-				.join(';\n')} \n}\n\n`),
+		(acc += `${selector} { \n${Object.entries(
+			vars
+		)
+			.map(([key, val]) => `${key}: ${val}`)
+			.join(';\n')} \n}\n\n`),
 		''
 	);
 
-const themeToStyle = ({ globals, components }, themeName) => `
-${globalsThemeToStyle(globals, themeName)}
-${componentsThemeToStyle(components, themeName)}
-`;
+const themeToStyle = ({ globals, components }, themeName) => ({
+	globals: globalsThemeToStyle(globals, themeName),
+	components: createComponentsTheme(components)
+});
 
 const useVar = (varName) => `var(${varName})`;
 
@@ -122,7 +195,8 @@ const createHelperVars = (theme, prefix) => {
 	return [res.theme, res.useVars, res.vars];
 };
 
-exports.componentsThemeToStyle = componentsThemeToStyle;
+exports.componentsThemeManager = componentsThemeManager;
+exports.createComponentsTheme = createComponentsTheme;
 exports.createHelperVars = createHelperVars;
 exports.getThemeRefs = getThemeRefs;
 exports.globalsThemeToStyle = globalsThemeToStyle;

package/dist/cjs/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../src/constants.js","../../src/helpers.js","../../src/componentsHelpers/index.js","../../src/themeHelpers/index.js"],"sourcesContent":["export const DESCOPE_PREFIX = 'descope';\n","export const kebabCase = (str) =>\n\tstr\n\t\t.replace(/([a-z])([A-Z])/g, '$1-$2')\n\t\t.replace(/[\\s_.]+/g, '-')\n\t\t.toLowerCase();\n\nexport const kebabCaseJoin = (...args) => kebabCase(args.join('-'));\n\nexport const getCssVarName = (...args) =>\n\t`--${kebabCaseJoin(...args.filter((arg) => !!arg))}`;\n","import { DESCOPE_PREFIX } from '../constants';\nimport { kebabCaseJoin } from '../helpers';\n\nexport const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);\n\nexport { createStyleMixin } from './createStyleMixin';\nexport { draggableMixin } from './draggableMixin';\nexport { createProxy } from './createProxy';\nexport { proxyInputMixin } from './proxyInputMixin';\nexport { componentNameValidationMixin } from './componentNameValidationMixin';\nexport { default as compose } from './compose'","import merge from 'lodash.merge';\nimport set from 'lodash.set';\nimport { DESCOPE_PREFIX } from '../constants';\nimport { getCssVarName, kebabCase } from '../helpers';\nimport { getComponentName } from '../componentsHelpers';\n\nconst getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);\n\nconst transformTheme = (theme, path, getTransformation) => {\n\treturn Object.entries(theme).reduce((acc, [key, val]) => {\n\t\tif (val?.constructor !== Object) {\n\t\t\treturn merge(acc, getTransformation(path.concat(key), val));\n\t\t} else {\n\t\t\treturn merge(acc, transformTheme(val, [...path, key], getTransformation));\n\t\t}\n\t}, {});\n};\n\nconst stringifyArray = (strArr) =>\n\tstrArr.map((str) => (str.includes(' ') ? `\"${str}\"` : str)).join(', ');\n\nexport const themeToCSSVarsObj = (theme) =>\n\ttransformTheme(theme, [], (path, val) => ({\n\t\t[getVarName(path)]: Array.isArray(val) ? stringifyArray(val) : val\n\t}));\n\nexport const getThemeRefs = (theme, prefix) =>\n\ttransformTheme(theme, [], (path) =>\n\t\tset({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)\n\t);\n\nexport const globalsThemeToStyle = (theme, themeName = '') => `\n*[data-theme=\"${themeName}\"] {\n\t${Object.entries(themeToCSSVarsObj(theme)).reduce(\n\t\t(acc, entry) => (acc += `${entry.join(':')};\\n`),\n\t\t''\n\t)}\n}\n`;\n\nconst componentsThemeToStyleObj = (componentsTheme) =>\n\ttransformTheme(componentsTheme, [], (path, val) => {\n\t\tconst [component, ...restPath] = path;\n\t\tconst property = restPath.pop();\n\n\t\t// do not start with underscore -> key:value, must have 2 no underscore attrs in a row\n\t\t// starts with underscore -> attribute selector\n\n\t\tconst attrsSelector = restPath.reduce((acc, section, idx) => {\n\t\t\tif (section.startsWith('_'))\n\t\t\t\treturn (acc += `[${kebabCase(section.replace(/^_/, ''))}=\"true\"]`);\n\n\t\t\tconst nextSection = restPath[idx + 1];\n\n\t\t\tif (typeof nextSection !== 'string' || nextSection.startsWith('_')) {\n\t\t\t\tconsole.error(\n\t\t\t\t\t'theme generator',\n\t\t\t\t\t`your theme structure is invalid, attribute \"${section}\" is followed by \"${nextSection}\" which is not allowed`\n\t\t\t\t);\n\t\t\t\treturn acc;\n\t\t\t}\n\n\t\t\treturn (acc += `[${kebabCase(section)}=\"${restPath\n\t\t\t\t.splice(idx + 1, 1)\n\t\t\t\t.join('')}\"]`);\n\t\t}, '');\n\n\t\tlet selector = `${getComponentName(component)}${attrsSelector}`;\n\n\t\treturn {\n\t\t\t[selector]: {\n\t\t\t\t[property]: val\n\t\t\t}\n\t\t};\n\t});\n\nexport const componentsThemeToStyle = (componentsTheme, themeName = '') =>\n\tObject.entries(componentsThemeToStyleObj(componentsTheme)).reduce(\n\t\t(acc, [selector, vars]) =>\n\t\t\t(acc += `*[data-theme=\"${themeName}\"] ${selector} { \\n${Object.entries(\n\t\t\t\tvars\n\t\t\t)\n\t\t\t\t.map(([key, val]) => `${key}: ${val}`)\n\t\t\t\t.join(';\\n')} \\n}\\n\\n`),\n\t\t''\n\t);\n\nexport const themeToStyle = ({ globals, components }, themeName) => `\n${globalsThemeToStyle(globals, themeName)}\n${componentsThemeToStyle(components, themeName)}\n`;\n\nconst useVar = (varName) => `var(${varName})`;\n\nexport const createHelperVars = (theme, prefix) => {\n\tconst res = transformTheme(theme, [], (path, value) => {\n\t\tconst modifiedPath = [...path];\n\t\tconst property = modifiedPath.splice(-1);\n\t\tconst varName = getCssVarName(prefix, property);\n\n\t\tconst vars = { [property]: varName };\n\t\tconst theme = set({}, [...modifiedPath, varName], value);\n\t\tconst useVars = { [property]: useVar(varName) };\n\n\t\treturn { theme, useVars, vars };\n\t});\n\n\treturn [res.theme, res.useVars, res.vars];\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.cjs.js","sources":["../../src/constants.js","../../src/helpers/index.js","../../src/helpers/componentHelpers.js","../../src/helpers/themeHelpers/componentsThemeManager.js","../../src/helpers/themeHelpers/index.js"],"sourcesContent":["export const DESCOPE_PREFIX = 'descope';\nexport const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3","\nexport const kebabCase = (str) =>\n\tstr\n\t\t.replace(/([a-z])([A-Z])/g, '$1-$2')\n\t\t.replace(/[\\s_.]+/g, '-')\n\t\t.toLowerCase();\n\nexport const kebabCaseJoin = (...args) => kebabCase(args.join('-'));\n\nexport const compose = (...fns) =>\n\t(val) =>\n\t\tfns.reduceRight((res, fn) => fn(res), val);\n\n","import { kebabCaseJoin } from '.';\nimport { DESCOPE_PREFIX } from '../constants';\n\nconst observeAttributes = (\n\tele,\n\tcallback,\n\t{ excludeAttrs = [], includeAttrs = [] }\n) => {\n\t// sync all attrs on init\n\tcallback(\n\t\t...Array.from(ele.attributes)\n\t\t\t.filter(\n\t\t\t\t(attr) =>\n\t\t\t\t\t!excludeAttrs.includes(attr.name) &&\n\t\t\t\t\t(!includeAttrs.length || includeAttrs.includes(attr.name))\n\t\t\t)\n\t\t\t.map((attr) => attr.name)\n\t);\n\n\tconst observer = new MutationObserver((mutationsList) => {\n\t\tfor (const mutation of mutationsList) {\n\t\t\tif (\n\t\t\t\tmutation.type === 'attributes' &&\n\t\t\t\t!excludeAttrs.includes(mutation.attributeName) &&\n\t\t\t\t(!includeAttrs.length || includeAttrs.includes(mutation.attributeName))\n\t\t\t) {\n\t\t\t\tcallback([mutation.attributeName]);\n\t\t\t}\n\t\t}\n\t});\n\n\tobserver.observe(ele, { attributes: true });\n};\n\nconst createSyncAttrsCb =\n\t(srcEle, targetEle, mapAttrs = {}) =>\n\t(...attrNames) => {\n\t\tattrNames.forEach((attrName) => {\n\t\t\tconst targetAttrName = mapAttrs[attrName] || attrName;\n\t\t\tconst srcAttrVal = srcEle.getAttribute(attrName);\n\t\t\tif (srcAttrVal !== null) {\n\t\t\t\tif (targetEle.getAttribute(targetAttrName) !== srcAttrVal) {\n\t\t\t\t\ttargetEle.setAttribute(targetAttrName, srcAttrVal);\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\ttargetEle.removeAttribute(targetAttrName);\n\t\t\t}\n\t\t});\n\t};\n\nexport const syncAttrs = (ele1, ele2, options) => {\n\tobserveAttributes(ele1, createSyncAttrsCb(ele1, ele2), options);\n\tobserveAttributes(ele2, createSyncAttrsCb(ele2, ele1), options);\n};\n\nexport const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);\n\nexport const getCssVarName = (...args) =>\n  `--${kebabCaseJoin(...args.filter((arg) => !!arg))}`;\n\nexport const forwardAttrs = (source, dest, options = {}) => {\n  observeAttributes(\n    source,\n    createSyncAttrsCb(source, dest, options.mapAttrs),\n    options\n  );\n};\n\nexport const forwardProps = (src, target, props = []) => {\n\tif(!props.length) return;\n\n\tconst config = props.reduce((acc, prop) => Object.assign(acc, {[prop] : {\n\t\tget () {\n\t\t\treturn target[prop]\n\t\t},\n\t\tset (v) {\n\t\t\ttarget[prop] = v\n\t\t}\n\t}}), {})\n\n\tObject.defineProperties(src, config)\n}\n","\nclass ComponentsThemeManager {\n  static mountOnPropName = 'DescopeThemeManager';\n\n  #themes = {};\n\n  #currentThemeName = 'light';\n\n  #callbacks = new Set();\n\n  #notify() {\n    this.#callbacks.forEach(cb => cb?.());\n  };\n\n  get currentThemeName() {\n    return this.#currentThemeName;\n  }\n\n  set currentThemeName(themeName) {\n    this.#currentThemeName = themeName;\n    this.#notify();\n  }\n\n  get currentTheme() {\n    return this.#themes[this.currentThemeName];\n  }\n\n  onCurrentThemeChange(cb) {\n    this.#callbacks.add(cb);\n\n    return () => { this.#callbacks.delete(cb); };\n  };\n\n  set themes(themes) {\n    this.#themes = themes;\n    this.#notify();\n  }\n}\n\nexport const componentsThemeManager = new ComponentsThemeManager()\n","import merge from 'lodash.merge';\nimport set from 'lodash.set';\nimport { DESCOPE_PREFIX } from '../../constants';\nimport { kebabCase } from '..';\nimport { getComponentName, getCssVarName } from '../componentHelpers';\n\nconst getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);\n\nconst transformTheme = (theme, path, getTransformation) => {\n\treturn Object.entries(theme).reduce((acc, [key, val]) => {\n\t\tif (val?.constructor !== Object) {\n\t\t\treturn merge(acc, getTransformation(path.concat(key), val));\n\t\t} else {\n\t\t\treturn merge(acc, transformTheme(val, [...path, key], getTransformation));\n\t\t}\n\t}, {});\n};\n\nconst stringifyArray = (strArr) =>\n\tstrArr.map((str) => (str.includes(' ') ? `\"${str}\"` : str)).join(', ');\n\nexport const themeToCSSVarsObj = (theme) =>\n\ttransformTheme(theme, [], (path, val) => ({\n\t\t[getVarName(path)]: Array.isArray(val) ? stringifyArray(val) : val\n\t}));\n\nexport const getThemeRefs = (theme, prefix) =>\n\ttransformTheme(theme, [], (path) =>\n\t\tset({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)\n\t);\n\nexport const globalsThemeToStyle = (theme, themeName = '') => `\n*[data-theme=\"${themeName}\"] {\n\t${Object.entries(themeToCSSVarsObj(theme)).reduce(\n\t(acc, entry) => (acc += `${entry.join(':')};\\n`),\n\t''\n)}\n}\n`;\n\nconst componentsThemeToStyleObj = (componentsTheme) =>\n\ttransformTheme(componentsTheme, [], (path, val) => {\n\t\tconst [component, ...restPath] = path;\n\t\tconst property = restPath.pop();\n\t\tconst componentName = getComponentName(component);\n\n\t\t// we need a support for portal components theme (e.g. overlay)\n\t\t// this allows us to generate those themes under different sections\n\t\t// if the theme has root level attribute that starts with #\n\t\t// we are generating a new theme\n\t\tlet themeName = 'theme'\n\n\t\tif (restPath[0] && restPath[0].startsWith('#')) {\n\t\t\tthemeName = restPath.shift();\n\t\t}\n\n\t\t// do not start with underscore -> key:value, must have 2 no underscore attrs in a row\n\t\t// starts with underscore -> attribute selector\n\t\tconst attrsSelector = restPath.reduce((acc, section, idx) => {\n\t\t\tif (section.startsWith('_'))\n\t\t\t\treturn (acc += `[${kebabCase(section.replace(/^_/, ''))}=\"true\"]`);\n\n\t\t\tconst nextSection = restPath[idx + 1];\n\n\t\t\tif (typeof nextSection !== 'string' || nextSection.startsWith('_')) {\n\t\t\t\tconsole.error(\n\t\t\t\t\t'theme generator',\n\t\t\t\t\t`your theme structure is invalid, attribute \"${section}\" is followed by \"${nextSection}\" which is not allowed`\n\t\t\t\t);\n\t\t\t\treturn acc;\n\t\t\t}\n\n\t\t\treturn (acc += `[${kebabCase(section)}=\"${restPath\n\t\t\t\t.splice(idx + 1, 1)\n\t\t\t\t.join('')}\"]`);\n\t\t}, '');\n\n\t\tlet selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;\n\n\t\treturn {\n\t\t\t[componentName]: {\n\t\t\t\t[themeName]: {\n\t\t\t\t\t[selector]: {\n\t\t\t\t\t\t[property]: val\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\t});\n\n\nexport const createComponentsTheme = (componentsTheme) => {\n\tconst styleObj = componentsThemeToStyleObj(componentsTheme);\n\n\treturn Object.keys(styleObj).reduce(\n\t\t(acc, componentName) => {\n\t\t\tconst componentThemes = styleObj[componentName];\n\n\t\t\treturn Object.assign(acc, {\n\t\t\t\t[componentName]: Object.keys(componentThemes)\n\t\t\t\t\t.reduce((acc, theme) =>\n\t\t\t\t\t\tObject.assign(acc, { [theme]: componentsThemeToStyle(componentThemes[theme]) }),\n\t\t\t\t\t\t{})\n\t\t\t})\n\t\t},\n\t\t{}\n\t);\n}\n\nconst componentsThemeToStyle = (componentsTheme) =>\n\tObject.entries(componentsTheme).reduce(\n\t\t(acc, [selector, vars]) =>\n\t\t(acc += `${selector} { \\n${Object.entries(\n\t\t\tvars\n\t\t)\n\t\t\t.map(([key, val]) => `${key}: ${val}`)\n\t\t\t.join(';\\n')} \\n}\\n\\n`),\n\t\t''\n\t);\n\nexport const themeToStyle = ({ globals, components }, themeName) => ({\n\tglobals: globalsThemeToStyle(globals, themeName),\n\tcomponents: createComponentsTheme(components)\n});\n\nconst useVar = (varName) => `var(${varName})`;\n\nexport const createHelperVars = (theme, prefix) => {\n\tconst res = transformTheme(theme, [], (path, value) => {\n\t\tconst modifiedPath = [...path];\n\t\tconst property = modifiedPath.splice(-1);\n\t\tconst varName = getCssVarName(prefix, property);\n\n\t\tconst vars = { [property]: varName };\n\t\tconst theme = set({}, [...modifiedPath, varName], value);\n\t\tconst useVars = { [property]: useVar(varName) };\n\n\t\treturn { theme, useVars, vars };\n\t});\n\n\treturn [res.theme, res.useVars, res.vars];\n};\n\nexport { componentsThemeManager } from './componentsThemeManager'\n"],"names":[],"mappings":"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"}