@neovici/cosmoz-input 1.6.0 → 1.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cosmoz-input.js +6 -3
- package/cosmoz-textarea.js +3 -2
- package/package.json +7 -9
- package/render.js +13 -6
- package/styles.js +40 -15
package/cosmoz-input.js
CHANGED
|
@@ -17,7 +17,9 @@ export const Input = host => {
|
|
|
17
17
|
readonly,
|
|
18
18
|
disabled,
|
|
19
19
|
min,
|
|
20
|
-
max
|
|
20
|
+
max,
|
|
21
|
+
step,
|
|
22
|
+
maxlength
|
|
21
23
|
} = host,
|
|
22
24
|
{ onChange, onFocus, onInput } = useInput(host),
|
|
23
25
|
onBeforeInput = useAllowedPattern(allowedPattern);
|
|
@@ -25,10 +27,10 @@ export const Input = host => {
|
|
|
25
27
|
type=${ type } pattern=${ ifDefined(pattern) }
|
|
26
28
|
autocomplete=${ ifDefined(autocomplete) } placeholder=${ placeholder || ' ' }
|
|
27
29
|
?readonly=${ readonly } ?aria-disabled=${ disabled } ?disabled=${ disabled }
|
|
28
|
-
.value=${ live(value ?? '') }
|
|
30
|
+
.value=${ live(value ?? '') } maxlength=${ifDefined(maxlength)}
|
|
29
31
|
@beforeinput=${ onBeforeInput } @input=${ onInput }
|
|
30
32
|
@change=${ onChange } @focus=${ onFocus } @blur=${ onFocus }
|
|
31
|
-
min=${ ifDefined(min) } max=${ ifDefined(max) }>`
|
|
33
|
+
min=${ ifDefined(min) } max=${ ifDefined(max) } step=${ifDefined(step)} >`
|
|
32
34
|
, host);
|
|
33
35
|
},
|
|
34
36
|
|
|
@@ -38,6 +40,7 @@ export const Input = host => {
|
|
|
38
40
|
'allowed-pattern',
|
|
39
41
|
'min',
|
|
40
42
|
'max',
|
|
43
|
+
'step',
|
|
41
44
|
...attributes
|
|
42
45
|
];
|
|
43
46
|
|
package/cosmoz-textarea.js
CHANGED
|
@@ -14,7 +14,8 @@ export const Textarea = host => {
|
|
|
14
14
|
readonly,
|
|
15
15
|
disabled,
|
|
16
16
|
rows,
|
|
17
|
-
cols
|
|
17
|
+
cols,
|
|
18
|
+
maxlength
|
|
18
19
|
} = host,
|
|
19
20
|
{ onChange, onFocus, onInput } = useInput(host);
|
|
20
21
|
|
|
@@ -24,7 +25,7 @@ export const Textarea = host => {
|
|
|
24
25
|
<textarea id="input" part="input" style="resize: none"
|
|
25
26
|
autocomplete=${ ifDefined(autocomplete) } placeholder=${ placeholder || ' ' } rows=${ rows ?? 1 } cols=${ ifDefined(cols) }
|
|
26
27
|
?readonly=${ readonly } ?aria-disabled=${ disabled } ?disabled=${ disabled }
|
|
27
|
-
.value=${ live(value ?? '') } @input=${ onInput }
|
|
28
|
+
.value=${ live(value ?? '') } maxlength=${ifDefined(maxlength)} @input=${ onInput }
|
|
28
29
|
@change=${ onChange } @focus=${ onFocus } @blur=${ onFocus }>`
|
|
29
30
|
, host);
|
|
30
31
|
},
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neovici/cosmoz-input",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.7.0",
|
|
4
4
|
"description": "A input web component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"lit-html",
|
|
@@ -61,19 +61,17 @@
|
|
|
61
61
|
"lit-html": "^1.4.0"
|
|
62
62
|
},
|
|
63
63
|
"devDependencies": {
|
|
64
|
-
"@commitlint/cli": "^
|
|
65
|
-
"@commitlint/config-conventional": "^
|
|
66
|
-
"@neovici/
|
|
64
|
+
"@commitlint/cli": "^16.0.0",
|
|
65
|
+
"@commitlint/config-conventional": "^16.0.0",
|
|
66
|
+
"@neovici/cfg": "^1.13.1",
|
|
67
67
|
"@open-wc/demoing-storybook": "^2.1.0",
|
|
68
68
|
"@open-wc/testing": "^2.5.0",
|
|
69
69
|
"@semantic-release/changelog": "^6.0.0",
|
|
70
70
|
"@semantic-release/git": "^10.0.0",
|
|
71
71
|
"@storybook/storybook-deployer": "^2.8.5",
|
|
72
|
-
"@web/test-runner": "^0.13.0",
|
|
73
|
-
"@web/test-runner-selenium": "^0.5.0",
|
|
74
72
|
"husky": "^7.0.0",
|
|
75
|
-
"semantic-release": "^
|
|
76
|
-
"sinon": "^
|
|
77
|
-
"typescript": "^4.
|
|
73
|
+
"semantic-release": "^19.0.0",
|
|
74
|
+
"sinon": "^13.0.0",
|
|
75
|
+
"typescript": "^4.6.0"
|
|
78
76
|
}
|
|
79
77
|
}
|
package/render.js
CHANGED
|
@@ -2,24 +2,31 @@ import { html, nothing } from 'lit-html';
|
|
|
2
2
|
import { styles } from './styles';
|
|
3
3
|
|
|
4
4
|
export const render = (control, { label, invalid, errorMessage }) => html`
|
|
5
|
-
<style
|
|
5
|
+
<style>
|
|
6
|
+
${styles}
|
|
7
|
+
</style>
|
|
6
8
|
<div class="float" part="float"> </div>
|
|
7
9
|
<div class="wrap" part="wrap">
|
|
8
10
|
<slot name="prefix"></slot>
|
|
9
11
|
<div class="control" part="control">
|
|
10
|
-
${
|
|
11
|
-
${
|
|
12
|
+
${control}
|
|
13
|
+
${label
|
|
14
|
+
? html`<label for="input" part="label">${label}</label>`
|
|
15
|
+
: nothing}
|
|
12
16
|
</div>
|
|
13
17
|
<slot name="suffix"></slot>
|
|
14
18
|
</div>
|
|
15
19
|
<div class="line" part="line"></div>
|
|
16
|
-
${
|
|
17
|
-
|
|
20
|
+
${invalid && errorMessage
|
|
21
|
+
? html`<div class="error" part="error">${errorMessage}</div>`
|
|
22
|
+
: nothing}
|
|
23
|
+
`,
|
|
18
24
|
attributes = [
|
|
19
25
|
'autocomplete',
|
|
20
26
|
'readonly',
|
|
21
27
|
'disabled',
|
|
28
|
+
'maxlength',
|
|
22
29
|
'invalid',
|
|
23
30
|
'no-label-float',
|
|
24
|
-
'always-float-label'
|
|
31
|
+
'always-float-label',
|
|
25
32
|
];
|
package/styles.js
CHANGED
|
@@ -1,20 +1,43 @@
|
|
|
1
|
-
|
|
1
|
+
import { tagged as css } from '@neovici/cosmoz-utils';
|
|
2
|
+
export const styles = css`
|
|
2
3
|
:host {
|
|
3
|
-
--font-family: var(
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
--font-family: var(
|
|
5
|
+
--cosmoz-input-font-family,
|
|
6
|
+
var(--paper-font-subhead_-_font-family, "Roboto", "Noto", sans-serif)
|
|
7
|
+
);
|
|
8
|
+
--font-size: var(
|
|
9
|
+
--cosmoz-input-font-size,
|
|
10
|
+
var(--paper-font-subhead_-_font-size, 16px)
|
|
11
|
+
);
|
|
12
|
+
--line-height: var(
|
|
13
|
+
--cosmoz-input-line-height,
|
|
14
|
+
var(--paper-font-subhead_-_line-height, 24px)
|
|
15
|
+
);
|
|
6
16
|
--label-scale: var(--cosmoz-input-label-scale, 0.75);
|
|
7
|
-
--disabled-opacity: var(
|
|
8
|
-
|
|
9
|
-
|
|
17
|
+
--disabled-opacity: var(
|
|
18
|
+
--cosmoz-input-disabled-opacity,
|
|
19
|
+
var(--paper-input-container-disabled_-_opacity, 0.33)
|
|
20
|
+
);
|
|
21
|
+
--disabled-line-opacity: var(
|
|
22
|
+
--cosmoz-input-disabled-line-opacity,
|
|
23
|
+
var(--paper-input-container-underline-disabled_-_opacity, 1)
|
|
24
|
+
);
|
|
25
|
+
--invalid-color: var(
|
|
26
|
+
--cosmoz-input-invalid-color,
|
|
27
|
+
var(--paper-input-container-invalid-color, var(--error-color, #fc5c5b))
|
|
28
|
+
);
|
|
10
29
|
--bg: var(--cosmoz-input-background);
|
|
11
30
|
--focused-bg: var(--cosmoz-input-focused-background, var(--bg));
|
|
12
31
|
--color: var(--cosmoz-input-color, var(--secondary-text-color, #737373));
|
|
13
|
-
--focused-color: var(
|
|
32
|
+
--focused-color: var(
|
|
33
|
+
--cosmoz-input-focused-color,
|
|
34
|
+
var(--primary-color, #3f51b5)
|
|
35
|
+
);
|
|
14
36
|
|
|
15
37
|
display: block;
|
|
16
|
-
padding: 8px 0;
|
|
38
|
+
padding: var(--cosmoz-input-padding, 8px 0);
|
|
17
39
|
padding-top: var(--paper-input-container_-_padding-top, 8px);
|
|
40
|
+
padding-bottom: var(--paper-input-container_-_padding-bottom, 8px);
|
|
18
41
|
position: relative;
|
|
19
42
|
|
|
20
43
|
font-family: var(--font-family);
|
|
@@ -73,7 +96,8 @@ export const styles = `
|
|
|
73
96
|
|
|
74
97
|
:host([always-float-label]) label,
|
|
75
98
|
#input:not(:placeholder-shown) + label {
|
|
76
|
-
transform: translateY(calc(var(--label-scale) * -100%))
|
|
99
|
+
transform: translateY(calc(var(--label-scale) * -100%))
|
|
100
|
+
scale(var(--label-scale));
|
|
77
101
|
}
|
|
78
102
|
#input:not(:placeholder-shown):focus + label {
|
|
79
103
|
color: var(--focused-color);
|
|
@@ -85,7 +109,7 @@ export const styles = `
|
|
|
85
109
|
position: relative;
|
|
86
110
|
}
|
|
87
111
|
.line::before {
|
|
88
|
-
content:
|
|
112
|
+
content: "";
|
|
89
113
|
position: absolute;
|
|
90
114
|
display: block;
|
|
91
115
|
border-bottom: 2px solid transparent;
|
|
@@ -93,7 +117,7 @@ export const styles = `
|
|
|
93
117
|
left: 0;
|
|
94
118
|
right: 0;
|
|
95
119
|
top: 0;
|
|
96
|
-
transform: scale3d(0,1,1);
|
|
120
|
+
transform: scale3d(0, 1, 1);
|
|
97
121
|
transform-origin: center center;
|
|
98
122
|
z-index: 1;
|
|
99
123
|
}
|
|
@@ -102,7 +126,7 @@ export const styles = `
|
|
|
102
126
|
transition: 0.25s transform ease;
|
|
103
127
|
}
|
|
104
128
|
:host(:focus-within) .line {
|
|
105
|
-
border-bottom-color:
|
|
129
|
+
border-bottom-color: var(--focused-color);
|
|
106
130
|
}
|
|
107
131
|
:host([disabled]) .line {
|
|
108
132
|
border-bottom-style: dashed;
|
|
@@ -110,7 +134,7 @@ export const styles = `
|
|
|
110
134
|
}
|
|
111
135
|
|
|
112
136
|
:host([no-label-float]) .float,
|
|
113
|
-
:host([no-label-float]) #input:not(:placeholder-shown) + label
|
|
137
|
+
:host([no-label-float]) #input:not(:placeholder-shown) + label {
|
|
114
138
|
display: none;
|
|
115
139
|
}
|
|
116
140
|
|
|
@@ -122,7 +146,8 @@ export const styles = `
|
|
|
122
146
|
position: absolute;
|
|
123
147
|
max-width: 100%;
|
|
124
148
|
}
|
|
125
|
-
:host([invalid]) label,
|
|
149
|
+
:host([invalid]) label,
|
|
150
|
+
.error {
|
|
126
151
|
color: var(--invalid-color);
|
|
127
152
|
}
|
|
128
153
|
:host([invalid]) .line {
|