godown 3.5.0 → 3.5.2
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/README.md +0 -4
- package/build/godown+lit.iife.js +2 -2
- package/build/godown+lit.iife.js.map +1 -1
- package/build/godown+lit.js +2 -2
- package/build/godown+lit.js.map +1 -1
- package/build/godown+lit.umd.js +2 -2
- package/build/godown+lit.umd.js.map +1 -1
- package/build/godown.iife.js +2 -2
- package/build/godown.js +2 -2
- package/build/godown.js.map +1 -1
- package/build/godown.umd.js +2 -2
- package/build/godown.umd.js.map +1 -1
- package/components/badge.js +1 -1
- package/components/badge.js.map +1 -1
- package/components/button.js +1 -1
- package/components/button.js.map +1 -1
- package/components/details.js +1 -1
- package/components/details.js.map +1 -1
- package/components/dialog.js +1 -1
- package/components/dialog.js.map +1 -1
- package/components/input.js +1 -1
- package/components/input.js.map +1 -1
- package/components/select.d.ts.map +1 -1
- package/components/select.js +1 -1
- package/components/select.js.map +1 -1
- package/core/super-input.d.ts +1 -0
- package/core/super-input.d.ts.map +1 -1
- package/core/super-input.js +1 -1
- package/core/super-input.js.map +1 -1
- package/core/super-openable.d.ts +0 -1
- package/core/super-openable.d.ts.map +1 -1
- package/core/super-openable.js +1 -1
- package/core/super-openable.js.map +1 -1
- package/custom-elements.json +1 -1
- package/package.json +6 -18
- package/src/components/button.ts +2 -3
- package/src/components/details.ts +1 -1
- package/src/components/dialog.ts +4 -6
- package/src/components/input.ts +1 -0
- package/src/components/select.ts +1 -1
- package/src/core/super-input.ts +6 -11
- package/src/core/super-openable.ts +0 -4
- package/tsconfig.json +33 -0
- package/web-types.json +1 -1
- package/dev/alert.d.ts +0 -9
- package/dev/alert.d.ts.map +0 -1
- package/dev/alert.js +0 -5
- package/dev/alert.js.map +0 -1
- package/dev/avatar.d.ts +0 -9
- package/dev/avatar.d.ts.map +0 -1
- package/dev/avatar.js +0 -5
- package/dev/avatar.js.map +0 -1
- package/dev/badge.d.ts +0 -9
- package/dev/badge.d.ts.map +0 -1
- package/dev/badge.js +0 -5
- package/dev/badge.js.map +0 -1
- package/dev/breath.d.ts +0 -9
- package/dev/breath.d.ts.map +0 -1
- package/dev/breath.js +0 -5
- package/dev/breath.js.map +0 -1
- package/dev/button.d.ts +0 -9
- package/dev/button.d.ts.map +0 -1
- package/dev/button.js +0 -5
- package/dev/button.js.map +0 -1
- package/dev/card.d.ts +0 -9
- package/dev/card.d.ts.map +0 -1
- package/dev/card.js +0 -5
- package/dev/card.js.map +0 -1
- package/dev/carousel.d.ts +0 -9
- package/dev/carousel.d.ts.map +0 -1
- package/dev/carousel.js +0 -5
- package/dev/carousel.js.map +0 -1
- package/dev/components/alert.d.ts +0 -55
- package/dev/components/alert.d.ts.map +0 -1
- package/dev/components/alert.js +0 -236
- package/dev/components/alert.js.map +0 -1
- package/dev/components/avatar.d.ts +0 -33
- package/dev/components/avatar.d.ts.map +0 -1
- package/dev/components/avatar.js +0 -119
- package/dev/components/avatar.js.map +0 -1
- package/dev/components/badge.d.ts +0 -31
- package/dev/components/badge.d.ts.map +0 -1
- package/dev/components/badge.js +0 -122
- package/dev/components/badge.js.map +0 -1
- package/dev/components/breath.d.ts +0 -36
- package/dev/components/breath.d.ts.map +0 -1
- package/dev/components/breath.js +0 -135
- package/dev/components/breath.js.map +0 -1
- package/dev/components/button.d.ts +0 -60
- package/dev/components/button.d.ts.map +0 -1
- package/dev/components/button.js +0 -288
- package/dev/components/button.js.map +0 -1
- package/dev/components/card.d.ts +0 -27
- package/dev/components/card.d.ts.map +0 -1
- package/dev/components/card.js +0 -87
- package/dev/components/card.js.map +0 -1
- package/dev/components/carousel.d.ts +0 -39
- package/dev/components/carousel.d.ts.map +0 -1
- package/dev/components/carousel.js +0 -184
- package/dev/components/carousel.js.map +0 -1
- package/dev/components/details.d.ts +0 -24
- package/dev/components/details.d.ts.map +0 -1
- package/dev/components/details.js +0 -124
- package/dev/components/details.js.map +0 -1
- package/dev/components/dialog.d.ts +0 -43
- package/dev/components/dialog.d.ts.map +0 -1
- package/dev/components/dialog.js +0 -154
- package/dev/components/dialog.js.map +0 -1
- package/dev/components/divider.d.ts +0 -17
- package/dev/components/divider.d.ts.map +0 -1
- package/dev/components/divider.js +0 -64
- package/dev/components/divider.js.map +0 -1
- package/dev/components/dragbox.d.ts +0 -42
- package/dev/components/dragbox.d.ts.map +0 -1
- package/dev/components/dragbox.js +0 -126
- package/dev/components/dragbox.js.map +0 -1
- package/dev/components/flex.d.ts +0 -34
- package/dev/components/flex.d.ts.map +0 -1
- package/dev/components/flex.js +0 -73
- package/dev/components/flex.js.map +0 -1
- package/dev/components/form.d.ts +0 -24
- package/dev/components/form.d.ts.map +0 -1
- package/dev/components/form.js +0 -76
- package/dev/components/form.js.map +0 -1
- package/dev/components/grid.d.ts +0 -38
- package/dev/components/grid.d.ts.map +0 -1
- package/dev/components/grid.js +0 -67
- package/dev/components/grid.js.map +0 -1
- package/dev/components/heading.d.ts +0 -31
- package/dev/components/heading.d.ts.map +0 -1
- package/dev/components/heading.js +0 -127
- package/dev/components/heading.js.map +0 -1
- package/dev/components/input.d.ts +0 -23
- package/dev/components/input.d.ts.map +0 -1
- package/dev/components/input.js +0 -99
- package/dev/components/input.js.map +0 -1
- package/dev/components/layout.d.ts +0 -28
- package/dev/components/layout.d.ts.map +0 -1
- package/dev/components/layout.js +0 -96
- package/dev/components/layout.js.map +0 -1
- package/dev/components/link.d.ts +0 -54
- package/dev/components/link.d.ts.map +0 -1
- package/dev/components/link.js +0 -110
- package/dev/components/link.js.map +0 -1
- package/dev/components/progress.d.ts +0 -16
- package/dev/components/progress.d.ts.map +0 -1
- package/dev/components/progress.js +0 -101
- package/dev/components/progress.js.map +0 -1
- package/dev/components/range.d.ts +0 -122
- package/dev/components/range.d.ts.map +0 -1
- package/dev/components/range.js +0 -391
- package/dev/components/range.js.map +0 -1
- package/dev/components/rotate.d.ts +0 -30
- package/dev/components/rotate.d.ts.map +0 -1
- package/dev/components/rotate.js +0 -93
- package/dev/components/rotate.js.map +0 -1
- package/dev/components/router.d.ts +0 -116
- package/dev/components/router.d.ts.map +0 -1
- package/dev/components/router.js +0 -240
- package/dev/components/router.js.map +0 -1
- package/dev/components/select.d.ts +0 -53
- package/dev/components/select.d.ts.map +0 -1
- package/dev/components/select.js +0 -269
- package/dev/components/select.js.map +0 -1
- package/dev/components/skeleton.d.ts +0 -28
- package/dev/components/skeleton.d.ts.map +0 -1
- package/dev/components/skeleton.js +0 -122
- package/dev/components/skeleton.js.map +0 -1
- package/dev/components/split.d.ts +0 -56
- package/dev/components/split.d.ts.map +0 -1
- package/dev/components/split.js +0 -220
- package/dev/components/split.js.map +0 -1
- package/dev/components/switch.d.ts +0 -32
- package/dev/components/switch.d.ts.map +0 -1
- package/dev/components/switch.js +0 -147
- package/dev/components/switch.js.map +0 -1
- package/dev/components/text.d.ts +0 -21
- package/dev/components/text.d.ts.map +0 -1
- package/dev/components/text.js +0 -96
- package/dev/components/text.js.map +0 -1
- package/dev/components/time.d.ts +0 -36
- package/dev/components/time.d.ts.map +0 -1
- package/dev/components/time.js +0 -75
- package/dev/components/time.js.map +0 -1
- package/dev/components/tooltip.d.ts +0 -51
- package/dev/components/tooltip.d.ts.map +0 -1
- package/dev/components/tooltip.js +0 -140
- package/dev/components/tooltip.js.map +0 -1
- package/dev/components/typewriter.d.ts +0 -49
- package/dev/components/typewriter.d.ts.map +0 -1
- package/dev/components/typewriter.js +0 -149
- package/dev/components/typewriter.js.map +0 -1
- package/dev/core/direction.d.ts +0 -27
- package/dev/core/direction.d.ts.map +0 -1
- package/dev/core/direction.js +0 -56
- package/dev/core/direction.js.map +0 -1
- package/dev/core/global-style.d.ts +0 -20
- package/dev/core/global-style.d.ts.map +0 -1
- package/dev/core/global-style.js +0 -82
- package/dev/core/global-style.js.map +0 -1
- package/dev/core/outline.d.ts +0 -20
- package/dev/core/outline.d.ts.map +0 -1
- package/dev/core/outline.js +0 -44
- package/dev/core/outline.js.map +0 -1
- package/dev/core/super-anchor.d.ts +0 -18
- package/dev/core/super-anchor.d.ts.map +0 -1
- package/dev/core/super-anchor.js +0 -60
- package/dev/core/super-anchor.js.map +0 -1
- package/dev/core/super-input.d.ts +0 -43
- package/dev/core/super-input.d.ts.map +0 -1
- package/dev/core/super-input.js +0 -203
- package/dev/core/super-input.js.map +0 -1
- package/dev/core/super-openable.d.ts +0 -16
- package/dev/core/super-openable.d.ts.map +0 -1
- package/dev/core/super-openable.js +0 -36
- package/dev/core/super-openable.js.map +0 -1
- package/dev/details.d.ts +0 -9
- package/dev/details.d.ts.map +0 -1
- package/dev/details.js +0 -5
- package/dev/details.js.map +0 -1
- package/dev/dialog.d.ts +0 -9
- package/dev/dialog.d.ts.map +0 -1
- package/dev/dialog.js +0 -5
- package/dev/dialog.js.map +0 -1
- package/dev/divider.d.ts +0 -9
- package/dev/divider.d.ts.map +0 -1
- package/dev/divider.js +0 -5
- package/dev/divider.js.map +0 -1
- package/dev/dragbox.d.ts +0 -9
- package/dev/dragbox.d.ts.map +0 -1
- package/dev/dragbox.js +0 -5
- package/dev/dragbox.js.map +0 -1
- package/dev/flex.d.ts +0 -9
- package/dev/flex.d.ts.map +0 -1
- package/dev/flex.js +0 -5
- package/dev/flex.js.map +0 -1
- package/dev/form.d.ts +0 -9
- package/dev/form.d.ts.map +0 -1
- package/dev/form.js +0 -5
- package/dev/form.js.map +0 -1
- package/dev/grid.d.ts +0 -9
- package/dev/grid.d.ts.map +0 -1
- package/dev/grid.js +0 -5
- package/dev/grid.js.map +0 -1
- package/dev/heading.d.ts +0 -9
- package/dev/heading.d.ts.map +0 -1
- package/dev/heading.js +0 -5
- package/dev/heading.js.map +0 -1
- package/dev/index.d.ts +0 -31
- package/dev/index.d.ts.map +0 -1
- package/dev/index.js +0 -31
- package/dev/index.js.map +0 -1
- package/dev/input.d.ts +0 -9
- package/dev/input.d.ts.map +0 -1
- package/dev/input.js +0 -5
- package/dev/input.js.map +0 -1
- package/dev/layout.d.ts +0 -9
- package/dev/layout.d.ts.map +0 -1
- package/dev/layout.js +0 -5
- package/dev/layout.js.map +0 -1
- package/dev/link.d.ts +0 -9
- package/dev/link.d.ts.map +0 -1
- package/dev/link.js +0 -5
- package/dev/link.js.map +0 -1
- package/dev/progress.d.ts +0 -9
- package/dev/progress.d.ts.map +0 -1
- package/dev/progress.js +0 -5
- package/dev/progress.js.map +0 -1
- package/dev/range.d.ts +0 -9
- package/dev/range.d.ts.map +0 -1
- package/dev/range.js +0 -5
- package/dev/range.js.map +0 -1
- package/dev/rotate.d.ts +0 -9
- package/dev/rotate.d.ts.map +0 -1
- package/dev/rotate.js +0 -5
- package/dev/rotate.js.map +0 -1
- package/dev/router.d.ts +0 -9
- package/dev/router.d.ts.map +0 -1
- package/dev/router.js +0 -5
- package/dev/router.js.map +0 -1
- package/dev/select.d.ts +0 -9
- package/dev/select.d.ts.map +0 -1
- package/dev/select.js +0 -5
- package/dev/select.js.map +0 -1
- package/dev/skeleton.d.ts +0 -9
- package/dev/skeleton.d.ts.map +0 -1
- package/dev/skeleton.js +0 -5
- package/dev/skeleton.js.map +0 -1
- package/dev/split.d.ts +0 -9
- package/dev/split.d.ts.map +0 -1
- package/dev/split.js +0 -5
- package/dev/split.js.map +0 -1
- package/dev/switch.d.ts +0 -9
- package/dev/switch.d.ts.map +0 -1
- package/dev/switch.js +0 -5
- package/dev/switch.js.map +0 -1
- package/dev/text.d.ts +0 -9
- package/dev/text.d.ts.map +0 -1
- package/dev/text.js +0 -5
- package/dev/text.js.map +0 -1
- package/dev/time.d.ts +0 -9
- package/dev/time.d.ts.map +0 -1
- package/dev/time.js +0 -5
- package/dev/time.js.map +0 -1
- package/dev/tooltip.d.ts +0 -9
- package/dev/tooltip.d.ts.map +0 -1
- package/dev/tooltip.js +0 -5
- package/dev/tooltip.js.map +0 -1
- package/dev/typewriter.d.ts +0 -9
- package/dev/typewriter.d.ts.map +0 -1
- package/dev/typewriter.js +0 -5
- package/dev/typewriter.js.map +0 -1
@@ -1,122 +0,0 @@
|
|
1
|
-
import { __decorate } from "tslib";
|
2
|
-
import { attr, godown, htmlSlot, styles } from "@godown/element";
|
3
|
-
import iconPhoto from "@godown/f7-icon/icons/photo.js";
|
4
|
-
import { css, html } from "lit";
|
5
|
-
import { property, state } from "lit/decorators.js";
|
6
|
-
import { GlobalStyle, cssGlobalVars, scopePrefix } from "../core/global-style.js";
|
7
|
-
const protoName = "skeleton";
|
8
|
-
const cssScope = scopePrefix(protoName);
|
9
|
-
/**
|
10
|
-
* {@linkcode Skeleton} renders a skeleton screen.
|
11
|
-
*
|
12
|
-
* @slot loading - The content if loading is true.
|
13
|
-
* @slot - The content if loading is false.
|
14
|
-
* @category feedback
|
15
|
-
*/
|
16
|
-
let Skeleton = class Skeleton extends GlobalStyle {
|
17
|
-
constructor() {
|
18
|
-
super(...arguments);
|
19
|
-
/**
|
20
|
-
* Animation type.
|
21
|
-
* opacity animation only effect on slotted element and image icon.
|
22
|
-
*/
|
23
|
-
this.animation = "position";
|
24
|
-
/**
|
25
|
-
* If false, render slot only.
|
26
|
-
*/
|
27
|
-
this.loading = true;
|
28
|
-
}
|
29
|
-
render() {
|
30
|
-
if (!this.loading) {
|
31
|
-
return htmlSlot();
|
32
|
-
}
|
33
|
-
return html `
|
34
|
-
<div
|
35
|
-
part="root"
|
36
|
-
${attr(this.observedRecord)}
|
37
|
-
>
|
38
|
-
${this.type === "image" ? iconPhoto() : ""} ${htmlSlot("loading")}
|
39
|
-
</div>
|
40
|
-
`;
|
41
|
-
}
|
42
|
-
};
|
43
|
-
__decorate([
|
44
|
-
property()
|
45
|
-
], Skeleton.prototype, "type", void 0);
|
46
|
-
__decorate([
|
47
|
-
property()
|
48
|
-
], Skeleton.prototype, "animation", void 0);
|
49
|
-
__decorate([
|
50
|
-
state()
|
51
|
-
], Skeleton.prototype, "loading", void 0);
|
52
|
-
Skeleton = __decorate([
|
53
|
-
godown(protoName),
|
54
|
-
styles(css `
|
55
|
-
:host {
|
56
|
-
${cssScope}--from: var(${cssGlobalVars._colors.darkgray[9]});
|
57
|
-
${cssScope}--to: var(${cssGlobalVars._colors.darkgray[7]});
|
58
|
-
${cssScope}--deg: 95deg;
|
59
|
-
${cssScope}--duration: 1.5s;
|
60
|
-
${cssScope}--icon-size: 5em;
|
61
|
-
${cssScope}--icon-margin: .25em;
|
62
|
-
color: var(${cssGlobalVars._colors.darkgray[5]});
|
63
|
-
background: var(${cssScope}--from);
|
64
|
-
min-height: 1.5em;
|
65
|
-
width: 100%;
|
66
|
-
flex-shrink: 0;
|
67
|
-
display: block;
|
68
|
-
overflow: hidden;
|
69
|
-
}
|
70
|
-
|
71
|
-
[part="root"] {
|
72
|
-
height: 100%;
|
73
|
-
min-height: inherit;
|
74
|
-
text-align: center;
|
75
|
-
animation: var(${cssScope}--duration) ease-in-out 0s infinite none running;
|
76
|
-
}
|
77
|
-
|
78
|
-
svg {
|
79
|
-
--size: var(${cssScope}--icon-size);
|
80
|
-
font-size: var(--size);
|
81
|
-
margin: calc(var(--size) * 0.05);
|
82
|
-
}
|
83
|
-
|
84
|
-
[animation="position"] {
|
85
|
-
background-image: linear-gradient(
|
86
|
-
var(${cssScope}--deg),
|
87
|
-
var(${cssScope}--from) 36%,
|
88
|
-
var(${cssScope}--to) 50%,
|
89
|
-
var(${cssScope}--from) 64%
|
90
|
-
);
|
91
|
-
background-color: transparent;
|
92
|
-
background-size: 200% 100%;
|
93
|
-
animation-name: po;
|
94
|
-
}
|
95
|
-
|
96
|
-
@keyframes po {
|
97
|
-
from {
|
98
|
-
background-position: 150% center;
|
99
|
-
}
|
100
|
-
to {
|
101
|
-
background-position: -50% center;
|
102
|
-
}
|
103
|
-
}
|
104
|
-
|
105
|
-
[animation="opacity"] {
|
106
|
-
animation-name: op;
|
107
|
-
animation-direction: alternate;
|
108
|
-
}
|
109
|
-
|
110
|
-
@keyframes op {
|
111
|
-
50% {
|
112
|
-
opacity: 0.25;
|
113
|
-
}
|
114
|
-
to {
|
115
|
-
opacity: 1;
|
116
|
-
}
|
117
|
-
}
|
118
|
-
`)
|
119
|
-
], Skeleton);
|
120
|
-
export default Skeleton;
|
121
|
-
export { Skeleton };
|
122
|
-
//# sourceMappingURL=skeleton.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"skeleton.js","sourceRoot":"","sources":["../../src/components/skeleton.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,SAAS,MAAM,gCAAgC,CAAC;AACvD,OAAO,EAAuB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAElF,MAAM,SAAS,GAAG,UAAU,CAAC;AAC7B,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;AAExC;;;;;;GAMG;AAmEH,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,WAAW;IAAlC;;QAOE;;;WAGG;QAEH,cAAS,GAA2B,UAAU,CAAC;QAE/C;;WAEG;QAEH,YAAO,GAAG,IAAI,CAAC;IAejB,CAAC;IAbW,MAAM;QACd,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,OAAO,QAAQ,EAAE,CAAC;QACpB,CAAC;QACD,OAAO,IAAI,CAAA;;;UAGL,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC;;UAEzB,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,QAAQ,CAAC,SAAS,CAAC;;KAEpE,CAAC;IACJ,CAAC;CACF,CAAA;AA5BC;IADC,QAAQ,EAAE;sCACY;AAOvB;IADC,QAAQ,EAAE;2CACoC;AAM/C;IADC,KAAK,EAAE;yCACO;AAlBX,QAAQ;IAlEb,MAAM,CAAC,SAAS,CAAC;IACjB,MAAM,CAAC,GAAG,CAAA;;MAEL,QAAQ,eAAe,aAAa,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC;MACxD,QAAQ,aAAa,aAAa,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC;MACtD,QAAQ;MACR,QAAQ;MACR,QAAQ;MACR,QAAQ;iBACG,aAAa,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC;sBAC5B,QAAQ;;;;;;;;;;;;qBAYT,QAAQ;;;;kBAIX,QAAQ;;;;;;;YAOd,QAAQ;YACR,QAAQ;YACR,QAAQ;YACR,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BnB,CAAC;GACI,QAAQ,CAiCb;AAED,eAAe,QAAQ,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,CAAC"}
|
@@ -1,56 +0,0 @@
|
|
1
|
-
import { type HandlerEvent } from "@godown/element";
|
2
|
-
import { type TemplateResult } from "lit";
|
3
|
-
import { SuperInput } from "../core/super-input.js";
|
4
|
-
/**
|
5
|
-
* {@linkcode Split} renders multiple input boxes.
|
6
|
-
*
|
7
|
-
* Input: will move the focus box backward until the complete input from start to end.
|
8
|
-
*
|
9
|
-
* Delete: will move the focus box forward until the first and no inputs for each.
|
10
|
-
*
|
11
|
-
* @fires input - Fires when the input value changes.
|
12
|
-
* @fires change - Fires when the input value changes.
|
13
|
-
* @fires focus - Fires when the input is focused.
|
14
|
-
* @fires blur - Fires when the input is blurred.
|
15
|
-
* @category input
|
16
|
-
*/
|
17
|
-
declare class Split extends SuperInput {
|
18
|
-
/**
|
19
|
-
* The number of input boxes.
|
20
|
-
*/
|
21
|
-
len: number;
|
22
|
-
/**
|
23
|
-
* Focus index.
|
24
|
-
*/
|
25
|
-
index: number;
|
26
|
-
current: number;
|
27
|
-
currentValue: (string | void)[];
|
28
|
-
get observedRecord(): Record<string, any>;
|
29
|
-
protected render(): TemplateResult<1>;
|
30
|
-
connectedCallback(): void;
|
31
|
-
protected _handleInput(e: HandlerEvent<HTMLInputElement, InputEvent>): void;
|
32
|
-
/**
|
33
|
-
* Fill input with data.
|
34
|
-
*
|
35
|
-
* If data is null
|
36
|
-
* - If current value is null, move to before.
|
37
|
-
* - If current value is not null, delete it.
|
38
|
-
*
|
39
|
-
* If data is not null
|
40
|
-
* - If current value is null, input data.
|
41
|
-
* - If current value is not null, input data and move to after.
|
42
|
-
*
|
43
|
-
* If data is multiple characters,
|
44
|
-
* Fill input with data[0] and call fillInput with data.slice(1).
|
45
|
-
*
|
46
|
-
* @param data Input event data.
|
47
|
-
*/
|
48
|
-
protected fillInput(data: string | null): void;
|
49
|
-
focus(): void;
|
50
|
-
focusAt(i: number): void;
|
51
|
-
blur(): void;
|
52
|
-
reset(): void;
|
53
|
-
}
|
54
|
-
export default Split;
|
55
|
-
export { Split };
|
56
|
-
//# sourceMappingURL=split.d.ts.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"split.d.ts","sourceRoot":"","sources":["../../src/components/split.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAA+C,MAAM,iBAAiB,CAAC;AACjG,OAAO,EAAE,KAAK,cAAc,EAAa,MAAM,KAAK,CAAC;AAIrD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAKpD;;;;;;;;;;;;GAYG;AACH,cAgDM,KAAM,SAAQ,UAAU;IAC5B;;OAEG;IAEH,GAAG,SAAK;IAER;;OAEG;IAEH,KAAK,SAAM;IAGX,OAAO,SAAM;IAGb,YAAY,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAM;IAErC,IAAI,cAAc,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAExC;IAED,SAAS,CAAC,MAAM,IAAI,cAAc,CAAC,CAAC,CAAC;IAiCrC,iBAAiB,IAAI,IAAI;IAKzB,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,YAAY,CAAC,gBAAgB,EAAE,UAAU,CAAC,GAAG,IAAI;IAY3E;;;;;;;;;;;;;;;OAeG;IACH,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IA2C9C,KAAK,IAAI,IAAI;IAKb,OAAO,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI;IAMxB,IAAI,IAAI,IAAI;IAOZ,KAAK,IAAI,IAAI;CAQd;AAED,eAAe,KAAK,CAAC;AACrB,OAAO,EAAE,KAAK,EAAE,CAAC"}
|
package/dev/components/split.js
DELETED
@@ -1,220 +0,0 @@
|
|
1
|
-
import { __decorate } from "tslib";
|
2
|
-
import { attr, tokenList, godown, styles, loop, omit } from "@godown/element";
|
3
|
-
import { css, html } from "lit";
|
4
|
-
import { property, state } from "lit/decorators.js";
|
5
|
-
import { cssGlobalVars, scopePrefix } from "../core/global-style.js";
|
6
|
-
import { SuperInput } from "../core/super-input.js";
|
7
|
-
const protoName = "split";
|
8
|
-
const cssScope = scopePrefix(protoName);
|
9
|
-
/**
|
10
|
-
* {@linkcode Split} renders multiple input boxes.
|
11
|
-
*
|
12
|
-
* Input: will move the focus box backward until the complete input from start to end.
|
13
|
-
*
|
14
|
-
* Delete: will move the focus box forward until the first and no inputs for each.
|
15
|
-
*
|
16
|
-
* @fires input - Fires when the input value changes.
|
17
|
-
* @fires change - Fires when the input value changes.
|
18
|
-
* @fires focus - Fires when the input is focused.
|
19
|
-
* @fires blur - Fires when the input is blurred.
|
20
|
-
* @category input
|
21
|
-
*/
|
22
|
-
let Split = class Split extends SuperInput {
|
23
|
-
constructor() {
|
24
|
-
super(...arguments);
|
25
|
-
/**
|
26
|
-
* The number of input boxes.
|
27
|
-
*/
|
28
|
-
this.len = 6;
|
29
|
-
/**
|
30
|
-
* Focus index.
|
31
|
-
*/
|
32
|
-
this.index = -1;
|
33
|
-
this.current = -1;
|
34
|
-
this.currentValue = [];
|
35
|
-
}
|
36
|
-
get observedRecord() {
|
37
|
-
return omit(super.observedRecord, "outline-type");
|
38
|
-
}
|
39
|
-
render() {
|
40
|
-
return html `
|
41
|
-
<div
|
42
|
-
part="root"
|
43
|
-
${attr(this.observedRecord)}
|
44
|
-
>
|
45
|
-
${loop(this.len, (index) => html `
|
46
|
-
<span
|
47
|
-
part="input-box"
|
48
|
-
outline-type="${this.outlineType}"
|
49
|
-
class="${tokenList({ focus: this.current === index })}"
|
50
|
-
@click="${this.disabled ? null : () => this.focusAt(index)}"
|
51
|
-
>
|
52
|
-
${this.currentValue[index]}
|
53
|
-
</span>
|
54
|
-
`)}
|
55
|
-
<input
|
56
|
-
part="input"
|
57
|
-
id="${this.makeId}"
|
58
|
-
@blur=${this.blur}
|
59
|
-
@input="${this._handleInput}"
|
60
|
-
.value="${
|
61
|
-
/* Ensure that input always has a value of length this.len */
|
62
|
-
this.value.padStart(this.len, " ")}"
|
63
|
-
/>
|
64
|
-
</div>
|
65
|
-
`;
|
66
|
-
}
|
67
|
-
connectedCallback() {
|
68
|
-
super.connectedCallback();
|
69
|
-
this.reset();
|
70
|
-
}
|
71
|
-
_handleInput(e) {
|
72
|
-
e.stopPropagation();
|
73
|
-
if (this.compositing) {
|
74
|
-
return;
|
75
|
-
}
|
76
|
-
this.fillInput(e.data);
|
77
|
-
this.value = this.currentValue.join("");
|
78
|
-
this.dispatchEvent(new CustomEvent("input", { detail: this.value, composed: true, bubbles: true }));
|
79
|
-
}
|
80
|
-
/**
|
81
|
-
* Fill input with data.
|
82
|
-
*
|
83
|
-
* If data is null
|
84
|
-
* - If current value is null, move to before.
|
85
|
-
* - If current value is not null, delete it.
|
86
|
-
*
|
87
|
-
* If data is not null
|
88
|
-
* - If current value is null, input data.
|
89
|
-
* - If current value is not null, input data and move to after.
|
90
|
-
*
|
91
|
-
* If data is multiple characters,
|
92
|
-
* Fill input with data[0] and call fillInput with data.slice(1).
|
93
|
-
*
|
94
|
-
* @param data Input event data.
|
95
|
-
*/
|
96
|
-
fillInput(data) {
|
97
|
-
if (data === null) {
|
98
|
-
// delete
|
99
|
-
if (this.currentValue[this.current] !== null) {
|
100
|
-
// delete exist value
|
101
|
-
this.currentValue[this.current] = null;
|
102
|
-
}
|
103
|
-
else {
|
104
|
-
// go to before
|
105
|
-
this.currentValue[this.current - 1] = null;
|
106
|
-
const lastNotNull = this.currentValue.findLastIndex((a) => a !== null);
|
107
|
-
this.current = this.current - 1 < 0 ? (lastNotNull < 0 ? 0 : lastNotNull) : this.current - 1;
|
108
|
-
}
|
109
|
-
return;
|
110
|
-
}
|
111
|
-
const multiple = data.length > 1;
|
112
|
-
// input
|
113
|
-
this.currentValue[this.current] = data[0];
|
114
|
-
if (this.current + 1 >= this.len) {
|
115
|
-
// index overflow
|
116
|
-
this.current = this.currentValue.indexOf(null);
|
117
|
-
if (this.current === -1) {
|
118
|
-
this.blur();
|
119
|
-
}
|
120
|
-
}
|
121
|
-
else {
|
122
|
-
// go to after
|
123
|
-
this.current += 1;
|
124
|
-
}
|
125
|
-
if (multiple) {
|
126
|
-
const after = data.slice(1);
|
127
|
-
if (after) {
|
128
|
-
this.fillInput(after);
|
129
|
-
}
|
130
|
-
}
|
131
|
-
}
|
132
|
-
focus() {
|
133
|
-
this.focusAt(this.current);
|
134
|
-
super.focus();
|
135
|
-
}
|
136
|
-
focusAt(i) {
|
137
|
-
this.current = i;
|
138
|
-
this._input.focus();
|
139
|
-
this.dispatchEvent(new CustomEvent("focus", { detail: i, bubbles: true, composed: true }));
|
140
|
-
}
|
141
|
-
blur() {
|
142
|
-
this._input.blur();
|
143
|
-
this.current = -1;
|
144
|
-
super.blur();
|
145
|
-
this.dispatchEvent(new CustomEvent("blur", { bubbles: true, composed: true }));
|
146
|
-
}
|
147
|
-
reset() {
|
148
|
-
this.current = -1;
|
149
|
-
this.value = this.default;
|
150
|
-
this.currentValue = this.value.split("").concat(Array(this.len - this.value.length).fill(null));
|
151
|
-
if (this.index > -1) {
|
152
|
-
this.current = this.index;
|
153
|
-
}
|
154
|
-
}
|
155
|
-
};
|
156
|
-
__decorate([
|
157
|
-
property({ type: Number })
|
158
|
-
], Split.prototype, "len", void 0);
|
159
|
-
__decorate([
|
160
|
-
property({ type: Number })
|
161
|
-
], Split.prototype, "index", void 0);
|
162
|
-
__decorate([
|
163
|
-
state()
|
164
|
-
], Split.prototype, "current", void 0);
|
165
|
-
__decorate([
|
166
|
-
state()
|
167
|
-
], Split.prototype, "currentValue", void 0);
|
168
|
-
Split = __decorate([
|
169
|
-
godown(protoName),
|
170
|
-
styles(css `
|
171
|
-
:host {
|
172
|
-
display: block;
|
173
|
-
border-radius: 1px;
|
174
|
-
width: fit-content;
|
175
|
-
${cssScope}--size: 1.45em;
|
176
|
-
${cssScope}--gap: .25em;
|
177
|
-
}
|
178
|
-
|
179
|
-
:host([contents]) [part="root"] {
|
180
|
-
width: fit-content;
|
181
|
-
}
|
182
|
-
|
183
|
-
[part="root"] {
|
184
|
-
gap: var(${cssScope}--gap);
|
185
|
-
width: 100%;
|
186
|
-
position: relative;
|
187
|
-
vertical-align: top;
|
188
|
-
display: flex;
|
189
|
-
justify-content: space-between;
|
190
|
-
border-radius: inherit;
|
191
|
-
}
|
192
|
-
|
193
|
-
[part="input-box"] {
|
194
|
-
width: var(${cssScope}--size);
|
195
|
-
height: var(${cssScope}--size);
|
196
|
-
vertical-align: top;
|
197
|
-
border-radius: inherit;
|
198
|
-
display: inline-flex;
|
199
|
-
align-items: center;
|
200
|
-
justify-content: center;
|
201
|
-
}
|
202
|
-
|
203
|
-
[part="input"] {
|
204
|
-
width: 100%;
|
205
|
-
height: 100%;
|
206
|
-
opacity: 0;
|
207
|
-
background: none;
|
208
|
-
position: absolute;
|
209
|
-
z-index: -1;
|
210
|
-
}
|
211
|
-
|
212
|
-
.focus,
|
213
|
-
[part="input-box"]:active {
|
214
|
-
${cssGlobalVars.input}-outline-color: var(${cssGlobalVars.active});
|
215
|
-
}
|
216
|
-
`)
|
217
|
-
], Split);
|
218
|
-
export default Split;
|
219
|
-
export { Split };
|
220
|
-
//# sourceMappingURL=split.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"split.js","sourceRoot":"","sources":["../../src/components/split.ts"],"names":[],"mappings":";AAAA,OAAO,EAAqB,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACjG,OAAO,EAAuB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,SAAS,GAAG,OAAO,CAAC;AAC1B,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;AAExC;;;;;;;;;;;;GAYG;AAiDH,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,UAAU;IAA9B;;QACE;;WAEG;QAEH,QAAG,GAAG,CAAC,CAAC;QAER;;WAEG;QAEH,UAAK,GAAG,CAAC,CAAC,CAAC;QAGX,YAAO,GAAG,CAAC,CAAC,CAAC;QAGb,iBAAY,GAAsB,EAAE,CAAC;IA6IvC,CAAC;IA3IC,IAAI,cAAc;QAChB,OAAO,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC;IACpD,CAAC;IAES,MAAM;QACd,OAAO,IAAI,CAAA;;;UAGL,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC;;UAEzB,IAAI,CACJ,IAAI,CAAC,GAAG,EACR,CAAC,KAAa,EAAE,EAAE,CAAC,IAAI,CAAA;;;8BAGH,IAAI,CAAC,WAAW;uBACvB,SAAS,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,KAAK,EAAE,CAAC;wBAC3C,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;;gBAExD,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;;WAE7B,CACF;;;gBAGO,IAAI,CAAC,MAAM;kBACT,IAAI,CAAC,IAAI;oBACP,IAAI,CAAC,YAAY;oBACjB;QACR,6DAA6D;QAC7D,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,CACnC;;;KAGL,CAAC;IACJ,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC;IAES,YAAY,CAAC,CAA6C;QAClE,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QACvB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAExC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IACtG,CAAC;IAED;;;;;;;;;;;;;;;OAeG;IACO,SAAS,CAAC,IAAmB;QACrC,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC;YAClB,SAAS;YAET,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC;gBAC7C,qBAAqB;gBAErB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC;YACzC,CAAC;iBAAM,CAAC;gBACN,eAAe;gBAEf,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC;gBAC3C,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC;gBACvE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;YAC/F,CAAC;YACD,OAAO;QACT,CAAC;QAED,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QAEjC,QAAQ;QACR,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;QAC1C,IAAI,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;YACjC,iBAAiB;YAEjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;YAC/C,IAAI,IAAI,CAAC,OAAO,KAAK,CAAC,CAAC,EAAE,CAAC;gBACxB,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,CAAC;QACH,CAAC;aAAM,CAAC;YACN,cAAc;YAEd,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC;QACpB,CAAC;QAED,IAAI,QAAQ,EAAE,CAAC;YACb,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YAC5B,IAAI,KAAK,EAAE,CAAC;gBACV,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;YACxB,CAAC;QACH,CAAC;IACH,CAAC;IAED,KAAK;QACH,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC3B,KAAK,CAAC,KAAK,EAAE,CAAC;IAChB,CAAC;IAED,OAAO,CAAC,CAAS;QACf,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;QACjB,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;QACpB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IAC7F,CAAC;IAED,IAAI;QACF,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;QACnB,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC;QAClB,KAAK,CAAC,IAAI,EAAE,CAAC;QACb,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IACjF,CAAC;IAED,KAAK;QACH,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC;QAClB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;QAC1B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAChG,IAAI,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,CAAC;YACpB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC;QAC5B,CAAC;IACH,CAAC;CACF,CAAA;AAzJC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kCACnB;AAMR;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCAChB;AAGX;IADC,KAAK,EAAE;sCACK;AAGb;IADC,KAAK,EAAE;2CAC6B;AAjBjC,KAAK;IAhDV,MAAM,CAAC,SAAS,CAAC;IACjB,MAAM,CAAC,GAAG,CAAA;;;;;MAKL,QAAQ;MACR,QAAQ;;;;;;;;eAQC,QAAQ;;;;;;;;;;iBAUN,QAAQ;kBACP,QAAQ;;;;;;;;;;;;;;;;;;;MAmBpB,aAAa,CAAC,KAAK,uBAAuB,aAAa,CAAC,MAAM;;CAEnE,CAAC;GACI,KAAK,CA8JV;AAED,eAAe,KAAK,CAAC;AACrB,OAAO,EAAE,KAAK,EAAE,CAAC"}
|
@@ -1,32 +0,0 @@
|
|
1
|
-
import { type TemplateResult } from "lit";
|
2
|
-
import { SuperInput } from "../core/super-input.js";
|
3
|
-
/**
|
4
|
-
* {@linkcode Switch} renders a switch.
|
5
|
-
*
|
6
|
-
* @fires change - Fires when the switch is switched.
|
7
|
-
* @category input
|
8
|
-
*/
|
9
|
-
declare class Switch extends SuperInput<boolean> {
|
10
|
-
/**
|
11
|
-
* @deprecated
|
12
|
-
*/
|
13
|
-
round: boolean;
|
14
|
-
set checked(v: boolean);
|
15
|
-
get checked(): boolean;
|
16
|
-
/**
|
17
|
-
* Default checked state.
|
18
|
-
*/
|
19
|
-
default: boolean;
|
20
|
-
/**
|
21
|
-
* The current value of the switch component. Reflects the "checked" attribute.
|
22
|
-
*/
|
23
|
-
value: boolean;
|
24
|
-
get observedRecord(): Record<string, any>;
|
25
|
-
protected render(): TemplateResult<1>;
|
26
|
-
reset(): void;
|
27
|
-
protected _connectedInit(): void;
|
28
|
-
protected _handleChange(): void;
|
29
|
-
}
|
30
|
-
export default Switch;
|
31
|
-
export { Switch };
|
32
|
-
//# sourceMappingURL=switch.d.ts.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/components/switch.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAa,MAAM,KAAK,CAAC;AAIrD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAKpD;;;;;GAKG;AACH,cA6DM,MAAO,SAAQ,UAAU,CAAC,OAAO,CAAC;IACtC;;OAEG;IACH,KAAK,EAAE,OAAO,CAAC;IAEf,IAAI,OAAO,CAAC,CAAC,EAAE,OAAO,EAErB;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IAED;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,KAAK,UAAS;IAEd,IAAI,cAAc,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAExC;IAED,SAAS,CAAC,MAAM,IAAI,cAAc,CAAC,CAAC,CAAC;IAoBrC,KAAK,IAAI,IAAI;IAKb,SAAS,CAAC,cAAc,IAAI,IAAI;IAWhC,SAAS,CAAC,aAAa,IAAI,IAAI;CAKhC;AAED,eAAe,MAAM,CAAC;AACtB,OAAO,EAAE,MAAM,EAAE,CAAC"}
|
package/dev/components/switch.js
DELETED
@@ -1,147 +0,0 @@
|
|
1
|
-
import { __decorate } from "tslib";
|
2
|
-
import { attr, godown, omit, styles } from "@godown/element";
|
3
|
-
import { css, html } from "lit";
|
4
|
-
import { property } from "lit/decorators.js";
|
5
|
-
import { cssGlobalVars, scopePrefix } from "../core/global-style.js";
|
6
|
-
import { SuperInput } from "../core/super-input.js";
|
7
|
-
const protoName = "switch";
|
8
|
-
const cssScope = scopePrefix(protoName);
|
9
|
-
/**
|
10
|
-
* {@linkcode Switch} renders a switch.
|
11
|
-
*
|
12
|
-
* @fires change - Fires when the switch is switched.
|
13
|
-
* @category input
|
14
|
-
*/
|
15
|
-
let Switch = class Switch extends SuperInput {
|
16
|
-
constructor() {
|
17
|
-
super(...arguments);
|
18
|
-
/**
|
19
|
-
* Default checked state.
|
20
|
-
*/
|
21
|
-
this.default = false;
|
22
|
-
/**
|
23
|
-
* The current value of the switch component. Reflects the "checked" attribute.
|
24
|
-
*/
|
25
|
-
this.value = false;
|
26
|
-
}
|
27
|
-
set checked(v) {
|
28
|
-
this.value = v;
|
29
|
-
}
|
30
|
-
get checked() {
|
31
|
-
return this.value;
|
32
|
-
}
|
33
|
-
get observedRecord() {
|
34
|
-
return omit(super.observedRecord, "outline-type");
|
35
|
-
}
|
36
|
-
render() {
|
37
|
-
return html `
|
38
|
-
<div
|
39
|
-
part="root"
|
40
|
-
${attr(this.observedRecord)}
|
41
|
-
class="round"
|
42
|
-
>
|
43
|
-
<input
|
44
|
-
part="input"
|
45
|
-
type="checkbox"
|
46
|
-
?disabled="${this.disabled}"
|
47
|
-
?checked="${this.value}"
|
48
|
-
id="${this.makeId}"
|
49
|
-
@change="${this._handleChange}"
|
50
|
-
/>
|
51
|
-
<span part="handle"></span>
|
52
|
-
</div>
|
53
|
-
`;
|
54
|
-
}
|
55
|
-
reset() {
|
56
|
-
this.value = this.default;
|
57
|
-
this._input.checked = this.value;
|
58
|
-
}
|
59
|
-
_connectedInit() {
|
60
|
-
if (this.default) {
|
61
|
-
this.value = true;
|
62
|
-
}
|
63
|
-
else {
|
64
|
-
if (this.value) {
|
65
|
-
this.value = true;
|
66
|
-
this.default = true;
|
67
|
-
}
|
68
|
-
}
|
69
|
-
}
|
70
|
-
_handleChange() {
|
71
|
-
const { checked } = this._input;
|
72
|
-
this.value = checked;
|
73
|
-
this.dispatchCustomEvent("change", this.value);
|
74
|
-
}
|
75
|
-
};
|
76
|
-
__decorate([
|
77
|
-
property({ type: Boolean })
|
78
|
-
], Switch.prototype, "default", void 0);
|
79
|
-
__decorate([
|
80
|
-
property({ type: Boolean, attribute: "checked", reflect: true })
|
81
|
-
], Switch.prototype, "value", void 0);
|
82
|
-
Switch = __decorate([
|
83
|
-
godown(protoName),
|
84
|
-
styles(css `
|
85
|
-
:host,
|
86
|
-
:host([contents]) [part="root"] {
|
87
|
-
width: var(${cssScope}-width);
|
88
|
-
height: var(${cssScope}-height);
|
89
|
-
display: inline-block;
|
90
|
-
}
|
91
|
-
|
92
|
-
:host {
|
93
|
-
${cssScope}-width: 3em;
|
94
|
-
${cssScope}-height: calc(var(${cssScope}-width) / 2);
|
95
|
-
${cssScope}-handle-size: 1.25em;
|
96
|
-
${cssScope}-handle-space: calc(var(${cssScope}-width) / 4 - var(${cssScope}-handle-size) / 2);
|
97
|
-
${cssScope}-transition: .2s ease-in-out;
|
98
|
-
border-radius: calc(var(${cssScope}-height) / 2);
|
99
|
-
background: var(${cssGlobalVars.passive});
|
100
|
-
vertical-align: bottom;
|
101
|
-
transition: 0.2s ease-in-out;
|
102
|
-
transition-property: background, left;
|
103
|
-
}
|
104
|
-
|
105
|
-
:host([checked]) {
|
106
|
-
background: var(${cssGlobalVars.active});
|
107
|
-
}
|
108
|
-
|
109
|
-
[part="root"] {
|
110
|
-
height: inherit;
|
111
|
-
display: flex;
|
112
|
-
align-items: center;
|
113
|
-
position: relative;
|
114
|
-
transition: inherit;
|
115
|
-
}
|
116
|
-
|
117
|
-
[part="handle"] {
|
118
|
-
display: flex;
|
119
|
-
align-items: center;
|
120
|
-
justify-content: center;
|
121
|
-
position: absolute;
|
122
|
-
transition: inherit;
|
123
|
-
left: 0;
|
124
|
-
top: 50%;
|
125
|
-
pointer-events: none;
|
126
|
-
border-radius: 100%;
|
127
|
-
background: currentColor;
|
128
|
-
--size: var(${cssScope}-handle-size);
|
129
|
-
width: var(--size);
|
130
|
-
height: var(--size);
|
131
|
-
transform: translateY(-50%) translateX(var(${cssScope}-handle-space));
|
132
|
-
}
|
133
|
-
|
134
|
-
:host([checked]) [part="handle"] {
|
135
|
-
left: 50%;
|
136
|
-
}
|
137
|
-
|
138
|
-
[part="input"] {
|
139
|
-
opacity: 0;
|
140
|
-
width: 100%;
|
141
|
-
height: 100%;
|
142
|
-
}
|
143
|
-
`)
|
144
|
-
], Switch);
|
145
|
-
export default Switch;
|
146
|
-
export { Switch };
|
147
|
-
//# sourceMappingURL=switch.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../src/components/switch.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAuB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,SAAS,GAAG,QAAQ,CAAC;AAC3B,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;AAExC;;;;;GAKG;AA8DH,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAmB;IAAxC;;QAcE;;WAEG;QAEH,YAAO,GAAG,KAAK,CAAC;QAEhB;;WAEG;QAEH,UAAK,GAAG,KAAK,CAAC;IA+ChB,CAAC;IAjEC,IAAI,OAAO,CAAC,CAAU;QACpB,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;IACjB,CAAC;IAED,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,KAAK,CAAC;IACpB,CAAC;IAcD,IAAI,cAAc;QAChB,OAAO,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC;IACpD,CAAC;IAES,MAAM;QACd,OAAO,IAAI,CAAA;;;UAGL,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC;;;;;;uBAMZ,IAAI,CAAC,QAAQ;sBACd,IAAI,CAAC,KAAK;gBAChB,IAAI,CAAC,MAAM;qBACN,IAAI,CAAC,aAAa;;;;KAIlC,CAAC;IACJ,CAAC;IAED,KAAK;QACH,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;QAC1B,IAAI,CAAC,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC;IACnC,CAAC;IAES,cAAc;QACtB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QACpB,CAAC;aAAM,CAAC;YACN,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;gBACf,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;gBAClB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACtB,CAAC;QACH,CAAC;IACH,CAAC;IAES,aAAa;QACrB,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC;QAChC,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC;QACrB,IAAI,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IACjD,CAAC;CACF,CAAA;AArDC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCACZ;AAMhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCACnD;AAxBV,MAAM;IA7DX,MAAM,CAAC,SAAS,CAAC;IACjB,MAAM,CAAC,GAAG,CAAA;;;iBAGM,QAAQ;kBACP,QAAQ;;;;;MAKpB,QAAQ;MACR,QAAQ,qBAAqB,QAAQ;MACrC,QAAQ;MACR,QAAQ,2BAA2B,QAAQ,qBAAqB,QAAQ;MACxE,QAAQ;8BACgB,QAAQ;sBAChB,aAAa,CAAC,OAAO;;;;;;;sBAOrB,aAAa,CAAC,MAAM;;;;;;;;;;;;;;;;;;;;;;kBAsBxB,QAAQ;;;iDAGuB,QAAQ;;;;;;;;;;;;CAYxD,CAAC;GACI,MAAM,CAuEX;AAED,eAAe,MAAM,CAAC;AACtB,OAAO,EAAE,MAAM,EAAE,CAAC"}
|
package/dev/components/text.d.ts
DELETED
@@ -1,21 +0,0 @@
|
|
1
|
-
import { type TemplateResult } from "lit";
|
2
|
-
import { GlobalStyle } from "../core/global-style.js";
|
3
|
-
/**
|
4
|
-
* {@linkcode Text} renders nowrap text.
|
5
|
-
*
|
6
|
-
* @category display
|
7
|
-
*/
|
8
|
-
declare class Text extends GlobalStyle {
|
9
|
-
/**
|
10
|
-
* Underline behavior.
|
11
|
-
*/
|
12
|
-
underline: "none" | "hover" | "active" | "always";
|
13
|
-
/**
|
14
|
-
* Set background-clip to text.
|
15
|
-
*/
|
16
|
-
clip: boolean;
|
17
|
-
protected render(): TemplateResult<1>;
|
18
|
-
}
|
19
|
-
export default Text;
|
20
|
-
export { Text };
|
21
|
-
//# sourceMappingURL=text.d.ts.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/components/text.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAa,MAAM,KAAK,CAAC;AAGrD,OAAO,EAAE,WAAW,EAA8B,MAAM,yBAAyB,CAAC;AAMlF;;;;GAIG;AACH,cAiDM,IAAK,SAAQ,WAAW;IAC5B;;OAEG;IAEH,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAU;IAE3D;;OAEG;IAEH,IAAI,UAAS;IAEb,SAAS,CAAC,MAAM,IAAI,cAAc,CAAC,CAAC,CAAC;CAWtC;AAED,eAAe,IAAI,CAAC;AACpB,OAAO,EAAE,IAAI,EAAE,CAAC"}
|