@pisell/materials 3.3.82 → 3.3.84

package/lib/components/pisellMultipleSelect/PisellMultipleSelect.stories.js

@@ -0,0 +1,491 @@
+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/pisellMultipleSelect/PisellMultipleSelect.stories.tsx
+var PisellMultipleSelect_stories_exports = {};
+__export(PisellMultipleSelect_stories_exports, {
+  AllStates: () => AllStates,
+  Basic: () => Basic,
+  Disabled: () => Disabled,
+  InForm: () => InForm,
+  ReadOnly: () => ReadOnly,
+  ReadOnlyEmpty: () => ReadOnlyEmpty,
+  ReadOnlyWithAggregation: () => ReadOnlyWithAggregation,
+  Sizes: () => Sizes,
+  TagAggregation: () => TagAggregation,
+  WithCallbacks: () => WithCallbacks,
+  WithClear: () => WithClear,
+  WithError: () => WithError,
+  WithLabel: () => WithLabel,
+  WithMaxCount: () => WithMaxCount,
+  WithSearch: () => WithSearch,
+  default: () => PisellMultipleSelect_stories_default
+});
+module.exports = __toCommonJS(PisellMultipleSelect_stories_exports);
+var import_PisellMultipleSelect = __toESM(require("./PisellMultipleSelect"));
+var import_react = require("react");
+var import_antd = require("antd");
+var meta = {
+  title: "Components/PisellMultipleSelect",
+  component: import_PisellMultipleSelect.default,
+  tags: ["autodocs"],
+  argTypes: {
+    value: {
+      control: "object",
+      description: "当前选中值数组"
+    },
+    placeholder: {
+      control: "text",
+      description: "占位符文本"
+    },
+    disabled: {
+      control: "boolean",
+      description: "是否禁用"
+    },
+    readOnly: {
+      control: "boolean",
+      description: "是否只读"
+    },
+    showSearch: {
+      control: "boolean",
+      description: "是否显示搜索框"
+    },
+    allowClear: {
+      control: "boolean",
+      description: "是否显示清空按钮"
+    },
+    maxTagCount: {
+      control: "number",
+      description: "最多显示的标签数量"
+    },
+    maxCount: {
+      control: "number",
+      description: "最大可选数量"
+    },
+    showTooltipOnOverflow: {
+      control: "boolean",
+      description: "超出标签hover时显示tooltip"
+    },
+    size: {
+      control: "radio",
+      options: ["small", "medium", "large"],
+      description: "尺寸"
+    },
+    error: {
+      control: "boolean",
+      description: "是否显示错误状态"
+    },
+    required: {
+      control: "boolean",
+      description: "是否必填"
+    }
+  }
+};
+var PisellMultipleSelect_stories_default = meta;
+var fruitOptions = [
+  { value: "apple", label: "苹果" },
+  { value: "banana", label: "香蕉" },
+  { value: "orange", label: "橙子" },
+  { value: "grape", label: "葡萄" },
+  { value: "watermelon", label: "西瓜" },
+  { value: "strawberry", label: "草莓" },
+  { value: "pineapple", label: "菠萝" }
+];
+var skillOptions = [
+  { value: "react", label: "React", color: "#61dafb" },
+  { value: "vue", label: "Vue.js", color: "#42b883" },
+  { value: "angular", label: "Angular", color: "#dd0031" },
+  { value: "typescript", label: "TypeScript", color: "#3178c6" },
+  { value: "javascript", label: "JavaScript", color: "#f7df1e" },
+  { value: "nodejs", label: "Node.js", color: "#339933" },
+  { value: "python", label: "Python", color: "#3776ab" },
+  { value: "java", label: "Java", color: "#007396" }
+];
+var Basic = {
+  args: {
+    options: fruitOptions,
+    placeholder: "请选择喜欢的水果"
+  },
+  render: (args) => {
+    const [value, setValue] = (0, import_react.useState)(
+      args.value || []
+    );
+    return /* @__PURE__ */ React.createElement(
+      import_PisellMultipleSelect.default,
+      {
+        ...args,
+        value,
+        onChange: (val) => setValue(val)
+      }
+    );
+  }
+};
+var WithLabel = {
+  args: {
+    options: fruitOptions,
+    label: "喜欢的水果",
+    placeholder: "请选择",
+    required: true
+  },
+  render: (args) => {
+    const [value, setValue] = (0, import_react.useState)([]);
+    return /* @__PURE__ */ React.createElement(
+      import_PisellMultipleSelect.default,
+      {
+        ...args,
+        value,
+        onChange: (val) => setValue(val)
+      }
+    );
+  }
+};
+var TagAggregation = {
+  args: {
+    options: skillOptions,
+    label: "技术栈",
+    helperText: "已选择的标签会自动聚合",
+    maxTagCount: 2,
+    showTooltipOnOverflow: true
+  },
+  render: (args) => {
+    const [value, setValue] = (0, import_react.useState)([
+      "react",
+      "vue",
+      "typescript",
+      "nodejs"
+    ]);
+    return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+      import_PisellMultipleSelect.default,
+      {
+        ...args,
+        value,
+        onChange: (val) => setValue(val)
+      }
+    ), /* @__PURE__ */ React.createElement("div", { style: { marginTop: 16, fontSize: 14, color: "#667085" } }, "当前选中: ", value.join(", "), " (共 ", value.length, " 项)"));
+  }
+};
+var WithMaxCount = {
+  args: {
+    options: skillOptions,
+    label: "技术栈（最多选3项）",
+    helperText: "最多可选择3项",
+    maxCount: 3
+  },
+  render: (args) => {
+    const [value, setValue] = (0, import_react.useState)(["react"]);
+    return /* @__PURE__ */ React.createElement(
+      import_PisellMultipleSelect.default,
+      {
+        ...args,
+        value,
+        onChange: (val) => setValue(val)
+      }
+    );
+  }
+};
+var WithSearch = {
+  args: {
+    options: skillOptions,
+    label: "选择技能",
+    placeholder: "搜索技能...",
+    showSearch: true
+  },
+  render: (args) => {
+    const [value, setValue] = (0, import_react.useState)([]);
+    return /* @__PURE__ */ React.createElement(
+      import_PisellMultipleSelect.default,
+      {
+        ...args,
+        value,
+        onChange: (val) => setValue(val),
+        onSearch: (keyword) => console.log("搜索关键词:", keyword)
+      }
+    );
+  }
+};
+var WithClear = {
+  args: {
+    options: fruitOptions,
+    label: "选择水果",
+    placeholder: "请选择",
+    allowClear: true
+  },
+  render: (args) => {
+    const [value, setValue] = (0, import_react.useState)(["apple", "banana"]);
+    return /* @__PURE__ */ React.createElement(
+      import_PisellMultipleSelect.default,
+      {
+        ...args,
+        value,
+        onChange: (val) => setValue(val)
+      }
+    );
+  }
+};
+var Disabled = {
+  args: {
+    options: fruitOptions,
+    label: "选择水果",
+    value: ["apple", "banana"],
+    disabled: true
+  }
+};
+var ReadOnly = {
+  args: {
+    options: fruitOptions,
+    label: "选择水果",
+    value: ["apple", "banana", "orange"],
+    readOnly: true
+  }
+};
+var ReadOnlyWithAggregation = {
+  args: {
+    options: skillOptions,
+    label: "技术栈",
+    value: ["react", "vue", "typescript", "nodejs", "python"],
+    readOnly: true,
+    maxTagCount: 2
+  }
+};
+var ReadOnlyEmpty = {
+  args: {
+    options: fruitOptions,
+    label: "选择水果",
+    value: [],
+    readOnly: true
+  }
+};
+var WithError = {
+  args: {
+    options: fruitOptions,
+    label: "选择水果",
+    placeholder: "请选择",
+    required: true,
+    error: true,
+    errorText: "至少选择一项"
+  },
+  render: (args) => {
+    const [value, setValue] = (0, import_react.useState)([]);
+    return /* @__PURE__ */ React.createElement(
+      import_PisellMultipleSelect.default,
+      {
+        ...args,
+        value,
+        onChange: (val) => setValue(val)
+      }
+    );
+  }
+};
+var Sizes = {
+  render: () => {
+    const [small, setSmall] = (0, import_react.useState)(["apple"]);
+    const [medium, setMedium] = (0, import_react.useState)(["banana", "orange"]);
+    const [large, setLarge] = (0, import_react.useState)(["grape", "watermelon"]);
+    return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 24 } }, /* @__PURE__ */ React.createElement(
+      import_PisellMultipleSelect.default,
+      {
+        options: fruitOptions,
+        label: "Small 尺寸",
+        size: "small",
+        value: small,
+        onChange: setSmall
+      }
+    ), /* @__PURE__ */ React.createElement(
+      import_PisellMultipleSelect.default,
+      {
+        options: fruitOptions,
+        label: "Medium 尺寸（默认）",
+        size: "medium",
+        value: medium,
+        onChange: setMedium
+      }
+    ), /* @__PURE__ */ React.createElement(
+      import_PisellMultipleSelect.default,
+      {
+        options: fruitOptions,
+        label: "Large 尺寸",
+        size: "large",
+        value: large,
+        onChange: setLarge
+      }
+    ));
+  }
+};
+var InForm = {
+  render: () => {
+    const [fruits, setFruits] = (0, import_react.useState)([]);
+    const [skills, setSkills] = (0, import_react.useState)([]);
+    return /* @__PURE__ */ React.createElement(import_antd.Form, { layout: "vertical", style: { maxWidth: 400 } }, /* @__PURE__ */ React.createElement(import_antd.Form.Item, { label: "喜欢的水果（必填，最多3项）" }, /* @__PURE__ */ React.createElement(
+      import_PisellMultipleSelect.default,
+      {
+        options: fruitOptions,
+        value: fruits,
+        onChange: setFruits,
+        placeholder: "请选择水果",
+        required: true,
+        maxCount: 3,
+        helperText: "最多可选择3项"
+      }
+    )), /* @__PURE__ */ React.createElement(import_antd.Form.Item, { label: "掌握的技能" }, /* @__PURE__ */ React.createElement(
+      import_PisellMultipleSelect.default,
+      {
+        options: skillOptions,
+        value: skills,
+        onChange: setSkills,
+        placeholder: "请选择技能",
+        showSearch: true,
+        allowClear: true,
+        maxTagCount: 2
+      }
+    )));
+  }
+};
+var WithCallbacks = {
+  render: () => {
+    const [value, setValue] = (0, import_react.useState)([]);
+    const [logs, setLogs] = (0, import_react.useState)([]);
+    const addLog = (message) => {
+      setLogs((prev) => [
+        ...prev,
+        `${(/* @__PURE__ */ new Date()).toLocaleTimeString()}: ${message}`
+      ]);
+    };
+    return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+      import_PisellMultipleSelect.default,
+      {
+        options: fruitOptions,
+        label: "选择水果",
+        value,
+        onChange: (val, options) => {
+          setValue(val);
+          addLog(
+            `onChange: [${val.join(", ")}] - ${options.map((o) => o.label).join(", ")}`
+          );
+        },
+        onFocus: () => addLog("onFocus 触发"),
+        onBlur: () => addLog("onBlur 触发"),
+        onSearch: (keyword) => addLog(`onSearch: ${keyword}`),
+        onDropdownVisibleChange: (visible) => addLog(`下拉框${visible ? "打开" : "关闭"}`),
+        onDeselect: (val, option) => addLog(`取消选中: ${val} - ${option.label}`),
+        showSearch: true,
+        allowClear: true,
+        maxTagCount: 2
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          marginTop: 16,
+          padding: 12,
+          background: "#f5f5f5",
+          borderRadius: 4
+        }
+      },
+      /* @__PURE__ */ React.createElement("strong", null, "事件日志："),
+      /* @__PURE__ */ React.createElement("div", { style: { maxHeight: 200, overflow: "auto", marginTop: 8 } }, logs.map((log, index) => /* @__PURE__ */ React.createElement("div", { key: index, style: { fontSize: 12, padding: "4px 0" } }, log)))
+    ));
+  }
+};
+var AllStates = {
+  render: () => {
+    const [value1, setValue1] = (0, import_react.useState)(["apple", "banana"]);
+    const [value2, setValue2] = (0, import_react.useState)([]);
+    return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 24 } }, /* @__PURE__ */ React.createElement(
+      import_PisellMultipleSelect.default,
+      {
+        options: fruitOptions,
+        label: "正常状态",
+        value: value1,
+        onChange: setValue1
+      }
+    ), /* @__PURE__ */ React.createElement(
+      import_PisellMultipleSelect.default,
+      {
+        options: fruitOptions,
+        label: "禁用态",
+        value: ["apple", "banana"],
+        disabled: true
+      }
+    ), /* @__PURE__ */ React.createElement(
+      import_PisellMultipleSelect.default,
+      {
+        options: fruitOptions,
+        label: "只读态",
+        value: ["apple", "banana", "orange"],
+        readOnly: true
+      }
+    ), /* @__PURE__ */ React.createElement(
+      import_PisellMultipleSelect.default,
+      {
+        options: fruitOptions,
+        label: "只读态 - 标签聚合",
+        value: ["apple", "banana", "orange", "grape", "watermelon"],
+        readOnly: true,
+        maxTagCount: 2
+      }
+    ), /* @__PURE__ */ React.createElement(
+      import_PisellMultipleSelect.default,
+      {
+        options: fruitOptions,
+        label: "错误状态（必填）",
+        value: value2,
+        onChange: setValue2,
+        required: true,
+        error: true,
+        errorText: "至少选择一项"
+      }
+    ), /* @__PURE__ */ React.createElement(
+      import_PisellMultipleSelect.default,
+      {
+        options: fruitOptions,
+        label: "带辅助文本",
+        helperText: "可以选择多个水果",
+        value: value1,
+        onChange: setValue1
+      }
+    ));
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AllStates,
+  Basic,
+  Disabled,
+  InForm,
+  ReadOnly,
+  ReadOnlyEmpty,
+  ReadOnlyWithAggregation,
+  Sizes,
+  TagAggregation,
+  WithCallbacks,
+  WithClear,
+  WithError,
+  WithLabel,
+  WithMaxCount,
+  WithSearch
+});

