@ninebone/table 0.1.31 → 0.1.33

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 (62) hide show
  1. package/dist/css/layout.css +466 -240
  2. package/dist/nine-table.js +1 -1
  3. package/dist/nine-table.umd.js +1 -1
  4. package/package.json +1 -1
  5. package/dist/css/_common.css +0 -11
  6. package/dist/css/ai.css +0 -609
  7. package/dist/css/aiMessage.css +0 -18
  8. package/dist/css/ideAssi.css +0 -616
  9. package/dist/css/ideDiff.css +0 -124
  10. package/dist/css/ngButton.css +0 -40
  11. package/dist/css/ngCheckBox.css +0 -81
  12. package/dist/css/ngColExpand.css +0 -17
  13. package/dist/css/ngCombo.css +0 -75
  14. package/dist/css/ngComboPanel.css +0 -102
  15. package/dist/css/ngExpandButton.css +0 -71
  16. package/dist/css/ngExpandCheck.css +0 -34
  17. package/dist/css/ngExpandIcon.css +0 -36
  18. package/dist/css/ngFilterPanel.css +0 -94
  19. package/dist/css/ngFlexBox.css +0 -7
  20. package/dist/css/ngFoot.css +0 -109
  21. package/dist/css/ngHScrollBar.css +0 -85
  22. package/dist/css/ngHead.css +0 -86
  23. package/dist/css/ngImg.css +0 -22
  24. package/dist/css/ngInfo.css +0 -54
  25. package/dist/css/ngInputColor.css +0 -77
  26. package/dist/css/ngInputDate.css +0 -74
  27. package/dist/css/ngInputText.css +0 -65
  28. package/dist/css/ngMaximize.css +0 -26
  29. package/dist/css/ngProgress.css +0 -40
  30. package/dist/css/ngRadio.css +0 -61
  31. package/dist/css/ngRenderer.css +0 -59
  32. package/dist/css/ngRowDetail.css +0 -26
  33. package/dist/css/ngRowDrag.css +0 -13
  34. package/dist/css/ngRowExpand.css +0 -20
  35. package/dist/css/ngRowIndicator.css +0 -111
  36. package/dist/css/ngRowPin.css +0 -30
  37. package/dist/css/ngRowState.css +0 -16
  38. package/dist/css/ngSvg.css +0 -22
  39. package/dist/css/ngTextArea.css +0 -64
  40. package/dist/css/ngTreeItem.css +0 -133
  41. package/dist/css/ngVScrollBar.css +0 -85
  42. package/dist/css/ninegrid.css +0 -1212
  43. package/dist/css/nxAlert.css +0 -142
  44. package/dist/css/nxButtons.css +0 -33
  45. package/dist/css/nxCollapse.css +0 -67
  46. package/dist/css/nxConfirm.css +0 -143
  47. package/dist/css/nxDialog.css +0 -606
  48. package/dist/css/nxDiv.css +0 -120
  49. package/dist/css/nxEditor.css +0 -171
  50. package/dist/css/nxForm.css +0 -67
  51. package/dist/css/nxModal.css +0 -627
  52. package/dist/css/nxPanel.css +0 -129
  53. package/dist/css/nxSideMenu.css +0 -62
  54. package/dist/css/nxSideMenuBody.css +0 -8
  55. package/dist/css/nxSideMenuFoot.css +0 -78
  56. package/dist/css/nxSideMenuHead.css +0 -82
  57. package/dist/css/nxSideMenuItem.css +0 -203
  58. package/dist/css/nxSplitter.css +0 -63
  59. package/dist/css/nxTab.css +0 -193
  60. package/dist/css/nxTitle.css +0 -210
  61. package/dist/css/nxTitle2.css +0 -33
  62. package/dist/index.html +0 -60
