@nine-lab/nine-ux 0.1.198 → 0.1.199
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/css/nineDiv.css +120 -0
- package/dist/css/nineNav.css +19 -7
- package/dist/css/ninePanel.css +129 -0
- package/dist/{few_shot-D_QF7o-C.js → few_shot-Q22lJsBd.js} +1 -1
- package/dist/{index-CxPVQ_Rh.js → index-CSyh_GT3.js} +8896 -8768
- package/dist/nine-ux.js +1 -1
- package/dist/nine-ux.umd.js +277 -263
- package/package.json +1 -1
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
.search-box {
|
|
2
|
+
|
|
3
|
+
}
|
|
4
|
+
.search-container {
|
|
5
|
+
--margin-top: 16px;
|
|
6
|
+
--margin-left: 16px;
|
|
7
|
+
--margin-right: 16px;
|
|
8
|
+
display: flex;
|
|
9
|
+
align-items: center;
|
|
10
|
+
gap: 10px;
|
|
11
|
+
padding: 16px 32px;
|
|
12
|
+
background-color: #f0f1fd;
|
|
13
|
+
--border: 2px solid red;
|
|
14
|
+
border-radius: 5px;
|
|
15
|
+
position: relative;
|
|
16
|
+
transition: height 0.3s ease-in-out, padding 0.3s ease-in-out;
|
|
17
|
+
margin-bottom: 16px;
|
|
18
|
+
|
|
19
|
+
input[type=text] {
|
|
20
|
+
background-color: white;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.toggle-icon {
|
|
24
|
+
position: absolute;
|
|
25
|
+
top: 2px;
|
|
26
|
+
right: 2px;
|
|
27
|
+
cursor: pointer;
|
|
28
|
+
width: 16px;
|
|
29
|
+
height: 16px;
|
|
30
|
+
border: none;
|
|
31
|
+
background-repeat: no-repeat;
|
|
32
|
+
background-position: center;
|
|
33
|
+
background-size: auto;
|
|
34
|
+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="darkgray" class="bi bi-box-arrow-in-up-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M6.364 13.5a.5.5 0 0 0 .5.5H13.5a1.5 1.5 0 0 0 1.5-1.5v-10A1.5 1.5 0 0 0 13.5 1h-10A1.5 1.5 0 0 0 2 2.5v6.636a.5.5 0 1 0 1 0V2.5a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v10a.5.5 0 0 1-.5.5H6.864a.5.5 0 0 0-.5.5"/><path fill-rule="evenodd" d="M11 5.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793l-8.147 8.146a.5.5 0 0 0 .708.708L10 6.707V10.5a.5.5 0 0 0 1 0z"/></svg>');
|
|
35
|
+
animation: rotate-out 0.3s ease-in-out forwards;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.search-content {
|
|
39
|
+
width: 100%;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.search-container.collapse {
|
|
44
|
+
--width: 16px;
|
|
45
|
+
height: 0;
|
|
46
|
+
padding: 0;
|
|
47
|
+
--overflow: hidden;
|
|
48
|
+
top: -32px;
|
|
49
|
+
--right: 0px;
|
|
50
|
+
background-color: unset;
|
|
51
|
+
--z-index: 1;
|
|
52
|
+
margin-bottom: 0;
|
|
53
|
+
|
|
54
|
+
.search-content {
|
|
55
|
+
display: none;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.toggle-icon {
|
|
59
|
+
right: -32px;
|
|
60
|
+
--top: -4px;
|
|
61
|
+
--width: 0;
|
|
62
|
+
--height: 0;
|
|
63
|
+
--transition: right 0.3s ease-in-out;
|
|
64
|
+
transform: rotate(180deg);
|
|
65
|
+
animation: rotate-in 0.3s ease-in-out forwards;
|
|
66
|
+
--background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="darkgray" class="bi bi-box-arrow-in-down-left" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M9.636 2.5a.5.5 0 0 0-.5-.5H2.5A1.5 1.5 0 0 0 1 3.5v10A1.5 1.5 0 0 0 2.5 15h10a1.5 1.5 0 0 0 1.5-1.5V6.864a.5.5 0 0 0-1 0V13.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5"/><path fill-rule="evenodd" d="M5 10.5a.5.5 0 0 0 .5.5h5a.5.5 0 0 0 0-1H6.707l8.147-8.146a.5.5 0 0 0-.708-.708L6 9.293V5.5a.5.5 0 0 0-1 0z"/></svg>');
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
@keyframes rotate-in {
|
|
71
|
+
from {
|
|
72
|
+
transform: rotate(0deg);
|
|
73
|
+
}
|
|
74
|
+
to {
|
|
75
|
+
transform: rotate(180deg);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
@keyframes rotate-out {
|
|
80
|
+
from {
|
|
81
|
+
transform: rotate(180deg);
|
|
82
|
+
}
|
|
83
|
+
to {
|
|
84
|
+
transform: rotate(0deg);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.search-content {
|
|
89
|
+
display: flex;
|
|
90
|
+
gap: 16px;
|
|
91
|
+
label {
|
|
92
|
+
font-weight: normal;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
input {
|
|
96
|
+
outline: none;
|
|
97
|
+
border-radius: 4px;
|
|
98
|
+
--width: 400px;
|
|
99
|
+
height: 26px;
|
|
100
|
+
border: 1px solid #b1b2c8;
|
|
101
|
+
padding: 0 4px;
|
|
102
|
+
--margin-top: 8px;
|
|
103
|
+
color: #666;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
input:focus {
|
|
107
|
+
border-color: dodgerblue;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
input[type=date] {
|
|
111
|
+
width: 130px;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
button {
|
|
115
|
+
--width: 80px;
|
|
116
|
+
cursor: pointer;
|
|
117
|
+
width: auto;
|
|
118
|
+
--border-radius: 4px;
|
|
119
|
+
}
|
|
120
|
+
}
|
package/dist/css/nineNav.css
CHANGED
|
@@ -1,17 +1,18 @@
|
|
|
1
|
-
:host(nine-
|
|
1
|
+
:host(nine-nav) {
|
|
2
2
|
|
|
3
3
|
display: flex;
|
|
4
4
|
justify-content: center;
|
|
5
5
|
width: 100%;
|
|
6
6
|
height: 0;
|
|
7
7
|
|
|
8
|
+
|
|
8
9
|
.wrapper {
|
|
9
10
|
display: flex;
|
|
10
11
|
|
|
11
12
|
.title-wrapper {
|
|
12
|
-
background:
|
|
13
|
+
background: transparent;
|
|
13
14
|
--opacity: 0.3;
|
|
14
|
-
height:
|
|
15
|
+
height: 32px;
|
|
15
16
|
display: flex;
|
|
16
17
|
align-items: center;
|
|
17
18
|
--font-weight: 700;
|
|
@@ -21,7 +22,7 @@
|
|
|
21
22
|
border-bottom-right-radius: 8px;
|
|
22
23
|
border-bottom-left-radius: 8px;
|
|
23
24
|
--box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
|
|
24
|
-
|
|
25
|
+
gap: 4px;
|
|
25
26
|
.title-icon {
|
|
26
27
|
display: none;
|
|
27
28
|
--width: 16px;
|
|
@@ -34,9 +35,9 @@
|
|
|
34
35
|
span {
|
|
35
36
|
padding-left: 8px;
|
|
36
37
|
padding-right: 8px;
|
|
37
|
-
color:
|
|
38
|
+
color: green;
|
|
38
39
|
font-weight: 700;
|
|
39
|
-
font-size:
|
|
40
|
+
font-size: 18px;
|
|
40
41
|
}
|
|
41
42
|
|
|
42
43
|
.bar1, .bar8 {
|
|
@@ -52,6 +53,17 @@
|
|
|
52
53
|
height: 1px;
|
|
53
54
|
background: green;
|
|
54
55
|
}
|
|
56
|
+
|
|
57
|
+
.bar1,.bar2,.bar3,.bar7,.bar8,.bar9 {
|
|
58
|
+
position: relative;
|
|
59
|
+
display: block;
|
|
60
|
+
width: 8px;
|
|
61
|
+
height: 8px;
|
|
62
|
+
border: 1px dotted green; /* 두께 2px, 실선, 색상 */
|
|
63
|
+
border-radius: 50%;
|
|
64
|
+
box-sizing: border-box; /* 테두리 두께를 32px 안에 포함시킴 */
|
|
65
|
+
background-color: transparent; /* 안쪽은 투명하게(텅 비게) */
|
|
66
|
+
}
|
|
55
67
|
}
|
|
56
68
|
}
|
|
57
69
|
|
|
@@ -63,7 +75,7 @@
|
|
|
63
75
|
padding: 0px 4px;
|
|
64
76
|
font-size: 10px;
|
|
65
77
|
color: #777;
|
|
66
|
-
display:
|
|
78
|
+
display: none; /* 가로 정렬 */
|
|
67
79
|
align-items: center;
|
|
68
80
|
justify-content: flex-end; /* 오른쪽 정렬 */
|
|
69
81
|
--border-left: 2px solid #666;
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
:host(nine-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
|
+
&:host(.theme-1) {
|
|
125
|
+
.body {
|
|
126
|
+
border: none;
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
}
|