@iyulab/modern-app 0.3.1 → 0.3.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/CHANGELOG.md +31 -8
- package/dist/App.d.ts +0 -2
- package/dist/App.js +77 -108
- package/dist/_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js +9 -0
- package/dist/_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js +6 -0
- package/dist/components/SidebarButton.d.ts +0 -2
- package/dist/components/SidebarButton.js +23 -37
- package/dist/components/SidebarButton.styles.js +5 -5
- package/dist/components/SidebarGroup.d.ts +0 -2
- package/dist/components/SidebarGroup.js +32 -46
- package/dist/components/SidebarGroup.styles.js +5 -5
- package/dist/components/SidebarLink.d.ts +0 -2
- package/dist/components/SidebarLink.js +24 -46
- package/dist/components/SidebarLink.styles.js +5 -5
- package/dist/components/SidebarSection.d.ts +0 -2
- package/dist/components/SidebarSection.js +19 -34
- package/dist/components/SidebarSection.styles.js +4 -4
- package/dist/index.js +5 -5
- package/dist/internals/ScreenObserver.js +22 -36
- package/dist/internals/StyledElement.d.ts +0 -1
- package/dist/internals/StyledElement.js +43 -57
- package/dist/layouts/SidebarLayout.d.ts +5 -25
- package/dist/layouts/SidebarLayout.js +80 -127
- package/dist/layouts/SidebarLayout.styles.js +4 -4
- package/dist/types/AppOptions.d.ts +2 -2
- package/package.json +5 -5
|
@@ -1,24 +1,19 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import { StyledElement as
|
|
4
|
-
import { styles as
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
static {
|
|
18
|
-
this.dependencies = {};
|
|
19
|
-
}
|
|
20
|
-
render() {
|
|
21
|
-
return n`
|
|
1
|
+
import { __decorateMetadata as e } from "../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
|
|
2
|
+
import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
|
|
3
|
+
import { StyledElement as n } from "../internals/StyledElement.js";
|
|
4
|
+
import { styles as r } from "./SidebarSection.styles.js";
|
|
5
|
+
import { html as i } from "lit";
|
|
6
|
+
import { customElement as a, property as o } from "lit/decorators.js";
|
|
7
|
+
//#region src/components/SidebarSection.ts
|
|
8
|
+
var s = class extends n {
|
|
9
|
+
constructor(...e) {
|
|
10
|
+
super(...e), this.compact = !1;
|
|
11
|
+
}
|
|
12
|
+
static {
|
|
13
|
+
this.styles = [super.styles, r];
|
|
14
|
+
}
|
|
15
|
+
render() {
|
|
16
|
+
return i`
|
|
22
17
|
<div class="header" part="header" ?hidden=${this.compact}>
|
|
23
18
|
<span class="title" part="title">
|
|
24
19
|
${this.mainTitle}
|
|
@@ -32,17 +27,7 @@ class p extends d {
|
|
|
32
27
|
<slot></slot>
|
|
33
28
|
</div>
|
|
34
29
|
`;
|
|
35
|
-
|
|
36
|
-
}
|
|
37
|
-
r([
|
|
38
|
-
i({ type: Boolean })
|
|
39
|
-
], p.prototype, "compact");
|
|
40
|
-
r([
|
|
41
|
-
i({ type: String })
|
|
42
|
-
], p.prototype, "mainTitle");
|
|
43
|
-
r([
|
|
44
|
-
i({ type: String })
|
|
45
|
-
], p.prototype, "subTitle");
|
|
46
|
-
export {
|
|
47
|
-
p as SidebarSection
|
|
30
|
+
}
|
|
48
31
|
};
|
|
32
|
+
t([o({ type: Boolean }), e("design:type", Object)], s.prototype, "compact", void 0), t([o({ type: String }), e("design:type", Object)], s.prototype, "mainTitle", void 0), t([o({ type: String }), e("design:type", Object)], s.prototype, "subTitle", void 0), s = t([a("sidebar-section")], s);
|
|
33
|
+
//#endregion
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { css as e } from "lit";
|
|
2
|
-
|
|
2
|
+
//#region src/components/SidebarSection.styles.ts
|
|
3
|
+
var t = e`
|
|
3
4
|
:host {
|
|
4
5
|
display: flex;
|
|
5
6
|
flex-direction: column;
|
|
@@ -34,6 +35,5 @@ const i = e`
|
|
|
34
35
|
flex-direction: column;
|
|
35
36
|
}
|
|
36
37
|
`;
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
};
|
|
38
|
+
//#endregion
|
|
39
|
+
export { t as styles };
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { app as
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
};
|
|
1
|
+
import { app as e } from "./App.js";
|
|
2
|
+
//#region src/index.ts
|
|
3
|
+
var t = e;
|
|
4
|
+
//#endregion
|
|
5
|
+
export { e as app, t as default };
|
|
@@ -1,37 +1,23 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
/** 현재 화면 크기 반환 */
|
|
22
|
-
get() {
|
|
23
|
-
return this._size;
|
|
24
|
-
}
|
|
25
|
-
/**
|
|
26
|
-
* 너비를 기준으로 화면 크기를 반환
|
|
27
|
-
* @param width - 엘리먼트의 너비
|
|
28
|
-
* @return 화면 크기
|
|
29
|
-
*/
|
|
30
|
-
calculate(e) {
|
|
31
|
-
const [t, s] = this._breakpoints;
|
|
32
|
-
return e < t ? "small" : e < s ? "medium" : "large";
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
export {
|
|
36
|
-
c as ScreenObserver
|
|
1
|
+
//#region src/internals/ScreenObserver.ts
|
|
2
|
+
var e = class {
|
|
3
|
+
constructor(e) {
|
|
4
|
+
this._breakpoints = e.breakpoints, this._observer = new ResizeObserver((e) => {
|
|
5
|
+
let t = e[0], n = this.calculate(t.contentRect.width);
|
|
6
|
+
this._size !== n && (this._size = n, window.dispatchEvent(new CustomEvent("screen-resize", { detail: { size: this._size } })));
|
|
7
|
+
}), this._observer.observe(e.element);
|
|
8
|
+
let t = e.element.getBoundingClientRect();
|
|
9
|
+
this._size = this.calculate(t.width), window.dispatchEvent(new CustomEvent("screen-resize", { detail: { size: this._size } }));
|
|
10
|
+
}
|
|
11
|
+
destroy() {
|
|
12
|
+
this._observer && this._observer.disconnect();
|
|
13
|
+
}
|
|
14
|
+
get() {
|
|
15
|
+
return this._size;
|
|
16
|
+
}
|
|
17
|
+
calculate(e) {
|
|
18
|
+
let [t, n] = this._breakpoints;
|
|
19
|
+
return e < t ? "small" : e < n ? "medium" : "large";
|
|
20
|
+
}
|
|
37
21
|
};
|
|
22
|
+
//#endregion
|
|
23
|
+
export { e as ScreenObserver };
|
|
@@ -9,7 +9,6 @@ export type StyleMap<T extends string> = Partial<Record<T, StyleValue>>;
|
|
|
9
9
|
*/
|
|
10
10
|
export declare class StyledElement<T extends string> extends UElement {
|
|
11
11
|
static styles: import('lit').CSSResultGroup;
|
|
12
|
-
static dependencies: Record<string, typeof UElement>;
|
|
13
12
|
/** 부분별 스타일 구성 */
|
|
14
13
|
styles?: StyleMap<T>;
|
|
15
14
|
protected updated(changedProperties: PropertyValues): void;
|
|
@@ -1,58 +1,44 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
if (t == null) continue;
|
|
39
|
-
const s = String(t);
|
|
40
|
-
if (r.startsWith("--") || r.includes("-")) {
|
|
41
|
-
e.style.setProperty(r, s);
|
|
42
|
-
continue;
|
|
43
|
-
}
|
|
44
|
-
try {
|
|
45
|
-
e.style[r] = s;
|
|
46
|
-
} catch {
|
|
47
|
-
const o = r.replace(/[A-Z]/g, (l) => "-" + l.toLowerCase());
|
|
48
|
-
e.style.setProperty(o, s);
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
y([
|
|
54
|
-
a({ type: Object, attribute: !1 })
|
|
55
|
-
], f.prototype, "styles");
|
|
56
|
-
export {
|
|
57
|
-
f as StyledElement
|
|
1
|
+
import { __decorateMetadata as e } from "../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
|
|
2
|
+
import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
|
|
3
|
+
import { property as n } from "lit/decorators.js";
|
|
4
|
+
import { UElement as r } from "@iyulab/components/dist/components/UElement.js";
|
|
5
|
+
//#region src/internals/StyledElement.ts
|
|
6
|
+
var i = class extends r {
|
|
7
|
+
static {
|
|
8
|
+
this.styles = super.styles;
|
|
9
|
+
}
|
|
10
|
+
updated(e) {
|
|
11
|
+
super.updated(e), e.has("styles") && this.styles && this.applyToParts(this.styles);
|
|
12
|
+
}
|
|
13
|
+
applyToParts(e) {
|
|
14
|
+
let t = Object.entries(e);
|
|
15
|
+
for (let [e, n] of t) if (n) if (e === "host") this.assignToObject(this, n);
|
|
16
|
+
else {
|
|
17
|
+
let t = this.renderRoot?.querySelector(`[part="${String(e)}"]`);
|
|
18
|
+
if (!t) continue;
|
|
19
|
+
this.assignToObject(t, n);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
assignToObject(e, t) {
|
|
23
|
+
for (let [n, r] of Object.entries(t)) {
|
|
24
|
+
if (r == null) continue;
|
|
25
|
+
let t = String(r);
|
|
26
|
+
if (n.startsWith("--") || n.includes("-")) {
|
|
27
|
+
e.style.setProperty(n, t);
|
|
28
|
+
continue;
|
|
29
|
+
}
|
|
30
|
+
try {
|
|
31
|
+
e.style[n] = t;
|
|
32
|
+
} catch {
|
|
33
|
+
let r = n.replace(/[A-Z]/g, (e) => "-" + e.toLowerCase());
|
|
34
|
+
e.style.setProperty(r, t);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
58
38
|
};
|
|
39
|
+
t([n({
|
|
40
|
+
type: Object,
|
|
41
|
+
attribute: !1
|
|
42
|
+
}), e("design:type", Object)], i.prototype, "styles", void 0);
|
|
43
|
+
//#endregion
|
|
44
|
+
export { i as StyledElement };
|
|
@@ -1,27 +1,8 @@
|
|
|
1
1
|
import { nothing, PropertyValues } from 'lit';
|
|
2
|
+
import { UProgressBar } from '@iyulab/components/dist/components/progress-bar/UProgressBar.js';
|
|
2
3
|
import { RouteContext } from '@iyulab/router';
|
|
3
|
-
import { UElement } from '@iyulab/components/dist/components/UElement.js';
|
|
4
|
-
import { UIcon } from '@iyulab/components/dist/components/icon/UIcon.component.js';
|
|
5
|
-
import { UButton } from '@iyulab/components/dist/components/button/UButton.component.js';
|
|
6
|
-
import { UProgressBar } from '@iyulab/components/dist/components/progress-bar/UProgressBar.component.js';
|
|
7
4
|
import { StyledElement } from '../internals/StyledElement.js';
|
|
8
|
-
import { SidebarSection } from '../components/SidebarSection';
|
|
9
|
-
import { SidebarGroup } from '../components/SidebarGroup';
|
|
10
|
-
import { SidebarLink } from '../components/SidebarLink';
|
|
11
|
-
import { SidebarButton } from '../components/SidebarButton';
|
|
12
5
|
import { SidebarLayoutConfig, SidebarState, SidebarParts } from './SidebarLayout.types';
|
|
13
|
-
/** 엘리먼트 타입 매핑 (for devevelop experience) */
|
|
14
|
-
declare global {
|
|
15
|
-
interface HTMLElementTagNameMap {
|
|
16
|
-
'u-icon': UIcon;
|
|
17
|
-
'u-button': UButton;
|
|
18
|
-
'u-progress-bar': UProgressBar;
|
|
19
|
-
'u-sidebar-section': SidebarSection;
|
|
20
|
-
'u-sidebar-group': SidebarGroup;
|
|
21
|
-
'u-sidebar-link': SidebarLink;
|
|
22
|
-
'u-sidebar-button': SidebarButton;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
6
|
/**
|
|
26
7
|
* 반응형 사이드바 레이아웃 컴포넌트
|
|
27
8
|
*
|
|
@@ -39,17 +20,16 @@ declare global {
|
|
|
39
20
|
*/
|
|
40
21
|
export declare class SidebarLayout extends StyledElement<SidebarParts> {
|
|
41
22
|
static styles: import('lit').CSSResultGroup[];
|
|
42
|
-
static dependencies: Record<string, typeof UElement>;
|
|
43
|
-
progressBarEl: UProgressBar;
|
|
44
|
-
/** 현재 라우터 컨텍스트 */
|
|
45
|
-
context: RouteContext | null;
|
|
46
23
|
/** 사이드바 상태 */
|
|
47
24
|
state: SidebarState;
|
|
48
25
|
/** 사이드바 레이아웃 설정 */
|
|
49
26
|
config?: SidebarLayoutConfig;
|
|
27
|
+
progressBarEl: UProgressBar;
|
|
28
|
+
/** 현재 라우터 컨텍스트 */
|
|
29
|
+
context: RouteContext | null;
|
|
50
30
|
connectedCallback(): void;
|
|
51
31
|
disconnectedCallback(): void;
|
|
52
|
-
protected
|
|
32
|
+
protected willUpdate(changedProperties: PropertyValues): void;
|
|
53
33
|
render(): import('lit-html').TemplateResult<1> | typeof nothing;
|
|
54
34
|
/** 사이드바 아이템 렌더링 */
|
|
55
35
|
private renderItem;
|
|
@@ -1,55 +1,54 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import
|
|
15
|
-
import
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
return this.config ? a`
|
|
1
|
+
import { app as e } from "../App.js";
|
|
2
|
+
import { __decorateMetadata as t } from "../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
|
|
3
|
+
import { __decorate as n } from "../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
|
|
4
|
+
import { StyledElement as r } from "../internals/StyledElement.js";
|
|
5
|
+
import "../components/SidebarSection.js";
|
|
6
|
+
import "../components/SidebarLink.js";
|
|
7
|
+
import "../components/SidebarGroup.js";
|
|
8
|
+
import "../components/SidebarButton.js";
|
|
9
|
+
import { styles as i } from "./SidebarLayout.styles.js";
|
|
10
|
+
import { html as a, nothing as o } from "lit";
|
|
11
|
+
import { customElement as s, property as c, query as l, state as u } from "lit/decorators.js";
|
|
12
|
+
import { unsafeHTML as d } from "lit/directives/unsafe-html.js";
|
|
13
|
+
import { repeat as f } from "lit/directives/repeat.js";
|
|
14
|
+
import "@iyulab/components/dist/components/icon/UIcon.js";
|
|
15
|
+
import "@iyulab/components/dist/components/button/UButton.js";
|
|
16
|
+
import { UProgressBar as p } from "@iyulab/components/dist/components/progress-bar/UProgressBar.js";
|
|
17
|
+
//#region src/layouts/SidebarLayout.ts
|
|
18
|
+
var m, h = class extends r {
|
|
19
|
+
constructor(...t) {
|
|
20
|
+
super(...t), this.state = "default", this.context = null, this.isMatchedLink = (e) => !this.context || !e ? !1 : (e = typeof e == "string" ? new URLPattern(e, window.location.origin) : e, e.test(this.context.path, window.location.origin)), this.handleBrandLogoClick = () => {
|
|
21
|
+
e.navigate("");
|
|
22
|
+
}, this.handleToggleButtonClick = () => {
|
|
23
|
+
let t = e.screen ?? "large";
|
|
24
|
+
t === "large" ? this.state = this.state === "default" ? "slim" : "default" : t === "medium" ? this.state = this.state === "slim" ? "modal" : "slim" : t === "small" ? this.state = this.state === "mobile" ? "mobile-open" : "mobile" : console.warn("Unknown screen size:", t);
|
|
25
|
+
}, this.handleBackdropClick = () => {
|
|
26
|
+
this.state = "slim";
|
|
27
|
+
}, this.handleRouteBegin = (e) => {
|
|
28
|
+
this.progressBarEl.value = 0, this.state === "modal" && (this.state = "slim"), this.state === "mobile-open" && (this.state = "mobile"), this.context = e.context;
|
|
29
|
+
}, this.handleRouteProgress = (e) => {
|
|
30
|
+
this.progressBarEl.value = e.progress;
|
|
31
|
+
}, this.handleRouteDone = (e) => {
|
|
32
|
+
this.progressBarEl.value = 100;
|
|
33
|
+
}, this.handleScreenResize = (e) => {
|
|
34
|
+
let t = e.detail.size;
|
|
35
|
+
t === "large" ? this.state = "default" : t === "medium" ? this.state = "slim" : t === "small" ? this.state = "mobile" : console.warn("Unknown screen size:", t);
|
|
36
|
+
};
|
|
37
|
+
}
|
|
38
|
+
static {
|
|
39
|
+
this.styles = [super.styles, i];
|
|
40
|
+
}
|
|
41
|
+
connectedCallback() {
|
|
42
|
+
super.connectedCallback(), window.addEventListener("route-begin", this.handleRouteBegin), window.addEventListener("route-done", this.handleRouteDone), window.addEventListener("route-progress", this.handleRouteProgress), window.addEventListener("screen-resize", this.handleScreenResize);
|
|
43
|
+
}
|
|
44
|
+
disconnectedCallback() {
|
|
45
|
+
window.removeEventListener("route-begin", this.handleRouteBegin), window.removeEventListener("route-done", this.handleRouteDone), window.removeEventListener("route-progress", this.handleRouteProgress), window.removeEventListener("screen-resize", this.handleScreenResize), super.disconnectedCallback();
|
|
46
|
+
}
|
|
47
|
+
willUpdate(e) {
|
|
48
|
+
super.willUpdate(e), e.has("config") && (this.styles = this.config?.styles);
|
|
49
|
+
}
|
|
50
|
+
render() {
|
|
51
|
+
return this.config ? a`
|
|
53
52
|
<!-- Mobile Header -->
|
|
54
53
|
<div class="mobile-header" part="mobile-header" ?hidden="${!this.state.startsWith("mobile")}">
|
|
55
54
|
<u-icon class="logo"
|
|
@@ -62,7 +61,7 @@ let i = class extends w {
|
|
|
62
61
|
<u-button class="toggler"
|
|
63
62
|
@click=${this.handleToggleButtonClick}>
|
|
64
63
|
<u-icon
|
|
65
|
-
lib="
|
|
64
|
+
lib="bootstrap"
|
|
66
65
|
name=${this.state === "mobile-open" ? "x-lg" : "list"}
|
|
67
66
|
></u-icon>
|
|
68
67
|
</u-button>
|
|
@@ -82,7 +81,7 @@ let i = class extends w {
|
|
|
82
81
|
<u-button class="toggler"
|
|
83
82
|
@click=${this.handleToggleButtonClick}>
|
|
84
83
|
<u-icon
|
|
85
|
-
lib="
|
|
84
|
+
lib="bootstrap"
|
|
86
85
|
name="layout-sidebar"
|
|
87
86
|
></u-icon>
|
|
88
87
|
</u-button>
|
|
@@ -90,20 +89,12 @@ let i = class extends w {
|
|
|
90
89
|
|
|
91
90
|
<!-- Sidebar Navigation Menu -->
|
|
92
91
|
<nav class="sidebar-main" part="sidebar-main" scrollable>
|
|
93
|
-
${
|
|
94
|
-
this.config.main ?? [],
|
|
95
|
-
(e, t) => t,
|
|
96
|
-
(e) => this.renderItem(e)
|
|
97
|
-
)}
|
|
92
|
+
${f(this.config.main ?? [], (e, t) => t, (e) => this.renderItem(e))}
|
|
98
93
|
</nav>
|
|
99
94
|
|
|
100
95
|
<!-- Sidebar Footer -->
|
|
101
96
|
<div class="sidebar-footer" part="sidebar-footer">
|
|
102
|
-
${
|
|
103
|
-
this.config.footer ?? [],
|
|
104
|
-
(e, t) => t,
|
|
105
|
-
(e) => this.renderItem(e)
|
|
106
|
-
)}
|
|
97
|
+
${f(this.config.footer ?? [], (e, t) => t, (e) => this.renderItem(e))}
|
|
107
98
|
</div>
|
|
108
99
|
</aside>
|
|
109
100
|
|
|
@@ -118,17 +109,14 @@ let i = class extends w {
|
|
|
118
109
|
<div class="backdrop" ?hidden="${this.state !== "modal"}"
|
|
119
110
|
@click="${this.handleBackdropClick}"
|
|
120
111
|
></div>
|
|
121
|
-
` :
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
} else {
|
|
130
|
-
if (e.type === "button")
|
|
131
|
-
return a`
|
|
112
|
+
` : o;
|
|
113
|
+
}
|
|
114
|
+
renderItem(e) {
|
|
115
|
+
if (!e) return o;
|
|
116
|
+
if (e.type === "html") {
|
|
117
|
+
let t = e.render(this.state);
|
|
118
|
+
return typeof t == "string" ? d(t) : a`${t}`;
|
|
119
|
+
} else if (e.type === "button") return a`
|
|
132
120
|
<u-sidebar-button
|
|
133
121
|
?compact=${this.state === "slim"}
|
|
134
122
|
.icon="${e.icon}"
|
|
@@ -137,9 +125,9 @@ let i = class extends w {
|
|
|
137
125
|
@click="${e.onClick}"
|
|
138
126
|
></u-sidebar-button>
|
|
139
127
|
`;
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
128
|
+
else if (e.type === "link") {
|
|
129
|
+
let t = this.isMatchedLink(e.pattern || e.href);
|
|
130
|
+
return a`
|
|
143
131
|
<u-sidebar-link
|
|
144
132
|
?compact=${this.state === "slim"}
|
|
145
133
|
?selected=${t}
|
|
@@ -150,24 +138,18 @@ let i = class extends w {
|
|
|
150
138
|
.styles="${e.styles}"
|
|
151
139
|
></u-sidebar-link>
|
|
152
140
|
`;
|
|
153
|
-
|
|
154
|
-
if (e.type === "section")
|
|
155
|
-
return a`
|
|
141
|
+
} else if (e.type === "section") return a`
|
|
156
142
|
<u-sidebar-section
|
|
157
143
|
?compact=${this.state === "slim"}
|
|
158
144
|
.mainTitle="${e.title}"
|
|
159
145
|
.subTitle="${e.subTitle}"
|
|
160
146
|
.styles="${e.styles}">
|
|
161
|
-
${
|
|
162
|
-
e.items,
|
|
163
|
-
(t, s) => s,
|
|
164
|
-
(t) => this.renderItem(t)
|
|
165
|
-
)}
|
|
147
|
+
${f(e.items, (e, t) => t, (e) => this.renderItem(e))}
|
|
166
148
|
</u-sidebar-section>
|
|
167
149
|
`;
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
150
|
+
else if (e.type === "group") {
|
|
151
|
+
let t = e.items.some((e) => this.isMatchedLink(e.pattern || e.href));
|
|
152
|
+
return a`
|
|
171
153
|
<u-sidebar-group
|
|
172
154
|
?compact=${this.state === "slim"}
|
|
173
155
|
?selected=${t}
|
|
@@ -175,44 +157,15 @@ let i = class extends w {
|
|
|
175
157
|
.icon="${e.icon}"
|
|
176
158
|
.label="${e.label}"
|
|
177
159
|
.styles="${e.styles}">
|
|
178
|
-
${
|
|
179
|
-
e.items,
|
|
180
|
-
(s, o) => o,
|
|
181
|
-
(s) => this.renderItem(s)
|
|
182
|
-
)}
|
|
160
|
+
${f(e.items, (e, t) => t, (e) => this.renderItem(e))}
|
|
183
161
|
</u-sidebar-group>
|
|
184
162
|
`;
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
}
|
|
188
|
-
}
|
|
189
|
-
}
|
|
190
|
-
};
|
|
191
|
-
i.styles = [M(i, i, "styles"), C];
|
|
192
|
-
i.dependencies = {
|
|
193
|
-
"u-icon": v,
|
|
194
|
-
"u-button": $,
|
|
195
|
-
"u-progress-bar": y,
|
|
196
|
-
"u-sidebar-section": k,
|
|
197
|
-
"u-sidebar-group": B,
|
|
198
|
-
"u-sidebar-link": L,
|
|
199
|
-
"u-sidebar-button": _
|
|
200
|
-
};
|
|
201
|
-
n([
|
|
202
|
-
b("u-progress-bar")
|
|
203
|
-
], i.prototype, "progressBarEl", 2);
|
|
204
|
-
n([
|
|
205
|
-
g()
|
|
206
|
-
], i.prototype, "context", 2);
|
|
207
|
-
n([
|
|
208
|
-
p({ type: String, reflect: !0 })
|
|
209
|
-
], i.prototype, "state", 2);
|
|
210
|
-
n([
|
|
211
|
-
p({ type: Object })
|
|
212
|
-
], i.prototype, "config", 2);
|
|
213
|
-
i = n([
|
|
214
|
-
f("u-sidebar-layout")
|
|
215
|
-
], i);
|
|
216
|
-
export {
|
|
217
|
-
i as SidebarLayout
|
|
163
|
+
} else return o;
|
|
164
|
+
}
|
|
218
165
|
};
|
|
166
|
+
n([c({
|
|
167
|
+
type: String,
|
|
168
|
+
reflect: !0
|
|
169
|
+
}), t("design:type", Object)], h.prototype, "state", void 0), n([c({ type: Object }), t("design:type", Object)], h.prototype, "config", void 0), n([l("u-progress-bar"), t("design:type", typeof (m = p !== void 0 && p) == "function" ? m : Object)], h.prototype, "progressBarEl", void 0), n([u(), t("design:type", Object)], h.prototype, "context", void 0), h = n([s("u-sidebar-layout")], h);
|
|
170
|
+
//#endregion
|
|
171
|
+
export { h as SidebarLayout };
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { css as e } from "lit";
|
|
2
|
-
|
|
2
|
+
//#region src/layouts/SidebarLayout.styles.ts
|
|
3
|
+
var t = e`
|
|
3
4
|
:host {
|
|
4
5
|
position: relative;
|
|
5
6
|
display: flex;
|
|
@@ -171,6 +172,5 @@ const r = e`
|
|
|
171
172
|
background: var(--u-overlay-bg-color);
|
|
172
173
|
}
|
|
173
174
|
`;
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
};
|
|
175
|
+
//#endregion
|
|
176
|
+
export { t as styles };
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ToastPosition } from '@iyulab/components/dist/utilities/Toast.js';
|
|
2
2
|
export interface NotificationOptions {
|
|
3
3
|
title?: string;
|
|
4
4
|
duration?: number;
|
|
5
|
-
position?:
|
|
5
|
+
position?: ToastPosition;
|
|
6
6
|
}
|
|
7
7
|
export interface DialogOptions {
|
|
8
8
|
title?: string;
|