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: "表单/表单组件/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
});
