do-ui-design-system 1.1.15 → 1.1.17

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