@descope/web-components-ui 1.0.35 → 1.0.37
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +23 -4
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +325 -103
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/313.js +1 -0
- package/dist/umd/599.js +1 -1
- package/dist/umd/97.js +1 -0
- package/dist/umd/descope-button-index-js.js +1 -0
- package/dist/umd/{descope-combo-js.js → descope-combo-index-js.js} +1 -1
- package/dist/umd/descope-container-index-js.js +1 -0
- package/dist/umd/descope-date-picker-index-js.js +1 -0
- package/dist/umd/descope-text-field-index-js.js +1 -0
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
- package/src/components/{descope-button.js → descope-button/Button.js} +5 -7
- package/src/components/descope-button/index.js +6 -0
- package/src/components/{descope-combo.js → descope-combo/index.js} +3 -3
- package/src/components/descope-container/Container.js +57 -0
- package/src/components/descope-container/index.js +5 -0
- package/src/components/{descope-date-picker.js → descope-date-picker/index.js} +3 -2
- package/src/components/{descope-text-field.js → descope-text-field/TextField.js} +5 -6
- package/src/components/descope-text-field/index.js +6 -0
- package/src/componentsHelpers/componentNameValidationMixin.js +21 -0
- package/src/componentsHelpers/createProxy/index.js +1 -9
- package/src/componentsHelpers/createStyleMixin/helpers.js +7 -5
- package/src/componentsHelpers/createStyleMixin/index.js +39 -3
- package/src/componentsHelpers/draggableMixin.js +2 -2
- package/src/componentsHelpers/index.js +1 -0
- package/src/componentsHelpers/inputMixin.js +1 -1
- package/src/helpers.js +1 -1
- package/src/index.js +1 -0
- package/src/index.umd.js +5 -2
- package/src/theme/components/button.js +36 -35
- package/src/theme/components/container.js +94 -0
- package/src/theme/components/index.js +3 -1
- package/src/theme/components/textField.js +27 -24
- package/src/theme/globals.js +2 -0
- package/src/theme/index.js +1 -1
- package/src/themeHelpers/index.js +23 -5
- package/dist/umd/146.js +0 -1
- package/dist/umd/descope-button-js.js +0 -1
- package/dist/umd/descope-date-picker-js.js +0 -1
- package/dist/umd/descope-text-field-js.js +0 -1
@@ -1,22 +1,58 @@
|
|
1
|
+
import { getCssVarName, kebabCaseJoin } from '../../helpers';
|
1
2
|
import { createStyle, createCssVarsList } from './helpers';
|
2
3
|
|
3
4
|
export const createStyleMixin = ({ mappings = {} }) => (superclass) => {
|
5
|
+
const styleAttributes = Object.keys(mappings).map(key => kebabCaseJoin('st', key))
|
4
6
|
return class CustomStyleMixinClass extends superclass {
|
7
|
+
static get observedAttributes() {
|
8
|
+
const superAttrs = superclass.observedAttributes || []
|
9
|
+
return [...superAttrs, ...styleAttributes]
|
10
|
+
}
|
11
|
+
|
5
12
|
static get cssVarList() {
|
6
13
|
return createCssVarsList(superclass.componentName, mappings)
|
7
14
|
}
|
8
|
-
|
15
|
+
|
16
|
+
#styleEle = null;
|
17
|
+
|
9
18
|
constructor() {
|
10
19
|
super();
|
11
20
|
|
12
21
|
this.#createComponentStyle()
|
22
|
+
this.#createAttrOverrideStyle()
|
23
|
+
}
|
24
|
+
|
25
|
+
#createAttrOverrideStyle() {
|
26
|
+
this.#styleEle = document.createElement('style');
|
27
|
+
this.#styleEle.id = 'style-mixin-overrides'
|
28
|
+
|
29
|
+
this.#styleEle.innerText = '* {}'
|
30
|
+
this.shadowRoot.prepend(this.#styleEle);
|
31
|
+
}
|
32
|
+
|
33
|
+
#updateAttrOverrideStyle(attrName, value) {
|
34
|
+
const style = this.#styleEle.sheet.cssRules[0].style;
|
35
|
+
const varName = getCssVarName(superclass.componentName, attrName.replace(/^st-/, ''))
|
36
|
+
|
37
|
+
if (value)
|
38
|
+
style.setProperty(varName, value)
|
39
|
+
else
|
40
|
+
style.removeProperty(varName)
|
13
41
|
}
|
14
42
|
|
15
43
|
#createComponentStyle() {
|
16
44
|
const themeStyle = document.createElement('style');
|
17
|
-
themeStyle.id = 'style-mixin'
|
18
|
-
themeStyle.innerHTML = createStyle(
|
45
|
+
themeStyle.id = 'style-mixin-component'
|
46
|
+
themeStyle.innerHTML = createStyle(superclass.componentName, baseSelector, mappings)
|
19
47
|
this.shadowRoot.prepend(themeStyle);
|
20
48
|
}
|
49
|
+
|
50
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
51
|
+
super.attributeChangedCallback?.(attrName, oldValue, newValue);
|
52
|
+
|
53
|
+
if (styleAttributes.includes(attrName)) {
|
54
|
+
this.#updateAttrOverrideStyle(attrName, newValue)
|
55
|
+
}
|
56
|
+
}
|
21
57
|
}
|
22
58
|
}
|
@@ -12,7 +12,7 @@ export const draggableMixin = (superclass) =>
|
|
12
12
|
super();
|
13
13
|
|
14
14
|
this.#styleEle = document.createElement('style');
|
15
|
-
this.#styleEle.innerText = `${this.
|
15
|
+
this.#styleEle.innerText = `${this.baseSelector} { cursor: inherit }`;
|
16
16
|
}
|
17
17
|
|
18
18
|
#handleDraggableStyle(isDraggable) {
|
@@ -24,7 +24,7 @@ export const draggableMixin = (superclass) =>
|
|
24
24
|
}
|
25
25
|
|
26
26
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
27
|
-
super.attributeChangedCallback(attrName, oldValue, newValue);
|
27
|
+
super.attributeChangedCallback?.(attrName, oldValue, newValue);
|
28
28
|
if (attrName === 'draggable') {
|
29
29
|
this.#handleDraggableStyle(newValue === 'true')
|
30
30
|
}
|
@@ -9,3 +9,4 @@ export { createStyleMixin } from './createStyleMixin'
|
|
9
9
|
export { draggableMixin } from './draggableMixin'
|
10
10
|
export { createProxy } from './createProxy'
|
11
11
|
export { inputMixin } from './inputMixin'
|
12
|
+
export { componentNameValidationMixin } from './componentNameValidationMixin'
|
@@ -22,7 +22,7 @@ export const inputMixin = (superclass) =>
|
|
22
22
|
}
|
23
23
|
|
24
24
|
connectedCallback() {
|
25
|
-
super.connectedCallback();
|
25
|
+
super.connectedCallback?.();
|
26
26
|
|
27
27
|
// vaadin does not expose all those validation attributes so we need to take it from the input
|
28
28
|
// https://github.com/vaadin/web-components/issues/1177
|
package/src/helpers.js
CHANGED
@@ -5,4 +5,4 @@ export const kebabCase = str => str
|
|
5
5
|
|
6
6
|
export const kebabCaseJoin = (...args) => kebabCase(args.join('-'))
|
7
7
|
|
8
|
-
export const getCssVarName = (...args) => `--${kebabCaseJoin(...args)}`
|
8
|
+
export const getCssVarName = (...args) => `--${kebabCaseJoin(...args.filter(arg => !!arg))}`
|
package/src/index.js
CHANGED
@@ -2,6 +2,7 @@ import "./components/descope-button";
|
|
2
2
|
import "./components/descope-combo";
|
3
3
|
import "./components/descope-text-field";
|
4
4
|
import "./components/descope-date-picker";
|
5
|
+
import "./components/descope-container";
|
5
6
|
|
6
7
|
export { globalsThemeToStyle, componentsThemeToStyle, themeToStyle } from './themeHelpers'
|
7
8
|
export { genColor } from './themeHelpers/processColors'
|
package/src/index.umd.js
CHANGED
@@ -1,6 +1,9 @@
|
|
1
|
-
const components = import.meta.webpackContext('./components', { recursive: true, regExp:
|
1
|
+
const components = import.meta.webpackContext('./components', { recursive: true, regExp: /index.js$/, mode: 'lazy', chunkName: '[request]', prefetch: true });
|
2
|
+
|
3
|
+
// all components must be in a folder with the component name, and have an index.js file
|
4
|
+
// e.g. ./descope-button/index.js
|
2
5
|
module.exports = components.keys().reduce((acc, key) => {
|
3
|
-
const componentName = key.replace(/.*?([^\/]+)\.js$/, '$1')
|
6
|
+
const componentName = key.replace(/.*?([^\/]+)\/index\.js$/, '$1')
|
4
7
|
acc[componentName] = () => components(key)
|
5
8
|
|
6
9
|
return acc;
|
@@ -1,7 +1,9 @@
|
|
1
1
|
import globals from "../globals";
|
2
|
-
import { getThemeRefs } from "../../themeHelpers";
|
2
|
+
import { getThemeRefs, createHelperVars } from "../../themeHelpers";
|
3
|
+
import Button, { componentName } from "../../components/descope-button/Button";
|
3
4
|
|
4
5
|
const globalRefs = getThemeRefs(globals);
|
6
|
+
const vars = Button.cssVarList
|
5
7
|
|
6
8
|
const mode = {
|
7
9
|
primary: {
|
@@ -16,69 +18,68 @@ const mode = {
|
|
16
18
|
surface: globalRefs.colors.surface,
|
17
19
|
}
|
18
20
|
|
19
|
-
const
|
21
|
+
const [helperTheme, helperRefs] = createHelperVars({ mode }, componentName)
|
20
22
|
|
21
23
|
const button = {
|
22
|
-
|
23
|
-
|
24
|
-
|
24
|
+
...helperTheme,
|
25
|
+
[vars.borderRadius]: globalRefs.radius.lg,
|
26
|
+
[vars.cursor]: 'pointer',
|
27
|
+
|
25
28
|
size: {
|
26
29
|
xs: {
|
27
|
-
height: '10px',
|
28
|
-
fontSize: '10px',
|
29
|
-
padding: `0 ${globalRefs.spacing.xs}`
|
30
|
+
[vars.height]: '10px',
|
31
|
+
[vars.fontSize]: '10px',
|
32
|
+
[vars.padding]: `0 ${globalRefs.spacing.xs}`
|
30
33
|
},
|
31
34
|
sm: {
|
32
|
-
height: '20px',
|
33
|
-
fontSize: '10px',
|
34
|
-
padding: `0 ${globalRefs.spacing.sm}`
|
35
|
+
[vars.height]: '20px',
|
36
|
+
[vars.fontSize]: '10px',
|
37
|
+
[vars.padding]: `0 ${globalRefs.spacing.sm}`
|
35
38
|
},
|
36
39
|
md: {
|
37
|
-
height: '30px',
|
38
|
-
fontSize: '14px',
|
39
|
-
padding: `0 ${globalRefs.spacing.md}`
|
40
|
+
[vars.height]: '30px',
|
41
|
+
[vars.fontSize]: '14px',
|
42
|
+
[vars.padding]: `0 ${globalRefs.spacing.md}`
|
40
43
|
},
|
41
44
|
lg: {
|
42
|
-
height: '40px',
|
43
|
-
fontSize: '20px',
|
44
|
-
padding: `0 ${globalRefs.spacing.lg}`
|
45
|
+
[vars.height]: '40px',
|
46
|
+
[vars.fontSize]: '20px',
|
47
|
+
[vars.padding]: `0 ${globalRefs.spacing.lg}`
|
45
48
|
},
|
46
49
|
xl: {
|
47
|
-
height: '50px',
|
48
|
-
fontSize: '25px',
|
49
|
-
padding: `0 ${globalRefs.spacing.xl}`
|
50
|
+
[vars.height]: '50px',
|
51
|
+
[vars.fontSize]: '25px',
|
52
|
+
[vars.padding]: `0 ${globalRefs.spacing.xl}`
|
50
53
|
},
|
51
54
|
},
|
52
55
|
|
53
|
-
|
54
|
-
width: '100%'
|
56
|
+
_fullWidth: {
|
57
|
+
[vars.width]: '100%'
|
55
58
|
},
|
56
59
|
|
57
|
-
mode,
|
58
|
-
|
59
60
|
variant: {
|
60
61
|
contained: {
|
61
|
-
color:
|
62
|
-
backgroundColor:
|
62
|
+
[vars.color]: helperRefs.contrast,
|
63
|
+
[vars.backgroundColor]: helperRefs.main,
|
63
64
|
_hover: {
|
64
|
-
backgroundColor:
|
65
|
+
[vars.backgroundColor]: helperRefs.dark,
|
65
66
|
},
|
66
67
|
},
|
67
68
|
outline: {
|
68
|
-
color:
|
69
|
-
borderColor:
|
70
|
-
borderWidth: '2px',
|
71
|
-
borderStyle: 'solid',
|
69
|
+
[vars.color]: helperRefs.main,
|
70
|
+
[vars.borderColor]: helperRefs.main,
|
71
|
+
[vars.borderWidth]: '2px',
|
72
|
+
[vars.borderStyle]: 'solid',
|
72
73
|
_hover: {
|
73
|
-
color:
|
74
|
-
borderColor:
|
74
|
+
[vars.color]: helperRefs.dark,
|
75
|
+
[vars.borderColor]: helperRefs.dark,
|
75
76
|
_error: {
|
76
|
-
color: 'red',
|
77
|
+
[vars.color]: 'red',
|
77
78
|
}
|
78
79
|
}
|
79
80
|
},
|
80
81
|
link: {
|
81
|
-
color:
|
82
|
+
[vars.color]: helperRefs.main,
|
82
83
|
},
|
83
84
|
}
|
84
85
|
};
|
@@ -0,0 +1,94 @@
|
|
1
|
+
import globals from "../globals";
|
2
|
+
import { getThemeRefs, createHelperVars } from "../../themeHelpers";
|
3
|
+
import Container from "../../components/descope-container/Container";
|
4
|
+
|
5
|
+
const globalRefs = getThemeRefs(globals);
|
6
|
+
|
7
|
+
const vars = Container.cssVarList
|
8
|
+
|
9
|
+
const verticalAlignment = {
|
10
|
+
start: { verticalAlignment: 'start' },
|
11
|
+
center: { verticalAlignment: 'center' },
|
12
|
+
end: { verticalAlignment: 'end' },
|
13
|
+
}
|
14
|
+
|
15
|
+
const horizontalAlignment = {
|
16
|
+
start: { horizontalAlignment: 'start' },
|
17
|
+
center: { horizontalAlignment: 'center' },
|
18
|
+
end: { horizontalAlignment: 'end' },
|
19
|
+
}
|
20
|
+
|
21
|
+
const [helperTheme, helperVars, helperRefs] =
|
22
|
+
createHelperVars({ verticalAlignment, horizontalAlignment }, 'container')
|
23
|
+
|
24
|
+
const container = {
|
25
|
+
...helperTheme,
|
26
|
+
[vars.display]: 'flex',
|
27
|
+
verticalPadding: {
|
28
|
+
sm: { [vars.verticalPadding]: '5px' },
|
29
|
+
md: { [vars.verticalPadding]: '10px' },
|
30
|
+
lg: { [vars.verticalPadding]: '20px' },
|
31
|
+
},
|
32
|
+
horizontalPadding: {
|
33
|
+
sm: { [vars.horizontalPadding]: '5px' },
|
34
|
+
md: { [vars.horizontalPadding]: '10px' },
|
35
|
+
lg: { [vars.horizontalPadding]: '20px' },
|
36
|
+
},
|
37
|
+
direction: {
|
38
|
+
row: {
|
39
|
+
[vars.flexDirection]: 'row',
|
40
|
+
[vars.alignItems]: helperRefs.verticalAlignment,
|
41
|
+
[vars.justifyContent]: helperRefs.horizontalAlignment,
|
42
|
+
horizontalAlignment: {
|
43
|
+
spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' },
|
44
|
+
}
|
45
|
+
},
|
46
|
+
|
47
|
+
column: {
|
48
|
+
[vars.flexDirection]: 'column',
|
49
|
+
[vars.alignItems]: helperRefs.horizontalAlignment,
|
50
|
+
[vars.justifyContent]: helperRefs.verticalAlignment,
|
51
|
+
verticalAlignment: {
|
52
|
+
spaceBetween: { [helperVars.verticalAlignment]: 'space-between' }
|
53
|
+
}
|
54
|
+
},
|
55
|
+
},
|
56
|
+
|
57
|
+
spaceBetween: {
|
58
|
+
sm: {
|
59
|
+
[vars.gap]: '10px'
|
60
|
+
},
|
61
|
+
md: {
|
62
|
+
[vars.gap]: '20px'
|
63
|
+
},
|
64
|
+
lg: {
|
65
|
+
[vars.gap]: '30px'
|
66
|
+
}
|
67
|
+
},
|
68
|
+
|
69
|
+
shadow: {
|
70
|
+
sm: {
|
71
|
+
[vars.boxShadow]: `${globalRefs.shadow.size.sm} ${globalRefs.shadow.color}`
|
72
|
+
},
|
73
|
+
md: {
|
74
|
+
[vars.boxShadow]: `${globalRefs.shadow.size.md} ${globalRefs.shadow.color}`
|
75
|
+
},
|
76
|
+
lg: {
|
77
|
+
[vars.boxShadow]: `${globalRefs.shadow.size.lg} ${globalRefs.shadow.color}`
|
78
|
+
},
|
79
|
+
},
|
80
|
+
|
81
|
+
borderRadius: {
|
82
|
+
sm: {
|
83
|
+
[vars.borderRadius]: globalRefs.radius.sm
|
84
|
+
},
|
85
|
+
md: {
|
86
|
+
[vars.borderRadius]: globalRefs.radius.md
|
87
|
+
},
|
88
|
+
lg: {
|
89
|
+
[vars.borderRadius]: globalRefs.radius.lg
|
90
|
+
},
|
91
|
+
}
|
92
|
+
};
|
93
|
+
|
94
|
+
export default container;
|
@@ -1,47 +1,50 @@
|
|
1
1
|
import globals from "../globals";
|
2
2
|
import { getThemeRefs } from "../../themeHelpers";
|
3
|
+
import TextField from '../../components/descope-text-field/TextField';
|
3
4
|
|
4
5
|
const globalRefs = getThemeRefs(globals);
|
5
6
|
|
7
|
+
const vars = TextField.cssVarList;
|
8
|
+
|
6
9
|
const textField = {
|
7
|
-
borderRadius: globalRefs.radius.lg,
|
8
|
-
color: globalRefs.colors.surface.contrast,
|
9
|
-
backgroundColor: globalRefs.colors.surface.light,
|
10
|
-
borderWidth: globalRefs.border.small,
|
11
|
-
borderStyle: 'solid',
|
12
|
-
borderColor: globalRefs.colors.surface.dark,
|
13
|
-
labelColor: globalRefs.colors.surface.contrast,
|
14
|
-
placeholderColor: globalRefs.colors.surface.dark,
|
10
|
+
[vars.borderRadius]: globalRefs.radius.lg,
|
11
|
+
[vars.color]: globalRefs.colors.surface.contrast,
|
12
|
+
[vars.backgroundColor]: globalRefs.colors.surface.light,
|
13
|
+
[vars.borderWidth]: globalRefs.border.small,
|
14
|
+
[vars.borderStyle]: 'solid',
|
15
|
+
[vars.borderColor]: globalRefs.colors.surface.dark,
|
16
|
+
[vars.labelColor]: globalRefs.colors.surface.contrast,
|
17
|
+
[vars.placeholderColor]: globalRefs.colors.surface.dark,
|
15
18
|
_invalid: {
|
16
|
-
backgroundColor: globalRefs.colors.error.light,
|
17
|
-
borderColor: globalRefs.colors.error.dark,
|
19
|
+
[vars.backgroundColor]: globalRefs.colors.error.light,
|
20
|
+
[vars.borderColor]: globalRefs.colors.error.dark,
|
18
21
|
},
|
19
22
|
|
20
23
|
size: {
|
21
24
|
sm: {
|
22
|
-
height: '20px',
|
23
|
-
fontSize: '10px',
|
24
|
-
padding: `0 ${globalRefs.spacing.xs}`
|
25
|
+
[vars.height]: '20px',
|
26
|
+
[vars.fontSize]: '10px',
|
27
|
+
[vars.padding]: `0 ${globalRefs.spacing.xs}`
|
25
28
|
},
|
26
29
|
md: {
|
27
|
-
height: '30px',
|
28
|
-
fontSize: '14px',
|
29
|
-
padding: `0 ${globalRefs.spacing.sm}`
|
30
|
+
[vars.height]: '30px',
|
31
|
+
[vars.fontSize]: '14px',
|
32
|
+
[vars.padding]: `0 ${globalRefs.spacing.sm}`
|
30
33
|
},
|
31
34
|
lg: {
|
32
|
-
height: '40px',
|
33
|
-
fontSize: '20px',
|
34
|
-
padding: `0 ${globalRefs.spacing.sm}`
|
35
|
+
[vars.height]: '40px',
|
36
|
+
[vars.fontSize]: '20px',
|
37
|
+
[vars.padding]: `0 ${globalRefs.spacing.sm}`
|
35
38
|
},
|
36
39
|
xl: {
|
37
|
-
height: '50px',
|
38
|
-
fontSize: '25px',
|
39
|
-
padding: `0 ${globalRefs.spacing.md}`
|
40
|
+
[vars.height]: '50px',
|
41
|
+
[vars.fontSize]: '25px',
|
42
|
+
[vars.padding]: `0 ${globalRefs.spacing.md}`
|
40
43
|
},
|
41
44
|
},
|
42
45
|
|
43
|
-
|
44
|
-
width: '100%'
|
46
|
+
_fullWidth: {
|
47
|
+
[vars.width]: '100%'
|
45
48
|
},
|
46
49
|
};
|
47
50
|
|
package/src/theme/globals.js
CHANGED
package/src/theme/index.js
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
import merge from "lodash.merge";
|
2
2
|
import set from "lodash.set";
|
3
3
|
import { DESCOPE_PREFIX } from "../constants";
|
4
|
-
import { getCssVarName } from "../helpers";
|
4
|
+
import { getCssVarName, kebabCase } from "../helpers";
|
5
5
|
import { getComponentName } from "../componentsHelpers";
|
6
6
|
|
7
7
|
const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path)
|
@@ -43,7 +43,7 @@ const componentsThemeToStyleObj = (componentsTheme) =>
|
|
43
43
|
// starts with underscore -> attribute selector
|
44
44
|
|
45
45
|
const attrsSelector = restPath.reduce((acc, section, idx) => {
|
46
|
-
if (section.startsWith('_')) return acc += `[${section.replace(/^_/, '')}]`;
|
46
|
+
if (section.startsWith('_')) return acc += `[${kebabCase(section.replace(/^_/, ''))}]`;
|
47
47
|
|
48
48
|
const nextSection = restPath[idx + 1];
|
49
49
|
|
@@ -52,14 +52,14 @@ const componentsThemeToStyleObj = (componentsTheme) =>
|
|
52
52
|
return acc;
|
53
53
|
}
|
54
54
|
|
55
|
-
return acc += `[${section}="${restPath.splice(idx + 1, 1).join('')}"]`;
|
55
|
+
return acc += `[${kebabCase(section)}="${restPath.splice(idx + 1, 1).join('')}"]`;
|
56
56
|
}, '');
|
57
57
|
|
58
58
|
let selector = `${getComponentName(component)}${attrsSelector}`
|
59
59
|
|
60
60
|
return {
|
61
61
|
[selector]: {
|
62
|
-
[
|
62
|
+
[property]: val
|
63
63
|
}
|
64
64
|
}
|
65
65
|
});
|
@@ -73,4 +73,22 @@ export const componentsThemeToStyle = (componentsTheme, themeName = '') =>
|
|
73
73
|
export const themeToStyle = ({ globals, components }, themeName) => `
|
74
74
|
${globalsThemeToStyle(globals, themeName)}
|
75
75
|
${componentsThemeToStyle(components, themeName)}
|
76
|
-
`
|
76
|
+
`
|
77
|
+
|
78
|
+
const useVar = varName => `var(${varName})`
|
79
|
+
|
80
|
+
export const createHelperVars = (theme, prefix) => {
|
81
|
+
const res = transformTheme(theme, [], (path, value) => {
|
82
|
+
const modifiedPath = [...path];
|
83
|
+
const property = modifiedPath.splice(-1)
|
84
|
+
const varName = getCssVarName(prefix, property)
|
85
|
+
|
86
|
+
const vars = { [property]: varName }
|
87
|
+
const theme = set({}, [...modifiedPath, varName], value)
|
88
|
+
const useVars = { [property]: useVar(varName) }
|
89
|
+
|
90
|
+
return { theme, useVars, vars }
|
91
|
+
})
|
92
|
+
|
93
|
+
return [res.theme, res.useVars, res.vars]
|
94
|
+
};
|
package/dist/umd/146.js
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[146],{3097:(e,t,s)=>{s.d(t,{D:()=>r});const o=(e,t,s)=>{t(...Array.from(e.attributes).map((e=>e.name))),new MutationObserver((e=>{for(const o of e)"attributes"!==o.type||s.includes(o.attributeName)||t(o.attributeName)})).observe(e,{attributes:!0})},n=(e,t)=>(...s)=>{s.forEach((s=>{const o=e.getAttribute(s);null!==o?t.getAttribute(s)!==o&&t.setAttribute(s,o):t.removeAttribute(s)}))},r=({componentName:e,wrappedEleName:t,slots:s=[],style:r,excludeAttrsSync:a=[]})=>{const i=`\n\t\t${r?`<style id="create-proxy">${r}</style>`:""}\n\t\t<${t}>\n\t\t<slot></slot>\n\t\t${s.map((e=>`<slot name="${e}" slot="${e}"></slot>`)).join("")}\n\t\t</${t}>\n\t`;class l extends HTMLElement{static get componentName(){return e}constructor(){super().attachShadow({mode:"open"}).innerHTML=i,this.hostElement=this.shadowRoot.host,this.componentName=this.hostElement.tagName.toLowerCase(),this.wrappedComponentName=t}#e(){if(this.componentName!==e)throw Error(`component name mismatch, expected "${e}", current "${actualComponentName}"`)}connectedCallback(){var e,s,r;this.shadowRoot.isConnected&&(this.#e(),this.proxyElement=this.shadowRoot.querySelector(t),this.setAttribute("tabindex","0"),this.onfocus=e=>{this.proxyElement.focus()},this.proxyElement.onkeydown=e=>{e.shiftKey&&9===e.keyCode&&(this.removeAttribute("tabindex"),setTimeout((()=>this.setAttribute("tabindex","0")),0))},this.mouseoverCbRef=()=>{this.proxyElement.setAttribute("hover",""),this.proxyElement.addEventListener("mouseleave",(()=>this.proxyElement.removeAttribute("hover")),{once:!0})},this.proxyElement.addEventListener("mouseover",this.mouseoverCbRef),this.addEventListener=this.proxyElement.addEventListener,e=this.proxyElement,s=this.hostElement,r=a,o(e,n(e,s),r),o(s,n(s,e),r))}disconnectedCallback(){this.proxyElement.removeEventListener("mouseover",this.mouseoverCbRef)}attributeChangedCallback(){this.proxyElement}}return l}},2089:(e,t,s)=>{s.d(t,{e:()=>o});const o=e=>class extends e{#t=null;static get observedAttributes(){return[...e.observedAttributes||[],"draggable"]}constructor(){super(),this.#t=document.createElement("style"),this.#t.innerText=`${this.wrappedComponentName} { cursor: inherit }`}#s(e){e?this.shadowRoot.appendChild(this.#t):this.#t.remove()}attributeChangedCallback(e,t,s){super.attributeChangedCallback(e,t,s),"draggable"===e&&this.#s("true"===s)}}},2788:(e,t,s)=>{s.d(t,{qC:()=>r,iY:()=>n});var o=s(6225);const n=e=>(0,o.E3)("descope",e),r=(...e)=>t=>e.reduceRight(((e,t)=>t(e)),t)},6225:(e,t,s)=>{s.d(t,{E3:()=>n,GL:()=>o,Tk:()=>r});const o=e=>e.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[\s_.]+/g,"-").toLowerCase(),n=(...e)=>o(e.join("-")),r=(...e)=>`--${n(...e)}`}}]);
|
@@ -1 +0,0 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[155],{3146:(e,t,o)=>{o.r(t),o.d(t,{Button:()=>l}),o(729);var r=o(2788),n=o(9893),s=o(2089),a=o(3097),d=o(3535);const i=(0,r.iY)("button"),l=(0,r.qC)((0,n.y)({mappings:{backgroundColor:{},borderRadius:{},color:{selector:"::part(label)"},borderColor:{},borderStyle:{},borderWidth:{},fontSize:{},height:{},width:(0,d.zy)({}),cursor:{},padding:{}}}),s.e)((0,a.D)({slots:["prefix","suffix"],wrappedEleName:"vaadin-button",style:"vaadin-button::part(label) { pointer-events: none; }",excludeAttrsSync:["tabindex"],componentName:i}));customElements.define(i,l)}}]);
|
@@ -1 +0,0 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[938],{3450:(e,s,a)=>{a.r(s),a.d(s,{DatePicker:()=>n}),a(3054);var c=a(2788),p=a(2089),t=a(3097);const i=(0,c.iY)("date-picker"),n=(0,c.qC)(p.e)((0,t.D)({componentName:i,slots:["prefix","suffix"],wrappedEleName:"vaadin-date-picker",style:""}));customElements.define(i,n)}}]);
|
@@ -1 +0,0 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[117],{2320:(t,e,i)=>{i.r(e),i.d(e,{TextField:()=>d}),i(6221);var r=i(2788),l=i(9893),s=i(2089),a=i(3097);const o=(0,r.iY)("text-field"),d=(0,r.qC)((0,l.y)({mappings:{placeholderColor:{selector:"> input:placeholder-shown",property:"color"},color:{},borderColor:{selector:"::part(input-field)"},borderWidth:{selector:"::part(input-field)"},borderStyle:{selector:"::part(input-field)"},borderRadius:{selector:"::part(input-field)"},boxShadow:{selector:"::part(input-field)"},height:{selector:"::part(input-field)"},padding:{selector:"::part(input-field)"},backgroundColor:{selector:"::part(input-field)"},labelColor:{selector:"::part(label)",property:"color"}}}),s.e,(t=>class extends t{static get formAssociated(){return!0}#t;constructor(){super(),this.#t=this.attachInternals(),this.hasAttribute("tabindex")||this.setAttribute("tabindex",0)}formAssociatedCallback(){this.setValidity?.()}connectedCallback(){super.connectedCallback();const t=this.proxyElement.querySelector("input");if(!t)throw Error("no input was found");this.checkValidity=()=>t.checkValidity(),this.reportValidity=()=>t.reportValidity(),this.validity=t.validity,this.setValidity=()=>{this.#t.setValidity(t.validity,t.validationMessage)},t.oninput=()=>{this.value=t.value,this.setValidity()}}}))((0,a.D)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:"",excludeAttrsSync:["tabindex"],componentName:o}));customElements.define(o,d)}}]);
|