bj-web-components 0.2.26 → 0.2.28

package/dist/web/ProductField/sort.svg.mjs

@@ -0,0 +1,4 @@
+const sortImg = "data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M10.3576%2017.528C10.3576%2017.7887%2010.1444%2018%209.88136%2018C9.61835%2018%209.40513%2017.7887%209.40513%2017.528V7.58313L6.67551%2010.8295C6.50712%2011.0297%206.20676%2011.0568%206.00473%2010.8899C5.80272%2010.723%205.77545%2010.4254%205.9438%2010.2251L9.23476%206.31136C9.61494%205.85923%2010.3575%206.12565%2010.3576%206.71418V17.528ZM17.9981%2013.1613C18.1989%2013.3296%2018.2239%2013.6275%2018.0541%2013.8265L14.683%2017.7758C14.3009%2018.2233%2013.5632%2017.9556%2013.5632%2017.3694V6.47196C13.5632%206.21131%2013.7765%206.00001%2014.0395%206C14.3025%206%2014.5157%206.2113%2014.5157%206.47196V16.5101L17.327%2013.2169C17.4969%2013.0179%2017.7973%2012.993%2017.9981%2013.1613Z'%20fill='%23333333'/%3e%3cpath%20d='M10.3576%2017.528C10.3576%2017.7887%2010.1444%2018%209.88136%2018C9.61835%2018%209.40513%2017.7887%209.40513%2017.528V7.58313L6.67551%2010.8295C6.50712%2011.0297%206.20676%2011.0568%206.00473%2010.8899C5.80272%2010.723%205.77545%2010.4254%205.9438%2010.2251L9.23476%206.31136C9.61494%205.85923%2010.3575%206.12565%2010.3576%206.71418V17.528ZM17.9981%2013.1613C18.1989%2013.3296%2018.2239%2013.6275%2018.0541%2013.8265L14.683%2017.7758C14.3009%2018.2233%2013.5632%2017.9556%2013.5632%2017.3694V6.47196C13.5632%206.21131%2013.7765%206.00001%2014.0395%206C14.3025%206%2014.5157%206.2113%2014.5157%206.47196V16.5101L17.327%2013.2169C17.4969%2013.0179%2017.7973%2012.993%2017.9981%2013.1613Z'%20fill='black'%20fill-opacity='0.2'/%3e%3c/svg%3e";
+export {
+  sortImg as default
+};

package/dist/web/SkuInputCard/SkuInputCard.js

