@lattice-php/lattice 0.10.0 → 0.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/action/components/action-form.js +1 -1
- package/dist/action/components/action-form.js.map +1 -1
- package/dist/chat/components/chat-box.js +1 -1
- package/dist/chat/components/chat-box.js.map +1 -1
- package/dist/chat/components/prompt-input.js +2 -2
- package/dist/chat/components/prompt-input.js.map +1 -1
- package/dist/core/components/combobox.js +1 -1
- package/dist/core/components/combobox.js.map +1 -1
- package/dist/core/components/info-tooltip.js +1 -1
- package/dist/core/components/info-tooltip.js.map +1 -1
- package/dist/core/components/spinner.js +1 -1
- package/dist/core/components/spinner.js.map +1 -1
- package/dist/core/components/tabs.js +1 -1
- package/dist/core/components/tabs.js.map +1 -1
- package/dist/form/components/fields/date-input.js +7 -6
- package/dist/form/components/fields/date-input.js.map +1 -1
- package/dist/form/components/fields/date-picker-control.d.ts +18 -0
- package/dist/form/components/fields/date-picker-control.js +199 -0
- package/dist/form/components/fields/date-picker-control.js.map +1 -0
- package/dist/form/components/fields/date-picker-value.d.ts +10 -0
- package/dist/form/components/fields/date-picker-value.js +125 -0
- package/dist/form/components/fields/date-picker-value.js.map +1 -0
- package/dist/form/components/fields/date-time-input.d.ts +2 -0
- package/dist/form/components/fields/date-time-input.js +34 -0
- package/dist/form/components/fields/date-time-input.js.map +1 -0
- package/dist/form/components/fields/file-upload.js +3 -3
- package/dist/form/components/fields/file-upload.js.map +1 -1
- package/dist/form/components/fields/lazy-date-picker-control.d.ts +2 -0
- package/dist/form/components/fields/lazy-date-picker-control.js +17 -0
- package/dist/form/components/fields/lazy-date-picker-control.js.map +1 -0
- package/dist/form/components/fields/number-input.js +1 -1
- package/dist/form/components/fields/rich-editor.js +3 -3
- package/dist/form/components/fields/rich-editor.js.map +1 -1
- package/dist/form/components/fields/row-action-menu.js +2 -2
- package/dist/form/components/fields/row-action-menu.js.map +1 -1
- package/dist/form/components/fields/select.js +1 -1
- package/dist/form/components/fields/select.js.map +1 -1
- package/dist/form/components/fields/table-rows.js +2 -2
- package/dist/form/components/fields/table-rows.js.map +1 -1
- package/dist/form/components/fields/text-input.js +1 -1
- package/dist/form/components/fields/time-input.d.ts +2 -0
- package/dist/form/components/fields/time-input.js +30 -0
- package/dist/form/components/fields/time-input.js.map +1 -0
- package/dist/form/components/index.d.ts +2 -0
- package/dist/form/components/index.js +3 -1
- package/dist/form/components/types.d.ts +1 -1
- package/dist/form/components/use-controlled-field.d.ts +2 -0
- package/dist/form/components/use-controlled-field.js +6 -2
- package/dist/form/components/use-controlled-field.js.map +1 -1
- package/dist/form/index.js +2 -0
- package/dist/form/index.js.map +1 -1
- package/dist/layout/callouts.js +1 -1
- package/dist/layout/callouts.js.map +1 -1
- package/dist/remote/components/data-list.js +3 -3
- package/dist/remote/components/data-list.js.map +1 -1
- package/dist/table/components/bulk-bar.js +2 -2
- package/dist/table/components/bulk-bar.js.map +1 -1
- package/dist/table/components/column-filter-control.js +5 -5
- package/dist/table/components/column-filter-control.js.map +1 -1
- package/dist/table/components/filter-bar.js +3 -3
- package/dist/table/components/filter-bar.js.map +1 -1
- package/dist/table/components/filter-controls.js +9 -9
- package/dist/table/components/filter-controls.js.map +1 -1
- package/dist/table/components/filter-stack-bar.js +1 -1
- package/dist/table/components/filter-stack-bar.js.map +1 -1
- package/dist/table/components/filter-value-input.js +5 -5
- package/dist/table/components/filter-value-input.js.map +1 -1
- package/dist/table/components/pagination.js +8 -8
- package/dist/table/components/pagination.js.map +1 -1
- package/dist/table/components/table.js +4 -4
- package/dist/table/components/table.js.map +1 -1
- package/dist/table/query.js +1 -1
- package/dist/table/query.js.map +1 -1
- package/dist/toast/toaster.js +1 -1
- package/dist/toast/toaster.js.map +1 -1
- package/dist/types/generated.d.ts +67 -1
- package/package.json +4 -1
- package/resources/icons/calendar.svg +18 -0
- package/resources/icons/chevron-left.svg +15 -0
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { DateValue } from '@internationalized/date';
|
|
2
|
+
export declare function parseDateValue(value: unknown): DateValue | undefined;
|
|
3
|
+
export declare function parseDateTimeValue(value: unknown, timezone: string): DateValue | undefined;
|
|
4
|
+
export declare function parseDateDisplayValue(value: unknown, locale: string): DateValue | undefined;
|
|
5
|
+
export declare function parseDateTimeDisplayValue(value: unknown, locale: string, timezone: string): DateValue | undefined;
|
|
6
|
+
export declare function formatDateValue(value: DateValue | undefined): string;
|
|
7
|
+
export declare function formatDateDisplayValue(value: DateValue | undefined, locale: string): string;
|
|
8
|
+
export declare function formatDateTimeValue(value: DateValue | undefined, timezone: string): string;
|
|
9
|
+
export declare function formatDateTimeDisplayValue(value: DateValue | undefined, locale: string, timezone: string): string;
|
|
10
|
+
export declare function formatTimeInputValue(value: DateValue | undefined, timezone: string): string;
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
import { DateFormatter, parseAbsolute, parseDate, parseDateTime, parseZonedDateTime, toTimeZone, toZoned } from "@internationalized/date";
|
|
2
|
+
//#region resources/js/form/components/fields/date-picker-value.ts
|
|
3
|
+
var dateTimeWithZone = /^(\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(?::\d{2})?)\s+(.+)$/;
|
|
4
|
+
var bareDateTime = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(?::\d{2})?$/;
|
|
5
|
+
var dateTimeFormatOptions = {
|
|
6
|
+
day: "2-digit",
|
|
7
|
+
hour: "2-digit",
|
|
8
|
+
hourCycle: "h23",
|
|
9
|
+
minute: "2-digit",
|
|
10
|
+
month: "2-digit",
|
|
11
|
+
year: "numeric"
|
|
12
|
+
};
|
|
13
|
+
var dateFormatOptions = {
|
|
14
|
+
day: "2-digit",
|
|
15
|
+
month: "2-digit",
|
|
16
|
+
year: "numeric"
|
|
17
|
+
};
|
|
18
|
+
function parseDateValue(value) {
|
|
19
|
+
if (typeof value !== "string" || value === "") return;
|
|
20
|
+
try {
|
|
21
|
+
return parseDate(value.slice(0, 10));
|
|
22
|
+
} catch {
|
|
23
|
+
return;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
function parseDateTimeValue(value, timezone) {
|
|
27
|
+
if (typeof value !== "string" || value === "") return;
|
|
28
|
+
const zoned = dateTimeWithZone.exec(value);
|
|
29
|
+
try {
|
|
30
|
+
if (zoned) return parseZonedDateTime(`${normalizeSeconds(zoned[1])}[${zoned[2]}]`);
|
|
31
|
+
if (bareDateTime.test(value)) return toZoned(parseDateTime(normalizeSeconds(value)), timezone);
|
|
32
|
+
return parseAbsolute(value, timezone);
|
|
33
|
+
} catch {
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
function parseDateDisplayValue(value, locale) {
|
|
38
|
+
return parseDateValue(value) ?? parseLocalizedDate(value, locale);
|
|
39
|
+
}
|
|
40
|
+
function parseDateTimeDisplayValue(value, locale, timezone) {
|
|
41
|
+
return parseDateTimeValue(value, timezone) ?? parseLocalizedDateTime(value, locale, timezone);
|
|
42
|
+
}
|
|
43
|
+
function formatDateValue(value) {
|
|
44
|
+
return value?.toString().slice(0, 10) ?? "";
|
|
45
|
+
}
|
|
46
|
+
function formatDateDisplayValue(value, locale) {
|
|
47
|
+
if (!value) return "";
|
|
48
|
+
return new DateFormatter(locale, {
|
|
49
|
+
...dateFormatOptions,
|
|
50
|
+
timeZone: "UTC"
|
|
51
|
+
}).format(value.toDate("UTC"));
|
|
52
|
+
}
|
|
53
|
+
function formatDateTimeValue(value, timezone) {
|
|
54
|
+
if (!value) return "";
|
|
55
|
+
return `${normalizeSeconds(("timeZone" in value ? toTimeZone(value, timezone) : toZoned(value, timezone)).toString().replace(/\[.+\]$/, "")).slice(0, 19)} ${timezone}`;
|
|
56
|
+
}
|
|
57
|
+
function formatDateTimeDisplayValue(value, locale, timezone) {
|
|
58
|
+
if (!value) return "";
|
|
59
|
+
const zoned = "timeZone" in value ? toTimeZone(value, timezone) : toZoned(value, timezone);
|
|
60
|
+
return new DateFormatter(locale, {
|
|
61
|
+
...dateTimeFormatOptions,
|
|
62
|
+
timeZone: timezone
|
|
63
|
+
}).format(zoned.toDate());
|
|
64
|
+
}
|
|
65
|
+
function formatTimeInputValue(value, timezone) {
|
|
66
|
+
if (!value) return "";
|
|
67
|
+
const zoned = "timeZone" in value ? toTimeZone(value, timezone) : toZoned(value, timezone);
|
|
68
|
+
return [
|
|
69
|
+
String(zoned.hour).padStart(2, "0"),
|
|
70
|
+
String(zoned.minute).padStart(2, "0"),
|
|
71
|
+
String(zoned.second).padStart(2, "0")
|
|
72
|
+
].join(":");
|
|
73
|
+
}
|
|
74
|
+
function normalizeSeconds(value) {
|
|
75
|
+
return /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/.test(value) ? `${value}:00` : value;
|
|
76
|
+
}
|
|
77
|
+
function parseLocalizedDate(value, locale) {
|
|
78
|
+
const parts = localizedParts(value, locale, "date");
|
|
79
|
+
if (!parts) return;
|
|
80
|
+
try {
|
|
81
|
+
return parseDate(`${parts.year.padStart(4, "0")}-${parts.month.padStart(2, "0")}-${parts.day.padStart(2, "0")}`);
|
|
82
|
+
} catch {
|
|
83
|
+
return;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
function parseLocalizedDateTime(value, locale, timezone) {
|
|
87
|
+
const parts = localizedParts(value, locale, "date-time");
|
|
88
|
+
if (!parts || !parts.hour || !parts.minute) return;
|
|
89
|
+
try {
|
|
90
|
+
return toZoned(parseDateTime(`${parts.year.padStart(4, "0")}-${parts.month.padStart(2, "0")}-${parts.day.padStart(2, "0")}T${parts.hour.padStart(2, "0")}:${parts.minute.padStart(2, "0")}:00`), timezone);
|
|
91
|
+
} catch {
|
|
92
|
+
return;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
function localizedParts(value, locale, mode) {
|
|
96
|
+
if (typeof value !== "string" || value.trim() === "") return;
|
|
97
|
+
const formatter = new DateFormatter(locale, mode === "date" ? dateFormatOptions : dateTimeFormatOptions);
|
|
98
|
+
const sample = new Date(Date.UTC(2006, 10, 22, 14, 30, 0));
|
|
99
|
+
const pattern = formatter.formatToParts(sample).map((part) => {
|
|
100
|
+
if ([
|
|
101
|
+
"day",
|
|
102
|
+
"hour",
|
|
103
|
+
"minute",
|
|
104
|
+
"month",
|
|
105
|
+
"year"
|
|
106
|
+
].includes(part.type)) return `(?<${part.type}>\\d{1,4})`;
|
|
107
|
+
return escapeRegExp(part.value).replace(/\s+/g, "\\s*");
|
|
108
|
+
}).join("");
|
|
109
|
+
const groups = new RegExp(`^\\s*${pattern}\\s*$`).exec(value)?.groups;
|
|
110
|
+
if (!groups?.day || !groups.month || !groups.year) return;
|
|
111
|
+
return {
|
|
112
|
+
day: groups.day,
|
|
113
|
+
hour: groups.hour,
|
|
114
|
+
minute: groups.minute,
|
|
115
|
+
month: groups.month,
|
|
116
|
+
year: groups.year
|
|
117
|
+
};
|
|
118
|
+
}
|
|
119
|
+
function escapeRegExp(value) {
|
|
120
|
+
return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
|
|
121
|
+
}
|
|
122
|
+
//#endregion
|
|
123
|
+
export { formatDateDisplayValue, formatDateTimeDisplayValue, formatDateTimeValue, formatDateValue, formatTimeInputValue, parseDateDisplayValue, parseDateTimeDisplayValue, parseDateTimeValue, parseDateValue };
|
|
124
|
+
|
|
125
|
+
//# sourceMappingURL=date-picker-value.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"date-picker-value.js","names":[],"sources":["../../../../resources/js/form/components/fields/date-picker-value.ts"],"sourcesContent":["import {\n DateFormatter,\n type DateValue,\n parseAbsolute,\n parseDate,\n parseDateTime,\n parseZonedDateTime,\n toTimeZone,\n toZoned,\n} from \"@internationalized/date\";\n\nconst dateTimeWithZone = /^(\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}(?::\\d{2})?)\\s+(.+)$/;\nconst bareDateTime = /^\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}(?::\\d{2})?$/;\nconst dateTimeFormatOptions = {\n day: \"2-digit\",\n hour: \"2-digit\",\n hourCycle: \"h23\",\n minute: \"2-digit\",\n month: \"2-digit\",\n year: \"numeric\",\n} as const;\nconst dateFormatOptions = {\n day: \"2-digit\",\n month: \"2-digit\",\n year: \"numeric\",\n} as const;\n\nexport function parseDateValue(value: unknown): DateValue | undefined {\n if (typeof value !== \"string\" || value === \"\") {\n return undefined;\n }\n\n try {\n return parseDate(value.slice(0, 10));\n } catch {\n return undefined;\n }\n}\n\nexport function parseDateTimeValue(value: unknown, timezone: string): DateValue | undefined {\n if (typeof value !== \"string\" || value === \"\") {\n return undefined;\n }\n\n const zoned = dateTimeWithZone.exec(value);\n\n try {\n if (zoned) {\n return parseZonedDateTime(`${normalizeSeconds(zoned[1])}[${zoned[2]}]`);\n }\n\n if (bareDateTime.test(value)) {\n return toZoned(parseDateTime(normalizeSeconds(value)), timezone);\n }\n\n return parseAbsolute(value, timezone);\n } catch {\n return undefined;\n }\n}\n\nexport function parseDateDisplayValue(value: unknown, locale: string): DateValue | undefined {\n return parseDateValue(value) ?? parseLocalizedDate(value, locale);\n}\n\nexport function parseDateTimeDisplayValue(\n value: unknown,\n locale: string,\n timezone: string,\n): DateValue | undefined {\n return parseDateTimeValue(value, timezone) ?? parseLocalizedDateTime(value, locale, timezone);\n}\n\nexport function formatDateValue(value: DateValue | undefined): string {\n return value?.toString().slice(0, 10) ?? \"\";\n}\n\nexport function formatDateDisplayValue(value: DateValue | undefined, locale: string): string {\n if (!value) {\n return \"\";\n }\n\n return new DateFormatter(locale, { ...dateFormatOptions, timeZone: \"UTC\" }).format(\n value.toDate(\"UTC\"),\n );\n}\n\nexport function formatDateTimeValue(value: DateValue | undefined, timezone: string): string {\n if (!value) {\n return \"\";\n }\n\n const zoned = \"timeZone\" in value ? toTimeZone(value, timezone) : toZoned(value, timezone);\n const text = zoned.toString().replace(/\\[.+\\]$/, \"\");\n\n return `${normalizeSeconds(text).slice(0, 19)} ${timezone}`;\n}\n\nexport function formatDateTimeDisplayValue(\n value: DateValue | undefined,\n locale: string,\n timezone: string,\n): string {\n if (!value) {\n return \"\";\n }\n\n const zoned = \"timeZone\" in value ? toTimeZone(value, timezone) : toZoned(value, timezone);\n\n return new DateFormatter(locale, { ...dateTimeFormatOptions, timeZone: timezone }).format(\n zoned.toDate(),\n );\n}\n\nexport function formatTimeInputValue(value: DateValue | undefined, timezone: string): string {\n if (!value) {\n return \"\";\n }\n\n const zoned = \"timeZone\" in value ? toTimeZone(value, timezone) : toZoned(value, timezone);\n\n return [\n String(zoned.hour).padStart(2, \"0\"),\n String(zoned.minute).padStart(2, \"0\"),\n String(zoned.second).padStart(2, \"0\"),\n ].join(\":\");\n}\n\nfunction normalizeSeconds(value: string): string {\n return /^\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}$/.test(value) ? `${value}:00` : value;\n}\n\nfunction parseLocalizedDate(value: unknown, locale: string): DateValue | undefined {\n const parts = localizedParts(value, locale, \"date\");\n\n if (!parts) {\n return undefined;\n }\n\n try {\n return parseDate(\n `${parts.year.padStart(4, \"0\")}-${parts.month.padStart(2, \"0\")}-${parts.day.padStart(2, \"0\")}`,\n );\n } catch {\n return undefined;\n }\n}\n\nfunction parseLocalizedDateTime(\n value: unknown,\n locale: string,\n timezone: string,\n): DateValue | undefined {\n const parts = localizedParts(value, locale, \"date-time\");\n\n if (!parts || !parts.hour || !parts.minute) {\n return undefined;\n }\n\n try {\n return toZoned(\n parseDateTime(\n `${parts.year.padStart(4, \"0\")}-${parts.month.padStart(2, \"0\")}-${parts.day.padStart(2, \"0\")}T${parts.hour.padStart(2, \"0\")}:${parts.minute.padStart(2, \"0\")}:00`,\n ),\n timezone,\n );\n } catch {\n return undefined;\n }\n}\n\nfunction localizedParts(\n value: unknown,\n locale: string,\n mode: \"date\" | \"date-time\",\n):\n | {\n day: string;\n hour?: string;\n minute?: string;\n month: string;\n year: string;\n }\n | undefined {\n if (typeof value !== \"string\" || value.trim() === \"\") {\n return undefined;\n }\n\n const formatter = new DateFormatter(\n locale,\n mode === \"date\" ? dateFormatOptions : dateTimeFormatOptions,\n );\n const sample = new Date(Date.UTC(2006, 10, 22, 14, 30, 0));\n const pattern = formatter\n .formatToParts(sample)\n .map((part) => {\n if ([\"day\", \"hour\", \"minute\", \"month\", \"year\"].includes(part.type)) {\n return `(?<${part.type}>\\\\d{1,4})`;\n }\n\n return escapeRegExp(part.value).replace(/\\s+/g, \"\\\\s*\");\n })\n .join(\"\");\n const match = new RegExp(`^\\\\s*${pattern}\\\\s*$`).exec(value);\n const groups = match?.groups;\n\n if (!groups?.day || !groups.month || !groups.year) {\n return undefined;\n }\n\n return {\n day: groups.day,\n hour: groups.hour,\n minute: groups.minute,\n month: groups.month,\n year: groups.year,\n };\n}\n\nfunction escapeRegExp(value: string): string {\n return value.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\");\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { useTimezone } from "../../../i18n/timezone.js";
|
|
2
|
+
import { LazyDatePickerControl } from "./lazy-date-picker-control.js";
|
|
3
|
+
import { SimpleField } from "./simple-field.js";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
//#region resources/js/form/components/fields/date-time-input.tsx
|
|
6
|
+
var DateTimeInputComponent = ({ node }) => {
|
|
7
|
+
const props = node.props;
|
|
8
|
+
const { timezone } = useTimezone();
|
|
9
|
+
return /* @__PURE__ */ jsx(SimpleField, {
|
|
10
|
+
node,
|
|
11
|
+
label: props.label ?? "",
|
|
12
|
+
children: ({ name, testId, value, readOnly, disabled, change, blur }) => /* @__PURE__ */ jsx(LazyDatePickerControl, {
|
|
13
|
+
autoFocus: props.autoFocus ?? false,
|
|
14
|
+
disabled,
|
|
15
|
+
label: props.label ?? props.name,
|
|
16
|
+
max: props.max,
|
|
17
|
+
min: props.min,
|
|
18
|
+
mode: "date-time",
|
|
19
|
+
name,
|
|
20
|
+
onBlur: blur,
|
|
21
|
+
onChange: change,
|
|
22
|
+
readOnly,
|
|
23
|
+
step: props.step,
|
|
24
|
+
tabIndex: props.tabIndex ?? void 0,
|
|
25
|
+
testId: testId ?? props.name,
|
|
26
|
+
timezone,
|
|
27
|
+
value
|
|
28
|
+
})
|
|
29
|
+
});
|
|
30
|
+
};
|
|
31
|
+
//#endregion
|
|
32
|
+
export { DateTimeInputComponent };
|
|
33
|
+
|
|
34
|
+
//# sourceMappingURL=date-time-input.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"date-time-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/date-time-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { useTimezone } from \"@lattice-php/lattice/i18n\";\nimport { LazyDatePickerControl } from \"./lazy-date-picker-control\";\nimport { SimpleField } from \"./simple-field\";\n\nexport const DateTimeInputComponent: RendererComponent<\"field.date-time-input\"> = ({ node }) => {\n const props = node.props;\n const { timezone } = useTimezone();\n\n return (\n <SimpleField node={node} label={props.label ?? \"\"}>\n {({ name, testId, value, readOnly, disabled, change, blur }) => (\n <LazyDatePickerControl\n autoFocus={props.autoFocus ?? false}\n disabled={disabled}\n label={props.label ?? props.name}\n max={props.max}\n min={props.min}\n mode=\"date-time\"\n name={name}\n onBlur={blur}\n onChange={change}\n readOnly={readOnly}\n step={props.step}\n tabIndex={props.tabIndex ?? undefined}\n testId={testId ?? props.name}\n timezone={timezone}\n value={value}\n />\n )}\n </SimpleField>\n );\n};\n"],"mappings":";;;;;AAKA,IAAa,0BAAsE,EAAE,WAAW;CAC9F,MAAM,QAAQ,KAAK;CACnB,MAAM,EAAE,aAAa,YAAY;CAEjC,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;aAC3C,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAU,QAAQ,WACnD,oBAAC,uBAAD;GACE,WAAW,MAAM,aAAa;GACpB;GACV,OAAO,MAAM,SAAS,MAAM;GAC5B,KAAK,MAAM;GACX,KAAK,MAAM;GACX,MAAK;GACC;GACN,QAAQ;GACR,UAAU;GACA;GACV,MAAM,MAAM;GACZ,UAAU,MAAM,YAAY,KAAA;GAC5B,QAAQ,UAAU,MAAM;GACd;GACH;EACR,CAAA;CAEQ,CAAA;AAEjB"}
|
|
@@ -199,7 +199,7 @@ var FileUploadComponent = ({ node }) => {
|
|
|
199
199
|
disabled: locked,
|
|
200
200
|
onClick: () => fileInputRef.current?.click(),
|
|
201
201
|
type: "button",
|
|
202
|
-
children: t("file-upload.dropzone", "Drop files here or click to browse")
|
|
202
|
+
children: t("form.file-upload.dropzone", "Drop files here or click to browse")
|
|
203
203
|
}),
|
|
204
204
|
/* @__PURE__ */ jsx("ul", {
|
|
205
205
|
className: props.image ? "grid grid-cols-1 gap-3 sm:grid-cols-2" : "flex flex-col gap-2",
|
|
@@ -226,12 +226,12 @@ var FileUploadComponent = ({ node }) => {
|
|
|
226
226
|
}),
|
|
227
227
|
item.status === "error" && /* @__PURE__ */ jsx("span", {
|
|
228
228
|
className: "text-xs text-lt-danger",
|
|
229
|
-
children: t("file-upload.failed", "Failed")
|
|
229
|
+
children: t("form.file-upload.failed", "Failed")
|
|
230
230
|
})
|
|
231
231
|
]
|
|
232
232
|
}),
|
|
233
233
|
(!item.existing || !scope) && /* @__PURE__ */ jsx("button", {
|
|
234
|
-
"aria-label": t("file-upload.remove", "Remove {{name}}", { name: item.name }),
|
|
234
|
+
"aria-label": t("form.file-upload.remove", "Remove {{name}}", { name: item.name }),
|
|
235
235
|
className: "inline-flex size-7 shrink-0 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg disabled:pointer-events-none disabled:opacity-50",
|
|
236
236
|
"data-test": testIdentity(item.existing ? `${name}-remove-existing` : `${name}-remove`),
|
|
237
237
|
disabled: locked,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"file-upload.js","names":[],"sources":["../../../../resources/js/form/components/fields/file-upload.tsx"],"sourcesContent":["import { apiFetch } from \"@lattice-php/lattice/core/api\";\nimport { testIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { useFormContext } from \"../context\";\nimport { useDependentField } from \"../use-dependent-field\";\nimport { useFieldScope } from \"../field-scope\";\nimport { useFormValues, useSetFormValue } from \"../values\";\n\ntype Item = {\n id: string;\n name: string;\n size: number | null;\n status: \"ready\" | \"uploading\" | \"error\";\n progress: number;\n file?: File;\n key?: string;\n url?: string | null;\n token?: string;\n existing: boolean;\n};\n\ntype SignResponse = {\n key: string;\n url: string;\n headers: Record<string, string>;\n method: string;\n};\n\nfunction uploadValueEquals(current: unknown, next: string[] | string): boolean {\n if (Array.isArray(next)) {\n return (\n Array.isArray(current) &&\n current.length === next.length &&\n current.every((value, index) => value === next[index])\n );\n }\n\n return current === next;\n}\n\nexport const FileUploadComponent: RendererComponent<\"field.file-upload\"> = ({ node }) => {\n const { t } = useT(\"lattice\");\n const props = node.props;\n const { hidden, required, readOnly, disabled } = useDependentField(node);\n const { action, componentRef, errors } = useFormContext();\n const name = props.name;\n const scope = useFieldScope();\n const domName = scope ? scope.scopedName(name) : name;\n const errorKey = scope ? scope.errorKey(name) : name;\n const uploadKey = errorKey;\n const values = useFormValues();\n const setValue = useSetFormValue();\n const inputId = useId();\n const fileInputRef = useRef<HTMLInputElement>(null);\n const previewUrlsRef = useRef<Set<string>>(new Set());\n const locked = readOnly || disabled;\n const signed = props.signed;\n const multiple = props.multiple;\n const fieldName = multiple ? `${domName}[]` : domName;\n\n const initial = useMemo<Item[]>(\n () =>\n (props.files ?? []).map((file) => ({\n id: crypto.randomUUID(),\n name: file.name,\n size: file.size,\n status: \"ready\" as const,\n progress: 100,\n key: file.key,\n url: file.url,\n token: file.token,\n existing: true,\n })),\n [props.files],\n );\n const [items, setItems] = useState<Item[]>(initial);\n const [removedTokens, setRemovedTokens] = useState<string[]>([]);\n\n useEffect(() => {\n if (!signed) {\n return;\n }\n\n const keys = items\n .filter((item) => !item.existing && item.key && item.status === \"ready\")\n .map((item) => item.key as string);\n const next = multiple ? keys : (keys[0] ?? \"\");\n\n if (scope) {\n if (!uploadValueEquals(scope.getValue(name), next)) {\n scope.setValue(name, next);\n }\n\n return;\n }\n\n setValue(name, next);\n }, [items, multiple, name, scope, setValue, signed]);\n\n useEffect(() => {\n if (!signed || scope) {\n return;\n }\n\n setValue(`${name}__removed`, removedTokens);\n }, [name, removedTokens, scope, setValue, signed]);\n\n useEffect(\n () => () => {\n previewUrlsRef.current.forEach((url) => URL.revokeObjectURL(url));\n previewUrlsRef.current.clear();\n },\n [],\n );\n\n const multipartFiles = items\n .filter((item) => item.file && !item.existing)\n .map((item) => item.file as File);\n useEffect(() => {\n if (signed || !fileInputRef.current) {\n return;\n }\n\n const transfer = new DataTransfer();\n multipartFiles.forEach((file) => transfer.items.add(file));\n fileInputRef.current.files = transfer.files;\n });\n\n function createPreviewUrl(file: File): string | undefined {\n if (!props.image) {\n return undefined;\n }\n\n const url = URL.createObjectURL(file);\n previewUrlsRef.current.add(url);\n\n return url;\n }\n\n function revokePreviewUrl(item: Item): void {\n if (!item.url || !previewUrlsRef.current.has(item.url)) {\n return;\n }\n\n URL.revokeObjectURL(item.url);\n previewUrlsRef.current.delete(item.url);\n }\n\n async function signAndUpload(item: Item, file: File): Promise<void> {\n const response = await apiFetch(action, {\n method: \"POST\",\n ref: componentRef,\n body: JSON.stringify({\n ...values,\n _upload: uploadKey,\n filename: file.name,\n contentType: file.type,\n }),\n throwOnError: false,\n });\n\n if (!response.ok) {\n setItems((prev) =>\n prev.map((entry) => (entry.id === item.id ? { ...entry, status: \"error\" } : entry)),\n );\n\n return;\n }\n\n const sign = (await response.json()) as SignResponse;\n\n await new Promise<void>((resolve) => {\n const request = new XMLHttpRequest();\n request.open(sign.method, sign.url, true);\n Object.entries(sign.headers).forEach(([key, value]) =>\n request.setRequestHeader(key, String(value)),\n );\n request.upload.onprogress = (event) => {\n if (event.lengthComputable) {\n const progress = Math.round((event.loaded / event.total) * 100);\n setItems((prev) =>\n prev.map((entry) => (entry.id === item.id ? { ...entry, progress } : entry)),\n );\n }\n };\n request.onload = () => {\n setItems((prev) =>\n prev.map((entry) =>\n entry.id === item.id\n ? {\n ...entry,\n status: request.status < 300 ? \"ready\" : \"error\",\n key: sign.key,\n progress: 100,\n }\n : entry,\n ),\n );\n resolve();\n };\n request.onerror = () => {\n setItems((prev) =>\n prev.map((entry) => (entry.id === item.id ? { ...entry, status: \"error\" } : entry)),\n );\n resolve();\n };\n request.send(file);\n });\n }\n\n function addFiles(fileList: FileList | null): void {\n if (!fileList || locked) {\n return;\n }\n\n const incoming = Array.from(fileList);\n const next = incoming.map<Item>((file) => ({\n id: crypto.randomUUID(),\n name: file.name,\n size: file.size,\n status: signed ? \"uploading\" : \"ready\",\n progress: 0,\n file,\n url: createPreviewUrl(file),\n existing: false,\n }));\n\n if (!multiple) {\n items.forEach(revokePreviewUrl);\n\n if (!scope) {\n const replacedTokens = items\n .filter((item) => item.existing && item.token)\n .map((item) => item.token as string);\n\n if (replacedTokens.length > 0) {\n setRemovedTokens((tokens) => [...tokens, ...replacedTokens]);\n }\n }\n }\n\n setItems((prev) => (multiple ? [...prev, ...next] : next));\n\n if (signed) {\n next.forEach((item, index) => void signAndUpload(item, incoming[index]));\n }\n }\n\n function removeItem(id: string): void {\n const target = items.find((item) => item.id === id);\n\n if (target) {\n revokePreviewUrl(target);\n }\n\n setItems((prev) => {\n if (target?.existing && target.token && !scope) {\n setRemovedTokens((tokens) => [...tokens, target.token as string]);\n }\n return prev.filter((i) => i.id !== id);\n });\n }\n\n if (hidden) {\n return null;\n }\n\n return (\n <FormFieldFrame\n error={errors[errorKey]}\n helperText={props.helperText ?? undefined}\n tooltip={props.tooltip ?? undefined}\n label={props.label ?? \"\"}\n name={name}\n required={required}\n >\n <div\n className=\"flex flex-col gap-3 rounded-lt-sm border border-dashed border-lt-border bg-lt-surface px-4 py-6\"\n data-test={testIdentity(name)}\n onDragOver={(event) => event.preventDefault()}\n onDrop={(event) => {\n event.preventDefault();\n addFiles(event.dataTransfer.files);\n }}\n >\n <button\n className=\"text-sm text-lt-muted-fg\"\n disabled={locked}\n onClick={() => fileInputRef.current?.click()}\n type=\"button\"\n >\n {t(\"file-upload.dropzone\", \"Drop files here or click to browse\")}\n </button>\n\n <ul\n className={props.image ? \"grid grid-cols-1 gap-3 sm:grid-cols-2\" : \"flex flex-col gap-2\"}\n >\n {items.map((item) => (\n <li\n className={\n props.image\n ? \"flex min-w-0 items-center gap-3 rounded-lt-sm border border-lt-border bg-lt-bg p-2 text-sm\"\n : \"flex items-center justify-between gap-3 text-sm\"\n }\n key={item.id}\n >\n {props.image && item.url ? (\n <img\n alt={item.name}\n className=\"size-16 shrink-0 rounded-lt-sm border border-lt-border object-cover\"\n data-test={testIdentity(`${name}-preview`)}\n src={item.url}\n />\n ) : null}\n <div className=\"min-w-0 flex-1\">\n <span className=\"block truncate\" data-test={testIdentity(`${name}-item`)}>\n {item.name}\n </span>\n {item.status === \"uploading\" && (\n <span className=\"text-xs text-lt-muted-fg\">{item.progress}%</span>\n )}\n {item.status === \"error\" && (\n <span className=\"text-xs text-lt-danger\">\n {t(\"file-upload.failed\", \"Failed\")}\n </span>\n )}\n </div>\n {(!item.existing || !scope) && (\n <button\n aria-label={t(\"file-upload.remove\", \"Remove {{name}}\", { name: item.name })}\n className=\"inline-flex size-7 shrink-0 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg disabled:pointer-events-none disabled:opacity-50\"\n data-test={testIdentity(\n item.existing ? `${name}-remove-existing` : `${name}-remove`,\n )}\n disabled={locked}\n onClick={() => removeItem(item.id)}\n type=\"button\"\n >\n <Icon name=\"x\" aria-hidden=\"true\" className=\"size-lt-icon-sm\" />\n </button>\n )}\n {signed && !item.existing && item.key && item.status === \"ready\" && (\n <input\n data-test={testIdentity(`${name}-uploaded`)}\n name={fieldName}\n type=\"hidden\"\n value={item.key}\n />\n )}\n </li>\n ))}\n </ul>\n\n {!scope &&\n removedTokens.map((token) => (\n <input key={token} name={`${name}__removed[]`} type=\"hidden\" value={token} />\n ))}\n\n <input\n accept={props.accept ?? undefined}\n aria-label={props.label ?? name}\n className=\"sr-only\"\n data-test={testIdentity(`${name}-input`)}\n id={inputId}\n multiple={multiple}\n name={signed ? undefined : fieldName}\n onChange={(event) => {\n addFiles(event.target.files);\n if (signed) {\n event.target.value = \"\";\n }\n }}\n ref={fileInputRef}\n type=\"file\"\n />\n </div>\n </FormFieldFrame>\n );\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"file-upload.js","names":[],"sources":["../../../../resources/js/form/components/fields/file-upload.tsx"],"sourcesContent":["import { apiFetch } from \"@lattice-php/lattice/core/api\";\nimport { testIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { useFormContext } from \"../context\";\nimport { useDependentField } from \"../use-dependent-field\";\nimport { useFieldScope } from \"../field-scope\";\nimport { useFormValues, useSetFormValue } from \"../values\";\n\ntype Item = {\n id: string;\n name: string;\n size: number | null;\n status: \"ready\" | \"uploading\" | \"error\";\n progress: number;\n file?: File;\n key?: string;\n url?: string | null;\n token?: string;\n existing: boolean;\n};\n\ntype SignResponse = {\n key: string;\n url: string;\n headers: Record<string, string>;\n method: string;\n};\n\nfunction uploadValueEquals(current: unknown, next: string[] | string): boolean {\n if (Array.isArray(next)) {\n return (\n Array.isArray(current) &&\n current.length === next.length &&\n current.every((value, index) => value === next[index])\n );\n }\n\n return current === next;\n}\n\nexport const FileUploadComponent: RendererComponent<\"field.file-upload\"> = ({ node }) => {\n const { t } = useT(\"lattice\");\n const props = node.props;\n const { hidden, required, readOnly, disabled } = useDependentField(node);\n const { action, componentRef, errors } = useFormContext();\n const name = props.name;\n const scope = useFieldScope();\n const domName = scope ? scope.scopedName(name) : name;\n const errorKey = scope ? scope.errorKey(name) : name;\n const uploadKey = errorKey;\n const values = useFormValues();\n const setValue = useSetFormValue();\n const inputId = useId();\n const fileInputRef = useRef<HTMLInputElement>(null);\n const previewUrlsRef = useRef<Set<string>>(new Set());\n const locked = readOnly || disabled;\n const signed = props.signed;\n const multiple = props.multiple;\n const fieldName = multiple ? `${domName}[]` : domName;\n\n const initial = useMemo<Item[]>(\n () =>\n (props.files ?? []).map((file) => ({\n id: crypto.randomUUID(),\n name: file.name,\n size: file.size,\n status: \"ready\" as const,\n progress: 100,\n key: file.key,\n url: file.url,\n token: file.token,\n existing: true,\n })),\n [props.files],\n );\n const [items, setItems] = useState<Item[]>(initial);\n const [removedTokens, setRemovedTokens] = useState<string[]>([]);\n\n useEffect(() => {\n if (!signed) {\n return;\n }\n\n const keys = items\n .filter((item) => !item.existing && item.key && item.status === \"ready\")\n .map((item) => item.key as string);\n const next = multiple ? keys : (keys[0] ?? \"\");\n\n if (scope) {\n if (!uploadValueEquals(scope.getValue(name), next)) {\n scope.setValue(name, next);\n }\n\n return;\n }\n\n setValue(name, next);\n }, [items, multiple, name, scope, setValue, signed]);\n\n useEffect(() => {\n if (!signed || scope) {\n return;\n }\n\n setValue(`${name}__removed`, removedTokens);\n }, [name, removedTokens, scope, setValue, signed]);\n\n useEffect(\n () => () => {\n previewUrlsRef.current.forEach((url) => URL.revokeObjectURL(url));\n previewUrlsRef.current.clear();\n },\n [],\n );\n\n const multipartFiles = items\n .filter((item) => item.file && !item.existing)\n .map((item) => item.file as File);\n useEffect(() => {\n if (signed || !fileInputRef.current) {\n return;\n }\n\n const transfer = new DataTransfer();\n multipartFiles.forEach((file) => transfer.items.add(file));\n fileInputRef.current.files = transfer.files;\n });\n\n function createPreviewUrl(file: File): string | undefined {\n if (!props.image) {\n return undefined;\n }\n\n const url = URL.createObjectURL(file);\n previewUrlsRef.current.add(url);\n\n return url;\n }\n\n function revokePreviewUrl(item: Item): void {\n if (!item.url || !previewUrlsRef.current.has(item.url)) {\n return;\n }\n\n URL.revokeObjectURL(item.url);\n previewUrlsRef.current.delete(item.url);\n }\n\n async function signAndUpload(item: Item, file: File): Promise<void> {\n const response = await apiFetch(action, {\n method: \"POST\",\n ref: componentRef,\n body: JSON.stringify({\n ...values,\n _upload: uploadKey,\n filename: file.name,\n contentType: file.type,\n }),\n throwOnError: false,\n });\n\n if (!response.ok) {\n setItems((prev) =>\n prev.map((entry) => (entry.id === item.id ? { ...entry, status: \"error\" } : entry)),\n );\n\n return;\n }\n\n const sign = (await response.json()) as SignResponse;\n\n await new Promise<void>((resolve) => {\n const request = new XMLHttpRequest();\n request.open(sign.method, sign.url, true);\n Object.entries(sign.headers).forEach(([key, value]) =>\n request.setRequestHeader(key, String(value)),\n );\n request.upload.onprogress = (event) => {\n if (event.lengthComputable) {\n const progress = Math.round((event.loaded / event.total) * 100);\n setItems((prev) =>\n prev.map((entry) => (entry.id === item.id ? { ...entry, progress } : entry)),\n );\n }\n };\n request.onload = () => {\n setItems((prev) =>\n prev.map((entry) =>\n entry.id === item.id\n ? {\n ...entry,\n status: request.status < 300 ? \"ready\" : \"error\",\n key: sign.key,\n progress: 100,\n }\n : entry,\n ),\n );\n resolve();\n };\n request.onerror = () => {\n setItems((prev) =>\n prev.map((entry) => (entry.id === item.id ? { ...entry, status: \"error\" } : entry)),\n );\n resolve();\n };\n request.send(file);\n });\n }\n\n function addFiles(fileList: FileList | null): void {\n if (!fileList || locked) {\n return;\n }\n\n const incoming = Array.from(fileList);\n const next = incoming.map<Item>((file) => ({\n id: crypto.randomUUID(),\n name: file.name,\n size: file.size,\n status: signed ? \"uploading\" : \"ready\",\n progress: 0,\n file,\n url: createPreviewUrl(file),\n existing: false,\n }));\n\n if (!multiple) {\n items.forEach(revokePreviewUrl);\n\n if (!scope) {\n const replacedTokens = items\n .filter((item) => item.existing && item.token)\n .map((item) => item.token as string);\n\n if (replacedTokens.length > 0) {\n setRemovedTokens((tokens) => [...tokens, ...replacedTokens]);\n }\n }\n }\n\n setItems((prev) => (multiple ? [...prev, ...next] : next));\n\n if (signed) {\n next.forEach((item, index) => void signAndUpload(item, incoming[index]));\n }\n }\n\n function removeItem(id: string): void {\n const target = items.find((item) => item.id === id);\n\n if (target) {\n revokePreviewUrl(target);\n }\n\n setItems((prev) => {\n if (target?.existing && target.token && !scope) {\n setRemovedTokens((tokens) => [...tokens, target.token as string]);\n }\n return prev.filter((i) => i.id !== id);\n });\n }\n\n if (hidden) {\n return null;\n }\n\n return (\n <FormFieldFrame\n error={errors[errorKey]}\n helperText={props.helperText ?? undefined}\n tooltip={props.tooltip ?? undefined}\n label={props.label ?? \"\"}\n name={name}\n required={required}\n >\n <div\n className=\"flex flex-col gap-3 rounded-lt-sm border border-dashed border-lt-border bg-lt-surface px-4 py-6\"\n data-test={testIdentity(name)}\n onDragOver={(event) => event.preventDefault()}\n onDrop={(event) => {\n event.preventDefault();\n addFiles(event.dataTransfer.files);\n }}\n >\n <button\n className=\"text-sm text-lt-muted-fg\"\n disabled={locked}\n onClick={() => fileInputRef.current?.click()}\n type=\"button\"\n >\n {t(\"form.file-upload.dropzone\", \"Drop files here or click to browse\")}\n </button>\n\n <ul\n className={props.image ? \"grid grid-cols-1 gap-3 sm:grid-cols-2\" : \"flex flex-col gap-2\"}\n >\n {items.map((item) => (\n <li\n className={\n props.image\n ? \"flex min-w-0 items-center gap-3 rounded-lt-sm border border-lt-border bg-lt-bg p-2 text-sm\"\n : \"flex items-center justify-between gap-3 text-sm\"\n }\n key={item.id}\n >\n {props.image && item.url ? (\n <img\n alt={item.name}\n className=\"size-16 shrink-0 rounded-lt-sm border border-lt-border object-cover\"\n data-test={testIdentity(`${name}-preview`)}\n src={item.url}\n />\n ) : null}\n <div className=\"min-w-0 flex-1\">\n <span className=\"block truncate\" data-test={testIdentity(`${name}-item`)}>\n {item.name}\n </span>\n {item.status === \"uploading\" && (\n <span className=\"text-xs text-lt-muted-fg\">{item.progress}%</span>\n )}\n {item.status === \"error\" && (\n <span className=\"text-xs text-lt-danger\">\n {t(\"form.file-upload.failed\", \"Failed\")}\n </span>\n )}\n </div>\n {(!item.existing || !scope) && (\n <button\n aria-label={t(\"form.file-upload.remove\", \"Remove {{name}}\", { name: item.name })}\n className=\"inline-flex size-7 shrink-0 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg disabled:pointer-events-none disabled:opacity-50\"\n data-test={testIdentity(\n item.existing ? `${name}-remove-existing` : `${name}-remove`,\n )}\n disabled={locked}\n onClick={() => removeItem(item.id)}\n type=\"button\"\n >\n <Icon name=\"x\" aria-hidden=\"true\" className=\"size-lt-icon-sm\" />\n </button>\n )}\n {signed && !item.existing && item.key && item.status === \"ready\" && (\n <input\n data-test={testIdentity(`${name}-uploaded`)}\n name={fieldName}\n type=\"hidden\"\n value={item.key}\n />\n )}\n </li>\n ))}\n </ul>\n\n {!scope &&\n removedTokens.map((token) => (\n <input key={token} name={`${name}__removed[]`} type=\"hidden\" value={token} />\n ))}\n\n <input\n accept={props.accept ?? undefined}\n aria-label={props.label ?? name}\n className=\"sr-only\"\n data-test={testIdentity(`${name}-input`)}\n id={inputId}\n multiple={multiple}\n name={signed ? undefined : fieldName}\n onChange={(event) => {\n addFiles(event.target.files);\n if (signed) {\n event.target.value = \"\";\n }\n }}\n ref={fileInputRef}\n type=\"file\"\n />\n </div>\n </FormFieldFrame>\n );\n};\n"],"mappings":"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"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { Suspense, lazy } from "react";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
//#region resources/js/form/components/fields/lazy-date-picker-control.tsx
|
|
4
|
+
var DatePickerControl = lazy(async () => {
|
|
5
|
+
const { DatePickerControl } = await import("./date-picker-control.js");
|
|
6
|
+
return { default: DatePickerControl };
|
|
7
|
+
});
|
|
8
|
+
function LazyDatePickerControl(props) {
|
|
9
|
+
return /* @__PURE__ */ jsx(Suspense, {
|
|
10
|
+
fallback: null,
|
|
11
|
+
children: /* @__PURE__ */ jsx(DatePickerControl, { ...props })
|
|
12
|
+
});
|
|
13
|
+
}
|
|
14
|
+
//#endregion
|
|
15
|
+
export { LazyDatePickerControl };
|
|
16
|
+
|
|
17
|
+
//# sourceMappingURL=lazy-date-picker-control.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"lazy-date-picker-control.js","names":[],"sources":["../../../../resources/js/form/components/fields/lazy-date-picker-control.tsx"],"sourcesContent":["import { lazy, Suspense } from \"react\";\nimport type { DatePickerControlProps } from \"./date-picker-control\";\n\nconst DatePickerControl = lazy(async () => {\n const { DatePickerControl } = await import(\"./date-picker-control\");\n\n return { default: DatePickerControl };\n});\n\nexport function LazyDatePickerControl(props: DatePickerControlProps) {\n return (\n <Suspense fallback={null}>\n <DatePickerControl {...props} />\n </Suspense>\n );\n}\n"],"mappings":";;;AAGA,IAAM,oBAAoB,KAAK,YAAY;CACzC,MAAM,EAAE,sBAAsB,MAAM,OAAO;CAE3C,OAAO,EAAE,SAAS,kBAAkB;AACtC,CAAC;AAED,SAAgB,sBAAsB,OAA+B;CACnE,OACE,oBAAC,UAAD;EAAU,UAAU;YAClB,oBAAC,mBAAD,EAAmB,GAAI,MAAQ,CAAA;CACvB,CAAA;AAEd"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { Input } from "../base/input.js";
|
|
2
1
|
import { SimpleField } from "./simple-field.js";
|
|
3
2
|
import { AffixGroup } from "../base/affix-group.js";
|
|
3
|
+
import { Input } from "../base/input.js";
|
|
4
4
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
5
|
//#region resources/js/form/components/fields/number-input.tsx
|
|
6
6
|
var NumberInputComponent = ({ node }) => {
|
|
@@ -229,12 +229,12 @@ function EmojiPicker({ editor }) {
|
|
|
229
229
|
return /* @__PURE__ */ jsxs("div", {
|
|
230
230
|
className: "relative",
|
|
231
231
|
children: [/* @__PURE__ */ jsx("button", {
|
|
232
|
-
"aria-label": t("editor.insert-emoji", "Insert emoji"),
|
|
232
|
+
"aria-label": t("form.editor.insert-emoji", "Insert emoji"),
|
|
233
233
|
"data-test": "editor-emoji",
|
|
234
234
|
className: "inline-flex size-7 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg [&_svg]:size-lt-icon-md",
|
|
235
235
|
onClick: () => setOpen((value) => !value),
|
|
236
236
|
onMouseDown: (event) => event.preventDefault(),
|
|
237
|
-
title: t("editor.insert-emoji", "Insert emoji"),
|
|
237
|
+
title: t("form.editor.insert-emoji", "Insert emoji"),
|
|
238
238
|
type: "button",
|
|
239
239
|
children: /* @__PURE__ */ jsx(Icon, { name: "smile" })
|
|
240
240
|
}), open && /* @__PURE__ */ jsx("div", {
|
|
@@ -259,7 +259,7 @@ function Toolbar({ editor }) {
|
|
|
259
259
|
children: [
|
|
260
260
|
toolbar.map((item, index) => {
|
|
261
261
|
if (item === "separator") return /* @__PURE__ */ jsx("span", { className: "mx-1 h-5 w-px bg-lt-border" }, `sep-${index}`);
|
|
262
|
-
const label = t(`editor.${item.key}`, item.label);
|
|
262
|
+
const label = t(`form.editor.${item.key}`, item.label);
|
|
263
263
|
return /* @__PURE__ */ jsx("button", {
|
|
264
264
|
"aria-label": label,
|
|
265
265
|
"aria-pressed": item.isActive(editor),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rich-editor.js","names":[],"sources":["../../../../resources/js/form/components/fields/rich-editor.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { Details, DetailsContent, DetailsSummary } from \"@tiptap/extension-details\";\nimport { Highlight } from \"@tiptap/extension-highlight\";\nimport { Link } from \"@tiptap/extension-link\";\nimport { TableKit } from \"@tiptap/extension-table\";\nimport { TextAlign } from \"@tiptap/extension-text-align\";\nimport { type Editor, EditorContent, useEditor } from \"@tiptap/react\";\nimport { StarterKit } from \"@tiptap/starter-kit\";\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { useFormContext } from \"../context\";\nimport { useFieldScope } from \"../field-scope\";\nimport { useDependentField } from \"../use-dependent-field\";\nimport { useFieldCommit } from \"../use-field-commit\";\nimport { useFormValue } from \"../values\";\n\ntype ToolbarItem =\n | \"separator\"\n | {\n icon: string;\n key: string;\n label: string;\n isActive: (editor: Editor) => boolean;\n isDisabled?: (editor: Editor) => boolean;\n run: (editor: Editor) => void;\n };\n\nconst toolbar: ToolbarItem[] = [\n {\n icon: \"bold\",\n key: \"bold\",\n label: \"Bold\",\n isActive: (e) => e.isActive(\"bold\"),\n run: (e) => e.chain().focus().toggleBold().run(),\n },\n {\n icon: \"italic\",\n key: \"italic\",\n label: \"Italic\",\n isActive: (e) => e.isActive(\"italic\"),\n run: (e) => e.chain().focus().toggleItalic().run(),\n },\n {\n icon: \"strikethrough\",\n key: \"strikethrough\",\n label: \"Strikethrough\",\n isActive: (e) => e.isActive(\"strike\"),\n run: (e) => e.chain().focus().toggleStrike().run(),\n },\n {\n icon: \"underline\",\n key: \"underline\",\n label: \"Underline\",\n isActive: (e) => e.isActive(\"underline\"),\n run: (e) => e.chain().focus().toggleUnderline().run(),\n },\n {\n icon: \"highlighter\",\n key: \"highlight\",\n label: \"Highlight\",\n isActive: (e) => e.isActive(\"highlight\"),\n run: (e) => e.chain().focus().toggleHighlight().run(),\n },\n \"separator\",\n {\n icon: \"heading-1\",\n key: \"heading-1\",\n label: \"Heading 1\",\n isActive: (e) => e.isActive(\"heading\", { level: 1 }),\n run: (e) => e.chain().focus().toggleHeading({ level: 1 }).run(),\n },\n {\n icon: \"heading-2\",\n key: \"heading-2\",\n label: \"Heading 2\",\n isActive: (e) => e.isActive(\"heading\", { level: 2 }),\n run: (e) => e.chain().focus().toggleHeading({ level: 2 }).run(),\n },\n {\n icon: \"heading-3\",\n key: \"heading-3\",\n label: \"Heading 3\",\n isActive: (e) => e.isActive(\"heading\", { level: 3 }),\n run: (e) => e.chain().focus().toggleHeading({ level: 3 }).run(),\n },\n \"separator\",\n {\n icon: \"list\",\n key: \"bullet-list\",\n label: \"Bullet list\",\n isActive: (e) => e.isActive(\"bulletList\"),\n run: (e) => e.chain().focus().toggleBulletList().run(),\n },\n {\n icon: \"list-ordered\",\n key: \"ordered-list\",\n label: \"Ordered list\",\n isActive: (e) => e.isActive(\"orderedList\"),\n run: (e) => e.chain().focus().toggleOrderedList().run(),\n },\n {\n icon: \"quote\",\n key: \"blockquote\",\n label: \"Blockquote\",\n isActive: (e) => e.isActive(\"blockquote\"),\n run: (e) => e.chain().focus().toggleBlockquote().run(),\n },\n {\n icon: \"code\",\n key: \"code-block\",\n label: \"Code block\",\n isActive: (e) => e.isActive(\"codeBlock\"),\n run: (e) => e.chain().focus().toggleCodeBlock().run(),\n },\n {\n icon: \"minus\",\n key: \"horizontal-rule\",\n label: \"Horizontal rule\",\n isActive: () => false,\n run: (e) => e.chain().focus().setHorizontalRule().run(),\n },\n \"separator\",\n {\n icon: \"align-left\",\n key: \"align-left\",\n label: \"Align left\",\n isActive: (e) => e.isActive({ textAlign: \"left\" }),\n run: (e) => e.chain().focus().setTextAlign(\"left\").run(),\n },\n {\n icon: \"align-center\",\n key: \"align-center\",\n label: \"Align center\",\n isActive: (e) => e.isActive({ textAlign: \"center\" }),\n run: (e) => e.chain().focus().setTextAlign(\"center\").run(),\n },\n {\n icon: \"align-right\",\n key: \"align-right\",\n label: \"Align right\",\n isActive: (e) => e.isActive({ textAlign: \"right\" }),\n run: (e) => e.chain().focus().setTextAlign(\"right\").run(),\n },\n {\n icon: \"align-justify\",\n key: \"justify\",\n label: \"Justify\",\n isActive: (e) => e.isActive({ textAlign: \"justify\" }),\n run: (e) => e.chain().focus().setTextAlign(\"justify\").run(),\n },\n \"separator\",\n {\n icon: \"link\",\n key: \"link\",\n label: \"Link\",\n isActive: (e) => e.isActive(\"link\"),\n run: (e) => {\n if (e.isActive(\"link\")) {\n e.chain().focus().unsetLink().run();\n return;\n }\n const url = window.prompt(\"Link URL\");\n if (url) {\n e.chain().focus().extendMarkRange(\"link\").setLink({ href: url }).run();\n }\n },\n },\n \"separator\",\n {\n icon: \"table\",\n key: \"insert-table\",\n label: \"Insert table\",\n isActive: (e) => e.isActive(\"table\"),\n run: (e) => e.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(),\n },\n {\n icon: \"columns-3\",\n key: \"add-column\",\n label: \"Add column\",\n isActive: () => false,\n isDisabled: (e) => !e.can().addColumnAfter(),\n run: (e) => e.chain().focus().addColumnAfter().run(),\n },\n {\n icon: \"rows-3\",\n key: \"add-row\",\n label: \"Add row\",\n isActive: () => false,\n isDisabled: (e) => !e.can().addRowAfter(),\n run: (e) => e.chain().focus().addRowAfter().run(),\n },\n {\n icon: \"trash-2\",\n key: \"delete-table\",\n label: \"Delete table\",\n isActive: () => false,\n isDisabled: (e) => !e.can().deleteTable(),\n run: (e) => e.chain().focus().deleteTable().run(),\n },\n {\n icon: \"chevron-right\",\n key: \"details\",\n label: \"Details\",\n isActive: (e) => e.isActive(\"details\"),\n run: (e) => {\n if (e.isActive(\"details\")) {\n e.chain().focus().unsetDetails().run();\n return;\n }\n e.chain().focus().setDetails().run();\n },\n },\n];\n\nconst emojis = [\n \"😀\",\n \"😅\",\n \"😂\",\n \"🥳\",\n \"😎\",\n \"🤔\",\n \"👍\",\n \"🙏\",\n \"🔥\",\n \"🎉\",\n \"🚀\",\n \"💡\",\n \"✅\",\n \"❌\",\n \"⭐\",\n \"❤️\",\n];\n\nfunction EmojiPicker({ editor }: { editor: Editor }) {\n const { t } = useT(\"lattice\");\n const [open, setOpen] = useState(false);\n\n return (\n <div className=\"relative\">\n <button\n aria-label={t(\"editor.insert-emoji\", \"Insert emoji\")}\n data-test=\"editor-emoji\"\n className=\"inline-flex size-7 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg [&_svg]:size-lt-icon-md\"\n onClick={() => setOpen((value) => !value)}\n onMouseDown={(event) => event.preventDefault()}\n title={t(\"editor.insert-emoji\", \"Insert emoji\")}\n type=\"button\"\n >\n <Icon name=\"smile\" />\n </button>\n {open && (\n <div className=\"absolute z-10 mt-1 grid grid-cols-8 gap-0.5 rounded-lt-sm border border-lt-border bg-lt-bg p-1 shadow-lt-md\">\n {emojis.map((emoji) => (\n <button\n className=\"inline-flex size-7 items-center justify-center rounded-lt-sm text-base hover:bg-lt-accent\"\n key={emoji}\n onClick={() => {\n editor.chain().focus().insertContent(emoji).run();\n setOpen(false);\n }}\n onMouseDown={(event) => event.preventDefault()}\n type=\"button\"\n >\n {emoji}\n </button>\n ))}\n </div>\n )}\n </div>\n );\n}\n\nfunction Toolbar({ editor }: { editor: Editor }) {\n const { t } = useT(\"lattice\");\n\n return (\n <div className=\"flex flex-wrap items-center gap-0.5 border-b border-lt-border p-1\">\n {toolbar.map((item, index) => {\n if (item === \"separator\") {\n // eslint-disable-next-line react/no-array-index-key\n return <span key={`sep-${index}`} className=\"mx-1 h-5 w-px bg-lt-border\" />;\n }\n\n const label = t(`editor.${item.key}`, item.label);\n\n return (\n <button\n aria-label={label}\n aria-pressed={item.isActive(editor)}\n data-test={`editor-${item.key}`}\n className={cn(\n \"inline-flex size-7 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg disabled:pointer-events-none disabled:opacity-40 [&_svg]:size-lt-icon-md\",\n item.isActive(editor) && \"bg-lt-accent text-lt-accent-fg\",\n )}\n disabled={item.isDisabled?.(editor) ?? false}\n key={item.key}\n // Keep focus in the editor so toolbar clicks don't blur it (which would\n // otherwise trigger a precognition request).\n onClick={() => item.run(editor)}\n onMouseDown={(event) => event.preventDefault()}\n title={label}\n type=\"button\"\n >\n <Icon name={item.icon} />\n </button>\n );\n })}\n <span className=\"mx-1 h-5 w-px bg-lt-border\" />\n <EmojiPicker editor={editor} />\n </div>\n );\n}\n\nexport const RichEditorComponent: RendererComponent<\"field.rich-editor\"> = ({ node }) => {\n const { errors } = useFormContext();\n const { hidden, required, readOnly, disabled } = useDependentField(node);\n const { change, blur } = useFieldCommit();\n const name = node.props.name;\n const scope = useFieldScope();\n const globalValue = useFormValue(name);\n const storedValue = scope ? scope.getValue(name) : globalValue;\n const domName = scope ? scope.scopedName(name) : name;\n const errorKey = scope ? scope.errorKey(name) : name;\n const locked = readOnly || disabled;\n const initialContent =\n typeof storedValue === \"object\" && storedValue !== null\n ? (storedValue as object)\n : ((node.props.value as object | undefined) ?? \"\");\n\n const editor = useEditor({\n extensions: [\n StarterKit,\n Highlight,\n TextAlign.configure({ types: [\"heading\", \"paragraph\"] }),\n Link.configure({ openOnClick: false }),\n TableKit.configure({ table: { resizable: false } }),\n Details,\n DetailsSummary,\n DetailsContent,\n ],\n content: initialContent,\n editable: !locked,\n immediatelyRender: false,\n editorProps: {\n attributes: {\n class: \"lattice-prose min-h-32 px-3 py-2 outline-none\",\n },\n },\n onUpdate: ({ editor: instance }) => {\n change(name, instance.isEmpty ? null : instance.getJSON());\n },\n onBlur: () => {\n blur(name);\n },\n });\n\n useEffect(() => {\n editor?.setEditable(!locked);\n }, [editor, locked]);\n\n if (hidden) {\n return null;\n }\n\n const submittedValue = storedValue ? JSON.stringify(storedValue) : \"\";\n\n return (\n <FormFieldFrame\n error={errors[errorKey]}\n helperText={node.props.helperText ?? undefined}\n tooltip={node.props.tooltip ?? undefined}\n label={node.props.label ?? \"\"}\n name={domName}\n required={required}\n >\n <div\n className={cn(\n \"overflow-hidden rounded-lt-sm border border-lt-input bg-transparent shadow-lt-xs focus-within:border-lt-ring focus-within:ring-[3px] focus-within:ring-lt-ring/50\",\n locked && \"opacity-60\",\n )}\n >\n {editor && !locked && <Toolbar editor={editor} />}\n <EditorContent editor={editor} />\n </div>\n <input name={domName} type=\"hidden\" value={submittedValue} />\n </FormFieldFrame>\n );\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"rich-editor.js","names":[],"sources":["../../../../resources/js/form/components/fields/rich-editor.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { Details, DetailsContent, DetailsSummary } from \"@tiptap/extension-details\";\nimport { Highlight } from \"@tiptap/extension-highlight\";\nimport { Link } from \"@tiptap/extension-link\";\nimport { TableKit } from \"@tiptap/extension-table\";\nimport { TextAlign } from \"@tiptap/extension-text-align\";\nimport { type Editor, EditorContent, useEditor } from \"@tiptap/react\";\nimport { StarterKit } from \"@tiptap/starter-kit\";\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { useFormContext } from \"../context\";\nimport { useFieldScope } from \"../field-scope\";\nimport { useDependentField } from \"../use-dependent-field\";\nimport { useFieldCommit } from \"../use-field-commit\";\nimport { useFormValue } from \"../values\";\n\ntype ToolbarItem =\n | \"separator\"\n | {\n icon: string;\n key: string;\n label: string;\n isActive: (editor: Editor) => boolean;\n isDisabled?: (editor: Editor) => boolean;\n run: (editor: Editor) => void;\n };\n\nconst toolbar: ToolbarItem[] = [\n {\n icon: \"bold\",\n key: \"bold\",\n label: \"Bold\",\n isActive: (e) => e.isActive(\"bold\"),\n run: (e) => e.chain().focus().toggleBold().run(),\n },\n {\n icon: \"italic\",\n key: \"italic\",\n label: \"Italic\",\n isActive: (e) => e.isActive(\"italic\"),\n run: (e) => e.chain().focus().toggleItalic().run(),\n },\n {\n icon: \"strikethrough\",\n key: \"strikethrough\",\n label: \"Strikethrough\",\n isActive: (e) => e.isActive(\"strike\"),\n run: (e) => e.chain().focus().toggleStrike().run(),\n },\n {\n icon: \"underline\",\n key: \"underline\",\n label: \"Underline\",\n isActive: (e) => e.isActive(\"underline\"),\n run: (e) => e.chain().focus().toggleUnderline().run(),\n },\n {\n icon: \"highlighter\",\n key: \"highlight\",\n label: \"Highlight\",\n isActive: (e) => e.isActive(\"highlight\"),\n run: (e) => e.chain().focus().toggleHighlight().run(),\n },\n \"separator\",\n {\n icon: \"heading-1\",\n key: \"heading-1\",\n label: \"Heading 1\",\n isActive: (e) => e.isActive(\"heading\", { level: 1 }),\n run: (e) => e.chain().focus().toggleHeading({ level: 1 }).run(),\n },\n {\n icon: \"heading-2\",\n key: \"heading-2\",\n label: \"Heading 2\",\n isActive: (e) => e.isActive(\"heading\", { level: 2 }),\n run: (e) => e.chain().focus().toggleHeading({ level: 2 }).run(),\n },\n {\n icon: \"heading-3\",\n key: \"heading-3\",\n label: \"Heading 3\",\n isActive: (e) => e.isActive(\"heading\", { level: 3 }),\n run: (e) => e.chain().focus().toggleHeading({ level: 3 }).run(),\n },\n \"separator\",\n {\n icon: \"list\",\n key: \"bullet-list\",\n label: \"Bullet list\",\n isActive: (e) => e.isActive(\"bulletList\"),\n run: (e) => e.chain().focus().toggleBulletList().run(),\n },\n {\n icon: \"list-ordered\",\n key: \"ordered-list\",\n label: \"Ordered list\",\n isActive: (e) => e.isActive(\"orderedList\"),\n run: (e) => e.chain().focus().toggleOrderedList().run(),\n },\n {\n icon: \"quote\",\n key: \"blockquote\",\n label: \"Blockquote\",\n isActive: (e) => e.isActive(\"blockquote\"),\n run: (e) => e.chain().focus().toggleBlockquote().run(),\n },\n {\n icon: \"code\",\n key: \"code-block\",\n label: \"Code block\",\n isActive: (e) => e.isActive(\"codeBlock\"),\n run: (e) => e.chain().focus().toggleCodeBlock().run(),\n },\n {\n icon: \"minus\",\n key: \"horizontal-rule\",\n label: \"Horizontal rule\",\n isActive: () => false,\n run: (e) => e.chain().focus().setHorizontalRule().run(),\n },\n \"separator\",\n {\n icon: \"align-left\",\n key: \"align-left\",\n label: \"Align left\",\n isActive: (e) => e.isActive({ textAlign: \"left\" }),\n run: (e) => e.chain().focus().setTextAlign(\"left\").run(),\n },\n {\n icon: \"align-center\",\n key: \"align-center\",\n label: \"Align center\",\n isActive: (e) => e.isActive({ textAlign: \"center\" }),\n run: (e) => e.chain().focus().setTextAlign(\"center\").run(),\n },\n {\n icon: \"align-right\",\n key: \"align-right\",\n label: \"Align right\",\n isActive: (e) => e.isActive({ textAlign: \"right\" }),\n run: (e) => e.chain().focus().setTextAlign(\"right\").run(),\n },\n {\n icon: \"align-justify\",\n key: \"justify\",\n label: \"Justify\",\n isActive: (e) => e.isActive({ textAlign: \"justify\" }),\n run: (e) => e.chain().focus().setTextAlign(\"justify\").run(),\n },\n \"separator\",\n {\n icon: \"link\",\n key: \"link\",\n label: \"Link\",\n isActive: (e) => e.isActive(\"link\"),\n run: (e) => {\n if (e.isActive(\"link\")) {\n e.chain().focus().unsetLink().run();\n return;\n }\n const url = window.prompt(\"Link URL\");\n if (url) {\n e.chain().focus().extendMarkRange(\"link\").setLink({ href: url }).run();\n }\n },\n },\n \"separator\",\n {\n icon: \"table\",\n key: \"insert-table\",\n label: \"Insert table\",\n isActive: (e) => e.isActive(\"table\"),\n run: (e) => e.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(),\n },\n {\n icon: \"columns-3\",\n key: \"add-column\",\n label: \"Add column\",\n isActive: () => false,\n isDisabled: (e) => !e.can().addColumnAfter(),\n run: (e) => e.chain().focus().addColumnAfter().run(),\n },\n {\n icon: \"rows-3\",\n key: \"add-row\",\n label: \"Add row\",\n isActive: () => false,\n isDisabled: (e) => !e.can().addRowAfter(),\n run: (e) => e.chain().focus().addRowAfter().run(),\n },\n {\n icon: \"trash-2\",\n key: \"delete-table\",\n label: \"Delete table\",\n isActive: () => false,\n isDisabled: (e) => !e.can().deleteTable(),\n run: (e) => e.chain().focus().deleteTable().run(),\n },\n {\n icon: \"chevron-right\",\n key: \"details\",\n label: \"Details\",\n isActive: (e) => e.isActive(\"details\"),\n run: (e) => {\n if (e.isActive(\"details\")) {\n e.chain().focus().unsetDetails().run();\n return;\n }\n e.chain().focus().setDetails().run();\n },\n },\n];\n\nconst emojis = [\n \"😀\",\n \"😅\",\n \"😂\",\n \"🥳\",\n \"😎\",\n \"🤔\",\n \"👍\",\n \"🙏\",\n \"🔥\",\n \"🎉\",\n \"🚀\",\n \"💡\",\n \"✅\",\n \"❌\",\n \"⭐\",\n \"❤️\",\n];\n\nfunction EmojiPicker({ editor }: { editor: Editor }) {\n const { t } = useT(\"lattice\");\n const [open, setOpen] = useState(false);\n\n return (\n <div className=\"relative\">\n <button\n aria-label={t(\"form.editor.insert-emoji\", \"Insert emoji\")}\n data-test=\"editor-emoji\"\n className=\"inline-flex size-7 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg [&_svg]:size-lt-icon-md\"\n onClick={() => setOpen((value) => !value)}\n onMouseDown={(event) => event.preventDefault()}\n title={t(\"form.editor.insert-emoji\", \"Insert emoji\")}\n type=\"button\"\n >\n <Icon name=\"smile\" />\n </button>\n {open && (\n <div className=\"absolute z-10 mt-1 grid grid-cols-8 gap-0.5 rounded-lt-sm border border-lt-border bg-lt-bg p-1 shadow-lt-md\">\n {emojis.map((emoji) => (\n <button\n className=\"inline-flex size-7 items-center justify-center rounded-lt-sm text-base hover:bg-lt-accent\"\n key={emoji}\n onClick={() => {\n editor.chain().focus().insertContent(emoji).run();\n setOpen(false);\n }}\n onMouseDown={(event) => event.preventDefault()}\n type=\"button\"\n >\n {emoji}\n </button>\n ))}\n </div>\n )}\n </div>\n );\n}\n\nfunction Toolbar({ editor }: { editor: Editor }) {\n const { t } = useT(\"lattice\");\n\n return (\n <div className=\"flex flex-wrap items-center gap-0.5 border-b border-lt-border p-1\">\n {toolbar.map((item, index) => {\n if (item === \"separator\") {\n // eslint-disable-next-line react/no-array-index-key\n return <span key={`sep-${index}`} className=\"mx-1 h-5 w-px bg-lt-border\" />;\n }\n\n const label = t(`form.editor.${item.key}`, item.label);\n\n return (\n <button\n aria-label={label}\n aria-pressed={item.isActive(editor)}\n data-test={`editor-${item.key}`}\n className={cn(\n \"inline-flex size-7 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg disabled:pointer-events-none disabled:opacity-40 [&_svg]:size-lt-icon-md\",\n item.isActive(editor) && \"bg-lt-accent text-lt-accent-fg\",\n )}\n disabled={item.isDisabled?.(editor) ?? false}\n key={item.key}\n // Keep focus in the editor so toolbar clicks don't blur it (which would\n // otherwise trigger a precognition request).\n onClick={() => item.run(editor)}\n onMouseDown={(event) => event.preventDefault()}\n title={label}\n type=\"button\"\n >\n <Icon name={item.icon} />\n </button>\n );\n })}\n <span className=\"mx-1 h-5 w-px bg-lt-border\" />\n <EmojiPicker editor={editor} />\n </div>\n );\n}\n\nexport const RichEditorComponent: RendererComponent<\"field.rich-editor\"> = ({ node }) => {\n const { errors } = useFormContext();\n const { hidden, required, readOnly, disabled } = useDependentField(node);\n const { change, blur } = useFieldCommit();\n const name = node.props.name;\n const scope = useFieldScope();\n const globalValue = useFormValue(name);\n const storedValue = scope ? scope.getValue(name) : globalValue;\n const domName = scope ? scope.scopedName(name) : name;\n const errorKey = scope ? scope.errorKey(name) : name;\n const locked = readOnly || disabled;\n const initialContent =\n typeof storedValue === \"object\" && storedValue !== null\n ? (storedValue as object)\n : ((node.props.value as object | undefined) ?? \"\");\n\n const editor = useEditor({\n extensions: [\n StarterKit,\n Highlight,\n TextAlign.configure({ types: [\"heading\", \"paragraph\"] }),\n Link.configure({ openOnClick: false }),\n TableKit.configure({ table: { resizable: false } }),\n Details,\n DetailsSummary,\n DetailsContent,\n ],\n content: initialContent,\n editable: !locked,\n immediatelyRender: false,\n editorProps: {\n attributes: {\n class: \"lattice-prose min-h-32 px-3 py-2 outline-none\",\n },\n },\n onUpdate: ({ editor: instance }) => {\n change(name, instance.isEmpty ? null : instance.getJSON());\n },\n onBlur: () => {\n blur(name);\n },\n });\n\n useEffect(() => {\n editor?.setEditable(!locked);\n }, [editor, locked]);\n\n if (hidden) {\n return null;\n }\n\n const submittedValue = storedValue ? JSON.stringify(storedValue) : \"\";\n\n return (\n <FormFieldFrame\n error={errors[errorKey]}\n helperText={node.props.helperText ?? undefined}\n tooltip={node.props.tooltip ?? undefined}\n label={node.props.label ?? \"\"}\n name={domName}\n required={required}\n >\n <div\n className={cn(\n \"overflow-hidden rounded-lt-sm border border-lt-input bg-transparent shadow-lt-xs focus-within:border-lt-ring focus-within:ring-[3px] focus-within:ring-lt-ring/50\",\n locked && \"opacity-60\",\n )}\n >\n {editor && !locked && <Toolbar editor={editor} />}\n <EditorContent editor={editor} />\n </div>\n <input name={domName} type=\"hidden\" value={submittedValue} />\n </FormFieldFrame>\n );\n};\n"],"mappings":"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"}
|
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
/** Translation key + fallback and icon for each built-in; the server sends null labels. */
|
|
3
3
|
var BUILT_IN = {
|
|
4
4
|
duplicate: {
|
|
5
|
-
key: "rowActions.duplicate",
|
|
5
|
+
key: "table.rowActions.duplicate",
|
|
6
6
|
fallback: "Duplicate",
|
|
7
7
|
icon: "copy"
|
|
8
8
|
},
|
|
9
9
|
remove: {
|
|
10
|
-
key: "rowActions.remove",
|
|
10
|
+
key: "table.rowActions.remove",
|
|
11
11
|
fallback: "Remove",
|
|
12
12
|
icon: "trash-2"
|
|
13
13
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"row-action-menu.js","names":[],"sources":["../../../../resources/js/form/components/fields/row-action-menu.ts"],"sourcesContent":["import type { RowAction as WireRowAction } from \"@lattice-php/lattice/types/generated\";\nimport type { RowAction } from \"./row-actions\";\n\nexport type RowActionTranslate = (key: string, fallback: string) => string;\n\n/** Translation key + fallback and icon for each built-in; the server sends null labels. */\nconst BUILT_IN: Record<\"duplicate\" | \"remove\", { key: string; fallback: string; icon: string }> = {\n duplicate: { key: \"rowActions.duplicate\", fallback: \"Duplicate\", icon: \"copy\" },\n remove: { key: \"rowActions.remove\", fallback: \"Remove\", icon: \"trash-2\" },\n};\n\nexport type RowActionContext = {\n index: number;\n removable: boolean;\n onRemove: (index: number) => void;\n onDuplicate: (index: number) => void;\n t: RowActionTranslate;\n};\n\n/**\n * Resolves the declared wire row actions into the click-wired client actions the\n * kebab renders. `null` (undeclared) falls back to the built-in remove; an empty\n * array disables row actions entirely. Remove is dropped while the row is at its\n * minimum, and built-in labels resolve through i18n when the server sends none.\n */\nexport function buildRowActions(\n declared: WireRowAction[] | null,\n ctx: RowActionContext,\n): RowAction[] {\n const source = declared ?? defaultActions(ctx.removable);\n\n return source\n .map((action) => toClientAction(action, ctx))\n .filter((action): action is RowAction => action !== null);\n}\n\nfunction defaultActions(removable: boolean): WireRowAction[] {\n if (!removable) {\n return [];\n }\n\n return [{ type: \"remove\", key: \"remove\", label: null, icon: null, destructive: true }];\n}\n\nfunction toClientAction(action: WireRowAction, ctx: RowActionContext): RowAction | null {\n if (action.type === \"duplicate\") {\n const builtIn = BUILT_IN.duplicate;\n\n return {\n key: action.key,\n label: action.label ?? ctx.t(builtIn.key, builtIn.fallback),\n icon: action.icon ?? builtIn.icon,\n destructive: action.destructive,\n onClick: () => ctx.onDuplicate(ctx.index),\n };\n }\n\n if (action.type === \"remove\") {\n if (!ctx.removable) {\n return null;\n }\n\n const builtIn = BUILT_IN.remove;\n\n return {\n key: action.key,\n label: action.label ?? ctx.t(builtIn.key, builtIn.fallback),\n icon: action.icon ?? builtIn.icon,\n destructive: action.destructive,\n onClick: () => ctx.onRemove(ctx.index),\n };\n }\n\n return null;\n}\n"],"mappings":";;AAMA,IAAM,WAA4F;CAChG,WAAW;EAAE,KAAK;
|
|
1
|
+
{"version":3,"file":"row-action-menu.js","names":[],"sources":["../../../../resources/js/form/components/fields/row-action-menu.ts"],"sourcesContent":["import type { RowAction as WireRowAction } from \"@lattice-php/lattice/types/generated\";\nimport type { RowAction } from \"./row-actions\";\n\nexport type RowActionTranslate = (key: string, fallback: string) => string;\n\n/** Translation key + fallback and icon for each built-in; the server sends null labels. */\nconst BUILT_IN: Record<\"duplicate\" | \"remove\", { key: string; fallback: string; icon: string }> = {\n duplicate: { key: \"table.rowActions.duplicate\", fallback: \"Duplicate\", icon: \"copy\" },\n remove: { key: \"table.rowActions.remove\", fallback: \"Remove\", icon: \"trash-2\" },\n};\n\nexport type RowActionContext = {\n index: number;\n removable: boolean;\n onRemove: (index: number) => void;\n onDuplicate: (index: number) => void;\n t: RowActionTranslate;\n};\n\n/**\n * Resolves the declared wire row actions into the click-wired client actions the\n * kebab renders. `null` (undeclared) falls back to the built-in remove; an empty\n * array disables row actions entirely. Remove is dropped while the row is at its\n * minimum, and built-in labels resolve through i18n when the server sends none.\n */\nexport function buildRowActions(\n declared: WireRowAction[] | null,\n ctx: RowActionContext,\n): RowAction[] {\n const source = declared ?? defaultActions(ctx.removable);\n\n return source\n .map((action) => toClientAction(action, ctx))\n .filter((action): action is RowAction => action !== null);\n}\n\nfunction defaultActions(removable: boolean): WireRowAction[] {\n if (!removable) {\n return [];\n }\n\n return [{ type: \"remove\", key: \"remove\", label: null, icon: null, destructive: true }];\n}\n\nfunction toClientAction(action: WireRowAction, ctx: RowActionContext): RowAction | null {\n if (action.type === \"duplicate\") {\n const builtIn = BUILT_IN.duplicate;\n\n return {\n key: action.key,\n label: action.label ?? ctx.t(builtIn.key, builtIn.fallback),\n icon: action.icon ?? builtIn.icon,\n destructive: action.destructive,\n onClick: () => ctx.onDuplicate(ctx.index),\n };\n }\n\n if (action.type === \"remove\") {\n if (!ctx.removable) {\n return null;\n }\n\n const builtIn = BUILT_IN.remove;\n\n return {\n key: action.key,\n label: action.label ?? ctx.t(builtIn.key, builtIn.fallback),\n icon: action.icon ?? builtIn.icon,\n destructive: action.destructive,\n onClick: () => ctx.onRemove(ctx.index),\n };\n }\n\n return null;\n}\n"],"mappings":";;AAMA,IAAM,WAA4F;CAChG,WAAW;EAAE,KAAK;EAA8B,UAAU;EAAa,MAAM;CAAO;CACpF,QAAQ;EAAE,KAAK;EAA2B,UAAU;EAAU,MAAM;CAAU;AAChF;;;;;;;AAgBA,SAAgB,gBACd,UACA,KACa;CAGb,QAFe,YAAY,eAAe,IAAI,SAAS,GAGpD,KAAK,WAAW,eAAe,QAAQ,GAAG,CAAC,EAC3C,QAAQ,WAAgC,WAAW,IAAI;AAC5D;AAEA,SAAS,eAAe,WAAqC;CAC3D,IAAI,CAAC,WACH,OAAO,CAAC;CAGV,OAAO,CAAC;EAAE,MAAM;EAAU,KAAK;EAAU,OAAO;EAAM,MAAM;EAAM,aAAa;CAAK,CAAC;AACvF;AAEA,SAAS,eAAe,QAAuB,KAAyC;CACtF,IAAI,OAAO,SAAS,aAAa;EAC/B,MAAM,UAAU,SAAS;EAEzB,OAAO;GACL,KAAK,OAAO;GACZ,OAAO,OAAO,SAAS,IAAI,EAAE,QAAQ,KAAK,QAAQ,QAAQ;GAC1D,MAAM,OAAO,QAAQ,QAAQ;GAC7B,aAAa,OAAO;GACpB,eAAe,IAAI,YAAY,IAAI,KAAK;EAC1C;CACF;CAEA,IAAI,OAAO,SAAS,UAAU;EAC5B,IAAI,CAAC,IAAI,WACP,OAAO;EAGT,MAAM,UAAU,SAAS;EAEzB,OAAO;GACL,KAAK,OAAO;GACZ,OAAO,OAAO,SAAS,IAAI,EAAE,QAAQ,KAAK,QAAQ,QAAQ;GAC1D,MAAM,OAAO,QAAQ,QAAQ;GAC7B,aAAa,OAAO;GACpB,eAAe,IAAI,SAAS,IAAI,KAAK;EACvC;CACF;CAEA,OAAO;AACT"}
|
|
@@ -111,7 +111,7 @@ var SelectComponent = ({ node }) => {
|
|
|
111
111
|
children: selected.map((value) => /* @__PURE__ */ jsxs("span", {
|
|
112
112
|
className: "inline-flex items-center gap-1 rounded-lt-sm bg-lt-muted px-2 py-0.5 text-xs",
|
|
113
113
|
children: [labelFor(value), !locked && /* @__PURE__ */ jsx("button", {
|
|
114
|
-
"aria-label": t("
|
|
114
|
+
"aria-label": t("form.removeOption", "Remove {{label}}", { label: labelFor(value) }),
|
|
115
115
|
"data-test": `select-${name}-remove-${value}`,
|
|
116
116
|
className: "text-lt-muted-fg hover:text-lt-fg [&_svg]:size-lt-icon-xs",
|
|
117
117
|
onClick: () => remove(value),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.js","names":[],"sources":["../../../../resources/js/form/components/fields/select.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { useCallback, useMemo, useRef, useState } from \"react\";\nimport { Combobox } from \"@lattice-php/lattice/core/components/combobox\";\nimport { controlSurface } from \"@lattice-php/lattice/core/components/control\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { Option, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { useFormContext } from \"../context\";\nimport { postFormAction } from \"../form-transport\";\nimport { useResolvedNode } from \"../resolved-nodes\";\nimport { useDependentField } from \"../use-dependent-field\";\nimport { useFieldCommit } from \"../use-field-commit\";\nimport { useFieldScope } from \"../field-scope\";\nimport { useFormValue, useFormValues } from \"../values\";\n\nfunction toValues(stored: unknown, fallback: unknown): string[] {\n const source = stored ?? fallback;\n\n if (Array.isArray(source)) {\n return source.map(String);\n }\n\n if (source === undefined || source === null || source === \"\") {\n return [];\n }\n\n return [String(source)];\n}\n\nexport const SelectComponent: RendererComponent<\"field.select\"> = ({ node }) => {\n const { t } = useT(\"lattice\");\n const props = node.props;\n const { action, componentRef, errors } = useFormContext();\n const { hidden, required, readOnly, disabled } = useDependentField(node);\n const { change, blur } = useFieldCommit();\n const resolvedNode = useResolvedNode(node);\n const name = props.name;\n const scope = useFieldScope();\n const domName = scope ? scope.scopedName(name) : name;\n const errorKey = scope ? scope.errorKey(name) : name;\n const searchKey = scope ? scope.errorKey(name) : name;\n const placeholder = props.placeholder || \"Select…\";\n const multiple = props.multiple;\n const searchable = props.searchable;\n const staticOptions = useMemo(\n () => (resolvedNode.props as { options?: Option[] }).options ?? [],\n [resolvedNode.props],\n );\n\n const globalValue = useFormValue(name);\n const values = useFormValues();\n const valuesRef = useRef(values);\n valuesRef.current = values;\n const storedValue = scope ? scope.getValue(name) : globalValue;\n const selected = useMemo(() => toValues(storedValue, props.value), [storedValue, props.value]);\n\n const [open, setOpen] = useState(false);\n const [results, setResults] = useState<Option[] | null>(null);\n const [loading, setLoading] = useState(false);\n const searchAbort = useRef<AbortController | null>(null);\n\n const labels = useMemo(() => {\n const map = new Map<string, string>();\n for (const option of [...staticOptions, ...(results ?? [])]) {\n map.set(option.value, option.label);\n }\n return map;\n }, [staticOptions, results]);\n const labelFor = (value: string) => labels.get(value) ?? value;\n\n const locked = readOnly || disabled;\n\n const search = useCallback(\n (query: string) => {\n searchAbort.current?.abort();\n\n if (query.trim() === \"\") {\n setResults(null);\n setLoading(false);\n\n return;\n }\n\n const controller = new AbortController();\n searchAbort.current = controller;\n setLoading(true);\n\n void postFormAction<{ options?: Option[] }>(\n action,\n componentRef,\n { ...valuesRef.current, _search: searchKey, q: query },\n controller.signal,\n )\n .then((response) => {\n setResults(response?.options ?? []);\n setLoading(false);\n })\n .catch(() => {});\n },\n [action, componentRef, searchKey],\n );\n\n function commit(next: string[]): void {\n change(name, multiple ? next : (next[0] ?? \"\"));\n }\n\n function select(value: string): void {\n if (multiple) {\n commit(\n selected.includes(value) ? selected.filter((item) => item !== value) : [...selected, value],\n );\n\n return;\n }\n\n commit([value]);\n }\n\n function remove(value: string): void {\n commit(selected.filter((item) => item !== value));\n }\n\n if (hidden) {\n return null;\n }\n\n const options = searchable ? (results ?? staticOptions) : staticOptions;\n\n return (\n <FormFieldFrame\n error={errors[errorKey]}\n helperText={props.helperText ?? undefined}\n tooltip={props.tooltip ?? undefined}\n label={props.label ?? \"\"}\n name={name}\n required={required}\n >\n {multiple ? (\n selected.map((value) => (\n <input key={value} name={`${domName}[]`} type=\"hidden\" value={value} />\n ))\n ) : (\n <input name={domName} type=\"hidden\" value={selected[0] ?? \"\"} />\n )}\n\n <div>\n {multiple && selected.length > 0 && (\n <div className=\"mb-1.5 flex flex-wrap gap-1\">\n {selected.map((value) => (\n <span\n className=\"inline-flex items-center gap-1 rounded-lt-sm bg-lt-muted px-2 py-0.5 text-xs\"\n key={value}\n >\n {labelFor(value)}\n {!locked && (\n <button\n aria-label={t(\"a11y.removeOption\", \"Remove {{label}}\", {\n label: labelFor(value),\n })}\n data-test={`select-${name}-remove-${value}`}\n className=\"text-lt-muted-fg hover:text-lt-fg [&_svg]:size-lt-icon-xs\"\n onClick={() => remove(value)}\n type=\"button\"\n >\n <Icon name=\"x\" />\n </button>\n )}\n </span>\n ))}\n </div>\n )}\n\n <Combobox\n emptyLabel={props.emptyLabel ?? undefined}\n loading={loading}\n multiple={multiple}\n onSearch={searchable ? search : undefined}\n onSelect={select}\n open={open && !locked}\n onOpenChange={(next) => {\n setOpen(next);\n\n if (!next) {\n blur(name);\n }\n }}\n options={options}\n searchPlaceholder={props.searchPlaceholder ?? undefined}\n selected={selected}\n testId={`select-${name}`}\n trigger={\n <>\n {!multiple && selected.length > 0 ? (\n <span>{labelFor(selected[0])}</span>\n ) : (\n <span className=\"text-lt-muted-fg\">{placeholder}</span>\n )}\n <Icon name=\"chevrons-up-down\" className=\"size-lt-icon-md shrink-0 text-lt-muted-fg\" />\n </>\n }\n triggerClassName={cn(\n controlSurface(),\n \"flex items-center justify-between gap-2 text-left\",\n locked && \"cursor-not-allowed opacity-60\",\n )}\n triggerProps={{\n \"aria-haspopup\": \"listbox\",\n autoFocus: props.autoFocus ?? undefined,\n \"data-test\": `select-${name}`,\n disabled: locked,\n tabIndex: props.tabIndex ?? undefined,\n }}\n />\n </div>\n </FormFieldFrame>\n );\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"select.js","names":[],"sources":["../../../../resources/js/form/components/fields/select.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { useCallback, useMemo, useRef, useState } from \"react\";\nimport { Combobox } from \"@lattice-php/lattice/core/components/combobox\";\nimport { controlSurface } from \"@lattice-php/lattice/core/components/control\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { Option, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { useFormContext } from \"../context\";\nimport { postFormAction } from \"../form-transport\";\nimport { useResolvedNode } from \"../resolved-nodes\";\nimport { useDependentField } from \"../use-dependent-field\";\nimport { useFieldCommit } from \"../use-field-commit\";\nimport { useFieldScope } from \"../field-scope\";\nimport { useFormValue, useFormValues } from \"../values\";\n\nfunction toValues(stored: unknown, fallback: unknown): string[] {\n const source = stored ?? fallback;\n\n if (Array.isArray(source)) {\n return source.map(String);\n }\n\n if (source === undefined || source === null || source === \"\") {\n return [];\n }\n\n return [String(source)];\n}\n\nexport const SelectComponent: RendererComponent<\"field.select\"> = ({ node }) => {\n const { t } = useT(\"lattice\");\n const props = node.props;\n const { action, componentRef, errors } = useFormContext();\n const { hidden, required, readOnly, disabled } = useDependentField(node);\n const { change, blur } = useFieldCommit();\n const resolvedNode = useResolvedNode(node);\n const name = props.name;\n const scope = useFieldScope();\n const domName = scope ? scope.scopedName(name) : name;\n const errorKey = scope ? scope.errorKey(name) : name;\n const searchKey = scope ? scope.errorKey(name) : name;\n const placeholder = props.placeholder || \"Select…\";\n const multiple = props.multiple;\n const searchable = props.searchable;\n const staticOptions = useMemo(\n () => (resolvedNode.props as { options?: Option[] }).options ?? [],\n [resolvedNode.props],\n );\n\n const globalValue = useFormValue(name);\n const values = useFormValues();\n const valuesRef = useRef(values);\n valuesRef.current = values;\n const storedValue = scope ? scope.getValue(name) : globalValue;\n const selected = useMemo(() => toValues(storedValue, props.value), [storedValue, props.value]);\n\n const [open, setOpen] = useState(false);\n const [results, setResults] = useState<Option[] | null>(null);\n const [loading, setLoading] = useState(false);\n const searchAbort = useRef<AbortController | null>(null);\n\n const labels = useMemo(() => {\n const map = new Map<string, string>();\n for (const option of [...staticOptions, ...(results ?? [])]) {\n map.set(option.value, option.label);\n }\n return map;\n }, [staticOptions, results]);\n const labelFor = (value: string) => labels.get(value) ?? value;\n\n const locked = readOnly || disabled;\n\n const search = useCallback(\n (query: string) => {\n searchAbort.current?.abort();\n\n if (query.trim() === \"\") {\n setResults(null);\n setLoading(false);\n\n return;\n }\n\n const controller = new AbortController();\n searchAbort.current = controller;\n setLoading(true);\n\n void postFormAction<{ options?: Option[] }>(\n action,\n componentRef,\n { ...valuesRef.current, _search: searchKey, q: query },\n controller.signal,\n )\n .then((response) => {\n setResults(response?.options ?? []);\n setLoading(false);\n })\n .catch(() => {});\n },\n [action, componentRef, searchKey],\n );\n\n function commit(next: string[]): void {\n change(name, multiple ? next : (next[0] ?? \"\"));\n }\n\n function select(value: string): void {\n if (multiple) {\n commit(\n selected.includes(value) ? selected.filter((item) => item !== value) : [...selected, value],\n );\n\n return;\n }\n\n commit([value]);\n }\n\n function remove(value: string): void {\n commit(selected.filter((item) => item !== value));\n }\n\n if (hidden) {\n return null;\n }\n\n const options = searchable ? (results ?? staticOptions) : staticOptions;\n\n return (\n <FormFieldFrame\n error={errors[errorKey]}\n helperText={props.helperText ?? undefined}\n tooltip={props.tooltip ?? undefined}\n label={props.label ?? \"\"}\n name={name}\n required={required}\n >\n {multiple ? (\n selected.map((value) => (\n <input key={value} name={`${domName}[]`} type=\"hidden\" value={value} />\n ))\n ) : (\n <input name={domName} type=\"hidden\" value={selected[0] ?? \"\"} />\n )}\n\n <div>\n {multiple && selected.length > 0 && (\n <div className=\"mb-1.5 flex flex-wrap gap-1\">\n {selected.map((value) => (\n <span\n className=\"inline-flex items-center gap-1 rounded-lt-sm bg-lt-muted px-2 py-0.5 text-xs\"\n key={value}\n >\n {labelFor(value)}\n {!locked && (\n <button\n aria-label={t(\"form.removeOption\", \"Remove {{label}}\", {\n label: labelFor(value),\n })}\n data-test={`select-${name}-remove-${value}`}\n className=\"text-lt-muted-fg hover:text-lt-fg [&_svg]:size-lt-icon-xs\"\n onClick={() => remove(value)}\n type=\"button\"\n >\n <Icon name=\"x\" />\n </button>\n )}\n </span>\n ))}\n </div>\n )}\n\n <Combobox\n emptyLabel={props.emptyLabel ?? undefined}\n loading={loading}\n multiple={multiple}\n onSearch={searchable ? search : undefined}\n onSelect={select}\n open={open && !locked}\n onOpenChange={(next) => {\n setOpen(next);\n\n if (!next) {\n blur(name);\n }\n }}\n options={options}\n searchPlaceholder={props.searchPlaceholder ?? undefined}\n selected={selected}\n testId={`select-${name}`}\n trigger={\n <>\n {!multiple && selected.length > 0 ? (\n <span>{labelFor(selected[0])}</span>\n ) : (\n <span className=\"text-lt-muted-fg\">{placeholder}</span>\n )}\n <Icon name=\"chevrons-up-down\" className=\"size-lt-icon-md shrink-0 text-lt-muted-fg\" />\n </>\n }\n triggerClassName={cn(\n controlSurface(),\n \"flex items-center justify-between gap-2 text-left\",\n locked && \"cursor-not-allowed opacity-60\",\n )}\n triggerProps={{\n \"aria-haspopup\": \"listbox\",\n autoFocus: props.autoFocus ?? undefined,\n \"data-test\": `select-${name}`,\n disabled: locked,\n tabIndex: props.tabIndex ?? undefined,\n }}\n />\n </div>\n </FormFieldFrame>\n );\n};\n"],"mappings":"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"}
|
|
@@ -133,11 +133,11 @@ function TableRows({ base, columns, rows, reorderable, removable, rowActions, on
|
|
|
133
133
|
return /* @__PURE__ */ jsxs("div", {
|
|
134
134
|
className: "relative",
|
|
135
135
|
children: [hasOverrides && /* @__PURE__ */ jsx("button", {
|
|
136
|
-
"aria-label": t("
|
|
136
|
+
"aria-label": t("table.resetColumnWidths", "Reset column widths"),
|
|
137
137
|
className: "absolute right-1 top-1 z-10 hidden rounded-lt-sm p-1 text-lt-muted-fg hover:text-lt-fg md:inline-flex",
|
|
138
138
|
"data-test": "table-reset-columns",
|
|
139
139
|
onClick: resetColumns,
|
|
140
|
-
title: t("
|
|
140
|
+
title: t("table.resetColumnWidths", "Reset column widths"),
|
|
141
141
|
type: "button",
|
|
142
142
|
children: /* @__PURE__ */ jsx(Icon, {
|
|
143
143
|
name: "rotate-ccw",
|