@rcarls/rc-transfer-list 0.4.2 → 0.6.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/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,27 @@
|
|
|
1
1
|
# @rcarls/rc-transfer-list
|
|
2
2
|
|
|
3
|
+
## 0.6.0
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [6683eb9]
|
|
8
|
+
- Updated dependencies [ee7ba6c]
|
|
9
|
+
- Updated dependencies [30eb232]
|
|
10
|
+
- Updated dependencies [57370e4]
|
|
11
|
+
- @rcarls/rc-common@0.6.0
|
|
12
|
+
- @rcarls/rc-toolbar@0.6.0
|
|
13
|
+
- @rcarls/rc-listbox@0.6.0
|
|
14
|
+
|
|
15
|
+
## 0.5.0
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- Updated dependencies [4ae2ef0]
|
|
20
|
+
- Updated dependencies [689340c]
|
|
21
|
+
- @rcarls/rc-common@0.5.0
|
|
22
|
+
- @rcarls/rc-listbox@0.5.0
|
|
23
|
+
- @rcarls/rc-toolbar@0.5.0
|
|
24
|
+
|
|
3
25
|
## 0.4.2
|
|
4
26
|
|
|
5
27
|
### Patch Changes
|
package/README.md
CHANGED
|
@@ -53,30 +53,30 @@ switch layout automatically at viewport breakpoints.
|
|
|
53
53
|
|
|
54
54
|
### Properties
|
|
55
55
|
|
|
56
|
-
| Property
|
|
57
|
-
|
|
58
|
-
| `multiple`
|
|
59
|
-
| `compact`
|
|
60
|
-
| `availableLabel`
|
|
61
|
-
| `selectedLabel`
|
|
62
|
-
| `available`
|
|
63
|
-
| `selected`
|
|
64
|
-
| `defaultSelected` | -
|
|
56
|
+
| Property | Attribute | Type | Default | Description |
|
|
57
|
+
| ----------------- | ----------------- | ------------------------------ | ------------------- | ----------------------------------------------------------------------------- |
|
|
58
|
+
| `multiple` | `multiple` | `boolean` | `false` | Allows multiple highlighted rows in each listbox. |
|
|
59
|
+
| `compact` | `compact` | `boolean` | `false` | Stacks the panels and action toolbar into a compact one-column layout. |
|
|
60
|
+
| `availableLabel` | `available-label` | `string` | `'Available'` | Visible label for the available list. |
|
|
61
|
+
| `selectedLabel` | `selected-label` | `string` | `'Selected'` | Visible label for the selected list. |
|
|
62
|
+
| `available` | - | `ListboxOption[]` | native select state | Gets or replaces unselected options. |
|
|
63
|
+
| `selected` | - | `ListboxOption[]` | native select state | Gets or replaces selected options. |
|
|
64
|
+
| `defaultSelected` | - | `ListboxOption[] \| undefined` | `undefined` | Initial uncontrolled selected options, applied before host `selected` writes. |
|
|
65
65
|
|
|
66
66
|
### Methods
|
|
67
67
|
|
|
68
|
-
| Method
|
|
69
|
-
|
|
70
|
-
| `addSelected()`
|
|
71
|
-
| `addAll()`
|
|
72
|
-
| `removeSelected()`
|
|
73
|
-
| `clearSelected()`
|
|
74
|
-
| `moveSelected(delta)` | Reorders highlighted selected options by `-1` or `1` rows.
|
|
68
|
+
| Method | Description |
|
|
69
|
+
| --------------------- | -------------------------------------------------------------- |
|
|
70
|
+
| `addSelected()` | Moves highlighted available options to the selected list. |
|
|
71
|
+
| `addAll()` | Moves every available option to the selected list. |
|
|
72
|
+
| `removeSelected()` | Moves highlighted selected options back to the available list. |
|
|
73
|
+
| `clearSelected()` | Moves every selected option back to the available list. |
|
|
74
|
+
| `moveSelected(delta)` | Reorders highlighted selected options by `-1` or `1` rows. |
|
|
75
75
|
|
|
76
76
|
### Events
|
|
77
77
|
|
|
78
|
-
| Event
|
|
79
|
-
|
|
78
|
+
| Event | Detail | Description |
|
|
79
|
+
| ------------------------- | ------------------------------- | --------------------------------------------------------------- |
|
|
80
80
|
| `rc-transfer-list-change` | `{ selected: ListboxOption[] }` | Fires after a user action changes the selected/right-hand list. |
|
|
81
81
|
|
|
82
82
|
Host property writes to `available`, `selected`, or `defaultSelected` are silent.
|
|
@@ -86,14 +86,14 @@ Host property writes to `available`, `selected`, or `defaultSelected` are silent
|
|
|
86
86
|
The embedded `rc-listbox` controls provide list navigation and selection. The
|
|
87
87
|
transfer list also supports these shortcuts when focus is inside the component:
|
|
88
88
|
|
|
89
|
-
| Shortcut
|
|
90
|
-
|
|
91
|
-
| `Alt+ArrowRight` | Add highlighted available options.
|
|
92
|
-
| `Alt+ArrowLeft`
|
|
93
|
-
| `Alt+ArrowUp`
|
|
94
|
-
| `Alt+ArrowDown`
|
|
95
|
-
| `Enter`
|
|
96
|
-
| `Delete`
|
|
89
|
+
| Shortcut | Action |
|
|
90
|
+
| ---------------- | ----------------------------------------------------------- |
|
|
91
|
+
| `Alt+ArrowRight` | Add highlighted available options. |
|
|
92
|
+
| `Alt+ArrowLeft` | Remove highlighted selected options. |
|
|
93
|
+
| `Alt+ArrowUp` | Move highlighted selected options up. |
|
|
94
|
+
| `Alt+ArrowDown` | Move highlighted selected options down. |
|
|
95
|
+
| `Enter` | Add the highlighted available option in single-select mode. |
|
|
96
|
+
| `Delete` | Remove highlighted selected options. |
|
|
97
97
|
|
|
98
98
|
## Styling Hooks
|
|
99
99
|
|
|
@@ -102,39 +102,39 @@ Panels expose `data-empty` when their backing list has no options and
|
|
|
102
102
|
exposes `data-can-move-up` and `data-can-move-down` when the selected panel has
|
|
103
103
|
highlighted rows that can be reordered in that direction.
|
|
104
104
|
|
|
105
|
-
| CSS custom property
|
|
106
|
-
|
|
107
|
-
| `--rc-transfer-list-gap`
|
|
108
|
-
| `--rc-transfer-list-panel-gap`
|
|
109
|
-
| `--rc-transfer-list-listbox-min-block-size` | `10rem`
|
|
110
|
-
| `--rc-transfer-list-listbox-border`
|
|
111
|
-
| `--rc-transfer-list-listbox-bg`
|
|
112
|
-
| `--rc-transfer-list-listbox-color`
|
|
113
|
-
| `--rc-transfer-list-option-gap`
|
|
114
|
-
| `--rc-transfer-list-option-padding-block`
|
|
115
|
-
| `--rc-transfer-list-option-padding-inline`
|
|
116
|
-
| `--rc-transfer-list-option-selected-bg`
|
|
117
|
-
| `--rc-transfer-list-option-selected-color`
|
|
118
|
-
| `--rc-transfer-list-option-hover-bg`
|
|
119
|
-
| `--rc-transfer-list-option-hover-color`
|
|
120
|
-
|
|
121
|
-
| Part
|
|
122
|
-
|
|
123
|
-
| `root`
|
|
124
|
-
| `panel`
|
|
125
|
-
| `available-panel`
|
|
126
|
-
| `selected-panel`
|
|
127
|
-
| `label`
|
|
128
|
-
| `available-label`
|
|
129
|
-
| `selected-label`
|
|
130
|
-
| `listbox`
|
|
131
|
-
| `available-listbox` | The available/left `rc-listbox`.
|
|
132
|
-
| `selected-listbox`
|
|
133
|
-
| `actions`
|
|
134
|
-
| `button`
|
|
135
|
-
| `add-button`
|
|
136
|
-
| `add-all-button`
|
|
137
|
-
| `remove-button`
|
|
138
|
-
| `clear-button`
|
|
139
|
-
| `move-up-button`
|
|
140
|
-
| `move-down-button`
|
|
105
|
+
| CSS custom property | Default | Description |
|
|
106
|
+
| ------------------------------------------- | ----------------------------------------------- | ------------------------------------------ |
|
|
107
|
+
| `--rc-transfer-list-gap` | `var(--rc-control-gap, 0.75rem)` | Gap between panels and the action toolbar. |
|
|
108
|
+
| `--rc-transfer-list-panel-gap` | `var(--rc-control-gap, 0.35rem)` | Gap between a panel label and its listbox. |
|
|
109
|
+
| `--rc-transfer-list-listbox-min-block-size` | `10rem` | Minimum block size for each listbox. |
|
|
110
|
+
| `--rc-transfer-list-listbox-border` | `var(--rc-border, 1px solid ButtonBorder)` | Border around each listbox. |
|
|
111
|
+
| `--rc-transfer-list-listbox-bg` | `var(--rc-surface, Canvas)` | Background of each listbox. |
|
|
112
|
+
| `--rc-transfer-list-listbox-color` | `var(--rc-field-text, FieldText)` | Text color of each listbox. |
|
|
113
|
+
| `--rc-transfer-list-option-gap` | `var(--rc-item-gap, 0.4em)` | Gap between option adornments and labels. |
|
|
114
|
+
| `--rc-transfer-list-option-padding-block` | `var(--rc-item-padding-block, 0.3em)` | Block padding for option rows. |
|
|
115
|
+
| `--rc-transfer-list-option-padding-inline` | `var(--rc-item-padding-inline, 0.75em)` | Inline padding for option rows. |
|
|
116
|
+
| `--rc-transfer-list-option-selected-bg` | `var(--rc-highlight, Highlight)` | Selected option background. |
|
|
117
|
+
| `--rc-transfer-list-option-selected-color` | `var(--rc-highlight-text, HighlightText)` | Selected option foreground. |
|
|
118
|
+
| `--rc-transfer-list-option-hover-bg` | `var(--rc-transfer-list-option-selected-bg)` | Hovered/active option background. |
|
|
119
|
+
| `--rc-transfer-list-option-hover-color` | `var(--rc-transfer-list-option-selected-color)` | Hovered/active option foreground. |
|
|
120
|
+
|
|
121
|
+
| Part | Description |
|
|
122
|
+
| ------------------- | -------------------------------------------------------------- |
|
|
123
|
+
| `root` | Root layout wrapper. |
|
|
124
|
+
| `panel` | Shared list panel surface. |
|
|
125
|
+
| `available-panel` | Available/left panel. |
|
|
126
|
+
| `selected-panel` | Selected/right panel. |
|
|
127
|
+
| `label` | Shared panel label surface. |
|
|
128
|
+
| `available-label` | Label for the available panel. |
|
|
129
|
+
| `selected-label` | Label for the selected panel. |
|
|
130
|
+
| `listbox` | Shared listbox surface. |
|
|
131
|
+
| `available-listbox` | The available/left `rc-listbox`. |
|
|
132
|
+
| `selected-listbox` | The selected/right `rc-listbox`. |
|
|
133
|
+
| `actions` | Transfer action toolbar. |
|
|
134
|
+
| `button` | Shared action button surface. |
|
|
135
|
+
| `add-button` | Moves highlighted available options to the selected list. |
|
|
136
|
+
| `add-all-button` | Moves every available option to the selected list. |
|
|
137
|
+
| `remove-button` | Moves highlighted selected options back to the available list. |
|
|
138
|
+
| `clear-button` | Moves every selected option back to the available list. |
|
|
139
|
+
| `move-up-button` | Moves highlighted selected options up. |
|
|
140
|
+
| `move-down-button` | Moves highlighted selected options down. |
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"publishConfig": {
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
|
-
"version": "0.
|
|
6
|
+
"version": "0.6.0",
|
|
7
7
|
"description": "Transfer list that enhances a native <select multiple> into available and selected panes.",
|
|
8
8
|
"repository": {
|
|
9
9
|
"type": "git",
|
|
@@ -45,9 +45,9 @@
|
|
|
45
45
|
"test:browser:firefox": "vitest --run --project=firefox"
|
|
46
46
|
},
|
|
47
47
|
"dependencies": {
|
|
48
|
-
"@rcarls/rc-common": "0.
|
|
49
|
-
"@rcarls/rc-listbox": "0.
|
|
50
|
-
"@rcarls/rc-toolbar": "0.
|
|
48
|
+
"@rcarls/rc-common": "0.6.0",
|
|
49
|
+
"@rcarls/rc-listbox": "0.6.0",
|
|
50
|
+
"@rcarls/rc-toolbar": "0.6.0"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
53
|
"@custom-elements-manifest/analyzer": "0.11.0",
|
|
File without changes
|