godown 2.6.0 → 2.6.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/lib/directives.d.ts +2 -4
- package/lib/directives.d.ts.map +1 -1
- package/lib/directives.js.map +1 -1
- package/lib/event-collection.d.ts +1 -1
- package/lib/utils.d.ts +2 -0
- package/lib/utils.d.ts.map +1 -1
- package/lib/utils.js +11 -0
- package/lib/utils.js.map +1 -1
- package/package.json +4 -6
- package/react/index.d.ts +0 -3
- package/react/index.d.ts.map +1 -1
- package/react/index.js +0 -9
- package/react/index.js.map +1 -1
- package/root.d.ts.map +1 -1
- package/root.js +1 -0
- package/root.js.map +1 -1
- package/web-components/a/avatar-a.js +40 -40
- package/web-components/a/avatar-a.js.map +1 -1
- package/web-components/a/super-a.js +22 -22
- package/web-components/a/super-a.js.map +1 -1
- package/web-components/button/base-button.js +86 -86
- package/web-components/button/base-button.js.map +1 -1
- package/web-components/carousel/carousel-slider.d.ts +1 -1
- package/web-components/carousel/carousel-slider.d.ts.map +1 -1
- package/web-components/carousel/carousel-slider.js +70 -70
- package/web-components/carousel/carousel-slider.js.map +1 -1
- package/web-components/form/base-form.js +15 -15
- package/web-components/form/base-form.js.map +1 -1
- package/web-components/group/avatar-group.js +15 -15
- package/web-components/group/avatar-group.js.map +1 -1
- package/web-components/group/details-group.js +7 -7
- package/web-components/group/details-group.js.map +1 -1
- package/web-components/group/tab-group.js +45 -45
- package/web-components/group/tab-group.js.map +1 -1
- package/web-components/index.d.ts +0 -3
- package/web-components/index.d.ts.map +1 -1
- package/web-components/index.js +0 -3
- package/web-components/index.js.map +1 -1
- package/web-components/input/base-input.js +73 -73
- package/web-components/input/base-input.js.map +1 -1
- package/web-components/input/input.js +15 -15
- package/web-components/input/input.js.map +1 -1
- package/web-components/input/label-input.js +49 -49
- package/web-components/input/label-input.js.map +1 -1
- package/web-components/input/search-input.js +53 -53
- package/web-components/input/search-input.js.map +1 -1
- package/web-components/input/select-input.js +88 -88
- package/web-components/input/select-input.js.map +1 -1
- package/web-components/input/split-input.js +51 -51
- package/web-components/input/split-input.js.map +1 -1
- package/web-components/input/switch-input.js +36 -36
- package/web-components/input/switch-input.js.map +1 -1
- package/web-components/items/alert-item.js +32 -33
- package/web-components/items/alert-item.js.map +1 -1
- package/web-components/items/card-item.js +54 -54
- package/web-components/items/card-item.js.map +1 -1
- package/web-components/items/drag-box.js +8 -8
- package/web-components/items/drag-box.js.map +1 -1
- package/web-components/items/time-bar.js +8 -9
- package/web-components/items/time-bar.js.map +1 -1
- package/web-components/layout/divider-line.js +11 -11
- package/web-components/layout/divider-line.js.map +1 -1
- package/web-components/layout/flex-flow.js +7 -7
- package/web-components/layout/flex-flow.js.map +1 -1
- package/web-components/layout/nav-layout.d.ts +10 -3
- package/web-components/layout/nav-layout.d.ts.map +1 -1
- package/web-components/layout/nav-layout.js +31 -101
- package/web-components/layout/nav-layout.js.map +1 -1
- package/web-components/loading/loading-progress.d.ts +1 -1
- package/web-components/loading/loading-progress.d.ts.map +1 -1
- package/web-components/loading/loading-progress.js +28 -28
- package/web-components/loading/loading-progress.js.map +1 -1
- package/web-components/loading/skeleton-screen.js +19 -19
- package/web-components/loading/skeleton-screen.js.map +1 -1
- package/web-components/open/open-details.d.ts.map +1 -1
- package/web-components/open/open-details.js +73 -22
- package/web-components/open/open-details.js.map +1 -1
- package/web-components/open/open-dialog.d.ts +5 -16
- package/web-components/open/open-dialog.d.ts.map +1 -1
- package/web-components/open/open-dialog.js +92 -102
- package/web-components/open/open-dialog.js.map +1 -1
- package/web-components/open/open-offset.d.ts +0 -1
- package/web-components/open/open-offset.d.ts.map +1 -1
- package/web-components/open/open-offset.js +50 -53
- package/web-components/open/open-offset.js.map +1 -1
- package/web-components/open/open-tooltip.d.ts +2 -2
- package/web-components/open/open-tooltip.d.ts.map +1 -1
- package/web-components/open/open-tooltip.js +14 -15
- package/web-components/open/open-tooltip.js.map +1 -1
- package/web-components/open/open.d.ts +3 -2
- package/web-components/open/open.d.ts.map +1 -1
- package/web-components/open/open.js +13 -59
- package/web-components/open/open.js.map +1 -1
- package/web-components/text/clip-text.js +8 -8
- package/web-components/text/clip-text.js.map +1 -1
- package/web-components/text/overbreath-text.js +17 -17
- package/web-components/text/overbreath-text.js.map +1 -1
- package/web-components/text/typewriter-text.js +32 -32
- package/web-components/text/typewriter-text.js.map +1 -1
- package/web-components/view/route-view.d.ts +2 -2
- package/web-components/view/route-view.js +7 -7
- package/web-components/view/route-view.js.map +1 -1
- package/web-components/view/wrap-view.d.ts +1 -1
- package/web-components/view/wrap-view.js +15 -15
- package/web-components/view/wrap-view.js.map +1 -1
- package/nav-aside.d.ts +0 -2
- package/nav-aside.d.ts.map +0 -1
- package/nav-aside.js +0 -2
- package/nav-aside.js.map +0 -1
- package/open-list.d.ts +0 -2
- package/open-list.d.ts.map +0 -1
- package/open-list.js +0 -2
- package/open-list.js.map +0 -1
- package/scroll-x.d.ts +0 -2
- package/scroll-x.d.ts.map +0 -1
- package/scroll-x.js +0 -2
- package/scroll-x.js.map +0 -1
- package/web-components/layout/index.d.ts +0 -5
- package/web-components/layout/index.d.ts.map +0 -1
- package/web-components/layout/index.js +0 -6
- package/web-components/layout/index.js.map +0 -1
- package/web-components/layout/nav-aside.d.ts +0 -25
- package/web-components/layout/nav-aside.d.ts.map +0 -1
- package/web-components/layout/nav-aside.js +0 -70
- package/web-components/layout/nav-aside.js.map +0 -1
- package/web-components/open/open-list.d.ts +0 -20
- package/web-components/open/open-list.d.ts.map +0 -1
- package/web-components/open/open-list.js +0 -71
- package/web-components/open/open-list.js.map +0 -1
- package/web-components/view/scroll-x.d.ts +0 -25
- package/web-components/view/scroll-x.d.ts.map +0 -1
- package/web-components/view/scroll-x.js +0 -97
- package/web-components/view/scroll-x.js.map +0 -1
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"details-group.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/group/details-group.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAqB,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEtD,MAAM,UAAU,GAAG,eAAe,CAAC;AAEnC;;GAEG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,aAAa;IAAxC;;QACL;;WAEG;QACyB,UAAK,GAAG,CAAC,CAAC,CAAC;QACvC;;WAEG;QAC0B,SAAI,GAAG,KAAK,CAAC;IA+B5C,CAAC;
|
1
|
+
{"version":3,"file":"details-group.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/group/details-group.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAqB,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEtD,MAAM,UAAU,GAAG,eAAe,CAAC;AAEnC;;GAEG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,aAAa;IAAxC;;QACL;;WAEG;QACyB,UAAK,GAAG,CAAC,CAAC,CAAC;QACvC;;WAEG;QAC0B,SAAI,GAAG,KAAK,CAAC;IA+B5C,CAAC;IArBW,MAAM;QACd,OAAO,QAAQ,EAAE,CAAC;IACpB,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAClD,CAAC;QACD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,YAAY,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;IACtD,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;IAClB,CAAC;IAES,YAAY,CAAC,CAAa;QAClC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;QACnD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,MAAqB,CAAC,CAAC;IAC9D,CAAC;;AA5BM,mBAAM,GAAG;IACd,GAAG,CAAA;;;;KAIF;CACF,AANY,CAMX;AAZ0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAY;AAIV;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAc;AAR/B,YAAY;IADxB,MAAM,CAAC,UAAU,CAAC;GACN,YAAY,CAuCxB;;AAED,eAAe,YAAY,CAAC","sourcesContent":["import { css, property } from \"../../deps.js\";\nimport { htmlSlot, type HTMLTemplate } from \"../../lib/templates.js\";\nimport { define, GodownElement } from \"../../root.js\";\n\nconst defineName = \"details-group\";\n\n/**\n * DetailsGroup used to support multiple details like.\n */\n@define(defineName)\nexport class DetailsGroup extends GodownElement {\n /**\n * Default open element index.\n */\n @property({ type: Number }) index = -1;\n /**\n * If true, close the previous element when switching index.\n */\n @property({ type: Boolean }) only = false;\n\n static styles = [\n css`\n :host {\n display: block;\n }\n `,\n ];\n\n protected render(): HTMLTemplate {\n return htmlSlot();\n }\n\n connectedCallback() {\n super.connectedCallback();\n if (this.only) {\n this.addEvent(this, \"click\", this._handleClick);\n }\n this.children[this.index]?.setAttribute(\"open\", \"\");\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.index = -1;\n }\n\n protected _handleClick(e: MouseEvent) {\n this.children[this.index]?.removeAttribute(\"open\");\n this.index = this.assigned.indexOf(e.target as HTMLElement);\n }\n}\n\nexport default DetailsGroup;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"details-group\": DetailsGroup;\n }\n}\n"]}
|
@@ -27,52 +27,9 @@ let TabGroup = class TabGroup extends GodownElement {
|
|
27
27
|
*/
|
28
28
|
this.align = "start";
|
29
29
|
}
|
30
|
-
static { this.styles = [
|
31
|
-
GodownElement.styles,
|
32
|
-
css `
|
33
|
-
:host {
|
34
|
-
${cssvarScope}--background: var(${cssvarValues.main});
|
35
|
-
${cssvarScope}--background-active: rgb(var(${cssvarValues.textRGB}) / 18%);
|
36
|
-
${cssvarScope}--radius: .25em;
|
37
|
-
${cssvarScope}--cursor: default;
|
38
|
-
background: var(${cssvarScope}--background);
|
39
|
-
display: block;
|
40
|
-
}
|
41
|
-
|
42
|
-
nav {
|
43
|
-
display: grid;
|
44
|
-
grid-auto-flow: column;
|
45
|
-
gap: 0.5em;
|
46
|
-
position: relative;
|
47
|
-
border-radius: inherit;
|
48
|
-
}
|
49
|
-
|
50
|
-
section {
|
51
|
-
white-space: nowrap;
|
52
|
-
min-width: 2em;
|
53
|
-
border-radius: inherit;
|
54
|
-
padding: 0 0.2em;
|
55
|
-
cursor: var(${cssvarScope}--cursor);
|
56
|
-
z-index: 1;
|
57
|
-
display: flex;
|
58
|
-
align-items: center;
|
59
|
-
justify-content: center;
|
60
|
-
}
|
61
|
-
|
62
|
-
#slider {
|
63
|
-
height: 100%;
|
64
|
-
position: absolute;
|
65
|
-
padding: 0;
|
66
|
-
background: var(${cssvarScope}--background-active);
|
67
|
-
transform: translateX(-50%);
|
68
|
-
transition: all 0.25s ease 0s;
|
69
|
-
z-index: 0;
|
70
|
-
}
|
71
|
-
`,
|
72
|
-
]; }
|
73
30
|
render() {
|
74
31
|
const headers = (this.headers || this.contents).map((value) => {
|
75
|
-
return html
|
32
|
+
return html `<section
|
76
33
|
class="${ifValue(this.index === value, "active")}"
|
77
34
|
@click="${() => {
|
78
35
|
this.select(value, true);
|
@@ -98,7 +55,7 @@ let TabGroup = class TabGroup extends GodownElement {
|
|
98
55
|
this.dispatchEvent(new CustomEvent("select", { detail: this.index }));
|
99
56
|
slider.style.width = `${active.clientWidth}px`;
|
100
57
|
slider.animate([{ left: `${active.offsetLeft + active.clientWidth / 2}px` }], {
|
101
|
-
duration:
|
58
|
+
duration: 180,
|
102
59
|
fill: "forwards",
|
103
60
|
});
|
104
61
|
}
|
@@ -141,6 +98,49 @@ let TabGroup = class TabGroup extends GodownElement {
|
|
141
98
|
this.contents = this.slottedNames;
|
142
99
|
}
|
143
100
|
};
|
101
|
+
TabGroup.styles = [
|
102
|
+
GodownElement.styles,
|
103
|
+
css `
|
104
|
+
:host {
|
105
|
+
${cssvarScope}--background: var(${cssvarValues.main});
|
106
|
+
${cssvarScope}--background-active: rgb(var(${cssvarValues.textRGB}) / 18%);
|
107
|
+
${cssvarScope}--radius: .25em;
|
108
|
+
${cssvarScope}--cursor: default;
|
109
|
+
background: var(${cssvarScope}--background);
|
110
|
+
display: block;
|
111
|
+
color: var(${cssvarValues.text});
|
112
|
+
}
|
113
|
+
|
114
|
+
nav {
|
115
|
+
display: grid;
|
116
|
+
grid-auto-flow: column;
|
117
|
+
gap: 0.25em;
|
118
|
+
position: relative;
|
119
|
+
border-radius: inherit;
|
120
|
+
}
|
121
|
+
|
122
|
+
section {
|
123
|
+
white-space: nowrap;
|
124
|
+
border-radius: inherit;
|
125
|
+
padding: 0.15em 0.2em;
|
126
|
+
cursor: var(${cssvarScope}--cursor);
|
127
|
+
z-index: 1;
|
128
|
+
display: flex;
|
129
|
+
align-items: center;
|
130
|
+
justify-content: center;
|
131
|
+
}
|
132
|
+
|
133
|
+
#slider {
|
134
|
+
height: 100%;
|
135
|
+
position: absolute;
|
136
|
+
padding: 0;
|
137
|
+
background: var(${cssvarScope}--background-active);
|
138
|
+
transform: translateX(-50%);
|
139
|
+
transition: all 180ms ease 0s;
|
140
|
+
z-index: 0;
|
141
|
+
}
|
142
|
+
`,
|
143
|
+
];
|
144
144
|
__decorate([
|
145
145
|
property()
|
146
146
|
], TabGroup.prototype, "index", void 0);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"tab-group.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/group/tab-group.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAuB,IAAI,EAAE,QAAQ,EAAyB,KAAK,EAAE,MAAM,eAAe,CAAC;AACvG,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAqB,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEjF,MAAM,UAAU,GAAG,WAAW,CAAC;AAE/B,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;AAE5C;;;;GAIG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,aAAa;IAApC;;QACL;;WAEG;QACS,UAAK,GAAG,EAAE,CAAC;QACvB;;WAEG;QACS,QAAG,GAAG,EAAE,CAAC;QACrB;;WAEG;QACS,UAAK,GAAG,OAAO,CAAC;IA+H9B,CAAC;
|
1
|
+
{"version":3,"file":"tab-group.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/group/tab-group.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, type CSSResultGroup, html, property, type PropertyValueMap, state } from \"../../deps.js\";\nimport { ifValue } from \"../../lib/directives.js\";\nimport { htmlSlot, type HTMLTemplate } from \"../../lib/templates.js\";\nimport { deepQuerySelectorAll } from \"../../lib/utils.js\";\nimport { createScope, cssvarValues, define, GodownElement } from \"../../root.js\";\n\nconst defineName = \"tab-group\";\n\nconst cssvarScope = createScope(defineName);\n\n/**\n * TabGroup used to support multiple tabs.\n *\n * Inspired by Next-ui.\n */\n@define(defineName)\nexport class TabGroup extends GodownElement {\n /**\n * Active slot name.\n */\n @property() index = \"\";\n /**\n * Default slot name.\n */\n @property() def = \"\";\n /**\n * Align type.\n */\n @property() align = \"start\";\n /**\n * Header texts or slot names, if headers is a zero value, it is taken from the {@linkcode TabGroup.contents}.\n */\n @state() headers: string[] | void;\n /**\n * Contents slot names.\n */\n @state() contents: string[];\n\n static styles = [\n GodownElement.styles,\n css`\n :host {\n ${cssvarScope}--background: var(${cssvarValues.main});\n ${cssvarScope}--background-active: rgb(var(${cssvarValues.textRGB}) / 18%);\n ${cssvarScope}--radius: .25em;\n ${cssvarScope}--cursor: default;\n background: var(${cssvarScope}--background);\n display: block;\n color: var(${cssvarValues.text});\n }\n\n nav {\n display: grid;\n grid-auto-flow: column;\n gap: 0.25em;\n position: relative;\n border-radius: inherit;\n }\n\n section {\n white-space: nowrap;\n border-radius: inherit;\n padding: 0.15em 0.2em;\n cursor: var(${cssvarScope}--cursor);\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n #slider {\n height: 100%;\n position: absolute;\n padding: 0;\n background: var(${cssvarScope}--background-active);\n transform: translateX(-50%);\n transition: all 180ms ease 0s;\n z-index: 0;\n }\n `,\n ] as CSSResultGroup;\n\n protected render(): HTMLTemplate {\n const headers = (this.headers || this.contents).map((value) => {\n return html`<section\n class=\"${ifValue(this.index === value, \"active\")}\"\n @click=\"${() => {\n this.select(value, true);\n }}\"\n >\n ${this.headers ? htmlSlot(value) : value}\n </section>`;\n });\n return html`\n <nav style=\"justify-content:${this.align}\">\n ${headers}\n <section id=\"slider\"></section>\n </nav>\n ${htmlSlot(this.index || this.def)}\n `;\n }\n\n protected updated(changedProperties: PropertyValueMap<this>) {\n if (changedProperties.has(\"index\")) {\n // Move slider.\n const active = this.shadowRoot.querySelector<HTMLElement>(\"section.active\");\n const slider = this.shadowRoot.querySelector<HTMLElement>(\"#slider\");\n if (active) {\n this.dispatchEvent(new CustomEvent(\"select\", { detail: this.index }));\n slider.style.width = `${active.clientWidth}px`;\n slider.animate([{ left: `${active.offsetLeft + active.clientWidth / 2}px` }], {\n duration: 180,\n fill: \"forwards\",\n });\n } else {\n slider.style.width = \"0\";\n }\n }\n }\n\n /**\n * Select one tab.\n * @param s New index.\n * @param callSync if true, update all same elements (headers contains s).\n */\n select(s: string, callSync = false) {\n if (callSync) {\n const elements = deepQuerySelectorAll<this>(this.tagName, document.body);\n for (const e of elements) {\n if ((e.headers || e.contents).includes(s)) {\n e.select(s);\n }\n }\n return;\n }\n this.index = s;\n }\n\n connectedCallback() {\n super.connectedCallback();\n if (!this.def) {\n this.def = this.slottedNames[0] || \"\";\n }\n if (!this.index && this.def) {\n this.index = this.def;\n }\n this.getTabs();\n }\n\n /**\n * Update content controls (this.headers, this.contents).\n */\n getTabs() {\n this.contents = this.slottedNames;\n }\n}\n\nexport default TabGroup;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"tab-group\": TabGroup;\n }\n}\n"]}
|
@@ -20,19 +20,16 @@ export { DragBox } from "./items/drag-box.js";
|
|
20
20
|
export { TimeBar } from "./items/time-bar.js";
|
21
21
|
export { DividerLine } from "./layout/divider-line.js";
|
22
22
|
export { FlexFlow } from "./layout/flex-flow.js";
|
23
|
-
export { NavAside } from "./layout/nav-aside.js";
|
24
23
|
export { NavLayout } from "./layout/nav-layout.js";
|
25
24
|
export { LoadingProgress } from "./loading/loading-progress.js";
|
26
25
|
export { SkeletonScreen } from "./loading/skeleton-screen.js";
|
27
26
|
export { OpenDetails } from "./open/open-details.js";
|
28
27
|
export { OpenDialog } from "./open/open-dialog.js";
|
29
|
-
export { OpenList } from "./open/open-list.js";
|
30
28
|
export { OpenOffset } from "./open/open-offset.js";
|
31
29
|
export { OpenTooltip } from "./open/open-tooltip.js";
|
32
30
|
export { ClipText } from "./text/clip-text.js";
|
33
31
|
export { OverbreathText } from "./text/overbreath-text.js";
|
34
32
|
export { TypewriterText } from "./text/typewriter-text.js";
|
35
33
|
export { RouteView } from "./view/route-view.js";
|
36
|
-
export { ScrollX } from "./view/scroll-x.js";
|
37
34
|
export { WrapView } from "./view/wrap-view.js";
|
38
35
|
//# sourceMappingURL=index.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC"}
|
package/web-components/index.js
CHANGED
@@ -21,19 +21,16 @@ export { DragBox } from "./items/drag-box.js";
|
|
21
21
|
export { TimeBar } from "./items/time-bar.js";
|
22
22
|
export { DividerLine } from "./layout/divider-line.js";
|
23
23
|
export { FlexFlow } from "./layout/flex-flow.js";
|
24
|
-
export { NavAside } from "./layout/nav-aside.js";
|
25
24
|
export { NavLayout } from "./layout/nav-layout.js";
|
26
25
|
export { LoadingProgress } from "./loading/loading-progress.js";
|
27
26
|
export { SkeletonScreen } from "./loading/skeleton-screen.js";
|
28
27
|
export { OpenDetails } from "./open/open-details.js";
|
29
28
|
export { OpenDialog } from "./open/open-dialog.js";
|
30
|
-
export { OpenList } from "./open/open-list.js";
|
31
29
|
export { OpenOffset } from "./open/open-offset.js";
|
32
30
|
export { OpenTooltip } from "./open/open-tooltip.js";
|
33
31
|
export { ClipText } from "./text/clip-text.js";
|
34
32
|
export { OverbreathText } from "./text/overbreath-text.js";
|
35
33
|
export { TypewriterText } from "./text/typewriter-text.js";
|
36
34
|
export { RouteView } from "./view/route-view.js";
|
37
|
-
export { ScrollX } from "./view/scroll-x.js";
|
38
35
|
export { WrapView } from "./view/wrap-view.js";
|
39
36
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/index.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/index.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC","sourcesContent":["/// script generated\nexport { AvatarA } from \"./a/avatar-a.js\";\nexport { LinkA } from \"./a/link-a.js\";\nexport { SuperA } from \"./a/super-a.js\";\nexport { BaseButton } from \"./button/base-button.js\";\nexport { CarouselSlider } from \"./carousel/carousel-slider.js\";\nexport { BaseForm } from \"./form/base-form.js\";\nexport { SignForm } from \"./form/sign-form.js\";\nexport { AvatarGroup } from \"./group/avatar-group.js\";\nexport { DetailsGroup } from \"./group/details-group.js\";\nexport { TabGroup } from \"./group/tab-group.js\";\nexport { BaseInput } from \"./input/base-input.js\";\nexport { LabelInput } from \"./input/label-input.js\";\nexport { SearchInput } from \"./input/search-input.js\";\nexport { SelectInput } from \"./input/select-input.js\";\nexport { SplitInput } from \"./input/split-input.js\";\nexport { SwitchInput } from \"./input/switch-input.js\";\nexport { AlertItem } from \"./items/alert-item.js\";\nexport { CardItem } from \"./items/card-item.js\";\nexport { DragBox } from \"./items/drag-box.js\";\nexport { TimeBar } from \"./items/time-bar.js\";\nexport { DividerLine } from \"./layout/divider-line.js\";\nexport { FlexFlow } from \"./layout/flex-flow.js\";\nexport { NavLayout } from \"./layout/nav-layout.js\";\nexport { LoadingProgress } from \"./loading/loading-progress.js\";\nexport { SkeletonScreen } from \"./loading/skeleton-screen.js\";\nexport { OpenDetails } from \"./open/open-details.js\";\nexport { OpenDialog } from \"./open/open-dialog.js\";\nexport { OpenOffset } from \"./open/open-offset.js\";\nexport { OpenTooltip } from \"./open/open-tooltip.js\";\nexport { ClipText } from \"./text/clip-text.js\";\nexport { OverbreathText } from \"./text/overbreath-text.js\";\nexport { TypewriterText } from \"./text/typewriter-text.js\";\nexport { RouteView } from \"./view/route-view.js\";\nexport { WrapView } from \"./view/wrap-view.js\";\n"]}
|
@@ -35,9 +35,77 @@ let BaseInput = class BaseInput extends InputElement {
|
|
35
35
|
*/
|
36
36
|
this.step = 1;
|
37
37
|
}
|
38
|
-
|
39
|
-
|
40
|
-
|
38
|
+
render() {
|
39
|
+
if (this.type === "range") {
|
40
|
+
return html `<div class="range">
|
41
|
+
<input id="input" type="range" min="${this.min}" max="${this.max}" step="${this.step}" @input="${this._handleRange}" @change="${this._handleRange}" />
|
42
|
+
<b></b>
|
43
|
+
<b>
|
44
|
+
<i></i>
|
45
|
+
</b>
|
46
|
+
</div>`;
|
47
|
+
}
|
48
|
+
return html `<label for="input"> ${htmlSlot("pre")} ${this._typeSwitcher()} ${htmlSlot("suf")} </label>`;
|
49
|
+
}
|
50
|
+
connectedCallback() {
|
51
|
+
super.connectedCallback();
|
52
|
+
if (this.type === "file") {
|
53
|
+
this.value = null;
|
54
|
+
}
|
55
|
+
else {
|
56
|
+
if (!this.def) {
|
57
|
+
this.def = this.value || "";
|
58
|
+
}
|
59
|
+
if (!this.value) {
|
60
|
+
this.value = this.def;
|
61
|
+
}
|
62
|
+
}
|
63
|
+
this._initName();
|
64
|
+
}
|
65
|
+
firstUpdated() {
|
66
|
+
super.firstUpdated();
|
67
|
+
if (this.type === "range") {
|
68
|
+
this._ranged.style.width = 100 * (parseInt(this.value) / (this.max - this.min)) + "%";
|
69
|
+
}
|
70
|
+
}
|
71
|
+
_handleRange(e) {
|
72
|
+
this.value = e.target.value;
|
73
|
+
this._ranged.style.width = (100 * parseInt(e.target.value)) / (this.max - this.min) + "%";
|
74
|
+
this.dispatchEvent(new CustomEvent("input", { detail: this.value }));
|
75
|
+
}
|
76
|
+
_handleFile(e) {
|
77
|
+
this.value = !this.only ? e.target.files : e.target.files[0];
|
78
|
+
this.dispatchEvent(new CustomEvent("change", { detail: this.value }));
|
79
|
+
}
|
80
|
+
reset() {
|
81
|
+
if (this.type === "file") {
|
82
|
+
this.value = null;
|
83
|
+
return;
|
84
|
+
}
|
85
|
+
if (this.type === "range") {
|
86
|
+
this._input.value = this.def || ((this.max - this.min) / 2).toString();
|
87
|
+
this.value = this._input.value;
|
88
|
+
this._ranged.style.width = 100 * (parseInt(this.value) / (this.max - this.min)) + "%";
|
89
|
+
}
|
90
|
+
else {
|
91
|
+
this._input.value = this.def.toString();
|
92
|
+
this.value = this.def;
|
93
|
+
}
|
94
|
+
}
|
95
|
+
_typeSwitcher() {
|
96
|
+
switch (this.type) {
|
97
|
+
case "file":
|
98
|
+
return html `<input id="input" class="input" type="file" accept="${this.accept}" ?multiple="${!this.only}" @change="${this._handleFile}" />${htmlSlot()}`;
|
99
|
+
case "number":
|
100
|
+
return html `<input .value="${this.value}" ?autofocus="${this.autofocus}" id="input" class="input" type="number" placeholder="${this.pla}" min="${this.min}" max="${this.max}" @input="${this._handleInput}" @change="${this._handleChange}" />`;
|
101
|
+
default:
|
102
|
+
return html `<input .value="${this.value}" ?autofocus="${this.autofocus}" id="input" class="input" type="${this.type}" placeholder="${this.pla}" @input="${this._handleInput}" @change="${this._handleChange}" />`;
|
103
|
+
}
|
104
|
+
}
|
105
|
+
};
|
106
|
+
BaseInput.styles = [
|
107
|
+
InputElement.styles,
|
108
|
+
css `
|
41
109
|
:host {
|
42
110
|
width: var(${cssvarValues.input}--width);
|
43
111
|
height: var(${cssvarValues.input}--height);
|
@@ -74,7 +142,7 @@ let BaseInput = class BaseInput extends InputElement {
|
|
74
142
|
border-radius: 0.25em;
|
75
143
|
}
|
76
144
|
`,
|
77
|
-
|
145
|
+
css `
|
78
146
|
:host([type="range"]) {
|
79
147
|
height: auto !important;
|
80
148
|
margin: 0.3em 0;
|
@@ -145,75 +213,7 @@ let BaseInput = class BaseInput extends InputElement {
|
|
145
213
|
box-shadow: 0 0.1em 0.1em var(${cssvar}--shadow);
|
146
214
|
}
|
147
215
|
`,
|
148
|
-
|
149
|
-
render() {
|
150
|
-
if (this.type === "range") {
|
151
|
-
return html `<div class="range">
|
152
|
-
<input id="input" type="range" min="${this.min}" max="${this.max}" step="${this.step}" @input="${this._handleRange}" @change="${this._handleRange}" />
|
153
|
-
<b></b>
|
154
|
-
<b>
|
155
|
-
<i></i>
|
156
|
-
</b>
|
157
|
-
</div>`;
|
158
|
-
}
|
159
|
-
return html `<label for="input"> ${htmlSlot("pre")} ${this._typeSwitcher()} ${htmlSlot("suf")} </label>`;
|
160
|
-
}
|
161
|
-
connectedCallback() {
|
162
|
-
super.connectedCallback();
|
163
|
-
if (this.type === "file") {
|
164
|
-
this.value = null;
|
165
|
-
}
|
166
|
-
else {
|
167
|
-
if (!this.def) {
|
168
|
-
this.def = this.value || "";
|
169
|
-
}
|
170
|
-
if (!this.value) {
|
171
|
-
this.value = this.def;
|
172
|
-
}
|
173
|
-
}
|
174
|
-
this._initName();
|
175
|
-
}
|
176
|
-
firstUpdated() {
|
177
|
-
super.firstUpdated();
|
178
|
-
if (this.type === "range") {
|
179
|
-
this._ranged.style.width = 100 * (parseInt(this.value) / (this.max - this.min)) + "%";
|
180
|
-
}
|
181
|
-
}
|
182
|
-
_handleRange(e) {
|
183
|
-
this.value = e.target.value;
|
184
|
-
this._ranged.style.width = (100 * parseInt(e.target.value)) / (this.max - this.min) + "%";
|
185
|
-
this.dispatchEvent(new CustomEvent("input", { detail: this.value }));
|
186
|
-
}
|
187
|
-
_handleFile(e) {
|
188
|
-
this.value = !this.only ? e.target.files : e.target.files[0];
|
189
|
-
this.dispatchEvent(new CustomEvent("change", { detail: this.value }));
|
190
|
-
}
|
191
|
-
reset() {
|
192
|
-
if (this.type === "file") {
|
193
|
-
this.value = null;
|
194
|
-
return;
|
195
|
-
}
|
196
|
-
if (this.type === "range") {
|
197
|
-
this._input.value = this.def || ((this.max - this.min) / 2).toString();
|
198
|
-
this.value = this._input.value;
|
199
|
-
this._ranged.style.width = 100 * (parseInt(this.value) / (this.max - this.min)) + "%";
|
200
|
-
}
|
201
|
-
else {
|
202
|
-
this._input.value = this.def.toString();
|
203
|
-
this.value = this.def;
|
204
|
-
}
|
205
|
-
}
|
206
|
-
_typeSwitcher() {
|
207
|
-
switch (this.type) {
|
208
|
-
case "file":
|
209
|
-
return html `<input id="input" class="input" type="file" accept="${this.accept}" ?multiple="${!this.only}" @change="${this._handleFile}" />${htmlSlot()}`;
|
210
|
-
case "number":
|
211
|
-
return html `<input .value="${this.value}" ?autofocus="${this.autofocus}" id="input" class="input" type="number" placeholder="${this.pla}" min="${this.min}" max="${this.max}" @input="${this._handleInput}" @change="${this._handleChange}" />`;
|
212
|
-
default:
|
213
|
-
return html `<input .value="${this.value}" ?autofocus="${this.autofocus}" id="input" class="input" type="${this.type}" placeholder="${this.pla}" @input="${this._handleInput}" @change="${this._handleChange}" />`;
|
214
|
-
}
|
215
|
-
}
|
216
|
-
};
|
216
|
+
];
|
217
217
|
__decorate([
|
218
218
|
property()
|
219
219
|
], BaseInput.prototype, "accept", void 0);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"base-input.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/input/base-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, type CSSResultGroup, html, property, query } from \"../../deps.js\";\nimport { htmlSlot, type HTMLTemplate } from \"../../lib/templates.js\";\nimport { cssvar, cssvarValues, define } from \"../../root.js\";\nimport { InputElement } from \"./input.js\";\n\nconst defineName = \"base-input\";\n\n/**\n * BaseInput.\n */\n@define(defineName)\nexport class BaseInput extends InputElement {\n /**\n * Input sccept.\n */\n @property() accept = undefined;\n /**\n * Value.\n */\n @property() value: string | File | FileList = undefined;\n /**\n * Only single files are allowed to be selected.\n */\n @property({ type: Boolean }) only = false;\n /**\n * Input min.\n */\n @property({ type: Number }) min = 0;\n /**\n * Input max.\n */\n @property({ type: Number }) max = 100;\n /**\n * Input step.\n */\n @property({ type: Number }) step = 1;\n\n @query(\"#input\") _input: HTMLInputElement;\n @query(\".range i\") _ranged: HTMLElement;\n\n static styles = [\n InputElement.styles,\n css`\n :host {\n width: var(${cssvarValues.input}--width);\n height: var(${cssvarValues.input}--height);\n background: var(${cssvarValues.input}--background);\n margin: var(${cssvarValues.input}--outline-width);\n outline: var(${cssvarValues.input}--outline);\n border-radius: var(${cssvarValues.input}--radius);\n }\n\n input[type=\"file\"] {\n display: none;\n }\n\n label,\n div {\n width: 100%;\n display: flex;\n align-items: center;\n }\n\n * {\n border-radius: inherit;\n cursor: inherit;\n }\n\n input {\n box-sizing: border-box;\n height: 100%;\n width: 100%;\n margin: 0;\n color: inherit;\n background: transparent;\n padding: 0 0.25em;\n border-radius: 0.25em;\n }\n `,\n css`\n :host([type=\"range\"]) {\n height: auto !important;\n margin: 0.3em 0;\n background: var(${cssvarValues.input}--false);\n border-radius: 2em;\n }\n\n .range b:nth-of-type(1) {\n width: 1em;\n left: 0;\n background: var(${cssvarValues.input}--true);\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n .range b {\n pointer-events: none;\n width: calc(100% - 1em);\n height: 100%;\n left: 1em;\n position: absolute;\n }\n\n .range {\n height: fit-content;\n position: relative;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n }\n\n .range input {\n padding: 0;\n height: 0.6em;\n margin: 0px -0.5em;\n appearance: none;\n -webkit-appearance: none;\n outline: none;\n background: transparent;\n }\n\n .range i {\n position: absolute;\n left: 0;\n width: 50%;\n height: 100%;\n pointer-events: none;\n background: var(${cssvarValues.input}--true);\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n .range input::-webkit-slider-runnable-track {\n height: 0.6em;\n }\n\n .range input::-webkit-slider-thumb {\n z-index: 1;\n appearance: none;\n -webkit-appearance: none;\n position: relative;\n height: 1.2em;\n width: 1.2em;\n margin-top: -0.3em;\n background: var(${cssvarValues.input}--control);\n border-radius: 50%;\n border: solid 0.125em var(${cssvarValues.input}--control-edge);\n box-shadow: 0 0.1em 0.1em var(${cssvar}--shadow);\n }\n `,\n ] as CSSResultGroup;\n\n protected render(): HTMLTemplate {\n if (this.type === \"range\") {\n return html`<div class=\"range\">\n <input id=\"input\" type=\"range\" min=\"${this.min}\" max=\"${this.max}\" step=\"${this.step}\" @input=\"${this._handleRange}\" @change=\"${this._handleRange}\" />\n <b></b>\n <b>\n <i></i>\n </b>\n </div>`;\n }\n return html`<label for=\"input\"> ${htmlSlot(\"pre\")} ${this._typeSwitcher()} ${htmlSlot(\"suf\")} </label>`;\n }\n\n connectedCallback() {\n super.connectedCallback();\n if (this.type === \"file\") {\n this.value = null;\n } else {\n if (!this.def) {\n this.def = (this.value as string) || \"\";\n }\n if (!this.value) {\n this.value = this.def;\n }\n }\n this._initName();\n }\n\n protected firstUpdated() {\n super.firstUpdated();\n if (this.type === \"range\") {\n this._ranged.style.width = 100 * (parseInt(this.value as string) / (this.max - this.min)) + \"%\";\n }\n }\n\n protected _handleRange(e: any | Event) {\n this.value = e.target.value;\n this._ranged.style.width = (100 * parseInt(e.target.value)) / (this.max - this.min) + \"%\";\n this.dispatchEvent(new CustomEvent(\"input\", { detail: this.value }));\n }\n\n protected _handleFile(e: any | Event) {\n this.value = !this.only ? e.target.files : e.target.files[0];\n this.dispatchEvent(new CustomEvent(\"change\", { detail: this.value }));\n }\n\n reset() {\n if (this.type === \"file\") {\n this.value = null;\n return;\n }\n if (this.type === \"range\") {\n this._input.value = this.def || ((this.max - this.min) / 2).toString();\n this.value = this._input.value;\n this._ranged.style.width = 100 * (parseInt(this.value) / (this.max - this.min)) + \"%\";\n } else {\n this._input.value = this.def.toString();\n this.value = this.def;\n }\n }\n\n protected _typeSwitcher(): HTMLTemplate {\n switch (this.type) {\n case \"file\":\n return html`<input id=\"input\" class=\"input\" type=\"file\" accept=\"${this.accept}\" ?multiple=\"${!this.only}\" @change=\"${this._handleFile}\" />${htmlSlot()}`;\n\n case \"number\":\n return html`<input .value=\"${this.value}\" ?autofocus=\"${this.autofocus}\" id=\"input\" class=\"input\" type=\"number\" placeholder=\"${this.pla}\" min=\"${this.min}\" max=\"${this.max}\" @input=\"${this._handleInput}\" @change=\"${this._handleChange}\" />`;\n\n default:\n return html`<input .value=\"${this.value}\" ?autofocus=\"${this.autofocus}\" id=\"input\" class=\"input\" type=\"${this.type}\" placeholder=\"${this.pla}\" @input=\"${this._handleInput}\" @change=\"${this._handleChange}\" />`;\n }\n }\n}\n\nexport default BaseInput;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"base-input\": BaseInput;\n }\n}\n"]}
|
1
|
+
{"version":3,"file":"base-input.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/input/base-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, type CSSResultGroup, html, property, query } from \"../../deps.js\";\nimport { htmlSlot, type HTMLTemplate } from \"../../lib/templates.js\";\nimport { cssvar, cssvarValues, define } from \"../../root.js\";\nimport { InputElement } from \"./input.js\";\n\nconst defineName = \"base-input\";\n\n/**\n * BaseInput.\n */\n@define(defineName)\nexport class BaseInput extends InputElement {\n /**\n * Input sccept.\n */\n @property() accept = undefined;\n /**\n * Value.\n */\n @property() value: string | File | FileList = undefined;\n /**\n * Only single files are allowed to be selected.\n */\n @property({ type: Boolean }) only = false;\n /**\n * Input min.\n */\n @property({ type: Number }) min = 0;\n /**\n * Input max.\n */\n @property({ type: Number }) max = 100;\n /**\n * Input step.\n */\n @property({ type: Number }) step = 1;\n\n @query(\"#input\") _input: HTMLInputElement;\n @query(\".range i\") _ranged: HTMLElement;\n\n static styles = [\n InputElement.styles,\n css`\n :host {\n width: var(${cssvarValues.input}--width);\n height: var(${cssvarValues.input}--height);\n background: var(${cssvarValues.input}--background);\n margin: var(${cssvarValues.input}--outline-width);\n outline: var(${cssvarValues.input}--outline);\n border-radius: var(${cssvarValues.input}--radius);\n }\n\n input[type=\"file\"] {\n display: none;\n }\n\n label,\n div {\n width: 100%;\n display: flex;\n align-items: center;\n }\n\n * {\n border-radius: inherit;\n cursor: inherit;\n }\n\n input {\n box-sizing: border-box;\n height: 100%;\n width: 100%;\n margin: 0;\n color: inherit;\n background: transparent;\n padding: 0 0.25em;\n border-radius: 0.25em;\n }\n `,\n css`\n :host([type=\"range\"]) {\n height: auto !important;\n margin: 0.3em 0;\n background: var(${cssvarValues.input}--false);\n border-radius: 2em;\n }\n\n .range b:nth-of-type(1) {\n width: 1em;\n left: 0;\n background: var(${cssvarValues.input}--true);\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n .range b {\n pointer-events: none;\n width: calc(100% - 1em);\n height: 100%;\n left: 1em;\n position: absolute;\n }\n\n .range {\n height: fit-content;\n position: relative;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n }\n\n .range input {\n padding: 0;\n height: 0.6em;\n margin: 0px -0.5em;\n appearance: none;\n -webkit-appearance: none;\n outline: none;\n background: transparent;\n }\n\n .range i {\n position: absolute;\n left: 0;\n width: 50%;\n height: 100%;\n pointer-events: none;\n background: var(${cssvarValues.input}--true);\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n .range input::-webkit-slider-runnable-track {\n height: 0.6em;\n }\n\n .range input::-webkit-slider-thumb {\n z-index: 1;\n appearance: none;\n -webkit-appearance: none;\n position: relative;\n height: 1.2em;\n width: 1.2em;\n margin-top: -0.3em;\n background: var(${cssvarValues.input}--control);\n border-radius: 50%;\n border: solid 0.125em var(${cssvarValues.input}--control-edge);\n box-shadow: 0 0.1em 0.1em var(${cssvar}--shadow);\n }\n `,\n ] as CSSResultGroup;\n\n protected render(): HTMLTemplate {\n if (this.type === \"range\") {\n return html`<div class=\"range\">\n <input id=\"input\" type=\"range\" min=\"${this.min}\" max=\"${this.max}\" step=\"${this.step}\" @input=\"${this._handleRange}\" @change=\"${this._handleRange}\" />\n <b></b>\n <b>\n <i></i>\n </b>\n </div>`;\n }\n return html`<label for=\"input\"> ${htmlSlot(\"pre\")} ${this._typeSwitcher()} ${htmlSlot(\"suf\")} </label>`;\n }\n\n connectedCallback() {\n super.connectedCallback();\n if (this.type === \"file\") {\n this.value = null;\n } else {\n if (!this.def) {\n this.def = (this.value as string) || \"\";\n }\n if (!this.value) {\n this.value = this.def;\n }\n }\n this._initName();\n }\n\n protected firstUpdated() {\n super.firstUpdated();\n if (this.type === \"range\") {\n this._ranged.style.width = 100 * (parseInt(this.value as string) / (this.max - this.min)) + \"%\";\n }\n }\n\n protected _handleRange(e: any | Event) {\n this.value = e.target.value;\n this._ranged.style.width = (100 * parseInt(e.target.value)) / (this.max - this.min) + \"%\";\n this.dispatchEvent(new CustomEvent(\"input\", { detail: this.value }));\n }\n\n protected _handleFile(e: any | Event) {\n this.value = !this.only ? e.target.files : e.target.files[0];\n this.dispatchEvent(new CustomEvent(\"change\", { detail: this.value }));\n }\n\n reset() {\n if (this.type === \"file\") {\n this.value = null;\n return;\n }\n if (this.type === \"range\") {\n this._input.value = this.def || ((this.max - this.min) / 2).toString();\n this.value = this._input.value;\n this._ranged.style.width = 100 * (parseInt(this.value) / (this.max - this.min)) + \"%\";\n } else {\n this._input.value = this.def.toString();\n this.value = this.def;\n }\n }\n\n protected _typeSwitcher(): HTMLTemplate {\n switch (this.type) {\n case \"file\":\n return html`<input id=\"input\" class=\"input\" type=\"file\" accept=\"${this.accept}\" ?multiple=\"${!this.only}\" @change=\"${this._handleFile}\" />${htmlSlot()}`;\n\n case \"number\":\n return html`<input .value=\"${this.value}\" ?autofocus=\"${this.autofocus}\" id=\"input\" class=\"input\" type=\"number\" placeholder=\"${this.pla}\" min=\"${this.min}\" max=\"${this.max}\" @input=\"${this._handleInput}\" @change=\"${this._handleChange}\" />`;\n\n default:\n return html`<input .value=\"${this.value}\" ?autofocus=\"${this.autofocus}\" id=\"input\" class=\"input\" type=\"${this.type}\" placeholder=\"${this.pla}\" @input=\"${this._handleInput}\" @change=\"${this._handleChange}\" />`;\n }\n }\n}\n\nexport default BaseInput;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"base-input\": BaseInput;\n }\n}\n"]}
|
@@ -13,21 +13,6 @@ export class InputElement extends GodownElement {
|
|
13
13
|
this.autofocus = false;
|
14
14
|
this.nameValue = () => this.namevalue();
|
15
15
|
}
|
16
|
-
static { this.styles = [
|
17
|
-
GodownElement.styles,
|
18
|
-
css `
|
19
|
-
:host {
|
20
|
-
display: flex;
|
21
|
-
}
|
22
|
-
::-ms-reveal {
|
23
|
-
display: none;
|
24
|
-
}
|
25
|
-
::-webkit-calendar-picker-indicator {
|
26
|
-
background-color: var(${cssvarValues.input}-true);
|
27
|
-
border-radius: 0.1rem;
|
28
|
-
}
|
29
|
-
`,
|
30
|
-
]; }
|
31
16
|
namevalue() {
|
32
17
|
return [this.name, this.value];
|
33
18
|
}
|
@@ -93,6 +78,21 @@ export class InputElement extends GodownElement {
|
|
93
78
|
return target.value;
|
94
79
|
}
|
95
80
|
}
|
81
|
+
InputElement.styles = [
|
82
|
+
GodownElement.styles,
|
83
|
+
css `
|
84
|
+
:host {
|
85
|
+
display: flex;
|
86
|
+
}
|
87
|
+
::-ms-reveal {
|
88
|
+
display: none;
|
89
|
+
}
|
90
|
+
::-webkit-calendar-picker-indicator {
|
91
|
+
background-color: var(${cssvarValues.input}-true);
|
92
|
+
border-radius: 0.1rem;
|
93
|
+
}
|
94
|
+
`,
|
95
|
+
];
|
96
96
|
__decorate([
|
97
97
|
property({ reflect: true })
|
98
98
|
], InputElement.prototype, "type", void 0);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"input.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/input/input.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAuB,QAAQ,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAI5D,MAAM,OAAO,YAAa,SAAQ,aAAa;IAA/C;;QAC+B,SAAI,GAAc,MAAM,CAAC;QAC1C,SAAI,GAAW,SAAS,CAAC;QACzB,UAAK,GAAiB,SAAS,CAAC;QACf,UAAK,GAAG,EAAE,CAAC;QAC5B,QAAG,GAAG,EAAE,CAAC;QACQ,QAAG,GAAY,SAAS,CAAC;QACV,cAAS,GAAG,KAAK,CAAC;QAyB9D,cAAS,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;IAwErC,CAAC;
|
1
|
+
{"version":3,"file":"input.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/input/input.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, type CSSResultGroup, property } from \"../../deps.js\";\nimport { cssvarValues, GodownElement } from \"../../root.js\";\n\nexport type InputType = \"hidden\" | \"text\" | \"search\" | \"tel\" | \"url\" | \"email\" | \"password\" | \"datetime\" | \"date\" | \"month\" | \"week\" | \"time\" | \"datetime-local\" | \"number\" | \"range\" | \"color\" | \"checkbox\" | \"radio\" | \"file\" | \"image\";\n\nexport class InputElement extends GodownElement {\n @property({ reflect: true }) type: InputType = \"text\";\n @property() name: string = undefined;\n @property() value: string | any = undefined;\n @property({ reflect: true }) label = \"\";\n @property() def = \"\";\n @property({ reflect: true }) pla?: string = undefined;\n @property({ type: Boolean, reflect: true }) autofocus = false;\n\n _input: HTMLInputElement;\n compositing: boolean;\n\n static styles = [\n GodownElement.styles,\n css`\n :host {\n display: flex;\n }\n ::-ms-reveal {\n display: none;\n }\n ::-webkit-calendar-picker-indicator {\n background-color: var(${cssvarValues.input}-true);\n border-radius: 0.1rem;\n }\n `,\n ] as CSSResultGroup;\n\n namevalue(): [string, any] {\n return [this.name, this.value];\n }\n\n nameValue = () => this.namevalue();\n\n reset() {\n this.value = this.def;\n this._input.value = this.def;\n }\n\n protected _handleInput(e: any) {\n e.stopPropagation();\n this.value = e.target.value?.trim();\n if (this.compositing) {\n return;\n }\n this.dispatchEvent(new CustomEvent(\"input\", { detail: this.value, bubbles: true, composed: true }));\n this.dispatchEvent(new CustomEvent(\"change\", { detail: this.value, composed: true }));\n }\n\n protected _handleChange() {\n this.dispatchEvent(new CustomEvent(\"change\", { detail: this.value, composed: true }));\n }\n\n connectedCallback() {\n super.connectedCallback();\n if (!this.def) {\n this.def = this.value || \"\";\n }\n if (!this.value) {\n this.value = this.def;\n }\n this._initName();\n }\n\n protected _initName() {\n if (!this.name) {\n if (this.label || this.type) {\n this.name = this.label || this.type;\n }\n }\n }\n\n protected _compositionCheck() {\n if (this._input) {\n this.addEvent(this._input, \"compositionstart\", () => {\n this.compositing = true;\n });\n this.addEvent(this._input, \"compositionend\", (e: MouseEvent) => {\n this.compositing = false;\n this._handleInput(e);\n });\n }\n }\n\n protected _changeInputType(t: InputType) {\n this._input.type = t;\n }\n\n focus(options?: FocusOptions) {\n this._input?.focus(options);\n }\n\n protected firstUpdated() {\n this._compositionCheck();\n this.reset();\n }\n\n protected targetValue(e: Event): string | any {\n const target = e.target as HTMLInputElement;\n if (target.value.trim) {\n return target.value.trim();\n }\n return target.value;\n }\n}\n"]}
|