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
@@ -19,15 +19,26 @@ let WrapView = class WrapView extends GodownElement {
|
|
19
19
|
*/
|
20
20
|
this.wrap = "";
|
21
21
|
}
|
22
|
-
|
23
|
-
|
22
|
+
render() {
|
23
|
+
switch (this.with) {
|
24
|
+
case "expand":
|
25
|
+
return html `<i class="${this.wrap || "close"}"></i>`;
|
26
|
+
case "icon":
|
27
|
+
return icons[this.wrap]?.();
|
28
|
+
default:
|
29
|
+
return htmlSlot(this.with || this.wrap);
|
30
|
+
}
|
31
|
+
}
|
32
|
+
};
|
33
|
+
WrapView.styles = [
|
34
|
+
css `
|
24
35
|
:host {
|
25
36
|
display: flex;
|
26
37
|
width: 1em;
|
27
38
|
height: 1em;
|
28
39
|
}
|
29
40
|
`,
|
30
|
-
|
41
|
+
css `
|
31
42
|
i {
|
32
43
|
width: 100%;
|
33
44
|
height: 100%;
|
@@ -68,18 +79,7 @@ let WrapView = class WrapView extends GodownElement {
|
|
68
79
|
--e: 0.15em;
|
69
80
|
}
|
70
81
|
`,
|
71
|
-
|
72
|
-
render() {
|
73
|
-
switch (this.with) {
|
74
|
-
case "expand":
|
75
|
-
return html `<i class="${this.wrap || "close"}"></i>`;
|
76
|
-
case "icon":
|
77
|
-
return icons[this.wrap]?.();
|
78
|
-
default:
|
79
|
-
return htmlSlot(this.with || this.wrap);
|
80
|
-
}
|
81
|
-
}
|
82
|
-
};
|
82
|
+
];
|
83
83
|
__decorate([
|
84
84
|
property()
|
85
85
|
], WrapView.prototype, "with", void 0);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"wrap-view.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/view/wrap-view.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAqB,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEtD,MAAM,UAAU,GAAG,WAAW,CAAC;AAE/B;;GAEG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,aAAa;IAApC;;QACL;;WAEG;QACS,SAAI,GAAoD,EAAE,CAAC;QACvE;;WAEG;QACS,SAAI,GAAgC,EAAE,CAAC;IA+DrD,CAAC;
|
1
|
+
{"version":3,"file":"wrap-view.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/view/wrap-view.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAqB,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEtD,MAAM,UAAU,GAAG,WAAW,CAAC;AAE/B;;GAEG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,aAAa;IAApC;;QACL;;WAEG;QACS,SAAI,GAAoD,EAAE,CAAC;QACvE;;WAEG;QACS,SAAI,GAAgC,EAAE,CAAC;IA+DrD,CAAC;IAVW,MAAM;QACd,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,QAAQ;gBACX,OAAO,IAAI,CAAA,aAAa,IAAI,CAAC,IAAI,IAAI,OAAO,QAAQ,CAAC;YACvD,KAAK,MAAM;gBACT,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;YAC9B;gBACE,OAAO,QAAQ,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5C,CAAC;IACH,CAAC;;AA5DM,eAAM,GAAG;IACd,GAAG,CAAA;;;;;;KAMF;IACD,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwCF;CACF,AAjDY,CAiDX;AAvDU;IAAX,QAAQ,EAAE;sCAA4D;AAI3D;IAAX,QAAQ,EAAE;sCAAwC;AARxC,QAAQ;IADpB,MAAM,CAAC,UAAU,CAAC;GACN,QAAQ,CAuEpB;;AAED,eAAe,QAAQ,CAAC","sourcesContent":["import { css, html, property } from \"../../deps.js\";\nimport { htmlSlot, type HTMLTemplate } from \"../../lib/templates.js\";\nimport { icons } from \"../../lib/templates.js\";\nimport { define, GodownElement } from \"../../root.js\";\n\nconst defineName = \"wrap-view\";\n\n/**\n * WithWrap is used for wrap content.\n */\n@define(defineName)\nexport class WrapView extends GodownElement {\n /**\n * Behavioral basis.\n */\n @property() with: string | keyof typeof icons | \"expand\" | \"icon\" = \"\";\n /**\n * Rendered content or slot name.\n */\n @property() wrap: string | keyof typeof icons = \"\";\n\n static styles = [\n css`\n :host {\n display: flex;\n width: 1em;\n height: 1em;\n }\n `,\n css`\n i {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n --e: 0.05em;\n }\n\n i::before,\n i::after {\n content: \"\";\n display: block;\n width: 100%;\n height: 0.05em;\n background: currentColor;\n transition: 0.3s;\n }\n\n i::after {\n transform: translate(0, calc(var(--e) / -2)) rotate(-45deg);\n }\n\n i::before {\n transform: translate(0, calc(var(--e) / 2)) rotate(45deg);\n }\n\n .close::after {\n transform: translate(0, var(--e));\n }\n\n .close::before {\n transform: translate(0, calc(var(--e) * -1));\n }\n\n .close {\n --e: 0.15em;\n }\n `,\n ];\n\n protected render(): HTMLTemplate {\n switch (this.with) {\n case \"expand\":\n return html`<i class=\"${this.wrap || \"close\"}\"></i>`;\n case \"icon\":\n return icons[this.wrap]?.();\n default:\n return htmlSlot(this.with || this.wrap);\n }\n }\n}\n\nexport default WrapView;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"wrap-view\": WrapView;\n }\n}\n"]}
|
package/nav-aside.d.ts
DELETED
package/nav-aside.d.ts.map
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"nav-aside.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["nav-aside.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAC"}
|
package/nav-aside.js
DELETED
package/nav-aside.js.map
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"nav-aside.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["nav-aside.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAC","sourcesContent":["export { default } from \"./web-components/layout/nav-aside.js\";"]}
|
package/open-list.d.ts
DELETED
package/open-list.d.ts.map
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"open-list.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["open-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oCAAoC,CAAC"}
|
package/open-list.js
DELETED
package/open-list.js.map
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"open-list.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["open-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oCAAoC,CAAC","sourcesContent":["export { default } from \"./web-components/open/open-list.js\";"]}
|
package/scroll-x.d.ts
DELETED
package/scroll-x.d.ts.map
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"scroll-x.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["scroll-x.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC"}
|
package/scroll-x.js
DELETED
package/scroll-x.js.map
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"scroll-x.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["scroll-x.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC","sourcesContent":["export { default } from \"./web-components/view/scroll-x.js\";"]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/layout/index.ts"],"names":[],"mappings":"AACA,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/layout/index.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC","sourcesContent":["/// script generated\nexport * from \"./divider-line.js\";\nexport * from \"./flex-flow.js\";\nexport * from \"./nav-aside.js\";\nexport * from \"./nav-layout.js\";\n"]}
|
@@ -1,25 +0,0 @@
|
|
1
|
-
import { type CSSResultGroup } from "../../deps.js";
|
2
|
-
import { type HTMLTemplate } from "../../lib/templates.js";
|
3
|
-
import { GodownElement } from "../../root.js";
|
4
|
-
/**
|
5
|
-
* NavAside renders a side or top navigation.
|
6
|
-
*/
|
7
|
-
export declare class NavAside extends GodownElement {
|
8
|
-
/**
|
9
|
-
* The width of the screen for the position change.
|
10
|
-
*/
|
11
|
-
mobile: string;
|
12
|
-
/**
|
13
|
-
* The position behavior.
|
14
|
-
*/
|
15
|
-
position: string;
|
16
|
-
static styles: CSSResultGroup;
|
17
|
-
protected render(): HTMLTemplate;
|
18
|
-
}
|
19
|
-
export default NavAside;
|
20
|
-
declare global {
|
21
|
-
interface HTMLElementTagNameMap {
|
22
|
-
"nav-aside": NavAside;
|
23
|
-
}
|
24
|
-
}
|
25
|
-
//# sourceMappingURL=nav-aside.d.ts.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"nav-aside.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/layout/nav-aside.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,cAAc,EAAkB,MAAM,eAAe,CAAC;AACzE,OAAO,EAAuB,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAChF,OAAO,EAAqC,aAAa,EAAE,MAAM,eAAe,CAAC;AAKjF;;GAEG;AACH,qBACa,QAAS,SAAQ,aAAa;IACzC;;OAEG;IACS,MAAM,SAAW;IAC7B;;OAEG;IACS,QAAQ,SAAkB;IAEtC,MAAM,CAAC,MAAM,iBA0BO;IAEpB,SAAS,CAAC,MAAM,IAAI,YAAY;CASjC;AAED,eAAe,QAAQ,CAAC;AACxB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
|
@@ -1,70 +0,0 @@
|
|
1
|
-
import { __decorate } from "tslib";
|
2
|
-
import { css, html, property } from "../../deps.js";
|
3
|
-
import { htmlSlot, htmlStyle } from "../../lib/templates.js";
|
4
|
-
import { createScope, cssvarValues, define, GodownElement } from "../../root.js";
|
5
|
-
const defineName = "nav-aside";
|
6
|
-
const cssvarScope = createScope(defineName);
|
7
|
-
/**
|
8
|
-
* NavAside renders a side or top navigation.
|
9
|
-
*/
|
10
|
-
let NavAside = class NavAside extends GodownElement {
|
11
|
-
constructor() {
|
12
|
-
super(...arguments);
|
13
|
-
/**
|
14
|
-
* The width of the screen for the position change.
|
15
|
-
*/
|
16
|
-
this.mobile = "720px";
|
17
|
-
/**
|
18
|
-
* The position behavior.
|
19
|
-
*/
|
20
|
-
this.position = "sticky fixed";
|
21
|
-
}
|
22
|
-
static { this.styles = [
|
23
|
-
GodownElement.styles,
|
24
|
-
css `
|
25
|
-
:host {
|
26
|
-
${cssvarScope}--text: var(${cssvarValues.text});
|
27
|
-
${cssvarScope}--background: var(${cssvarValues.main});
|
28
|
-
color: var(${cssvarScope}--text);
|
29
|
-
background: var(${cssvarScope}--background);
|
30
|
-
top: 0;
|
31
|
-
left: 0;
|
32
|
-
bottom: 0;
|
33
|
-
width: 100%;
|
34
|
-
height: fit-content;
|
35
|
-
display: flex;
|
36
|
-
}
|
37
|
-
|
38
|
-
nav {
|
39
|
-
height: inherit;
|
40
|
-
width: inherit;
|
41
|
-
display: flex;
|
42
|
-
flex-direction: row;
|
43
|
-
align-items: flex-start;
|
44
|
-
justify-content: space-between;
|
45
|
-
box-sizing: border-box;
|
46
|
-
}
|
47
|
-
`,
|
48
|
-
]; }
|
49
|
-
render() {
|
50
|
-
const position = this.position.split(/\s+/);
|
51
|
-
const p = position[0] || "sticky";
|
52
|
-
const pm = position[1] || "fixed";
|
53
|
-
const m = this.mobile || "720px";
|
54
|
-
const style = `:host{position:${p} !important;}@media(min-width:${m}){:host{position:${pm} !important;width:fit-content !important;height:100% !important;}nav{display: flex !important;justify-content: space-between !important;flex-direction: column !important;align-content: flex-start !important;align-items: stretch !important;}}`;
|
55
|
-
return html `<nav>${htmlSlot()}</nav>
|
56
|
-
${htmlStyle(style)}`;
|
57
|
-
}
|
58
|
-
};
|
59
|
-
__decorate([
|
60
|
-
property()
|
61
|
-
], NavAside.prototype, "mobile", void 0);
|
62
|
-
__decorate([
|
63
|
-
property()
|
64
|
-
], NavAside.prototype, "position", void 0);
|
65
|
-
NavAside = __decorate([
|
66
|
-
define(defineName)
|
67
|
-
], NavAside);
|
68
|
-
export { NavAside };
|
69
|
-
export default NavAside;
|
70
|
-
//# sourceMappingURL=nav-aside.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"nav-aside.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/layout/nav-aside.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAuB,IAAI,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAqB,MAAM,wBAAwB,CAAC;AAChF,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEjF,MAAM,UAAU,GAAG,WAAW,CAAC;AAC/B,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;AAE5C;;GAEG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,aAAa;IAApC;;QACL;;WAEG;QACS,WAAM,GAAG,OAAO,CAAC;QAC7B;;WAEG;QACS,aAAQ,GAAG,cAAc,CAAC;IAuCxC,CAAC;aArCQ,WAAM,GAAG;QACd,aAAa,CAAC,MAAM;QACpB,GAAG,CAAA;;UAEG,WAAW,eAAe,YAAY,CAAC,IAAI;UAC3C,WAAW,qBAAqB,YAAY,CAAC,IAAI;qBACtC,WAAW;0BACN,WAAW;;;;;;;;;;;;;;;;;;KAkBhC;KACgB,AA1BN,CA0BO;IAEV,MAAM;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAC5C,MAAM,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,QAAQ,CAAC;QAClC,MAAM,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,OAAO,CAAC;QAClC,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,IAAI,OAAO,CAAC;QACjC,MAAM,KAAK,GAAG,kBAAkB,CAAC,iCAAiC,CAAC,oBAAoB,EAAE,mPAAmP,CAAC;QAC7U,OAAO,IAAI,CAAA,QAAQ,QAAQ,EAAE;QACzB,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;IACzB,CAAC;;AA1CW;IAAX,QAAQ,EAAE;wCAAkB;AAIjB;IAAX,QAAQ,EAAE;0CAA2B;AAR3B,QAAQ;IADpB,MAAM,CAAC,UAAU,CAAC;GACN,QAAQ,CA+CpB;;AAED,eAAe,QAAQ,CAAC","sourcesContent":["import { css, type CSSResultGroup, html, property } from \"../../deps.js\";\nimport { htmlSlot, htmlStyle, type HTMLTemplate } from \"../../lib/templates.js\";\nimport { createScope, cssvarValues, define, GodownElement } from \"../../root.js\";\n\nconst defineName = \"nav-aside\";\nconst cssvarScope = createScope(defineName);\n\n/**\n * NavAside renders a side or top navigation.\n */\n@define(defineName)\nexport class NavAside extends GodownElement {\n /**\n * The width of the screen for the position change.\n */\n @property() mobile = \"720px\";\n /**\n * The position behavior.\n */\n @property() position = \"sticky fixed\";\n\n static styles = [\n GodownElement.styles,\n css`\n :host {\n ${cssvarScope}--text: var(${cssvarValues.text});\n ${cssvarScope}--background: var(${cssvarValues.main});\n color: var(${cssvarScope}--text);\n background: var(${cssvarScope}--background);\n top: 0;\n left: 0;\n bottom: 0;\n width: 100%;\n height: fit-content;\n display: flex;\n }\n\n nav {\n height: inherit;\n width: inherit;\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n justify-content: space-between;\n box-sizing: border-box;\n }\n `,\n ] as CSSResultGroup;\n\n protected render(): HTMLTemplate {\n const position = this.position.split(/\\s+/);\n const p = position[0] || \"sticky\";\n const pm = position[1] || \"fixed\";\n const m = this.mobile || \"720px\";\n const style = `:host{position:${p} !important;}@media(min-width:${m}){:host{position:${pm} !important;width:fit-content !important;height:100% !important;}nav{display: flex !important;justify-content: space-between !important;flex-direction: column !important;align-content: flex-start !important;align-items: stretch !important;}}`;\n return html`<nav>${htmlSlot()}</nav>\n ${htmlStyle(style)}`;\n }\n}\n\nexport default NavAside;\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nav-aside\": NavAside;\n }\n}\n"]}
|
@@ -1,20 +0,0 @@
|
|
1
|
-
import { type CSSResultGroup } from "../../deps.js";
|
2
|
-
import { type HTMLTemplate } from "../../lib/templates.js";
|
3
|
-
import { OpenableElement } from "./open.js";
|
4
|
-
/**
|
5
|
-
* OpenList renders the menu when it has a summary, otherwise a list.
|
6
|
-
*
|
7
|
-
* Inspired by Docusaurus (v1,v2).
|
8
|
-
*/
|
9
|
-
export declare class OpenList extends OpenableElement {
|
10
|
-
_section: HTMLElement;
|
11
|
-
static styles: CSSResultGroup;
|
12
|
-
protected render(): HTMLTemplate;
|
13
|
-
}
|
14
|
-
export default OpenList;
|
15
|
-
declare global {
|
16
|
-
interface HTMLElementTagNameMap {
|
17
|
-
"open-list": OpenList;
|
18
|
-
}
|
19
|
-
}
|
20
|
-
//# sourceMappingURL=open-list.d.ts.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"open-list.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/open/open-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,cAAc,EAAe,MAAM,eAAe,CAAC;AAEtE,OAAO,EAAY,KAAK,YAAY,EAAY,MAAM,wBAAwB,CAAC;AAE/E,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAI5C;;;;GAIG;AACH,qBACa,QAAS,SAAQ,eAAe;IACzB,QAAQ,EAAE,WAAW,CAAC;IACxC,MAAM,CAAC,MAAM,iBAgCO;IAEpB,SAAS,CAAC,MAAM,IAAI,YAAY;CAejC;AAED,eAAe,QAAQ,CAAC;AAExB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
|
@@ -1,71 +0,0 @@
|
|
1
|
-
import { __decorate } from "tslib";
|
2
|
-
import { css, html, query } from "../../deps.js";
|
3
|
-
import { ifValue } from "../../lib/directives.js";
|
4
|
-
import { htmlSlot, svgArrow } from "../../lib/templates.js";
|
5
|
-
import { cssvarValues, define } from "../../root.js";
|
6
|
-
import { OpenableElement } from "./open.js";
|
7
|
-
const defineName = "open-list";
|
8
|
-
/**
|
9
|
-
* OpenList renders the menu when it has a summary, otherwise a list.
|
10
|
-
*
|
11
|
-
* Inspired by Docusaurus (v1,v2).
|
12
|
-
*/
|
13
|
-
let OpenList = class OpenList extends OpenableElement {
|
14
|
-
static { this.styles = [
|
15
|
-
OpenableElement.styles,
|
16
|
-
css `
|
17
|
-
i {
|
18
|
-
width: 1.2em;
|
19
|
-
height: 1.2em;
|
20
|
-
display: inline-flex;
|
21
|
-
align-items: center;
|
22
|
-
border-radius: 20%;
|
23
|
-
transition: inherit;
|
24
|
-
}
|
25
|
-
|
26
|
-
dt i {
|
27
|
-
background: rgb(var(${cssvarValues.mainRGB}) / 0.055);
|
28
|
-
}
|
29
|
-
|
30
|
-
dt i:hover {
|
31
|
-
background: rgb(var(${cssvarValues.mainRGB}) / 0.075);
|
32
|
-
}
|
33
|
-
|
34
|
-
dd {
|
35
|
-
padding: 0.2em;
|
36
|
-
}
|
37
|
-
|
38
|
-
:host([open]) svg {
|
39
|
-
transform: rotate(90deg);
|
40
|
-
}
|
41
|
-
|
42
|
-
.noTitle {
|
43
|
-
display: none;
|
44
|
-
}
|
45
|
-
`,
|
46
|
-
]; }
|
47
|
-
render() {
|
48
|
-
const noTitle = !this.summary && ifValue(!this.querySelector("[slot=summary]"), "noTitle");
|
49
|
-
if (noTitle) {
|
50
|
-
this.open = true;
|
51
|
-
}
|
52
|
-
return html `<dl>
|
53
|
-
<dt class="${noTitle}">
|
54
|
-
<span>${this.summary || htmlSlot("summary")}</span>
|
55
|
-
<i @click="${this._handelClick}"> ${htmlSlot("icon", svgArrow(), this)} </i>
|
56
|
-
</dt>
|
57
|
-
<dd>
|
58
|
-
<section>${htmlSlot()}</section>
|
59
|
-
</dd>
|
60
|
-
</dl>`;
|
61
|
-
}
|
62
|
-
};
|
63
|
-
__decorate([
|
64
|
-
query("section")
|
65
|
-
], OpenList.prototype, "_section", void 0);
|
66
|
-
OpenList = __decorate([
|
67
|
-
define(defineName)
|
68
|
-
], OpenList);
|
69
|
-
export { OpenList };
|
70
|
-
export default OpenList;
|
71
|
-
//# sourceMappingURL=open-list.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"open-list.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/open/open-list.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAuB,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtE,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAqB,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAE5C,MAAM,UAAU,GAAG,WAAW,CAAC;AAE/B;;;;GAIG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,eAAe;aAEpC,WAAM,GAAG;QACd,eAAe,CAAC,MAAM;QACtB,GAAG,CAAA;;;;;;;;;;;8BAWuB,YAAY,CAAC,OAAO;;;;8BAIpB,YAAY,CAAC,OAAO;;;;;;;;;;;;;;KAc7C;KACgB,AAhCN,CAgCO;IAEV,MAAM;QACd,MAAM,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,EAAE,SAAS,CAAC,CAAC;QAC3F,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACnB,CAAC;QACD,OAAO,IAAI,CAAA;mBACI,OAAO;gBACV,IAAI,CAAC,OAAO,IAAI,QAAQ,CAAC,SAAS,CAAC;qBAC9B,IAAI,CAAC,YAAY,MAAM,QAAQ,CAAC,MAAM,EAAE,QAAQ,EAAE,EAAE,IAAI,CAAC;;;mBAG3D,QAAQ,EAAE;;UAEnB,CAAC;IACT,CAAC;;AAjDiB;IAAjB,KAAK,CAAC,SAAS,CAAC;0CAAuB;AAD7B,QAAQ;IADpB,MAAM,CAAC,UAAU,CAAC;GACN,QAAQ,CAmDpB;;AAED,eAAe,QAAQ,CAAC","sourcesContent":["import { css, type CSSResultGroup, html, query } from \"../../deps.js\";\nimport { ifValue } from \"../../lib/directives.js\";\nimport { htmlSlot, type HTMLTemplate, svgArrow } from \"../../lib/templates.js\";\nimport { cssvarValues, define } from \"../../root.js\";\nimport { OpenableElement } from \"./open.js\";\n\nconst defineName = \"open-list\";\n\n/**\n * OpenList renders the menu when it has a summary, otherwise a list.\n *\n * Inspired by Docusaurus (v1,v2).\n */\n@define(defineName)\nexport class OpenList extends OpenableElement {\n @query(\"section\") _section: HTMLElement;\n static styles = [\n OpenableElement.styles,\n css`\n i {\n width: 1.2em;\n height: 1.2em;\n display: inline-flex;\n align-items: center;\n border-radius: 20%;\n transition: inherit;\n }\n\n dt i {\n background: rgb(var(${cssvarValues.mainRGB}) / 0.055);\n }\n\n dt i:hover {\n background: rgb(var(${cssvarValues.mainRGB}) / 0.075);\n }\n\n dd {\n padding: 0.2em;\n }\n\n :host([open]) svg {\n transform: rotate(90deg);\n }\n\n .noTitle {\n display: none;\n }\n `,\n ] as CSSResultGroup;\n\n protected render(): HTMLTemplate {\n const noTitle = !this.summary && ifValue(!this.querySelector(\"[slot=summary]\"), \"noTitle\");\n if (noTitle) {\n this.open = true;\n }\n return html`<dl>\n <dt class=\"${noTitle}\">\n <span>${this.summary || htmlSlot(\"summary\")}</span>\n <i @click=\"${this._handelClick}\"> ${htmlSlot(\"icon\", svgArrow(), this)} </i>\n </dt>\n <dd>\n <section>${htmlSlot()}</section>\n </dd>\n </dl>`;\n }\n}\n\nexport default OpenList;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"open-list\": OpenList;\n }\n}\n"]}
|
@@ -1,25 +0,0 @@
|
|
1
|
-
import { type HTMLTemplate } from "../../lib/templates.js";
|
2
|
-
import { GodownElement } from "../../root.js";
|
3
|
-
/**
|
4
|
-
* ScrollX changes the scroll direction to horizontal.
|
5
|
-
*/
|
6
|
-
export declare class ScrollX extends GodownElement {
|
7
|
-
/**
|
8
|
-
* Element height.
|
9
|
-
*/
|
10
|
-
height: string;
|
11
|
-
_section: HTMLElement;
|
12
|
-
static styles: import("lit").CSSResult;
|
13
|
-
protected render(): HTMLTemplate;
|
14
|
-
protected _handelScroll(e: any): void;
|
15
|
-
protected firstUpdated(): void;
|
16
|
-
protected _handelResize(): void;
|
17
|
-
resize(): void;
|
18
|
-
}
|
19
|
-
export default ScrollX;
|
20
|
-
declare global {
|
21
|
-
interface HTMLElementTagNameMap {
|
22
|
-
"scroll-x": ScrollX;
|
23
|
-
}
|
24
|
-
}
|
25
|
-
//# sourceMappingURL=scroll-x.d.ts.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"scroll-x.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/view/scroll-x.ts"],"names":[],"mappings":"AACA,OAAO,EAAuB,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAGhF,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAI9C;;GAEG;AACH,qBACa,OAAQ,SAAQ,aAAa;IACxC;;OAEG;IACS,MAAM,SAAM;IAEN,QAAQ,EAAE,WAAW,CAAC;IAExC,MAAM,CAAC,MAAM,0BA4BX;IAEF,SAAS,CAAC,MAAM,IAAI,YAAY;IAUhC,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,GAAG;IAI9B,SAAS,CAAC,YAAY;IAKtB,SAAS,CAAC,aAAa;IAIvB,MAAM;CAiBP;AAED,eAAe,OAAO,CAAC;AAEvB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
|
@@ -1,97 +0,0 @@
|
|
1
|
-
import { __decorate } from "tslib";
|
2
|
-
import { css, html, property, query } from "../../deps.js";
|
3
|
-
import { htmlSlot, htmlStyle } from "../../lib/templates.js";
|
4
|
-
import { debounce } from "../../lib/utils.js";
|
5
|
-
import { define } from "../../root.js";
|
6
|
-
import { GodownElement } from "../../root.js";
|
7
|
-
const defineName = "scroll-x";
|
8
|
-
/**
|
9
|
-
* ScrollX changes the scroll direction to horizontal.
|
10
|
-
*/
|
11
|
-
let ScrollX = class ScrollX extends GodownElement {
|
12
|
-
constructor() {
|
13
|
-
super(...arguments);
|
14
|
-
/**
|
15
|
-
* Element height.
|
16
|
-
*/
|
17
|
-
this.height = "";
|
18
|
-
}
|
19
|
-
static { this.styles = css `
|
20
|
-
:host {
|
21
|
-
display: block;
|
22
|
-
width: 100%;
|
23
|
-
}
|
24
|
-
|
25
|
-
section {
|
26
|
-
overflow: auto;
|
27
|
-
position: relative;
|
28
|
-
transform-origin: 0 0;
|
29
|
-
transform: rotate(-90deg) translateX(-100%);
|
30
|
-
}
|
31
|
-
|
32
|
-
section::-webkit-scrollbar {
|
33
|
-
display: none;
|
34
|
-
}
|
35
|
-
|
36
|
-
span {
|
37
|
-
display: flex;
|
38
|
-
}
|
39
|
-
|
40
|
-
main {
|
41
|
-
width: auto;
|
42
|
-
position: absolute;
|
43
|
-
left: 100%;
|
44
|
-
transform-origin: 0 0;
|
45
|
-
transform: rotate(90deg);
|
46
|
-
}
|
47
|
-
`; }
|
48
|
-
render() {
|
49
|
-
const style = this.height && `:host{height:${this.height}}`;
|
50
|
-
return html `<section @scroll="${this._handelScroll}">
|
51
|
-
<main>
|
52
|
-
<span>${htmlSlot()}</span>
|
53
|
-
</main>
|
54
|
-
${htmlStyle(style)}
|
55
|
-
</section>`;
|
56
|
-
}
|
57
|
-
_handelScroll(e) {
|
58
|
-
this.dispatchEvent(new CustomEvent("scroll", { detail: e.target.scrollTop }));
|
59
|
-
}
|
60
|
-
firstUpdated() {
|
61
|
-
this.resize();
|
62
|
-
this.addEvent(window, "resize", debounce(this._handelResize.bind(this), 500));
|
63
|
-
}
|
64
|
-
_handelResize() {
|
65
|
-
this.resize();
|
66
|
-
}
|
67
|
-
resize() {
|
68
|
-
const child = this.firstElementChild;
|
69
|
-
if (!child) {
|
70
|
-
return;
|
71
|
-
}
|
72
|
-
const height = child.clientHeight || 0;
|
73
|
-
if (height) {
|
74
|
-
this._section.style.width = height + "px";
|
75
|
-
this._section.style.height = getComputedStyle(this).width;
|
76
|
-
}
|
77
|
-
else {
|
78
|
-
const ComputedHeight = getComputedStyle(child).height;
|
79
|
-
this.style.height = ComputedHeight;
|
80
|
-
this._section.style.width = ComputedHeight;
|
81
|
-
this._section.style.height = getComputedStyle(this).width;
|
82
|
-
}
|
83
|
-
this.height = this._section.style.width;
|
84
|
-
}
|
85
|
-
};
|
86
|
-
__decorate([
|
87
|
-
property()
|
88
|
-
], ScrollX.prototype, "height", void 0);
|
89
|
-
__decorate([
|
90
|
-
query("section")
|
91
|
-
], ScrollX.prototype, "_section", void 0);
|
92
|
-
ScrollX = __decorate([
|
93
|
-
define(defineName)
|
94
|
-
], ScrollX);
|
95
|
-
export { ScrollX };
|
96
|
-
export default ScrollX;
|
97
|
-
//# sourceMappingURL=scroll-x.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"scroll-x.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/view/scroll-x.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAqB,MAAM,wBAAwB,CAAC;AAChF,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C,MAAM,UAAU,GAAG,UAAU,CAAC;AAE9B;;GAEG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,aAAa;IAAnC;;QACL;;WAEG;QACS,WAAM,GAAG,EAAE,CAAC;IA0E1B,CAAC;aAtEQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BlB,AA5BY,CA4BX;IAEQ,MAAM;QACd,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,IAAI,gBAAgB,IAAI,CAAC,MAAM,GAAG,CAAC;QAC5D,OAAO,IAAI,CAAA,qBAAqB,IAAI,CAAC,aAAa;;gBAEtC,QAAQ,EAAE;;QAElB,SAAS,CAAC,KAAK,CAAC;eACT,CAAC;IACd,CAAC;IAES,aAAa,CAAC,CAAM;QAC5B,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;IAChF,CAAC;IAES,YAAY;QACpB,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,QAAQ,EAAE,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;IAChF,CAAC;IAES,aAAa;QACrB,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,iBAAiB,CAAC;QACrC,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAO;QACT,CAAC;QACD,MAAM,MAAM,GAAG,KAAK,CAAC,YAAY,IAAI,CAAC,CAAC;QACvC,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,GAAG,IAAI,CAAC;YAC1C,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;QAC5D,CAAC;aAAM,CAAC;YACN,MAAM,cAAc,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC;YACtD,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,cAAc,CAAC;YACnC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,GAAG,cAAc,CAAC;YAC3C,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;QAC5D,CAAC;QACD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC;IAC1C,CAAC;;AAzEW;IAAX,QAAQ,EAAE;uCAAa;AAEN;IAAjB,KAAK,CAAC,SAAS,CAAC;yCAAuB;AAN7B,OAAO;IADnB,MAAM,CAAC,UAAU,CAAC;GACN,OAAO,CA8EnB;;AAED,eAAe,OAAO,CAAC","sourcesContent":["import { css, html, property, query } from \"../../deps.js\";\nimport { htmlSlot, htmlStyle, type HTMLTemplate } from \"../../lib/templates.js\";\nimport { debounce } from \"../../lib/utils.js\";\nimport { define } from \"../../root.js\";\nimport { GodownElement } from \"../../root.js\";\n\nconst defineName = \"scroll-x\";\n\n/**\n * ScrollX changes the scroll direction to horizontal.\n */\n@define(defineName)\nexport class ScrollX extends GodownElement {\n /**\n * Element height.\n */\n @property() height = \"\";\n\n @query(\"section\") _section: HTMLElement;\n\n static styles = css`\n :host {\n display: block;\n width: 100%;\n }\n\n section {\n overflow: auto;\n position: relative;\n transform-origin: 0 0;\n transform: rotate(-90deg) translateX(-100%);\n }\n\n section::-webkit-scrollbar {\n display: none;\n }\n\n span {\n display: flex;\n }\n\n main {\n width: auto;\n position: absolute;\n left: 100%;\n transform-origin: 0 0;\n transform: rotate(90deg);\n }\n `;\n\n protected render(): HTMLTemplate {\n const style = this.height && `:host{height:${this.height}}`;\n return html`<section @scroll=\"${this._handelScroll}\">\n <main>\n <span>${htmlSlot()}</span>\n </main>\n ${htmlStyle(style)}\n </section>`;\n }\n\n protected _handelScroll(e: any) {\n this.dispatchEvent(new CustomEvent(\"scroll\", { detail: e.target.scrollTop }));\n }\n\n protected firstUpdated() {\n this.resize();\n this.addEvent(window, \"resize\", debounce(this._handelResize.bind(this), 500));\n }\n\n protected _handelResize() {\n this.resize();\n }\n\n resize() {\n const child = this.firstElementChild;\n if (!child) {\n return;\n }\n const height = child.clientHeight || 0;\n if (height) {\n this._section.style.width = height + \"px\";\n this._section.style.height = getComputedStyle(this).width;\n } else {\n const ComputedHeight = getComputedStyle(child).height;\n this.style.height = ComputedHeight;\n this._section.style.width = ComputedHeight;\n this._section.style.height = getComputedStyle(this).width;\n }\n this.height = this._section.style.width;\n }\n}\n\nexport default ScrollX;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"scroll-x\": ScrollX;\n }\n}\n"]}
|