@esportsplus/ui 0.19.7 → 0.20.1
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/build/components/field/index.d.ts +1127 -194
- package/build/components/field/index.js +3 -3
- package/build/components/field/input.d.ts +11 -0
- package/build/components/field/input.js +25 -22
- package/build/components/field/scss/index.scss +1 -1
- package/package.json +1 -1
- package/src/components/field/index.ts +3 -3
- package/src/components/field/input.ts +30 -22
- package/src/components/field/scss/index.scss +2 -0
- package/src/components/field/scss/range.scss +45 -0
- package/src/components/field/scss/variables.scss +2 -0
|
@@ -5,6 +5,6 @@ import select from './select.js';
|
|
|
5
5
|
import title from './title.js';
|
|
6
6
|
import './scss/index.scss';
|
|
7
7
|
const { checkbox: cb, radio, switch: sw } = checkbox;
|
|
8
|
-
const { file, text, textarea } = input;
|
|
9
|
-
export default { checkbox: cb, description, file, radio, select, switch: sw, textarea, text, title };
|
|
10
|
-
export { cb as checkbox, description, file, radio, select, sw as switch, textarea, text, title };
|
|
8
|
+
const { file, range, text, textarea } = input;
|
|
9
|
+
export default { checkbox: cb, description, file, radio, range, select, switch: sw, textarea, text, title };
|
|
10
|
+
export { cb as checkbox, description, file, radio, range, select, sw as switch, textarea, text, title };
|
|
@@ -71,6 +71,17 @@ declare const _default: {
|
|
|
71
71
|
mask: typeof file | typeof text | typeof textarea;
|
|
72
72
|
}, attributes: Readonly<Attributes>, content: (mask: typeof file | typeof text | typeof textarea) => Renderable<unknown>) => Renderable<any>>;
|
|
73
73
|
};
|
|
74
|
+
range: {
|
|
75
|
+
(): ReturnType<(this: {
|
|
76
|
+
mask: typeof file | typeof text | typeof textarea;
|
|
77
|
+
}, attributes: Readonly<Attributes>, content: (mask: typeof file | typeof text | typeof textarea) => Renderable<unknown>) => Renderable<any>>;
|
|
78
|
+
(content: (mask: typeof file | typeof text | typeof textarea) => Renderable<unknown>): ReturnType<(this: {
|
|
79
|
+
mask: typeof file | typeof text | typeof textarea;
|
|
80
|
+
}, attributes: Readonly<Attributes>, content: (mask: typeof file | typeof text | typeof textarea) => Renderable<unknown>) => Renderable<any>>;
|
|
81
|
+
(attributes: Attributes, content: (mask: typeof file | typeof text | typeof textarea) => Renderable<unknown>): ReturnType<(this: {
|
|
82
|
+
mask: typeof file | typeof text | typeof textarea;
|
|
83
|
+
}, attributes: Readonly<Attributes>, content: (mask: typeof file | typeof text | typeof textarea) => Renderable<unknown>) => Renderable<any>>;
|
|
84
|
+
};
|
|
74
85
|
text: {
|
|
75
86
|
(): ReturnType<(this: {
|
|
76
87
|
mask: typeof file | typeof text | typeof textarea;
|
|
@@ -12,8 +12,7 @@ const field = template.factory(function (attributes, content) {
|
|
|
12
12
|
error: ''
|
|
13
13
|
});
|
|
14
14
|
return html `
|
|
15
|
-
<div
|
|
16
|
-
class='field'
|
|
15
|
+
<div class='field'
|
|
17
16
|
${omit(attributes, OMIT_FIELD)}
|
|
18
17
|
${{
|
|
19
18
|
class: () => state.active && '--active',
|
|
@@ -32,29 +31,37 @@ const field = template.factory(function (attributes, content) {
|
|
|
32
31
|
});
|
|
33
32
|
const file = template.factory(function (attributes, content) {
|
|
34
33
|
return html `
|
|
35
|
-
<label
|
|
36
|
-
class='field-mask field-mask--file'
|
|
37
|
-
${omit(attributes, OMIT_TAG)}
|
|
38
|
-
>
|
|
34
|
+
<label class='field-mask field-mask--file' ${omit(attributes, OMIT_TAG)}>
|
|
39
35
|
<input
|
|
40
36
|
class='field-mask-tag field-mask-tag--hidden'
|
|
37
|
+
onrender=${form.input.onrender(this.state)}
|
|
41
38
|
type='file'
|
|
42
39
|
${attributes['field-mask-tag']}
|
|
43
|
-
${{
|
|
44
|
-
onrender: form.input.onrender(this.state)
|
|
45
|
-
}}
|
|
46
40
|
>
|
|
47
|
-
|
|
48
41
|
${content}
|
|
49
42
|
</label>
|
|
50
43
|
`;
|
|
51
44
|
});
|
|
45
|
+
const range = template.factory(function (attributes, content) {
|
|
46
|
+
let a = (attributes['field-mask-tag'] || {}), state = attributes.state || reactive({ value: 0 });
|
|
47
|
+
return html `
|
|
48
|
+
<div class='field-mask field-mask--range --border-state --border-black' ${omit(attributes, OMIT_TAG)}>
|
|
49
|
+
<input
|
|
50
|
+
class='field-mask-tag'
|
|
51
|
+
oninput=${(e) => {
|
|
52
|
+
state.value = Number(e.target.value);
|
|
53
|
+
}}
|
|
54
|
+
type='range'
|
|
55
|
+
value='${a.value || state.value || 0}'
|
|
56
|
+
${a}
|
|
57
|
+
>
|
|
58
|
+
${content}
|
|
59
|
+
</div>
|
|
60
|
+
`;
|
|
61
|
+
});
|
|
52
62
|
const text = template.factory(function (attributes, content) {
|
|
53
63
|
return html `
|
|
54
|
-
<label
|
|
55
|
-
class='field-mask field-mask--input'
|
|
56
|
-
${omit(attributes, OMIT_TAG)}
|
|
57
|
-
>
|
|
64
|
+
<label class='field-mask field-mask--input' ${omit(attributes, OMIT_TAG)}>
|
|
58
65
|
<input
|
|
59
66
|
class='field-mask-tag'
|
|
60
67
|
${attributes['field-mask-tag']}
|
|
@@ -68,18 +75,13 @@ const text = template.factory(function (attributes, content) {
|
|
|
68
75
|
`;
|
|
69
76
|
});
|
|
70
77
|
const textarea = template.factory(function (attributes, content) {
|
|
71
|
-
let a = attributes['field-mask-tag'] || {};
|
|
78
|
+
let a = (attributes['field-mask-tag'] || {});
|
|
72
79
|
return html `
|
|
73
|
-
<label
|
|
74
|
-
class='field-mask field-mask--textarea'
|
|
75
|
-
${omit(attributes, OMIT_TAG)}
|
|
76
|
-
>
|
|
80
|
+
<label class='field-mask field-mask--textarea' ${omit(attributes, OMIT_TAG)}>
|
|
77
81
|
<textarea
|
|
78
82
|
class='field-mask-tag'
|
|
83
|
+
onrender=${form.input.onrender(this.state)}
|
|
79
84
|
${a}
|
|
80
|
-
${{
|
|
81
|
-
onrender: form.input.onrender(this.state)
|
|
82
|
-
}}
|
|
83
85
|
>
|
|
84
86
|
${a.value}
|
|
85
87
|
</textarea>
|
|
@@ -89,6 +91,7 @@ const textarea = template.factory(function (attributes, content) {
|
|
|
89
91
|
});
|
|
90
92
|
export default {
|
|
91
93
|
file: field.bind({ mask: file }),
|
|
94
|
+
range: field.bind({ mask: range }),
|
|
92
95
|
text: field.bind({ mask: text }),
|
|
93
96
|
textarea: field.bind({ mask: textarea })
|
|
94
97
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer components {button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;background:0 0;border:0;border-radius:0;margin:0;padding:0}button,button:active,button:focus,button:hover,input,input:active,input:focus,input:hover,select,select:active,select:focus,select:hover,textarea,textarea:active,textarea:focus,textarea:hover{outline:none}button:invalid,input:invalid,select:invalid,textarea:invalid{box-shadow:none}form{width:100%;margin:0;padding:0}label{cursor:pointer}.field{--margin-horizontal:0px;--margin-vertical:var(--size-300);--width:100%}.field-description,.field-error{--font-size:var(--font-size-300)}.field-error{--color:var(--color-red-400)}.field-mask{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-default:var(--background);--border-radius:var(--border-radius-400);--border-style:solid;--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--outline-opacity:var(--outline-opacity-default);--outline-opacity-active:.32;--outline-opacity-default:0;--outline-opacity-hover:0;--outline-opacity-pressed:0;--outline-spacing:0px;--outline-width:var(--outline-width-default);--outline-width-active:4px;--outline-width-default:0px;--outline-width-hover:0px;--outline-width-pressed:0px;--padding-horizontal:0px;--padding-vertical:var(--size-400)}.field.--active>.field-mask,.field.--active :not(.field) .field-mask{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--color:var(--color-active);--outline-opacity:var(--outline-opacity-active);--outline-width:var(--outline-width-active)}label.field:not(.--active):not(.--active):hover>.field-mask,.field:not(.--active):not(label) .field-mask:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover);--outline-opacity:var(--outline-opacity-hover);--outline-width:var(--outline-width-hover)}label.field:not(.--active):not(.--active):active>.field-mask,.field:not(.--active):not(label) .field-mask:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed);--outline-opacity:var(--outline-opacity-pressed);--outline-width:var(--outline-width-pressed)}.field-mask--outline:not(.--active):active{--border-color:var(--border-color-default)}.field-mask--outline:not(.--active):active:before{--outline-width:0px}.field-required{--border-radius:100%;--size:6px}.field-title{--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--font-size:var(--font-size-400);--font-weight:var(--font-weight-500)}.field.--active .field-title{--color:var(--color-active)}.field:not(.--active):hover .field-title{--color:var(--color-hover)}.field:not(.--active):active .field-title{--color:var(--color-pressed)}.field label.field:not(.--active):hover,.field:not(label):not(.--active) .field-mask:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover);--outline-opacity:var(--outline-opacity-hover);--outline-width:var(--outline-width-hover)}.field label.field:not(.--active):active,.field:not(label):not(.--active) .field-mask:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed);--outline-opacity:var(--outline-opacity-pressed);--outline-width:var(--outline-width-pressed)}.field-mask--checkbox,.field-mask--radio,.field-mask--switch{--accent:var(--accent-default);--accent-active:var(--accent-default);--accent-default:var(--color-white-400);--accent-hover:var(--accent-default);--accent-pressed:var(--accent-default);--height:var(--size);--opacity:var(--opacity-default);--opacity-active:var(--opacity-default);--opacity-default:1;--opacity-hover:var(--opacity-default);--opacity-pressed:var(--opacity-default);--rotate:0deg;--scale:var(--scale-default);--scale-active:var(--scale-default);--scale-default:1;--scale-hover:var(--scale-default);--scale-pressed:var(--scale-default);--size:var(--size-600);--width-switch:40px}.field-mask--checkbox:before,.field-mask--radio:before,.field-mask--switch:before{--translateX:0px;--translateY:0px}.field-mask--checkbox label.field:not(.--active):not(.--active):hover,.field:not(label):not(.--active) .field-mask--checkbox:not(.--active):hover,.field-mask--radio label.field:not(.--active):not(.--active):hover,.field:not(label):not(.--active) .field-mask--radio:not(.--active):hover,.field-mask--switch label.field:not(.--active):not(.--active):hover,.field:not(label):not(.--active) .field-mask--switch:not(.--active):hover{--accent:var(--accent-hover);--opacity:var(--opacity-hover);--scale:var(--scale-hover)}.field-mask--checkbox label.field:not(.--active):not(.--active):active,.field:not(label):not(.--active) .field-mask--checkbox:not(.--active):active,.field-mask--radio label.field:not(.--active):not(.--active):active,.field:not(label):not(.--active) .field-mask--radio:not(.--active):active,.field-mask--switch label.field:not(.--active):not(.--active):active,.field:not(label):not(.--active) .field-mask--switch:not(.--active):active{--accent:var(--accent-pressed);--opacity:var(--opacity-pressed);--scale:var(--scale-pressed)}.field.--active .field-mask--checkbox,.field.--active .field-mask--radio,.field.--active .field-mask--switch{--accent:var(--accent-active);--opacity:var(--opacity-active);--scale:var(--scale-active)}.field-mask--checkbox,.field-mask--radio{--margin-horizontal:calc(var(--width-switch) - var(--width));--width:var(--height)}.field-mask--radio:before,.field-mask--switch:before{--box-shadow:0 1px 0 #00000029}.field-mask--checkbox{--border-radius:var(--border-radius-300);--rotate:45deg;--scale-active:1;--scale-default:0;--scale-hover:1.08;--scale-pressed:.98}.field-mask--checkbox:before{--box-shadow:1px 1px 0 #00000029;--border-width:5px;--height:110%;--translateX:108%;--translateY:8%;--width:50%}.field:not(.--active):not(:hover) .field-mask--checkbox:before{--translateY:100%}.field-mask--radio{--border-radius:100%;--opacity-active:1;--opacity-default:.4;--scale-active:.9;--scale-default:0;--scale-hover:.8;--scale-pressed:.7}.field-mask--radio:before{--height:calc((var(--size)/2) - (var(--border-width)*2));--translateX:50%;--translateY:50%;--width:var(--height)}.field-mask--switch{--border-radius:240px;--padding-horizontal:var(--border-width-400);--padding-vertical:var(--border-width-400);--width:var(--width-switch)}.field-mask--switch:before{--height:calc(var(--size) - (var(--border-width)*2) - (var(--padding-vertical)*2));--width:var(--height)}.field.--active .field-mask--switch:before{--translateX:calc(var(--width-switch) - (var(--border-width)*2) - var(--height) - (var(--padding-horizontal)*2))}.field-mask--file,.field-mask--input,.field-mask--select,.field-mask--textarea{--font-size:var(--font-size-400);--line-height:var(--line-height-400);--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400)}.field-mask--file,.field-mask--input,.field-mask--textarea{--size:var(--size-400)}.field-mask--select{--arrow-spacer:1px;--arrow-size:6px}.field-mask-arrow{--border-width:var(--border-width-500)}.field{gap:var(--margin-vertical)var(--margin-horizontal);transition:background var(--transition-duration)ease-in-out,border-color var(--transition-duration)ease-in-out,box-shadow var(--transition-duration)ease-in-out,color var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out;width:var(--width);z-index:1;flex-flow:column;display:flex;position:relative}.field:not(.--active):hover{z-index:8}.field.--active{z-index:9}.field-description,.field-error,.field-title{color:var(--color);font-size:var(--font-size);word-wrap:break-word;width:100%;position:relative}.field-description:empty,.field-error:empty,.field-title:empty{height:0;margin:0}.field-error{animation:.32s linear fieldError}@keyframes fieldError{0%{transform:translate(8px)}20%{transform:translate(-8px)}40%{transform:translate(4px)}60%{transform:translate(-4px)}80%{transform:translate(2px)}to{transform:translate(0)}}.field-mask:after{border-radius:inherit;box-shadow:var(--box-shadow);content:"";pointer-events:none;transition:box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;z-index:-1;position:absolute;inset:0}.field-mask--flat:after{display:none}.field-mask--outline:before{box-shadow:0 0 0 var(--outline-width)var(--border-color);border-radius:var(--border-radius);content:"";opacity:var(--outline-opacity);pointer-events:none;transition:box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out;z-index:1;position:absolute;inset:0}.field-mask-tag--hidden{appearance:none;opacity:0;pointer-events:none;z-index:-1;width:0;height:0;position:absolute;top:0;left:0}.field-required{background:var(--background);border-radius:var(--border-radius);height:var(--size);width:var(--size)}.field-title{font-weight:var(--font-weight);z-index:1}.field-mask--checkbox,.field-mask--radio,.field-mask--switch{background:var(--background);border-color:var(--border-color);border-radius:var(--border-radius);border-style:var(--border-style);border-width:var(--border-width);flex:0 0 var(--width);height:var(--height);transition:background var(--transition-duration)ease-in-out,border-color var(--transition-duration)ease-in-out,box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;width:var(--width);position:relative}.field-mask--checkbox:invalid,.field-mask--checkbox:required,.field-mask--radio:invalid,.field-mask--radio:required,.field-mask--switch:invalid,.field-mask--switch:required{box-shadow:none}.field-mask--checkbox:before,.field-mask--radio:before,.field-mask--switch:before{box-shadow:var(--box-shadow);content:"";height:var(--height);opacity:var(--opacity);transform:translate(var(--translateX),var(--translateY))rotate(var(--rotate))scale(var(--scale));width:var(--width)}.field-mask--checkbox .field-mask-tag,.field-mask--radio .field-mask-tag,.field-mask--switch .field-mask-tag{opacity:0;pointer-events:none;z-index:0;width:0;height:0;position:absolute;top:0;left:0}.field-mask--checkbox:before,.field-mask--radio:before{position:absolute;bottom:50%;right:50%}.field-mask--radio:before,.field-mask--switch:before{background:var(--accent);border-radius:inherit;transform-origin:50%}.field-mask--checkbox:before{border-bottom:var(--border-width)solid var(--accent);border-right:var(--border-width)solid var(--accent);transform-origin:0}.field-mask--switch:before{top:var(--padding-vertical);left:var(--padding-horizontal);position:absolute}.field-mask--file,.field-mask--input,.field-mask--select,.field-mask--textarea{background:var(--background);border:var(--border-width)var(--border-style)var(--border-color);border-radius:var(--border-radius);font-size:var(--font-size);line-height:var(--line-height);flex-wrap:wrap;align-items:center;width:100%;display:flex;position:relative}.field-mask--file:invalid,.field-mask--file:required,.field-mask--input:invalid,.field-mask--input:required,.field-mask--select:invalid,.field-mask--select:required,.field-mask--textarea:invalid,.field-mask--textarea:required{box-shadow:none}.field-mask--file,.field-mask--file .field-mask-tag,.field-mask--input,.field-mask--input .field-mask-tag,.field-mask--select,.field-mask--select .field-mask-tag,.field-mask--textarea,.field-mask--textarea .field-mask-tag{color:var(--color)}.field-mask--file.field-text,.field-mask--input.field-text,.field-mask--select.field-text,.field-mask--textarea.field-text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.field-mask--file,.field-mask--input,.field-mask--textarea{cursor:text;min-height:calc(var(--padding-vertical)*2 + var(--size))}.field-mask--file .field-mask-tag,.field-mask--input .field-mask-tag,.field-mask--textarea .field-mask-tag{padding:var(--padding-vertical)var(--padding-horizontal);flex:auto;min-width:0}.field-mask--file .field-mask-tag[type=number],.field-mask--input .field-mask-tag[type=number],.field-mask--textarea .field-mask-tag[type=number]{appearance:textfield}.field-mask--file textarea.field-mask-tag,.field-mask--input textarea.field-mask-tag,.field-mask--textarea textarea.field-mask-tag{white-space:normal}.field-mask--file{cursor:pointer}.field-mask--select{cursor:pointer;padding:var(--padding-vertical)calc(var(--padding-horizontal)/1.5 + var(--arrow-size))var(--padding-vertical)var(--padding-horizontal)}.field-mask--select.--padding{padding-right:calc(var(--padding-horizontal)*1.5 + var(--arrow-size))}.field-mask-arrow{right:calc(var(--padding-horizontal) + var(--arrow-spacer));bottom:calc(50% + var(--arrow-spacer));border-color:var(--border-color);border-style:var(--border-style);border-width:0 var(--border-width)var(--border-width)0;content:"";height:var(--arrow-size);width:var(--arrow-size);position:absolute;transform:translateY(50%)rotate(45deg)}.field-mask-text{padding-right:var(--padding-horizontal);pointer-events:none}}
|
|
1
|
+
@layer components {button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;background:0 0;border:0;border-radius:0;margin:0;padding:0}button,button:active,button:focus,button:hover,input,input:active,input:focus,input:hover,select,select:active,select:focus,select:hover,textarea,textarea:active,textarea:focus,textarea:hover{outline:none}button:invalid,input:invalid,select:invalid,textarea:invalid{box-shadow:none}form{width:100%;margin:0;padding:0}label{cursor:pointer}.field{--margin-horizontal:0px;--margin-vertical:var(--size-300);--width:100%}.field-description,.field-error{--font-size:var(--font-size-300)}.field-error{--color:var(--color-red-400)}.field-mask{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-default:var(--background);--border-radius:var(--border-radius-400);--border-style:solid;--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--outline-opacity:var(--outline-opacity-default);--outline-opacity-active:.32;--outline-opacity-default:0;--outline-opacity-hover:0;--outline-opacity-pressed:0;--outline-spacing:0px;--outline-width:var(--outline-width-default);--outline-width-active:4px;--outline-width-default:0px;--outline-width-hover:0px;--outline-width-pressed:0px;--padding-horizontal:0px;--padding-vertical:var(--size-400)}.field.--active>.field-mask,.field.--active :not(.field) .field-mask{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--color:var(--color-active);--outline-opacity:var(--outline-opacity-active);--outline-width:var(--outline-width-active)}label.field:not(.--active):not(.--active):hover>.field-mask,.field:not(.--active):not(label) .field-mask:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover);--outline-opacity:var(--outline-opacity-hover);--outline-width:var(--outline-width-hover)}label.field:not(.--active):not(.--active):active>.field-mask,.field:not(.--active):not(label) .field-mask:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed);--outline-opacity:var(--outline-opacity-pressed);--outline-width:var(--outline-width-pressed)}.field-mask--outline:not(.--active):active{--border-color:var(--border-color-default)}.field-mask--outline:not(.--active):active:before{--outline-width:0px}.field-required{--border-radius:100%;--size:6px}.field-title{--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--font-size:var(--font-size-400);--font-weight:var(--font-weight-500)}.field.--active .field-title{--color:var(--color-active)}.field:not(.--active):hover .field-title{--color:var(--color-hover)}.field:not(.--active):active .field-title{--color:var(--color-pressed)}.field label.field:not(.--active):hover,.field:not(label):not(.--active) .field-mask:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover);--outline-opacity:var(--outline-opacity-hover);--outline-width:var(--outline-width-hover)}.field label.field:not(.--active):active,.field:not(label):not(.--active) .field-mask:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed);--outline-opacity:var(--outline-opacity-pressed);--outline-width:var(--outline-width-pressed)}.field-mask--checkbox,.field-mask--radio,.field-mask--switch{--accent:var(--accent-default);--accent-active:var(--accent-default);--accent-default:var(--color-white-400);--accent-hover:var(--accent-default);--accent-pressed:var(--accent-default);--height:var(--size);--opacity:var(--opacity-default);--opacity-active:var(--opacity-default);--opacity-default:1;--opacity-hover:var(--opacity-default);--opacity-pressed:var(--opacity-default);--rotate:0deg;--scale:var(--scale-default);--scale-active:var(--scale-default);--scale-default:1;--scale-hover:var(--scale-default);--scale-pressed:var(--scale-default);--size:var(--size-600);--width-switch:40px}.field-mask--checkbox:before,.field-mask--radio:before,.field-mask--switch:before{--translateX:0px;--translateY:0px}.field-mask--checkbox label.field:not(.--active):not(.--active):hover,.field:not(label):not(.--active) .field-mask--checkbox:not(.--active):hover,.field-mask--radio label.field:not(.--active):not(.--active):hover,.field:not(label):not(.--active) .field-mask--radio:not(.--active):hover,.field-mask--switch label.field:not(.--active):not(.--active):hover,.field:not(label):not(.--active) .field-mask--switch:not(.--active):hover{--accent:var(--accent-hover);--opacity:var(--opacity-hover);--scale:var(--scale-hover)}.field-mask--checkbox label.field:not(.--active):not(.--active):active,.field:not(label):not(.--active) .field-mask--checkbox:not(.--active):active,.field-mask--radio label.field:not(.--active):not(.--active):active,.field:not(label):not(.--active) .field-mask--radio:not(.--active):active,.field-mask--switch label.field:not(.--active):not(.--active):active,.field:not(label):not(.--active) .field-mask--switch:not(.--active):active{--accent:var(--accent-pressed);--opacity:var(--opacity-pressed);--scale:var(--scale-pressed)}.field.--active .field-mask--checkbox,.field.--active .field-mask--radio,.field.--active .field-mask--switch{--accent:var(--accent-active);--opacity:var(--opacity-active);--scale:var(--scale-active)}.field-mask--checkbox,.field-mask--radio{--margin-horizontal:calc(var(--width-switch) - var(--width));--width:var(--height)}.field-mask--radio:before,.field-mask--switch:before{--box-shadow:0 1px 0 #00000029}.field-mask--checkbox{--border-radius:var(--border-radius-300);--rotate:45deg;--scale-active:1;--scale-default:0;--scale-hover:1.08;--scale-pressed:.98}.field-mask--checkbox:before{--box-shadow:1px 1px 0 #00000029;--border-width:5px;--height:110%;--translateX:108%;--translateY:8%;--width:50%}.field:not(.--active):not(:hover) .field-mask--checkbox:before{--translateY:100%}.field-mask--radio{--border-radius:100%;--opacity-active:1;--opacity-default:.4;--scale-active:.9;--scale-default:0;--scale-hover:.8;--scale-pressed:.7}.field-mask--radio:before{--height:calc((var(--size)/2) - (var(--border-width)*2));--translateX:50%;--translateY:50%;--width:var(--height)}.field-mask--switch{--border-radius:240px;--padding-horizontal:var(--border-width-400);--padding-vertical:var(--border-width-400);--width:var(--width-switch)}.field-mask--switch:before{--height:calc(var(--size) - (var(--border-width)*2) - (var(--padding-vertical)*2));--width:var(--height)}.field.--active .field-mask--switch:before{--translateX:calc(var(--width-switch) - (var(--border-width)*2) - var(--height) - (var(--padding-horizontal)*2))}.field-mask--range{--background:var(--color-black-300);--border-width:var(--border-width-700);--height:var(--size-200);--thumb-size:var(--size-400);--width:100%}.field-mask--file,.field-mask--input,.field-mask--select,.field-mask--textarea{--font-size:var(--font-size-400);--line-height:var(--line-height-400);--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400)}.field-mask--file,.field-mask--input,.field-mask--textarea{--size:var(--size-400)}.field-mask--select{--arrow-spacer:1px;--arrow-size:6px}.field-mask-arrow{--border-width:var(--border-width-500)}.field{gap:var(--margin-vertical)var(--margin-horizontal);transition:background var(--transition-duration)ease-in-out,border-color var(--transition-duration)ease-in-out,box-shadow var(--transition-duration)ease-in-out,color var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out;width:var(--width);z-index:1;flex-flow:column;display:flex;position:relative}.field:not(.--active):hover{z-index:8}.field.--active{z-index:9}.field-description,.field-error,.field-title{color:var(--color);font-size:var(--font-size);word-wrap:break-word;width:100%;position:relative}.field-description:empty,.field-error:empty,.field-title:empty{height:0;margin:0}.field-error{animation:.32s linear fieldError}@keyframes fieldError{0%{transform:translate(8px)}20%{transform:translate(-8px)}40%{transform:translate(4px)}60%{transform:translate(-4px)}80%{transform:translate(2px)}to{transform:translate(0)}}.field-mask:after{border-radius:inherit;box-shadow:var(--box-shadow);content:"";pointer-events:none;transition:box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;z-index:-1;position:absolute;inset:0}.field-mask--flat:after{display:none}.field-mask--outline:before{box-shadow:0 0 0 var(--outline-width)var(--border-color);border-radius:var(--border-radius);content:"";opacity:var(--outline-opacity);pointer-events:none;transition:box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out;z-index:1;position:absolute;inset:0}.field-mask-tag--hidden{appearance:none;opacity:0;pointer-events:none;z-index:-1;width:0;height:0;position:absolute;top:0;left:0}.field-required{background:var(--background);border-radius:var(--border-radius);height:var(--size);width:var(--size)}.field-title{font-weight:var(--font-weight);z-index:1}.field-mask--checkbox,.field-mask--radio,.field-mask--switch{background:var(--background);border-color:var(--border-color);border-radius:var(--border-radius);border-style:var(--border-style);border-width:var(--border-width);flex:0 0 var(--width);height:var(--height);transition:background var(--transition-duration)ease-in-out,border-color var(--transition-duration)ease-in-out,box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;width:var(--width);position:relative}.field-mask--checkbox:invalid,.field-mask--checkbox:required,.field-mask--radio:invalid,.field-mask--radio:required,.field-mask--switch:invalid,.field-mask--switch:required{box-shadow:none}.field-mask--checkbox:before,.field-mask--radio:before,.field-mask--switch:before{box-shadow:var(--box-shadow);content:"";height:var(--height);opacity:var(--opacity);transform:translate(var(--translateX),var(--translateY))rotate(var(--rotate))scale(var(--scale));width:var(--width)}.field-mask--checkbox .field-mask-tag,.field-mask--radio .field-mask-tag,.field-mask--switch .field-mask-tag{opacity:0;pointer-events:none;z-index:0;width:0;height:0;position:absolute;top:0;left:0}.field-mask--checkbox:before,.field-mask--radio:before{position:absolute;bottom:50%;right:50%}.field-mask--radio:before,.field-mask--switch:before{background:var(--accent);border-radius:inherit;transform-origin:50%}.field-mask--checkbox:before{border-bottom:var(--border-width)solid var(--accent);border-right:var(--border-width)solid var(--accent);transform-origin:0}.field-mask--switch:before{top:var(--padding-vertical);left:var(--padding-horizontal);position:absolute}.field-mask--range{margin:calc((var(--height) - var(--thumb-size))/2)0}.field-mask--range .field-mask-tag{background:var(--background);height:var(--height);width:var(--width);border:0;border-radius:240px;transition:opacity .2s}.field-mask--range .field-mask-tag::-moz-range-thumb{background:var(--color-purple-400);border:var(--border-width)solid var(--border-color);cursor:pointer;height:var(--thumb-size);width:var(--thumb-size);border-radius:100%}.field-mask--range .field-mask-tag::-webkit-slider-thumb{background:var(--color-purple-400);border:var(--border-width)solid var(--border-color);cursor:pointer;height:var(--thumb-size);width:var(--thumb-size);border-radius:100%}.field-mask--range .field-mask-tag{appearance:none;outline:none}.field-mask--range .field-mask-tag::-moz-range-thumb{appearance:none;outline:none}.field-mask--range .field-mask-tag::-webkit-slider-thumb{appearance:none;outline:none}.field-mask--file,.field-mask--input,.field-mask--select,.field-mask--textarea{background:var(--background);border:var(--border-width)var(--border-style)var(--border-color);border-radius:var(--border-radius);font-size:var(--font-size);line-height:var(--line-height);flex-wrap:wrap;align-items:center;width:100%;display:flex;position:relative}.field-mask--file:invalid,.field-mask--file:required,.field-mask--input:invalid,.field-mask--input:required,.field-mask--select:invalid,.field-mask--select:required,.field-mask--textarea:invalid,.field-mask--textarea:required{box-shadow:none}.field-mask--file,.field-mask--file .field-mask-tag,.field-mask--input,.field-mask--input .field-mask-tag,.field-mask--select,.field-mask--select .field-mask-tag,.field-mask--textarea,.field-mask--textarea .field-mask-tag{color:var(--color)}.field-mask--file.field-text,.field-mask--input.field-text,.field-mask--select.field-text,.field-mask--textarea.field-text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.field-mask--file,.field-mask--input,.field-mask--textarea{cursor:text;min-height:calc(var(--padding-vertical)*2 + var(--size))}.field-mask--file .field-mask-tag,.field-mask--input .field-mask-tag,.field-mask--textarea .field-mask-tag{padding:var(--padding-vertical)var(--padding-horizontal);flex:auto;min-width:0}.field-mask--file .field-mask-tag[type=number],.field-mask--input .field-mask-tag[type=number],.field-mask--textarea .field-mask-tag[type=number]{appearance:textfield}.field-mask--file textarea.field-mask-tag,.field-mask--input textarea.field-mask-tag,.field-mask--textarea textarea.field-mask-tag{white-space:normal}.field-mask--file{cursor:pointer}.field-mask--select{cursor:pointer;padding:var(--padding-vertical)calc(var(--padding-horizontal)/1.5 + var(--arrow-size))var(--padding-vertical)var(--padding-horizontal)}.field-mask--select.--padding{padding-right:calc(var(--padding-horizontal)*1.5 + var(--arrow-size))}.field-mask-arrow{right:calc(var(--padding-horizontal) + var(--arrow-spacer));bottom:calc(50% + var(--arrow-spacer));border-color:var(--border-color);border-style:var(--border-style);border-width:0 var(--border-width)var(--border-width)0;content:"";height:var(--arrow-size);width:var(--arrow-size);position:absolute;transform:translateY(50%)rotate(45deg)}.field-mask-text{padding-right:var(--padding-horizontal);pointer-events:none}}
|
|
2
2
|
/*$vite$:1*/
|
package/package.json
CHANGED
|
@@ -8,8 +8,8 @@ import './scss/index.scss';
|
|
|
8
8
|
|
|
9
9
|
const { checkbox: cb, radio, switch: sw } = checkbox;
|
|
10
10
|
|
|
11
|
-
const { file, text, textarea } = input;
|
|
11
|
+
const { file, range, text, textarea } = input;
|
|
12
12
|
|
|
13
13
|
|
|
14
|
-
export default { checkbox: cb, description, file, radio, select, switch: sw, textarea, text, title };
|
|
15
|
-
export { cb as checkbox, description, file, radio, select, sw as switch, textarea, text, title };
|
|
14
|
+
export default { checkbox: cb, description, file, radio, range, select, switch: sw, textarea, text, title };
|
|
15
|
+
export { cb as checkbox, description, file, radio, range, select, sw as switch, textarea, text, title };
|
|
@@ -28,8 +28,7 @@ const field = template.factory(
|
|
|
28
28
|
});
|
|
29
29
|
|
|
30
30
|
return html`
|
|
31
|
-
<div
|
|
32
|
-
class='field'
|
|
31
|
+
<div class='field'
|
|
33
32
|
${omit(attributes, OMIT_FIELD)}
|
|
34
33
|
${{
|
|
35
34
|
class: () => state.active && '--active',
|
|
@@ -54,32 +53,45 @@ const field = template.factory(
|
|
|
54
53
|
const file = template.factory(
|
|
55
54
|
function(this: { state: { active: boolean, error: string } }, attributes: A, content) {
|
|
56
55
|
return html`
|
|
57
|
-
<label
|
|
58
|
-
class='field-mask field-mask--file'
|
|
59
|
-
${omit(attributes, OMIT_TAG)}
|
|
60
|
-
>
|
|
56
|
+
<label class='field-mask field-mask--file' ${omit(attributes, OMIT_TAG)}>
|
|
61
57
|
<input
|
|
62
58
|
class='field-mask-tag field-mask-tag--hidden'
|
|
59
|
+
onrender=${form.input.onrender(this.state)}
|
|
63
60
|
type='file'
|
|
64
61
|
${attributes['field-mask-tag']}
|
|
65
|
-
${{
|
|
66
|
-
onrender: form.input.onrender(this.state)
|
|
67
|
-
}}
|
|
68
62
|
>
|
|
69
|
-
|
|
70
63
|
${content}
|
|
71
64
|
</label>
|
|
72
65
|
`;
|
|
73
66
|
}
|
|
74
67
|
);
|
|
75
68
|
|
|
69
|
+
const range = template.factory(
|
|
70
|
+
function(attributes: A & { state?: { value: number } }, content) {
|
|
71
|
+
let a = (attributes['field-mask-tag'] || {}) as Attributes,
|
|
72
|
+
state = attributes.state || reactive({ value: 0 });
|
|
73
|
+
|
|
74
|
+
return html`
|
|
75
|
+
<div class='field-mask field-mask--range --border-state --border-black' ${omit(attributes, OMIT_TAG)}>
|
|
76
|
+
<input
|
|
77
|
+
class='field-mask-tag'
|
|
78
|
+
oninput=${(e: InputEvent) => {
|
|
79
|
+
state.value = Number((e.target as HTMLInputElement).value);
|
|
80
|
+
}}
|
|
81
|
+
type='range'
|
|
82
|
+
value='${(a.value as number) || state.value || 0}'
|
|
83
|
+
${a}
|
|
84
|
+
>
|
|
85
|
+
${content}
|
|
86
|
+
</div>
|
|
87
|
+
`;
|
|
88
|
+
}
|
|
89
|
+
);
|
|
90
|
+
|
|
76
91
|
const text = template.factory(
|
|
77
92
|
function(this: { state: { active: boolean, error: string } }, attributes: A, content) {
|
|
78
93
|
return html`
|
|
79
|
-
<label
|
|
80
|
-
class='field-mask field-mask--input'
|
|
81
|
-
${omit(attributes, OMIT_TAG)}
|
|
82
|
-
>
|
|
94
|
+
<label class='field-mask field-mask--input' ${omit(attributes, OMIT_TAG)}>
|
|
83
95
|
<input
|
|
84
96
|
class='field-mask-tag'
|
|
85
97
|
${attributes['field-mask-tag']}
|
|
@@ -96,19 +108,14 @@ const text = template.factory(
|
|
|
96
108
|
|
|
97
109
|
const textarea = template.factory(
|
|
98
110
|
function(this: { state: { active: boolean, error: string } }, attributes: A, content) {
|
|
99
|
-
let a = attributes['field-mask-tag'] || {};
|
|
111
|
+
let a = (attributes['field-mask-tag'] || {}) as Attributes;
|
|
100
112
|
|
|
101
113
|
return html`
|
|
102
|
-
<label
|
|
103
|
-
class='field-mask field-mask--textarea'
|
|
104
|
-
${omit(attributes, OMIT_TAG)}
|
|
105
|
-
>
|
|
114
|
+
<label class='field-mask field-mask--textarea' ${omit(attributes, OMIT_TAG)}>
|
|
106
115
|
<textarea
|
|
107
116
|
class='field-mask-tag'
|
|
117
|
+
onrender=${form.input.onrender(this.state)}
|
|
108
118
|
${a}
|
|
109
|
-
${{
|
|
110
|
-
onrender: form.input.onrender(this.state)
|
|
111
|
-
}}
|
|
112
119
|
>
|
|
113
120
|
${a.value as string}
|
|
114
121
|
</textarea>
|
|
@@ -121,6 +128,7 @@ const textarea = template.factory(
|
|
|
121
128
|
|
|
122
129
|
export default {
|
|
123
130
|
file: field.bind({ mask: file }),
|
|
131
|
+
range: field.bind({ mask: range }),
|
|
124
132
|
text: field.bind({ mask: text }),
|
|
125
133
|
textarea: field.bind({ mask: textarea })
|
|
126
134
|
};
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
@mixin css() {
|
|
2
|
+
&-mask {
|
|
3
|
+
&--range {
|
|
4
|
+
margin: calc((var(--height) - var(--thumb-size)) / 2) 0;
|
|
5
|
+
|
|
6
|
+
.field-mask-tag {
|
|
7
|
+
background: var(--background);
|
|
8
|
+
border-radius: 240px;
|
|
9
|
+
border: 0px;
|
|
10
|
+
height: var(--height);
|
|
11
|
+
transition: opacity .2s;
|
|
12
|
+
width: var(--width);
|
|
13
|
+
|
|
14
|
+
&::-moz-range-thumb,
|
|
15
|
+
&::-webkit-slider-thumb {
|
|
16
|
+
background: var(--color-purple-400);
|
|
17
|
+
border-radius: 100%;
|
|
18
|
+
border: var(--border-width) solid var(--border-color);
|
|
19
|
+
cursor: pointer;
|
|
20
|
+
height: var(--thumb-size);
|
|
21
|
+
width: var(--thumb-size);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
&,
|
|
25
|
+
&::-moz-range-thumb,
|
|
26
|
+
&::-webkit-slider-thumb {
|
|
27
|
+
appearance: none;
|
|
28
|
+
outline: none;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
@mixin variables() {
|
|
36
|
+
&-mask {
|
|
37
|
+
&--range {
|
|
38
|
+
--background: var(--color-black-300);
|
|
39
|
+
--border-width: var(--border-width-700);
|
|
40
|
+
--height: var(--size-200);
|
|
41
|
+
--thumb-size: var(--size-400);
|
|
42
|
+
--width: 100%;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|