@firecms/collection_editor 3.3.0 → 3.4.0-canary.0ef7442

package/dist/index.umd.js

@@ -11487,6 +11487,30 @@
       });
       return result;
     }, [resolvedCollection.properties]);
+    const imageProperties = React.useMemo(() => {
+      const result_0 = [];
+      if (!resolvedCollection.properties) return result_0;
+      const isImageProperty = (prop_0) => {
+        if (!prop_0 || !("dataType" in prop_0)) return false;
+        if (prop_0.dataType === "string") {
+          return Boolean(prop_0.storage?.acceptedFiles?.includes("image/*")) || prop_0.url === "image";
+        }
+        if (prop_0.dataType === "array" && prop_0.of) {
+          return isImageProperty(prop_0.of);
+        }
+        return false;
+      };
+      Object.entries(resolvedCollection.properties).forEach(([key_0, prop_1]) => {
+        if (isImageProperty(prop_1)) {
+          result_0.push({
+            key: key_0,
+            label: prop_1.name || key_0,
+            property: prop_1
+          });
+        }
+      });
+      return result_0;
+    }, [resolvedCollection.properties]);
     if (typeof values.customId === "object") ;
     else if (values.customId === true) ;
     else if (values.customId === false) ;
@@ -11513,25 +11537,25 @@
                     ")"
                   ] });
                 }
-                const prop_0 = numberProperties.find((p_0) => p_0.key === value_1);
-                if (!prop_0) return t("select_a_property");
-                const fieldConfig = core.getFieldConfig(prop_0.property, customizationController.propertyConfigs);
+                const prop_2 = numberProperties.find((p_0) => p_0.key === value_1);
+                if (!prop_2) return t("select_a_property");
+                const fieldConfig = core.getFieldConfig(prop_2.property, customizationController.propertyConfigs);
                 return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(core.PropertyConfigBadge, { propertyConfig: fieldConfig }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: prop_0.label })
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: prop_2.label })
                 ] });
               }, endAdornment: values.orderProperty ? /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: (e) => {
                 e.stopPropagation();
                 setFieldValue("orderProperty", void 0);
-              }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.CloseIcon, { size: "small" }) }) : void 0, children: numberProperties.map((prop_1) => {
-                const fieldConfig_0 = core.getFieldConfig(prop_1.property, customizationController.propertyConfigs);
-                return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: prop_1.key, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+              }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.CloseIcon, { size: "small" }) }) : void 0, children: numberProperties.map((prop_3) => {
+                const fieldConfig_0 = core.getFieldConfig(prop_3.property, customizationController.propertyConfigs);
+                return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: prop_3.key, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(core.PropertyConfigBadge, { propertyConfig: fieldConfig_0 }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { children: prop_1.label }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { children: prop_3.label }),
                     /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", color: "secondary", children: fieldConfig_0?.name || t("number") })
                   ] })
