do-ui-design-system 1.1.15 → 1.1.16

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 (6) hide show
  1. package/dist/do-theme/table.css +221 -220
  2. package/dist/organisms/TableBasic/TableBasic.svelte +430 -422
  3. package/dist/organisms/TableBasic/TableBasic.svelte.d.ts.map +1 -1
  4. package/dist/organisms/TableBasic/TableBasic.types.d.ts +2 -1
  5. package/dist/organisms/TableBasic/TableBasic.types.d.ts.map +1 -1
  6. package/package.json +1 -1
package/dist/do-theme/table.css CHANGED
@@ -1,221 +1,222 @@
1
- .do-table {
2
- .do-table__header {
3
- display: flex;
4
- align-items: center;
5
- justify-content: space-between;
6
- margin-bottom: 1rem;
7
-
8
- .do-table__header__tags {
9
- display: flex;
10
- align-items: center;
11
- gap: 0.5rem;
12
- }
13
- }
14
-
15
- .do-table-wrapper {
16
- overflow-x: auto;
17
- }
18
-
19
- .do-table__content {
20
- border-radius: 12px;
21
- overflow: hidden;
22
- background: var(--do-table-bg);
23
- font-size: 1rem;
24
- width: 100%;
25
- border-collapse: collapse;
26
-
27
- thead tr {
28
- background: var(--do-table-bg-head);
29
- border-bottom: 1px solid #1e1e1e;
30
- }
31
-
32
- .do-table__content__th {
33
- padding: 0.75rem 1rem;
34
- text-align: left;
35
- font-size: 1rem;
36
- font-weight: 500;
37
- cursor: pointer;
38
- transition: color 0.15s;
39
- color: #ffffff;
40
-
41
- &:not(.col-check) {
42
- min-width: 120px;
43
- }
44
-
45
- .do-table__content__th__sort {
46
- display: inline-block;
47
- font-size: 0.8rem;
48
- margin-left: 4px;
49
- }
50
-
51
- .do-table__content__th__sort--up {
52
- transform: rotate(180deg);
53
- }
54
-
55
- &.do-table__content__th:hover {
56
- color: #ffffff;
57
- }
58
-
59
- &.do-table__content__th.sort-active {
60
- color: #eee;
61
- }
62
- }
63
-
64
- .sort-icon {
65
- margin-left: 4px;
66
- font-size: 1rem;
67
- color: #6366f1;
68
- }
69
-
70
- .sort-icon.muted {
71
- color: #374151;
72
- }
73
-
74
- .col-check {
75
- padding: 0.75rem 1rem;
76
- width: 1px;
77
- }
78
-
79
- .do-row {
80
- background: var(--do-table-bg-row);
81
- transition: background 0.12s;
82
- color: var(--do-table-text);
83
- border: 1px solid transparent;
84
-
85
- &:nth-child(2n) {
86
- background: var(--do-table-bg-row-striped);
87
- }
88
-
89
- &:hover {
90
- background: var(--do-table-bg-row-hover);
91
- }
92
-
93
- &.selected {
94
- background: var(--do-table-bg-row-hover);
95
- outline: 2px solid rgb(15, 116, 182);
96
- outline-offset: -1px;
97
- }
98
- }
99
-
100
- .do-table__content__th-filter {
101
- padding: 0.2rem 0.5rem;
102
-
103
- input {
104
- max-width: 80%;
105
- }
106
- }
107
-
108
- .do-table__content__th-action {
109
- padding: 0.2rem 0.5rem;
110
- }
111
-
112
- td {
113
- padding: 0.75rem 1rem;
114
- color: inherit;
115
-
116
- &:not(.col-check) {
117
- min-width: 120px;
118
- }
119
- }
120
-
121
- td:first-child {
122
- color: #e2e8f0;
123
- }
124
-
125
- .do-checkbox {
126
- cursor: pointer;
127
- accent-color: #6366f1;
128
- width: 15px;
129
- height: 15px;
130
- }
131
-
132
- .do-table_content-wrapper {
133
- border: 1px solid var(--do-bg-secondary);
134
- border-radius: 12px;
135
- overflow: hidden;
136
- }
137
- }
138
-
139
- .do-table__footer {
140
- display: grid;
141
- grid-template-columns: 1fr min-content;
142
- align-items: center;
143
- padding: 10px 16px;
144
- border-top: 1px solid white;
145
- gap: 16px;
146
- color: inherit;
147
- font-size: 1rem;
148
-
149
- .selected-count {
150
- color: #5e5e5e;
151
- }
152
-
153
- .sort-label strong {
154
- color: #5e5e5e;
155
- font-weight: 500;
156
- }
157
- }
158
-
159
- .do-table__header__dates {
160
- display: flex;
161
- align-items: flex-end;
162
- gap: 0.75rem;
163
- flex-wrap: wrap;
164
- }
165
-
166
- .do-table__date-toggle {
167
- display: flex;
168
- border: 1px solid var(--do-border, #3f3f46);
169
- border-radius: 6px;
170
- overflow: hidden;
171
- }
172
-
173
- .do-table__date-toggle__btn {
174
- padding: 0.375rem 0.75rem;
175
- font-size: 0.875rem;
176
- background: transparent;
177
- border: none;
178
- cursor: pointer;
179
- color: inherit;
180
- transition: background 0.15s;
181
-
182
- &.active {
183
- background: var(--do-bg-secondary, #3f3f46);
184
- }
185
-
186
- &:hover:not(.active) {
187
- background: var(--do-bg-secondary-hover, #52525b);
188
- }
189
- }
190
-
191
- .do-table__date-range {
192
- display: flex;
193
- align-items: center;
194
- gap: 0.5rem;
195
- flex-wrap: wrap;
196
- position: relative;
197
- }
198
-
199
- .do-table__date-fields {
200
- display: flex;
201
- align-items: center;
202
- gap: 0.5rem;
203
- flex-wrap: wrap;
204
- position: relative;
205
-
206
- .do-table__date-fields__field {
207
- display: flex;
208
- flex-direction: column;
209
- gap: 0.25rem;
210
- }
211
- }
212
-
213
- .do-table__date-error {
214
- position: absolute;
215
- white-space: nowrap;
216
- bottom: -1rem;
217
- left: 0;
218
- font-size: 0.75rem;
219
- color: red;
220
- }
1
+ .do-table {
2
+ .do-table__header {
3
+ display: flex;
4
+ align-items: center;
5
+ justify-content: space-between;
6
+ margin-bottom: 1rem;
7
+
8
+ .do-table__header__tags {
9
+ display: flex;
10
+ align-items: center;
11
+ gap: 0.5rem;
12
+ }
13
+ }
14
+
15
+ .do-table-wrapper {
16
+ overflow-x: auto;
17
+ }
18
+
19
+ .do-table__content {
20
+ border-radius: 12px;
21
+ overflow: hidden;
22
+ background: var(--do-table-bg);
23
+ font-size: 1rem;
24
+ width: 100%;
25
+ border-collapse: collapse;
26
+
27
+ thead tr {
28
+ background: var(--do-table-bg-head);
29
+ border-bottom: 1px solid #1e1e1e;
30
+ }
31
+
32
+ .do-table__content__th {
33
+ padding: 0.75rem 1rem;
34
+ text-align: left;
35
+ font-size: 1rem;
36
+ font-weight: 500;
37
+ cursor: pointer;
38
+ transition: color 0.15s;
39
+ color: #ffffff;
40
+
41
+ &:not(.col-check):not(.do-table__content__th-action) {
42
+ min-width: 120px;
43
+ }
44
+
45
+ .do-table__content__th__sort {
46
+ display: inline-block;
47
+ font-size: 0.8rem;
48
+ margin-left: 4px;
49
+ }
50
+
51
+ .do-table__content__th__sort--up {
52
+ transform: rotate(180deg);
53
+ }
54
+
55
+ &.do-table__content__th:hover {
56
+ color: #ffffff;
57
+ }
58
+
59
+ &.do-table__content__th.sort-active {
60
+ color: #eee;
61
+ }
62
+ }
63
+
64
+ .sort-icon {
65
+ margin-left: 4px;
66
+ font-size: 1rem;
67
+ color: #6366f1;
68
+ }
69
+
70
+ .sort-icon.muted {
71
+ color: #374151;
72
+ }
73
+
74
+ .col-check {
75
+ padding: 0.75rem 1rem;
76
+ width: 1px;
77
+ }
78
+
79
+ .do-row {
80
+ background: var(--do-table-bg-row);
81
+ transition: background 0.12s;
82
+ color: var(--do-table-text);
83
+ border: 1px solid transparent;
84
+
85
+ &:nth-child(2n) {
86
+ background: var(--do-table-bg-row-striped);
87
+ }
88
+
89
+ &:hover {
90
+ background: var(--do-table-bg-row-hover);
91
+ }
92
+
93
+ &.selected {
94
+ background: var(--do-table-bg-row-hover);
95
+ outline: 2px solid rgb(15, 116, 182);
96
+ outline-offset: -1px;
97
+ }
98
+ }
99
+
100
+ .do-table__content__th-filter {
101
+ padding: 0.2rem 0.5rem;
102
+
103
+ input {
104
+ max-width: 80%;
105
+ }
106
+ }
107
+
108
+ .do-table__content__th-action {
109
+ padding: 0.2rem 0.5rem;
110
+ width: 1px;
111
+ }
112
+
113
+ td {
114
+ padding: 0.75rem 1rem;
115
+ color: inherit;
116
+
117
+ &:not(.col-check):not(.do-table__content__th-action) {
118
+ min-width: 120px;
119
+ }
120
+ }
121
+
122
+ td:first-child {
123
+ color: #e2e8f0;
124
+ }
125
+
126
+ .do-checkbox {
127
+ cursor: pointer;
128
+ accent-color: #6366f1;
129
+ width: 15px;
130
+ height: 15px;
131
+ }
132
+
133
+ .do-table_content-wrapper {
134
+ border: 1px solid var(--do-bg-secondary);
135
+ border-radius: 12px;
136
+ overflow: hidden;
137
+ }
138
+ }
139
+
140
+ .do-table__footer {
141
+ display: grid;
142
+ grid-template-columns: 1fr min-content;
143
+ align-items: center;
144
+ padding: 10px 16px;
145
+ border-top: 1px solid white;
146
+ gap: 16px;
147
+ color: inherit;
148
+ font-size: 1rem;
149
+
150
+ .selected-count {
151
+ color: #5e5e5e;
152
+ }
153
+
154
+ .sort-label strong {
155
+ color: #5e5e5e;
156
+ font-weight: 500;
157
+ }
158
+ }
159
+
160
+ .do-table__header__dates {
161
+ display: flex;
162
+ align-items: flex-end;
163
+ gap: 0.75rem;
164
+ flex-wrap: wrap;
165
+ }
166
+
167
+ .do-table__date-toggle {
168
+ display: flex;
169
+ border: 1px solid var(--do-border, #3f3f46);
170
+ border-radius: 6px;
171
+ overflow: hidden;
172
+ }
173
+
174
+ .do-table__date-toggle__btn {
175
+ padding: 0.375rem 0.75rem;
176
+ font-size: 0.875rem;
177
+ background: transparent;
178
+ border: none;
179
+ cursor: pointer;
180
+ color: inherit;
181
+ transition: background 0.15s;
182
+
183
+ &.active {
184
+ background: var(--do-bg-secondary, #3f3f46);
185
+ }
186
+
187
+ &:hover:not(.active) {
188
+ background: var(--do-bg-secondary-hover, #52525b);
189
+ }
190
+ }
191
+
192
+ .do-table__date-range {
193
+ display: flex;
194
+ align-items: center;
195
+ gap: 0.5rem;
196
+ flex-wrap: wrap;
197
+ position: relative;
198
+ }
199
+
200
+ .do-table__date-fields {
201
+ display: flex;
202
+ align-items: center;
203
+ gap: 0.5rem;
204
+ flex-wrap: wrap;
205
+ position: relative;
206
+
207
+ .do-table__date-fields__field {
208
+ display: flex;
209
+ flex-direction: column;
210
+ gap: 0.25rem;
211
+ }
212
+ }
213
+
214
+ .do-table__date-error {
215
+ position: absolute;
216
+ white-space: nowrap;
217
+ bottom: -1rem;
218
+ left: 0;
219
+ font-size: 0.75rem;
220
+ color: red;
221
+ }
221
222
  }