@nine-lab/nine-ux 0.1.129 → 0.1.131

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.
Files changed (4) hide show
  1. package/dist/css/nineMenu.css +43 -40
  2. package/dist/nine-ux.js +1725 -1745
  3. package/dist/nine-ux.umd.js +32 -34
  4. package/package.json +1 -1
package/dist/css/nineMenu.css CHANGED
@@ -1,4 +1,4 @@
1
- /* --- Root: nine-side-menu --- */
1
+ /* --- [1] 부모 컴포넌트: nine-side-menu (Shadow DOM 내부용) --- */
2
2
  :host(nine-side-menu) {
3
3
  opacity: 0.95; position: fixed; top: 0; bottom: 0; left: 0;
4
4
  display: flex; flex-direction: column; z-index: 1002;
@@ -9,55 +9,58 @@
9
9
  }
10
10
 
11
11
  :host(nine-side-menu.collapse) { width: var(--min-width); }
12
- :host(nine-side-menu:not(.collapse)), :host(nine-side-menu.collapse:hover) { width: var(--max-width); }
12
+ :host(nine-side-menu:not(.collapse)), :host(nine-side-menu.hover) { width: var(--max-width); }
13
13
 
14
- /* --- Body & Layout --- */
15
- :host(nine-side-menu) .body-wrapper,
16
- & nine-side-menu-body {
17
- flex: 1; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden;
18
- margin-top: 10px; width: 100%;
14
+ /* 내부 레이아웃 */
15
+ .body-wrapper {
16
+ display: flex; flex-direction: column; align-items: flex-start;
17
+ margin-top: 32px; width: 100%; flex: 1; overflow-y: auto;
19
18
  }
20
19
 
21
- /* --- Child: Head, Foot --- */
22
- :host(nine-side-menu-head), :host(nine-side-menu-foot) {
23
- display: flex; align-items: center; padding: 10px; height: 50px; box-sizing: border-box;
24
- & .logo-box { color: #f0f0f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; width: 100%; transition: width 0.3s; }
25
- & .icon-box { display: flex; align-items: center; cursor: pointer; & .icon { fill: var(--icon-color, #eee); transition: opacity 0.3s; display: none; opacity: 0; } }
20
+ /* --- [2] 하위 요소 스타일 (Light DOM 제어) --- */
21
+
22
+ /* 슬롯에 들어온 자식들의 공통 스타일 */
23
+ ::slotted(nine-side-menu-head), ::slotted(nine-side-menu-foot) {
24
+ display: flex; align-items: center; justify-content: center;
25
+ padding: 10px; height: 50px; box-sizing: border-box; width: 100%;
26
26
  }
27
27
 
28
- /* Head/Foot Collapse Logic */
29
- :host(.collapse) nine-side-menu-head, :host(.collapse) nine-side-menu-foot {
30
- & .logo-box { width: 0; }
31
- & .icon:first-child { display: block; opacity: 1; }
32
- &:hover .logo-box { width: 100%; }
28
+ ::slotted(nine-side-menu-item) {
29
+ display: flex; position: relative; padding: 0; margin: 0;
30
+ cursor: pointer; color: #999; font-weight: bold;
31
+ max-height: 64px; opacity: 1; box-sizing: border-box; width: 100%;
32
+ transition: max-height 0.3s, opacity 0.3s, height 0.3s;
33
33
  }
34
- :host(:not(.collapse)) nine-side-menu-head, :host(:not(.collapse)) nine-side-menu-foot {
35
- & .icon:nth-child(2) { display: block; opacity: 1; }
36
- & .icon-box:hover .icon:nth-child(2) { display: none; }
37
- & .icon-box:hover .icon:nth-child(3) { display: block; opacity: 1; }
34
+
35
+ /* --- [3] 하위 요소 내부 UI 제어 (중요: 자식 내부는 슬롯 선택자로 제어) --- */
36
+
37
+ /* Head/Foot 내부 텍스트 및 아이콘 */
38
+ ::slotted(nine-side-menu-head) .logo-box, ::slotted(nine-side-menu-foot) .logo-box {
39
+ color: #f0f0f0; white-space: nowrap; overflow: hidden;
40
+ text-overflow: ellipsis; text-align: center; width: 100%;
41
+ transition: width 0.3s ease-out;
38
42
  }
39
43
 
40
- /* --- Child: Item --- */
41
- :host(nine-side-menu-item) {
42
- display: flex; position: relative; cursor: pointer; color: #999; font-weight: bold;
43
- max-height: 64px; opacity: 1; transition: max-height 0.3s, opacity 0.3s, height 0.3s;
44
- &.group { height: 48px; & .menubar { font-weight: 700; color: #fff; } }
45
- &:not(.group) { height: 32px; & li::before { content: '•'; margin-right: 8px; margin-left: 16px; } & .icon, & .expand-icon { display: none; } }
46
- &.active { color: #9FF2FF; background: rgba(255,255,255,0.05); }
47
- &.hide { max-height: 0; opacity: 0; overflow: hidden; }
48
- & li { display: flex; align-items: center; width: 100%; list-style: none; padding: 0 12px; box-sizing: border-box; }
49
- & .menubar { margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.2s; }
50
- & .icon { width: 18px; height: 18px; background-repeat: no-repeat; background-size: contain; }
51
- & .expand-icon { width: 12px; height: 12px; position: absolute; right: 15px; background-repeat: no-repeat; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 16 16"><path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>'); transition: transform 0.3s; }
52
- &:not(.expand) .expand-icon { transform: rotate(180deg); }
44
+ ::slotted(nine-side-menu-head) .icon-box, ::slotted(nine-side-menu-foot) .icon-box {
45
+ display: flex; align-items: center;
53
46
  }
54
47
 
55
- /* Item Collapse Logic */
56
- :host(.collapse:not(:hover)) nine-side-menu-item {
57
- & li { justify-content: center; padding: 0; }
58
- & .menubar, & .expand-icon { display: none; }
59
- & .icon { width: 22px; height: 22px; }
60
- &:not(.group) { height: 0; opacity: 0; }
48
+ /* Collapse 상태 시 UI 숨김 처리 */
49
+ :host(.collapse:not(.hover)) ::slotted(nine-side-menu-head) .logo-box { width: 0; opacity: 0; }
50
+ :host(.collapse:not(.hover)) ::slotted(nine-side-menu-item) .menubar { display: none; }
51
+ :host(.collapse:not(.hover)) ::slotted(nine-side-menu-item) .expand-icon { display: none; }
52
+
53
+ /* Item 상세 스타일 */
54
+ ::slotted(nine-side-menu-item) li { display: flex; align-items: center; width: 100%; list-style: none; padding: 0 12px; }
55
+ ::slotted(nine-side-menu-item).active { color: #9FF2FF; background: rgba(255,255,255,0.05); }
56
+ ::slotted(nine-side-menu-item).group { height: 48px; }
57
+ ::slotted(nine-side-menu-item).group .menubar { font-weight: 700; color: #fff; }
58
+ ::slotted(nine-side-menu-item):not(.group) { height: 32px; }
59
+ ::slotted(nine-side-menu-item):not(.group) li::before { content: '•'; margin-right: 8px; margin-left: 10px; }
60
+
61
+ ::slotted(nine-side-menu-item) .icon {
62
+ width: 18px; height: 18px; background-repeat: no-repeat; background-size: contain; margin-right: 8px;
61
63
  }
62
64
 
65
+ /* 애니메이션 */
63
66
  @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateX(0); } 40% { transform: translateX(-5px); } 60% { transform: translateX(5px); } }