-                ] }) }, prop_1.key);
+                ] }) }, prop_3.key);
               }) }, `order-select-${numberProperties.length}`),
               /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { error: orderPropertyMissing, children: orderPropertyMissing ? t("order_property_not_found", {
                 property: values.orderProperty ?? ""
@@ -11570,14 +11594,54 @@
             ] });
           })()
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select, { name: "defaultSize", size: "large", fullWidth: true, label: t("default_row_size"), position: "item-aligned", onChange: handleChange, value: values.defaultSize ?? "", renderValue: (value_2) => value_2.toUpperCase(), children: ["xs", "s", "m", "l", "xl"].map((value_3) => /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: value_3, children: value_3.toUpperCase() }, `size-select-${value_3}`)) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12 mt-4", children: (() => {
+          const imagePropertyMissing = Boolean(values.imageProperty) && !imageProperties.some((p_2) => p_2.key === values.imageProperty);
+          return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "label", color: "secondary", className: "ml-3.5", children: t("image_property") }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Select, { name: "imageProperty", size: "large", fullWidth: true, position: "item-aligned", disabled: imageProperties.length === 0, error: imagePropertyMissing, value: values.imageProperty ?? "", onValueChange: (v_0) => {
+              setFieldValue("imageProperty", v_0 || void 0);
+            }, renderValue: (value_2) => {
+              if (imagePropertyMissing) {
+                return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-red-500", children: [
+                  value_2,
+                  " (",
+                  t("not_found_suffix"),
+                  ")"
+                ] });
+              }
+              const prop_4 = imageProperties.find((p_3) => p_3.key === value_2);
+              if (!prop_4) return t("select_a_property");
+              const fieldConfig_1 = core.getFieldConfig(prop_4.property, customizationController.propertyConfigs);
+              return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(core.PropertyConfigBadge, { propertyConfig: fieldConfig_1 }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: prop_4.label })
+              ] });
+            }, endAdornment: values.imageProperty ? /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: (e_0) => {
+              e_0.stopPropagation();
+              setFieldValue("imageProperty", void 0);
+            }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.CloseIcon, { size: "small" }) }) : void 0, children: imageProperties.map((prop_5) => {
+              const fieldConfig_2 = core.getFieldConfig(prop_5.property, customizationController.propertyConfigs);
+              return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: prop_5.key, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(core.PropertyConfigBadge, { propertyConfig: fieldConfig_2 }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { children: prop_5.label }),
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", color: "secondary", children: fieldConfig_2?.name || prop_5.label })
+                ] })
+              ] }) }, prop_5.key);
+            }) }, `image-select-${imageProperties.length}`),
+            /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { error: imagePropertyMissing, children: imagePropertyMissing ? t("image_property_not_found", {
+              property: values.imageProperty ?? ""
+            }) : imageProperties.length === 0 ? t("no_image_properties") : t("image_property_description") })
+          ] });
+        })() }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select, { name: "defaultSize", size: "large", fullWidth: true, label: t("default_row_size"), position: "item-aligned", onChange: handleChange, value: values.defaultSize ?? "", renderValue: (value_3) => value_3.toUpperCase(), children: ["xs", "s", "m", "l", "xl"].map((value_4) => /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: value_4, children: value_4.toUpperCase() }, `size-select-${value_4}`)) }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ui.TextField, { name: "sideDialogWidth", type: "number", "aria-describedby": "sideDialogWidth-helper", onChange: (e_0) => {
-            const value_4 = e_0.target.value;
-            if (!value_4) {
+          /* @__PURE__ */ jsxRuntime.jsx(ui.TextField, { name: "sideDialogWidth", type: "number", "aria-describedby": "sideDialogWidth-helper", onChange: (e_1) => {
+            const value_5 = e_1.target.value;
+            if (!value_5) {
               setFieldValue("sideDialogWidth", null);
-            } else if (!isNaN(Number(value_4))) {
-              setFieldValue("sideDialogWidth", Number(value_4));
+            } else if (!isNaN(Number(value_5))) {
+              setFieldValue("sideDialogWidth", Number(value_5));
             }
           }, endAdornment: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: () => {
             setFieldValue("sideDialogWidth", null);
@@ -11585,11 +11649,11 @@
           /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { children: t("side_dialog_width_description") })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ui.BooleanSwitchWithLabel, { position: "start", size: "large", label: values.inlineEditing === void 0 || values.inlineEditing ? t("inline_editing_enabled") : t("inline_editing_disabled"), onValueChange: (v_0) => setFieldValue("inlineEditing", v_0), value: values.inlineEditing === void 0 ? true : values.inlineEditing }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.BooleanSwitchWithLabel, { position: "start", size: "large", label: values.inlineEditing === void 0 || values.inlineEditing ? t("inline_editing_enabled") : t("inline_editing_disabled"), onValueChange: (v_1) => setFieldValue("inlineEditing", v_1), value: values.inlineEditing === void 0 ? true : values.inlineEditing }),
           /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { children: t("inline_editing_description") })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ui.BooleanSwitchWithLabel, { position: "start", size: "large", label: values.includeJsonView === void 0 || values.includeJsonView ? t("include_json_view") : t("no_json_view"), onValueChange: (v_1) => setFieldValue("includeJsonView", v_1), value: values.includeJsonView === void 0 ? true : values.includeJsonView }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.BooleanSwitchWithLabel, { position: "start", size: "large", label: values.includeJsonView === void 0 || values.includeJsonView ? t("include_json_view") : t("no_json_view"), onValueChange: (v_2) => setFieldValue("includeJsonView", v_2), value: values.includeJsonView === void 0 ? true : values.includeJsonView }),
           /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { children: t("json_view_description") })
         ] })
       ] }),
