function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import PisellMultipleSelect from "./PisellMultipleSelect";
import { useState } from 'react';
import { Form } from 'antd';

/**
 * PisellMultipleSelect 组件 Storybook
 *
 * 用于展示和测试组件的各种状态和配置
 */
var meta = {
  title: '表单/表单组件/PisellMultipleSelect',
  component: PisellMultipleSelect,
  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: '是否必填'
    }
  }
};
export 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'
}];

/**
 * 基础示例
 */
export var Basic = {
  args: {
    options: fruitOptions,
    placeholder: '请选择喜欢的水果'
  },
  render: function render(args) {
    var _useState = useState(args.value || []),
      _useState2 = _slicedToArray(_useState, 2),
      value = _useState2[0],
      setValue = _useState2[1];
    return /*#__PURE__*/React.createElement(PisellMultipleSelect, _extends({}, args, {
      value: value,
      onChange: function onChange(val) {
        return setValue(val);
      }
    }));
  }
};

/**
 * 带标签
 */
export var WithLabel = {
  args: {
    options: fruitOptions,
    label: '喜欢的水果',
    placeholder: '请选择',
    required: true
  },
  render: function render(args) {
    var _useState3 = useState([]),
      _useState4 = _slicedToArray(_useState3, 2),
      value = _useState4[0],
      setValue = _useState4[1];
    return /*#__PURE__*/React.createElement(PisellMultipleSelect, _extends({}, args, {
      value: value,
      onChange: function onChange(val) {
        return setValue(val);
      }
    }));
  }
};

/**
 * 标签聚合功能
 */
export var TagAggregation = {
  args: {
    options: skillOptions,
    label: '技术栈',
    helperText: '已选择的标签会自动聚合',
    maxTagCount: 2,
    showTooltipOnOverflow: true
  },
  render: function render(args) {
    var _useState5 = useState(['react', 'vue', 'typescript', 'nodejs']),
      _useState6 = _slicedToArray(_useState5, 2),
      value = _useState6[0],
      setValue = _useState6[1];
    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PisellMultipleSelect, _extends({}, args, {
      value: value,
      onChange: function onChange(val) {
        return setValue(val);
      }
    })), /*#__PURE__*/React.createElement("div", {
      style: {
        marginTop: 16,
        fontSize: 14,
        color: '#667085'
      }
    }, "\u5F53\u524D\u9009\u4E2D: ", value.join(', '), " (\u5171 ", value.length, " \u9879)"));
  }
};

/**
 * 最大可选数量限制
 */
export var WithMaxCount = {
  args: {
    options: skillOptions,
    label: '技术栈（最多选3项）',
    helperText: '最多可选择3项',
    maxCount: 3
  },
  render: function render(args) {
    var _useState7 = useState(['react']),
      _useState8 = _slicedToArray(_useState7, 2),
      value = _useState8[0],
      setValue = _useState8[1];
    return /*#__PURE__*/React.createElement(PisellMultipleSelect, _extends({}, args, {
      value: value,
      onChange: function onChange(val) {
        return setValue(val);
      }
    }));
  }
};

/**
 * 带搜索功能
 */
export var WithSearch = {
  args: {
    options: skillOptions,
    label: '选择技能',
    placeholder: '搜索技能...',
    showSearch: true
  },
  render: function render(args) {
    var _useState9 = useState([]),
      _useState10 = _slicedToArray(_useState9, 2),
      value = _useState10[0],
      setValue = _useState10[1];
    return /*#__PURE__*/React.createElement(PisellMultipleSelect, _extends({}, args, {
      value: value,
      onChange: function onChange(val) {
        return setValue(val);
      },
      onSearch: function onSearch(keyword) {
        return console.log('搜索关键词:', keyword);
      }
    }));
  }
};

/**
 * 带清空按钮
 */
export var WithClear = {
  args: {
    options: fruitOptions,
    label: '选择水果',
    placeholder: '请选择',
    allowClear: true
  },
  render: function render(args) {
    var _useState11 = useState(['apple', 'banana']),
      _useState12 = _slicedToArray(_useState11, 2),
      value = _useState12[0],
      setValue = _useState12[1];
    return /*#__PURE__*/React.createElement(PisellMultipleSelect, _extends({}, args, {
      value: value,
      onChange: function onChange(val) {
        return setValue(val);
      }
    }));
  }
};

/**
 * 禁用态
 */
