@seedgrid/fe-components 2026.3.20 → 2026.3.26
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/buttons/SgFloatActionButton.d.ts.map +1 -1
- package/dist/buttons/SgFloatActionButton.js +5 -26
- package/dist/buttons/SgSplitButton.d.ts.map +1 -1
- package/dist/buttons/SgSplitButton.js +3 -1
- package/dist/buttons/fab-helpers.d.ts +6 -0
- package/dist/buttons/fab-helpers.d.ts.map +1 -0
- package/dist/buttons/fab-helpers.js +29 -0
- package/dist/commons/SgAvatar.d.ts.map +1 -1
- package/dist/commons/SgAvatar.js +6 -3
- package/dist/commons/SgBadge.d.ts.map +1 -1
- package/dist/commons/SgBadge.js +5 -2
- package/dist/commons/SgToast.d.ts.map +1 -1
- package/dist/commons/SgToast.js +3 -1
- package/dist/commons/SgToaster.d.ts.map +1 -1
- package/dist/commons/SgToaster.js +3 -1
- package/dist/environment/SgEnvironmentProvider.d.ts.map +1 -1
- package/dist/environment/SgEnvironmentProvider.js +10 -15
- package/dist/environment/persistent-state.d.ts +22 -0
- package/dist/environment/persistent-state.d.ts.map +1 -0
- package/dist/environment/persistent-state.js +33 -0
- package/dist/gadgets/calendar/SgCalendar.d.ts.map +1 -1
- package/dist/gadgets/calendar/SgCalendar.js +5 -23
- package/dist/gadgets/clock/SgClock.d.ts.map +1 -1
- package/dist/gadgets/clock/SgClock.js +12 -10
- package/dist/gadgets/clock/themes/SgClockThemePicker.d.ts +2 -1
- package/dist/gadgets/clock/themes/SgClockThemePicker.d.ts.map +1 -1
- package/dist/gadgets/clock/themes/SgClockThemePicker.js +23 -28
- package/dist/gadgets/clock/themes/search.d.ts +9 -0
- package/dist/gadgets/clock/themes/search.d.ts.map +1 -0
- package/dist/gadgets/clock/themes/search.js +15 -0
- package/dist/gadgets/gauge/SgLinearGauge.d.ts.map +1 -1
- package/dist/gadgets/gauge/SgLinearGauge.js +39 -28
- package/dist/gadgets/gauge/SgRadialGauge.d.ts.map +1 -1
- package/dist/gadgets/gauge/SgRadialGauge.js +44 -37
- package/dist/gadgets/gauge/math.d.ts +90 -0
- package/dist/gadgets/gauge/math.d.ts.map +1 -0
- package/dist/gadgets/gauge/math.js +81 -0
- package/dist/gadgets/qr-code/SgQRCode.d.ts.map +1 -1
- package/dist/gadgets/qr-code/SgQRCode.js +3 -1
- package/dist/i18n/en-US.d.ts.map +1 -1
- package/dist/i18n/en-US.js +97 -1
- package/dist/i18n/es.d.ts.map +1 -1
- package/dist/i18n/es.js +153 -57
- package/dist/i18n/fr.d.ts +3 -0
- package/dist/i18n/fr.d.ts.map +1 -0
- package/dist/i18n/fr.js +206 -0
- package/dist/i18n/index.d.ts +5 -1
- package/dist/i18n/index.d.ts.map +1 -1
- package/dist/i18n/index.js +50 -14
- package/dist/i18n/pt-BR.d.ts.map +1 -1
- package/dist/i18n/pt-BR.js +97 -1
- package/dist/i18n/pt-PT.d.ts.map +1 -1
- package/dist/i18n/pt-PT.js +97 -1
- package/dist/index.d.ts +12 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +10 -2
- package/dist/inputs/SgAutocomplete.d.ts +1 -1
- package/dist/inputs/SgAutocomplete.d.ts.map +1 -1
- package/dist/inputs/SgAutocomplete.js +7 -4
- package/dist/inputs/SgCheckboxGroup.d.ts +2 -6
- package/dist/inputs/SgCheckboxGroup.d.ts.map +1 -1
- package/dist/inputs/SgCheckboxGroup.js +6 -6
- package/dist/inputs/SgCombobox.d.ts.map +1 -1
- package/dist/inputs/SgCombobox.js +11 -2
- package/dist/inputs/SgInputBirthDate.d.ts.map +1 -1
- package/dist/inputs/SgInputBirthDate.js +6 -1
- package/dist/inputs/SgInputCNPJ.d.ts +3 -1
- package/dist/inputs/SgInputCNPJ.d.ts.map +1 -1
- package/dist/inputs/SgInputCNPJ.js +4 -3
- package/dist/inputs/SgInputCPF.d.ts +3 -1
- package/dist/inputs/SgInputCPF.d.ts.map +1 -1
- package/dist/inputs/SgInputCPF.js +8 -3
- package/dist/inputs/SgInputCPFCNPJ.d.ts +3 -1
- package/dist/inputs/SgInputCPFCNPJ.d.ts.map +1 -1
- package/dist/inputs/SgInputCPFCNPJ.js +8 -3
- package/dist/inputs/SgInputCurrency.d.ts +3 -7
- package/dist/inputs/SgInputCurrency.d.ts.map +1 -1
- package/dist/inputs/SgInputCurrency.js +5 -2
- package/dist/inputs/SgInputDate.d.ts.map +1 -1
- package/dist/inputs/SgInputDate.js +6 -1
- package/dist/inputs/SgInputEmail.d.ts.map +1 -1
- package/dist/inputs/SgInputEmail.js +1 -1
- package/dist/inputs/SgInputNumber.d.ts +3 -7
- package/dist/inputs/SgInputNumber.d.ts.map +1 -1
- package/dist/inputs/SgInputNumber.js +5 -2
- package/dist/inputs/SgInputOTP.d.ts +5 -12
- package/dist/inputs/SgInputOTP.d.ts.map +1 -1
- package/dist/inputs/SgInputOTP.js +7 -4
- package/dist/inputs/SgInputPassword.d.ts.map +1 -1
- package/dist/inputs/SgInputPassword.js +1 -1
- package/dist/inputs/SgInputPhone.d.ts +3 -1
- package/dist/inputs/SgInputPhone.d.ts.map +1 -1
- package/dist/inputs/SgInputPhone.js +2 -1
- package/dist/inputs/SgInputPostalCode.d.ts.map +1 -1
- package/dist/inputs/SgInputPostalCode.js +2 -1
- package/dist/inputs/SgInputSelect.d.ts +4 -2
- package/dist/inputs/SgInputSelect.d.ts.map +1 -1
- package/dist/inputs/SgInputSelect.js +38 -3
- package/dist/inputs/SgInputText.d.ts +3 -7
- package/dist/inputs/SgInputText.d.ts.map +1 -1
- package/dist/inputs/SgInputText.js +5 -2
- package/dist/inputs/SgInputTextArea.d.ts +4 -2
- package/dist/inputs/SgInputTextArea.d.ts.map +1 -1
- package/dist/inputs/SgInputTextArea.js +37 -2
- package/dist/inputs/SgOrderList.d.ts +3 -1
- package/dist/inputs/SgOrderList.d.ts.map +1 -1
- package/dist/inputs/SgOrderList.js +19 -3
- package/dist/inputs/SgPickList.d.ts +3 -1
- package/dist/inputs/SgPickList.d.ts.map +1 -1
- package/dist/inputs/SgPickList.js +20 -4
- package/dist/inputs/SgRadioGroup.d.ts +2 -6
- package/dist/inputs/SgRadioGroup.d.ts.map +1 -1
- package/dist/inputs/SgRadioGroup.js +6 -6
- package/dist/inputs/SgRating.d.ts +2 -10
- package/dist/inputs/SgRating.d.ts.map +1 -1
- package/dist/inputs/SgRating.js +6 -3
- package/dist/inputs/SgSlider.d.ts +8 -2
- package/dist/inputs/SgSlider.d.ts.map +1 -1
- package/dist/inputs/SgSlider.js +62 -10
- package/dist/inputs/SgStepperInput.d.ts +8 -2
- package/dist/inputs/SgStepperInput.d.ts.map +1 -1
- package/dist/inputs/SgStepperInput.js +62 -8
- package/dist/inputs/SgTextEditor.d.ts +3 -1
- package/dist/inputs/SgTextEditor.d.ts.map +1 -1
- package/dist/inputs/SgTextEditor.js +24 -11
- package/dist/inputs/SgToggleSwitch.d.ts +3 -7
- package/dist/inputs/SgToggleSwitch.d.ts.map +1 -1
- package/dist/inputs/SgToggleSwitch.js +6 -3
- package/dist/layout/SgBreadcrumb.d.ts.map +1 -1
- package/dist/layout/SgBreadcrumb.js +7 -3
- package/dist/layout/SgCard.d.ts.map +1 -1
- package/dist/layout/SgCard.js +3 -1
- package/dist/layout/SgCarousel.d.ts.map +1 -1
- package/dist/layout/SgCarousel.js +3 -1
- package/dist/layout/SgExpandablePanel.d.ts.map +1 -1
- package/dist/layout/SgExpandablePanel.js +3 -1
- package/dist/layout/SgMenu.d.ts.map +1 -1
- package/dist/layout/SgMenu.js +173 -297
- package/dist/layout/SgPageControl.d.ts.map +1 -1
- package/dist/layout/SgPageControl.js +7 -3
- package/dist/layout/SgToolBar.d.ts.map +1 -1
- package/dist/layout/SgToolBar.js +19 -55
- package/dist/layout/SgTreeView.d.ts.map +1 -1
- package/dist/layout/SgTreeView.js +7 -3
- package/dist/layout/drag-position.d.ts +7 -0
- package/dist/layout/drag-position.d.ts.map +1 -0
- package/dist/layout/drag-position.js +30 -0
- package/dist/layout/menu-logic.d.ts +187 -0
- package/dist/layout/menu-logic.d.ts.map +1 -0
- package/dist/layout/menu-logic.js +349 -0
- package/dist/layout/toolbar-logic.d.ts +26 -0
- package/dist/layout/toolbar-logic.d.ts.map +1 -0
- package/dist/layout/toolbar-logic.js +38 -0
- package/dist/menus/SgDockMenu.d.ts.map +1 -1
- package/dist/menus/SgDockMenu.js +44 -120
- package/dist/menus/dock-menu-logic.d.ts +50 -0
- package/dist/menus/dock-menu-logic.d.ts.map +1 -0
- package/dist/menus/dock-menu-logic.js +113 -0
- package/dist/overlay/SgDialog.d.ts.map +1 -1
- package/dist/overlay/SgDialog.js +4 -2
- package/dist/overlay/SgPopup.d.ts.map +1 -1
- package/dist/overlay/SgPopup.js +4 -1
- package/dist/rhf.d.ts +8 -3
- package/dist/rhf.d.ts.map +1 -1
- package/dist/rhf.js +18 -1
- package/dist/sandbox.cjs +60 -60
- package/dist/wizard/SgWizard.d.ts.map +1 -1
- package/dist/wizard/SgWizard.js +20 -32
- package/dist/wizard/logic.d.ts +9 -0
- package/dist/wizard/logic.d.ts.map +1 -0
- package/dist/wizard/logic.js +20 -0
- package/package.json +8 -6
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import React from "react";
|
|
4
|
+
import { Controller } from "react-hook-form";
|
|
5
|
+
import { resolveFieldError } from "../rhf";
|
|
4
6
|
import { SgButton } from "../buttons/SgButton";
|
|
5
7
|
import { SgGroupBox } from "../layout/SgGroupBox";
|
|
6
8
|
import { t, useComponentsI18n } from "../i18n";
|
|
@@ -109,7 +111,7 @@ function resolveMessage(translated, key, fallback) {
|
|
|
109
111
|
}
|
|
110
112
|
function SgOrderListBase(props, imperativeRef) {
|
|
111
113
|
const i18n = useComponentsI18n();
|
|
112
|
-
const { id, title, source, value: controlledValue, onChange, selectedValues: controlledSelection, onSelectionChange, selectionMode = "multiple", showControls = true, controlsPosition = "left", draggable = true, disabled = false, readOnly = false, emptyMessage, itemTemplate, className = "", style, listClassName = "", itemClassName = "", groupBoxProps = {} } = props;
|
|
114
|
+
const { id, title, source, value: controlledValue, onChange, selectedValues: controlledSelection, onSelectionChange, selectionMode = "multiple", showControls = true, controlsPosition = "left", draggable = true, disabled = false, readOnly = false, emptyMessage, itemTemplate, className = "", style, listClassName = "", itemClassName = "", groupBoxProps = {}, error } = props;
|
|
113
115
|
const [internalItems, setInternalItems] = React.useState(() => controlledValue ?? source);
|
|
114
116
|
const [internalSelection, setInternalSelection] = React.useState(() => uniqueValues(controlledSelection ?? []));
|
|
115
117
|
const [anchorValue, setAnchorValue] = React.useState(null);
|
|
@@ -311,6 +313,20 @@ function SgOrderListBase(props, imperativeRef) {
|
|
|
311
313
|
const controls = showControls ? (_jsxs("div", { className: "flex shrink-0 flex-col gap-2", children: [_jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canMoveTop, title: moveTopLabel, "aria-label": moveTopLabel, onClick: () => applyMove("top"), children: "Top" }), _jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canMoveUp, title: moveUpLabel, "aria-label": moveUpLabel, onClick: () => applyMove("up"), children: "Up" }), _jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canMoveDown, title: moveDownLabel, "aria-label": moveDownLabel, onClick: () => applyMove("down"), children: "Down" }), _jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canMoveBottom, title: moveBottomLabel, "aria-label": moveBottomLabel, onClick: () => applyMove("bottom"), children: "Bottom" })] })) : null;
|
|
312
314
|
const containerDirection = controlsPosition === "right" ? "flex-row-reverse" : "flex-row";
|
|
313
315
|
const resolvedTitle = (groupBoxProps.title ?? title ?? "").trim() || " ";
|
|
314
|
-
return (_jsx("div", { className: className, style: style, children:
|
|
316
|
+
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: cn("flex items-start gap-3", containerDirection), children: [controls, _jsx("div", { className: "min-w-0 flex-1", children: renderedList })] })] }) }));
|
|
315
317
|
}
|
|
316
|
-
export const SgOrderList = React.forwardRef((props, ref) =>
|
|
318
|
+
export const SgOrderList = React.forwardRef((props, ref) => {
|
|
319
|
+
const { control, name, rules, ...rest } = props;
|
|
320
|
+
if (control && name) {
|
|
321
|
+
return (_jsx(Controller, { name: name, control: control, rules: rules, render: ({ field, fieldState }) => SgOrderListBase({
|
|
322
|
+
...rest,
|
|
323
|
+
error: resolveFieldError(rest.error, fieldState.error?.message),
|
|
324
|
+
value: Array.isArray(field.value) ? field.value : rest.value,
|
|
325
|
+
onChange: (items) => {
|
|
326
|
+
rest.onChange?.(items);
|
|
327
|
+
field.onChange(items);
|
|
328
|
+
}
|
|
329
|
+
}, ref) }));
|
|
330
|
+
}
|
|
331
|
+
return SgOrderListBase(rest, ref);
|
|
332
|
+
});
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
import { type RhfFieldProps } from "../rhf";
|
|
2
3
|
import { type SgGroupBoxProps } from "../layout/SgGroupBox";
|
|
3
4
|
export interface SgPickListItem {
|
|
4
5
|
label: string;
|
|
@@ -27,7 +28,8 @@ export type SgPickListRef = {
|
|
|
27
28
|
moveAllToSource: () => void;
|
|
28
29
|
clearSelection: () => void;
|
|
29
30
|
};
|
|
30
|
-
export interface SgPickListProps {
|
|
31
|
+
export interface SgPickListProps extends RhfFieldProps {
|
|
32
|
+
error?: string;
|
|
31
33
|
id?: string;
|
|
32
34
|
title?: string;
|
|
33
35
|
source: SgPickListItem[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgPickList.d.ts","sourceRoot":"","sources":["../../src/inputs/SgPickList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"SgPickList.d.ts","sourceRoot":"","sources":["../../src/inputs/SgPickList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE/D,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAGxE,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,QAAQ,CAAC;AACrD,MAAM,MAAM,uBAAuB,GAAG,QAAQ,GAAG,UAAU,CAAC;AAC5D,MAAM,MAAM,yBAAyB,GAAG,UAAU,GAAG,YAAY,GAAG,UAAU,CAAC;AAC/E,MAAM,MAAM,oBAAoB,GAC5B,cAAc,GACd,iBAAiB,GACjB,cAAc,GACd,iBAAiB,GACjB,eAAe,GACf,eAAe,GACf,UAAU,CAAC;AAEf,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,cAAc,EAAE,CAAC;IACzB,MAAM,EAAE,cAAc,EAAE,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,eAAe,GAAG;IACpD,IAAI,EAAE,oBAAoB,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,EAAE,MAAM,eAAe,CAAC;IAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC3C,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,cAAc,EAAE,CAAC;IACzB,MAAM,EAAE,cAAc,EAAE,CAAC;IACzB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAElD,eAAe,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACtC,eAAe,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACtC,uBAAuB,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC;IAChE,uBAAuB,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC;IAEhE,aAAa,CAAC,EAAE,uBAAuB,CAAC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,eAAe,CAAC,EAAE,yBAAyB,CAAC;IAE5C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,YAAY,CAAC,EAAE,CACb,IAAI,EAAE,cAAc,EACpB,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,kBAAkB,CAAA;KAAE,KACrF,KAAK,CAAC,SAAS,CAAC;IAErB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAC3F;AAyfD,eAAO,MAAM,UAAU,uFA4BrB,CAAC"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import React from "react";
|
|
4
|
+
import { Controller } from "react-hook-form";
|
|
5
|
+
import { resolveFieldError } from "../rhf";
|
|
4
6
|
import { SgButton } from "../buttons/SgButton";
|
|
5
7
|
import { SgGroupBox } from "../layout/SgGroupBox";
|
|
6
8
|
import { t, useComponentsI18n } from "../i18n";
|
|
@@ -84,7 +86,7 @@ function matchFilter(label, query, mode) {
|
|
|
84
86
|
}
|
|
85
87
|
function SgPickListBase(props, imperativeRef) {
|
|
86
88
|
const i18n = useComponentsI18n();
|
|
87
|
-
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, disabled = false, readOnly = false, emptyMessage, itemTemplate, className = "", style, listClassName = "", itemClassName = "", groupBoxProps = {} } = props;
|
|
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, disabled = false, readOnly = false, emptyMessage, itemTemplate, className = "", style, listClassName = "", itemClassName = "", groupBoxProps = {}, error } = props;
|
|
88
90
|
const [internalValue, setInternalValue] = React.useState(() => ({ source, target }));
|
|
89
91
|
const [internalSourceSelection, setInternalSourceSelection] = React.useState(() => uniqueValues(controlledSourceSelection ?? []));
|
|
90
92
|
const [internalTargetSelection, setInternalTargetSelection] = React.useState(() => uniqueValues(controlledTargetSelection ?? []));
|
|
@@ -354,9 +356,23 @@ function SgPickListBase(props, imperativeRef) {
|
|
|
354
356
|
? itemTemplate(item, { index, selected: selectedItem, disabled: itemDisabled, list })
|
|
355
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.disabled ? (_jsx("span", { "aria-hidden": "true", className: "shrink-0 text-xs text-[rgb(var(--sg-muted))]", children: "::" })) : null] }) }, `${item.value}-${index}`));
|
|
356
358
|
})) }));
|
|
357
|
-
const renderReorderControls = (list) => (_jsxs("div", { className: "flex shrink-0 flex-col gap-2", children: [_jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canInteract, "aria-label": moveTopLabel, title: moveTopLabel, onClick: () => applyReorder(list, "top"), children: "
|
|
359
|
+
const renderReorderControls = (list) => (_jsxs("div", { className: "flex shrink-0 flex-col gap-2", children: [_jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canInteract, "aria-label": moveTopLabel, title: moveTopLabel, onClick: () => applyReorder(list, "top"), children: t(i18n, "components.actions.top") }), _jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canInteract, "aria-label": moveUpLabel, title: moveUpLabel, onClick: () => applyReorder(list, "up"), children: t(i18n, "components.actions.up") }), _jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canInteract, "aria-label": moveDownLabel, title: moveDownLabel, onClick: () => applyReorder(list, "down"), children: t(i18n, "components.actions.down") }), _jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canInteract, "aria-label": moveBottomLabel, title: moveBottomLabel, onClick: () => applyReorder(list, "bottom"), children: t(i18n, "components.actions.bottom") })] }));
|
|
358
360
|
const transferControls = showTransferControls ? (_jsxs("div", { className: "flex shrink-0 flex-row gap-2 md:flex-col", children: [_jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canInteract, "aria-label": moveToTargetLabel, title: moveToTargetLabel, onClick: moveToTarget, children: ">" }), _jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canInteract, "aria-label": moveAllToTargetLabel, title: moveAllToTargetLabel, onClick: moveAllToTarget, children: ">>" }), _jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canInteract, "aria-label": moveToSourceLabel, title: moveToSourceLabel, onClick: moveToSource, children: "<" }), _jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canInteract, "aria-label": moveAllToSourceLabel, title: moveAllToSourceLabel, onClick: moveAllToSource, children: "<<" })] })) : null;
|
|
359
361
|
const resolvedTitle = (groupBoxProps.title ?? title ?? "").trim() || " ";
|
|
360
|
-
return (_jsx("div", { className: className, style: style, children:
|
|
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] })] })] })] }) }));
|
|
361
363
|
}
|
|
362
|
-
export const SgPickList = React.forwardRef((props, ref) =>
|
|
364
|
+
export const SgPickList = React.forwardRef((props, ref) => {
|
|
365
|
+
const { control, name, rules, ...rest } = props;
|
|
366
|
+
if (control && name) {
|
|
367
|
+
return (_jsx(Controller, { name: name, control: control, rules: rules, render: ({ field, fieldState }) => SgPickListBase({
|
|
368
|
+
...rest,
|
|
369
|
+
error: resolveFieldError(rest.error, fieldState.error?.message),
|
|
370
|
+
value: field.value ?? rest.value,
|
|
371
|
+
onChange: (event) => {
|
|
372
|
+
rest.onChange?.(event);
|
|
373
|
+
field.onChange({ source: event.source, target: event.target });
|
|
374
|
+
}
|
|
375
|
+
}, ref) }));
|
|
376
|
+
}
|
|
377
|
+
return SgPickListBase(rest, ref);
|
|
378
|
+
});
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { UseFormRegister, FieldValues } from "react-hook-form";
|
|
3
2
|
import { type SgGroupBoxProps } from "../layout/SgGroupBox";
|
|
3
|
+
import { type RhfFieldProps } from "../rhf";
|
|
4
4
|
export type SgRadioGroupOrientation = "horizontal" | "vertical";
|
|
5
5
|
export type SgRadioGroupSelectionStyle = "radio" | "highlight";
|
|
6
6
|
export interface SgRadioGroupOption {
|
|
@@ -9,7 +9,7 @@ export interface SgRadioGroupOption {
|
|
|
9
9
|
icon?: React.ReactNode;
|
|
10
10
|
disabled?: boolean;
|
|
11
11
|
}
|
|
12
|
-
export interface SgRadioGroupProps {
|
|
12
|
+
export interface SgRadioGroupProps extends RhfFieldProps {
|
|
13
13
|
id?: string;
|
|
14
14
|
title?: string;
|
|
15
15
|
source: SgRadioGroupOption[];
|
|
@@ -21,10 +21,6 @@ export interface SgRadioGroupProps {
|
|
|
21
21
|
readOnly?: boolean;
|
|
22
22
|
required?: boolean;
|
|
23
23
|
onChange?: (value: string | number | null) => void;
|
|
24
|
-
name?: string;
|
|
25
|
-
control?: any;
|
|
26
|
-
register?: UseFormRegister<FieldValues>;
|
|
27
|
-
error?: string;
|
|
28
24
|
className?: string;
|
|
29
25
|
style?: React.CSSProperties;
|
|
30
26
|
optionClassName?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgRadioGroup.d.ts","sourceRoot":"","sources":["../../src/inputs/SgRadioGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
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,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;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,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,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"}
|
|
@@ -4,9 +4,10 @@ import React from "react";
|
|
|
4
4
|
import { Controller } from "react-hook-form";
|
|
5
5
|
import { SgGroupBox } from "../layout/SgGroupBox";
|
|
6
6
|
import { t, useComponentsI18n } from "../i18n";
|
|
7
|
+
import { mergeRequiredRule, resolveFieldError } from "../rhf";
|
|
7
8
|
export function SgRadioGroup(props) {
|
|
8
9
|
const i18n = useComponentsI18n();
|
|
9
|
-
const { id, title, source, value: controlledValue, orientation = "vertical", selectionStyle = "radio", iconOnly = false, disabled = false, readOnly = false, required = false, onChange, name, control, register, error, className = "", style, optionClassName = "", groupBoxProps = {} } = props;
|
|
10
|
+
const { id, title, source, value: controlledValue, orientation = "vertical", selectionStyle = "radio", iconOnly = false, disabled = false, readOnly = false, required = false, onChange, name, control, register, rules, error, className = "", style, optionClassName = "", groupBoxProps = {} } = props;
|
|
10
11
|
const resolvedGroupBoxTitle = (() => {
|
|
11
12
|
const baseTitle = groupBoxProps.title ?? title ?? "";
|
|
12
13
|
if (!required || !baseTitle.trim())
|
|
@@ -75,17 +76,16 @@ export function SgRadioGroup(props) {
|
|
|
75
76
|
flex ${isHighlightSelection ? "gap-0" : "gap-4"}
|
|
76
77
|
${orientation === "vertical" ? "flex-col" : "flex-row flex-wrap"}
|
|
77
78
|
`, role: "radiogroup", "aria-disabled": disabled || 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
|
+
const resolvedRules = mergeRequiredRule(rules, required, t(i18n, "components.inputs.required"));
|
|
78
80
|
// React Hook Form integration
|
|
79
81
|
if (control && name) {
|
|
80
|
-
return (_jsx(Controller, { name: name, control: control, rules:
|
|
82
|
+
return (_jsx(Controller, { name: name, control: control, rules: resolvedRules, render: ({ field, fieldState }) => (_jsx(SgRadioGroup, { ...props, value: field.value, onChange: (val) => {
|
|
81
83
|
field.onChange(val);
|
|
82
84
|
onChange?.(val);
|
|
83
|
-
}, error: fieldState.error?.message, control: undefined })) }));
|
|
85
|
+
}, error: resolveFieldError(error, fieldState.error?.message), control: undefined })) }));
|
|
84
86
|
}
|
|
85
87
|
if (register && name) {
|
|
86
|
-
const registration = register(name,
|
|
87
|
-
required: required ? t(i18n, "components.inputs.required") : false
|
|
88
|
-
});
|
|
88
|
+
const registration = register(name, resolvedRules);
|
|
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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { type RhfFieldProps } from "../rhf";
|
|
3
3
|
export type SgRatingSize = "sm" | "md" | "lg" | "xl";
|
|
4
|
-
export interface SgRatingProps {
|
|
4
|
+
export interface SgRatingProps extends RhfFieldProps {
|
|
5
5
|
/** Unique identifier */
|
|
6
6
|
id?: string;
|
|
7
7
|
/** Label text */
|
|
@@ -40,14 +40,6 @@ export interface SgRatingProps {
|
|
|
40
40
|
onChange?: (value: number) => void;
|
|
41
41
|
/** Callback when hovering over stars */
|
|
42
42
|
onHover?: (value: number | null) => void;
|
|
43
|
-
/** React Hook Form integration */
|
|
44
|
-
register?: UseFormRegister<FieldValues>;
|
|
45
|
-
/** React Hook Form field name */
|
|
46
|
-
name?: string;
|
|
47
|
-
/** React Hook Form control */
|
|
48
|
-
control?: any;
|
|
49
|
-
/** Error message */
|
|
50
|
-
error?: string;
|
|
51
43
|
/** Required field */
|
|
52
44
|
required?: boolean;
|
|
53
45
|
/** Required message */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgRating.d.ts","sourceRoot":"","sources":["../../src/inputs/SgRating.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
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,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,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
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
3
|
import React from "react";
|
|
4
4
|
import { Controller } from "react-hook-form";
|
|
5
|
+
import { mergeRequiredRule, resolveFieldError } from "../rhf";
|
|
5
6
|
import { t, useComponentsI18n } from "../i18n";
|
|
6
7
|
const STAR_SIZES = {
|
|
7
8
|
sm: 16,
|
|
@@ -121,15 +122,17 @@ function SgRatingBase(props) {
|
|
|
121
122
|
})] }), _jsx(ErrorText, { message: error ?? internalError ?? undefined })] }));
|
|
122
123
|
}
|
|
123
124
|
export function SgRating(props) {
|
|
124
|
-
const
|
|
125
|
+
const i18n = useComponentsI18n();
|
|
126
|
+
const { control, name, register, rules, ...rest } = props;
|
|
127
|
+
const resolvedRules = mergeRequiredRule(rules, rest.required, rest.requiredMessage ?? t(i18n, "components.rating.required"));
|
|
125
128
|
if (name && register) {
|
|
126
129
|
return _jsx(SgRatingBase, { ...rest });
|
|
127
130
|
}
|
|
128
131
|
if (control && name) {
|
|
129
|
-
return (_jsx(Controller, { name: name, control: control, render: ({ field, fieldState }) => (_jsx(SgRatingBase, { ...rest, value: field.value ?? 0, onChange: (value) => {
|
|
132
|
+
return (_jsx(Controller, { name: name, control: control, rules: resolvedRules, render: ({ field, fieldState }) => (_jsx(SgRatingBase, { ...rest, value: field.value ?? 0, onChange: (value) => {
|
|
130
133
|
field.onChange(value);
|
|
131
134
|
rest.onChange?.(value);
|
|
132
|
-
}, error: rest.error
|
|
135
|
+
}, error: resolveFieldError(rest.error, fieldState.error?.message) })) }));
|
|
133
136
|
}
|
|
134
137
|
return _jsx(SgRatingBase, { ...rest });
|
|
135
138
|
}
|
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
import { type RhfFieldProps } from "../rhf";
|
|
3
|
+
type SliderInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "id" | "min" | "max" | "step" | "value" | "defaultValue" | "disabled" | "aria-label"> & {
|
|
4
|
+
ref?: React.Ref<HTMLInputElement>;
|
|
5
|
+
};
|
|
2
6
|
export type SgSliderProps = {
|
|
3
7
|
id: string;
|
|
4
8
|
minValue: number;
|
|
@@ -11,10 +15,12 @@ export type SgSliderProps = {
|
|
|
11
15
|
ariaLabel?: string;
|
|
12
16
|
className?: string;
|
|
13
17
|
width?: number | string;
|
|
14
|
-
|
|
15
|
-
|
|
18
|
+
error?: string;
|
|
19
|
+
inputProps?: SliderInputProps;
|
|
20
|
+
} & RhfFieldProps;
|
|
16
21
|
export declare function SgSlider(props: Readonly<SgSliderProps>): import("react/jsx-runtime").JSX.Element;
|
|
17
22
|
export declare namespace SgSlider {
|
|
18
23
|
var displayName: string;
|
|
19
24
|
}
|
|
25
|
+
export {};
|
|
20
26
|
//# sourceMappingURL=SgSlider.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgSlider.d.ts","sourceRoot":"","sources":["../../src/inputs/SgSlider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
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,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,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
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import * as React from "react";
|
|
4
|
+
import { Controller } from "react-hook-form";
|
|
5
|
+
import { resolveFieldError } from "../rhf";
|
|
4
6
|
function cn(...parts) {
|
|
5
7
|
return parts.filter(Boolean).join(" ");
|
|
6
8
|
}
|
|
@@ -15,8 +17,24 @@ function toCssSize(value) {
|
|
|
15
17
|
function clamp(value, min, max) {
|
|
16
18
|
return Math.max(min, Math.min(max, value));
|
|
17
19
|
}
|
|
18
|
-
|
|
19
|
-
|
|
20
|
+
function mergeInputRefs(primary, secondary) {
|
|
21
|
+
return (node) => {
|
|
22
|
+
if (typeof primary === "function") {
|
|
23
|
+
primary(node);
|
|
24
|
+
}
|
|
25
|
+
else if (primary && typeof primary === "object" && "current" in primary) {
|
|
26
|
+
primary.current = node;
|
|
27
|
+
}
|
|
28
|
+
if (typeof secondary === "function") {
|
|
29
|
+
secondary(node);
|
|
30
|
+
}
|
|
31
|
+
else if (secondary && typeof secondary === "object" && "current" in secondary) {
|
|
32
|
+
secondary.current = node;
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
function SgSliderBase(props) {
|
|
37
|
+
const { id, minValue, maxValue, value, defaultValue, step = 1, disabled = false, onChange, ariaLabel, className, width, error, inputProps } = props;
|
|
20
38
|
const safeMin = Number.isFinite(minValue) ? minValue : 0;
|
|
21
39
|
const rawMax = Number.isFinite(maxValue) ? maxValue : safeMin;
|
|
22
40
|
const safeMax = Math.max(safeMin, rawMax);
|
|
@@ -29,12 +47,46 @@ export function SgSlider(props) {
|
|
|
29
47
|
setInternalValue((prev) => clamp(prev, safeMin, safeMax));
|
|
30
48
|
}, [isControlled, safeMin, safeMax]);
|
|
31
49
|
const currentValue = clamp(isControlled ? value : internalValue, safeMin, safeMax);
|
|
32
|
-
return (_jsx("input", { id: id, type: "range", min: safeMin, max: safeMax, step: safeStep, value: currentValue, disabled: disabled, "aria-label": ariaLabel, onChange: (event) => {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
50
|
+
return (_jsxs("div", { style: { width: toCssSize(width) }, children: [_jsx("input", { id: id, type: "range", min: safeMin, max: safeMax, step: safeStep, value: currentValue, disabled: disabled, "aria-label": ariaLabel, "aria-invalid": error ? true : undefined, onChange: (event) => {
|
|
51
|
+
const nextRaw = Number(event.currentTarget.value);
|
|
52
|
+
const next = clamp(Number.isFinite(nextRaw) ? nextRaw : safeMin, safeMin, safeMax);
|
|
53
|
+
if (!isControlled)
|
|
54
|
+
setInternalValue(next);
|
|
55
|
+
onChange?.(next);
|
|
56
|
+
inputProps?.onChange?.(event);
|
|
57
|
+
}, onBlur: (event) => {
|
|
58
|
+
inputProps?.onBlur?.(event);
|
|
59
|
+
}, className: cn("h-5 w-full cursor-pointer", disabled ? "cursor-not-allowed opacity-60" : "", className), ...inputProps }), error ? _jsx("p", { className: "mt-1 text-xs text-red-600", children: error }) : null] }));
|
|
60
|
+
}
|
|
61
|
+
export function SgSlider(props) {
|
|
62
|
+
const { control, name, register, rules, ...rest } = props;
|
|
63
|
+
if (name && register) {
|
|
64
|
+
const reg = register(name, rules);
|
|
65
|
+
return (_jsx(SgSliderBase, { ...rest, inputProps: {
|
|
66
|
+
...rest.inputProps,
|
|
67
|
+
name,
|
|
68
|
+
ref: mergeInputRefs(reg.ref, rest.inputProps?.ref),
|
|
69
|
+
onBlur: (event) => {
|
|
70
|
+
reg.onBlur(event);
|
|
71
|
+
rest.inputProps?.onBlur?.(event);
|
|
72
|
+
},
|
|
73
|
+
onChange: (event) => {
|
|
74
|
+
reg.onChange(event);
|
|
75
|
+
rest.inputProps?.onChange?.(event);
|
|
76
|
+
}
|
|
77
|
+
} }));
|
|
78
|
+
}
|
|
79
|
+
if (control && name) {
|
|
80
|
+
return (_jsx(Controller, { name: name, control: control, rules: rules, render: ({ field, fieldState }) => (_jsx(SgSliderBase, { ...rest, error: resolveFieldError(rest.error, fieldState.error?.message), value: typeof field.value === "number" ? field.value : Number(field.value ?? rest.minValue), onChange: (next) => field.onChange(next), inputProps: {
|
|
81
|
+
...rest.inputProps,
|
|
82
|
+
name,
|
|
83
|
+
ref: mergeInputRefs(field.ref, rest.inputProps?.ref),
|
|
84
|
+
onBlur: (event) => {
|
|
85
|
+
field.onBlur();
|
|
86
|
+
rest.inputProps?.onBlur?.(event);
|
|
87
|
+
}
|
|
88
|
+
} })) }));
|
|
89
|
+
}
|
|
90
|
+
return _jsx(SgSliderBase, { ...rest });
|
|
39
91
|
}
|
|
40
92
|
SgSlider.displayName = "SgSlider";
|
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
import { type RhfFieldProps } from "../rhf";
|
|
3
|
+
type StepperInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "id" | "min" | "max" | "step" | "value" | "defaultValue" | "disabled" | "readOnly" | "aria-label"> & {
|
|
4
|
+
ref?: React.Ref<HTMLInputElement>;
|
|
5
|
+
};
|
|
2
6
|
export type SgStepperInputProps = {
|
|
3
7
|
id: string;
|
|
4
8
|
minValue: number;
|
|
@@ -13,10 +17,12 @@ export type SgStepperInputProps = {
|
|
|
13
17
|
className?: string;
|
|
14
18
|
inputClassName?: string;
|
|
15
19
|
width?: number | string;
|
|
16
|
-
|
|
17
|
-
|
|
20
|
+
error?: string;
|
|
21
|
+
inputProps?: StepperInputProps;
|
|
22
|
+
} & RhfFieldProps;
|
|
18
23
|
export declare function SgStepperInput(props: Readonly<SgStepperInputProps>): import("react/jsx-runtime").JSX.Element;
|
|
19
24
|
export declare namespace SgStepperInput {
|
|
20
25
|
var displayName: string;
|
|
21
26
|
}
|
|
27
|
+
export {};
|
|
22
28
|
//# sourceMappingURL=SgStepperInput.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgStepperInput.d.ts","sourceRoot":"","sources":["../../src/inputs/SgStepperInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
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,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,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,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"}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import * as React from "react";
|
|
4
|
+
import { Controller } from "react-hook-form";
|
|
5
|
+
import { resolveFieldError } from "../rhf";
|
|
6
|
+
import { t, useComponentsI18n } from "../i18n";
|
|
4
7
|
function cn(...parts) {
|
|
5
8
|
return parts.filter(Boolean).join(" ");
|
|
6
9
|
}
|
|
@@ -15,8 +18,25 @@ function toCssSize(value) {
|
|
|
15
18
|
function clamp(value, min, max) {
|
|
16
19
|
return Math.max(min, Math.min(max, value));
|
|
17
20
|
}
|
|
18
|
-
|
|
19
|
-
|
|
21
|
+
function mergeInputRefs(primary, secondary) {
|
|
22
|
+
return (node) => {
|
|
23
|
+
if (typeof primary === "function") {
|
|
24
|
+
primary(node);
|
|
25
|
+
}
|
|
26
|
+
else if (primary && typeof primary === "object" && "current" in primary) {
|
|
27
|
+
primary.current = node;
|
|
28
|
+
}
|
|
29
|
+
if (typeof secondary === "function") {
|
|
30
|
+
secondary(node);
|
|
31
|
+
}
|
|
32
|
+
else if (secondary && typeof secondary === "object" && "current" in secondary) {
|
|
33
|
+
secondary.current = node;
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
}
|
|
37
|
+
function SgStepperInputBase(props) {
|
|
38
|
+
const i18n = useComponentsI18n();
|
|
39
|
+
const { id, minValue, maxValue, step = 1, value, defaultValue, disabled = false, readOnly = false, onChange, ariaLabel, className, inputClassName, width, error, inputProps } = props;
|
|
20
40
|
const safeMin = Number.isFinite(minValue) ? minValue : 0;
|
|
21
41
|
const rawMax = Number.isFinite(maxValue) ? maxValue : safeMin;
|
|
22
42
|
const safeMax = Math.max(safeMin, rawMax);
|
|
@@ -37,12 +57,46 @@ export function SgStepperInput(props) {
|
|
|
37
57
|
}, [isControlled, onChange, safeMax, safeMin]);
|
|
38
58
|
const canDecrease = !disabled && !readOnly && currentValue > safeMin;
|
|
39
59
|
const canIncrease = !disabled && !readOnly && currentValue < safeMax;
|
|
40
|
-
return (_jsxs("div", { className: cn("inline-flex h-10 overflow-hidden rounded-md border border-border bg-background", disabled ? "opacity-60" : "",
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
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", disabled ? "opacity-60" : "", error ? "border-[hsl(var(--destructive))]" : "", className), children: [_jsx("input", { id: id, type: "number", min: safeMin, max: safeMax, step: safeStep, value: currentValue, disabled: disabled, readOnly: readOnly, "aria-label": ariaLabel, "aria-invalid": error ? true : undefined, onChange: (event) => {
|
|
61
|
+
const inputNext = Number(event.currentTarget.value);
|
|
62
|
+
if (!Number.isFinite(inputNext))
|
|
63
|
+
return;
|
|
64
|
+
emitValue(inputNext);
|
|
65
|
+
inputProps?.onChange?.(event);
|
|
66
|
+
}, onBlur: (event) => {
|
|
67
|
+
inputProps?.onBlur?.(event);
|
|
68
|
+
}, className: cn("min-w-0 flex-1 border-0 bg-transparent px-3 text-sm outline-none", "focus:ring-0 [appearance:textfield]", "[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", inputClassName), ...inputProps }), _jsxs("div", { className: "flex w-7 flex-col border-l border-border", children: [_jsx("button", { type: "button", "aria-label": t(i18n, "components.inputs.stepper.increase"), disabled: !canIncrease, onClick: () => emitValue(currentValue + safeStep), className: cn("inline-flex h-1/2 items-center justify-center text-foreground", "border-b border-border text-[10px]", canIncrease ? "hover:bg-muted" : "cursor-not-allowed opacity-40"), children: _jsx(StepArrow, { direction: "up" }) }), _jsx("button", { type: "button", "aria-label": t(i18n, "components.inputs.stepper.decrease"), disabled: !canDecrease, onClick: () => emitValue(currentValue - safeStep), className: cn("inline-flex h-1/2 items-center justify-center text-foreground text-[10px]", canDecrease ? "hover:bg-muted" : "cursor-not-allowed opacity-40"), children: _jsx(StepArrow, { direction: "down" }) })] })] }), error ? _jsx("p", { className: "mt-1 text-xs text-red-600", children: error }) : null] }));
|
|
69
|
+
}
|
|
70
|
+
export function SgStepperInput(props) {
|
|
71
|
+
const { control, name, register, rules, ...rest } = props;
|
|
72
|
+
if (name && register) {
|
|
73
|
+
const reg = register(name, rules);
|
|
74
|
+
return (_jsx(SgStepperInputBase, { ...rest, inputProps: {
|
|
75
|
+
...rest.inputProps,
|
|
76
|
+
name,
|
|
77
|
+
ref: mergeInputRefs(reg.ref, rest.inputProps?.ref),
|
|
78
|
+
onBlur: (event) => {
|
|
79
|
+
reg.onBlur(event);
|
|
80
|
+
rest.inputProps?.onBlur?.(event);
|
|
81
|
+
},
|
|
82
|
+
onChange: (event) => {
|
|
83
|
+
reg.onChange(event);
|
|
84
|
+
rest.inputProps?.onChange?.(event);
|
|
85
|
+
}
|
|
86
|
+
} }));
|
|
87
|
+
}
|
|
88
|
+
if (control && name) {
|
|
89
|
+
return (_jsx(Controller, { name: name, control: control, rules: rules, render: ({ field, fieldState }) => (_jsx(SgStepperInputBase, { ...rest, error: resolveFieldError(rest.error, fieldState.error?.message), value: typeof field.value === "number" ? field.value : Number(field.value ?? rest.minValue), onChange: (next) => field.onChange(next), inputProps: {
|
|
90
|
+
...rest.inputProps,
|
|
91
|
+
name,
|
|
92
|
+
ref: mergeInputRefs(field.ref, rest.inputProps?.ref),
|
|
93
|
+
onBlur: (event) => {
|
|
94
|
+
field.onBlur();
|
|
95
|
+
rest.inputProps?.onBlur?.(event);
|
|
96
|
+
}
|
|
97
|
+
} })) }));
|
|
98
|
+
}
|
|
99
|
+
return _jsx(SgStepperInputBase, { ...rest });
|
|
46
100
|
}
|
|
47
101
|
SgStepperInput.displayName = "SgStepperInput";
|
|
48
102
|
function StepArrow(props) {
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
import { type RhfFieldProps } from "../rhf";
|
|
2
3
|
export type SgTextEditorSaveMeta = {
|
|
3
4
|
htmlDocument: string;
|
|
4
5
|
contentHtml: string;
|
|
5
6
|
cssText: string;
|
|
6
7
|
};
|
|
7
8
|
export type SgTextEditorProps = {
|
|
9
|
+
error?: string;
|
|
8
10
|
id: string;
|
|
9
11
|
valueHtml?: string;
|
|
10
12
|
defaultValueHtml?: string;
|
|
@@ -22,7 +24,7 @@ export type SgTextEditorProps = {
|
|
|
22
24
|
cssEditorLabel?: string;
|
|
23
25
|
className?: string;
|
|
24
26
|
style?: React.CSSProperties;
|
|
25
|
-
};
|
|
27
|
+
} & RhfFieldProps;
|
|
26
28
|
export declare function SgTextEditor(props: Readonly<SgTextEditorProps>): import("react/jsx-runtime").JSX.Element;
|
|
27
29
|
export declare namespace SgTextEditor {
|
|
28
30
|
var displayName: 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;
|
|
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,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,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;AA8clB,wBAAgB,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAsB9D;yBAtBe,YAAY"}
|