@@ -0,0 +1,276 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+;/* empty css                   */
+const spin_loading_red = require("./spin_loading_red.gif.js");
+function DragIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.8333 8.66683H16.1666V5.3335H12.8333M12.8333 13.6668H16.1666V10.3335H12.8333M7.83331 13.6668H11.1666V10.3335H7.83331M7.83331 18.6668H11.1666V15.3335H7.83331M12.8333 18.6668H16.1666V15.3335H12.8333M7.83331 8.66683H11.1666V5.3335H7.83331V8.66683Z", fill: "currentColor" }) });
+}
+function DeleteIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14.1667 5.3335C15.1792 5.3335 16 6.15431 16 7.16683V8.00016H19C19.2761 8.00016 19.5 8.22402 19.5 8.50016C19.5 8.7763 19.2761 9.00016 19 9.00016H17.3333V16.8335C17.3333 17.846 16.5125 18.6668 15.5 18.6668H8.5C7.48748 18.6668 6.66667 17.846 6.66667 16.8335V9.00016H5C4.72386 9.00016 4.5 8.7763 4.5 8.50016C4.5 8.22402 4.72386 8.00016 5 8.00016H8V7.16683C8 6.15431 8.82081 5.3335 9.83333 5.3335H14.1667ZM7.66667 16.8335C7.66667 17.2937 8.03976 17.6668 8.5 17.6668H15.5C15.9602 17.6668 16.3333 17.2937 16.3333 16.8335V9.00016H7.66667V16.8335ZM10.5 11.3335C10.7761 11.3335 11 11.5574 11 11.8335V15.0002C11 15.2763 10.7761 15.5002 10.5 15.5002C10.2239 15.5002 10 15.2763 10 15.0002V11.8335C10 11.5574 10.2239 11.3335 10.5 11.3335ZM13.5 11.3335C13.7761 11.3335 14 11.5574 14 11.8335V15.0002C14 15.2763 13.7761 15.5002 13.5 15.5002C13.2239 15.5002 13 15.2763 13 15.0002V11.8335C13 11.5574 13.2239 11.3335 13.5 11.3335ZM9.83333 6.3335C9.3731 6.3335 9 6.70659 9 7.16683V8.00016H15V7.16683C15 6.70659 14.6269 6.3335 14.1667 6.3335H9.83333Z", fill: "currentColor" }) });
+}
+function AddIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 1024 1024", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M515.512889 227.555556a21.070222 21.070222 0 0 1 21.070222 21.070222v245.816889h238.791111a21.070222 21.070222 0 0 1 0 42.140444h-238.791111v238.791111a21.070222 21.070222 0 0 1-42.140444 0v-238.791111H248.625778a21.070222 21.070222 0 0 1 0-42.140444h245.816889V248.625778A21.070222 21.070222 0 0 1 515.512889 227.555556z", fill: "currentColor" }) });
+}
+function PreviewThinIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8.68576 19.3333C9.0645 19.3333 9.37153 19.6404 9.37153 20.0191V22.1714C9.37153 22.4239 9.5761 22.6285 9.82856 22.6285H11.9809C12.3596 22.6285 12.6667 22.9355 12.6667 23.3142C12.6667 23.693 12.3596 24 11.9809 24H9.82856L9.73438 23.9976C8.79946 23.9502 8.04983 23.2005 8.00239 22.2656L8 22.1714V20.0191C8 19.6404 8.30703 19.3333 8.68576 19.3333Z", fill: "currentColor" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M23.3142 19.3333C23.693 19.3333 24 19.6404 24 20.0191V22.1714C24 23.1497 23.2317 23.9486 22.2656 23.9976L22.1714 24H20.0191C19.6404 24 19.3333 23.693 19.3333 23.3142C19.3333 22.9355 19.6404 22.6285 20.0191 22.6285H22.1714C22.4239 22.6285 22.6285 22.4239 22.6285 22.1714V20.0191C22.6285 19.6404 22.9355 19.3333 23.3142 19.3333Z", fill: "currentColor" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15.5573 11.2413C17.8315 11.2989 19.6575 13.1607 19.6576 15.4488L19.656 15.5573C19.6337 16.4372 19.3411 17.2497 18.8585 17.9156L20.5647 19.6217C20.825 19.8821 20.825 20.3043 20.5647 20.5647C20.3043 20.825 19.8823 20.825 19.622 20.5647L17.9156 18.8585C17.2224 19.3609 16.3703 19.6575 15.4488 19.6576L15.3401 19.656C13.102 19.5993 11.298 17.7954 11.2413 15.5573L11.24 15.4488C11.24 13.1244 13.1244 11.24 15.4488 11.24L15.5573 11.2413ZM15.4488 12.5734C13.8608 12.5734 12.5734 13.8608 12.5734 15.4488C12.5734 17.0368 13.8608 18.3242 15.4488 18.3242C17.0368 18.3242 18.3242 17.0368 18.3242 15.4488C18.3242 13.8608 17.0368 12.5734 15.4488 12.5734Z", fill: "currentColor" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11.9809 8C12.3596 8 12.6667 8.30703 12.6667 8.68576C12.6667 9.0645 12.3596 9.37153 11.9809 9.37153H9.82856C9.5761 9.37153 9.37153 9.5761 9.37153 9.82856V11.9809C9.37153 12.3596 9.0645 12.6667 8.68576 12.6667C8.30703 12.6667 8 12.3596 8 11.9809V9.82856C8.00001 8.81868 8.81868 8.00001 9.82856 8H11.9809Z", fill: "currentColor" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M22.1714 8C23.1813 8.00001 24 8.81868 24 9.82856V11.9809C24 12.3596 23.693 12.6667 23.3142 12.6667C22.9355 12.6667 22.6285 12.3596 22.6285 11.9809V9.82856C22.6285 9.5761 22.4239 9.37153 22.1714 9.37153H20.0191C19.6404 9.37153 19.3333 9.0645 19.3333 8.68576C19.3333 8.30703 19.6404 8 20.0191 8H22.1714Z", fill: "currentColor" })
+  ] });
+}
+function DeleteThinIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14.1667 5.3335C15.1792 5.3335 16 6.15431 16 7.16683V8.00016H19C19.2761 8.00016 19.5 8.22402 19.5 8.50016C19.5 8.7763 19.2761 9.00016 19 9.00016H17.3333V16.8335C17.3333 17.846 16.5125 18.6668 15.5 18.6668H8.5C7.48748 18.6668 6.66667 17.846 6.66667 16.8335V9.00016H5C4.72386 9.00016 4.5 8.7763 4.5 8.50016C4.5 8.22402 4.72386 8.00016 5 8.00016H8V7.16683C8 6.15431 8.82081 5.3335 9.83333 5.3335H14.1667ZM7.66667 16.8335C7.66667 17.2937 8.03976 17.6668 8.5 17.6668H15.5C15.9602 17.6668 16.3333 17.2937 16.3333 16.8335V9.00016H7.66667V16.8335ZM10.5 11.3335C10.7761 11.3335 11 11.5574 11 11.8335V15.0002C11 15.2763 10.7761 15.5002 10.5 15.5002C10.2239 15.5002 10 15.2763 10 15.0002V11.8335C10 11.5574 10.2239 11.3335 10.5 11.3335ZM13.5 11.3335C13.7761 11.3335 14 11.5574 14 11.8335V15.0002C14 15.2763 13.7761 15.5002 13.5 15.5002C13.2239 15.5002 13 15.2763 13 15.0002V11.8335C13 11.5574 13.2239 11.3335 13.5 11.3335ZM9.83333 6.3335C9.3731 6.3335 9 6.70659 9 7.16683V8.00016H15V7.16683C15 6.70659 14.6269 6.3335 14.1667 6.3335H9.83333Z", fill: "currentColor" }) });
+}
+function defaultFilter(option, input) {
+  const label = typeof option.label === "string" ? option.label : option.value;
+  return label.toLowerCase().includes(input.toLowerCase());
+}
+function HighlightText({ text, keyword }) {
+  if (!keyword) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: text });
+  const idx = text.toLowerCase().indexOf(keyword.toLowerCase());
+  if (idx === -1) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: text });
+  const before = text.slice(0, idx);
+  const match = text.slice(idx, idx + keyword.length);
+  const after = text.slice(idx + keyword.length);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    before,
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sku-input-card__dropdown-highlight", children: match }),
+    after
+  ] });
+}
+function SkuInputCard({
+  id,
+  name = "",
+  onNameChange,
+  mode = "single",
+  activeLang = "zh",
+  onLangChange,
+  showBody = true,
+  error = false,
+  onDelete,
+  onPreviewImage,
+  onDeleteImage,
+  onUpload,
+  onAssociate,
+  images,
+  labels,
+  inputEvents,
+  className,
+  style,
+  options,
+  optionFilterProp,
+  onSelect,
+  onSearch,
+  open: controlledOpen,
+  onDropdownVisibleChange
+}) {
+  const namePlaceholder = (labels == null ? void 0 : labels.namePlaceholder) ?? "请填写产品名称";
+  const uploadLocalLabel = (labels == null ? void 0 : labels.uploadLocal) ?? "本地上传";
+  const associateImageLabel = (labels == null ? void 0 : labels.associateImage) ?? "关联图片";
+  const fileInputRef = react.useRef(null);
+  const uploadOptionsRef = react.useRef(null);
+  const dropdownRef = react.useRef(null);
+  const nameWrapRef = react.useRef(null);
+  const [localImages, setLocalImages] = react.useState([]);
+  const [showUploadOptions, setShowUploadOptions] = react.useState(false);
+  const [internalDropdownOpen, setInternalDropdownOpen] = react.useState(false);
+  const [uploading, setUploading] = react.useState(false);
+  const hasOptions = Array.isArray(options) && options.length > 0;
+  const dropdownOpen = controlledOpen !== void 0 ? controlledOpen : hasOptions && internalDropdownOpen;
+  const filteredOptions = hasOptions ? name ? options.filter(
+    (o) => optionFilterProp ? optionFilterProp(o, name) : defaultFilter(o, name)
+  ) : options : [];
+  react.useEffect(() => {
+    if (!showUploadOptions) return;
+    function handleMouseDown(e) {
+      if (uploadOptionsRef.current && !uploadOptionsRef.current.contains(e.target)) {
+        setShowUploadOptions(false);
+      }
+    }
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => document.removeEventListener("mousedown", handleMouseDown);
+  }, [showUploadOptions]);
+  react.useEffect(() => {
+    if (!dropdownOpen) return;
+    function handleMouseDown(e) {
+      var _a, _b;
+      const target = e.target;
+      if (((_a = dropdownRef.current) == null ? void 0 : _a.contains(target)) || ((_b = nameWrapRef.current) == null ? void 0 : _b.contains(target))) {
+        return;
+      }
+      setInternalDropdownOpen(false);
+      onDropdownVisibleChange == null ? void 0 : onDropdownVisibleChange(false);
+    }
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => document.removeEventListener("mousedown", handleMouseDown);
+  }, [dropdownOpen, onDropdownVisibleChange]);
+  const displayImages = images ?? localImages;
+  async function handleFileChange(e) {
+    var _a;
+    const file = (_a = e.target.files) == null ? void 0 : _a[0];
+    if (!file) return;
+    e.target.value = "";
+    setShowUploadOptions(false);
+    setUploading(true);
+    try {
+      if (onUpload) {
+        const url = await onUpload(file);
+        if (url && images === void 0) {
+          setLocalImages((prev) => [...prev, url]);
+        }
+      } else {
+        const url = URL.createObjectURL(file);
+        setLocalImages((prev) => [...prev, url]);
+      }
+    } finally {
+      setUploading(false);
+    }
+  }
+  function handleLocalUpload() {
+    var _a;
+    (_a = fileInputRef.current) == null ? void 0 : _a.click();
+  }
+  function handleAssociate() {
+    setShowUploadOptions(false);
+    onAssociate == null ? void 0 : onAssociate();
+  }
+  const cardCls = [
+    "sku-input-card",
+    error && "sku-input-card--error",
+    className
+  ].filter(Boolean).join(" ");
+  const inputCls = [
+    "sku-input-card__name-input",
+    mode === "bilingual" && "sku-input-card__name-input--with-toggle",
+    error && "sku-input-card__name-input--error"
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cardCls, style, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sku-input-card__drag", id, children: /* @__PURE__ */ jsxRuntime.jsx(DragIcon, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sku-input-card__main", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sku-input-card__header", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sku-input-card__name-wrap", ref: nameWrapRef, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              className: inputCls,
+              value: name,
+              onChange: (e) => {
+                onNameChange == null ? void 0 : onNameChange(e.target.value);
+                onSearch == null ? void 0 : onSearch(e.target.value);
+              },
+              onFocus: () => {
+                if (hasOptions && controlledOpen === void 0) {
+                  setInternalDropdownOpen(true);
+                  onDropdownVisibleChange == null ? void 0 : onDropdownVisibleChange(true);
+                }
+              },
+              placeholder: namePlaceholder,
+              ...inputEvents
+            }
+          ),
+          dropdownOpen && filteredOptions.length > 0 && /* 绝对定位锚定在 name-wrap（position: relative）下方，随输入框跟随滚动/视口变化。
+          不再用 portal + position:fixed + getBoundingClientRect 定位：iOS 软键盘弹出时
+          fixed 与 getBoundingClientRect 的视口基准不一致，会导致下拉框位置偏移。 */
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sku-input-card__dropdown", ref: dropdownRef, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sku-input-card__dropdown-list", children: filteredOptions.map((opt) => {
+            const label = typeof opt.label === "string" ? opt.label : opt.value;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: [
+                  "sku-input-card__dropdown-item",
+                  opt.disabled && "sku-input-card__dropdown-item--disabled",
+                  opt.value === name && "sku-input-card__dropdown-item--selected"
+                ].filter(Boolean).join(" "),
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  if (opt.disabled) return;
+                  onNameChange == null ? void 0 : onNameChange(opt.value);
+                  onSelect == null ? void 0 : onSelect(opt.value, opt);
+                  setInternalDropdownOpen(false);
+                  onDropdownVisibleChange == null ? void 0 : onDropdownVisibleChange(false);
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(HighlightText, { text: label, keyword: name })
+              },
+              opt.value
+            );
+          }) }) }),
+          mode === "bilingual" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sku-input-card__lang-toggle", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: `sku-input-card__lang-btn sku-input-card__lang-btn--${activeLang === "zh" ? "active" : "inactive"}`,
+                onClick: () => onLangChange == null ? void 0 : onLangChange("zh"),
+                children: "中文"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: `sku-input-card__lang-btn sku-input-card__lang-btn--${activeLang === "en" ? "active" : "inactive"}`,
+                onClick: () => onLangChange == null ? void 0 : onLangChange("en"),
+                children: "EN"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "sku-input-card__delete", onClick: onDelete, children: /* @__PURE__ */ jsxRuntime.jsx(DeleteIcon, {}) })
+      ] }),
+      showBody && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sku-input-card__body", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref: fileInputRef,
+            type: "file",
+            accept: "image/jpeg,image/png,image/webp",
+            className: "sku-input-card__file-input",
+            onChange: handleFileChange
+          }
+        ),
+        uploading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sku-input-card__loading", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: spin_loading_red, alt: "上传中", className: "sku-input-card__loading-img" }) }) : displayImages[0] ? (
+          /* Single image preview */
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sku-input-card__image-item", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("img", { src: displayImages[0], alt: "图片", className: "sku-input-card__image-thumb" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sku-input-card__image-overlay", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  className: "sku-input-card__image-action-btn",
+                  onClick: () => onPreviewImage == null ? void 0 : onPreviewImage(displayImages[0]),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(PreviewThinIcon, {})
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  className: "sku-input-card__image-action-btn",
+                  onClick: () => onDeleteImage == null ? void 0 : onDeleteImage(displayImages[0]),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(DeleteThinIcon, {})
+                }
+              )
+            ] })
+          ] })
+        ) : showUploadOptions ? (
+          /* Upload options — local upload / associate image */
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sku-input-card__upload-options", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: uploadOptionsRef, className: "sku-input-card__upload-options-box", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("button", { className: "sku-input-card__upload-opt-btn", onClick: handleLocalUpload, children: uploadLocalLabel }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { className: "sku-input-card__upload-opt-btn", onClick: handleAssociate, children: associateImageLabel })
+          ] }) })
+        ) : (
+          /* Large add button — fills the body */
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              className: "sku-input-card__add-btn",
+              onClick: () => setShowUploadOptions(true),
+              children: /* @__PURE__ */ jsxRuntime.jsx(AddIcon, {})
+            }
+          )
+        )
+      ] })
+    ] })
+  ] });
+}
+module.exports = SkuInputCard;