export var Disabled = {
  args: {
    options: fruitOptions,
    label: '选择水果',
    value: ['apple', 'banana'],
    disabled: true
  }
};

/**
 * 只读态
 */
export var ReadOnly = {
  args: {
    options: fruitOptions,
    label: '选择水果',
    value: ['apple', 'banana', 'orange'],
    readOnly: true
  }
};

/**
 * 只读态 - 标签聚合
 */
export var ReadOnlyWithAggregation = {
  args: {
    options: skillOptions,
    label: '技术栈',
    value: ['react', 'vue', 'typescript', 'nodejs', 'python'],
    readOnly: true,
    maxTagCount: 2
  }
};

/**
 * 只读态 - 空值
 */
export var ReadOnlyEmpty = {
  args: {
    options: fruitOptions,
    label: '选择水果',
    value: [],
    readOnly: true
  }
};

/**
 * 错误状态
 */
export var WithError = {
  args: {
    options: fruitOptions,
    label: '选择水果',
    placeholder: '请选择',
    required: true,
    error: true,
    errorText: '至少选择一项'
  },
  render: function render(args) {
    var _useState13 = useState([]),
      _useState14 = _slicedToArray(_useState13, 2),
      value = _useState14[0],
      setValue = _useState14[1];
    return /*#__PURE__*/React.createElement(PisellMultipleSelect, _extends({}, args, {
      value: value,
      onChange: function onChange(val) {
        return setValue(val);
      }
    }));
  }
};

/**
 * 不同尺寸
 */
export var Sizes = {
  render: function render() {
    var _useState15 = useState(['apple']),
      _useState16 = _slicedToArray(_useState15, 2),
      small = _useState16[0],
      setSmall = _useState16[1];
    var _useState17 = useState(['banana', 'orange']),
      _useState18 = _slicedToArray(_useState17, 2),
      medium = _useState18[0],
      setMedium = _useState18[1];
    var _useState19 = useState(['grape', 'watermelon']),
      _useState20 = _slicedToArray(_useState19, 2),
      large = _useState20[0],
      setLarge = _useState20[1];
    return /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        flexDirection: 'column',
        gap: 24
      }
    }, /*#__PURE__*/React.createElement(PisellMultipleSelect, {
      options: fruitOptions,
      label: "Small \u5C3A\u5BF8",
      size: "small",
      value: small,
      onChange: setSmall
    }), /*#__PURE__*/React.createElement(PisellMultipleSelect, {
      options: fruitOptions,
      label: "Medium \u5C3A\u5BF8\uFF08\u9ED8\u8BA4\uFF09",
      size: "medium",
      value: medium,
      onChange: setMedium
    }), /*#__PURE__*/React.createElement(PisellMultipleSelect, {
      options: fruitOptions,
      label: "Large \u5C3A\u5BF8",
      size: "large",
      value: large,
      onChange: setLarge
    }));
  }
};

/**
 * 表单场景
 */
export var InForm = {
  render: function render() {
    var _useState21 = useState([]),
      _useState22 = _slicedToArray(_useState21, 2),
      fruits = _useState22[0],
      setFruits = _useState22[1];
    var _useState23 = useState([]),
      _useState24 = _slicedToArray(_useState23, 2),
      skills = _useState24[0],
      setSkills = _useState24[1];
    return /*#__PURE__*/React.createElement(Form, {
      layout: "vertical",
      style: {
        maxWidth: 400
      }
    }, /*#__PURE__*/React.createElement(Form.Item, {
      label: "\u559C\u6B22\u7684\u6C34\u679C\uFF08\u5FC5\u586B\uFF0C\u6700\u591A3\u9879\uFF09"
    }, /*#__PURE__*/React.createElement(PisellMultipleSelect, {
      options: fruitOptions,
      value: fruits,
      onChange: setFruits,
      placeholder: "\u8BF7\u9009\u62E9\u6C34\u679C",
      required: true,
      maxCount: 3,
      helperText: "\u6700\u591A\u53EF\u9009\u62E93\u9879"
    })), /*#__PURE__*/React.createElement(Form.Item, {
      label: "\u638C\u63E1\u7684\u6280\u80FD"
    }, /*#__PURE__*/React.createElement(PisellMultipleSelect, {
      options: skillOptions,
      value: skills,
      onChange: setSkills,
      placeholder: "\u8BF7\u9009\u62E9\u6280\u80FD",
      showSearch: true,
      allowClear: true,
      maxTagCount: 2
    })));
  }
};

