@seedgrid/fe-components 2026.11.2 → 2026.11.3
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/ai/seedgrid-components.manifest.json +323 -65
- package/dist/buttons/SgButton.d.ts +6 -2
- package/dist/buttons/SgButton.d.ts.map +1 -1
- package/dist/buttons/SgButton.js +2 -2
- package/dist/buttons/SgButton.meta.js +3 -3
- package/dist/buttons/SgFloatActionButton.d.ts +2 -2
- package/dist/buttons/SgFloatActionButton.d.ts.map +1 -1
- package/dist/buttons/SgFloatActionButton.js +7 -7
- package/dist/buttons/SgFloatActionButton.meta.js +2 -2
- package/dist/buttons/SgSplitButton.d.ts +2 -2
- package/dist/buttons/SgSplitButton.d.ts.map +1 -1
- package/dist/buttons/SgSplitButton.js +4 -4
- package/dist/buttons/SgSplitButton.meta.js +3 -3
- package/dist/commons/SgAvatar.d.ts +2 -2
- package/dist/commons/SgAvatar.d.ts.map +1 -1
- package/dist/commons/SgAvatar.js +3 -3
- package/dist/commons/SgBadge.d.ts +1 -1
- package/dist/commons/SgBadge.d.ts.map +1 -1
- package/dist/commons/SgBadge.js +3 -3
- package/dist/generated/compiledStyles.d.ts +1 -1
- package/dist/generated/compiledStyles.d.ts.map +1 -1
- package/dist/generated/compiledStyles.js +1 -1
- package/dist/i18n/en-US.d.ts.map +1 -1
- package/dist/i18n/en-US.js +26 -0
- package/dist/i18n/es.d.ts.map +1 -1
- package/dist/i18n/es.js +26 -0
- package/dist/i18n/fr.d.ts.map +1 -1
- package/dist/i18n/fr.js +26 -0
- package/dist/i18n/pt-BR.d.ts.map +1 -1
- package/dist/i18n/pt-BR.js +26 -0
- package/dist/i18n/pt-PT.d.ts.map +1 -1
- package/dist/i18n/pt-PT.js +26 -0
- package/dist/index.d.ts +3 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -1
- package/dist/inputs/SgAutocomplete.d.ts +1 -1
- package/dist/inputs/SgAutocomplete.d.ts.map +1 -1
- package/dist/inputs/SgAutocomplete.js +3 -3
- package/dist/inputs/SgCameraCapture.d.ts +1 -1
- package/dist/inputs/SgCameraCapture.d.ts.map +1 -1
- package/dist/inputs/SgCameraCapture.js +4 -4
- package/dist/inputs/SgCameraCapture.meta.js +1 -1
- package/dist/inputs/SgCheckboxGroup.d.ts +2 -2
- package/dist/inputs/SgCheckboxGroup.d.ts.map +1 -1
- package/dist/inputs/SgCheckboxGroup.js +12 -12
- package/dist/inputs/SgCombobox.js +5 -5
- package/dist/inputs/SgDatatable.js +11 -11
- package/dist/inputs/SgDatatable.meta.d.ts.map +1 -1
- package/dist/inputs/SgDatatable.meta.js +4 -1
- package/dist/inputs/SgFileUpload.d.ts +1 -1
- package/dist/inputs/SgFileUpload.d.ts.map +1 -1
- package/dist/inputs/SgFileUpload.js +2 -2
- package/dist/inputs/SgFileUpload.meta.js +1 -1
- package/dist/inputs/SgImageUpload.meta.js +1 -1
- package/dist/inputs/SgInputCurrency.d.ts.map +1 -1
- package/dist/inputs/SgInputCurrency.js +6 -4
- package/dist/inputs/SgInputDate.d.ts.map +1 -1
- package/dist/inputs/SgInputDate.js +3 -4
- package/dist/inputs/SgInputDateTime.d.ts.map +1 -1
- package/dist/inputs/SgInputDateTime.js +11 -0
- package/dist/inputs/SgInputNumber.d.ts.map +1 -1
- package/dist/inputs/SgInputNumber.js +6 -4
- package/dist/inputs/SgInputText.d.ts.map +1 -1
- package/dist/inputs/SgInputText.js +6 -4
- package/dist/inputs/SgInputTextArea.d.ts.map +1 -1
- package/dist/inputs/SgInputTextArea.js +4 -2
- package/dist/inputs/SgMultiSelect.meta.js +1 -1
- package/dist/inputs/SgMultiSelectChips.meta.js +1 -1
- package/dist/inputs/SgMultiSelectDropdown.js +1 -1
- package/dist/inputs/SgOrderList.d.ts +3 -3
- package/dist/inputs/SgOrderList.d.ts.map +1 -1
- package/dist/inputs/SgOrderList.js +13 -13
- package/dist/inputs/SgOrderList.meta.js +1 -1
- package/dist/inputs/SgPeriodSelector.d.ts +1 -1
- package/dist/inputs/SgPeriodSelector.d.ts.map +1 -1
- package/dist/inputs/SgPeriodSelector.js +3 -3
- package/dist/inputs/SgPickList.d.ts +3 -3
- package/dist/inputs/SgPickList.d.ts.map +1 -1
- package/dist/inputs/SgPickList.js +28 -28
- package/dist/inputs/SgPickList.meta.js +1 -1
- package/dist/inputs/SgRadioGroup.d.ts +2 -2
- package/dist/inputs/SgRadioGroup.d.ts.map +1 -1
- package/dist/inputs/SgRadioGroup.js +5 -5
- package/dist/inputs/SgRating.d.ts +1 -1
- package/dist/inputs/SgRating.d.ts.map +1 -1
- package/dist/inputs/SgRating.js +7 -7
- package/dist/inputs/SgRating.meta.js +1 -1
- package/dist/inputs/SgSlider.d.ts +1 -1
- package/dist/inputs/SgSlider.d.ts.map +1 -1
- package/dist/inputs/SgSlider.js +3 -3
- package/dist/inputs/SgSlider.meta.js +1 -1
- package/dist/inputs/SgStepperInput.d.ts +2 -2
- package/dist/inputs/SgStepperInput.d.ts.map +1 -1
- package/dist/inputs/SgStepperInput.js +4 -4
- package/dist/inputs/SgStepperInput.meta.js +1 -1
- package/dist/inputs/SgTextEditor.d.ts +1 -1
- package/dist/inputs/SgTextEditor.d.ts.map +1 -1
- package/dist/inputs/SgTextEditor.js +14 -14
- package/dist/inputs/SgToggleSwitch.meta.js +1 -1
- package/dist/inputs/SgYearPartSelector.d.ts +1 -1
- package/dist/inputs/SgYearPartSelector.d.ts.map +1 -1
- package/dist/inputs/SgYearPartSelector.js +1 -2
- package/dist/inputs/SgYearPartSelector.meta.js +2 -2
- package/dist/inputs/dateTimeLogic.d.ts +7 -1
- package/dist/inputs/dateTimeLogic.d.ts.map +1 -1
- package/dist/inputs/dateTimeLogic.js +17 -4
- package/dist/inputs/useSgMultiSelect.d.ts +1 -1
- package/dist/inputs/useSgMultiSelect.d.ts.map +1 -1
- package/dist/inputs/useSgMultiSelect.js +1 -1
- package/dist/layout/SgAccordion.d.ts +1 -1
- package/dist/layout/SgAccordion.d.ts.map +1 -1
- package/dist/layout/SgAccordion.js +3 -3
- package/dist/layout/SgBreadcrumb.d.ts +1 -1
- package/dist/layout/SgBreadcrumb.d.ts.map +1 -1
- package/dist/layout/SgBreadcrumb.js +1 -1
- package/dist/layout/SgCard.d.ts +1 -1
- package/dist/layout/SgCard.d.ts.map +1 -1
- package/dist/layout/SgCard.js +14 -14
- package/dist/layout/SgMenu.d.ts +1 -1
- package/dist/layout/SgMenu.d.ts.map +1 -1
- package/dist/layout/SgMenu.js +15 -15
- package/dist/layout/SgPageControl.d.ts +1 -1
- package/dist/layout/SgPageControl.d.ts.map +1 -1
- package/dist/layout/SgPageControl.js +4 -4
- package/dist/layout/SgPageControlPage.meta.js +2 -2
- package/dist/layout/SgToolBar.d.ts +1 -1
- package/dist/layout/SgToolBar.d.ts.map +1 -1
- package/dist/layout/SgToolBar.js +4 -4
- package/dist/layout/SgToolbarIconButton.meta.js +2 -2
- package/dist/layout/SgTreeView.d.ts +4 -4
- package/dist/layout/SgTreeView.d.ts.map +1 -1
- package/dist/layout/SgTreeView.js +6 -6
- package/dist/menus/SgDockMenu.d.ts +1 -1
- package/dist/menus/SgDockMenu.d.ts.map +1 -1
- package/dist/menus/SgDockMenu.js +4 -4
- package/dist/notifications/SgNotificationBell.d.ts +51 -0
- package/dist/notifications/SgNotificationBell.d.ts.map +1 -0
- package/dist/notifications/SgNotificationBell.js +348 -0
- package/dist/notifications/SgNotificationBell.meta.d.ts +4 -0
- package/dist/notifications/SgNotificationBell.meta.d.ts.map +1 -0
- package/dist/notifications/SgNotificationBell.meta.js +75 -0
- package/dist/notifications/notificationBellLogic.d.ts +148 -0
- package/dist/notifications/notificationBellLogic.d.ts.map +1 -0
- package/dist/notifications/notificationBellLogic.js +244 -0
- package/dist/overlay/SgConfirmationDialog.d.ts +1 -1
- package/dist/overlay/SgConfirmationDialog.d.ts.map +1 -1
- package/dist/overlay/SgConfirmationDialog.js +1 -1
- package/dist/overlay/SgPopup.d.ts +1 -1
- package/dist/overlay/SgPopup.d.ts.map +1 -1
- package/dist/overlay/SgPopup.js +1 -1
- package/dist/realtime/SgRealtimeProvider.d.ts +5 -0
- package/dist/realtime/SgRealtimeProvider.d.ts.map +1 -1
- package/dist/realtime/SgRealtimeProvider.js +31 -8
- package/dist/sandbox.cjs +62 -62
- package/dist/style.css +1 -1
- package/package.json +3 -3
|
@@ -31,17 +31,17 @@ function moveSingleItem(items, fromIndex, toIndex) {
|
|
|
31
31
|
return next;
|
|
32
32
|
}
|
|
33
33
|
function moveSelectionTop(items, selected) {
|
|
34
|
-
const picked = items.filter((item) => selected.has(item.value) &&
|
|
34
|
+
const picked = items.filter((item) => selected.has(item.value) && item.enabled !== false);
|
|
35
35
|
if (picked.length === 0)
|
|
36
36
|
return items;
|
|
37
|
-
const rest = items.filter((item) => !(selected.has(item.value) &&
|
|
37
|
+
const rest = items.filter((item) => !(selected.has(item.value) && item.enabled !== false));
|
|
38
38
|
return [...picked, ...rest];
|
|
39
39
|
}
|
|
40
40
|
function moveSelectionBottom(items, selected) {
|
|
41
|
-
const picked = items.filter((item) => selected.has(item.value) &&
|
|
41
|
+
const picked = items.filter((item) => selected.has(item.value) && item.enabled !== false);
|
|
42
42
|
if (picked.length === 0)
|
|
43
43
|
return items;
|
|
44
|
-
const rest = items.filter((item) => !(selected.has(item.value) &&
|
|
44
|
+
const rest = items.filter((item) => !(selected.has(item.value) && item.enabled !== false));
|
|
45
45
|
return [...rest, ...picked];
|
|
46
46
|
}
|
|
47
47
|
function moveSelectionUp(items, selected) {
|
|
@@ -49,9 +49,9 @@ function moveSelectionUp(items, selected) {
|
|
|
49
49
|
for (let index = 1; index < next.length; index += 1) {
|
|
50
50
|
const current = next[index];
|
|
51
51
|
const prev = next[index - 1];
|
|
52
|
-
if (!(selected.has(current.value) &&
|
|
52
|
+
if (!(selected.has(current.value) && current.enabled !== false))
|
|
53
53
|
continue;
|
|
54
|
-
if (selected.has(prev.value) &&
|
|
54
|
+
if (selected.has(prev.value) && prev.enabled !== false)
|
|
55
55
|
continue;
|
|
56
56
|
next[index] = prev;
|
|
57
57
|
next[index - 1] = current;
|
|
@@ -63,9 +63,9 @@ function moveSelectionDown(items, selected) {
|
|
|
63
63
|
for (let index = next.length - 2; index >= 0; index -= 1) {
|
|
64
64
|
const current = next[index];
|
|
65
65
|
const nextItem = next[index + 1];
|
|
66
|
-
if (!(selected.has(current.value) &&
|
|
66
|
+
if (!(selected.has(current.value) && current.enabled !== false))
|
|
67
67
|
continue;
|
|
68
|
-
if (selected.has(nextItem.value) &&
|
|
68
|
+
if (selected.has(nextItem.value) && nextItem.enabled !== false)
|
|
69
69
|
continue;
|
|
70
70
|
next[index] = nextItem;
|
|
71
71
|
next[index + 1] = current;
|
|
@@ -86,7 +86,7 @@ function matchFilter(label, query, mode) {
|
|
|
86
86
|
}
|
|
87
87
|
function SgPickListBase(props, imperativeRef) {
|
|
88
88
|
const i18n = useComponentsI18n();
|
|
89
|
-
const { id, title, source, target, value: controlledValue, onChange, sourceSelection: controlledSourceSelection, targetSelection: controlledTargetSelection, onSourceSelectionChange, onTargetSelectionChange, selectionMode = "multiple", sourceHeader, targetHeader, showTransferControls = true, showSourceControls = true, showTargetControls = true, showSourceFilter = false, showTargetFilter = false, sourceFilterPlaceholder, targetFilterPlaceholder, filterMatchMode = "contains", draggable = true,
|
|
89
|
+
const { id, title, source, target, value: controlledValue, onChange, sourceSelection: controlledSourceSelection, targetSelection: controlledTargetSelection, onSourceSelectionChange, onTargetSelectionChange, selectionMode = "multiple", sourceHeader, targetHeader, showTransferControls = true, showSourceControls = true, showTargetControls = true, showSourceFilter = false, showTargetFilter = false, sourceFilterPlaceholder, targetFilterPlaceholder, filterMatchMode = "contains", draggable = true, enabled = true, readOnly = false, emptyMessage, itemTemplate, className = "", style, listClassName = "", itemClassName = "", groupBoxProps = {}, error } = props;
|
|
90
90
|
const [internalValue, setInternalValue] = React.useState(() => ({ source, target }));
|
|
91
91
|
const [internalSourceSelection, setInternalSourceSelection] = React.useState(() => uniqueValues(controlledSourceSelection ?? []));
|
|
92
92
|
const [internalTargetSelection, setInternalTargetSelection] = React.useState(() => uniqueValues(controlledTargetSelection ?? []));
|
|
@@ -110,7 +110,7 @@ function SgPickListBase(props, imperativeRef) {
|
|
|
110
110
|
const targetSelection = uniqueValues(targetSelectionRaw.filter((valueItem) => targetItems.some((item) => item.value === valueItem)));
|
|
111
111
|
const sourceSelectedSet = new Set(sourceSelection);
|
|
112
112
|
const targetSelectedSet = new Set(targetSelection);
|
|
113
|
-
const canInteract =
|
|
113
|
+
const canInteract = enabled && !readOnly;
|
|
114
114
|
const commitValue = React.useCallback((nextValue, type) => {
|
|
115
115
|
if (!isValueControlled)
|
|
116
116
|
setInternalValue(nextValue);
|
|
@@ -135,10 +135,10 @@ function SgPickListBase(props, imperativeRef) {
|
|
|
135
135
|
const moveToTarget = React.useCallback(() => {
|
|
136
136
|
if (!canInteract)
|
|
137
137
|
return;
|
|
138
|
-
const picked = sourceItems.filter((item) => sourceSelectedSet.has(item.value) &&
|
|
138
|
+
const picked = sourceItems.filter((item) => sourceSelectedSet.has(item.value) && item.enabled !== false);
|
|
139
139
|
if (picked.length === 0)
|
|
140
140
|
return;
|
|
141
|
-
const nextSource = sourceItems.filter((item) => !(sourceSelectedSet.has(item.value) &&
|
|
141
|
+
const nextSource = sourceItems.filter((item) => !(sourceSelectedSet.has(item.value) && item.enabled !== false));
|
|
142
142
|
const nextTarget = [...targetItems, ...picked];
|
|
143
143
|
commitValue({ source: nextSource, target: nextTarget }, "moveToTarget");
|
|
144
144
|
commitSourceSelection([]);
|
|
@@ -147,10 +147,10 @@ function SgPickListBase(props, imperativeRef) {
|
|
|
147
147
|
const moveAllToTarget = React.useCallback(() => {
|
|
148
148
|
if (!canInteract)
|
|
149
149
|
return;
|
|
150
|
-
const picked = sourceItems.filter((item) =>
|
|
150
|
+
const picked = sourceItems.filter((item) => item.enabled !== false);
|
|
151
151
|
if (picked.length === 0)
|
|
152
152
|
return;
|
|
153
|
-
const nextSource = sourceItems.filter((item) => item.
|
|
153
|
+
const nextSource = sourceItems.filter((item) => (item.enabled === false));
|
|
154
154
|
const nextTarget = [...targetItems, ...picked];
|
|
155
155
|
commitValue({ source: nextSource, target: nextTarget }, "moveAllToTarget");
|
|
156
156
|
commitSourceSelection([]);
|
|
@@ -159,10 +159,10 @@ function SgPickListBase(props, imperativeRef) {
|
|
|
159
159
|
const moveToSource = React.useCallback(() => {
|
|
160
160
|
if (!canInteract)
|
|
161
161
|
return;
|
|
162
|
-
const picked = targetItems.filter((item) => targetSelectedSet.has(item.value) &&
|
|
162
|
+
const picked = targetItems.filter((item) => targetSelectedSet.has(item.value) && item.enabled !== false);
|
|
163
163
|
if (picked.length === 0)
|
|
164
164
|
return;
|
|
165
|
-
const nextTarget = targetItems.filter((item) => !(targetSelectedSet.has(item.value) &&
|
|
165
|
+
const nextTarget = targetItems.filter((item) => !(targetSelectedSet.has(item.value) && item.enabled !== false));
|
|
166
166
|
const nextSource = [...sourceItems, ...picked];
|
|
167
167
|
commitValue({ source: nextSource, target: nextTarget }, "moveToSource");
|
|
168
168
|
commitTargetSelection([]);
|
|
@@ -171,10 +171,10 @@ function SgPickListBase(props, imperativeRef) {
|
|
|
171
171
|
const moveAllToSource = React.useCallback(() => {
|
|
172
172
|
if (!canInteract)
|
|
173
173
|
return;
|
|
174
|
-
const picked = targetItems.filter((item) =>
|
|
174
|
+
const picked = targetItems.filter((item) => item.enabled !== false);
|
|
175
175
|
if (picked.length === 0)
|
|
176
176
|
return;
|
|
177
|
-
const nextTarget = targetItems.filter((item) => item.
|
|
177
|
+
const nextTarget = targetItems.filter((item) => (item.enabled === false));
|
|
178
178
|
const nextSource = [...sourceItems, ...picked];
|
|
179
179
|
commitValue({ source: nextSource, target: nextTarget }, "moveAllToSource");
|
|
180
180
|
commitTargetSelection([]);
|
|
@@ -185,7 +185,7 @@ function SgPickListBase(props, imperativeRef) {
|
|
|
185
185
|
return;
|
|
186
186
|
if (from === "source") {
|
|
187
187
|
const moving = sourceItems[fromIndex];
|
|
188
|
-
if (!moving || moving.
|
|
188
|
+
if (!moving || (moving.enabled === false))
|
|
189
189
|
return;
|
|
190
190
|
const nextSource = sourceItems.filter((_, index) => index !== fromIndex);
|
|
191
191
|
const nextTarget = [...targetItems, moving];
|
|
@@ -195,7 +195,7 @@ function SgPickListBase(props, imperativeRef) {
|
|
|
195
195
|
return;
|
|
196
196
|
}
|
|
197
197
|
const moving = targetItems[fromIndex];
|
|
198
|
-
if (!moving || moving.
|
|
198
|
+
if (!moving || (moving.enabled === false))
|
|
199
199
|
return;
|
|
200
200
|
const nextTarget = targetItems.filter((_, index) => index !== fromIndex);
|
|
201
201
|
const nextSource = [...sourceItems, moving];
|
|
@@ -243,7 +243,7 @@ function SgPickListBase(props, imperativeRef) {
|
|
|
243
243
|
commitValue({ source: sourceItems, target: nextItems }, "reorderTarget");
|
|
244
244
|
};
|
|
245
245
|
const handleSelect = (list, item) => {
|
|
246
|
-
if (!canInteract || item.
|
|
246
|
+
if (!canInteract || (item.enabled === false))
|
|
247
247
|
return;
|
|
248
248
|
const selected = list === "source" ? sourceSelectedSet : targetSelectedSet;
|
|
249
249
|
const commit = list === "source" ? commitSourceSelection : commitTargetSelection;
|
|
@@ -276,7 +276,7 @@ function SgPickListBase(props, imperativeRef) {
|
|
|
276
276
|
const fromList = dragState.from === "source" ? sourceItems : targetItems;
|
|
277
277
|
const toList = to === "source" ? sourceItems : targetItems;
|
|
278
278
|
const moving = fromList[dragState.fromIndex];
|
|
279
|
-
if (!moving || moving.
|
|
279
|
+
if (!moving || (moving.enabled === false)) {
|
|
280
280
|
setDragState(null);
|
|
281
281
|
return;
|
|
282
282
|
}
|
|
@@ -324,8 +324,8 @@ function SgPickListBase(props, imperativeRef) {
|
|
|
324
324
|
handleDrop(list, list === "source" ? sourceItems.length : targetItems.length);
|
|
325
325
|
}, children: items.length === 0 ? (_jsx("li", { className: "list-none px-3 py-4 text-sm text-[rgb(var(--sg-muted))]", children: emptyLabel })) : (items.map(({ item, index }) => {
|
|
326
326
|
const selectedItem = selected.has(item.value);
|
|
327
|
-
const itemDisabled =
|
|
328
|
-
return (_jsx("li", { className: "list-none", children: _jsxs("button", { type: "button", role: "option", "aria-selected": selectedItem, disabled: itemDisabled, draggable: dragEnabled &&
|
|
327
|
+
const itemDisabled = !enabled || Boolean((item.enabled === false));
|
|
328
|
+
return (_jsx("li", { className: "list-none", children: _jsxs("button", { type: "button", role: "option", "aria-selected": selectedItem, disabled: itemDisabled, draggable: dragEnabled && item.enabled !== false, onClick: (event) => {
|
|
329
329
|
if (event.detail >= 2) {
|
|
330
330
|
moveSingleByDoubleClick(list, index);
|
|
331
331
|
return;
|
|
@@ -353,11 +353,11 @@ function SgPickListBase(props, imperativeRef) {
|
|
|
353
353
|
}, onDragEnd: () => setDragState(null), className: cn("flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sm", selectedItem
|
|
354
354
|
? "bg-[rgb(var(--sg-primary-100))] ring-1 ring-[rgb(var(--sg-primary-300))]"
|
|
355
355
|
: "bg-[rgb(var(--sg-input-bg,var(--sg-surface)))] hover:bg-[rgb(var(--sg-primary-50))]", itemDisabled ? "cursor-not-allowed opacity-60" : "cursor-pointer", itemClassName), children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: itemTemplate
|
|
356
|
-
? itemTemplate(item, { index, selected: selectedItem,
|
|
357
|
-
: (_jsxs("span", { className: "flex items-center gap-2", children: [item.icon ? _jsx("span", { className: "shrink-0", children: item.icon }) : null, _jsx("span", { className: "truncate", children: item.label })] })) }), dragEnabled &&
|
|
356
|
+
? itemTemplate(item, { index, selected: selectedItem, enabled: !itemDisabled, list })
|
|
357
|
+
: (_jsxs("span", { className: "flex items-center gap-2", children: [item.icon ? _jsx("span", { className: "shrink-0", children: item.icon }) : null, _jsx("span", { className: "truncate", children: item.label })] })) }), dragEnabled && item.enabled !== false ? (_jsx("span", { "aria-hidden": "true", className: "shrink-0 text-xs text-[rgb(var(--sg-muted))]", children: "::" })) : null] }) }, `${item.value}-${index}`));
|
|
358
358
|
})) }));
|
|
359
|
-
const renderReorderControls = (list) => (_jsxs("div", { className: "flex shrink-0 flex-col gap-2", children: [_jsx(SgButton, { size: "sm", appearance: "outline",
|
|
360
|
-
const transferControls = showTransferControls ? (_jsxs("div", { className: "flex shrink-0 flex-row gap-2 md:flex-col", children: [_jsx(SgButton, { size: "sm", appearance: "outline",
|
|
359
|
+
const renderReorderControls = (list) => (_jsxs("div", { className: "flex shrink-0 flex-col gap-2", children: [_jsx(SgButton, { size: "sm", appearance: "outline", enabled: canInteract, "aria-label": moveTopLabel, title: moveTopLabel, onClick: () => applyReorder(list, "top"), children: t(i18n, "components.actions.top") }), _jsx(SgButton, { size: "sm", appearance: "outline", enabled: canInteract, "aria-label": moveUpLabel, title: moveUpLabel, onClick: () => applyReorder(list, "up"), children: t(i18n, "components.actions.up") }), _jsx(SgButton, { size: "sm", appearance: "outline", enabled: canInteract, "aria-label": moveDownLabel, title: moveDownLabel, onClick: () => applyReorder(list, "down"), children: t(i18n, "components.actions.down") }), _jsx(SgButton, { size: "sm", appearance: "outline", enabled: canInteract, "aria-label": moveBottomLabel, title: moveBottomLabel, onClick: () => applyReorder(list, "bottom"), children: t(i18n, "components.actions.bottom") })] }));
|
|
360
|
+
const transferControls = showTransferControls ? (_jsxs("div", { className: "flex shrink-0 flex-row gap-2 md:flex-col", children: [_jsx(SgButton, { size: "sm", appearance: "outline", enabled: canInteract, "aria-label": moveToTargetLabel, title: moveToTargetLabel, onClick: moveToTarget, children: ">" }), _jsx(SgButton, { size: "sm", appearance: "outline", enabled: canInteract, "aria-label": moveAllToTargetLabel, title: moveAllToTargetLabel, onClick: moveAllToTarget, children: ">>" }), _jsx(SgButton, { size: "sm", appearance: "outline", enabled: canInteract, "aria-label": moveToSourceLabel, title: moveToSourceLabel, onClick: moveToSource, children: "<" }), _jsx(SgButton, { size: "sm", appearance: "outline", enabled: canInteract, "aria-label": moveAllToSourceLabel, title: moveAllToSourceLabel, onClick: moveAllToSource, children: "<<" })] })) : null;
|
|
361
361
|
const resolvedTitle = (groupBoxProps.title ?? title ?? "").trim() || " ";
|
|
362
362
|
return (_jsx("div", { className: className, style: style, children: _jsxs(SgGroupBox, { ...groupBoxProps, title: resolvedTitle, children: [error ? _jsx("p", { className: "mb-2 text-xs text-red-600", children: error }) : null, _jsxs("div", { className: "grid gap-3 md:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] md:items-start", children: [_jsxs("div", { className: "min-w-0 space-y-2", children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-[rgb(var(--sg-muted))]", children: sourceHeaderLabel }), showSourceFilter ? (_jsx("input", { value: sourceFilter, onChange: (event) => setSourceFilter(event.target.value), placeholder: sourceFilterLabel, className: "w-full rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-input-bg,var(--sg-surface)))] px-2 py-1 text-sm text-[rgb(var(--sg-input-fg,var(--sg-text)))] placeholder:text-[rgb(var(--sg-input-placeholder,var(--sg-muted)))] outline-none focus:ring-2 focus:ring-[rgb(var(--sg-ring))]" })) : null, _jsxs("div", { className: "flex items-start gap-2", children: [showSourceControls ? renderReorderControls("source") : null, _jsx("div", { className: "min-w-0 flex-1", children: renderList("source", filteredSource, sourceSelectedSet) })] })] }), _jsx("div", { className: "flex justify-center md:pt-7", children: transferControls }), _jsxs("div", { className: "min-w-0 space-y-2", children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-[rgb(var(--sg-muted))]", children: targetHeaderLabel }), showTargetFilter ? (_jsx("input", { value: targetFilter, onChange: (event) => setTargetFilter(event.target.value), placeholder: targetFilterLabel, className: "w-full rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-input-bg,var(--sg-surface)))] px-2 py-1 text-sm text-[rgb(var(--sg-input-fg,var(--sg-text)))] placeholder:text-[rgb(var(--sg-input-placeholder,var(--sg-muted)))] outline-none focus:ring-2 focus:ring-[rgb(var(--sg-ring))]" })) : null, _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("div", { className: "min-w-0 flex-1", children: renderList("target", filteredTarget, targetSelectedSet) }), showTargetControls ? renderReorderControls("target") : null] })] })] })] }) }));
|
|
363
363
|
}
|
|
@@ -15,7 +15,7 @@ export const sgMeta = {
|
|
|
15
15
|
{ name: "id", type: "string", description: "Identificador unico do componente.", semanticRole: "data", bindable: false },
|
|
16
16
|
{ name: "value", type: "SgPickListValue", description: "Estado atual das listas.", semanticRole: "value", bindable: true },
|
|
17
17
|
{ name: "selectionMode", type: "\"single\" | \"multiple\"", description: "Modo de selecao nas listas.", semanticRole: "behavior", bindable: true },
|
|
18
|
-
{ name: "
|
|
18
|
+
{ name: "enabled", type: "boolean", default: true, description: "Desabilita interacao.", semanticRole: "behavior", bindable: true },
|
|
19
19
|
{ name: "onChange", type: "(event: SgPickListChangeEvent) => void", description: "Callback ao mover itens.", semanticRole: "event", bindable: false }
|
|
20
20
|
],
|
|
21
21
|
states: ["default", "disabled", "empty"],
|
|
@@ -7,7 +7,7 @@ export interface SgRadioGroupOption {
|
|
|
7
7
|
label: string;
|
|
8
8
|
value: string | number;
|
|
9
9
|
icon?: React.ReactNode;
|
|
10
|
-
|
|
10
|
+
enabled?: boolean;
|
|
11
11
|
}
|
|
12
12
|
export interface SgRadioGroupProps extends RhfFieldProps {
|
|
13
13
|
id?: string;
|
|
@@ -17,7 +17,7 @@ export interface SgRadioGroupProps extends RhfFieldProps {
|
|
|
17
17
|
orientation?: SgRadioGroupOrientation;
|
|
18
18
|
selectionStyle?: SgRadioGroupSelectionStyle;
|
|
19
19
|
iconOnly?: boolean;
|
|
20
|
-
|
|
20
|
+
enabled?: boolean;
|
|
21
21
|
readOnly?: boolean;
|
|
22
22
|
required?: boolean;
|
|
23
23
|
onChange?: (value: string | number | null) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgRadioGroup.d.ts","sourceRoot":"","sources":["../../src/inputs/SgRadioGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAExE,OAAO,EAAwC,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAElF,MAAM,MAAM,uBAAuB,GAAG,YAAY,GAAG,UAAU,CAAC;AAChE,MAAM,MAAM,0BAA0B,GAAG,OAAO,GAAG,WAAW,CAAC;AAE/D,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,
|
|
1
|
+
{"version":3,"file":"SgRadioGroup.d.ts","sourceRoot":"","sources":["../../src/inputs/SgRadioGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAExE,OAAO,EAAwC,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAElF,MAAM,MAAM,uBAAuB,GAAG,YAAY,GAAG,UAAU,CAAC;AAChE,MAAM,MAAM,0BAA0B,GAAG,OAAO,GAAG,WAAW,CAAC;AAE/D,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,kBAAkB,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,uBAAuB,CAAC;IACtC,cAAc,CAAC,EAAE,0BAA0B,CAAC;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAGnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAC3F;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAmPpD"}
|
|
@@ -7,7 +7,7 @@ import { t, useComponentsI18n } from "../i18n";
|
|
|
7
7
|
import { mergeRequiredRule, resolveFieldError } from "../rhf";
|
|
8
8
|
export function SgRadioGroup(props) {
|
|
9
9
|
const i18n = useComponentsI18n();
|
|
10
|
-
const { id, title, source, value: controlledValue, orientation = "vertical", selectionStyle = "radio", iconOnly = false,
|
|
10
|
+
const { id, title, source, value: controlledValue, orientation = "vertical", selectionStyle = "radio", iconOnly = false, enabled = true, readOnly = false, required = false, onChange, name, control, register, rules, error, className = "", style, optionClassName = "", groupBoxProps = {} } = props;
|
|
11
11
|
const resolvedGroupBoxTitle = (() => {
|
|
12
12
|
const baseTitle = groupBoxProps.title ?? title ?? "";
|
|
13
13
|
if (!required || !baseTitle.trim())
|
|
@@ -19,7 +19,7 @@ export function SgRadioGroup(props) {
|
|
|
19
19
|
const currentValue = isControlled ? controlledValue : internalValue;
|
|
20
20
|
const isHighlightSelection = selectionStyle === "highlight";
|
|
21
21
|
const handleChange = (newValue) => {
|
|
22
|
-
if (
|
|
22
|
+
if (!enabled || readOnly)
|
|
23
23
|
return;
|
|
24
24
|
if (!isControlled) {
|
|
25
25
|
setInternalValue(newValue);
|
|
@@ -28,7 +28,7 @@ export function SgRadioGroup(props) {
|
|
|
28
28
|
};
|
|
29
29
|
const renderRadioOption = (option, index, registration) => {
|
|
30
30
|
const isSelected = currentValue === option.value;
|
|
31
|
-
const isDisabled =
|
|
31
|
+
const isDisabled = !enabled || (option.enabled === false);
|
|
32
32
|
const inputClassName = isHighlightSelection
|
|
33
33
|
? "sr-only"
|
|
34
34
|
: "w-4 h-4 text-[rgb(var(--sg-primary-500))] border-[rgb(var(--sg-border))] focus:ring-[rgb(var(--sg-ring))] focus:ring-2 cursor-pointer disabled:cursor-not-allowed";
|
|
@@ -75,7 +75,7 @@ export function SgRadioGroup(props) {
|
|
|
75
75
|
const content = (_jsxs("div", { className: className, style: style, children: [_jsx(SgGroupBox, { ...groupBoxProps, title: resolvedGroupBoxTitle || " ", className: groupBoxProps.className || "", children: _jsx("div", { className: `
|
|
76
76
|
flex ${isHighlightSelection ? "gap-0" : "gap-4"}
|
|
77
77
|
${orientation === "vertical" ? "flex-col" : "flex-row flex-wrap"}
|
|
78
|
-
`, role: "radiogroup", "aria-disabled":
|
|
78
|
+
`, role: "radiogroup", "aria-disabled": !enabled || undefined, "aria-readonly": readOnly || undefined, "aria-required": required || undefined, children: source.map((option, index) => renderRadioOption(option, index)) }) }), error && (_jsx("div", { className: "mt-1 text-sm text-red-500", children: error }))] }));
|
|
79
79
|
const resolvedRules = mergeRequiredRule(rules, required, t(i18n, "components.inputs.required"));
|
|
80
80
|
// React Hook Form integration
|
|
81
81
|
if (control && name) {
|
|
@@ -89,7 +89,7 @@ export function SgRadioGroup(props) {
|
|
|
89
89
|
return (_jsxs("div", { className: className, style: style, children: [_jsx(SgGroupBox, { ...groupBoxProps, title: resolvedGroupBoxTitle || " ", children: _jsx("div", { className: `
|
|
90
90
|
flex ${isHighlightSelection ? "gap-0" : "gap-4"}
|
|
91
91
|
${orientation === "vertical" ? "flex-col" : "flex-row flex-wrap"}
|
|
92
|
-
`, role: "radiogroup", "aria-disabled":
|
|
92
|
+
`, role: "radiogroup", "aria-disabled": !enabled || undefined, "aria-readonly": readOnly || undefined, "aria-required": required || undefined, children: source.map((option, index) => renderRadioOption(option, index, registration)) }) }), error && (_jsx("div", { className: "mt-1 text-sm text-red-500", children: error }))] }));
|
|
93
93
|
}
|
|
94
94
|
return content;
|
|
95
95
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgRating.d.ts","sourceRoot":"","sources":["../../src/inputs/SgRating.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAwC,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAGlF,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAErD,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,wBAAwB;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yBAAyB;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qBAAqB;IACrB,
|
|
1
|
+
{"version":3,"file":"SgRating.d.ts","sourceRoot":"","sources":["../../src/inputs/SgRating.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAwC,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAGlF,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAErD,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,wBAAwB;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yBAAyB;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qBAAqB;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wBAAwB;IACxB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mCAAmC;IACnC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,kCAAkC;IAClC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,oCAAoC;IACpC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,wCAAwC;IACxC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AA+QD,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAyC5C"}
|
package/dist/inputs/SgRating.js
CHANGED
|
@@ -23,7 +23,7 @@ function ErrorText(props) {
|
|
|
23
23
|
}
|
|
24
24
|
function SgRatingBase(props) {
|
|
25
25
|
const i18n = useComponentsI18n();
|
|
26
|
-
const { id, label, value = 0, stars = 5, allowHalf = false, cancel = true,
|
|
26
|
+
const { id, label, value = 0, stars = 5, allowHalf = false, cancel = true, enabled = true, readOnly = false, size = "md", className = "", style, onIcon, offIcon, cancelIcon, color = "hsl(var(--primary))", emptyColor = "hsl(var(--muted-foreground))", showTooltip = false, onChange, onHover, error, required = false, requiredMessage } = props;
|
|
27
27
|
const [hoverValue, setHoverValue] = React.useState(null);
|
|
28
28
|
const [internalValue, setInternalValue] = React.useState(value);
|
|
29
29
|
const [internalError, setInternalError] = React.useState(null);
|
|
@@ -31,7 +31,7 @@ function SgRatingBase(props) {
|
|
|
31
31
|
setInternalValue(value);
|
|
32
32
|
}, [value]);
|
|
33
33
|
const handleStarClick = (starIndex, isHalf) => {
|
|
34
|
-
if (
|
|
34
|
+
if (!enabled || readOnly)
|
|
35
35
|
return;
|
|
36
36
|
const newValue = allowHalf && isHalf ? starIndex + 0.5 : starIndex + 1;
|
|
37
37
|
setInternalValue(newValue);
|
|
@@ -46,7 +46,7 @@ function SgRatingBase(props) {
|
|
|
46
46
|
}
|
|
47
47
|
};
|
|
48
48
|
const handleStarHover = (starIndex, isHalf) => {
|
|
49
|
-
if (
|
|
49
|
+
if (!enabled || readOnly)
|
|
50
50
|
return;
|
|
51
51
|
const newHoverValue = allowHalf && isHalf ? starIndex + 0.5 : starIndex + 1;
|
|
52
52
|
setHoverValue(newHoverValue);
|
|
@@ -57,7 +57,7 @@ function SgRatingBase(props) {
|
|
|
57
57
|
onHover?.(null);
|
|
58
58
|
};
|
|
59
59
|
const handleCancel = () => {
|
|
60
|
-
if (
|
|
60
|
+
if (!enabled || readOnly)
|
|
61
61
|
return;
|
|
62
62
|
setInternalValue(0);
|
|
63
63
|
onChange?.(0);
|
|
@@ -71,7 +71,7 @@ function SgRatingBase(props) {
|
|
|
71
71
|
};
|
|
72
72
|
const displayValue = hoverValue ?? internalValue;
|
|
73
73
|
const starSize = STAR_SIZES[size];
|
|
74
|
-
const isInteractive =
|
|
74
|
+
const isInteractive = enabled && !readOnly;
|
|
75
75
|
const getStarFillPercentage = (starIndex) => {
|
|
76
76
|
const starValue = starIndex + 1;
|
|
77
77
|
if (displayValue >= starValue)
|
|
@@ -82,9 +82,9 @@ function SgRatingBase(props) {
|
|
|
82
82
|
return 0;
|
|
83
83
|
};
|
|
84
84
|
return (_jsxs("div", { className: `sg-rating ${className}`, style: style, children: [label && (_jsxs("label", { htmlFor: id, className: "mb-2 block text-sm font-medium", children: [label, required && _jsx("span", { className: "ml-1 text-red-600", children: "*" })] })), _jsxs("div", { className: "flex items-center gap-1", onMouseLeave: handleMouseLeave, style: {
|
|
85
|
-
opacity:
|
|
85
|
+
opacity: !enabled ? 0.5 : 1,
|
|
86
86
|
cursor: isInteractive ? "pointer" : "default"
|
|
87
|
-
}, children: [cancel && (_jsx("button", { type: "button", onClick: handleCancel, disabled:
|
|
87
|
+
}, children: [cancel && (_jsx("button", { type: "button", onClick: handleCancel, disabled: !enabled || readOnly, className: "mr-1 transition-opacity hover:opacity-80", style: {
|
|
88
88
|
color: emptyColor,
|
|
89
89
|
cursor: isInteractive ? "pointer" : "default"
|
|
90
90
|
}, title: t(i18n, "components.rating.cancel"), children: cancelIcon ?? _jsx(CancelIcon, { size: starSize }) })), Array.from({ length: stars }).map((_, index) => {
|
|
@@ -16,7 +16,7 @@ export const sgMeta = {
|
|
|
16
16
|
{ name: "label", type: "string", description: "Rotulo do campo.", semanticRole: "label", bindable: true },
|
|
17
17
|
{ name: "value", type: "number", description: "Nota atual.", semanticRole: "value", bindable: true },
|
|
18
18
|
{ name: "readOnly", type: "boolean", default: false, description: "Impede alteracao da nota.", semanticRole: "behavior", bindable: true },
|
|
19
|
-
{ name: "
|
|
19
|
+
{ name: "enabled", type: "boolean", default: true, description: "Desabilita interacao.", semanticRole: "behavior", bindable: true },
|
|
20
20
|
{ name: "size", type: "\"sm\" | \"md\" | \"lg\" | \"xl\"", description: "Tamanho visual do controle.", semanticRole: "appearance", bindable: true },
|
|
21
21
|
{ name: "onChange", type: "(value: number) => void", description: "Callback de mudanca.", semanticRole: "event", bindable: false }
|
|
22
22
|
],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgSlider.d.ts","sourceRoot":"","sources":["../../src/inputs/SgSlider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAiB/D,KAAK,gBAAgB,GAAG,IAAI,CAC1B,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACzC,MAAM,GACN,IAAI,GACJ,KAAK,GACL,KAAK,GACL,MAAM,GACN,OAAO,GACP,cAAc,GACd,UAAU,GACV,YAAY,CACf,GAAG;IACF,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,
|
|
1
|
+
{"version":3,"file":"SgSlider.d.ts","sourceRoot":"","sources":["../../src/inputs/SgSlider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAiB/D,KAAK,gBAAgB,GAAG,IAAI,CAC1B,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACzC,MAAM,GACN,IAAI,GACJ,KAAK,GACL,KAAK,GACL,MAAM,GACN,OAAO,GACP,cAAc,GACd,UAAU,GACV,YAAY,CACf,GAAG;IACF,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC/B,GAAG,aAAa,CAAC;AA2FlB,wBAAgB,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,2CAqDtD;yBArDe,QAAQ"}
|
package/dist/inputs/SgSlider.js
CHANGED
|
@@ -34,7 +34,7 @@ function mergeInputRefs(primary, secondary) {
|
|
|
34
34
|
};
|
|
35
35
|
}
|
|
36
36
|
function SgSliderBase(props) {
|
|
37
|
-
const { id, minValue, maxValue, value, defaultValue, step = 1,
|
|
37
|
+
const { id, minValue, maxValue, value, defaultValue, step = 1, enabled = true, onChange, ariaLabel, className, width, error, inputProps } = props;
|
|
38
38
|
const safeMin = Number.isFinite(minValue) ? minValue : 0;
|
|
39
39
|
const rawMax = Number.isFinite(maxValue) ? maxValue : safeMin;
|
|
40
40
|
const safeMax = Math.max(safeMin, rawMax);
|
|
@@ -47,7 +47,7 @@ function SgSliderBase(props) {
|
|
|
47
47
|
setInternalValue((prev) => clamp(prev, safeMin, safeMax));
|
|
48
48
|
}, [isControlled, safeMin, safeMax]);
|
|
49
49
|
const currentValue = clamp(isControlled ? value : internalValue, safeMin, safeMax);
|
|
50
|
-
return (_jsxs("div", { style: { width: toCssSize(width) }, children: [_jsx("input", { id: id, type: "range", min: safeMin, max: safeMax, step: safeStep, value: currentValue, disabled:
|
|
50
|
+
return (_jsxs("div", { style: { width: toCssSize(width) }, children: [_jsx("input", { id: id, type: "range", min: safeMin, max: safeMax, step: safeStep, value: currentValue, disabled: !enabled, "aria-label": ariaLabel, "aria-invalid": error ? true : undefined, onChange: (event) => {
|
|
51
51
|
const nextRaw = Number(event.currentTarget.value);
|
|
52
52
|
const next = clamp(Number.isFinite(nextRaw) ? nextRaw : safeMin, safeMin, safeMax);
|
|
53
53
|
if (!isControlled)
|
|
@@ -56,7 +56,7 @@ function SgSliderBase(props) {
|
|
|
56
56
|
inputProps?.onChange?.(event);
|
|
57
57
|
}, onBlur: (event) => {
|
|
58
58
|
inputProps?.onBlur?.(event);
|
|
59
|
-
}, className: cn("h-5 w-full cursor-pointer",
|
|
59
|
+
}, className: cn("h-5 w-full cursor-pointer", !enabled ? "cursor-not-allowed opacity-60" : "", className), ...inputProps }), error ? _jsx("p", { className: "mt-1 text-xs text-red-600", children: error }) : null] }));
|
|
60
60
|
}
|
|
61
61
|
export function SgSlider(props) {
|
|
62
62
|
const { control, name, register, rules, ...rest } = props;
|
|
@@ -17,7 +17,7 @@ export const sgMeta = {
|
|
|
17
17
|
{ name: "maxValue", type: "number", required: true, description: "Valor maximo do intervalo.", semanticRole: "validation", bindable: true },
|
|
18
18
|
{ name: "value", type: "number", description: "Valor atual controlado.", semanticRole: "value", bindable: true },
|
|
19
19
|
{ name: "step", type: "number", description: "Passo entre valores.", semanticRole: "behavior", bindable: true },
|
|
20
|
-
{ name: "
|
|
20
|
+
{ name: "enabled", type: "boolean", default: true, description: "Desabilita interacao.", semanticRole: "behavior", bindable: true },
|
|
21
21
|
{ name: "width", type: "number | string", description: "Largura do componente.", semanticRole: "appearance", bindable: true },
|
|
22
22
|
{ name: "onChange", type: "(value: number) => void", description: "Callback de mudanca.", semanticRole: "event", bindable: false }
|
|
23
23
|
],
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { type RhfFieldProps } from "../rhf";
|
|
3
|
-
type StepperInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "id" | "min" | "max" | "step" | "value" | "defaultValue" | "
|
|
3
|
+
type StepperInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "id" | "min" | "max" | "step" | "value" | "defaultValue" | "readOnly" | "aria-label"> & {
|
|
4
4
|
ref?: React.Ref<HTMLInputElement>;
|
|
5
5
|
};
|
|
6
6
|
export type SgStepperInputProps = {
|
|
@@ -10,7 +10,7 @@ export type SgStepperInputProps = {
|
|
|
10
10
|
step?: number;
|
|
11
11
|
value?: number;
|
|
12
12
|
defaultValue?: number;
|
|
13
|
-
|
|
13
|
+
enabled?: boolean;
|
|
14
14
|
readOnly?: boolean;
|
|
15
15
|
onChange?: (value: number) => void;
|
|
16
16
|
ariaLabel?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgStepperInput.d.ts","sourceRoot":"","sources":["../../src/inputs/SgStepperInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAkB/D,KAAK,iBAAiB,GAAG,IAAI,CAC3B,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACzC,MAAM,GACN,IAAI,GACJ,KAAK,GACL,KAAK,GACL,MAAM,GACN,OAAO,GACP,cAAc,GACd,UAAU,GACV,
|
|
1
|
+
{"version":3,"file":"SgStepperInput.d.ts","sourceRoot":"","sources":["../../src/inputs/SgStepperInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAkB/D,KAAK,iBAAiB,GAAG,IAAI,CAC3B,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACzC,MAAM,GACN,IAAI,GACJ,KAAK,GACL,KAAK,GACL,MAAM,GACN,OAAO,GACP,cAAc,GACd,UAAU,GACV,YAAY,CACf,GAAG;IACF,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,iBAAiB,CAAC;CAChC,GAAG,aAAa,CAAC;AAoJlB,wBAAgB,cAAc,CAAC,KAAK,EAAE,QAAQ,CAAC,mBAAmB,CAAC,2CAqDlE;yBArDe,cAAc"}
|
|
@@ -36,7 +36,7 @@ function mergeInputRefs(primary, secondary) {
|
|
|
36
36
|
}
|
|
37
37
|
function SgStepperInputBase(props) {
|
|
38
38
|
const i18n = useComponentsI18n();
|
|
39
|
-
const { id, minValue, maxValue, step = 1, value, defaultValue,
|
|
39
|
+
const { id, minValue, maxValue, step = 1, value, defaultValue, enabled = true, readOnly = false, onChange, ariaLabel, className, inputClassName, width, error, inputProps } = props;
|
|
40
40
|
const safeMin = Number.isFinite(minValue) ? minValue : 0;
|
|
41
41
|
const rawMax = Number.isFinite(maxValue) ? maxValue : safeMin;
|
|
42
42
|
const safeMax = Math.max(safeMin, rawMax);
|
|
@@ -55,9 +55,9 @@ function SgStepperInputBase(props) {
|
|
|
55
55
|
setInternalValue(next);
|
|
56
56
|
onChange?.(next);
|
|
57
57
|
}, [isControlled, onChange, safeMax, safeMin]);
|
|
58
|
-
const canDecrease =
|
|
59
|
-
const canIncrease =
|
|
60
|
-
return (_jsxs("div", { style: { width: toCssSize(width) }, children: [_jsxs("div", { className: cn("inline-flex h-10 w-full overflow-hidden rounded-md border border-border bg-background",
|
|
58
|
+
const canDecrease = enabled && !readOnly && currentValue > safeMin;
|
|
59
|
+
const canIncrease = enabled && !readOnly && currentValue < safeMax;
|
|
60
|
+
return (_jsxs("div", { style: { width: toCssSize(width) }, children: [_jsxs("div", { className: cn("inline-flex h-10 w-full overflow-hidden rounded-md border border-border bg-background", !enabled ? "opacity-60" : "", error ? "border-[hsl(var(--destructive))]" : "", className), children: [_jsx("input", { id: id, type: "number", min: safeMin, max: safeMax, step: safeStep, value: currentValue, disabled: !enabled, readOnly: readOnly, "aria-label": ariaLabel, "aria-invalid": error ? true : undefined, onChange: (event) => {
|
|
61
61
|
const inputNext = Number(event.currentTarget.value);
|
|
62
62
|
if (!Number.isFinite(inputNext))
|
|
63
63
|
return;
|
|
@@ -18,7 +18,7 @@ export const sgMeta = {
|
|
|
18
18
|
{ name: "step", type: "number", default: 1, description: "Incremento e decremento aplicados.", semanticRole: "behavior", bindable: true },
|
|
19
19
|
{ name: "value", type: "number", description: "Valor atual controlado.", semanticRole: "value", bindable: true },
|
|
20
20
|
{ name: "readOnly", type: "boolean", default: false, description: "Permite visualizacao sem edicao direta.", semanticRole: "behavior", bindable: true },
|
|
21
|
-
{ name: "
|
|
21
|
+
{ name: "enabled", type: "boolean", default: true, description: "Desabilita interacao.", semanticRole: "behavior", bindable: true },
|
|
22
22
|
{ name: "onChange", type: "(value: number) => void", description: "Callback de mudanca.", semanticRole: "event", bindable: false }
|
|
23
23
|
],
|
|
24
24
|
states: ["default", "disabled", "readOnly", "error"],
|
|
@@ -18,7 +18,7 @@ export type SgTextEditorProps = {
|
|
|
18
18
|
onLoad?: (meta: SgTextEditorSaveMeta) => void;
|
|
19
19
|
height?: number;
|
|
20
20
|
placeholder?: string;
|
|
21
|
-
|
|
21
|
+
enabled?: boolean;
|
|
22
22
|
borderRadius?: number | string;
|
|
23
23
|
showCssEditor?: boolean;
|
|
24
24
|
cssEditorLabel?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgTextEditor.d.ts","sourceRoot":"","sources":["../../src/inputs/SgTextEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AA4B/D,MAAM,MAAM,oBAAoB,GAAG;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAE1C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAE5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC1D,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAE9C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,
|
|
1
|
+
{"version":3,"file":"SgTextEditor.d.ts","sourceRoot":"","sources":["../../src/inputs/SgTextEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AA4B/D,MAAM,MAAM,oBAAoB,GAAG;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAE1C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAE5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC1D,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAE9C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,GAAG,aAAa,CAAC;AA+clB,wBAAgB,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAsB9D;yBAtBe,YAAY"}
|