bj-web-components 0.2.28 → 0.2.29

package/dist/web/ProductField/ProductField.js

@@ -1,272 +1 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const reactDom = require("react-dom");
-;/* empty css                   */
-const no_data_light = require("./no_data_light.svg.js");
-const arrowUp = require("./arrow-up.svg.js");
-const sort = require("./sort.svg.js");
-const search = require("./search.svg.js");
-const checkboxNo = require("./checkbox-no.svg.js");
-const checkboxOk = require("./checkbox-ok.svg.js");
-function CloseIcon({ size = 20 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16.5613 6.73027C16.7558 6.53571 17.0723 6.53442 17.2684 6.72736C17.4644 6.92032 17.4657 7.23444 17.2713 7.42901L12.7036 12.0002L17.2713 16.5714C17.4657 16.766 17.4644 17.0801 17.2684 17.273C17.0723 17.4659 16.7558 17.4646 16.5613 17.2701L11.9996 12.7047L7.43794 17.2701C7.24352 17.4647 6.92699 17.4659 6.73091 17.273C6.53485 17.0801 6.53355 16.7659 6.72798 16.5714L11.2955 12.0002L6.72798 7.42901C6.53355 7.23442 6.53485 6.92032 6.73091 6.72736C6.92698 6.53442 7.2435 6.53571 7.43794 6.73027L11.9996 11.2955L16.5613 6.73027Z", fill: "currentColor" }) });
-}
-function BuProductField({
-  options = [],
-  value = [],
-  onChange,
-  placeholder = "请选择",
-  emptyText = "暂无产品数据",
-  onManageField,
-  multiple = true,
-  showSearch = true,
-  showSort = true,
-  addButtonText,
-  onAdd,
-  labels,
-  className,
-  style,
-  getPopupContainer
-}) {
-  const searchPlaceholder = (labels == null ? void 0 : labels.searchPlaceholder) ?? "搜索";
-  const sortDefault = (labels == null ? void 0 : labels.sortDefault) ?? "默认顺序";
-  const sortAsc = (labels == null ? void 0 : labels.sortAsc) ?? "名称A-Z";
-  const sortDesc = (labels == null ? void 0 : labels.sortDesc) ?? "名称Z-A";
-  const noMatchText = (labels == null ? void 0 : labels.noMatchText) ?? "暂无选项";
-  const manageFieldPre = (labels == null ? void 0 : labels.manageFieldPre) ?? "请前往";
-  const manageFieldLink = (labels == null ? void 0 : labels.manageFieldLink) ?? "管理字段";
-  const manageFieldPost = (labels == null ? void 0 : labels.manageFieldPost) ?? "添加";
-  const [open, setOpen] = react.useState(false);
-  const [search$1, setSearch] = react.useState("");
-  const [sortOrder, setSortOrder] = react.useState("none");
-  const [sortDropdownOpen, setSortDropdownOpen] = react.useState(false);
-  const rootRef = react.useRef(null);
-  const sortBtnRef = react.useRef(null);
-  const portalRef = react.useRef(null);
-  const [dropdownPos, setDropdownPos] = react.useState({ top: 0, left: 0, width: 0 });
-  const updatePosition = react.useCallback(() => {
-    if (!rootRef.current) return;
-    const rect = rootRef.current.getBoundingClientRect();
-    setDropdownPos({
-      top: rect.bottom + 4,
-      left: rect.left,
-      width: rect.width
-    });
-  }, []);
-  react.useLayoutEffect(() => {
-    if (open) updatePosition();
-  }, [open, updatePosition]);
-  react.useEffect(() => {
-    if (!open) return;
-    const handler = (e) => {
-      var _a, _b;
-      const target = e.target;
-      if (((_a = portalRef.current) == null ? void 0 : _a.contains(target)) || ((_b = rootRef.current) == null ? void 0 : _b.contains(target))) {
-        return;
-      }
-      close();
-    };
-    document.addEventListener("mousedown", handler);
-    window.addEventListener("scroll", updatePosition, true);
-    window.addEventListener("resize", updatePosition);
-    return () => {
-      document.removeEventListener("mousedown", handler);
-      window.removeEventListener("scroll", updatePosition, true);
-      window.removeEventListener("resize", updatePosition);
-    };
-  }, [open, updatePosition]);
-  react.useEffect(() => {
-    if (!sortDropdownOpen) return;
-    const handler = (e) => {
-      if (sortBtnRef.current && !sortBtnRef.current.contains(e.target)) {
-        setSortDropdownOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [sortDropdownOpen]);
-  const tagsRef = react.useRef(null);
-  const triggerTagsRef = react.useRef(null);
-  const dragState = react.useRef({ dragging: false, startX: 0, scrollLeft: 0, target: null });
-  const makeDragHandlers = react.useCallback((ref) => ({
-    onMouseDown: (e) => {
-      const el = ref.current;
-      if (!el) return;
-      dragState.current = { dragging: true, startX: e.clientX, scrollLeft: el.scrollLeft, target: el };
-    },
-    onMouseMove: (e) => {
-      const { dragging, startX, scrollLeft, target } = dragState.current;
-      if (!dragging || !target) return;
-      e.preventDefault();
-      target.scrollLeft = scrollLeft - (e.clientX - startX);
-    },
-    onMouseUp: () => {
-      dragState.current.dragging = false;
-    },
-    onMouseLeave: () => {
-      dragState.current.dragging = false;
-    }
-  }), []);
-  function toggleOption(val) {
-    if (!multiple) {
-      onChange == null ? void 0 : onChange(value.includes(val) ? [] : [val]);
-      if (!value.includes(val)) close();
-      return;
-    }
-    const next = value.includes(val) ? value.filter((v) => v !== val) : [...value, val];
-    onChange == null ? void 0 : onChange(next);
-  }
-  function removeTag(val) {
-    onChange == null ? void 0 : onChange(value.filter((v) => v !== val));
-  }
-  function close() {
-    setOpen(false);
-    setSearch("");
-    setSortOrder("none");
-  }
-  function selectSort(order) {
-    setSortOrder(order);
-    setSortDropdownOpen(false);
-  }
-  const filteredOptions = react.useMemo(() => {
-    let list = options.filter((o) => {
-      const text = o.searchText ?? (typeof o.label === "string" ? o.label : "");
-      return text.toLowerCase().includes(search$1.toLowerCase());
-    });
-    const getText = (o) => o.searchText ?? (typeof o.label === "string" ? o.label : "");
-    if (sortOrder === "asc") list = [...list].sort((a, b) => getText(a).localeCompare(getText(b)));
-    if (sortOrder === "desc") list = [...list].sort((a, b) => getText(b).localeCompare(getText(a)));
-    return list;
-  }, [options, search$1, sortOrder]);
-  const selectedOptions = options.filter((o) => value.includes(o.value));
-  const hasOptions = options.length > 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, className: ["bu-pf", className].filter(Boolean).join(" "), style, children: [
-    !open && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `bu-pf__trigger${selectedOptions.length > 0 ? " bu-pf__trigger--selected" : ""}`, onClick: () => setOpen(true), children: [
-      selectedOptions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: "bu-pf__trigger-tags",
-          ref: triggerTagsRef,
-          ...makeDragHandlers(triggerTagsRef),
-          children: selectedOptions.map((opt) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `bu-pf__tag${!multiple ? " bu-pf__tag--single" : ""}`, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bu-pf__tag-text", children: opt.label }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                className: "bu-pf__tag-close",
-                onClick: (e) => {
-                  e.stopPropagation();
-                  removeTag(opt.value);
-                },
-                children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { size: 12 })
-              }
-            )
-          ] }, opt.value))
-        }
-      ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bu-pf__placeholder", children: placeholder }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bu-pf__arrow", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: arrowUp, width: 24, height: 24, alt: "" }) })
-    ] }),
-    open && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bu-pf__panel", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bu-pf__header", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "bu-pf__tags",
-            ref: tagsRef,
-            ...makeDragHandlers(tagsRef),
-            children: selectedOptions.length > 0 ? selectedOptions.map((opt) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `bu-pf__tag${!multiple ? " bu-pf__tag--single" : ""}`, children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bu-pf__tag-text", children: opt.label }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  className: "bu-pf__tag-close",
-                  onClick: () => removeTag(opt.value),
-                  children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { size: 12 })
-                }
-              )
-            ] }, opt.value)) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bu-pf__placeholder-inline", children: placeholder })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "bu-pf__close", onClick: close, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: arrowUp, width: 24, height: 24, alt: "" }) })
-      ] }) }),
-      reactDom.createPortal(
-        /* @__PURE__ */ jsxRuntime.jsx("div", { ref: portalRef, className: "bu-pf__portal", style: { position: "fixed", top: dropdownPos.top, left: dropdownPos.left, width: dropdownPos.width, zIndex: 1050 }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bu-pf__dropdown", children: [
-          (showSearch || showSort) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bu-pf__toolbar", children: [
-            showSearch && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bu-pf__search", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bu-pf__search-icon", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: search, width: 20, height: 20, alt: "" }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
-                {
-                  className: "bu-pf__search-input",
-                  placeholder: searchPlaceholder,
-                  value: search$1,
-                  onChange: (e) => setSearch(e.target.value)
-                }
-              )
-            ] }),
-            showSort && /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: sortBtnRef, className: "bu-pf__sort-wrap", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  className: `bu-pf__sort-btn${sortOrder !== "none" ? " bu-pf__sort-btn--active" : ""}`,
-                  onClick: () => setSortDropdownOpen((v) => !v),
-                  children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: sort, width: 24, height: 24, alt: "" })
-                }
-              ),
-              sortDropdownOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bu-pf__sort-dropdown", children: [
-                { key: "none", label: sortDefault },
-                { key: "asc", label: sortAsc },
-                { key: "desc", label: sortDesc }
-              ].map(({ key, label }) => /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: `bu-pf__sort-option${sortOrder === key ? " bu-pf__sort-option--active" : ""}`,
-                  onClick: () => selectSort(key),
-                  children: label
-                },
-                key
-              )) })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bu-pf__list", children: hasOptions && filteredOptions.length > 0 ? filteredOptions.map((opt) => {
-            const checked = value.includes(opt.value);
-            return /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                className: `bu-pf__option${multiple ? " bu-pf__option--multiple" : ""}${checked && !multiple ? " bu-pf__option--selected" : ""}`,
-                onClick: () => toggleOption(opt.value),
-                children: [
-                  multiple && /* @__PURE__ */ jsxRuntime.jsx(
-                    "img",
-                    {
-                      className: "bu-pf__checkbox-img",
-                      src: checked ? checkboxOk : checkboxNo,
-                      alt: ""
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bu-pf__option-label", children: opt.label })
-                ]
-              },
-              opt.value
-            );
-          }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bu-pf__no-match", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("img", { className: "bu-pf__no-match-img", src: no_data_light, alt: hasOptions ? noMatchText : emptyText }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "bu-pf__no-match-text", children: hasOptions ? noMatchText : emptyText }),
-            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "bu-pf__no-match-hint", children: [
-              manageFieldPre,
-              /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "bu-pf__manage-btn", onClick: onManageField, children: manageFieldLink }),
-              manageFieldPost
-            ] })
-          ] }) }),
-          addButtonText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bu-pf__add-row", onClick: onAdd, children: addButtonText })
-        ] }) }),
-        (getPopupContainer == null ? void 0 : getPopupContainer()) ?? document.body
-      )
-    ] })
-  ] });
-}
-module.exports = BuProductField;
+"use strict";const t=require("react/jsx-runtime"),c=require("react"),ne=require("react-dom");;/* empty css                   */const ce=require("./no_data_light.svg.js"),B=require("./arrow-up.svg.js"),oe=require("./sort.svg.js"),ie=require("./search.svg.js"),ae=require("./checkbox-no.svg.js"),ue=require("./checkbox-ok.svg.js");function Z({size:u=20}){return t.jsx("svg",{width:u,height:u,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t.jsx("path",{d:"M16.5613 6.73027C16.7558 6.53571 17.0723 6.53442 17.2684 6.72736C17.4644 6.92032 17.4657 7.23444 17.2713 7.42901L12.7036 12.0002L17.2713 16.5714C17.4657 16.766 17.4644 17.0801 17.2684 17.273C17.0723 17.4659 16.7558 17.4646 16.5613 17.2701L11.9996 12.7047L7.43794 17.2701C7.24352 17.4647 6.92699 17.4659 6.73091 17.273C6.53485 17.0801 6.53355 16.7659 6.72798 16.5714L11.2955 12.0002L6.72798 7.42901C6.53355 7.23442 6.53485 6.92032 6.73091 6.72736C6.92698 6.53442 7.2435 6.53571 7.43794 6.73027L11.9996 11.2955L16.5613 6.73027Z",fill:"currentColor"})})}function le({options:u=[],value:a=[],onChange:o,placeholder:R="请选择",emptyText:D="暂无产品数据",onManageField:I,multiple:d=!0,showSearch:E=!0,showSort:q=!0,addButtonText:y,onAdd:U,labels:s,className:H,style:G,getPopupContainer:x}){const J=(s==null?void 0:s.searchPlaceholder)??"搜索",K=(s==null?void 0:s.sortDefault)??"默认顺序",Q=(s==null?void 0:s.sortAsc)??"名称A-Z",V=(s==null?void 0:s.sortDesc)??"名称Z-A",O=(s==null?void 0:s.noMatchText)??"暂无选项",W=(s==null?void 0:s.manageFieldPre)??"请前往",Y=(s==null?void 0:s.manageFieldLink)??"管理字段",ee=(s==null?void 0:s.manageFieldPost)??"添加",[f,C]=c.useState(!1),[j,M]=c.useState(""),[p,F]=c.useState("none"),[w,N]=c.useState(!1),m=c.useRef(null),b=c.useRef(null),P=c.useRef(null),[v,te]=c.useState({top:0,left:0,width:0}),l=c.useCallback(()=>{if(!m.current)return;const e=m.current.getBoundingClientRect();te({top:e.bottom+4,left:e.left,width:e.width})},[]);c.useLayoutEffect(()=>{f&&l()},[f,l]),c.useEffect(()=>{if(!f)return;const e=r=>{var i,g;const n=r.target;(i=P.current)!=null&&i.contains(n)||(g=m.current)!=null&&g.contains(n)||L()};return document.addEventListener("mousedown",e),window.addEventListener("scroll",l,!0),window.addEventListener("resize",l),()=>{document.removeEventListener("mousedown",e),window.removeEventListener("scroll",l,!0),window.removeEventListener("resize",l)}},[f,l]),c.useEffect(()=>{if(!w)return;const e=r=>{b.current&&!b.current.contains(r.target)&&N(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[w]);const S=c.useRef(null),$=c.useRef(null),h=c.useRef({dragging:!1,startX:0,scrollLeft:0,target:null}),T=c.useCallback(e=>({onMouseDown:r=>{const n=e.current;n&&(h.current={dragging:!0,startX:r.clientX,scrollLeft:n.scrollLeft,target:n})},onMouseMove:r=>{const{dragging:n,startX:i,scrollLeft:g,target:A}=h.current;!n||!A||(r.preventDefault(),A.scrollLeft=g-(r.clientX-i))},onMouseUp:()=>{h.current.dragging=!1},onMouseLeave:()=>{h.current.dragging=!1}}),[]);function se(e){if(!d){o==null||o(a.includes(e)?[]:[e]),a.includes(e)||L();return}const r=a.includes(e)?a.filter(n=>n!==e):[...a,e];o==null||o(r)}function X(e){o==null||o(a.filter(r=>r!==e))}function L(){C(!1),M(""),F("none")}function re(e){F(e),N(!1)}const z=c.useMemo(()=>{let e=u.filter(n=>(n.searchText??(typeof n.label=="string"?n.label:"")).toLowerCase().includes(j.toLowerCase()));const r=n=>n.searchText??(typeof n.label=="string"?n.label:"");return p==="asc"&&(e=[...e].sort((n,i)=>r(n).localeCompare(r(i)))),p==="desc"&&(e=[...e].sort((n,i)=>r(i).localeCompare(r(n)))),e},[u,j,p]),_=u.filter(e=>a.includes(e.value)),k=u.length>0;return t.jsxs("div",{ref:m,className:["bu-pf",H].filter(Boolean).join(" "),style:G,children:[!f&&t.jsxs("div",{className:`bu-pf__trigger${_.length>0?" bu-pf__trigger--selected":""}`,onClick:()=>C(!0),children:[_.length>0?t.jsx("div",{className:"bu-pf__trigger-tags",ref:$,...T($),children:_.map(e=>t.jsxs("span",{className:`bu-pf__tag${d?"":" bu-pf__tag--single"}`,children:[t.jsx("span",{className:"bu-pf__tag-text",children:e.label}),t.jsx("button",{type:"button",className:"bu-pf__tag-close",onClick:r=>{r.stopPropagation(),X(e.value)},children:t.jsx(Z,{size:12})})]},e.value))}):t.jsx("span",{className:"bu-pf__placeholder",children:R}),t.jsx("span",{className:"bu-pf__arrow",children:t.jsx("img",{src:B,width:24,height:24,alt:""})})]}),f&&t.jsxs(t.Fragment,{children:[t.jsx("div",{className:"bu-pf__panel",children:t.jsxs("div",{className:"bu-pf__header",children:[t.jsx("div",{className:"bu-pf__tags",ref:S,...T(S),children:_.length>0?_.map(e=>t.jsxs("span",{className:`bu-pf__tag${d?"":" bu-pf__tag--single"}`,children:[t.jsx("span",{className:"bu-pf__tag-text",children:e.label}),t.jsx("button",{type:"button",className:"bu-pf__tag-close",onClick:()=>X(e.value),children:t.jsx(Z,{size:12})})]},e.value)):t.jsx("span",{className:"bu-pf__placeholder-inline",children:R})}),t.jsx("button",{type:"button",className:"bu-pf__close",onClick:L,children:t.jsx("img",{src:B,width:24,height:24,alt:""})})]})}),ne.createPortal(t.jsx("div",{ref:P,className:"bu-pf__portal",style:{position:"fixed",top:v.top,left:v.left,width:v.width,zIndex:1050},children:t.jsxs("div",{className:"bu-pf__dropdown",children:[(E||q)&&t.jsxs("div",{className:"bu-pf__toolbar",children:[E&&t.jsxs("div",{className:"bu-pf__search",children:[t.jsx("span",{className:"bu-pf__search-icon",children:t.jsx("img",{src:ie,width:20,height:20,alt:""})}),t.jsx("input",{className:"bu-pf__search-input",placeholder:J,value:j,onChange:e=>M(e.target.value)})]}),q&&t.jsxs("div",{ref:b,className:"bu-pf__sort-wrap",children:[t.jsx("button",{type:"button",className:`bu-pf__sort-btn${p!=="none"?" bu-pf__sort-btn--active":""}`,onClick:()=>N(e=>!e),children:t.jsx("img",{src:oe,width:24,height:24,alt:""})}),w&&t.jsx("div",{className:"bu-pf__sort-dropdown",children:[{key:"none",label:K},{key:"asc",label:Q},{key:"desc",label:V}].map(({key:e,label:r})=>t.jsx("div",{className:`bu-pf__sort-option${p===e?" bu-pf__sort-option--active":""}`,onClick:()=>re(e),children:r},e))})]})]}),t.jsx("div",{className:"bu-pf__list",children:k&&z.length>0?z.map(e=>{const r=a.includes(e.value);return t.jsxs("div",{className:`bu-pf__option${d?" bu-pf__option--multiple":""}${r&&!d?" bu-pf__option--selected":""}`,onClick:()=>se(e.value),children:[d&&t.jsx("img",{className:"bu-pf__checkbox-img",src:r?ue:ae,alt:""}),t.jsx("span",{className:"bu-pf__option-label",children:e.label})]},e.value)}):t.jsxs("div",{className:"bu-pf__no-match",children:[t.jsx("img",{className:"bu-pf__no-match-img",src:ce,alt:k?O:D}),t.jsx("p",{className:"bu-pf__no-match-text",children:k?O:D}),t.jsxs("p",{className:"bu-pf__no-match-hint",children:[W,t.jsx("button",{type:"button",className:"bu-pf__manage-btn",onClick:I,children:Y}),ee]})]})}),y&&t.jsx("div",{className:"bu-pf__add-row",onClick:U,children:y})]})}),(x==null?void 0:x())??document.body)]})]})}module.exports=le;