@10x-media/form-builder 0.1.0-beta.2 → 0.1.0-beta.21

package/dist/client/admin.css

@@ -0,0 +1,557 @@
+/* Admin panel styles, imported by the client components themselves so consumers
+ * get styled admin UI without touching their layout. Relies on Payload theme variables. */
+
+/* Flow builder */
+.fb-flow-builder {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	margin-block-end: 1rem;
+}
+.fb-flow-builder__description {
+	color: var(--theme-elevation-400);
+	font-size: 0.875rem;
+	margin: 0;
+}
+.fb-flow-builder__hint {
+	color: var(--theme-elevation-400);
+	font-size: 0.875rem;
+	margin: 0;
+}
+.fb-flow-builder__steps {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+.fb-flow-builder__actions {
+	margin-block-start: 0.25rem;
+}
+
+.fb-flow-step__header-content {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	overflow: hidden;
+}
+.fb-flow-step__index {
+	font-size: 0.6875rem;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+	color: var(--theme-elevation-400);
+	flex-shrink: 0;
+}
+.fb-flow-step__title {
+	font-size: 0.875rem;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.fb-flow-step__body {
+	padding: 0.75rem;
+	display: flex;
+	flex-direction: column;
+	gap: 0.25rem;
+}
+.fb-flow-step__row {
+	display: flex;
+	flex-direction: column;
+	gap: 0.25rem;
+}
+.fb-flow-step__hint {
+	font-size: 0.75rem;
+	color: var(--theme-elevation-400);
+	margin: 0;
+}
+.fb-flow-step__field-picker {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.25rem 1.25rem;
+	padding-block: 0.25rem;
+}
+.fb-flow-step__field-option {
+	display: flex;
+	align-items: center;
+	gap: 0.375rem;
+}
+.fb-flow-step__field-hint {
+	font-size: 0.75rem;
+	color: var(--theme-elevation-400);
+	white-space: nowrap;
+}
+.fb-flow-step__transitions {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	padding-block-start: 0.5rem;
+}
+.fb-flow-step__transitions-header {
+	display: flex;
+	align-items: baseline;
+	gap: 0.5rem;
+}
+
+.fb-flow-unassigned {
+	display: flex;
+	flex-direction: column;
+	gap: 0.25rem;
+	padding: 0.75rem;
+	border: 1px solid var(--theme-border-color);
+	border-radius: var(--style-radius-s);
+}
+.fb-flow-unassigned__rows {
+	display: flex;
+	flex-direction: column;
+	gap: 0.375rem;
+}
+.fb-flow-unassigned__row {
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+}
+.fb-flow-unassigned__name {
+	font-size: 0.875rem;
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.fb-flow-unassigned__select {
+	flex: 0 1 14rem;
+	min-width: 9rem;
+}
+
+.fb-flow-transition {
+	border: 1px solid var(--theme-border-color);
+	border-radius: var(--style-radius-s);
+	padding: 0.5rem 0.75rem;
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+.fb-flow-transition__header {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+.fb-flow-transition__label {
+	font-size: 0.6875rem;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+	color: var(--theme-elevation-400);
+	flex-shrink: 0;
+}
+.fb-flow-transition__goto {
+	flex: 1;
+	min-width: 0;
+}
+.fb-flow-transition__actions {
+	display: flex;
+	align-items: center;
+	gap: 0.25rem;
+	flex-shrink: 0;
+}
+.fb-flow-transition__when-label {
+	font-size: 0.6875rem;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+	color: var(--theme-elevation-400);
+}
+.fb-flow-transition__condition {
+	padding-inline-start: 0.25rem;
+}
+
+/* Condition builder */
+.fb-condition-builder {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+.fb-condition-builder__hint {
+	color: var(--theme-elevation-400);
+	font-size: 0.875rem;
+	margin: 0;
+}
+.fb-condition-builder__group {
+	display: flex;
+	flex-direction: column;
+	gap: 0.375rem;
+	padding: 0.75rem;
+	border: 1px solid var(--theme-border-color);
+	border-radius: var(--style-radius-m);
+}
+.fb-condition-builder__or-label {
+	display: inline-block;
+	font-size: 11px;
+	font-weight: 500;
+	text-transform: uppercase;
+	margin-block: 0.125rem;
+}
+.fb-condition-builder__and-row {
+	display: flex;
+	flex-direction: column;
+	gap: 0.25rem;
+}
+.fb-condition-builder__and-label {
+	font-size: 10px;
+	font-weight: 500;
+	text-transform: uppercase;
+	padding-inline-start: 0.125rem;
+}
+.fb-condition-builder__add-condition {
+	align-self: flex-start;
+	margin-block-start: 0.25rem;
+}
+.fb-condition-builder__actions {
+	display: flex;
+	gap: 0.5rem;
+	margin-top: 0.5rem;
+}
+.fb-condition-row {
+	display: flex;
+	align-items: flex-start;
+	gap: 0.5rem;
+	flex-wrap: nowrap;
+}
+.fb-condition-row__field {
+	flex: 1 1 9rem;
+	min-width: 0;
+}
+.fb-condition-row__operator {
+	flex: 0 1 9rem;
+	min-width: 0;
+}
+.fb-condition-row__value {
+	flex: 1 1 9rem;
+	min-width: 0;
+}
+.fb-condition-row__remove {
+	flex-shrink: 0;
+	align-self: center;
+}
+
+/* Condensed array (host-placed department emails): flat [label, email] rows, no per-row collapsible.
+ * The 50/50 split reuses Payload's own --field-width variable, set from each subfield's admin.width. */
+.fb-condensed-array {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	margin-block-end: 1rem;
+}
+.fb-condensed-array__rows {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+.fb-condensed-array__row {
+	display: flex;
+	align-items: flex-end;
+	gap: 0.5rem;
+}
+.fb-condensed-array__fields {
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	flex-wrap: wrap;
+	column-gap: 0.75rem;
+}
+.fb-condensed-array__fields > .field-type {
+	flex: 0 1 calc(var(--field-width, 50%) - 0.375rem);
+	min-width: 0;
+}
+.fb-condensed-array__remove {
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	/* Payload input height, so with the row's flex-end the button centers on the input, not the
+	 * taller label+input stack. */
+	height: 40px;
+}
+.fb-condensed-array__actions {
+	margin-block-start: 0.25rem;
+}
+
+/* Calculation expression builder */
+.fb-calc-builder {
+	margin-block-end: 1rem;
+}
+.fb-calc-builder > .field-type__wrap {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+.fb-visually-hidden {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+.fb-calc-builder__hint {
+	color: var(--theme-elevation-400);
+	font-size: 0.875rem;
+	margin: 0;
+}
+.fb-calc-builder__empty {
+	display: flex;
+	flex-direction: column;
+	gap: 0.375rem;
+}
+.fb-calc-builder__seed {
+	max-width: 16rem;
+}
+.fb-calc-builder__preview {
+	color: var(--theme-elevation-400);
+	font-size: 0.875rem;
+	margin: 0;
+}
+.fb-calc-builder__actions {
+	align-self: flex-start;
+}
+.fb-calc-builder__warning {
+	color: var(--theme-elevation-400);
+	font-size: 0.8125rem;
+	margin: 0;
+}
+.fb-calc-builder__kinds {
+	margin: 0;
+	margin-inline-start: 0.75rem;
+	padding-inline-start: 1rem;
+	color: var(--theme-elevation-400);
+	font-size: 0.8125rem;
+	display: flex;
+	flex-direction: column;
+	gap: 0.125rem;
+}
+.fb-calc-builder__kind-label {
+	color: var(--theme-elevation-600);
+	font-weight: 600;
+}
+.fb-calc-chain {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	min-width: 0;
+}
+/* Flat three-column grid, identical at every depth: [op select | spacer, fixed 90px]
+ * [operand controls, flexing] [remove, fixed]. The first row reserves the op column with a
+ * spacer so every kind select starts at the same left margin; nothing wraps, flexing
+ * controls shrink and ellipsize instead. */
+.fb-calc-row {
+	display: flex;
+	align-items: flex-start;
+	gap: 0.5rem;
+}
+.fb-calc-row--divided {
+	border-block-start: 1px solid var(--theme-elevation-100);
+	padding-block-start: 0.5rem;
+}
+.fb-calc-row__op,
+.fb-calc-row__op-spacer {
+	flex: 0 0 90px;
+	min-width: 0;
+}
+.fb-calc-row__operand {
+	flex: 1;
+	min-width: 0;
+}
+/* A fixed 40px centering box pins the remove level with the first control line even when
+ * secondary content (weight rows, nested chains) extends the row downward. */
+.fb-calc-row__remove {
+	flex: 0 0 auto;
+	align-self: flex-start;
+	height: 40px;
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+}
+.fb-calc-chain__add {
+	align-self: flex-start;
+	/* Column 1 width + row gap: aligns the button with the operand column. */
+	margin-inline-start: calc(90px + 0.5rem);
+}
+.fb-calc-operand {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	min-width: 0;
+}
+.fb-calc-operand--group > .fb-calc-chain {
+	padding-inline-start: 0.75rem;
+	border-inline-start: 2px solid var(--theme-elevation-100);
+}
+.fb-calc-operand__title {
+	font-size: 0.6875rem;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+	color: var(--theme-elevation-400);
+}
+.fb-calc-operand__header {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+.fb-calc-hint {
+	color: var(--theme-elevation-400);
+	font-size: 0.875rem;
+	margin: 0;
+	flex: 1 1 auto;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+/* 200px fits the longest kind label in both locales ("Gewichtetes Feld" / "Weighted field":
+ * ~110px at the 13px admin body size) plus the react-select control chrome (2 x base(0.6)
+ * padding + indicator), with room for zoomed fonts. */
+.fb-calc-operand__header > .fb-calc-operand__kind {
+	flex: 0 0 200px;
+	min-width: 0;
+}
+.fb-calc-operand__header > .fb-calc-operand__fn {
+	flex: 0 0 110px;
+	min-width: 0;
+}
+.fb-calc-operand__header > .fb-calc-operand__ref,
+.fb-calc-operand__header > .fb-calc-operand__weight-field {
+	flex: 1 1 auto;
+	min-width: 0;
+}
+.fb-calc-builder .rs__single-value {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.fb-calc-operand__number,
+.fb-calc-operand__weight {
+	height: 40px;
+	padding: 0 15px;
+	font-size: 1rem;
+	font-family: inherit;
+	color: var(--theme-elevation-800);
+	background: var(--theme-input-bg);
+	border: 1px solid var(--theme-elevation-150);
+	border-radius: var(--style-radius-s);
+	transition:
+		border-color 100ms ease,
+		background-color 100ms ease,
+		box-shadow 100ms ease;
+}
+.fb-calc-operand__number:hover,
+.fb-calc-operand__weight:hover {
+	border-color: var(--theme-elevation-250);
+}
+.fb-calc-operand__number:focus,
+.fb-calc-operand__weight:focus {
+	border-color: var(--theme-elevation-400);
+	outline: none;
+}
+.fb-calc-operand__header > .fb-calc-operand__number {
+	flex: 1 1 auto;
+	min-width: 60px;
+	width: 0;
+}
+.fb-calc-fn__args {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	padding-inline-start: 0.75rem;
+	border-inline-start: 2px solid var(--theme-elevation-100);
+}
+.fb-calc-fn__arg {
+	display: flex;
+	align-items: flex-start;
+	gap: 0.5rem;
+}
+.fb-calc-fn__arg-chain {
+	flex: 1;
+	min-width: 0;
+}
+.fb-calc-fn__arg-remove {
+	flex: 0 0 auto;
+	align-self: flex-start;
+	height: 40px;
+	display: flex;
+	align-items: center;
+}
+.fb-calc-fn__add {
+	align-self: flex-start;
+}
+.fb-calc-operand__source {
+	flex: 1 1 auto;
+	min-width: 0;
+	line-height: 40px;
+	font-size: 0.875rem;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.fb-calc-operand__weight-values-row {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+.fb-calc-operand__weight-values-label {
+	flex: 0 0 90px;
+	min-width: 0;
+	line-height: 40px;
+	font-size: 0.875rem;
+	color: var(--theme-elevation-600);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.fb-calc-operand__weight-values-row > .fb-calc-operand__weight-values {
+	flex: 0 0 200px;
+	min-width: 0;
+}
+.fb-calc-operand__weights {
+	display: flex;
+	flex-direction: column;
+	gap: 0.375rem;
+}
+.fb-calc-operand__weight-row {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+.fb-calc-operand__weight-label {
+	flex: 1;
+	min-width: 0;
+	font-size: 0.875rem;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.fb-calc-operand__weight-row > .fb-calc-operand__weight {
+	flex: 0 0 8rem;
+}
+.fb-calc-finish {
+	display: flex;
+	align-items: flex-start;
+	gap: 0.5rem;
+}
+/* The wording occupies column 1 (the 90px op column), centered on the 40px control line, so the
+ * select below aligns exactly with the operand column's kind selects. */
+.fb-calc-finish__label {
+	flex: 0 0 90px;
+	min-width: 0;
+	line-height: 40px;
+	font-size: 0.875rem;
+	color: var(--theme-elevation-600);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.fb-calc-finish__select {
+	flex: 0 0 200px;
+	min-width: 0;
+}

package/dist/client/endpointOptions.d.ts

@@ -0,0 +1,11 @@
+//#region src/client/endpointOptions.d.ts
+/**
+ * What an endpoint-backed select's options depend on. `'document'` (the default) needs a saved
+ * document: the URL carries the id and the fetch waits for one. `'request'` means the server
+ * resolves options from the request alone (tenant, locale, auth), so the URL has no id segment
+ * and the options load while the document is still being created.
+ */
+type EndpointOptionsScope = 'document' | 'request';
+//#endregion
+export { EndpointOptionsScope };
+//# sourceMappingURL=endpointOptions.d.ts.map

package/dist/client/endpointOptions.js

@@ -0,0 +1,38 @@
+import { formatAdminURL } from "payload/shared";
+//#region src/client/endpointOptions.ts
+/**
+* URL for a collection endpoint serving select options, built the way Payload's own admin
+* components build fetch URLs: `formatAdminURL` over `config.routes.api`, which handles a Next
+* `basePath` and returns a same-origin relative URL so the admin cookie rides along without CORS
+* concerns. Document scope yields `{api}/{collection}/{id}/{endpoint}`; request scope yields
+* `{api}/{collection}/{endpoint}`.
+*/
+const buildEndpointOptionsUrl = (args) => {
+	const endpoint = args.endpoint.replace(/^\/+/, "");
+	if (args.scope === "request") return formatAdminURL({
+		apiRoute: args.apiRoute,
+		path: `/${args.collectionSlug}/${endpoint}`
+	});
+	if (args.id == null) throw new Error(`form-builder: a document-scoped "${endpoint}" URL needs a document id`);
+	return formatAdminURL({
+		apiRoute: args.apiRoute,
+		path: `/${args.collectionSlug}/${encodeURIComponent(String(args.id))}/${endpoint}`
+	});
+};
+/**
+* Narrow an endpoint response to `{ options }`. Entries without a string value are dropped and
+* labels fall back to the value; a body without an options array throws so the select surfaces its
+* error state instead of silently rendering empty.
+*/
+const parseEndpointOptions = (body) => {
+	const options = body != null && typeof body === "object" ? body.options : void 0;
+	if (!Array.isArray(options)) throw new Error("Malformed options response: expected { options: [] }");
+	return options.filter((option) => option != null && typeof option === "object" && typeof option.value === "string").map((option) => ({
+		value: option.value,
+		label: typeof option.label === "string" && option.label.length > 0 ? option.label : option.value
+	}));
+};
+//#endregion
+export { buildEndpointOptionsUrl, parseEndpointOptions };
+
+//# sourceMappingURL=endpointOptions.js.map

package/dist/client/endpointOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"endpointOptions.js","names":[],"sources":["../../src/client/endpointOptions.ts"],"sourcesContent":["import { formatAdminURL } from 'payload/shared'\n\nexport type EndpointOption = { label: string; value: string }\n\n/**\n * What an endpoint-backed select's options depend on. `'document'` (the default) needs a saved\n * document: the URL carries the id and the fetch waits for one. `'request'` means the server\n * resolves options from the request alone (tenant, locale, auth), so the URL has no id segment\n * and the options load while the document is still being created.\n */\nexport type EndpointOptionsScope = 'document' | 'request'\n\n/**\n * URL for a collection endpoint serving select options, built the way Payload's own admin\n * components build fetch URLs: `formatAdminURL` over `config.routes.api`, which handles a Next\n * `basePath` and returns a same-origin relative URL so the admin cookie rides along without CORS\n * concerns. Document scope yields `{api}/{collection}/{id}/{endpoint}`; request scope yields\n * `{api}/{collection}/{endpoint}`.\n */\nexport const buildEndpointOptionsUrl = (args: {\n\tapiRoute: string\n\tcollectionSlug: string\n\tid?: number | string\n\tendpoint: string\n\tscope?: EndpointOptionsScope\n}): string => {\n\tconst endpoint = args.endpoint.replace(/^\\/+/, '')\n\tif (args.scope === 'request') {\n\t\treturn formatAdminURL({ apiRoute: args.apiRoute, path: `/${args.collectionSlug}/${endpoint}` })\n\t}\n\tif (args.id == null) {\n\t\t// The callers guard on this; throwing keeps a future one from fetching `/undefined/...`.\n\t\tthrow new Error(`form-builder: a document-scoped \"${endpoint}\" URL needs a document id`)\n\t}\n\treturn formatAdminURL({\n\t\tapiRoute: args.apiRoute,\n\t\tpath: `/${args.collectionSlug}/${encodeURIComponent(String(args.id))}/${endpoint}`,\n\t})\n}\n\n/**\n * Narrow an endpoint response to `{ options }`. Entries without a string value are dropped and\n * labels fall back to the value; a body without an options array throws so the select surfaces its\n * error state instead of silently rendering empty.\n */\nexport const parseEndpointOptions = (body: unknown): EndpointOption[] => {\n\tconst options =\n\t\tbody != null && typeof body === 'object' ? (body as { options?: unknown }).options : undefined\n\tif (!Array.isArray(options)) {\n\t\tthrow new Error('Malformed options response: expected { options: [] }')\n\t}\n\treturn options\n\t\t.filter(\n\t\t\t(option): option is { label?: unknown; value: string } =>\n\t\t\t\toption != null && typeof option === 'object' && typeof option.value === 'string'\n\t\t)\n\t\t.map((option) => ({\n\t\t\tvalue: option.value,\n\t\t\tlabel:\n\t\t\t\ttypeof option.label === 'string' && option.label.length > 0 ? option.label : option.value,\n\t\t}))\n}\n"],"mappings":";;;;;;;;;AAmBA,MAAa,2BAA2B,SAM1B;CACb,MAAM,WAAW,KAAK,SAAS,QAAQ,QAAQ,EAAE;CACjD,IAAI,KAAK,UAAU,WAClB,OAAO,eAAe;EAAE,UAAU,KAAK;EAAU,MAAM,IAAI,KAAK,eAAe,GAAG;CAAW,CAAC;CAE/F,IAAI,KAAK,MAAM,MAEd,MAAM,IAAI,MAAM,oCAAoC,SAAS,0BAA0B;CAExF,OAAO,eAAe;EACrB,UAAU,KAAK;EACf,MAAM,IAAI,KAAK,eAAe,GAAG,mBAAmB,OAAO,KAAK,EAAE,CAAC,EAAE,GAAG;CACzE,CAAC;AACF;;;;;;AAOA,MAAa,wBAAwB,SAAoC;CACxE,MAAM,UACL,QAAQ,QAAQ,OAAO,SAAS,WAAY,KAA+B,UAAU,KAAA;CACtF,IAAI,CAAC,MAAM,QAAQ,OAAO,GACzB,MAAM,IAAI,MAAM,sDAAsD;CAEvE,OAAO,QACL,QACC,WACA,UAAU,QAAQ,OAAO,WAAW,YAAY,OAAO,OAAO,UAAU,QAC1E,EACC,KAAK,YAAY;EACjB,OAAO,OAAO;EACd,OACC,OAAO,OAAO,UAAU,YAAY,OAAO,MAAM,SAAS,IAAI,OAAO,QAAQ,OAAO;CACtF,EAAE;AACJ"}