@iyulab/modern-app 0.3.5 → 0.3.7
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/dist/_virtual/{_@oxc-project_runtime@0.124.0/helpers → _@oxc-project_runtime@0.133.0/helpers/esm}/decorate.js +1 -1
- package/dist/_virtual/{_@oxc-project_runtime@0.124.0/helpers → _@oxc-project_runtime@0.133.0/helpers/esm}/decorateMetadata.js +1 -1
- package/dist/components/SidebarButton.js +2 -2
- package/dist/components/SidebarGroup.js +2 -2
- package/dist/components/SidebarLink.js +2 -2
- package/dist/components/SidebarSection.js +2 -2
- package/dist/internals/StyledElement.js +2 -2
- package/dist/layouts/SidebarLayout.d.ts +2 -15
- package/dist/layouts/SidebarLayout.js +41 -6
- package/dist/layouts/SidebarLayout.styles.js +1 -0
- package/package.json +8 -8
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
//#region \0@oxc-project+runtime@0.
|
|
1
|
+
//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorate.js
|
|
2
2
|
function e(e, t, n, r) {
|
|
3
3
|
var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
|
|
4
4
|
if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
//#region \0@oxc-project+runtime@0.
|
|
1
|
+
//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorateMetadata.js
|
|
2
2
|
function e(e, t) {
|
|
3
3
|
if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
|
|
4
4
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { __decorateMetadata as e } from "../_virtual/_@oxc-project_runtime@0.
|
|
2
|
-
import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.
|
|
1
|
+
import { __decorateMetadata as e } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
|
|
2
|
+
import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
|
|
3
3
|
import { StyledElement as n } from "../internals/StyledElement.js";
|
|
4
4
|
import { styles as r } from "./SidebarButton.styles.js";
|
|
5
5
|
import { html as i } from "lit";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { __decorateMetadata as e } from "../_virtual/_@oxc-project_runtime@0.
|
|
2
|
-
import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.
|
|
1
|
+
import { __decorateMetadata as e } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
|
|
2
|
+
import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
|
|
3
3
|
import { StyledElement as n } from "../internals/StyledElement.js";
|
|
4
4
|
import { SidebarLink as r } from "./SidebarLink.js";
|
|
5
5
|
import { styles as i } from "./SidebarGroup.styles.js";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { __decorateMetadata as e } from "../_virtual/_@oxc-project_runtime@0.
|
|
2
|
-
import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.
|
|
1
|
+
import { __decorateMetadata as e } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
|
|
2
|
+
import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
|
|
3
3
|
import { StyledElement as n } from "../internals/StyledElement.js";
|
|
4
4
|
import { styles as r } from "./SidebarLink.styles.js";
|
|
5
5
|
import { html as i } from "lit";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { __decorateMetadata as e } from "../_virtual/_@oxc-project_runtime@0.
|
|
2
|
-
import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.
|
|
1
|
+
import { __decorateMetadata as e } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
|
|
2
|
+
import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
|
|
3
3
|
import { StyledElement as n } from "../internals/StyledElement.js";
|
|
4
4
|
import { styles as r } from "./SidebarSection.styles.js";
|
|
5
5
|
import { html as i } from "lit";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { __decorateMetadata as e } from "../_virtual/_@oxc-project_runtime@0.
|
|
2
|
-
import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.
|
|
1
|
+
import { __decorateMetadata as e } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
|
|
2
|
+
import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
|
|
3
3
|
import { property as n } from "lit/decorators.js";
|
|
4
4
|
import { UElement as r } from "@iyulab/components/dist/components/UElement.js";
|
|
5
5
|
//#region src/internals/StyledElement.ts
|
|
@@ -3,21 +3,6 @@ import { UProgressBar } from '@iyulab/components/dist/components/progress-bar/UP
|
|
|
3
3
|
import { RouteContext } from '@iyulab/router';
|
|
4
4
|
import { StyledElement } from '../internals/StyledElement.js';
|
|
5
5
|
import { SidebarLayoutConfig, SidebarState, SidebarParts } from './SidebarLayout.types';
|
|
6
|
-
/**
|
|
7
|
-
* 반응형 사이드바 레이아웃 컴포넌트
|
|
8
|
-
*
|
|
9
|
-
* 화면 크기에 따른 사이드바 모드 전환:
|
|
10
|
-
* - large: default / slim
|
|
11
|
-
* - medium: slim / modal
|
|
12
|
-
* - small: mobile / mobile-open
|
|
13
|
-
*
|
|
14
|
-
* 사이드바 모드:
|
|
15
|
-
* - default: 사이드바가 펼침 상태로 표시됨
|
|
16
|
-
* - slim: 아이콘만 표시되는 슬림 모드
|
|
17
|
-
* - modal: 오버레이로 사이드바가 펼침 상태로 표시되는 모달 모드, 백드롭 클릭 시 닫힘
|
|
18
|
-
* - mobile: 모바일에서 헤더만 표시되는 상태, 사이드바는 숨겨짐
|
|
19
|
-
* - mobile-open: 모바일에서 사이드바가 펼침 상태로 표시되는 모드
|
|
20
|
-
*/
|
|
21
6
|
export declare class SidebarLayout extends StyledElement<SidebarParts> {
|
|
22
7
|
static styles: import('lit').CSSResultGroup[];
|
|
23
8
|
/** 사이드바 상태 */
|
|
@@ -51,6 +36,8 @@ export declare class SidebarLayout extends StyledElement<SidebarParts> {
|
|
|
51
36
|
private handleRouteDone;
|
|
52
37
|
/** 라우트 에러 핸들러 */
|
|
53
38
|
private handleRouteError;
|
|
39
|
+
/** .main 키보드 스크롤 핸들러 (WCAG 2.1 SC 2.1.1) */
|
|
40
|
+
private _handleMainKeydown;
|
|
54
41
|
/** 화면 크기 변경에 따른 사이드바 상태 업데이트 */
|
|
55
42
|
private handleScreenResize;
|
|
56
43
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { app as e } from "../App.js";
|
|
2
|
-
import { __decorateMetadata as t } from "../_virtual/_@oxc-project_runtime@0.
|
|
3
|
-
import { __decorate as n } from "../_virtual/_@oxc-project_runtime@0.
|
|
2
|
+
import { __decorateMetadata as t } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
|
|
3
|
+
import { __decorate as n } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
|
|
4
4
|
import { StyledElement as r } from "../internals/StyledElement.js";
|
|
5
5
|
import "../components/SidebarSection.js";
|
|
6
6
|
import "../components/SidebarLink.js";
|
|
@@ -15,7 +15,13 @@ import "@iyulab/components/dist/components/icon/UIcon.js";
|
|
|
15
15
|
import "@iyulab/components/dist/components/button/UButton.js";
|
|
16
16
|
import { UProgressBar as p } from "@iyulab/components/dist/components/progress-bar/UProgressBar.js";
|
|
17
17
|
//#region src/layouts/SidebarLayout.ts
|
|
18
|
-
|
|
18
|
+
function m(e) {
|
|
19
|
+
let t = e.tagName;
|
|
20
|
+
if (t === "INPUT" || t === "TEXTAREA" || t === "SELECT" || e.isContentEditable) return !0;
|
|
21
|
+
let n = e.getAttribute("role");
|
|
22
|
+
return n === "textbox" || n === "searchbox" || n === "combobox" || n === "spinbutton";
|
|
23
|
+
}
|
|
24
|
+
var h = class extends r {
|
|
19
25
|
constructor(...t) {
|
|
20
26
|
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
27
|
e.navigate("");
|
|
@@ -31,11 +37,40 @@ var m, h = class extends r {
|
|
|
31
37
|
}, this.handleRouteDone = (e) => {
|
|
32
38
|
this.progressBarEl.value = 100, setTimeout(() => {
|
|
33
39
|
this.progressBarEl.removeAttribute("visible");
|
|
34
|
-
}, 300);
|
|
40
|
+
}, 300), (this.shadowRoot?.querySelector(".main"))?.focus({ preventScroll: !0 });
|
|
35
41
|
}, this.handleRouteError = (e) => {
|
|
36
42
|
this.progressBarEl.setAttribute("error", ""), this.progressBarEl.value = 100, setTimeout(() => {
|
|
37
43
|
this.progressBarEl.removeAttribute("visible"), this.progressBarEl.removeAttribute("error");
|
|
38
44
|
}, 300);
|
|
45
|
+
}, this._handleMainKeydown = (e) => {
|
|
46
|
+
let t = e.composedPath()[0];
|
|
47
|
+
if (t instanceof HTMLElement && m(t)) return;
|
|
48
|
+
let n = this.shadowRoot?.querySelector(".main");
|
|
49
|
+
if (!n) return;
|
|
50
|
+
let r = n.clientHeight;
|
|
51
|
+
switch (e.key) {
|
|
52
|
+
case " ":
|
|
53
|
+
case "PageDown":
|
|
54
|
+
n.scrollTop += e.shiftKey ? -r : r;
|
|
55
|
+
break;
|
|
56
|
+
case "PageUp":
|
|
57
|
+
n.scrollTop -= r;
|
|
58
|
+
break;
|
|
59
|
+
case "End":
|
|
60
|
+
n.scrollTop = n.scrollHeight;
|
|
61
|
+
break;
|
|
62
|
+
case "Home":
|
|
63
|
+
n.scrollTop = 0;
|
|
64
|
+
break;
|
|
65
|
+
case "ArrowDown":
|
|
66
|
+
n.scrollTop += 80;
|
|
67
|
+
break;
|
|
68
|
+
case "ArrowUp":
|
|
69
|
+
n.scrollTop -= 80;
|
|
70
|
+
break;
|
|
71
|
+
default: return;
|
|
72
|
+
}
|
|
73
|
+
e.preventDefault();
|
|
39
74
|
}, this.handleScreenResize = (e) => {
|
|
40
75
|
let t = e.detail.size;
|
|
41
76
|
t === "large" ? this.state = "default" : t === "medium" ? this.state = "slim" : t === "small" ? this.state = "mobile" : console.warn("Unknown screen size:", t);
|
|
@@ -105,7 +140,7 @@ var m, h = class extends r {
|
|
|
105
140
|
</aside>
|
|
106
141
|
|
|
107
142
|
<!-- Main Content -->
|
|
108
|
-
<div class="main" part="main" scrollable>
|
|
143
|
+
<div class="main" part="main" scrollable tabindex="-1" @keydown=${this._handleMainKeydown}>
|
|
109
144
|
<u-progress-bar part="progress"></u-progress-bar>
|
|
110
145
|
|
|
111
146
|
<slot></slot>
|
|
@@ -172,6 +207,6 @@ var m, h = class extends r {
|
|
|
172
207
|
n([c({
|
|
173
208
|
type: String,
|
|
174
209
|
reflect: !0
|
|
175
|
-
}), 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",
|
|
210
|
+
}), 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", p === void 0 ? Object : p)], h.prototype, "progressBarEl", void 0), n([u(), t("design:type", Object)], h.prototype, "context", void 0), h = n([s("u-sidebar-layout")], h);
|
|
176
211
|
//#endregion
|
|
177
212
|
export { h as SidebarLayout };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@iyulab/modern-app",
|
|
3
3
|
"description": "web-framework by iyulab based on lit-element",
|
|
4
|
-
"version": "0.3.
|
|
4
|
+
"version": "0.3.7",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"iyulab",
|
|
7
7
|
"web-framework",
|
|
@@ -38,15 +38,15 @@
|
|
|
38
38
|
"build": "vite build"
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
|
-
"@iyulab/components": "^1.0.
|
|
42
|
-
"@iyulab/router": "^0.9.
|
|
43
|
-
"i18next": "^26.0
|
|
44
|
-
"lit": "^3.3.
|
|
41
|
+
"@iyulab/components": "^1.0.6",
|
|
42
|
+
"@iyulab/router": "^0.9.3",
|
|
43
|
+
"i18next": "^26.2.0",
|
|
44
|
+
"lit": "^3.3.3"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@types/node": "^25.
|
|
47
|
+
"@types/node": "^25.8.0",
|
|
48
48
|
"typescript": "^5.9.3",
|
|
49
|
-
"vite": "^8.0.
|
|
50
|
-
"vite-plugin-dts": "^
|
|
49
|
+
"vite": "^8.0.13",
|
|
50
|
+
"vite-plugin-dts": "^5.0.0"
|
|
51
51
|
}
|
|
52
52
|
}
|