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/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-e9026659] {
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.is-button[data-v-e9026659] {
1034
- cursor: pointer;
1035
- transition:
1036
- background-color var(--duration-fast) var(--ease-standard),
1037
- color var(--duration-fast) var(--ease-standard);
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-e9026659]:focus-visible {
1040
- outline: 2px solid var(--color-primary);
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-e9026659] {
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-e9026659]:disabled {
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-e9026659] {
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-e9026659] {
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-e9026659] {
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-e9026659] {
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-e9026659] {
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-e9026659]:hover {
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-b372ae7b] {
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-b372ae7b]:has(.rk-tags-field:focus-visible) {
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-b372ae7b] {
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-b372ae7b] {
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-b372ae7b] {
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-1e2d16d3] {
1460
+ .rk-popover[data-v-1371bff2] {
1453
1461
  position: relative;
1454
1462
  display: inline-flex;
1455
1463
  }
1456
- .rk-popover-panel[data-v-1e2d16d3] {
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-1e2d16d3]:focus-visible {
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-1e2d16d3] {
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-1e2d16d3] {
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-1e2d16d3] {
1483
+ .rk-popover-panel.is-start[data-v-1371bff2] {
1476
1484
  left: 0;
1477
1485
  }
1478
- .rk-popover-panel.is-end[data-v-1e2d16d3] {
1486
+ .rk-popover-panel.is-end[data-v-1371bff2] {
1479
1487
  right: 0;
1480
1488
  }
1481
- .rk-popover-panel.is-center[data-v-1e2d16d3] {
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-1e2d16d3],
1486
- .rk-popover-leave-active[data-v-1e2d16d3] {
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-1e2d16d3],
1492
- .rk-popover-leave-to[data-v-1e2d16d3] {
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-1e2d16d3],
1497
- .rk-popover-panel.is-top.rk-popover-leave-to[data-v-1e2d16d3] {
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
+ }) & {};
@@ -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';