@@ -1,129 +0,0 @@
1
- :host(nx-panel) {
2
- font-size: var(--font-size);
3
- font-family: var(--font-family);
4
- color: var(--color);
5
-
6
- display: flex;
7
- flex-direction: column;
8
- min-width: 0;
9
- min-height: 0;
10
- overflow: hidden;
11
- flex: 1 1 0;
12
-
13
- *, *::before, *::after {
14
- box-sizing: border-box;
15
- }
16
-
17
- .head::before {
18
- content: '';
19
- display: inline-block;
20
- width: 6px;
21
- height: 6px;
22
- border-radius: 50%;
23
- background-repeat: no-repeat;
24
- background-color: green; /* 구의 기본 색상 */
25
- }
26
-
27
- .head.hide {
28
- display: none;
29
- }
30
-
31
- .head {
32
- display: flex;
33
- flex-direction: row;
34
- align-items: center;
35
- padding: 0 4px;
36
- width: 100%;
37
-
38
- .caption {
39
- display: flex;
40
- margin-left: 4px;
41
-
42
- span {
43
- font-weight: bold;
44
- overflow: hidden;
45
- white-space: nowrap;
46
- text-overflow: ellipsis;
47
- }
48
- }
49
- }
50
-
51
- .body {
52
- border: 1px solid #ccc;
53
- border-radius: 4px;
54
- width: 100%;
55
- height: 100%;
56
- padding: 8px;
57
-
58
-
59
- }
60
-
61
- input {
62
- color: var(--input-color);
63
- background-color: 1px solid var(--input-background-color);
64
- border: 1px solid var(--input-border-color);
65
- outline: none;
66
- padding: var(--input-padding);
67
- border-radius: 2px;
68
- font-size: var(--input-font-size);
69
- }
70
-
71
- input:hover {
72
- border: 1px solid var(--input-hover-border-color);
73
- }
74
-
75
- input:focus {
76
- border: 1px solid var(--input-focus-border-color);
77
- }
78
-
79
- nx-layout2 {
80
- display: grid;
81
- --flex-direction: column;
82
- width: 100%;
83
- text-align: left;
84
- gap: 8px;
85
- height: 100%;
86
- /* 너비 초과 방지 핵심 */
87
- min-width: 0;
88
- overflow: hidden;
89
-
90
- grid-template-rows: var(--rows-template, repeat(auto-fill, minmax(32px, 1fr)));
91
-
92
- label {
93
- --margin: 0 8px 0 16px;
94
- gap: 8px;
95
- }
96
-
97
- input[type="text"] {
98
- width: 100%;
99
- }
100
-
101
- .row {
102
- display: flex;
103
- --flex: 1 1 0;
104
- width: 100%;
105
- gap: 8px;
106
- overflow: hidden;
107
- --height: 32px;
108
- }
109
-
110
- .row > * {
111
- display: flex;
112
- flex: 1 1 0;
113
- align-items: center;
114
- }
115
-
116
- .row * {
117
- min-width: 0;
118
- overflow: hidden;
119
- --white-space: nowrap;
120
- text-overflow: ellipsis;
121
- }
122
- }
123
- }
124
-
125
- :host(nx-panel.theme-1) {
126
- .body {
127
- border: none;
128
- }
129
- }
@@ -1,62 +0,0 @@
1
- :host {
2
- opacity: 0.95;
3
- width: unset;
4
- position: fixed;
5
- top: 0;
6
- bottom: 0;
7
- left: 0;
8
- display: block;
9
- z-index: 1002;
10
- color: #fff;
11
- font-weight: 200;
12
- background: #181A31;
13
- --background: #333;
14
- -webkit-box-shadow: 4px 4px 10px rgba(69, 65, 78, .06);
15
- -moz-box-shadow: 4px 4px 10px rgba(69, 65, 78, .06);
16
- box-shadow: 4px 4px 10px rgba(69, 65, 78, .06);
17
- overflow: hidden;
18
- width: var(--min-width);
19
- --transition: all .3s;
20
- transition: width 0.2s ease-in-out;
21
- }
22
-
23
- :host(.collapse) {
24
- width: var(--min-width);
25
- }
26
- :host(:not(.collapse)) {
27
- width: var(--max-width);
28
- }
29
- :host(.collapse:hover) {
30
- width: var(--max-width);
31
- --animation: bounce 0.5s ease-in-out 1;
32
- }
33
-
34
-
35
- @keyframes bounce {
36
- 0%, 20%, 50%, 80%, 100% { transform: translateX(0); }
37
- 40% { transform: translateX(-10px); }
38
- 60% { left: -10px; transform: translateX(10px); }
39
- }
40
-
41
- :host(.collapse) {
42
- --width: var(--min-width);
43
- }
44
-
45
- :host(:not(.collapse)) {
46
- width: var(--max-width);
47
- }
48
-
49
- :host .body {
50
- display: flex;
51
- align-items: flex-start;
52
- --align-items: center; /* 수직 중앙 정렬 */
53
- margin-top: 32px; /* 여백 추가 */
54
- }
55
-
56
- ::slotted([slot="body-content"]) {
57
- width: 100%;
58
- padding: 0;
59
- }
60
-
61
-
62
-
@@ -1,8 +0,0 @@
1
- :host {
2
- display: flex;
3
- --align-items: flex-start;
4
- align-items: center; /* 수직 중앙 정렬 */
5
- padding: 10px; /* 여백 추가 */
6
- height: 40px;
7
- justify-content: center;
8
- }
@@ -1,78 +0,0 @@
1
- :host {
2
- display: flex;
3
- --align-items: flex-start;
4
- align-items: center; /* 수직 중앙 정렬 */
5
- padding: 10px; /* 여백 추가 */
6
- height: 40px;
7
- }
8
-
9
- :host(.collapse) .logo-box { justify-content: center; }
10
- :host(.collapse:hover) .logo-box, .logo-box { justify-content: space-between; }
11
-
12
- .logo-box
13
- {
14
- color: #f0f0f0;
15
- white-space: nowrap;
16
- overflow: hidden;
17
- text-overflow: ellipsis;
18
- text-align: center;
19
- width: 100%;
20
- }
21
-
22
- :host(.collapse) .logo-box {
23
- width: 0;
24
- transition: width 0.5s ease-out;
25
- }
26
- :host(.collapse:hover) .logo-box {
27
- width: 100%;
28
- }
29
-
30
- .icon-box {
31
- display: flex;
32
- align-items: center;
33
- overflow: hidden;
34
- }
35
-
36
- .icon {
37
- fill: var(--icon-color); /* 아이콘 색상 */
38
- cursor: pointer;
39
- transition: opacity 0.3s ease-in-out; /* 부드러운 전환을 위한 애니메이션 */
40
- }
41
-
42
- .icon-box svg {
43
- display: none;
44
- opacity: 0;
45
- transition: opacity 0.3s ease-in-out; /* 부드러운 전환을 위한 애니메이션 */
46
- }
47
-
48
- :host(.collapse) .icon:first-child {
49
- display: block;
50
- opacity: 1;
51
- }
52
-
53
- :host(:not(.collapse)) .icon:first-child {
54
- display: none;
55
- opacity: 0;
56
- }
57
-
58
- :host(:not(.collapse)) .icon:nth-child(2) {
59
- display: block;
60
- opacity: 1;
61
- }
62
-
63
- :host(:not(.collapse)) .icon:nth-child(3) {
64
- display: none;
65
- opacity: 0;
66
- }
67
-
68
- :host(:not(.collapse)) .icon-box:hover .icon:nth-child(2) {
69
- display: none;
70
- }
71
-
72
- :host(:not(.collapse)) .icon-box:hover .icon:nth-child(3) {
73
- display: block;
74
- opacity: 1;
75
- }
76
-
77
-
78
-
@@ -1,82 +0,0 @@
1
- :host {
2
- display: flex;
3
- --align-items: flex-start;
4
- align-items: center; /* 수직 중앙 정렬 */
5
- padding: 10px; /* 여백 추가 */
6
- height: 40px;
7
- justify-content: center;
8
- --border: 2px solid red;
9
- }
10
-
11
- /**
12
- :host(.collapse) .logo-box { justify-content: center; }
13
- :host(.collapse:hover) .logo-box, .logo-box { justify-content: space-between; }
14
- */
15
-
16
- .logo-box
17
- {
18
- color: #f0f0f0;
19
- white-space: nowrap;
20
- overflow: hidden;
21
- text-overflow: ellipsis;
22
- text-align: center;
23
- width: 100%;
24
- }
25
-
26
- :host(.collapse) .logo-box {
27
- width: 0;
28
- transition: width 0.5s ease-out;
29
- }
30
- :host(:not(.collapse)) .logo-box, :host(.hover) .logo-box {
31
- width: 100%;
32
- }
33
-
34
- .icon-box {
35
- display: flex;
36
- align-items: center;
37
- overflow: hidden;
38
- }
39
-
40
- .icon {
41
- fill: var(--icon-color); /* 아이콘 색상 */
42
- cursor: pointer;
43
- transition: opacity 0.3s ease-in-out; /* 부드러운 전환을 위한 애니메이션 */
44
- }
45
-
46
- .icon-box svg {
47
- display: none;
48
- opacity: 0;
49
- transition: opacity 0.3s ease-in-out; /* 부드러운 전환을 위한 애니메이션 */
50
- }
51
-
52
- :host(.collapse) .icon:first-child {
53
- display: block;
54
- opacity: 1;
55
- }
56
-
57
- :host(:not(.collapse)) .icon:first-child {
58
- display: none;
59
- opacity: 0;
60
- }
61
-
62
- :host(:not(.collapse)) .icon:nth-child(2) {
63
- display: block;
64
- opacity: 1;
65
- }
66
-
67
- :host(:not(.collapse)) .icon:nth-child(3) {
68
- display: none;
69
- opacity: 0;
70
- }
71
-
72
- :host(:not(.collapse)) .icon-box:hover .icon:nth-child(2) {
73
- display: none;
74
- }
75
-
76
- :host(:not(.collapse)) .icon-box:hover .icon:nth-child(3) {
77
- display: block;
78
- opacity: 1;
79
- }
80
-
81
-
82
-
@@ -1,203 +0,0 @@
1
- :host {
2
- padding: 0;
3
- margin: 0;
4
- position: relative;
5
- display: flex;
6
- align-items: unset;
7
- --background-color: #333;
8
- background-color: unset;
9
- cursor: pointer;
10
- transition: opacity 0.5s ease-out, height 0.5s ease-out;
11
- }
12
- :host(.group) {
13
- height: 48px;
14
- }
15
- :host(:not(.group)) {
16
- height: 32px;
17
- }
18
-
19
- :host(.active) {
20
- --background-color: #999;
21
- color: #9FF2FF;
22
- }
23
-
24
- :host(.collapse:not(.group):not(.hover)) {
25
- opacity: 0;
26
- height: 0;
27
- }
28
-
29
- :host(:hover) {
30
- filter: brightness(90%);
31
- }
32
-
33
-
34
-
35
- .menubar {
36
- display: inline-block;
37
- --padding-left: 16px;
38
- --margin-left: 16px;
39
- white-space: nowrap;
40
- overflow: hidden;
41
- text-overflow: ellipsis;
42
- transition: height 0.5s ease-out, padding 0.5s ease-out;
43
- text-align: left;
44
- --width: calc(100% - 36px);
45
- --margin: 0;
46
- }
47
- :host(.group) .menubar {
48
- font-weight: 700;
49
- }
50
- :host(:not(.group)) .menubar {
51
- font-weight: 400;
52
- }
53
- :host(.collapse:not(.hover)) .menubar {
54
- transition: width 0.5s ease-out, padding-left 0.5s ease-out;
55
- width: 0;
56
- padding-left: unset;
57
- }
58
-
59
- li {
60
- display: flex;
61
- align-items: center;
62
- padding: 0;
63
- margin: 0;
64
- position: relative;
65
- color: unset;
66
- font-weight: bold;
67
- width: calc(100% + 36px);
68
- }
69
-
70
- :host(.collapse:not(.hover)) li {
71
- justify-content: center;
72
- }
73
-
74
-
75
- :host(.group) li {
76
- list-style-type: none;
77
- }
78
- :host(:not(.group)) li {
79
- list-style-type: unset;
80
- }
81
- :host(:not(.group)) li::before {
82
- content: '•';
83
- margin-right: 8px;
84
- margin-left: 16px;
85
- }
86
-
87
-
88
-
89
- .icon {
90
- position: relative;
91
- left: 0;
92
- --top: 50%;
93
- --transform: translateY(-50%);
94
- width: 16px;
95
- height: 16px;
96
- background-repeat: no-repeat;
97
- background-position: center center;
98
- background-size: contain;
99
- --margin-right: 16px;
100
- transition: width 0.5s ease-out, height 0.5s ease-out;
101
- }
102
- :host(.collapse:not(.hover)) .icon {
103
- width: 20px;
104
- height: 20px;
105
- }
106
- :host(.collapse:not(.hover)) .menubar,
107
- :host(.collapse:not(.hover)) .expand-icon {
108
- display: none;
109
- }
110
- .icon-home {
111
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="lightgray" viewBox="0 0 16 16"><path d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5"/></svg>');
112
- }
113
-
114
- .icon-base {
115
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" viewBox="0 0 16 16"><path d="M0 .5A.5.5 0 0 1 .5 0h15a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5H14v2h1.5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5H14v2h1.5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5H.5a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5H2v-2H.5a.5.5 0 0 1-.5-.5v-3A.5.5 0 0 1 .5 6H2V4H.5a.5.5 0 0 1-.5-.5zM3 4v2h4.5V4zm5.5 0v2H13V4zM3 10v2h4.5v-2zm5.5 0v2H13v-2zM1 1v2h3.5V1zm4.5 0v2h5V1zm6 0v2H15V1zM1 7v2h3.5V7zm4.5 0v2h5V7zm6 0v2H15V7zM1 13v2h3.5v-2zm4.5 0v2h5v-2zm6 0v2H15v-2z"/></svg>');
116
- }
117
-
118
- .menubar {
119
- margin-left: 8px;
120
- }
121
-
122
-
123
- .expand-icon {
124
- width: 8px;
125
- height: 8px;
126
- --border-left: 4px solid transparent;
127
- --border-right: 4px solid transparent;
128
- --border-top: 4px solid #ccc;
129
- position: absolute;
130
- right: 16px;
131
- background-repeat: no-repeat;
132
- background-position: center;
133
- background-size: auto;
134
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="white" class="bi bi-caret-down-fill" 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>');
135
- animation: rotate-out 0.3s ease-in-out forwards;
136
- }
137
- :host(:not(.expand)) .expand-icon {
138
- transform: rotate(180deg);
139
- animation: rotate-in 0.3s ease-in-out forwards;
140
- }
141
- @keyframes rotate-in {
142
- from {
143
- transform: rotate(0deg);
144
- }
145
- to {
146
- transform: rotate(180deg);
147
- }
148
- }
149
- @keyframes rotate-out {
150
- from {
151
- transform: rotate(180deg);
152
- }
153
- to {
154
- transform: rotate(0deg);
155
- }
156
- }
157
-
158
- :host(.collapse:not(.hover)) .expand-icon {
159
- display: none;
160
- }
161
- :host(:not(.group)) .expand-icon {
162
- display: none;
163
- }
164
-
165
- a {
166
- color: #999; /* 금색 */
167
- text-decoration: none; /* 밑줄 제거 */
168
- }
169
-
170
- a:hover {
171
- color: #ccc; /* 주황색 */
172
- text-decoration: underline; /* 호버 시 밑줄 추가 */
173
- }
174
-
175
- :host(:not(.group)) {
176
- .icon {
177
- display: none;
178
- }
179
- }
180
-
181
- :host {
182
- .icon {
183
- margin-left: 8px;
184
- }
185
- }
186
- :host(.collapse:not(.hover)) {
187
- .icon {
188
- margin-left: 4px;
189
- }
190
- }
191
-
192
- :host {
193
- --overflow: hidden;
194
- max-height: 64px; /* 기본 높이 */
195
- opacity: 1;
196
- transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
197
- }
198
- :host(.hide) {
199
- --display: none;
200
- max-height: 0;
201
- opacity: 0;
202
- padding: 0;
203
- }
@@ -1,63 +0,0 @@
1
- :host(.h) {
2
- display: flex;
3
- flex-direction: row;
4
- justify-content: center;
5
- align-items: center;
6
- --border: 1px solid red;
7
- --width: 8px;
8
-
9
- div.inner-container {
10
- display: flex;
11
- flex-direction: column;
12
- justify-content: center;
13
- align-items: center;
14
- gap: 8px;
15
- }
16
- }
17
-
18
-
19
- div.grip-h {
20
- cursor: col-resize;
21
- display: flex;
22
- height: 100%;
23
- width: 8px;
24
- --border: 1px solid red;
25
- background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='15'><circle cx='10' cy='3' r='1.5' fill='%23999'/><circle cx='10' cy='8' r='1.5' fill='%23999'/><circle cx='10' cy='13' r='1.5' fill='%23999'/></svg>");
26
- background-repeat: no-repeat;
27
- background-position: center;
28
- filter: drop-shadow(0 0 0.5px #666);
29
- transition: filter 0.2s ease;
30
- }
31
- div.grip-h:hover {
32
- filter: drop-shadow(0 0 1px #333);
33
- }
34
-
35
- :host(.v) {
36
- display: flex;
37
- flex-direction: row;
38
- --justify-content: center;
39
- --border: 1px solid red;
40
- height: 8px;
41
-
42
- div.inner-container {
43
- display: flex;
44
- flex-direction: row;
45
- justify-content: center;
46
- align-items: center;
47
- }
48
- }
49
-
50
- div.grip-v {
51
- cursor: row-resize;
52
- display: flex;
53
- width: 100%;
54
- height: 8px;
55
- background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='20'><circle cx='3' cy='10' r='1.5' fill='%23999'/><circle cx='8' cy='10' r='1.5' fill='%23999'/><circle cx='13' cy='10' r='1.5' fill='%23999'/></svg>");
56
- background-repeat: no-repeat;
57
- background-position: center;
58
- filter: drop-shadow(0 0 0.5px #666);
59
- transition: filter 0.2s ease;
60
- }
61
- div.grip-v:hover {
62
- filter: drop-shadow(0 0 1px #333);
63
- }