rei-kit 2.8.0 → 2.10.0
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/README.md +4 -4
- package/dist/{SettingsRow-BXFn8tCk.js → BaseButton-RN2an975.js} +5 -66
- package/dist/BaseButton-RN2an975.js.map +1 -0
- package/dist/BaseSkeleton-BlhlEskx.js +171 -0
- package/dist/BaseSkeleton-BlhlEskx.js.map +1 -0
- package/dist/{GoogleButton-DVro7xZH.js → GoogleButton-DS08ayQ-.js} +4 -37
- package/dist/GoogleButton-DS08ayQ-.js.map +1 -0
- package/dist/SettingsRow-Ct1p2C9Q.js +65 -0
- package/dist/SettingsRow-Ct1p2C9Q.js.map +1 -0
- package/dist/app.js +4 -3
- package/dist/app.js.map +1 -1
- package/dist/components/BaseChip.vue.d.ts +4 -0
- package/dist/components/TagsInput.vue.d.ts +4 -0
- package/dist/index.js +215 -319
- package/dist/index.js.map +1 -1
- package/dist/{inert-TJG_g0d6.js → inert-BRQcZwpX.js} +36 -2
- package/dist/inert-BRQcZwpX.js.map +1 -0
- package/dist/pwa.js +2 -1
- package/dist/pwa.js.map +1 -1
- package/dist/styles.css +250 -87
- package/dist/web/BaseSplitter.vue.d.ts +47 -0
- package/dist/web/BaseToolbar.vue.d.ts +30 -0
- package/dist/web/BaseTree.vue.d.ts +42 -0
- package/dist/web/TransferList.vue.d.ts +35 -0
- package/dist/web/index.d.ts +9 -0
- package/dist/web.js +521 -77
- package/dist/web.js.map +1 -1
- package/package.json +2 -2
- package/dist/BaseSkeleton-B-oo7JKE.js +0 -43
- package/dist/BaseSkeleton-B-oo7JKE.js.map +0 -1
- package/dist/GoogleButton-DVro7xZH.js.map +0 -1
- package/dist/SettingsRow-BXFn8tCk.js.map +0 -1
- package/dist/inert-TJG_g0d6.js.map +0 -1
package/dist/styles.css
CHANGED
|
@@ -218,6 +218,64 @@
|
|
|
218
218
|
opacity: 0;
|
|
219
219
|
}
|
|
220
220
|
|
|
221
|
+
.rk-listbox[data-v-31727bd7] {
|
|
222
|
+
overflow-y: auto;
|
|
223
|
+
border-radius: var(--radius-card);
|
|
224
|
+
padding: 0.25rem;
|
|
225
|
+
}
|
|
226
|
+
.rk-listbox[data-v-31727bd7]:focus-visible {
|
|
227
|
+
outline: 2px solid var(--color-primary);
|
|
228
|
+
outline-offset: 1px;
|
|
229
|
+
}
|
|
230
|
+
.rk-listbox-option[data-v-31727bd7] {
|
|
231
|
+
display: flex;
|
|
232
|
+
cursor: pointer;
|
|
233
|
+
align-items: center;
|
|
234
|
+
gap: 0.625rem;
|
|
235
|
+
border-radius: var(--radius-cell);
|
|
236
|
+
padding: 0.5rem 0.625rem;
|
|
237
|
+
font-size: 0.875rem;
|
|
238
|
+
color: var(--color-ink);
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
/* The current row shows only while the list has focus. A list that is not
|
|
242
|
+
being used has no "current" row, and a highlight left behind on one reads
|
|
243
|
+
as a selection — which is exactly what it is not. */
|
|
244
|
+
.rk-listbox:focus-within .rk-listbox-option.is-active[data-v-31727bd7] {
|
|
245
|
+
background: var(--color-muted);
|
|
246
|
+
}
|
|
247
|
+
.rk-listbox-option.is-chosen[data-v-31727bd7] {
|
|
248
|
+
color: var(--color-primary);
|
|
249
|
+
font-weight: 500;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
/* Chosen is the tick and the tint, and it holds whether the list is in use
|
|
253
|
+
or not: the current option and the chosen one are different things. */
|
|
254
|
+
.rk-listbox-option.is-chosen[data-v-31727bd7] {
|
|
255
|
+
background: color-mix(in oklab, var(--color-primary) 10%, transparent);
|
|
256
|
+
}
|
|
257
|
+
.rk-listbox:focus-within .rk-listbox-option.is-chosen.is-active[data-v-31727bd7] {
|
|
258
|
+
background: color-mix(in oklab, var(--color-primary) 20%, transparent);
|
|
259
|
+
}
|
|
260
|
+
.rk-listbox-option.is-disabled[data-v-31727bd7] {
|
|
261
|
+
cursor: not-allowed;
|
|
262
|
+
opacity: 0.45;
|
|
263
|
+
}
|
|
264
|
+
.rk-listbox-label[data-v-31727bd7] {
|
|
265
|
+
display: block;
|
|
266
|
+
overflow: hidden;
|
|
267
|
+
text-overflow: ellipsis;
|
|
268
|
+
white-space: nowrap;
|
|
269
|
+
}
|
|
270
|
+
.rk-listbox-description[data-v-31727bd7] {
|
|
271
|
+
display: block;
|
|
272
|
+
font-size: 0.75rem;
|
|
273
|
+
color: var(--color-ink-soft);
|
|
274
|
+
}
|
|
275
|
+
.rk-listbox-empty[data-v-31727bd7] {
|
|
276
|
+
padding: 1rem;
|
|
277
|
+
}
|
|
278
|
+
|
|
221
279
|
.rk-skeleton[data-v-37327de6] {
|
|
222
280
|
display: block;
|
|
223
281
|
flex-shrink: 0;
|
|
@@ -1017,7 +1075,7 @@ to {
|
|
|
1017
1075
|
background: var(--color-muted);
|
|
1018
1076
|
}
|
|
1019
1077
|
|
|
1020
|
-
.rk-chip[data-v-
|
|
1078
|
+
.rk-chip[data-v-c94a820d] {
|
|
1021
1079
|
display: inline-flex;
|
|
1022
1080
|
max-width: 100%;
|
|
1023
1081
|
align-items: center;
|
|
@@ -1030,21 +1088,22 @@ to {
|
|
|
1030
1088
|
background: var(--color-muted);
|
|
1031
1089
|
color: var(--color-ink);
|
|
1032
1090
|
}
|
|
1033
|
-
.rk-chip
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1091
|
+
.rk-chip-body[data-v-c94a820d] {
|
|
1092
|
+
display: inline-flex;
|
|
1093
|
+
min-width: 0;
|
|
1094
|
+
align-items: center;
|
|
1095
|
+
gap: 0.375rem;
|
|
1096
|
+
border-radius: 9999px;
|
|
1097
|
+
color: inherit;
|
|
1038
1098
|
}
|
|
1039
|
-
.rk-chip.is-button[data-v-
|
|
1040
|
-
|
|
1041
|
-
outline-offset: 2px;
|
|
1099
|
+
.rk-chip-body.is-button[data-v-c94a820d] {
|
|
1100
|
+
cursor: pointer;
|
|
1042
1101
|
}
|
|
1043
|
-
.rk-chip.is-selected[data-v-
|
|
1102
|
+
.rk-chip.is-selected[data-v-c94a820d] {
|
|
1044
1103
|
background: var(--color-primary);
|
|
1045
1104
|
color: var(--color-on-primary);
|
|
1046
1105
|
}
|
|
1047
|
-
.rk-chip[data-v-
|
|
1106
|
+
.rk-chip.is-disabled[data-v-c94a820d] {
|
|
1048
1107
|
cursor: not-allowed;
|
|
1049
1108
|
opacity: 0.5;
|
|
1050
1109
|
}
|
|
@@ -1052,27 +1111,27 @@ to {
|
|
|
1052
1111
|
/* The tones tint rather than fill: a row of chips in five solid colours is a
|
|
1053
1112
|
row where nothing stands out. The selected one fills, and that is the point
|
|
1054
1113
|
of it. */
|
|
1055
|
-
.rk-chip.tone-primary[data-v-
|
|
1114
|
+
.rk-chip.tone-primary[data-v-c94a820d] {
|
|
1056
1115
|
background: color-mix(in oklab, var(--color-primary) 12%, transparent);
|
|
1057
1116
|
border-color: color-mix(in oklab, var(--color-primary) 25%, transparent);
|
|
1058
1117
|
color: var(--color-primary);
|
|
1059
1118
|
}
|
|
1060
|
-
.rk-chip.tone-success[data-v-
|
|
1119
|
+
.rk-chip.tone-success[data-v-c94a820d] {
|
|
1061
1120
|
background: color-mix(in oklab, var(--color-positive) 14%, transparent);
|
|
1062
1121
|
border-color: color-mix(in oklab, var(--color-positive) 28%, transparent);
|
|
1063
1122
|
color: color-mix(in oklab, var(--color-positive) 80%, var(--color-ink));
|
|
1064
1123
|
}
|
|
1065
|
-
.rk-chip.tone-warning[data-v-
|
|
1124
|
+
.rk-chip.tone-warning[data-v-c94a820d] {
|
|
1066
1125
|
background: color-mix(in oklab, var(--color-warning) 16%, transparent);
|
|
1067
1126
|
border-color: color-mix(in oklab, var(--color-warning) 30%, transparent);
|
|
1068
1127
|
color: color-mix(in oklab, var(--color-warning) 75%, var(--color-ink));
|
|
1069
1128
|
}
|
|
1070
|
-
.rk-chip.tone-danger[data-v-
|
|
1129
|
+
.rk-chip.tone-danger[data-v-c94a820d] {
|
|
1071
1130
|
background: color-mix(in oklab, var(--color-negative) 12%, transparent);
|
|
1072
1131
|
border-color: color-mix(in oklab, var(--color-negative) 26%, transparent);
|
|
1073
1132
|
color: var(--color-negative);
|
|
1074
1133
|
}
|
|
1075
|
-
.rk-chip-remove[data-v-
|
|
1134
|
+
.rk-chip-remove[data-v-c94a820d] {
|
|
1076
1135
|
display: grid;
|
|
1077
1136
|
width: 1.125rem;
|
|
1078
1137
|
height: 1.125rem;
|
|
@@ -1083,7 +1142,7 @@ to {
|
|
|
1083
1142
|
opacity: 0.7;
|
|
1084
1143
|
transition: opacity var(--duration-fast) var(--ease-standard);
|
|
1085
1144
|
}
|
|
1086
|
-
.rk-chip-remove[data-v-
|
|
1145
|
+
.rk-chip-remove[data-v-c94a820d]:hover {
|
|
1087
1146
|
opacity: 1;
|
|
1088
1147
|
background: color-mix(in oklab, currentColor 15%, transparent);
|
|
1089
1148
|
}
|
|
@@ -1117,57 +1176,6 @@ to {
|
|
|
1117
1176
|
color: var(--color-ink-soft);
|
|
1118
1177
|
}
|
|
1119
1178
|
|
|
1120
|
-
.rk-listbox[data-v-95e230a5] {
|
|
1121
|
-
overflow-y: auto;
|
|
1122
|
-
border-radius: var(--radius-card);
|
|
1123
|
-
padding: 0.25rem;
|
|
1124
|
-
}
|
|
1125
|
-
.rk-listbox[data-v-95e230a5]:focus-visible {
|
|
1126
|
-
outline: 2px solid var(--color-primary);
|
|
1127
|
-
outline-offset: 1px;
|
|
1128
|
-
}
|
|
1129
|
-
.rk-listbox-option[data-v-95e230a5] {
|
|
1130
|
-
display: flex;
|
|
1131
|
-
cursor: pointer;
|
|
1132
|
-
align-items: center;
|
|
1133
|
-
gap: 0.625rem;
|
|
1134
|
-
border-radius: var(--radius-cell);
|
|
1135
|
-
padding: 0.5rem 0.625rem;
|
|
1136
|
-
font-size: 0.875rem;
|
|
1137
|
-
color: var(--color-ink);
|
|
1138
|
-
}
|
|
1139
|
-
.rk-listbox-option.is-active[data-v-95e230a5] {
|
|
1140
|
-
background: var(--color-muted);
|
|
1141
|
-
}
|
|
1142
|
-
.rk-listbox-option.is-chosen[data-v-95e230a5] {
|
|
1143
|
-
color: var(--color-primary);
|
|
1144
|
-
font-weight: 500;
|
|
1145
|
-
}
|
|
1146
|
-
|
|
1147
|
-
/* Both at once: the current option and the chosen one are different things,
|
|
1148
|
-
and a list that shows only one of them loses the reader's place. */
|
|
1149
|
-
.rk-listbox-option.is-chosen.is-active[data-v-95e230a5] {
|
|
1150
|
-
background: color-mix(in oklab, var(--color-primary) 12%, transparent);
|
|
1151
|
-
}
|
|
1152
|
-
.rk-listbox-option.is-disabled[data-v-95e230a5] {
|
|
1153
|
-
cursor: not-allowed;
|
|
1154
|
-
opacity: 0.45;
|
|
1155
|
-
}
|
|
1156
|
-
.rk-listbox-label[data-v-95e230a5] {
|
|
1157
|
-
display: block;
|
|
1158
|
-
overflow: hidden;
|
|
1159
|
-
text-overflow: ellipsis;
|
|
1160
|
-
white-space: nowrap;
|
|
1161
|
-
}
|
|
1162
|
-
.rk-listbox-description[data-v-95e230a5] {
|
|
1163
|
-
display: block;
|
|
1164
|
-
font-size: 0.75rem;
|
|
1165
|
-
color: var(--color-ink-soft);
|
|
1166
|
-
}
|
|
1167
|
-
.rk-listbox-empty[data-v-95e230a5] {
|
|
1168
|
-
padding: 1rem;
|
|
1169
|
-
}
|
|
1170
|
-
|
|
1171
1179
|
.rk-link[data-v-88581007] {
|
|
1172
1180
|
display: inline;
|
|
1173
1181
|
border-radius: var(--radius-cell);
|
|
@@ -1414,7 +1422,7 @@ to {
|
|
|
1414
1422
|
color: var(--color-ink);
|
|
1415
1423
|
}
|
|
1416
1424
|
|
|
1417
|
-
.rk-tags[data-v-
|
|
1425
|
+
.rk-tags[data-v-1fd08921] {
|
|
1418
1426
|
display: flex;
|
|
1419
1427
|
min-height: 2.75rem;
|
|
1420
1428
|
cursor: text;
|
|
@@ -1427,18 +1435,18 @@ to {
|
|
|
1427
1435
|
|
|
1428
1436
|
/* `:has(input:focus-visible)` rather than `:focus-within`: the ring belongs
|
|
1429
1437
|
to the field, not to the chips' remove buttons, which carry their own. */
|
|
1430
|
-
.rk-tags[data-v-
|
|
1438
|
+
.rk-tags[data-v-1fd08921]:has(.rk-tags-field:focus-visible) {
|
|
1431
1439
|
outline: 2px solid var(--color-primary);
|
|
1432
1440
|
outline-offset: 1px;
|
|
1433
1441
|
}
|
|
1434
|
-
.rk-tags.is-invalid[data-v-
|
|
1442
|
+
.rk-tags.is-invalid[data-v-1fd08921] {
|
|
1435
1443
|
--surface-border-color: var(--color-negative);
|
|
1436
1444
|
}
|
|
1437
|
-
.rk-tags.is-disabled[data-v-
|
|
1445
|
+
.rk-tags.is-disabled[data-v-1fd08921] {
|
|
1438
1446
|
cursor: not-allowed;
|
|
1439
1447
|
opacity: 0.5;
|
|
1440
1448
|
}
|
|
1441
|
-
.rk-tags-field[data-v-
|
|
1449
|
+
.rk-tags-field[data-v-1fd08921] {
|
|
1442
1450
|
min-width: 6rem;
|
|
1443
1451
|
flex: 1;
|
|
1444
1452
|
background: transparent;
|
|
@@ -1449,11 +1457,11 @@ to {
|
|
|
1449
1457
|
outline: none;
|
|
1450
1458
|
}
|
|
1451
1459
|
|
|
1452
|
-
.rk-popover[data-v-
|
|
1460
|
+
.rk-popover[data-v-1371bff2] {
|
|
1453
1461
|
position: relative;
|
|
1454
1462
|
display: inline-flex;
|
|
1455
1463
|
}
|
|
1456
|
-
.rk-popover-panel[data-v-
|
|
1464
|
+
.rk-popover-panel[data-v-1371bff2] {
|
|
1457
1465
|
position: absolute;
|
|
1458
1466
|
z-index: 50;
|
|
1459
1467
|
min-width: 14rem;
|
|
@@ -1462,39 +1470,39 @@ to {
|
|
|
1462
1470
|
padding: 0.75rem;
|
|
1463
1471
|
translate: var(--rk-popover-shift, 0) 0;
|
|
1464
1472
|
}
|
|
1465
|
-
.rk-popover-panel[data-v-
|
|
1473
|
+
.rk-popover-panel[data-v-1371bff2]:focus-visible {
|
|
1466
1474
|
outline: 2px solid var(--color-primary);
|
|
1467
1475
|
outline-offset: 2px;
|
|
1468
1476
|
}
|
|
1469
|
-
.rk-popover-panel.is-bottom[data-v-
|
|
1477
|
+
.rk-popover-panel.is-bottom[data-v-1371bff2] {
|
|
1470
1478
|
top: calc(100% + 0.5rem);
|
|
1471
1479
|
}
|
|
1472
|
-
.rk-popover-panel.is-top[data-v-
|
|
1480
|
+
.rk-popover-panel.is-top[data-v-1371bff2] {
|
|
1473
1481
|
bottom: calc(100% + 0.5rem);
|
|
1474
1482
|
}
|
|
1475
|
-
.rk-popover-panel.is-start[data-v-
|
|
1483
|
+
.rk-popover-panel.is-start[data-v-1371bff2] {
|
|
1476
1484
|
left: 0;
|
|
1477
1485
|
}
|
|
1478
|
-
.rk-popover-panel.is-end[data-v-
|
|
1486
|
+
.rk-popover-panel.is-end[data-v-1371bff2] {
|
|
1479
1487
|
right: 0;
|
|
1480
1488
|
}
|
|
1481
|
-
.rk-popover-panel.is-center[data-v-
|
|
1489
|
+
.rk-popover-panel.is-center[data-v-1371bff2] {
|
|
1482
1490
|
left: 50%;
|
|
1483
1491
|
translate: calc(-50% + var(--rk-popover-shift, 0px)) 0;
|
|
1484
1492
|
}
|
|
1485
|
-
.rk-popover-enter-active[data-v-
|
|
1486
|
-
.rk-popover-leave-active[data-v-
|
|
1493
|
+
.rk-popover-enter-active[data-v-1371bff2],
|
|
1494
|
+
.rk-popover-leave-active[data-v-1371bff2] {
|
|
1487
1495
|
transition:
|
|
1488
1496
|
opacity var(--duration-fast) var(--ease-standard),
|
|
1489
1497
|
transform var(--duration-fast) var(--ease-standard);
|
|
1490
1498
|
}
|
|
1491
|
-
.rk-popover-enter-from[data-v-
|
|
1492
|
-
.rk-popover-leave-to[data-v-
|
|
1499
|
+
.rk-popover-enter-from[data-v-1371bff2],
|
|
1500
|
+
.rk-popover-leave-to[data-v-1371bff2] {
|
|
1493
1501
|
opacity: 0;
|
|
1494
1502
|
transform: translateY(-4px) scale(0.98);
|
|
1495
1503
|
}
|
|
1496
|
-
.rk-popover-panel.is-top.rk-popover-enter-from[data-v-
|
|
1497
|
-
.rk-popover-panel.is-top.rk-popover-leave-to[data-v-
|
|
1504
|
+
.rk-popover-panel.is-top.rk-popover-enter-from[data-v-1371bff2],
|
|
1505
|
+
.rk-popover-panel.is-top.rk-popover-leave-to[data-v-1371bff2] {
|
|
1498
1506
|
transform: translateY(4px) scale(0.98);
|
|
1499
1507
|
}
|
|
1500
1508
|
|
|
@@ -2670,6 +2678,161 @@ to {
|
|
|
2670
2678
|
color: var(--color-ink-soft);
|
|
2671
2679
|
}
|
|
2672
2680
|
|
|
2681
|
+
.rk-split[data-v-159a4f08] {
|
|
2682
|
+
display: flex;
|
|
2683
|
+
width: 100%;
|
|
2684
|
+
min-height: 0;
|
|
2685
|
+
}
|
|
2686
|
+
.rk-split.is-vertical[data-v-159a4f08] {
|
|
2687
|
+
flex-direction: column;
|
|
2688
|
+
}
|
|
2689
|
+
.rk-split.is-dragging[data-v-159a4f08] {
|
|
2690
|
+
user-select: none;
|
|
2691
|
+
}
|
|
2692
|
+
.rk-split-pane[data-v-159a4f08] {
|
|
2693
|
+
min-width: 0;
|
|
2694
|
+
min-height: 0;
|
|
2695
|
+
overflow: auto;
|
|
2696
|
+
}
|
|
2697
|
+
.is-horizontal .rk-split-pane.is-start[data-v-159a4f08] {
|
|
2698
|
+
width: var(--rk-split);
|
|
2699
|
+
}
|
|
2700
|
+
.is-vertical .rk-split-pane.is-start[data-v-159a4f08] {
|
|
2701
|
+
height: var(--rk-split);
|
|
2702
|
+
}
|
|
2703
|
+
.rk-split-pane.is-end[data-v-159a4f08] {
|
|
2704
|
+
flex: 1;
|
|
2705
|
+
}
|
|
2706
|
+
|
|
2707
|
+
/* The handle is wider than the line it draws: a 1px target is a target
|
|
2708
|
+
nobody hits. */
|
|
2709
|
+
.rk-split-handle[data-v-159a4f08] {
|
|
2710
|
+
display: grid;
|
|
2711
|
+
flex-shrink: 0;
|
|
2712
|
+
place-items: center;
|
|
2713
|
+
background: transparent;
|
|
2714
|
+
touch-action: none;
|
|
2715
|
+
}
|
|
2716
|
+
.is-horizontal .rk-split-handle[data-v-159a4f08] {
|
|
2717
|
+
width: 0.75rem;
|
|
2718
|
+
cursor: col-resize;
|
|
2719
|
+
}
|
|
2720
|
+
.is-vertical .rk-split-handle[data-v-159a4f08] {
|
|
2721
|
+
height: 0.75rem;
|
|
2722
|
+
cursor: row-resize;
|
|
2723
|
+
}
|
|
2724
|
+
.rk-split-grip[data-v-159a4f08] {
|
|
2725
|
+
display: block;
|
|
2726
|
+
border-radius: 9999px;
|
|
2727
|
+
background: var(--color-hair);
|
|
2728
|
+
transition: background-color var(--duration-fast) var(--ease-standard);
|
|
2729
|
+
}
|
|
2730
|
+
.is-horizontal .rk-split-grip[data-v-159a4f08] {
|
|
2731
|
+
width: 2px;
|
|
2732
|
+
height: 100%;
|
|
2733
|
+
}
|
|
2734
|
+
.is-vertical .rk-split-grip[data-v-159a4f08] {
|
|
2735
|
+
width: 100%;
|
|
2736
|
+
height: 2px;
|
|
2737
|
+
}
|
|
2738
|
+
.rk-split-handle:hover .rk-split-grip[data-v-159a4f08],
|
|
2739
|
+
.rk-split-handle:focus-visible .rk-split-grip[data-v-159a4f08],
|
|
2740
|
+
.is-dragging .rk-split-grip[data-v-159a4f08] {
|
|
2741
|
+
background: var(--color-primary);
|
|
2742
|
+
}
|
|
2743
|
+
|
|
2744
|
+
.rk-toolbar[data-v-a65164b7] {
|
|
2745
|
+
display: flex;
|
|
2746
|
+
align-items: center;
|
|
2747
|
+
gap: 0.375rem;
|
|
2748
|
+
}
|
|
2749
|
+
.rk-toolbar.is-vertical[data-v-a65164b7] {
|
|
2750
|
+
flex-direction: column;
|
|
2751
|
+
align-items: stretch;
|
|
2752
|
+
}
|
|
2753
|
+
|
|
2754
|
+
.rk-tree[data-v-1ba675c5] {
|
|
2755
|
+
display: flex;
|
|
2756
|
+
flex-direction: column;
|
|
2757
|
+
gap: 1px;
|
|
2758
|
+
border-radius: var(--radius-card);
|
|
2759
|
+
}
|
|
2760
|
+
.rk-tree[data-v-1ba675c5]:focus-visible {
|
|
2761
|
+
outline: 2px solid var(--color-primary);
|
|
2762
|
+
outline-offset: 2px;
|
|
2763
|
+
}
|
|
2764
|
+
.rk-tree-row[data-v-1ba675c5] {
|
|
2765
|
+
display: flex;
|
|
2766
|
+
cursor: pointer;
|
|
2767
|
+
align-items: center;
|
|
2768
|
+
gap: 0.375rem;
|
|
2769
|
+
border-radius: var(--radius-cell);
|
|
2770
|
+
/* Indented by level, so a branch reads as being inside its parent. */
|
|
2771
|
+
padding: 0.3125rem 0.5rem 0.3125rem calc(0.5rem + (var(--rk-tree-level) - 1) * 1rem);
|
|
2772
|
+
font-size: 0.875rem;
|
|
2773
|
+
color: var(--color-ink);
|
|
2774
|
+
}
|
|
2775
|
+
.rk-tree-row.is-active[data-v-1ba675c5] {
|
|
2776
|
+
background: var(--color-muted);
|
|
2777
|
+
}
|
|
2778
|
+
.rk-tree-row.is-chosen[data-v-1ba675c5] {
|
|
2779
|
+
color: var(--color-primary);
|
|
2780
|
+
font-weight: 500;
|
|
2781
|
+
}
|
|
2782
|
+
.rk-tree-row.is-chosen.is-active[data-v-1ba675c5] {
|
|
2783
|
+
background: color-mix(in oklab, var(--color-primary) 12%, transparent);
|
|
2784
|
+
}
|
|
2785
|
+
.rk-tree-row.is-disabled[data-v-1ba675c5] {
|
|
2786
|
+
cursor: not-allowed;
|
|
2787
|
+
opacity: 0.45;
|
|
2788
|
+
}
|
|
2789
|
+
.rk-tree-twist[data-v-1ba675c5],
|
|
2790
|
+
.rk-tree-twist-space[data-v-1ba675c5] {
|
|
2791
|
+
width: 1rem;
|
|
2792
|
+
height: 1rem;
|
|
2793
|
+
flex-shrink: 0;
|
|
2794
|
+
}
|
|
2795
|
+
.rk-tree-twist[data-v-1ba675c5] {
|
|
2796
|
+
color: var(--color-ink-soft);
|
|
2797
|
+
transition: rotate var(--duration-fast) var(--ease-standard);
|
|
2798
|
+
}
|
|
2799
|
+
.rk-tree-twist.is-open[data-v-1ba675c5] {
|
|
2800
|
+
rotate: 90deg;
|
|
2801
|
+
}
|
|
2802
|
+
|
|
2803
|
+
.rk-transfer[data-v-1d75b0da] {
|
|
2804
|
+
display: grid;
|
|
2805
|
+
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
|
|
2806
|
+
align-items: center;
|
|
2807
|
+
gap: 0.75rem;
|
|
2808
|
+
}
|
|
2809
|
+
.rk-transfer-side[data-v-1d75b0da] {
|
|
2810
|
+
min-width: 0;
|
|
2811
|
+
}
|
|
2812
|
+
.rk-transfer-title[data-v-1d75b0da] {
|
|
2813
|
+
margin-bottom: 0.375rem;
|
|
2814
|
+
font-size: 0.75rem;
|
|
2815
|
+
font-weight: 600;
|
|
2816
|
+
color: var(--color-ink-soft);
|
|
2817
|
+
}
|
|
2818
|
+
.rk-transfer-middle[data-v-1d75b0da] {
|
|
2819
|
+
display: flex;
|
|
2820
|
+
flex-direction: column;
|
|
2821
|
+
gap: 0.5rem;
|
|
2822
|
+
}
|
|
2823
|
+
|
|
2824
|
+
/* On a phone the two lists stack and the buttons turn to face them. */
|
|
2825
|
+
@media (max-width: 40rem) {
|
|
2826
|
+
.rk-transfer[data-v-1d75b0da] {
|
|
2827
|
+
grid-template-columns: minmax(0, 1fr);
|
|
2828
|
+
}
|
|
2829
|
+
.rk-transfer-middle[data-v-1d75b0da] {
|
|
2830
|
+
flex-direction: row;
|
|
2831
|
+
justify-content: center;
|
|
2832
|
+
rotate: 90deg;
|
|
2833
|
+
}
|
|
2834
|
+
}
|
|
2835
|
+
|
|
2673
2836
|
.rk-tabs[data-v-8135ecab] {
|
|
2674
2837
|
display: flex;
|
|
2675
2838
|
align-items: center;
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Two panes and a handle between them — a list beside a preview, an editor
|
|
3
|
+
* beside its output.
|
|
4
|
+
*
|
|
5
|
+
* The handle is a `separator` with a value, which is the part a hand-written
|
|
6
|
+
* one never has: it can be moved with the arrow keys, Home and End send it
|
|
7
|
+
* to its limits, and Enter puts it back where it started. A divider that
|
|
8
|
+
* only answers to a drag is a layout a keyboard cannot change at all.
|
|
9
|
+
*
|
|
10
|
+
* The split is a percentage, so the panes keep their proportions when the
|
|
11
|
+
* window changes rather than one of them swallowing the other.
|
|
12
|
+
*/
|
|
13
|
+
type __VLS_Props = {
|
|
14
|
+
/** The handle's accessible name, e.g. "Resize the list". */
|
|
15
|
+
label: string;
|
|
16
|
+
/** `horizontal`: side by side, the handle moves left and right. */
|
|
17
|
+
orientation?: 'horizontal' | 'vertical' | undefined;
|
|
18
|
+
/** How small the first pane may get, as a percentage. */
|
|
19
|
+
min?: number | undefined;
|
|
20
|
+
max?: number | undefined;
|
|
21
|
+
/** How far one arrow press moves it, in percentage points. */
|
|
22
|
+
step?: number | undefined;
|
|
23
|
+
};
|
|
24
|
+
type __VLS_Slots = {
|
|
25
|
+
/** The first pane: the list, the tree, the sidebar. */
|
|
26
|
+
start: () => unknown;
|
|
27
|
+
/** The second pane. */
|
|
28
|
+
end: () => unknown;
|
|
29
|
+
};
|
|
30
|
+
type __VLS_ModelProps = {
|
|
31
|
+
/** Where the split sits, as a percentage of the whole. `v-model`. */
|
|
32
|
+
modelValue?: number;
|
|
33
|
+
};
|
|
34
|
+
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
35
|
+
declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
36
|
+
"update:modelValue": (value: number) => any;
|
|
37
|
+
}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
38
|
+
"onUpdate:modelValue"?: (value: number) => any;
|
|
39
|
+
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
40
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
41
|
+
declare const _default: typeof __VLS_export;
|
|
42
|
+
export default _default;
|
|
43
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
44
|
+
new (): {
|
|
45
|
+
$slots: S;
|
|
46
|
+
};
|
|
47
|
+
};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A row of controls that belong together: a formatting bar, a row of view
|
|
3
|
+
* switches, the actions over a table.
|
|
4
|
+
*
|
|
5
|
+
* One Tab stop for the lot. The arrows move between the controls inside it,
|
|
6
|
+
* Home and End jump to the ends — the toolbar pattern, and the reason to
|
|
7
|
+
* use it is arithmetic: twelve buttons in the tab order cost twelve presses
|
|
8
|
+
* to get past on the way to the thing under them.
|
|
9
|
+
*
|
|
10
|
+
* The controls are yours: anything focusable inside is picked up, so a
|
|
11
|
+
* toolbar can mix the kit's buttons, a `ToggleGroup` and a separator
|
|
12
|
+
* without declaring any of them as data.
|
|
13
|
+
*/
|
|
14
|
+
type __VLS_Props = {
|
|
15
|
+
/** The toolbar's accessible name, e.g. "Formatting". */
|
|
16
|
+
label: string;
|
|
17
|
+
orientation?: 'horizontal' | 'vertical' | undefined;
|
|
18
|
+
};
|
|
19
|
+
type __VLS_Slots = {
|
|
20
|
+
default: () => unknown;
|
|
21
|
+
};
|
|
22
|
+
declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
23
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
24
|
+
declare const _default: typeof __VLS_export;
|
|
25
|
+
export default _default;
|
|
26
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
27
|
+
new (): {
|
|
28
|
+
$slots: S;
|
|
29
|
+
};
|
|
30
|
+
};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { Component } from 'vue';
|
|
2
|
+
export interface TreeNode<K extends string> {
|
|
3
|
+
key: K;
|
|
4
|
+
/** Already translated. */
|
|
5
|
+
label: string;
|
|
6
|
+
icon?: Component | undefined;
|
|
7
|
+
disabled?: boolean | undefined;
|
|
8
|
+
/** Omitted or empty, it is a leaf. */
|
|
9
|
+
children?: readonly TreeNode<K>[] | undefined;
|
|
10
|
+
}
|
|
11
|
+
declare const __VLS_export: <K extends string, M extends "single" | "multiple" = "single">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
12
|
+
props: import('vue').PublicProps & __VLS_PrettifyLocal<({
|
|
13
|
+
/** The chosen key, or keys in `multiple` mode, with `v-model`. */
|
|
14
|
+
modelValue?: (M extends "multiple" ? K[] : K | undefined) | undefined;
|
|
15
|
+
nodes: readonly TreeNode<K>[];
|
|
16
|
+
/** The tree's accessible name. */
|
|
17
|
+
label: string;
|
|
18
|
+
/** `multiple` lets several be chosen, each with its own tick. */
|
|
19
|
+
mode?: M | undefined;
|
|
20
|
+
} & {
|
|
21
|
+
/** Which branches are open. */
|
|
22
|
+
expanded?: K[];
|
|
23
|
+
}) & {
|
|
24
|
+
"onUpdate:modelValue"?: (value: M extends "multiple" ? K[] : K | undefined) => any;
|
|
25
|
+
"onUpdate:expanded"?: (value: K[]) => any;
|
|
26
|
+
}> & (typeof globalThis extends {
|
|
27
|
+
__VLS_PROPS_FALLBACK: infer P;
|
|
28
|
+
} ? P : {});
|
|
29
|
+
expose: (exposed: {}) => void;
|
|
30
|
+
attrs: any;
|
|
31
|
+
slots: {};
|
|
32
|
+
emit: ((evt: "update:modelValue", value: M extends "multiple" ? K[] : K | undefined) => void) & ((event: "update:expanded", value: K[]) => void);
|
|
33
|
+
}>) => import('vue').VNode & {
|
|
34
|
+
__ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
|
|
35
|
+
};
|
|
36
|
+
declare const _default: typeof __VLS_export;
|
|
37
|
+
export default _default;
|
|
38
|
+
type __VLS_PrettifyLocal<T> = (T extends any ? {
|
|
39
|
+
[K in keyof T]: T[K];
|
|
40
|
+
} : {
|
|
41
|
+
[K in keyof T as K]: T[K];
|
|
42
|
+
}) & {};
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { ListboxOption } from '../components/BaseListbox.vue';
|
|
2
|
+
declare const __VLS_export: <V extends string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
3
|
+
props: import('vue').PublicProps & __VLS_PrettifyLocal<({
|
|
4
|
+
options: readonly ListboxOption<V>[];
|
|
5
|
+
/** Heading over the left list, e.g. "Available". Already translated. */
|
|
6
|
+
availableLabel: string;
|
|
7
|
+
/** Heading over the right list. */
|
|
8
|
+
chosenLabel: string;
|
|
9
|
+
/** The → button's accessible name, e.g. "Add the chosen ones". */
|
|
10
|
+
addLabel: string;
|
|
11
|
+
/** The ← button's accessible name. */
|
|
12
|
+
removeLabel: string;
|
|
13
|
+
height?: string | undefined;
|
|
14
|
+
} & {
|
|
15
|
+
/** What has been moved across, in the order it was moved. `v-model`. */
|
|
16
|
+
modelValue?: V[];
|
|
17
|
+
}) & {
|
|
18
|
+
"onUpdate:modelValue"?: (value: V[]) => any;
|
|
19
|
+
}> & (typeof globalThis extends {
|
|
20
|
+
__VLS_PROPS_FALLBACK: infer P;
|
|
21
|
+
} ? P : {});
|
|
22
|
+
expose: (exposed: {}) => void;
|
|
23
|
+
attrs: any;
|
|
24
|
+
slots: {};
|
|
25
|
+
emit: (event: "update:modelValue", value: V[]) => void;
|
|
26
|
+
}>) => import('vue').VNode & {
|
|
27
|
+
__ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
|
|
28
|
+
};
|
|
29
|
+
declare const _default: typeof __VLS_export;
|
|
30
|
+
export default _default;
|
|
31
|
+
type __VLS_PrettifyLocal<T> = (T extends any ? {
|
|
32
|
+
[K in keyof T]: T[K];
|
|
33
|
+
} : {
|
|
34
|
+
[K in keyof T as K]: T[K];
|
|
35
|
+
}) & {};
|
package/dist/web/index.d.ts
CHANGED
|
@@ -47,6 +47,15 @@ export type { CommandGroup, CommandItem } from './CommandMenu.vue';
|
|
|
47
47
|
*/
|
|
48
48
|
export { default as DataTable } from './DataTable.vue';
|
|
49
49
|
export type { DataColumn, TableSort } from './DataTable.vue';
|
|
50
|
+
/**
|
|
51
|
+
* Two panes and a handle, a tree, a toolbar and a transfer list: the shapes
|
|
52
|
+
* a desk-sized screen is arranged with, and that a phone never shows.
|
|
53
|
+
*/
|
|
54
|
+
export { default as BaseSplitter } from './BaseSplitter.vue';
|
|
55
|
+
export { default as BaseToolbar } from './BaseToolbar.vue';
|
|
56
|
+
export { default as BaseTree } from './BaseTree.vue';
|
|
57
|
+
export type { TreeNode } from './BaseTree.vue';
|
|
58
|
+
export { default as TransferList } from './TransferList.vue';
|
|
50
59
|
export { default as BaseTabs } from './BaseTabs.vue';
|
|
51
60
|
export type { TabPanel } from './BaseTabs.vue';
|
|
52
61
|
export { default as BaseTooltip } from './BaseTooltip.vue';
|