@pisell/materials 6.7.4 → 6.8.2

package/lib/components/PisellTabbar2/components/TabbarLevel.js

@@ -0,0 +1,366 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/PisellTabbar2/components/TabbarLevel.tsx
+var TabbarLevel_exports = {};
+__export(TabbarLevel_exports, {
+  default: () => TabbarLevel_default
+});
+module.exports = __toCommonJS(TabbarLevel_exports);
+var import_react = __toESM(require("react"));
+var import_PisellSuperTabs = __toESM(require("../../PisellSuperTabs"));
+var import_PisellCards = __toESM(require("../../PisellCards"));
+var import_iconfont = __toESM(require("../../iconfont"));
+var import_constants = require("../constants");
+var TabbarLevel = (0, import_react.memo)((props) => {
+  const {
+    skuId,
+    dataSource,
+    activePanelKey,
+    level,
+    setActivePanelKey,
+    expand,
+    handleExpand,
+    renderChildren,
+    levelConfig: customLevelConfig,
+    expandConfig: customExpandConfig,
+    superTabsProps,
+    positionId,
+    level2PositionId,
+    panelVisible
+  } = props;
+  const levelConfig = {
+    ...import_constants.DEFAULT_LEVEL_CONFIG[level],
+    ...customLevelConfig
+  };
+  const expandConfig = customExpandConfig || (0, import_constants.getExpandConfig)();
+  const renderLevel1Card = (cardProps) => {
+    var _a;
+    const { dataSource: itemData } = cardProps;
+    let _text = itemData.name;
+    let _icon = itemData.icon;
+    if (itemData.key === "expand") {
+      _text = expandConfig[expand ? "active" : "inactive"].text;
+      _icon = expandConfig[expand ? "active" : "inactive"].icon;
+    }
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_PisellCards.default.GraphicTextCard,
+      {
+        ...cardProps,
+        text: _text,
+        icon: _icon,
+        variant: "vertical-image",
+        widthMode: "fixed",
+        width: levelConfig.cardWidth,
+        graphicConfig: {
+          width: "100%",
+          height: levelConfig.cardHeight,
+          background: "#fff",
+          iconSize: 30
+        },
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          background: "#fff",
+          borderRadius: 8,
+          border: `none`
+        },
+        textConfig: {
+          textAlign: "center",
+          color: "#fff",
+          fontWeight: 400
+        },
+        active: {
+          value: true,
+          style: {
+            ...(_a = cardProps.active) == null ? void 0 : _a.style,
+            border: `none`,
+            color: "#5D3F9F"
+          }
+        }
+      }
+    );
+  };
+  const renderLevel1NormalCard = (cardProps) => {
+    var _a;
+    const { dataSource: itemData } = cardProps;
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_PisellCards.default.GraphicTextCard,
+      {
+        ...cardProps,
+        text: itemData.name,
+        image: itemData.icon,
+        variant: "card",
+        widthMode: "fixed",
+        width: levelConfig.cardWidth,
+        textConfig: {
+          color: "#FFF",
+          maxLines: 2,
+          ellipsis: true
+        },
+        active: {
+          ...cardProps.active,
+          style: {
+            ...(_a = cardProps.active) == null ? void 0 : _a.style,
+            color: "#000000",
+            border: `none`,
+            background: "#ffffff"
+          }
+        },
+        style: {
+          backgroundClip: "padding-box",
+          border: `none`,
+          background: "transparent"
+        },
+        graphicConfig: {
+          aliWidth: 100,
+          width: "100%",
+          height: `${levelConfig.cardHeight}px`,
+          dataSource: {
+            alt: itemData.icon ? void 0 : itemData.name,
+            text: itemData.name === "All" ? "All" : void 0
+          }
+        }
+      }
+    );
+  };
+  const renderLevelNCard = (cardProps) => {
+    var _a;
+    const { dataSource: itemData } = cardProps;
+    let _text = itemData.name;
+    let _icon = itemData.icon;
+    if (itemData.key === "expand") {
+      _text = expandConfig[expand ? "active" : "inactive"].text;
+      _icon = expandConfig[expand ? "active" : "inactive"].icon;
+    }
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_PisellCards.default.TextCard,
+      {
+        ...cardProps,
+        text: _text,
+        variant: "outlined",
+        widthMode: "fixed",
+        prefixIcon: itemData.key === "expand" ? /* @__PURE__ */ import_react.default.createElement(
+          import_iconfont.default,
+          {
+            type: expandConfig[expand ? "active" : "inactive"].icon,
+            style: { color: "#fff", fontSize: 20 }
+          }
+        ) : void 0,
+        textConfig: {
+          textAlign: "center",
+          color: "#FFF",
+          flex: "none"
+        },
+        style: {
+          borderRadius: "8px",
+          background: "rgba(0, 0, 0, 0.50)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: levelConfig.cardHeight
+        },
+        width: levelConfig.cardWidth,
+        active: {
+          ...cardProps.active,
+          style: {
+            ...(_a = cardProps.active) == null ? void 0 : _a.style,
+            color: "#000000",
+            background: "#ffffff"
+          }
+        }
+      }
+    );
+  };
+  const renderLevelNNormalCard = (cardProps) => {
+    var _a;
+    const { dataSource: itemData } = cardProps;
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_PisellCards.default.TextCard,
+      {
+        ...cardProps,
+        text: itemData.name,
+        variant: "outlined",
+        widthMode: "fixed",
+        textConfig: {
+          textAlign: "center",
+          color: "#FFF",
+          maxLines: 2,
+          ellipsis: true
+        },
+        style: {
+          height: levelConfig.cardHeight,
+          borderRadius: "8px",
+          background: "transparent"
+        },
+        width: levelConfig.cardWidth,
+        active: {
+          ...cardProps.active,
+          style: {
+            ...(_a = cardProps.active) == null ? void 0 : _a.style,
+            color: "#000000",
+            background: "#ffffff"
+          }
+        }
+      }
+    );
+  };
+  const renderLevelNNormalCard3 = (cardProps) => {
+    var _a;
+    const { dataSource: itemData } = cardProps;
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_PisellCards.default.TextCard,
+      {
+        ...cardProps,
+        text: itemData.name,
+        variant: "filled",
+        widthMode: "fixed",
+        textConfig: {
+          textAlign: "center",
+          color: "#FFF",
+          maxLines: 2,
+          ellipsis: true
+        },
+        style: {
+          height: levelConfig.cardHeight,
+          borderRadius: "88px",
+          background: "#292929",
+          minWidth: 100
+        },
+        width: levelConfig.cardWidth,
+        active: {
+          ...cardProps.active,
+          style: {
+            ...(_a = cardProps.active) == null ? void 0 : _a.style,
+            color: "#000000",
+            background: "#ffffff"
+          }
+        }
+      }
+    );
+  };
+  const renderItem = (itemProps) => {
+    const { dataSource: itemData } = itemProps;
+    if (itemData == null ? void 0 : itemData.customClick) {
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_PisellCards.default.MultilevelCard,
+        {
+          ...itemProps,
+          card: (cardProps) => {
+            if (level === "level1") {
+              return renderLevel1Card(cardProps);
+            }
+            return renderLevelNCard(cardProps);
+          },
+          onClick: handleExpand
+        }
+      );
+    }
+    let panelStyle = {};
+    if (itemProps.dataSource.childrenMaxLevel >= 2) {
+      panelStyle = {
+        ...superTabsProps == null ? void 0 : superTabsProps.panelStyle,
+        ...panelVisible !== void 0 ? { transform: panelVisible ? "translateX(0)" : "translateX(110%)" } : {}
+      };
+    }
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_PisellCards.default.MultilevelCard,
+      {
+        ...itemProps,
+        card: (cardProps) => {
+          if (level === "level1") {
+            return renderLevel1NormalCard(cardProps);
+          }
+          if (level === "level3") {
+            return renderLevelNNormalCard3(cardProps);
+          }
+          return renderLevelNNormalCard(cardProps);
+        },
+        panel: (panelProps) => {
+          var _a, _b;
+          if ((_b = (_a = panelProps == null ? void 0 : panelProps.dataSource) == null ? void 0 : _a.children) == null ? void 0 : _b.length) {
+            return renderChildren == null ? void 0 : renderChildren(panelProps);
+          }
+          return null;
+        },
+        panelStyle,
+        panelContainer: (panelProps) => {
+          var _a;
+          const childrenMaxLevel = ((_a = panelProps.dataSource) == null ? void 0 : _a.childrenMaxLevel) || 2;
+          let _positionId = positionId || "";
+          if (level2PositionId && childrenMaxLevel < 2) {
+            _positionId = level2PositionId;
+          }
+          if (_positionId) {
+            return document.querySelector(_positionId);
+          }
+          return null;
+        }
+      }
+    );
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_PisellSuperTabs.default,
+    {
+      id: skuId,
+      tabItemStyle: {},
+      dataSource,
+      value: activePanelKey,
+      onChange: setActivePanelKey,
+      rowKey: "id",
+      className: superTabsProps == null ? void 0 : superTabsProps.className,
+      style: {
+        flex: 1,
+        background: levelConfig.superTabsBg,
+        ...(superTabsProps == null ? void 0 : superTabsProps.style) || {}
+      },
+      gridProps: {
+        direction: "horizontal",
+        gap: 4,
+        wrap: expand ? "wrap" : "nowrap",
+        ...(superTabsProps == null ? void 0 : superTabsProps.gridProps) || {}
+      },
+      scrollViewProps: {
+        style: {
+          padding: "4px 8px"
+        },
+        overflow: !expand ? "x" : "hidden",
+        scrollbarStyle: "none",
+        scrollActionsConfig: {
+          type: "lrArrows",
+          show: true
+        },
+        ...(superTabsProps == null ? void 0 : superTabsProps.scrollViewProps) || {}
+      },
+      renderItem
+    }
+  );
+});
+TabbarLevel.displayName = "TabbarLevel";
+var TabbarLevel_default = TabbarLevel;