package/lib/components/pisellMultipleSelect/components/DisabledView.d.ts

@@ -0,0 +1,8 @@
+/**
+ * PisellMultipleSelect - DisabledView (禁用态视图)
+ * 禁用状态下的渲染
+ */
+import React from 'react';
+import type { DisabledViewProps } from '../types';
+declare const DisabledView: React.ForwardRefExoticComponent<DisabledViewProps<string | number> & React.RefAttributes<any>>;
+export default DisabledView;

package/lib/components/pisellMultipleSelect/components/DisabledView.js

@@ -0,0 +1,82 @@
+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/pisellMultipleSelect/components/DisabledView.tsx
+var DisabledView_exports = {};
+__export(DisabledView_exports, {
+  default: () => DisabledView_default
+});
+module.exports = __toCommonJS(DisabledView_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_classnames = __toESM(require("classnames"));
+var DisabledView = (0, import_react.forwardRef)((props, ref) => {
+  const {
+    value = [],
+    options,
+    label,
+    required,
+    placeholder = "请选择",
+    size = "middle",
+    className,
+    style,
+    ...restProps
+  } = props;
+  const antdOptions = (0, import_react.useMemo)(
+    () => options.map((opt) => ({
+      label: opt.label,
+      value: opt.value,
+      disabled: opt.disabled
+    })),
+    [options]
+  );
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-multiple-select-wrapper", className), style }, label && /* @__PURE__ */ import_react.default.createElement(
+    "label",
+    {
+      className: (0, import_classnames.default)("pisell-multiple-select-label", {
+        "pisell-multiple-select-label-required": required
+      })
+    },
+    label
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Select,
+    {
+      ...restProps,
+      ref,
+      mode: "multiple",
+      value,
+      options: antdOptions,
+      placeholder,
+      disabled: true,
+      size,
+      className: "pisell-multiple-select"
+    }
+  ));
+});
+DisabledView.displayName = "PisellMultipleSelectDisabledView";
+var DisabledView_default = DisabledView;

package/lib/components/pisellMultipleSelect/components/EditView.d.ts

@@ -0,0 +1,8 @@
+/**
+ * PisellMultipleSelect - EditView (编辑态视图)
+ * 正常可编辑状态下的渲染
+ */
+import React from 'react';
+import type { EditViewProps } from '../types';
+declare const EditView: React.ForwardRefExoticComponent<EditViewProps<string | number> & React.RefAttributes<any>>;
+export default EditView;