@seedgrid/fe-components 2026.3.20 → 2026.3.27
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 +99 -1
- package/dist/i18n/es.d.ts.map +1 -1
- package/dist/i18n/es.js +155 -57
- package/dist/i18n/fr.d.ts +3 -0
- package/dist/i18n/fr.d.ts.map +1 -0
- package/dist/i18n/fr.js +208 -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 +99 -1
- package/dist/i18n/pt-PT.d.ts.map +1 -1
- package/dist/i18n/pt-PT.js +99 -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/SgDatatable.d.ts.map +1 -1
- package/dist/inputs/SgDatatable.js +10 -10
- 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 +24 -8
- package/dist/inputs/SgPickList.d.ts +3 -1
- package/dist/inputs/SgPickList.d.ts.map +1 -1
- package/dist/inputs/SgPickList.js +33 -17
- 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 +30 -16
- 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 +174 -298
- 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 +64 -64
- 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,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;AA+clB,wBAAgB,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAsB9D;yBAtBe,YAAY"}
|
|
@@ -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
|
import { EditorContent, useEditor } from "@tiptap/react";
|
|
5
8
|
import StarterKit from "@tiptap/starter-kit";
|
|
6
9
|
import Underline from "@tiptap/extension-underline";
|
|
@@ -41,10 +44,10 @@ function parseHtmlDocument(html) {
|
|
|
41
44
|
const bodyHtml = (doc.body?.innerHTML ?? "").trim();
|
|
42
45
|
return { cssText, bodyHtml };
|
|
43
46
|
}
|
|
44
|
-
function buildFullHtmlDocument(bodyHtml, cssText) {
|
|
47
|
+
function buildFullHtmlDocument(bodyHtml, cssText, lang) {
|
|
45
48
|
const safeCss = (cssText ?? "").trim();
|
|
46
49
|
return `<!doctype html>
|
|
47
|
-
<html lang="
|
|
50
|
+
<html lang="${lang}">
|
|
48
51
|
<head>
|
|
49
52
|
<meta charset="utf-8" />
|
|
50
53
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
@@ -68,8 +71,12 @@ function canRun(editor, fn) {
|
|
|
68
71
|
return false;
|
|
69
72
|
}
|
|
70
73
|
}
|
|
71
|
-
|
|
72
|
-
const { id, valueHtml, defaultValueHtml, onChangeHtml, cssText = "", onCssTextChange, fileName, onSave, onLoad, height = 320, placeholder
|
|
74
|
+
function SgTextEditorBase(props) {
|
|
75
|
+
const { id, valueHtml, defaultValueHtml, onChangeHtml, cssText = "", onCssTextChange, fileName, onSave, onLoad, height = 320, placeholder: placeholderProp, disabled, borderRadius, showCssEditor = false, cssEditorLabel: cssEditorLabelProp, className, style, error } = props;
|
|
76
|
+
const i18n = useComponentsI18n();
|
|
77
|
+
const placeholder = placeholderProp ?? t(i18n, "components.textEditor.placeholder");
|
|
78
|
+
const cssEditorLabel = cssEditorLabelProp ?? t(i18n, "components.textEditor.cssEditorLabel");
|
|
79
|
+
const editorAriaLabel = t(i18n, "components.textEditor.editorAriaLabel");
|
|
73
80
|
const resolvedBorderRadius = React.useMemo(() => {
|
|
74
81
|
if (borderRadius === undefined)
|
|
75
82
|
return undefined;
|
|
@@ -96,7 +103,7 @@ export function SgTextEditor(props) {
|
|
|
96
103
|
editorProps: {
|
|
97
104
|
attributes: {
|
|
98
105
|
id,
|
|
99
|
-
"aria-label":
|
|
106
|
+
"aria-label": editorAriaLabel,
|
|
100
107
|
class: cn("prose max-w-none focus:outline-none min-h-[120px]", disabled ? "opacity-60" : ""),
|
|
101
108
|
"data-placeholder": placeholder
|
|
102
109
|
}
|
|
@@ -118,10 +125,10 @@ export function SgTextEditor(props) {
|
|
|
118
125
|
if (!editor)
|
|
119
126
|
return;
|
|
120
127
|
const contentHtml = editor.getHTML();
|
|
121
|
-
const htmlDocument = buildFullHtmlDocument(contentHtml, cssText);
|
|
128
|
+
const htmlDocument = buildFullHtmlDocument(contentHtml, cssText, i18n.locale);
|
|
122
129
|
const f = toFile(htmlDocument, fileName ?? `${id}.html`);
|
|
123
130
|
onSave?.(f, { htmlDocument, contentHtml, cssText });
|
|
124
|
-
}, [editor, cssText, fileName, id, onSave]);
|
|
131
|
+
}, [editor, cssText, fileName, i18n.locale, id, onSave]);
|
|
125
132
|
const loadFromHtmlString = React.useCallback((htmlDoc) => {
|
|
126
133
|
if (!editor)
|
|
127
134
|
return;
|
|
@@ -173,44 +180,51 @@ export function SgTextEditor(props) {
|
|
|
173
180
|
editor.commands.toggleHeading({ level: 2 });
|
|
174
181
|
if (v === "h3")
|
|
175
182
|
editor.commands.toggleHeading({ level: 3 });
|
|
176
|
-
}, children: [_jsx("option", { value: "h1", children: "
|
|
183
|
+
}, children: [_jsx("option", { value: "h1", children: t(i18n, "components.textEditor.toolbar.heading") }), _jsx("option", { value: "h2", children: t(i18n, "components.textEditor.toolbar.subheading") }), _jsx("option", { value: "p", children: t(i18n, "components.textEditor.toolbar.normal") }), _jsx("option", { value: "h3", children: t(i18n, "components.textEditor.toolbar.heading3") })] }), _jsxs("select", { className: "h-9 rounded-md border px-2 text-sm bg-background", disabled: !editor || disabled, onChange: (e) => {
|
|
177
184
|
const v = e.target.value;
|
|
178
185
|
if (!editor)
|
|
179
186
|
return;
|
|
180
187
|
editor.chain().focus().setFontFamily(v).run();
|
|
181
|
-
}, defaultValue: "inherit", children: [_jsx("option", { value: "inherit", children: "
|
|
188
|
+
}, defaultValue: "inherit", children: [_jsx("option", { value: "inherit", children: t(i18n, "components.textEditor.toolbar.defaultFont") }), _jsx("option", { value: "Arial", children: "Arial" }), _jsx("option", { value: "Georgia", children: "Georgia" }), _jsx("option", { value: "Times New Roman", children: "Times" }), _jsx("option", { value: "Courier New", children: "Courier" })] }), _jsxs("select", { className: "h-9 rounded-md border px-2 text-sm bg-background", disabled: !editor || disabled, defaultValue: "16px", onChange: (e) => {
|
|
182
189
|
const size = e.target.value;
|
|
183
190
|
if (!editor)
|
|
184
191
|
return;
|
|
185
192
|
editor.chain().focus().setMark("textStyle", { fontSize: size }).run();
|
|
186
|
-
}, children: [_jsx("option", { value: "12px", children: "12" }), _jsx("option", { value: "14px", children: "14" }), _jsx("option", { value: "16px", children: "16" }), _jsx("option", { value: "18px", children: "18" }), _jsx("option", { value: "24px", children: "24" }), _jsx("option", { value: "32px", children: "32" })] }), _jsx("div", { className: "mx-1 h-6 w-px bg-border" }), _jsx(ToolbarButton, { label: "
|
|
193
|
+
}, children: [_jsx("option", { value: "12px", children: "12" }), _jsx("option", { value: "14px", children: "14" }), _jsx("option", { value: "16px", children: "16" }), _jsx("option", { value: "18px", children: "18" }), _jsx("option", { value: "24px", children: "24" }), _jsx("option", { value: "32px", children: "32" })] }), _jsx("div", { className: "mx-1 h-6 w-px bg-border" }), _jsx(ToolbarButton, { label: t(i18n, "components.textEditor.toolbar.bold"), icon: _jsx("span", { className: "font-bold leading-none", "aria-hidden": "true", children: "B" }), active: active("bold"), disabled: !canRun(editor, (ed) => ed.can().chain().focus().toggleBold().run()) || !!disabled, onClick: () => exec(() => editor.chain().toggleBold().run()) }), _jsx(ToolbarButton, { label: t(i18n, "components.textEditor.toolbar.italic"), icon: _jsx("span", { className: "italic leading-none", "aria-hidden": "true", children: "I" }), active: active("italic"), disabled: !canRun(editor, (ed) => ed.can().chain().focus().toggleItalic().run()) || !!disabled, onClick: () => exec(() => editor.chain().toggleItalic().run()) }), _jsx(ToolbarButton, { label: t(i18n, "components.textEditor.toolbar.underline"), icon: _jsx("span", { className: "underline leading-none", "aria-hidden": "true", children: "U" }), active: active("underline"), disabled: !canRun(editor, (ed) => ed.can().chain().focus().toggleUnderline().run()) || !!disabled, onClick: () => exec(() => editor.chain().toggleUnderline().run()) }), _jsx(ToolbarButton, { label: t(i18n, "components.textEditor.toolbar.strike"), icon: _jsx("span", { className: "line-through leading-none", "aria-hidden": "true", children: "S" }), active: active("strike"), disabled: !canRun(editor, (ed) => ed.can().chain().focus().toggleStrike().run()) || !!disabled, onClick: () => exec(() => editor.chain().toggleStrike().run()) }), _jsx("div", { className: "mx-1 h-6 w-px bg-border" }), _jsx(ColorPickerButton, { label: t(i18n, "components.textEditor.toolbar.textColor"), hint: t(i18n, "components.textEditor.toolbar.textColor"), icon: _jsx(Palette, { size: 14, "aria-hidden": "true" }), disabled: !editor || !!disabled, onChange: (color) => editor?.chain().focus().setColor(color).run() }), _jsx(ColorPickerButton, { label: t(i18n, "components.textEditor.toolbar.highlightColor"), hint: t(i18n, "components.textEditor.toolbar.highlightColor"), icon: _jsx(Highlighter, { size: 14, "aria-hidden": "true" }), disabled: !editor || !!disabled, onChange: (color) => editor?.chain().focus().toggleHighlight({ color }).run() }), _jsx("div", { className: "mx-1 h-6 w-px bg-border" }), _jsx(ToolbarButton, { label: t(i18n, "components.textEditor.toolbar.subscript"), text: "x2", active: active("subscript"), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().toggleSubscript().run()) }), _jsx(ToolbarButton, { label: t(i18n, "components.textEditor.toolbar.superscript"), text: "x^", active: active("superscript"), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().toggleSuperscript().run()) }), _jsx("div", { className: "mx-1 h-6 w-px bg-border" }), _jsx(ToolbarButton, { label: t(i18n, "components.textEditor.toolbar.bullets"), icon: _jsx(List, { size: 14, "aria-hidden": "true" }), active: active("bulletList"), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().toggleBulletList().run()) }), _jsx(ToolbarButton, { label: t(i18n, "components.textEditor.toolbar.numbered"), icon: _jsx(ListOrdered, { size: 14, "aria-hidden": "true" }), active: active("orderedList"), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().toggleOrderedList().run()) }), _jsx(ToolbarButton, { label: t(i18n, "components.textEditor.toolbar.outdent"), icon: _jsx(IndentDecrease, { size: 14, "aria-hidden": "true" }), active: false, disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().liftListItem("listItem").run()) }), _jsx(ToolbarButton, { label: t(i18n, "components.textEditor.toolbar.indent"), icon: _jsx(IndentIncrease, { size: 14, "aria-hidden": "true" }), active: false, disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().sinkListItem("listItem").run()) }), _jsx("div", { className: "mx-1 h-6 w-px bg-border" }), _jsx(ToolbarButton, { label: t(i18n, "components.textEditor.toolbar.alignLeft"), icon: _jsx(AlignLeft, { size: 14, "aria-hidden": "true" }), active: active("paragraph", { textAlign: "left" }) || active("heading", { textAlign: "left" }), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().setTextAlign("left").run()) }), _jsx(ToolbarButton, { label: t(i18n, "components.textEditor.toolbar.alignCenter"), icon: _jsx(AlignCenter, { size: 14, "aria-hidden": "true" }), active: active("paragraph", { textAlign: "center" }) || active("heading", { textAlign: "center" }), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().setTextAlign("center").run()) }), _jsx(ToolbarButton, { label: t(i18n, "components.textEditor.toolbar.alignRight"), icon: _jsx(AlignRight, { size: 14, "aria-hidden": "true" }), active: active("paragraph", { textAlign: "right" }) || active("heading", { textAlign: "right" }), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().setTextAlign("right").run()) }), _jsx(ToolbarButton, { label: t(i18n, "components.textEditor.toolbar.justify"), icon: _jsx(AlignJustify, { size: 14, "aria-hidden": "true" }), active: active("paragraph", { textAlign: "justify" }) || active("heading", { textAlign: "justify" }), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().setTextAlign("justify").run()) }), _jsx("div", { className: "mx-1 h-6 w-px bg-border" }), _jsx(ToolbarButton, { label: t(i18n, "components.textEditor.toolbar.link"), text: t(i18n, "components.textEditor.toolbar.link"), active: active("link"), disabled: !editor || !!disabled, onClick: () => {
|
|
187
194
|
if (!editor)
|
|
188
195
|
return;
|
|
189
196
|
const prev = editor.getAttributes("link").href;
|
|
190
|
-
const url = window.prompt("
|
|
197
|
+
const url = window.prompt(t(i18n, "components.textEditor.prompt.url"), prev ?? "https://");
|
|
191
198
|
if (!url) {
|
|
192
199
|
editor.chain().focus().unsetLink().run();
|
|
193
200
|
return;
|
|
194
201
|
}
|
|
195
202
|
editor.chain().focus().setLink({ href: url }).run();
|
|
196
|
-
} }), _jsx(ToolbarButton, { label: "
|
|
203
|
+
} }), _jsx(ToolbarButton, { label: t(i18n, "components.textEditor.toolbar.image"), icon: _jsx(FileImage, { size: 14, "aria-hidden": "true" }), active: false, disabled: !editor || !!disabled, onClick: () => {
|
|
197
204
|
if (!editor)
|
|
198
205
|
return;
|
|
199
|
-
const src = window.prompt(
|
|
206
|
+
const src = window.prompt(t(i18n, "components.textEditor.prompt.imageUrl"));
|
|
200
207
|
if (!src)
|
|
201
208
|
return;
|
|
202
209
|
editor.chain().focus().setImage({ src }).run();
|
|
203
|
-
} }), _jsx("div", { className: "mx-1 h-6 w-px bg-border" }), _jsx(ToolbarButton, { label: "
|
|
210
|
+
} }), _jsx("div", { className: "mx-1 h-6 w-px bg-border" }), _jsx(ToolbarButton, { label: t(i18n, "components.textEditor.toolbar.clear"), text: "X", active: false, disabled: !editor || !!disabled, onClick: () => {
|
|
204
211
|
if (!editor)
|
|
205
212
|
return;
|
|
206
213
|
editor.chain().focus().unsetAllMarks().clearNodes().run();
|
|
207
|
-
} }), _jsxs("div", { className: "ml-auto flex items-center gap-2", children: [_jsx("button", { type: "button", className: "h-9 rounded-md border bg-muted px-3 text-sm hover:bg-muted/80 disabled:opacity-50", disabled: !editor || !!disabled, onClick: doSave, children: "
|
|
214
|
+
} }), _jsxs("div", { className: "ml-auto flex items-center gap-2", children: [_jsx("button", { type: "button", className: "h-9 rounded-md border bg-muted px-3 text-sm hover:bg-muted/80 disabled:opacity-50", disabled: !editor || !!disabled, onClick: doSave, children: t(i18n, "components.actions.save") }), _jsxs("label", { className: "h-9 cursor-pointer rounded-md border bg-muted px-3 text-sm leading-9 hover:bg-muted/80", children: [t(i18n, "components.actions.loadHtml"), _jsx("input", { type: "file", accept: "text/html,.html", className: "hidden", onChange: (e) => {
|
|
208
215
|
const f = e.target.files?.[0];
|
|
209
216
|
if (!f)
|
|
210
217
|
return;
|
|
211
218
|
void loadFromHtmlFile(f);
|
|
212
219
|
e.currentTarget.value = "";
|
|
213
|
-
} })] })] })] }), _jsx("div", { className: "rounded-b-lg border bg-background", style: editorContainerStyle, children: _jsx("div", { className: "h-full overflow-auto p-3", children: _jsx(EditorContent, { editor: editor }) }) }), showCssEditor ? (_jsxs("div", { className: "mt-3", children: [_jsx("label", { className: "mb-1 block text-sm font-medium text-foreground", children: cssEditorLabel }), _jsx("textarea", { value: cssText, onChange: (e) => onCssTextChange?.(e.target.value), className: "min-h-[160px] w-full rounded-lg border p-2 font-mono text-xs", style: cssTextareaStyle }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "
|
|
220
|
+
} })] })] })] }), _jsx("div", { className: "rounded-b-lg border bg-background", style: editorContainerStyle, children: _jsx("div", { className: "h-full overflow-auto p-3", children: _jsx(EditorContent, { editor: editor }) }) }), error ? _jsx("p", { className: "mt-2 text-xs text-red-600", children: error }) : null, showCssEditor ? (_jsxs("div", { className: "mt-3", children: [_jsx("label", { className: "mb-1 block text-sm font-medium text-foreground", children: cssEditorLabel }), _jsx("textarea", { value: cssText, onChange: (e) => onCssTextChange?.(e.target.value), className: "min-h-[160px] w-full rounded-lg border p-2 font-mono text-xs", style: cssTextareaStyle }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: t(i18n, "components.textEditor.help.cssEmbedded") })] })) : null] }));
|
|
221
|
+
}
|
|
222
|
+
export function SgTextEditor(props) {
|
|
223
|
+
const { control, name, rules, ...rest } = props;
|
|
224
|
+
if (control && name) {
|
|
225
|
+
return (_jsx(Controller, { name: name, control: control, rules: rules, render: ({ field, fieldState }) => (_jsx(SgTextEditorBase, { ...rest, error: resolveFieldError(rest.error, fieldState.error?.message), valueHtml: typeof field.value === "string" ? field.value : undefined, onChangeHtml: (html) => field.onChange(html) })) }));
|
|
226
|
+
}
|
|
227
|
+
return _jsx(SgTextEditorBase, { ...rest });
|
|
214
228
|
}
|
|
215
229
|
function ToolbarButton(props) {
|
|
216
230
|
const { label, text, icon, active, disabled, onClick } = props;
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
export type SgToggleSwitchProps = {
|
|
2
|
+
import { type RhfFieldProps } from "../rhf";
|
|
3
|
+
export type SgToggleSwitchProps = RhfFieldProps & {
|
|
5
4
|
id: string;
|
|
6
5
|
label?: string;
|
|
7
6
|
description?: string;
|
|
8
|
-
error?: string;
|
|
9
7
|
className?: string;
|
|
10
8
|
labelClassName?: string;
|
|
11
9
|
switchClassName?: string;
|
|
@@ -27,9 +25,7 @@ export type SgToggleSwitchProps = {
|
|
|
27
25
|
inputProps?: React.InputHTMLAttributes<HTMLInputElement> & {
|
|
28
26
|
ref?: React.Ref<HTMLInputElement>;
|
|
29
27
|
};
|
|
30
|
-
|
|
31
|
-
rules?: RegisterOptions<FieldValues>;
|
|
32
|
-
} & RhfFieldProps;
|
|
28
|
+
};
|
|
33
29
|
export declare function SgToggleSwitch(props: Readonly<SgToggleSwitchProps>): import("react/jsx-runtime").JSX.Element;
|
|
34
30
|
export declare const SgSwitch: typeof SgToggleSwitch;
|
|
35
31
|
export type SgSwitchProps = SgToggleSwitchProps;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgToggleSwitch.d.ts","sourceRoot":"","sources":["../../src/inputs/SgToggleSwitch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"SgToggleSwitch.d.ts","sourceRoot":"","sources":["../../src/inputs/SgToggleSwitch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAwC,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAuClF,MAAM,MAAM,mBAAmB,GAAG,aAAa,GAAG;IAChD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,GAAG,IAAI,CAAC;IACjD,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,UAAU,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;QACzD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;KACnC,CAAC;CACH,CAAC;AAsNF,wBAAgB,cAAc,CAAC,KAAK,EAAE,QAAQ,CAAC,mBAAmB,CAAC,2CA0DlE;AAED,eAAO,MAAM,QAAQ,uBAAiB,CAAC;AACvC,MAAM,MAAM,aAAa,GAAG,mBAAmB,CAAC"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } 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
|
function cn(...parts) {
|
|
7
8
|
return parts.filter(Boolean).join(" ");
|
|
@@ -140,7 +141,7 @@ function SgToggleSwitchBase(props) {
|
|
|
140
141
|
? "cursor-not-allowed opacity-70"
|
|
141
142
|
: isReadOnly
|
|
142
143
|
? "cursor-default"
|
|
143
|
-
: "cursor-pointer"), children: [_jsx("input", { id: props.id, type: "checkbox", role: "switch", "aria-invalid": hasError, "aria-describedby": hasError ? errorId : undefined, "aria-label": props.label ? undefined :
|
|
144
|
+
: "cursor-pointer"), children: [_jsx("input", { id: props.id, type: "checkbox", role: "switch", "aria-invalid": hasError, "aria-describedby": hasError ? errorId : undefined, "aria-label": props.label ? undefined : t(i18n, "components.inputs.toggle.ariaLabel"), checked: isControlled ? checked : undefined, defaultChecked: isControlled ? undefined : toBoolean(props.defaultChecked ?? inputDefaultChecked, false), disabled: isDisabled, readOnly: isReadOnly, ...restInputProps, className: cn("peer sr-only", inputClassName), style: inputStyle, ref: setRefs, onChange: handleChange, onBlur: handleBlur, onClick: handleClick }), _jsxs("span", { className: cn("relative inline-flex h-6 w-11 items-center", props.switchClassName), children: [_jsx("span", { "aria-hidden": "true", className: cn("absolute inset-0 rounded-full border transition-colors duration-200", checked
|
|
144
145
|
? hasError
|
|
145
146
|
? "border-[hsl(var(--destructive))] bg-[hsl(var(--destructive)/0.2)]"
|
|
146
147
|
: "border-[hsl(var(--primary))] bg-[hsl(var(--primary))]"
|
|
@@ -149,9 +150,11 @@ function SgToggleSwitchBase(props) {
|
|
|
149
150
|
: "border-border bg-muted", "peer-focus-visible:ring-2 peer-focus-visible:ring-[hsl(var(--primary)/0.25)]", hasError ? "peer-focus-visible:ring-[hsl(var(--destructive)/0.25)]" : undefined, props.trackClassName), style: { borderRadius: resolvedBorderRadius } }), _jsx("span", { "aria-hidden": "true", className: cn("pointer-events-none relative z-10 inline-flex size-5 items-center justify-center rounded-full bg-[rgb(var(--sg-surface,var(--sg-bg)))] text-[11px] text-foreground/70 shadow-sm transition-transform duration-200", checked ? "translate-x-5" : "translate-x-0", props.thumbClassName), children: checked ? props.onIcon ?? null : props.offIcon ?? null })] }), props.label ? (_jsxs("span", { className: cn("pt-0.5 text-sm text-foreground", props.labelClassName), children: [props.label, props.required ? _jsx("span", { className: "ml-1 text-[hsl(var(--destructive))]", children: "*" }) : null, props.description ? (_jsx("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: props.description })) : null] })) : null] }), _jsx(ErrorText, { id: errorId, message: props.error ?? internalError ?? undefined })] }));
|
|
150
151
|
}
|
|
151
152
|
export function SgToggleSwitch(props) {
|
|
153
|
+
const i18n = useComponentsI18n();
|
|
152
154
|
const { control, name, register, rules, ...rest } = props;
|
|
155
|
+
const resolvedRules = mergeRequiredRule(rules, rest.required, rest.requiredMessage ?? t(i18n, "components.inputs.required"));
|
|
153
156
|
if (name && register) {
|
|
154
|
-
const reg = register(name,
|
|
157
|
+
const reg = register(name, resolvedRules);
|
|
155
158
|
return (_jsx(SgToggleSwitchBase, { ...rest, inputProps: {
|
|
156
159
|
...rest.inputProps,
|
|
157
160
|
name,
|
|
@@ -167,7 +170,7 @@ export function SgToggleSwitch(props) {
|
|
|
167
170
|
} }));
|
|
168
171
|
}
|
|
169
172
|
if (control && name) {
|
|
170
|
-
return (_jsx(Controller, { name: name, control: control, render: ({ field, fieldState }) => (_jsx(SgToggleSwitchBase, { ...rest, error: rest.error
|
|
173
|
+
return (_jsx(Controller, { name: name, control: control, rules: resolvedRules, render: ({ field, fieldState }) => (_jsx(SgToggleSwitchBase, { ...rest, error: resolveFieldError(rest.error, fieldState.error?.message), inputProps: mergeInputPropsWithField(rest.inputProps, field) })) }));
|
|
171
174
|
}
|
|
172
175
|
return _jsx(SgToggleSwitchBase, { ...rest });
|
|
173
176
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgBreadcrumb.d.ts","sourceRoot":"","sources":["../../src/layout/SgBreadcrumb.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"SgBreadcrumb.d.ts","sourceRoot":"","sources":["../../src/layout/SgBreadcrumb.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,SAAS,GAAG,KAAK,GAAG,OAAO,CAAC;AAE1E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,SAAS,CAAC,EAAE,qBAAqB,GAAG,KAAK,CAAC,SAAS,CAAC;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IACzC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAsGF,wBAAgB,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAkL9D;yBAlLe,YAAY"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
import { ChevronRight, Home, MoreHorizontal } from "lucide-react";
|
|
5
|
+
import { t, useComponentsI18n } from "../i18n";
|
|
5
6
|
function cn(...parts) {
|
|
6
7
|
return parts.filter(Boolean).join(" ");
|
|
7
8
|
}
|
|
@@ -60,7 +61,10 @@ function renderActionItem(item, index, className, iconClassName, onNavigate) {
|
|
|
60
61
|
return _jsx("span", { className: cn(className, "cursor-default"), children: content });
|
|
61
62
|
}
|
|
62
63
|
export function SgBreadcrumb(props) {
|
|
63
|
-
const { items, separator = "chevron", maxItems, overflowBehavior = "collapse", showHomeIcon = false, homeHref = "/", homeLabel = "Home", size = "md", variant = "default", ariaLabel
|
|
64
|
+
const { items, separator = "chevron", maxItems, overflowBehavior = "collapse", showHomeIcon = false, homeHref = "/", homeLabel = "Home", size = "md", variant = "default", ariaLabel, overflowLabel, onNavigate, className, itemClassName, style } = props;
|
|
65
|
+
const i18n = useComponentsI18n();
|
|
66
|
+
const resolvedAriaLabel = ariaLabel ?? t(i18n, "components.breadcrumb.ariaLabel");
|
|
67
|
+
const resolvedOverflowLabel = overflowLabel ?? t(i18n, "components.breadcrumb.overflow");
|
|
64
68
|
const visibleItems = React.useMemo(() => items.filter((item) => !item.hidden), [items]);
|
|
65
69
|
const normalizedItems = React.useMemo(() => {
|
|
66
70
|
const base = visibleItems.map((item, index) => ({ item, index }));
|
|
@@ -113,9 +117,9 @@ export function SgBreadcrumb(props) {
|
|
|
113
117
|
current: "text-foreground font-medium"
|
|
114
118
|
};
|
|
115
119
|
const separatorEl = separatorNode(separator, cn("text-muted-foreground", sizeClasses.sep));
|
|
116
|
-
return (_jsx("nav", { "aria-label":
|
|
120
|
+
return (_jsx("nav", { "aria-label": resolvedAriaLabel, className: cn("min-w-0", className), style: style, children: _jsx("div", { className: cn(overflowBehavior === "scroll" ? "overflow-x-auto" : ""), children: _jsx("ol", { className: cn("flex min-w-0 items-center whitespace-nowrap", sizeClasses.root), children: tokens.map((token, tokenIndex) => {
|
|
117
121
|
const isLast = tokenIndex === tokens.length - 1;
|
|
118
|
-
return (_jsxs(React.Fragment, { children: [tokenIndex > 0 ? (_jsx("li", { "aria-hidden": true, className: "inline-flex shrink-0 items-center", children: separatorEl })) : null, token.type === "item" ? (_jsx("li", { className: "inline-flex min-w-0 items-center", children: isLast ? (_jsxs("span", { "aria-current": "page", className: cn("inline-flex min-w-0 items-center gap-1.5", sizeClasses.item, variantClasses.current, itemClassName), children: [token.value.item.icon ? (_jsx("span", { className: cn("inline-flex items-center justify-center", sizeClasses.icon), children: token.value.item.icon })) : null, _jsx("span", { className: "truncate", children: token.value.item.label })] })) : (renderActionItem(token.value.item, token.value.index, cn("inline-flex min-w-0 items-center gap-1.5 transition-colors", sizeClasses.item, variantClasses.item, itemClassName), sizeClasses.icon, onNavigate)) })) : (_jsx("li", { className: "relative inline-flex items-center", children: _jsxs("details", { className: "group", children: [_jsx("summary", { "aria-label":
|
|
122
|
+
return (_jsxs(React.Fragment, { children: [tokenIndex > 0 ? (_jsx("li", { "aria-hidden": true, className: "inline-flex shrink-0 items-center", children: separatorEl })) : null, token.type === "item" ? (_jsx("li", { className: "inline-flex min-w-0 items-center", children: isLast ? (_jsxs("span", { "aria-current": "page", className: cn("inline-flex min-w-0 items-center gap-1.5", sizeClasses.item, variantClasses.current, itemClassName), children: [token.value.item.icon ? (_jsx("span", { className: cn("inline-flex items-center justify-center", sizeClasses.icon), children: token.value.item.icon })) : null, _jsx("span", { className: "truncate", children: token.value.item.label })] })) : (renderActionItem(token.value.item, token.value.index, cn("inline-flex min-w-0 items-center gap-1.5 transition-colors", sizeClasses.item, variantClasses.item, itemClassName), sizeClasses.icon, onNavigate)) })) : (_jsx("li", { className: "relative inline-flex items-center", children: _jsxs("details", { className: "group", children: [_jsx("summary", { "aria-label": resolvedOverflowLabel, className: cn("list-none cursor-pointer rounded-md text-muted-foreground transition-colors", "inline-flex items-center justify-center", sizeClasses.item, "hover:bg-muted hover:text-foreground [&::-webkit-details-marker]:hidden"), children: _jsx(MoreHorizontal, { className: sizeClasses.icon }) }), _jsx("ul", { className: "absolute left-0 top-full z-20 mt-1 min-w-44 rounded-md border border-border bg-popover p-1 shadow-md", children: token.value.map((entry) => (_jsx("li", { children: renderActionItem(entry.item, entry.index, cn("inline-flex w-full min-w-0 items-center gap-1.5 rounded-md px-2 py-1.5 text-left text-sm", "text-popover-foreground hover:bg-muted"), "size-4", onNavigate) }, entry.item.id))) })] }) }))] }, token.type === "item" ? token.value.item.id : `overflow-${tokenIndex}`));
|
|
119
123
|
}) }) }) }));
|
|
120
124
|
}
|
|
121
125
|
SgBreadcrumb.displayName = "SgBreadcrumb";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgCard.d.ts","sourceRoot":"","sources":["../../src/layout/SgCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"SgCard.d.ts","sourceRoot":"","sources":["../../src/layout/SgCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,GAAG,UAAU,CAAC;AACzE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,MAAM,MAAM,cAAc,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtD,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC,GAAG;IACvF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mBAAmB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACvC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,cAAc,CAAC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,KAAK,IAAI,CAAC;IAEtD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAiEF,wBAAgB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,WAAW,CAAC,2CAmelD;yBAnee,MAAM"}
|
package/dist/layout/SgCard.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
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 { t, useComponentsI18n } from "../i18n";
|
|
4
5
|
import { useHasSgEnvironmentProvider, useSgPersistence } from "../environment/SgEnvironmentProvider";
|
|
5
6
|
function cn(...parts) {
|
|
6
7
|
return parts.filter(Boolean).join(" ");
|
|
@@ -39,6 +40,7 @@ function DefaultCaret({ open, size }) {
|
|
|
39
40
|
return (_jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", className: cn("shrink-0 transition-transform duration-200", open ? "rotate-90" : "rotate-0"), "aria-hidden": "true", children: _jsx("path", { fill: "currentColor", d: "M9.29 6.71a1 1 0 0 0 0 1.41L13.17 12l-3.88 3.88a1 1 0 1 0 1.41 1.41l4.59-4.59a1 1 0 0 0 0-1.41L10.7 6.7a1 1 0 0 0-1.41.01Z" }) }));
|
|
40
41
|
}
|
|
41
42
|
export function SgCard(props) {
|
|
43
|
+
const i18n = useComponentsI18n();
|
|
42
44
|
const { id, className, headerClassName, bodyClassName, footerClassName, bgColor, bgColorTitle, bgColorFooter, cardStyle = "default", size = "md", leading, trailing, trailer, title, description, actions, header, footer, clickable = false, disabled = false, collapsible = false, defaultOpen = true, open: controlledOpen, onOpenChange, collapseIcon, collapseIconSize = 18, collapseToggleAlign = "left", toggleOnHeaderClick = true, draggable = false, defaultPosition, dragPersistKey, onPositionChange, style, onClick, children, ...rest } = props;
|
|
43
45
|
const hasEnvironmentProvider = useHasSgEnvironmentProvider();
|
|
44
46
|
const { load: loadPersistedState, save: savePersistedState, clear: clearPersistedState } = useSgPersistence();
|
|
@@ -276,7 +278,7 @@ export function SgCard(props) {
|
|
|
276
278
|
const ToggleButton = collapsible ? (_jsx("button", { "data-sg-card-toggle": "true", type: "button", onClick: (e) => {
|
|
277
279
|
e.stopPropagation();
|
|
278
280
|
toggle();
|
|
279
|
-
}, className: cn("inline-flex h-9 w-9 items-center justify-center rounded-md", "text-muted-foreground hover:text-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--primary)/0.35)]"), "aria-label": isOpen ? "
|
|
281
|
+
}, className: cn("inline-flex h-9 w-9 items-center justify-center rounded-md", "text-muted-foreground hover:text-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--primary)/0.35)]"), "aria-label": isOpen ? t(i18n, "components.actions.collapse") : t(i18n, "components.actions.expand"), "aria-expanded": isOpen, disabled: disabled, children: collapseIcon ?? _jsx(DefaultCaret, { open: isOpen, size: collapseIconSize }) })) : null;
|
|
280
282
|
const headerHasContent = Boolean(header) ||
|
|
281
283
|
Boolean(leading) ||
|
|
282
284
|
Boolean(title) ||
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgCarousel.d.ts","sourceRoot":"","sources":["../../src/layout/SgCarousel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"SgCarousel.d.ts","sourceRoot":"","sources":["../../src/layout/SgCarousel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,qBAAqB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,eAAe;IAC9B,yCAAyC;IACzC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,uCAAuC;IACvC,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IACzB,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,WAAW,CAAC,EAAE,qBAAqB,CAAC;IACpC,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,8BAA8B;IAC9B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,6BAA6B;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yCAAyC;IACzC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,wCAAwC;IACxC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,2CAA2C;IAC3C,gBAAgB,CAAC,EAAE;QACjB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KACxB,CAAC;CACH;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CA8RhD"}
|
|
@@ -2,7 +2,9 @@
|
|
|
2
2
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import React from "react";
|
|
4
4
|
import { ChevronLeft, ChevronRight, ChevronUp, ChevronDown } from "lucide-react";
|
|
5
|
+
import { t, useComponentsI18n } from "../i18n";
|
|
5
6
|
export function SgCarousel(props) {
|
|
7
|
+
const i18n = useComponentsI18n();
|
|
6
8
|
const { id, items, numVisible = 1, numScroll = 1, orientation = "horizontal", circular = true, autoPlay = false, autoPlayInterval = 3000, showNavigators = true, showIndicators = true, className = "", itemClassName = "", width = "100%", height, gap = 16, onIndexChange, style, customNavigators } = props;
|
|
7
9
|
const [activeIndex, setActiveIndex] = React.useState(0);
|
|
8
10
|
const [isHovered, setIsHovered] = React.useState(false);
|
|
@@ -161,6 +163,6 @@ export function SgCarousel(props) {
|
|
|
161
163
|
? `${isHorizontal ? "w-8" : "h-8"} bg-primary`
|
|
162
164
|
: `${isHorizontal ? "w-2" : "h-2"} bg-foreground/20 hover:bg-foreground/35`}
|
|
163
165
|
rounded-full
|
|
164
|
-
`, "aria-label":
|
|
166
|
+
`, "aria-label": t(i18n, "components.carousel.goToSlide", { slide: index + 1 }) }, index));
|
|
165
167
|
}) }))] }));
|
|
166
168
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgExpandablePanel.d.ts","sourceRoot":"","sources":["../../src/layout/SgExpandablePanel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"SgExpandablePanel.d.ts","sourceRoot":"","sources":["../../src/layout/SgExpandablePanel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,0BAA0B,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAC7E,MAAM,MAAM,0BAA0B,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AACpE,MAAM,MAAM,qBAAqB,GAAG,QAAQ,GAAG,SAAS,CAAC;AACzD,MAAM,MAAM,0BAA0B,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACrE,MAAM,MAAM,wBAAwB,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACnE,MAAM,MAAM,qBAAqB,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAExD,MAAM,MAAM,qBAAqB,GAAG;IAClC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC,QAAQ,EAAE,0BAA0B,CAAC;IACrC,SAAS,CAAC,EAAE,0BAA0B,CAAC;IACvC,IAAI,CAAC,EAAE,qBAAqB,CAAC;IAE7B,IAAI,CAAC,EAAE,qBAAqB,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAE/C,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,SAAS,CAAC,EAAE,0BAA0B,CAAC;IAEvC,SAAS,CAAC,EAAE,0BAA0B,CAAC;IACvC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,wBAAwB,CAAC;IAEnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,qBAAqB,CAAC;IAE7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AA6DF,eAAO,MAAM,iBAAiB,+FA6Y7B,CAAC"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
import { createPortal } from "react-dom";
|
|
5
|
+
import { t, useComponentsI18n } from "../i18n";
|
|
5
6
|
function cn(...parts) {
|
|
6
7
|
return parts.filter(Boolean).join(" ");
|
|
7
8
|
}
|
|
@@ -234,7 +235,8 @@ export const SgExpandablePanel = React.forwardRef(function SgExpandablePanel(pro
|
|
|
234
235
|
? ""
|
|
235
236
|
: "transition-[transform,opacity,width,height] ease-out", contentClassName);
|
|
236
237
|
const panelRole = role ?? (mode === "overlay" ? "dialog" : "region");
|
|
237
|
-
const
|
|
238
|
+
const i18n = useComponentsI18n();
|
|
239
|
+
const panelAriaLabel = ariaLabel ?? t(i18n, "components.expandablePanel.ariaLabel");
|
|
238
240
|
const transitionStyle = animationType === "none" ? { transitionDuration: "0ms" } : { transitionDuration: `${durationMs}ms` };
|
|
239
241
|
const resizeHandleClass = expandTo === "right"
|
|
240
242
|
? "absolute inset-y-0 right-0 w-1 cursor-ew-resize"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgMenu.d.ts","sourceRoot":"","sources":["../../src/layout/SgMenu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAqB,KAAK,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAGpF,OAAO,EAAmB,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"SgMenu.d.ts","sourceRoot":"","sources":["../../src/layout/SgMenu.tsx"],"names":[],"mappings":"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"}
|