package/lib/components/PisellTabbar2/components/index.d.ts

@@ -0,0 +1 @@
+export { default as TabbarLevel } from './TabbarLevel';

package/lib/components/PisellTabbar2/components/index.js

@@ -0,0 +1,39 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/PisellTabbar2/components/index.tsx
+var components_exports = {};
+__export(components_exports, {
+  TabbarLevel: () => import_TabbarLevel.default
+});
+module.exports = __toCommonJS(components_exports);
+var import_TabbarLevel = __toESM(require("./TabbarLevel"));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TabbarLevel
+});

package/lib/components/PisellTabbar2/constants.d.ts

@@ -0,0 +1,46 @@
+import { TabbarLevelConfig, ExpandConfig, LevelType } from './types';
+/**
+ * 默认层级配置
+ */
+export declare const DEFAULT_LEVEL_CONFIG: Record<LevelType, TabbarLevelConfig>;
+/**
+ * 获取展开配置
+ */
+export declare const getExpandConfig: () => ExpandConfig;
+/**
+ * 默认数据项配置
+ */
+export declare const DEFAULT_ITEMS: {
+    all: {
+        id: number;
+        shop_id: number;
+        parent_id: number;
+        name: string;
+        slug: string;
+        icon: string;
+    };
+    search: {
+        id: number;
+        shop_id: number;
+        parent_id: number;
+        name: string;
+        slug: string;
+        key: string;
+        icon: string;
+        customClick: boolean;
+    };
+    expand: {
+        id: number;
+        shop_id: number;
+        parent_id: number;
+        key: string;
+        icon: string;
+        name: string;
+        slug: string;
+        customClick: boolean;
+    };
+};
+/**
+ * 获取层级对应的添加项配置
+ */
+export declare const LEVEL_ADD_ITEMS: Record<LevelType, ('all' | 'search' | 'expand')[]>;