/**
 * 回调事件演示
 */
export var WithCallbacks = {
  render: function render() {
    var _useState25 = useState([]),
      _useState26 = _slicedToArray(_useState25, 2),
      value = _useState26[0],
      setValue = _useState26[1];
    var _useState27 = useState([]),
      _useState28 = _slicedToArray(_useState27, 2),
      logs = _useState28[0],
      setLogs = _useState28[1];
    var addLog = function addLog(message) {
      setLogs(function (prev) {
        return [].concat(_toConsumableArray(prev), ["".concat(new Date().toLocaleTimeString(), ": ").concat(message)]);
      });
    };
    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PisellMultipleSelect, {
      options: fruitOptions,
      label: "\u9009\u62E9\u6C34\u679C",
      value: value,
      onChange: function onChange(val, options) {
        setValue(val);
        addLog("onChange: [".concat(val.join(', '), "] - ").concat(options.map(function (o) {
          return o.label;
        }).join(', ')));
      },
      onFocus: function onFocus() {
        return addLog('onFocus 触发');
      },
      onBlur: function onBlur() {
        return addLog('onBlur 触发');
      },
      onSearch: function onSearch(keyword) {
        return addLog("onSearch: ".concat(keyword));
      },
      onDropdownVisibleChange: function onDropdownVisibleChange(visible) {
        return addLog("\u4E0B\u62C9\u6846".concat(visible ? '打开' : '关闭'));
      },
      onDeselect: function onDeselect(val, option) {
        return addLog("\u53D6\u6D88\u9009\u4E2D: ".concat(val, " - ").concat(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, "\u4E8B\u4EF6\u65E5\u5FD7\uFF1A"), /*#__PURE__*/React.createElement("div", {
      style: {
        maxHeight: 200,
        overflow: 'auto',
        marginTop: 8
      }
    }, logs.map(function (log, index) {
      return /*#__PURE__*/React.createElement("div", {
        key: index,
        style: {
          fontSize: 12,
          padding: '4px 0'
        }
      }, log);
    }))));
  }
};

/**
 * 所有状态组合
 */
export var AllStates = {
  render: function render() {
    var _useState29 = useState(['apple', 'banana']),
      _useState30 = _slicedToArray(_useState29, 2),
      value1 = _useState30[0],
      setValue1 = _useState30[1];
    var _useState31 = useState([]),
      _useState32 = _slicedToArray(_useState31, 2),
      value2 = _useState32[0],
      setValue2 = _useState32[1];
    return /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        flexDirection: 'column',
        gap: 24
      }
    }, /*#__PURE__*/React.createElement(PisellMultipleSelect, {
      options: fruitOptions,
      label: "\u6B63\u5E38\u72B6\u6001",
      value: value1,
      onChange: setValue1
    }), /*#__PURE__*/React.createElement(PisellMultipleSelect, {
      options: fruitOptions,
      label: "\u7981\u7528\u6001",
      value: ['apple', 'banana'],
      disabled: true
    }), /*#__PURE__*/React.createElement(PisellMultipleSelect, {
      options: fruitOptions,
      label: "\u53EA\u8BFB\u6001",
      value: ['apple', 'banana', 'orange'],
      readOnly: true
    }), /*#__PURE__*/React.createElement(PisellMultipleSelect, {
      options: fruitOptions,
      label: "\u53EA\u8BFB\u6001 - \u6807\u7B7E\u805A\u5408",
      value: ['apple', 'banana', 'orange', 'grape', 'watermelon'],
      readOnly: true,
      maxTagCount: 2
    }), /*#__PURE__*/React.createElement(PisellMultipleSelect, {
      options: fruitOptions,
      label: "\u9519\u8BEF\u72B6\u6001\uFF08\u5FC5\u586B\uFF09",
      value: value2,
      onChange: setValue2,
      required: true,
      error: true,
      errorText: "\u81F3\u5C11\u9009\u62E9\u4E00\u9879"
    }), /*#__PURE__*/React.createElement(PisellMultipleSelect, {
      options: fruitOptions,
      label: "\u5E26\u8F85\u52A9\u6587\u672C",
      helperText: "\u53EF\u4EE5\u9009\u62E9\u591A\u4E2A\u6C34\u679C",
      value: value1,
      onChange: setValue1
    }));
  }
};