package/dist/web/SkuInputCard/SkuInputCard.mjs

@@ -0,0 +1,277 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+/* empty css                   */
+import loadingIndicator from "./spin_loading_red.gif.mjs";
+function DragIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M12.8333 8.66683H16.1666V5.3335H12.8333M12.8333 13.6668H16.1666V10.3335H12.8333M7.83331 13.6668H11.1666V10.3335H7.83331M7.83331 18.6668H11.1666V15.3335H7.83331M12.8333 18.6668H16.1666V15.3335H12.8333M7.83331 8.66683H11.1666V5.3335H7.83331V8.66683Z", fill: "currentColor" }) });
+}
+function DeleteIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M14.1667 5.3335C15.1792 5.3335 16 6.15431 16 7.16683V8.00016H19C19.2761 8.00016 19.5 8.22402 19.5 8.50016C19.5 8.7763 19.2761 9.00016 19 9.00016H17.3333V16.8335C17.3333 17.846 16.5125 18.6668 15.5 18.6668H8.5C7.48748 18.6668 6.66667 17.846 6.66667 16.8335V9.00016H5C4.72386 9.00016 4.5 8.7763 4.5 8.50016C4.5 8.22402 4.72386 8.00016 5 8.00016H8V7.16683C8 6.15431 8.82081 5.3335 9.83333 5.3335H14.1667ZM7.66667 16.8335C7.66667 17.2937 8.03976 17.6668 8.5 17.6668H15.5C15.9602 17.6668 16.3333 17.2937 16.3333 16.8335V9.00016H7.66667V16.8335ZM10.5 11.3335C10.7761 11.3335 11 11.5574 11 11.8335V15.0002C11 15.2763 10.7761 15.5002 10.5 15.5002C10.2239 15.5002 10 15.2763 10 15.0002V11.8335C10 11.5574 10.2239 11.3335 10.5 11.3335ZM13.5 11.3335C13.7761 11.3335 14 11.5574 14 11.8335V15.0002C14 15.2763 13.7761 15.5002 13.5 15.5002C13.2239 15.5002 13 15.2763 13 15.0002V11.8335C13 11.5574 13.2239 11.3335 13.5 11.3335ZM9.83333 6.3335C9.3731 6.3335 9 6.70659 9 7.16683V8.00016H15V7.16683C15 6.70659 14.6269 6.3335 14.1667 6.3335H9.83333Z", fill: "currentColor" }) });
+}
+function AddIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 1024 1024", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M515.512889 227.555556a21.070222 21.070222 0 0 1 21.070222 21.070222v245.816889h238.791111a21.070222 21.070222 0 0 1 0 42.140444h-238.791111v238.791111a21.070222 21.070222 0 0 1-42.140444 0v-238.791111H248.625778a21.070222 21.070222 0 0 1 0-42.140444h245.816889V248.625778A21.070222 21.070222 0 0 1 515.512889 227.555556z", fill: "currentColor" }) });
+}
+function PreviewThinIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx("path", { d: "M8.68576 19.3333C9.0645 19.3333 9.37153 19.6404 9.37153 20.0191V22.1714C9.37153 22.4239 9.5761 22.6285 9.82856 22.6285H11.9809C12.3596 22.6285 12.6667 22.9355 12.6667 23.3142C12.6667 23.693 12.3596 24 11.9809 24H9.82856L9.73438 23.9976C8.79946 23.9502 8.04983 23.2005 8.00239 22.2656L8 22.1714V20.0191C8 19.6404 8.30703 19.3333 8.68576 19.3333Z", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("path", { d: "M23.3142 19.3333C23.693 19.3333 24 19.6404 24 20.0191V22.1714C24 23.1497 23.2317 23.9486 22.2656 23.9976L22.1714 24H20.0191C19.6404 24 19.3333 23.693 19.3333 23.3142C19.3333 22.9355 19.6404 22.6285 20.0191 22.6285H22.1714C22.4239 22.6285 22.6285 22.4239 22.6285 22.1714V20.0191C22.6285 19.6404 22.9355 19.3333 23.3142 19.3333Z", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("path", { d: "M15.5573 11.2413C17.8315 11.2989 19.6575 13.1607 19.6576 15.4488L19.656 15.5573C19.6337 16.4372 19.3411 17.2497 18.8585 17.9156L20.5647 19.6217C20.825 19.8821 20.825 20.3043 20.5647 20.5647C20.3043 20.825 19.8823 20.825 19.622 20.5647L17.9156 18.8585C17.2224 19.3609 16.3703 19.6575 15.4488 19.6576L15.3401 19.656C13.102 19.5993 11.298 17.7954 11.2413 15.5573L11.24 15.4488C11.24 13.1244 13.1244 11.24 15.4488 11.24L15.5573 11.2413ZM15.4488 12.5734C13.8608 12.5734 12.5734 13.8608 12.5734 15.4488C12.5734 17.0368 13.8608 18.3242 15.4488 18.3242C17.0368 18.3242 18.3242 17.0368 18.3242 15.4488C18.3242 13.8608 17.0368 12.5734 15.4488 12.5734Z", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("path", { d: "M11.9809 8C12.3596 8 12.6667 8.30703 12.6667 8.68576C12.6667 9.0645 12.3596 9.37153 11.9809 9.37153H9.82856C9.5761 9.37153 9.37153 9.5761 9.37153 9.82856V11.9809C9.37153 12.3596 9.0645 12.6667 8.68576 12.6667C8.30703 12.6667 8 12.3596 8 11.9809V9.82856C8.00001 8.81868 8.81868 8.00001 9.82856 8H11.9809Z", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("path", { d: "M22.1714 8C23.1813 8.00001 24 8.81868 24 9.82856V11.9809C24 12.3596 23.693 12.6667 23.3142 12.6667C22.9355 12.6667 22.6285 12.3596 22.6285 11.9809V9.82856C22.6285 9.5761 22.4239 9.37153 22.1714 9.37153H20.0191C19.6404 9.37153 19.3333 9.0645 19.3333 8.68576C19.3333 8.30703 19.6404 8 20.0191 8H22.1714Z", fill: "currentColor" })
+  ] });
+}
+function DeleteThinIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M14.1667 5.3335C15.1792 5.3335 16 6.15431 16 7.16683V8.00016H19C19.2761 8.00016 19.5 8.22402 19.5 8.50016C19.5 8.7763 19.2761 9.00016 19 9.00016H17.3333V16.8335C17.3333 17.846 16.5125 18.6668 15.5 18.6668H8.5C7.48748 18.6668 6.66667 17.846 6.66667 16.8335V9.00016H5C4.72386 9.00016 4.5 8.7763 4.5 8.50016C4.5 8.22402 4.72386 8.00016 5 8.00016H8V7.16683C8 6.15431 8.82081 5.3335 9.83333 5.3335H14.1667ZM7.66667 16.8335C7.66667 17.2937 8.03976 17.6668 8.5 17.6668H15.5C15.9602 17.6668 16.3333 17.2937 16.3333 16.8335V9.00016H7.66667V16.8335ZM10.5 11.3335C10.7761 11.3335 11 11.5574 11 11.8335V15.0002C11 15.2763 10.7761 15.5002 10.5 15.5002C10.2239 15.5002 10 15.2763 10 15.0002V11.8335C10 11.5574 10.2239 11.3335 10.5 11.3335ZM13.5 11.3335C13.7761 11.3335 14 11.5574 14 11.8335V15.0002C14 15.2763 13.7761 15.5002 13.5 15.5002C13.2239 15.5002 13 15.2763 13 15.0002V11.8335C13 11.5574 13.2239 11.3335 13.5 11.3335ZM9.83333 6.3335C9.3731 6.3335 9 6.70659 9 7.16683V8.00016H15V7.16683C15 6.70659 14.6269 6.3335 14.1667 6.3335H9.83333Z", fill: "currentColor" }) });
+}
+function defaultFilter(option, input) {
+  const label = typeof option.label === "string" ? option.label : option.value;
+  return label.toLowerCase().includes(input.toLowerCase());
+}
+function HighlightText({ text, keyword }) {
+  if (!keyword) return /* @__PURE__ */ jsx(Fragment, { children: text });
+  const idx = text.toLowerCase().indexOf(keyword.toLowerCase());
+  if (idx === -1) return /* @__PURE__ */ jsx(Fragment, { children: text });
+  const before = text.slice(0, idx);
+  const match = text.slice(idx, idx + keyword.length);
+  const after = text.slice(idx + keyword.length);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    before,
+    /* @__PURE__ */ jsx("span", { className: "sku-input-card__dropdown-highlight", children: match }),
+    after
+  ] });
+}
+function SkuInputCard({
+  id,
+  name = "",
+  onNameChange,
+  mode = "single",
+  activeLang = "zh",
+  onLangChange,
+  showBody = true,
+  error = false,
+  onDelete,
+  onPreviewImage,
+  onDeleteImage,
+  onUpload,
+  onAssociate,
+  images,
+  labels,
+  inputEvents,
+  className,
+  style,
+  options,
+  optionFilterProp,
+  onSelect,
+  onSearch,
+  open: controlledOpen,
+  onDropdownVisibleChange
+}) {
+  const namePlaceholder = (labels == null ? void 0 : labels.namePlaceholder) ?? "请填写产品名称";
+  const uploadLocalLabel = (labels == null ? void 0 : labels.uploadLocal) ?? "本地上传";
+  const associateImageLabel = (labels == null ? void 0 : labels.associateImage) ?? "关联图片";
+  const fileInputRef = useRef(null);
+  const uploadOptionsRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const nameWrapRef = useRef(null);
+  const [localImages, setLocalImages] = useState([]);
+  const [showUploadOptions, setShowUploadOptions] = useState(false);
+  const [internalDropdownOpen, setInternalDropdownOpen] = useState(false);
+  const [uploading, setUploading] = useState(false);
+  const hasOptions = Array.isArray(options) && options.length > 0;
+  const dropdownOpen = controlledOpen !== void 0 ? controlledOpen : hasOptions && internalDropdownOpen;
+  const filteredOptions = hasOptions ? name ? options.filter(
+    (o) => optionFilterProp ? optionFilterProp(o, name) : defaultFilter(o, name)
+  ) : options : [];
+  useEffect(() => {
+    if (!showUploadOptions) return;
+    function handleMouseDown(e) {
+      if (uploadOptionsRef.current && !uploadOptionsRef.current.contains(e.target)) {
+        setShowUploadOptions(false);
+      }
+    }
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => document.removeEventListener("mousedown", handleMouseDown);
+  }, [showUploadOptions]);
+  useEffect(() => {
+    if (!dropdownOpen) return;
+    function handleMouseDown(e) {
+      var _a, _b;
+      const target = e.target;
+      if (((_a = dropdownRef.current) == null ? void 0 : _a.contains(target)) || ((_b = nameWrapRef.current) == null ? void 0 : _b.contains(target))) {
+        return;
+      }
+      setInternalDropdownOpen(false);
+      onDropdownVisibleChange == null ? void 0 : onDropdownVisibleChange(false);
+    }
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => document.removeEventListener("mousedown", handleMouseDown);
+  }, [dropdownOpen, onDropdownVisibleChange]);
+  const displayImages = images ?? localImages;
+  async function handleFileChange(e) {
+    var _a;
+    const file = (_a = e.target.files) == null ? void 0 : _a[0];
+    if (!file) return;
+    e.target.value = "";
+    setShowUploadOptions(false);
+    setUploading(true);
+    try {
+      if (onUpload) {
+        const url = await onUpload(file);
+        if (url && images === void 0) {
+          setLocalImages((prev) => [...prev, url]);
+        }
+      } else {
+        const url = URL.createObjectURL(file);
+        setLocalImages((prev) => [...prev, url]);
+      }
+    } finally {
+      setUploading(false);
+    }
+  }
+  function handleLocalUpload() {
+    var _a;
+    (_a = fileInputRef.current) == null ? void 0 : _a.click();
+  }
+  function handleAssociate() {
+    setShowUploadOptions(false);
+    onAssociate == null ? void 0 : onAssociate();
+  }
+  const cardCls = [
+    "sku-input-card",
+    error && "sku-input-card--error",
+    className
+  ].filter(Boolean).join(" ");
+  const inputCls = [
+    "sku-input-card__name-input",
+    mode === "bilingual" && "sku-input-card__name-input--with-toggle",
+    error && "sku-input-card__name-input--error"
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: cardCls, style, children: [
+    /* @__PURE__ */ jsx("span", { className: "sku-input-card__drag", id, children: /* @__PURE__ */ jsx(DragIcon, {}) }),
+    /* @__PURE__ */ jsxs("div", { className: "sku-input-card__main", children: [
+      /* @__PURE__ */ jsxs("div", { className: "sku-input-card__header", children: [
+        /* @__PURE__ */ jsxs("div", { className: "sku-input-card__name-wrap", ref: nameWrapRef, children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: inputCls,
+              value: name,
+              onChange: (e) => {
+                onNameChange == null ? void 0 : onNameChange(e.target.value);
+                onSearch == null ? void 0 : onSearch(e.target.value);
+              },
+              onFocus: () => {
+                if (hasOptions && controlledOpen === void 0) {
+                  setInternalDropdownOpen(true);
+                  onDropdownVisibleChange == null ? void 0 : onDropdownVisibleChange(true);
+                }
+              },
+              placeholder: namePlaceholder,
+              ...inputEvents
+            }
+          ),
+          dropdownOpen && filteredOptions.length > 0 && /* 绝对定位锚定在 name-wrap（position: relative）下方，随输入框跟随滚动/视口变化。
+          不再用 portal + position:fixed + getBoundingClientRect 定位：iOS 软键盘弹出时
+          fixed 与 getBoundingClientRect 的视口基准不一致，会导致下拉框位置偏移。 */
+          /* @__PURE__ */ jsx("div", { className: "sku-input-card__dropdown", ref: dropdownRef, children: /* @__PURE__ */ jsx("div", { className: "sku-input-card__dropdown-list", children: filteredOptions.map((opt) => {
+            const label = typeof opt.label === "string" ? opt.label : opt.value;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: [
+                  "sku-input-card__dropdown-item",
+                  opt.disabled && "sku-input-card__dropdown-item--disabled",
+                  opt.value === name && "sku-input-card__dropdown-item--selected"
+                ].filter(Boolean).join(" "),
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  if (opt.disabled) return;
+                  onNameChange == null ? void 0 : onNameChange(opt.value);
+                  onSelect == null ? void 0 : onSelect(opt.value, opt);
+                  setInternalDropdownOpen(false);
+                  onDropdownVisibleChange == null ? void 0 : onDropdownVisibleChange(false);
+                },
+                children: /* @__PURE__ */ jsx(HighlightText, { text: label, keyword: name })
+              },
+              opt.value
+            );
+          }) }) }),
+          mode === "bilingual" && /* @__PURE__ */ jsxs("div", { className: "sku-input-card__lang-toggle", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: `sku-input-card__lang-btn sku-input-card__lang-btn--${activeLang === "zh" ? "active" : "inactive"}`,
+                onClick: () => onLangChange == null ? void 0 : onLangChange("zh"),
+                children: "中文"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: `sku-input-card__lang-btn sku-input-card__lang-btn--${activeLang === "en" ? "active" : "inactive"}`,
+                onClick: () => onLangChange == null ? void 0 : onLangChange("en"),
+                children: "EN"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("button", { className: "sku-input-card__delete", onClick: onDelete, children: /* @__PURE__ */ jsx(DeleteIcon, {}) })
+      ] }),
+      showBody && /* @__PURE__ */ jsxs("div", { className: "sku-input-card__body", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: fileInputRef,
+            type: "file",
+            accept: "image/jpeg,image/png,image/webp",
+            className: "sku-input-card__file-input",
+            onChange: handleFileChange
+          }
+        ),
+        uploading ? /* @__PURE__ */ jsx("div", { className: "sku-input-card__loading", children: /* @__PURE__ */ jsx("img", { src: loadingIndicator, alt: "上传中", className: "sku-input-card__loading-img" }) }) : displayImages[0] ? (
+          /* Single image preview */
+          /* @__PURE__ */ jsxs("div", { className: "sku-input-card__image-item", children: [
+            /* @__PURE__ */ jsx("img", { src: displayImages[0], alt: "图片", className: "sku-input-card__image-thumb" }),
+            /* @__PURE__ */ jsxs("div", { className: "sku-input-card__image-overlay", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: "sku-input-card__image-action-btn",
+                  onClick: () => onPreviewImage == null ? void 0 : onPreviewImage(displayImages[0]),
+                  children: /* @__PURE__ */ jsx(PreviewThinIcon, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: "sku-input-card__image-action-btn",
+                  onClick: () => onDeleteImage == null ? void 0 : onDeleteImage(displayImages[0]),
+                  children: /* @__PURE__ */ jsx(DeleteThinIcon, {})
+                }
+              )
+            ] })
+          ] })
+        ) : showUploadOptions ? (
+          /* Upload options — local upload / associate image */
+          /* @__PURE__ */ jsx("div", { className: "sku-input-card__upload-options", children: /* @__PURE__ */ jsxs("div", { ref: uploadOptionsRef, className: "sku-input-card__upload-options-box", children: [
+            /* @__PURE__ */ jsx("button", { className: "sku-input-card__upload-opt-btn", onClick: handleLocalUpload, children: uploadLocalLabel }),
+            /* @__PURE__ */ jsx("button", { className: "sku-input-card__upload-opt-btn", onClick: handleAssociate, children: associateImageLabel })
+          ] }) })
+        ) : (
+          /* Large add button — fills the body */
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "sku-input-card__add-btn",
+              onClick: () => setShowUploadOptions(true),
+              children: /* @__PURE__ */ jsx(AddIcon, {})
+            }
+          )
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  SkuInputCard as default
+};