package/lib/components/PisellTabbar2/constants.js

@@ -0,0 +1,100 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/PisellTabbar2/constants.ts
+var constants_exports = {};
+__export(constants_exports, {
+  DEFAULT_ITEMS: () => DEFAULT_ITEMS,
+  DEFAULT_LEVEL_CONFIG: () => DEFAULT_LEVEL_CONFIG,
+  LEVEL_ADD_ITEMS: () => LEVEL_ADD_ITEMS,
+  getExpandConfig: () => getExpandConfig
+});
+module.exports = __toCommonJS(constants_exports);
+var import_locales = require("../../locales");
+var DEFAULT_LEVEL_CONFIG = {
+  level1: {
+    superTabsBg: "#3B2865",
+    cardWidth: "100%",
+    cardHeight: 48,
+    paddingLeft: 0,
+    positionId: ".tabbar-level-2-wrap"
+  },
+  level2: {
+    cardWidth: "100%",
+    cardHeight: 56,
+    paddingLeft: 0,
+    positionId: ".tabbar-level-3-wrap"
+  },
+  level3: {
+    superTabsBg: "transparent",
+    cardHeight: 40,
+    paddingLeft: 0
+  }
+};
+var getExpandConfig = () => ({
+  active: {
+    icon: "pisell2-minimize-01",
+    text: (0, import_locales.getText)("pisell-tabbar-minimize")
+  },
+  inactive: {
+    icon: "pisell2-expand-01",
+    text: (0, import_locales.getText)("pisell-tabbar-expand")
+  }
+});
+var DEFAULT_ITEMS = {
+  all: {
+    id: 0,
+    shop_id: 9,
+    parent_id: 0,
+    name: "All",
+    slug: "All",
+    icon: ""
+  },
+  search: {
+    id: -1,
+    shop_id: 9,
+    parent_id: 0,
+    name: "Search",
+    slug: "Search",
+    key: "search",
+    icon: "",
+    customClick: true
+  },
+  expand: {
+    id: -2,
+    shop_id: 9,
+    parent_id: 0,
+    key: "expand",
+    icon: "pisell2-expand-01",
+    name: "Expand",
+    slug: "expand",
+    customClick: true
+  }
+};
+var LEVEL_ADD_ITEMS = {
+  level1: [],
+  level2: [],
+  level3: ["all"]
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DEFAULT_ITEMS,
+  DEFAULT_LEVEL_CONFIG,
+  LEVEL_ADD_ITEMS,
+  getExpandConfig
+});