@@ -12151,7 +12215,7 @@
         /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { className: "mt-8 w-full", size: "large", onClick: () => setNewPropertyDialogOpen(true), startIcon: /* @__PURE__ */ jsxRuntime.jsx(ui.AddIcon, {}), children: t("add_new_property") })
       ] }),
       !asDialog && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12 lg:col-span-7 p-4 md:py-8 md:px-4 h-full overflow-auto pb-20 md:pb-20", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-8 min-h-full w-full flex flex-col justify-center", children: [
-        selectedPropertyFullId && selectedProperty && !core.isPropertyBuilder(selectedProperty) && /* @__PURE__ */ jsxRuntime.jsx(PropertyForm, { inArray: false, existingProperty: !isNewCollection, autoUpdateId: false, allowDataInference: !isNewCollection, autoOpenTypeSelect: false, propertyKey: selectedPropertyKey, propertyNamespace: selectedPropertyNamespace, property: selectedProperty, onPropertyChanged, onDelete: deleteProperty, onError: onPropertyErrorInternal, forceShowErrors: showErrors, initialErrors, getData, propertyConfigs, collectionEditable, collectionProperties: values.properties }, `edit_view_${selectedPropertyIndex}_${generationCounter}`),
+        selectedPropertyFullId && selectedProperty && !core.isPropertyBuilder(selectedProperty) && /* @__PURE__ */ jsxRuntime.jsx(PropertyForm, { inArray: false, existingProperty: !isNewCollection, autoUpdateId: false, allowDataInference: !isNewCollection, autoOpenTypeSelect: false, propertyKey: selectedPropertyKey, propertyNamespace: selectedPropertyNamespace, property: selectedProperty, onPropertyChanged, onDelete: deleteProperty, onError: onPropertyErrorInternal, forceShowErrors: showErrors, initialErrors, getData, propertyConfigs, collectionEditable, collectionProperties: values.properties }, `edit_view_${selectedPropertyFullId}_${generationCounter}`),
         !selectedProperty && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col items-center justify-center h-full gap-4", children: [
           /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "label", className: "", children: emptyCollection ? t("add_first_property") : t("select_property_to_edit") }),
           /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { onClick: () => setNewPropertyDialogOpen(true), children: [
@@ -12161,7 +12225,7 @@
         ] }),
         selectedProperty && core.isPropertyBuilder(selectedProperty) && /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "label", className: "flex items-center justify-center", children: t("property_defined_as_builder") })
       ] }) }),
-      asDialog && /* @__PURE__ */ jsxRuntime.jsx(PropertyFormDialog, { inArray: false, open: selectedPropertyIndex !== void 0, autoUpdateId: !selectedProperty, allowDataInference: !isNewCollection, existingProperty: true, autoOpenTypeSelect: false, propertyKey: selectedPropertyKey, propertyNamespace: selectedPropertyNamespace, property: selectedProperty, onPropertyChanged, onDelete: deleteProperty, onError: onPropertyErrorInternal, forceShowErrors: showErrors, initialErrors, getData, propertyConfigs, collectionEditable, collectionProperties: values.properties, onCancel: closePropertyDialog, onOkClicked: asDialog ? closePropertyDialog : void 0 }, `edit_view_${selectedPropertyIndex}_${generationCounter}`)
+      asDialog && /* @__PURE__ */ jsxRuntime.jsx(PropertyFormDialog, { inArray: false, open: selectedPropertyIndex !== void 0, autoUpdateId: !selectedProperty, allowDataInference: !isNewCollection, existingProperty: true, autoOpenTypeSelect: false, propertyKey: selectedPropertyKey, propertyNamespace: selectedPropertyNamespace, property: selectedProperty, onPropertyChanged, onDelete: deleteProperty, onError: onPropertyErrorInternal, forceShowErrors: showErrors, initialErrors, getData, propertyConfigs, collectionEditable, collectionProperties: values.properties, onCancel: closePropertyDialog, onOkClicked: asDialog ? closePropertyDialog : void 0 }, `edit_view_${selectedPropertyFullId}_${generationCounter}`)
     ] });
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       body,