@placeholderco/placeholder-ui 2.7.1 → 2.7.2

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 (4) hide show
  1. package/dist/form/ComboBoxMulti.svelte +20 -4
  2. package/dist/form/RadioGroup.svelte +2 -2
  3. package/dist/models/ComboBoxItem.d.ts +2 -0
  4. package/package.json +26 -26
package/dist/form/ComboBoxMulti.svelte CHANGED
@@ -38,24 +38,33 @@
38
38
 
39
39
  $effect(() => {
40
40
  if (open && flattenedOptions.length > 0) {
41
- selectedIndex = 0;
41
+ selectedIndex = flattenedOptions.findIndex((x) => !x.disabled);
42
42
  }
43
43
  });
44
44
 
45
45
  function performSelection(item: ComboBoxItem) {
46
+ if (item.disabled) return;
46
47
  onSelection(item);
47
48
  }
48
49
 
50
+ /** Next enabled index in the given direction, or the current index if there is none */
51
+ function nextEnabledIndex(step: 1 | -1) {
52
+ for (let i = selectedIndex + step; i >= 0 && i < flattenedOptions.length; i += step) {
53
+ if (!flattenedOptions[i].disabled) return i;
54
+ }
55
+ return selectedIndex;
56
+ }
57
+
49
58
  export function handleKeyDown(e: KeyboardEvent) {
50
59
  error = '';
51
60
  if (e.key == 'ArrowUp') {
52
61
  e.preventDefault();
53
62
  selecting = true;
54
- selectedIndex = Math.max(0, selectedIndex - 1);
63
+ selectedIndex = nextEnabledIndex(-1);
55
64
  } else if (e.key == 'ArrowDown') {
56
65
  e.preventDefault();
57
66
  selecting = true;
58
- selectedIndex = Math.min(flattenedOptions.length - 1, selectedIndex + 1);
67
+ selectedIndex = nextEnabledIndex(1);
59
68
  } else if (e.key == 'Enter') {
60
69
  e.preventDefault();
61
70
  if (selectedIndex >= 0 && selectedIndex < flattenedOptions.length) {
@@ -112,6 +121,8 @@
112
121
  class="combobox-item {localClasses.join(' ')} {option.class}"
113
122
  role="option"
114
123
  aria-selected={selectedIndex === globalIndex}
124
+ aria-disabled={option.disabled || undefined}
125
+ disabled={option.disabled}
115
126
  onclick={() => {
116
127
  performSelection(option);
117
128
  selectedIndex = globalIndex;
@@ -184,11 +195,16 @@
184
195
  }
185
196
 
186
197
  .combobox-item.selected,
187
- .combobox-item:hover {
198
+ .combobox-item:hover:not(:disabled) {
188
199
  background-color: var(--border-color);
189
200
  color: rgb(var(--accent-color-rgb));
190
201
  }
191
202
 
203
+ .combobox-item:disabled {
204
+ opacity: 0.5;
205
+ cursor: not-allowed;
206
+ }
207
+
192
208
  .seperator {
193
209
  height: 1px;
194
210
  background-color: var(--border-color);
package/dist/form/RadioGroup.svelte CHANGED
@@ -55,7 +55,7 @@
55
55
  const resolvedName = $derived((name || label || autoName).replace(/[^a-zA-Z0-9_\-:.]/g, '_'));
56
56
 
57
57
  function handleChange(option: ComboBoxItem) {
58
- if (option.value === value) return;
58
+ if (option.value === value || option.disabled) return;
59
59
 
60
60
  if (!controlled) {
61
61
  value = option.value;
@@ -79,7 +79,7 @@
79
79
  id={resolvedName + i}
80
80
  name={resolvedName}
81
81
  label={option.label}
82
- {disabled}
82
+ disabled={disabled || option.disabled}
83
83
  checked={option.value === value}
84
84
  controlled={true}
85
85
  onchange={() => handleChange(option)}
package/dist/models/ComboBoxItem.d.ts CHANGED
@@ -17,6 +17,8 @@ export interface ComboBoxItem {
17
17
  groupName?: string;
18
18
  imageSrc?: string;
19
19
  description?: string;
20
+ /** Shows the option but prevents it from being selected */
21
+ disabled?: boolean;
20
22
  /** Marks a synthetic "add new value" suggestion (see Autocomplete) */
21
23
  isAddNew?: boolean;
22
24
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@placeholderco/placeholder-ui",
3
- "version": "2.7.1",
3
+ "version": "2.7.2",
4
4
  "description": "A modern, customizable Svelte 5 UI component library with comprehensive theming support. Re-brand it with a single config object.",
5
5
  "license": "MIT",
6
6
  "author": "Placeholderco",
@@ -55,17 +55,17 @@
55
55
  "@sveltejs/adapter-static": "^3.0.10",
56
56
  "@sveltejs/kit": "^2.70.3",
57
57
  "@sveltejs/package": "^2.5.8",
58
- "@sveltejs/vite-plugin-svelte": "^7.3.0",
59
- "@types/node": "^26.6.2",
58
+ "@sveltejs/vite-plugin-svelte": "^7.3.1",
59
+ "@types/node": "^26.6.3",
60
60
  "globals": "^17.12.0",
61
- "prettier": "^3.9.8",
61
+ "prettier": "^3.9.9",
62
62
  "prettier-plugin-svelte": "^4.1.1",
63
63
  "publint": "^0.3.24",
64
64
  "rimraf": "^6.1.3",
65
65
  "svelte": "^5.57.1",
66
66
  "svelte-check": "^4.7.6",
67
67
  "typescript": "^6.0.3",
68
- "vite": "^8.3.0"
68
+ "vite": "^8.3.1"
69
69
  },
70
70
  "dependencies": {
71
71
  "@codemirror/autocomplete": "^6.20.3",
@@ -80,30 +80,30 @@
80
80
  "@codemirror/legacy-modes": "^6.5.4",
81
81
  "@codemirror/lint": "^6.9.7",
82
82
  "@codemirror/search": "^6.7.2",
83
- "@codemirror/state": "^6.7.5",
83
+ "@codemirror/state": "^6.7.6",
84
84
  "@codemirror/theme-one-dark": "^6.1.3",
85
- "@codemirror/view": "^6.43.12",
86
- "@lezer/highlight": "^1.2.3",
87
- "@tiptap/core": "^3.31.3",
88
- "@tiptap/extension-bubble-menu": "^3.31.3",
89
- "@tiptap/extension-code-block": "^3.31.3",
90
- "@tiptap/extension-collaboration": "^3.31.3",
91
- "@tiptap/extension-collaboration-caret": "^3.31.3",
92
- "@tiptap/extension-color": "^3.31.3",
93
- "@tiptap/extension-image": "^3.31.3",
94
- "@tiptap/extension-link": "^3.31.3",
95
- "@tiptap/extension-placeholder": "^3.31.3",
96
- "@tiptap/extension-subscript": "^3.31.3",
97
- "@tiptap/extension-superscript": "^3.31.3",
98
- "@tiptap/extension-table": "^3.31.3",
99
- "@tiptap/extension-text-align": "^3.31.3",
100
- "@tiptap/extension-text-style": "^3.31.3",
101
- "@tiptap/extension-underline": "^3.31.3",
102
- "@tiptap/pm": "^3.31.3",
103
- "@tiptap/starter-kit": "^3.31.3",
85
+ "@codemirror/view": "^6.43.13",
86
+ "@lezer/highlight": "^1.2.5",
87
+ "@tiptap/core": "^3.31.4",
88
+ "@tiptap/extension-bubble-menu": "^3.31.4",
89
+ "@tiptap/extension-code-block": "^3.31.4",
90
+ "@tiptap/extension-collaboration": "^3.31.4",
91
+ "@tiptap/extension-collaboration-caret": "^3.31.4",
92
+ "@tiptap/extension-color": "^3.31.4",
93
+ "@tiptap/extension-image": "^3.31.4",
94
+ "@tiptap/extension-link": "^3.31.4",
95
+ "@tiptap/extension-placeholder": "^3.31.4",
96
+ "@tiptap/extension-subscript": "^3.31.4",
97
+ "@tiptap/extension-superscript": "^3.31.4",
98
+ "@tiptap/extension-table": "^3.31.4",
99
+ "@tiptap/extension-text-align": "^3.31.4",
100
+ "@tiptap/extension-text-style": "^3.31.4",
101
+ "@tiptap/extension-underline": "^3.31.4",
102
+ "@tiptap/pm": "^3.31.4",
103
+ "@tiptap/starter-kit": "^3.31.4",
104
104
  "dayjs": "^1.11.23",
105
105
  "svelte-sonner": "^1.2.1",
106
- "yjs": "^13.6.32"
106
+ "yjs": "^13.6.33"
107
107
  },
108
108
  "publishConfig": {
109
109
  "access": "public"