package/lib/components/PisellTabbar2/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { default as useActiveKey } from './useActiveKey';
+export { default as useExpand } from './useExpand';

package/lib/components/PisellTabbar2/hooks/index.js

@@ -0,0 +1,42 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/PisellTabbar2/hooks/index.ts
+var hooks_exports = {};
+__export(hooks_exports, {
+  useActiveKey: () => import_useActiveKey.default,
+  useExpand: () => import_useExpand.default
+});
+module.exports = __toCommonJS(hooks_exports);
+var import_useActiveKey = __toESM(require("./useActiveKey"));
+var import_useExpand = __toESM(require("./useExpand"));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useActiveKey,
+  useExpand
+});

package/lib/components/PisellTabbar2/hooks/useActiveKey.d.ts

@@ -0,0 +1,50 @@
+/**
+ * useActiveKey Hook 参数
+ */
+interface UseActiveKeyProps {
+    /** 初始激活的 key 数组（对应多层级） */
+    initialActiveKey?: (string | number)[];
+    /** key 变化回调 */
+    onChange?: (value: (string | number)[]) => void;
+}
+/**
+ * useActiveKey Hook 返回值
+ */
+interface UseActiveKeyReturn {
+    /** 当前激活的 key 数组 */
+    activeKey: (string | number)[];
+    /** 设置指定层级的激活 key */
+    setActiveKey: (level: number, key: string | number, cKey?: string | number) => void;
+    /** 获取指定层级的激活 key */
+    getActiveKey: (level: number) => string | number;
+    /** 内部设置方法（用于同步外部值） */
+    _setActiveKey: (value: (string | number)[]) => void;
+    panelVisible: boolean;
+}
+/**
+ * Tabbar 激活状态管理 Hook
+ *
+ * 用于管理多层级 Tabbar 的激活状态，支持级联选择
+ *
+ * @param props - Hook 配置参数
+ * @returns 激活状态和操作方法
+ *
+ * @example
+ * ```tsx
+ * const { activeKey, setActiveKey, getActiveKey } = useActiveKey({
+ *   initialActiveKey: [1, 10],
+ *   onChange: (value) => console.log('当前选中:', value)
+ * });
+ *
+ * // 设置第 0 层级的 key，并清除后续层级
+ * setActiveKey(0, '2');
+ *
+ * // 设置第 0 层级的 key，并同时设置第 1 层级
+ * setActiveKey(0, '2', '20');
+ *
+ * // 获取第 0 层级的 key
+ * const level0Key = getActiveKey(0);
+ * ```
+ */
+declare const useActiveKey: (props: UseActiveKeyProps) => UseActiveKeyReturn;
+export default useActiveKey;