@firecms/collection_editor 3.4.0-canary.8635253 → 3.4.0-canary.d20cc85

package/dist/index.es.js

@@ -11483,6 +11483,30 @@ function DisplaySettingsForm({
     });
     return result;
   }, [resolvedCollection.properties]);
+  const imageProperties = 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) ;
@@ -11509,25 +11533,25 @@ function DisplaySettingsForm({
                   ")"
                 ] });
               }
-              const prop_0 = numberProperties.find((p_0) => p_0.key === value_1);
-              if (!prop_0) return t("select_a_property");
-              const fieldConfig = 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 = getFieldConfig(prop_2.property, customizationController.propertyConfigs);
               return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ jsx(PropertyConfigBadge, { propertyConfig: fieldConfig }),
-                /* @__PURE__ */ jsx("span", { children: prop_0.label })
+                /* @__PURE__ */ jsx("span", { children: prop_2.label })
               ] });
             }, endAdornment: values.orderProperty ? /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: (e) => {
               e.stopPropagation();
               setFieldValue("orderProperty", void 0);
-            }, children: /* @__PURE__ */ jsx(CloseIcon, { size: "small" }) }) : void 0, children: numberProperties.map((prop_1) => {
-              const fieldConfig_0 = getFieldConfig(prop_1.property, customizationController.propertyConfigs);
-              return /* @__PURE__ */ jsx(SelectItem, { value: prop_1.key, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            }, children: /* @__PURE__ */ jsx(CloseIcon, { size: "small" }) }) : void 0, children: numberProperties.map((prop_3) => {
+              const fieldConfig_0 = getFieldConfig(prop_3.property, customizationController.propertyConfigs);
+              return /* @__PURE__ */ jsx(SelectItem, { value: prop_3.key, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
                 /* @__PURE__ */ jsx(PropertyConfigBadge, { propertyConfig: fieldConfig_0 }),
                 /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx("div", { children: prop_1.label }),
+                  /* @__PURE__ */ jsx("div", { children: prop_3.label }),
                   /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: fieldConfig_0?.name || t("number") })
                 ] })
-              ] }) }, prop_1.key);
+              ] }) }, prop_3.key);
             }) }, `order-select-${numberProperties.length}`),
             /* @__PURE__ */ jsx(FieldCaption, { error: orderPropertyMissing, children: orderPropertyMissing ? t("order_property_not_found", {
               property: values.orderProperty ?? ""
@@ -11566,14 +11590,54 @@ function DisplaySettingsForm({
           ] });
         })()
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsx(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__ */ jsx(SelectItem, { value: value_3, children: value_3.toUpperCase() }, `size-select-${value_3}`)) }) }),
+      /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "label", color: "secondary", className: "ml-3.5", children: t("image_property") }),
+          /* @__PURE__ */ jsx(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__ */ 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 = getFieldConfig(prop_4.property, customizationController.propertyConfigs);
+            return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(PropertyConfigBadge, { propertyConfig: fieldConfig_1 }),
+              /* @__PURE__ */ jsx("span", { children: prop_4.label })
+            ] });
+          }, endAdornment: values.imageProperty ? /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: (e_0) => {
+            e_0.stopPropagation();
+            setFieldValue("imageProperty", void 0);
+          }, children: /* @__PURE__ */ jsx(CloseIcon, { size: "small" }) }) : void 0, children: imageProperties.map((prop_5) => {
+            const fieldConfig_2 = getFieldConfig(prop_5.property, customizationController.propertyConfigs);
+            return /* @__PURE__ */ jsx(SelectItem, { value: prop_5.key, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsx(PropertyConfigBadge, { propertyConfig: fieldConfig_2 }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("div", { children: prop_5.label }),
+                /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: fieldConfig_2?.name || prop_5.label })
+              ] })
+            ] }) }, prop_5.key);
+          }) }, `image-select-${imageProperties.length}`),
+          /* @__PURE__ */ jsx(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__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsx(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__ */ jsx(SelectItem, { value: value_4, children: value_4.toUpperCase() }, `size-select-${value_4}`)) }) }),
       /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-        /* @__PURE__ */ jsx(TextField, { name: "sideDialogWidth", type: "number", "aria-describedby": "sideDialogWidth-helper", onChange: (e_0) => {
-          const value_4 = e_0.target.value;
-          if (!value_4) {
+        /* @__PURE__ */ jsx(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__ */ jsx(IconButton, { size: "small", onClick: () => {
           setFieldValue("sideDialogWidth", null);
@@ -11581,11 +11645,11 @@ function DisplaySettingsForm({
         /* @__PURE__ */ jsx(FieldCaption, { children: t("side_dialog_width_description") })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-        /* @__PURE__ */ jsx(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__ */ jsx(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__ */ jsx(FieldCaption, { children: t("inline_editing_description") })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-        /* @__PURE__ */ jsx(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__ */ jsx(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__ */ jsx(FieldCaption, { children: t("json_view_description") })
       ] })
     ] }),