huibo-ui 0.5.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (69) hide show
  1. package/dist/cjs/hb-form-item.cjs.entry.js +59 -9
  2. package/dist/cjs/hb-form-item.cjs.entry.js.map +1 -1
  3. package/dist/cjs/hb-form.cjs.entry.js +105 -2
  4. package/dist/cjs/hb-form.cjs.entry.js.map +1 -1
  5. package/dist/cjs/hb-select.cjs.entry.js +82 -10
  6. package/dist/cjs/hb-select.cjs.entry.js.map +1 -1
  7. package/dist/cjs/hb-steps.cjs.entry.js +1 -1
  8. package/dist/cjs/hb-steps.cjs.entry.js.map +1 -1
  9. package/dist/cjs/hb-table.cjs.entry.js +195 -27
  10. package/dist/cjs/hb-table.cjs.entry.js.map +1 -1
  11. package/dist/cjs/huibo-ui.cjs.js +1 -1
  12. package/dist/cjs/loader.cjs.js +1 -1
  13. package/dist/collection/components/Form/Form.js +205 -2
  14. package/dist/collection/components/Form/Form.js.map +1 -1
  15. package/dist/collection/components/Form/FormItem.js +117 -10
  16. package/dist/collection/components/Form/FormItem.js.map +1 -1
  17. package/dist/collection/components/Select/Select.js +105 -10
  18. package/dist/collection/components/Select/Select.js.map +1 -1
  19. package/dist/collection/components/Table/Table.js +273 -27
  20. package/dist/collection/components/Table/Table.js.map +1 -1
  21. package/dist/collection/utils/virtual-scroll.js +39 -0
  22. package/dist/collection/utils/virtual-scroll.js.map +1 -0
  23. package/dist/components/hb-form-item.js +62 -9
  24. package/dist/components/hb-form-item.js.map +1 -1
  25. package/dist/components/hb-form.js +110 -2
  26. package/dist/components/hb-form.js.map +1 -1
  27. package/dist/components/hb-select.js +87 -11
  28. package/dist/components/hb-select.js.map +1 -1
  29. package/dist/components/hb-steps.js +1 -1
  30. package/dist/components/hb-steps.js.map +1 -1
  31. package/dist/components/hb-table.js +203 -29
  32. package/dist/components/hb-table.js.map +1 -1
  33. package/dist/esm/hb-form-item.entry.js +59 -9
  34. package/dist/esm/hb-form-item.entry.js.map +1 -1
  35. package/dist/esm/hb-form.entry.js +105 -2
  36. package/dist/esm/hb-form.entry.js.map +1 -1
  37. package/dist/esm/hb-select.entry.js +82 -10
  38. package/dist/esm/hb-select.entry.js.map +1 -1
  39. package/dist/esm/hb-steps.entry.js +1 -1
  40. package/dist/esm/hb-steps.entry.js.map +1 -1
  41. package/dist/esm/hb-table.entry.js +195 -27
  42. package/dist/esm/hb-table.entry.js.map +1 -1
  43. package/dist/esm/huibo-ui.js +1 -1
  44. package/dist/esm/loader.js +1 -1
  45. package/dist/huibo-ui/huibo-ui.esm.js +1 -1
  46. package/dist/huibo-ui/huibo-ui.esm.js.map +1 -1
  47. package/dist/huibo-ui/{p-79b24b83.entry.js → p-2cf5bf20.entry.js} +2 -2
  48. package/dist/huibo-ui/{p-79b24b83.entry.js.map → p-2cf5bf20.entry.js.map} +1 -1
  49. package/dist/huibo-ui/p-4148d875.entry.js +2 -0
  50. package/dist/huibo-ui/p-4148d875.entry.js.map +1 -0
  51. package/dist/huibo-ui/{p-54a28052.entry.js → p-6bfe1954.entry.js} +2 -2
  52. package/dist/huibo-ui/p-6bfe1954.entry.js.map +1 -0
  53. package/dist/huibo-ui/{p-ac18c68b.entry.js → p-e8824b2c.entry.js} +2 -2
  54. package/dist/huibo-ui/p-e8824b2c.entry.js.map +1 -0
  55. package/dist/huibo-ui/p-f69599fa.entry.js +2 -0
  56. package/dist/huibo-ui/p-f69599fa.entry.js.map +1 -0
  57. package/dist/types/components/Form/Form.d.ts +57 -0
  58. package/dist/types/components/Form/FormItem.d.ts +23 -0
  59. package/dist/types/components/Select/Select.d.ts +19 -0
  60. package/dist/types/components/Table/Table.d.ts +103 -8
  61. package/dist/types/components.d.ts +148 -2
  62. package/dist/types/utils/virtual-scroll.d.ts +38 -0
  63. package/package.json +1 -1
  64. package/dist/huibo-ui/p-29092b85.entry.js +0 -2
  65. package/dist/huibo-ui/p-29092b85.entry.js.map +0 -1
  66. package/dist/huibo-ui/p-2bc30b1b.entry.js +0 -2
  67. package/dist/huibo-ui/p-2bc30b1b.entry.js.map +0 -1
  68. package/dist/huibo-ui/p-54a28052.entry.js.map +0 -1
  69. package/dist/huibo-ui/p-ac18c68b.entry.js.map +0 -1
@@ -24,6 +24,30 @@ const Form = /*@__PURE__*/ proxyCustomElement(class Form extends H {
24
24
  size = 'default';
25
25
  /** 是否禁用 */
26
26
  disabled = false;
27
+ /**
28
+ * F1:初始值(非受控)。挂载后把这些值写到对应字段的子控件 modelValue。
29
+ * key = FormItem 的 prop。
30
+ */
31
+ initialValues;
32
+ /**
33
+ * F4:校验提示模板。覆盖默认的「{label}不能为空」「{label}格式不正确」等文案。
34
+ * 支持 {label} 占位符。仅对未在 rule.message 显式指定消息的规则生效。
35
+ */
36
+ validateMessages;
37
+ /**
38
+ * F2:提交且校验通过后的回调。参数为各字段当前值组成的对象。
39
+ * 由表单 submit(form onSubmit)触发——表单内放 type="submit" 的按钮即可。
40
+ */
41
+ onFinish;
42
+ /**
43
+ * F2:提交且校验失败后的回调。
44
+ */
45
+ onFinishFailed;
46
+ /**
47
+ * F3:任意字段值变化时的回调。参数为 { prop, value, values }。
48
+ * 由子控件冒泡的 hbChange 触发。
49
+ */
50
+ onValuesChange;
27
51
  fields = [];
28
52
  fieldRegistry = new Map();
29
53
  // 用 componentWillLoad 而非 componentDidLoad 注册监听器:
@@ -35,11 +59,69 @@ const Form = /*@__PURE__*/ proxyCustomElement(class Form extends H {
35
59
  const { prop, validate, resetValue, getValue } = e.detail;
36
60
  this.fieldRegistry.set(prop, { prop, validate, resetValue, getValue });
37
61
  });
62
+ /**
63
+ * F3:监听子控件冒泡的 hbChange,识别来源 FormItem 并触发 onValuesChange。
64
+ * 注:hbChange 由 hb-input/hb-select 等控件发出(composed 冒泡穿过 shadow),
65
+ * 这里在 host 上捕获,通过 closest('hb-form-item') 定位字段 prop。
66
+ */
67
+ handleFieldChange = ((e) => {
68
+ if (!this.onValuesChange)
69
+ return;
70
+ const target = e.target;
71
+ const item = target.closest?.('hb-form-item');
72
+ if (!item)
73
+ return;
74
+ const prop = item.prop;
75
+ if (!prop)
76
+ return;
77
+ // 取该字段最新值
78
+ const reg = this.fieldRegistry.get(prop);
79
+ const value = reg ? reg.getValue() : undefined;
80
+ this.onValuesChange({ prop, value, values: this.getFieldsValue() });
81
+ });
38
82
  componentWillLoad() {
39
83
  this.el.addEventListener('hbFormFieldRegister', this.handleFieldRegister);
84
+ // F3:捕获子控件值变化
85
+ this.el.addEventListener('hbChange', this.handleFieldChange);
86
+ }
87
+ componentDidLoad() {
88
+ // F1:把 initialValues 写到对应字段的子控件
89
+ if (this.initialValues) {
90
+ this.fieldRegistry.forEach((_reg, prop) => {
91
+ if (this.initialValues && prop in this.initialValues) {
92
+ this.setFieldValue(prop, this.initialValues[prop]);
93
+ }
94
+ });
95
+ }
40
96
  }
41
97
  disconnectedCallback() {
42
98
  this.el.removeEventListener('hbFormFieldRegister', this.handleFieldRegister);
99
+ this.el.removeEventListener('hbChange', this.handleFieldChange);
100
+ }
101
+ /**
102
+ * 收集所有字段的当前值(getFieldsValue)。
103
+ */
104
+ getFieldsValue() {
105
+ const values = {};
106
+ this.fieldRegistry.forEach((reg, prop) => {
107
+ values[prop] = reg.getValue();
108
+ });
109
+ return values;
110
+ }
111
+ /**
112
+ * 设置某字段子控件的值(setFieldValue)。
113
+ * 子控件统一用 modelValue 受控。
114
+ */
115
+ setFieldValue(prop, value) {
116
+ const formItem = this.el.querySelector(`hb-form-item[prop="${prop}"]`);
117
+ if (!formItem)
118
+ return;
119
+ const control = formItem.querySelector('hb-input, hb-select, hb-cascader, hb-date-picker, hb-date-time-picker, hb-date-range-picker, ' +
120
+ 'hb-input-number, hb-textarea, hb-checkbox, hb-checkbox-group, hb-radio-group, hb-switch, ' +
121
+ 'hb-slider, hb-color-picker, hb-rate, hb-time-picker, hb-time-select');
122
+ if (control) {
123
+ control.modelValue = value;
124
+ }
43
125
  }
44
126
  /**
45
127
  * 验证整个表单
@@ -52,6 +134,27 @@ const Form = /*@__PURE__*/ proxyCustomElement(class Form extends H {
52
134
  }));
53
135
  return results.every(Boolean);
54
136
  };
137
+ /**
138
+ * F2:提交表单——校验全部字段,通过则 onFinish(values),失败则 onFinishFailed(errors)。
139
+ */
140
+ handleSubmit = async (e) => {
141
+ e.preventDefault();
142
+ const errorList = [];
143
+ let allOk = true;
144
+ for (const field of this.fieldRegistry.values()) {
145
+ const errors = await field.validate();
146
+ if (errors.length > 0) {
147
+ allOk = false;
148
+ errorList.push({ prop: field.prop, errors });
149
+ }
150
+ }
151
+ if (allOk) {
152
+ this.onFinish?.(this.getFieldsValue());
153
+ }
154
+ else {
155
+ this.onFinishFailed?.(errorList);
156
+ }
157
+ };
55
158
  /**
56
159
  * 重置表单
57
160
  */
@@ -59,11 +162,11 @@ const Form = /*@__PURE__*/ proxyCustomElement(class Form extends H {
59
162
  this.fieldRegistry.forEach(field => field.resetValue());
60
163
  };
61
164
  render() {
62
- return (h("form", { key: '4e5a8f5d54c6760936fa8735e9a41d7956d631b1', class: {
165
+ return (h("form", { key: '876ec07f044efed1a9aa92dbb76642b95013e9a5', class: {
63
166
  'hb-form': true,
64
167
  [`hb-form--label-${this.labelPosition}`]: true,
65
168
  'hb-form--inline': this.inline,
66
- }, onSubmit: e => e.preventDefault(), novalidate: true }, h("slot", { key: 'd2e9a364e36387770dc8deb4c42c0e66542cd6a0' })));
169
+ }, onSubmit: this.handleSubmit, novalidate: true }, h("slot", { key: '16efaff38a6f97ff1f339eef37f55b7e4aff0f4c' })));
67
170
  }
68
171
  static get style() { return HbFormStyle0; }
69
172
  }, [1, "hb-form", {
@@ -74,6 +177,11 @@ const Form = /*@__PURE__*/ proxyCustomElement(class Form extends H {
74
177
  "inline": [4],
75
178
  "size": [1],
76
179
  "disabled": [4],
180
+ "initialValues": [16],
181
+ "validateMessages": [16],
182
+ "onFinish": [16],
183
+ "onFinishFailed": [16],
184
+ "onValuesChange": [16],
77
185
  "validate": [16],
78
186
  "resetFields": [16],
79
187
  "fields": [32]
@@ -1 +1 @@
1
- {"file":"hb-form.js","mappings":";;AAAA,MAAM,OAAO,GAAG,i0LAAi0L,CAAC;AACl1L,qBAAe,OAAO;;MCiBT,IAAI;;;;;;;;IAIP,KAAK,GAAwB,EAAE,CAAC;;IAGhC,KAAK,GAA0B,EAAE,CAAC;;IAGlC,aAAa,GAA6B,OAAO,CAAC;;IAGlD,UAAU,GAAW,MAAM,CAAC;;IAG5B,MAAM,GAAY,KAAK,CAAC;;IAGxB,IAAI,GAAkC,SAAS,CAAC;;IAGhD,QAAQ,GAAY,KAAK,CAAC;IAEzB,MAAM,GAA4B,EAAE,CAAC;IAEtC,aAAa,GAAG,IAAI,GAAG,EAAiC,CAAC;;;;;;IAOzD,mBAAmB,IAAI,CAAC,CAAc;QAC5C,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;QAC1D,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC;KACxE,EAAmB;IAEpB,iBAAiB;QACf,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,qBAAqB,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;KAC3E;IAED,oBAAoB;QAClB,IAAI,CAAC,EAAE,CAAC,mBAAmB,CAAC,qBAAqB,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;KAC9E;;;;;IAMO,QAAQ,GAAG;QACjB,MAAM,OAAO,GAAG,MAAM,OAAO,CAAC,GAAG,CAC/B,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,CAAC,OAAM,KAAK;YACrD,MAAM,MAAM,GAAG,MAAM,KAAK,CAAC,QAAQ,EAAE,CAAC;YACtC,OAAO,MAAM,CAAC,MAAM,KAAK,CAAC,CAAC;SAC5B,CAAC,CACH,CAAC;QACF,OAAO,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;KAC/B,CAAC;;;;IAKM,WAAW,GAAG;QACpB,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK,IAAI,KAAK,CAAC,UAAU,EAAE,CAAC,CAAC;KACzD,CAAC;IAEF,MAAM;QACJ,QACE,6DACE,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,CAAC,kBAAkB,IAAI,CAAC,aAAa,EAAE,GAAG,IAAI;gBAC9C,iBAAiB,EAAE,IAAI,CAAC,MAAM;aAC/B,EACD,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC,cAAc,EAAE,EACjC,UAAU,UAEV,8DAAQ,CACH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/Form/form.css?tag=hb-form&encapsulation=shadow","src/components/Form/Form.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hb-form {\n display: flex;\n flex-direction: column;\n gap: var(--hb-spacing-md);\n}\n\n.hb-form--inline {\n flex-direction: row;\n flex-wrap: wrap;\n gap: var(--hb-spacing-sm) var(--hb-spacing-lg);\n align-items: flex-start;\n}\n","import { Component, h, Prop, State, Element } from '@stencil/core';\n\ninterface FormFieldRegistration {\n prop: string;\n validate: () => Promise<string[]>;\n resetValue: () => void;\n getValue: () => any;\n}\n\n/**\n * Form 表单组件\n * 由输入框、选择器、单选框、多选框等控件组成,配合表单校验\n */\n@Component({\n tag: 'hb-form',\n styleUrl: 'form.css',\n shadow: true,\n})\nexport class Form {\n @Element() el: HTMLElement;\n\n /** 表单数据对象 */\n @Prop() model: Record<string, any> = {};\n\n /** 表单验证规则 */\n @Prop() rules: Record<string, any[]> = {};\n\n /** 标签位置 */\n @Prop() labelPosition: 'left' | 'right' | 'top' = 'right';\n\n /** 标签宽度 */\n @Prop() labelWidth: string = '80px';\n\n /** 是否行内表单 */\n @Prop() inline: boolean = false;\n\n /** 表单尺寸 */\n @Prop() size: 'large' | 'default' | 'small' = 'default';\n\n /** 是否禁用 */\n @Prop() disabled: boolean = false;\n\n @State() fields: FormFieldRegistration[] = [];\n\n private fieldRegistry = new Map<string, FormFieldRegistration>();\n\n // 用 componentWillLoad 而非 componentDidLoad 注册监听器:\n // Stencil 生命周期里子组件(FormItem)的 componentDidLoad 先于父组件(Form)触发,\n // 若在 componentDidLoad 才挂监听,会错过子项派发的 hbFormFieldRegister,\n // 导致 fieldRegistry 为空、validate() 永远返回 true(真实浏览器里复现,mock-doc 被 waitForChanges 掩盖)。\n // L1:抽命名 handler 以便 disconnectedCallback 正确 remove(修复前匿名箭头无法 remove)。\n private handleFieldRegister = ((e: CustomEvent) => {\n const { prop, validate, resetValue, getValue } = e.detail;\n this.fieldRegistry.set(prop, { prop, validate, resetValue, getValue });\n }) as EventListener;\n\n componentWillLoad() {\n this.el.addEventListener('hbFormFieldRegister', this.handleFieldRegister);\n }\n\n disconnectedCallback() {\n this.el.removeEventListener('hbFormFieldRegister', this.handleFieldRegister);\n }\n\n /**\n * 验证整个表单\n * @returns 是否验证通过\n */\n @Prop() validate = async (): Promise<boolean> => {\n const results = await Promise.all(\n Array.from(this.fieldRegistry.values()).map(async field => {\n const errors = await field.validate();\n return errors.length === 0;\n }),\n );\n return results.every(Boolean);\n };\n\n /**\n * 重置表单\n */\n @Prop() resetFields = (): void => {\n this.fieldRegistry.forEach(field => field.resetValue());\n };\n\n render() {\n return (\n <form\n class={{\n 'hb-form': true,\n [`hb-form--label-${this.labelPosition}`]: true,\n 'hb-form--inline': this.inline,\n }}\n onSubmit={e => e.preventDefault()}\n novalidate\n >\n <slot />\n </form>\n );\n }\n}\n"],"version":3}
1
+ {"file":"hb-form.js","mappings":"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","names":[],"sources":["src/components/Form/form.css?tag=hb-form&encapsulation=shadow","src/components/Form/Form.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hb-form {\n display: flex;\n flex-direction: column;\n gap: var(--hb-spacing-md);\n}\n\n.hb-form--inline {\n flex-direction: row;\n flex-wrap: wrap;\n gap: var(--hb-spacing-sm) var(--hb-spacing-lg);\n align-items: flex-start;\n}\n","import { Component, h, Prop, State, Element } from '@stencil/core';\n\ninterface FormFieldRegistration {\n prop: string;\n validate: () => Promise<string[]>;\n resetValue: () => void;\n getValue: () => any;\n}\n\n/**\n * Form 表单组件\n * 由输入框、选择器、单选框、多选框等控件组成,配合表单校验\n */\n@Component({\n tag: 'hb-form',\n styleUrl: 'form.css',\n shadow: true,\n})\nexport class Form {\n @Element() el: HTMLElement;\n\n /** 表单数据对象 */\n @Prop() model: Record<string, any> = {};\n\n /** 表单验证规则 */\n @Prop() rules: Record<string, any[]> = {};\n\n /** 标签位置 */\n @Prop() labelPosition: 'left' | 'right' | 'top' = 'right';\n\n /** 标签宽度 */\n @Prop() labelWidth: string = '80px';\n\n /** 是否行内表单 */\n @Prop() inline: boolean = false;\n\n /** 表单尺寸 */\n @Prop() size: 'large' | 'default' | 'small' = 'default';\n\n /** 是否禁用 */\n @Prop() disabled: boolean = false;\n\n /**\n * F1:初始值(非受控)。挂载后把这些值写到对应字段的子控件 modelValue。\n * key = FormItem 的 prop。\n */\n @Prop() initialValues?: Record<string, any>;\n\n /**\n * F4:校验提示模板。覆盖默认的「{label}不能为空」「{label}格式不正确」等文案。\n * 支持 {label} 占位符。仅对未在 rule.message 显式指定消息的规则生效。\n */\n @Prop() validateMessages?: { required?: string; pattern?: string; email?: string; min?: string; max?: string };\n\n /**\n * F2:提交且校验通过后的回调。参数为各字段当前值组成的对象。\n * 由表单 submit(form onSubmit)触发——表单内放 type=\"submit\" 的按钮即可。\n */\n @Prop() onFinish?: (values: Record<string, any>) => void;\n\n /**\n * F2:提交且校验失败后的回调。\n */\n @Prop() onFinishFailed?: (errors: { prop: string; errors: string[] }[]) => void;\n\n /**\n * F3:任意字段值变化时的回调。参数为 { prop, value, values }。\n * 由子控件冒泡的 hbChange 触发。\n */\n @Prop() onValuesChange?: (info: { prop: string; value: any; values: Record<string, any> }) => void;\n\n @State() fields: FormFieldRegistration[] = [];\n\n private fieldRegistry = new Map<string, FormFieldRegistration>();\n\n // 用 componentWillLoad 而非 componentDidLoad 注册监听器:\n // Stencil 生命周期里子组件(FormItem)的 componentDidLoad 先于父组件(Form)触发,\n // 若在 componentDidLoad 才挂监听,会错过子项派发的 hbFormFieldRegister,\n // 导致 fieldRegistry 为空、validate() 永远返回 true(真实浏览器里复现,mock-doc 被 waitForChanges 掩盖)。\n // L1:抽命名 handler 以便 disconnectedCallback 正确 remove(修复前匿名箭头无法 remove)。\n private handleFieldRegister = ((e: CustomEvent) => {\n const { prop, validate, resetValue, getValue } = e.detail;\n this.fieldRegistry.set(prop, { prop, validate, resetValue, getValue });\n }) as EventListener;\n\n /**\n * F3:监听子控件冒泡的 hbChange,识别来源 FormItem 并触发 onValuesChange。\n * 注:hbChange 由 hb-input/hb-select 等控件发出(composed 冒泡穿过 shadow),\n * 这里在 host 上捕获,通过 closest('hb-form-item') 定位字段 prop。\n */\n private handleFieldChange = ((e: Event) => {\n if (!this.onValuesChange) return;\n const target = e.target as HTMLElement;\n const item = target.closest?.('hb-form-item') as any;\n if (!item) return;\n const prop = item.prop;\n if (!prop) return;\n // 取该字段最新值\n const reg = this.fieldRegistry.get(prop);\n const value = reg ? reg.getValue() : undefined;\n this.onValuesChange({ prop, value, values: this.getFieldsValue() });\n }) as EventListener;\n\n componentWillLoad() {\n this.el.addEventListener('hbFormFieldRegister', this.handleFieldRegister);\n // F3:捕获子控件值变化\n this.el.addEventListener('hbChange', this.handleFieldChange);\n }\n\n componentDidLoad() {\n // F1:把 initialValues 写到对应字段的子控件\n if (this.initialValues) {\n this.fieldRegistry.forEach((_reg, prop) => {\n if (this.initialValues && prop in this.initialValues) {\n this.setFieldValue(prop, this.initialValues[prop]);\n }\n });\n }\n }\n\n disconnectedCallback() {\n this.el.removeEventListener('hbFormFieldRegister', this.handleFieldRegister);\n this.el.removeEventListener('hbChange', this.handleFieldChange);\n }\n\n /**\n * 收集所有字段的当前值(getFieldsValue)。\n */\n private getFieldsValue(): Record<string, any> {\n const values: Record<string, any> = {};\n this.fieldRegistry.forEach((reg, prop) => {\n values[prop] = reg.getValue();\n });\n return values;\n }\n\n /**\n * 设置某字段子控件的值(setFieldValue)。\n * 子控件统一用 modelValue 受控。\n */\n private setFieldValue(prop: string, value: any) {\n const formItem = this.el.querySelector(`hb-form-item[prop=\"${prop}\"]`) as HTMLElement | null;\n if (!formItem) return;\n const control = formItem.querySelector(\n 'hb-input, hb-select, hb-cascader, hb-date-picker, hb-date-time-picker, hb-date-range-picker, ' +\n 'hb-input-number, hb-textarea, hb-checkbox, hb-checkbox-group, hb-radio-group, hb-switch, ' +\n 'hb-slider, hb-color-picker, hb-rate, hb-time-picker, hb-time-select',\n ) as any;\n if (control) {\n control.modelValue = value;\n }\n }\n\n /**\n * 验证整个表单\n * @returns 是否验证通过\n */\n @Prop() validate = async (): Promise<boolean> => {\n const results = await Promise.all(\n Array.from(this.fieldRegistry.values()).map(async field => {\n const errors = await field.validate();\n return errors.length === 0;\n }),\n );\n return results.every(Boolean);\n };\n\n /**\n * F2:提交表单——校验全部字段,通过则 onFinish(values),失败则 onFinishFailed(errors)。\n */\n private handleSubmit = async (e: Event) => {\n e.preventDefault();\n const errorList: { prop: string; errors: string[] }[] = [];\n let allOk = true;\n for (const field of this.fieldRegistry.values()) {\n const errors = await field.validate();\n if (errors.length > 0) {\n allOk = false;\n errorList.push({ prop: field.prop, errors });\n }\n }\n if (allOk) {\n this.onFinish?.(this.getFieldsValue());\n } else {\n this.onFinishFailed?.(errorList);\n }\n };\n\n /**\n * 重置表单\n */\n @Prop() resetFields = (): void => {\n this.fieldRegistry.forEach(field => field.resetValue());\n };\n\n render() {\n return (\n <form\n class={{\n 'hb-form': true,\n [`hb-form--label-${this.labelPosition}`]: true,\n 'hb-form--inline': this.inline,\n }}\n onSubmit={this.handleSubmit}\n novalidate\n >\n <slot />\n </form>\n );\n }\n}\n"],"version":3}
@@ -2,7 +2,46 @@ import { p as proxyCustomElement, H, c as createEvent, h } from './p-1407a5e8.js
2
2
  import { c as createClickOutsideHandler } from './p-4ef5a884.js';
3
3
  import { a as activationClickHandler, h as handleListKeyboard } from './p-00aa34c8.js';
4
4
 
5
- const selectCss = "/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:host,:root{--font-sans:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,::backdrop,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}::file-selector-button{appearance:button;background-color:#0000;border:0 solid;border-radius:0;box-sizing:border-box;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;margin:0;margin-inline-end:4px;opacity:1;padding:0}:host,html{-webkit-text-size-adjust:100%;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);line-height:1.5;tab-size:4;-webkit-tap-highlight-color:transparent}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}button,input,optgroup,select,textarea{background-color:#0000;border-radius:0;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex;padding-block:0}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}} /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;:host{--hb-select-font-size:14px;--hb-select-height:32px;--hb-select-border-color:var(--hb-border-color,#dcdfe6);--hb-select-border-color-hover:var(--hb-color-primary);--hb-select-bg-color:var(--hb-color-white,#fff);--hb-select-text-color:var(--hb-color-text-regular,#606266);--hb-select-placeholder-color:var(--hb-color-text-placeholder,#c0c4cc);display:inline-block;position:relative}.hb-select{display:inline-block;position:relative;width:240px}.hb-select__input-wrapper{position:relative}.hb-select__input,.hb-select__input-wrapper{cursor:pointer;display:inline-block;width:100%}.hb-select__input{background-color:var(--hb-select-bg-color);border:1px solid var(--hb-select-border-color);border-radius:4px;box-sizing:border-box;color:var(--hb-select-text-color);font-size:var(--hb-select-font-size);height:var(--hb-select-height);line-height:var(--hb-select-height);outline:none;padding:0 30px 0 15px;transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.hb-select__input::placeholder{color:var(--hb-select-placeholder-color)}.hb-select__input:focus,.hb-select__input:hover:not(:disabled){border-color:var(--hb-select-border-color-hover)}.hb-select__tags{align-items:center;background-color:var(--hb-select-bg-color);border:1px solid var(--hb-select-border-color);border-radius:4px;display:flex;flex-wrap:wrap;min-height:var(--hb-select-height);padding:0 30px 0 5px}.hb-select__tag{align-items:center;background-color:var(--hb-fill-color-light,#f0f2f5);border:1px solid var(--hb-border-color-lighter,#e4e7ed);border-radius:4px;color:var(--hb-color-text-regular,#606266);display:inline-flex;font-size:12px;height:24px;margin:2px 0 2px 6px;padding:0 8px}.hb-select__tag-text{margin-right:4px}.hb-select__tag-close{align-items:center;color:var(--hb-color-text-placeholder,#c0c4cc);cursor:pointer;display:inline-flex;height:12px;justify-content:center;transition:color .2s;width:12px}.hb-select__tag-close svg{height:100%;width:100%}.hb-select__tag-close:hover{color:var(--hb-color-text-regular,#606266)}.hb-select__suffix{align-items:center;color:var(--hb-select-text-color);display:flex;position:absolute;right:8px;top:50%;transform:translateY(-50%)}.hb-select__clear{align-items:center;color:var(--hb-select-placeholder-color);cursor:pointer;display:inline-flex;height:14px;justify-content:center;margin-right:8px;transition:color .2s;width:14px}.hb-select__clear svg{height:100%;width:100%}.hb-select__clear:hover{color:var(--hb-select-text-color)}.hb-select__arrow{align-items:center;color:var(--hb-select-placeholder-color);display:inline-flex;height:12px;justify-content:center;transition:transform .3s;width:12px}.hb-select__arrow svg{height:100%;width:100%}.hb-select--open .hb-select__arrow{transform:rotate(180deg)}.hb-select__dropdown{background-color:var(--hb-select-bg-color);border:1px solid var(--hb-select-border-color);border-radius:4px;box-shadow:0 2px 12px #0000001a;left:0;margin-top:4px;max-height:300px;min-width:100%;overflow-y:auto;position:absolute;top:100%;z-index:1000}.hb-select__menu{list-style:none;margin:0;padding:6px 0}.hb-select__menu-item{align-items:center;color:var(--hb-select-text-color);cursor:pointer;display:flex;font-size:var(--hb-select-font-size);padding:8px 20px;transition:background-color .2s}.hb-select__menu-item:hover:not(.hb-select__menu-item--disabled):not(.hb-select__menu-item--divided){background-color:var(--hb-fill-color-light,#f5f7fa)}.hb-select__menu-item--selected{color:var(--hb-color-primary);font-weight:600}.hb-select__menu-item--disabled{color:var(--hb-color-text-disabled,#c0c4cc);cursor:not-allowed}.hb-select__menu-item--divided{border-top:1px solid var(--hb-border-color-lighter,#e4e7ed);margin-top:6px;padding-top:6px}.hb-select__menu-item--empty{color:var(--hb-select-placeholder-color);cursor:default}.hb-select__menu-item-checkbox{align-items:center;color:var(--hb-color-primary,#1677ff);display:inline-flex;height:14px;justify-content:center;margin-right:8px;width:14px}.hb-select__menu-item-checkbox svg{height:100%;width:100%}.hb-select__menu-item--create{color:var(--hb-color-primary,#1677ff);font-weight:500}.hb-select__menu-item--create:hover{background-color:var(--hb-color-primary-bg,#e6f4ff)}.hb-select__menu-item-label{flex:1}.hb-select--small{font-size:12px}.hb-select--small .hb-select__input{font-size:12px;height:24px;line-height:24px;padding:0 25px 0 12px}.hb-select--large{font-size:16px}.hb-select--large .hb-select__input{font-size:16px;height:40px;line-height:40px;padding:0 35px 0 18px}.hb-select--disabled{cursor:not-allowed}.hb-select--disabled .hb-select__input{background-color:var(--hb-fill-color-light,#f5f7fa);border-color:var(--hb-select-border-color);color:var(--hb-color-text-disabled,#c0c4cc);cursor:not-allowed}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}";
5
+ /**
6
+ * 通用虚拟滚动工具(V1,包2)。
7
+ *
8
+ * 从 Table 的虚拟滚动逻辑提取,供 Select/Cascader/Tree/TreeSelect/Menu 复用。
9
+ * 仅渲染「可见窗口 + 上下缓冲」范围的项,而非全量列表——1000+ 选项时 DOM 节点数恒定。
10
+ *
11
+ * 用法(组件内):
12
+ * 1. 维护 scrollTop state(onScroll 回调更新)
13
+ * 2. 调 getVirtualRange({ total, itemHeight, viewportHeight, scrollTop, buffer }) 得 [start, end)
14
+ * 3. 仅渲染 list.slice(start, end),用 getOffsetTop(start, itemHeight) 撑出顶部空白
15
+ */
16
+ /**
17
+ * 计算可见窗口 [startIndex, endIndex)。
18
+ * startIndex 夹到 [0, total),endIndex 夹到 [0, total]。
19
+ */
20
+ function getVirtualRange(opts) {
21
+ const { total, viewportHeight, scrollTop, buffer = 5 } = opts;
22
+ if (total <= 0)
23
+ return { startIndex: 0, endIndex: 0 };
24
+ const itemHeight = opts.itemHeight > 0 ? opts.itemHeight : 1;
25
+ let startIndex = Math.floor(scrollTop / itemHeight) - buffer;
26
+ if (startIndex < 0)
27
+ startIndex = 0;
28
+ let endIndex = Math.ceil((scrollTop + viewportHeight) / itemHeight) + buffer;
29
+ if (endIndex > total)
30
+ endIndex = total;
31
+ return { startIndex, endIndex };
32
+ }
33
+ /** 撑出顶部空白高度(px),用于偏移可见窗口到正确滚动位置。 */
34
+ function getOffsetTop(startIndex, itemHeight) {
35
+ const h = itemHeight > 0 ? itemHeight : 1;
36
+ return startIndex * h;
37
+ }
38
+ /** 容器总高度(px),用于撑出滚动条。 */
39
+ function getTotalHeight(total, itemHeight) {
40
+ const h = itemHeight > 0 ? itemHeight : 1;
41
+ return total * h;
42
+ }
43
+
44
+ const selectCss = "/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:host,:root{--font-sans:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,::backdrop,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}::file-selector-button{appearance:button;background-color:#0000;border:0 solid;border-radius:0;box-sizing:border-box;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;margin:0;margin-inline-end:4px;opacity:1;padding:0}:host,html{-webkit-text-size-adjust:100%;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);line-height:1.5;tab-size:4;-webkit-tap-highlight-color:transparent}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}button,input,optgroup,select,textarea{background-color:#0000;border-radius:0;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex;padding-block:0}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.relative{position:relative}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}} /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;:host{--hb-select-font-size:14px;--hb-select-height:32px;--hb-select-border-color:var(--hb-border-color,#dcdfe6);--hb-select-border-color-hover:var(--hb-color-primary);--hb-select-bg-color:var(--hb-color-white,#fff);--hb-select-text-color:var(--hb-color-text-regular,#606266);--hb-select-placeholder-color:var(--hb-color-text-placeholder,#c0c4cc);display:inline-block;position:relative}.hb-select{display:inline-block;position:relative;width:240px}.hb-select__input-wrapper{position:relative}.hb-select__input,.hb-select__input-wrapper{cursor:pointer;display:inline-block;width:100%}.hb-select__input{background-color:var(--hb-select-bg-color);border:1px solid var(--hb-select-border-color);border-radius:4px;box-sizing:border-box;color:var(--hb-select-text-color);font-size:var(--hb-select-font-size);height:var(--hb-select-height);line-height:var(--hb-select-height);outline:none;padding:0 30px 0 15px;transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.hb-select__input::placeholder{color:var(--hb-select-placeholder-color)}.hb-select__input:focus,.hb-select__input:hover:not(:disabled){border-color:var(--hb-select-border-color-hover)}.hb-select__tags{align-items:center;background-color:var(--hb-select-bg-color);border:1px solid var(--hb-select-border-color);border-radius:4px;display:flex;flex-wrap:wrap;min-height:var(--hb-select-height);padding:0 30px 0 5px}.hb-select__tag{align-items:center;background-color:var(--hb-fill-color-light,#f0f2f5);border:1px solid var(--hb-border-color-lighter,#e4e7ed);border-radius:4px;color:var(--hb-color-text-regular,#606266);display:inline-flex;font-size:12px;height:24px;margin:2px 0 2px 6px;padding:0 8px}.hb-select__tag-text{margin-right:4px}.hb-select__tag-close{align-items:center;color:var(--hb-color-text-placeholder,#c0c4cc);cursor:pointer;display:inline-flex;height:12px;justify-content:center;transition:color .2s;width:12px}.hb-select__tag-close svg{height:100%;width:100%}.hb-select__tag-close:hover{color:var(--hb-color-text-regular,#606266)}.hb-select__suffix{align-items:center;color:var(--hb-select-text-color);display:flex;position:absolute;right:8px;top:50%;transform:translateY(-50%)}.hb-select__clear{align-items:center;color:var(--hb-select-placeholder-color);cursor:pointer;display:inline-flex;height:14px;justify-content:center;margin-right:8px;transition:color .2s;width:14px}.hb-select__clear svg{height:100%;width:100%}.hb-select__clear:hover{color:var(--hb-select-text-color)}.hb-select__arrow{align-items:center;color:var(--hb-select-placeholder-color);display:inline-flex;height:12px;justify-content:center;transition:transform .3s;width:12px}.hb-select__arrow svg{height:100%;width:100%}.hb-select--open .hb-select__arrow{transform:rotate(180deg)}.hb-select__dropdown{background-color:var(--hb-select-bg-color);border:1px solid var(--hb-select-border-color);border-radius:4px;box-shadow:0 2px 12px #0000001a;left:0;margin-top:4px;max-height:300px;min-width:100%;overflow-y:auto;position:absolute;top:100%;z-index:1000}.hb-select__menu{list-style:none;margin:0;padding:6px 0}.hb-select__menu-item{align-items:center;color:var(--hb-select-text-color);cursor:pointer;display:flex;font-size:var(--hb-select-font-size);padding:8px 20px;transition:background-color .2s}.hb-select__menu-item:hover:not(.hb-select__menu-item--disabled):not(.hb-select__menu-item--divided){background-color:var(--hb-fill-color-light,#f5f7fa)}.hb-select__menu-item--selected{color:var(--hb-color-primary);font-weight:600}.hb-select__menu-item--disabled{color:var(--hb-color-text-disabled,#c0c4cc);cursor:not-allowed}.hb-select__menu-item--divided{border-top:1px solid var(--hb-border-color-lighter,#e4e7ed);margin-top:6px;padding-top:6px}.hb-select__menu-item--empty{color:var(--hb-select-placeholder-color);cursor:default}.hb-select__menu-item-checkbox{align-items:center;color:var(--hb-color-primary,#1677ff);display:inline-flex;height:14px;justify-content:center;margin-right:8px;width:14px}.hb-select__menu-item-checkbox svg{height:100%;width:100%}.hb-select__menu-item--create{color:var(--hb-color-primary,#1677ff);font-weight:500}.hb-select__menu-item--create:hover{background-color:var(--hb-color-primary-bg,#e6f4ff)}.hb-select__menu-item-label{flex:1}.hb-select--small{font-size:12px}.hb-select--small .hb-select__input{font-size:12px;height:24px;line-height:24px;padding:0 25px 0 12px}.hb-select--large{font-size:16px}.hb-select--large .hb-select__input{font-size:16px;height:40px;line-height:40px;padding:0 35px 0 18px}.hb-select--disabled{cursor:not-allowed}.hb-select--disabled .hb-select__input{background-color:var(--hb-fill-color-light,#f5f7fa);border-color:var(--hb-select-border-color);color:var(--hb-color-text-disabled,#c0c4cc);cursor:not-allowed}@property --tw-rotate-x{syntax:\"*\";inherits:false}@property --tw-rotate-y{syntax:\"*\";inherits:false}@property --tw-rotate-z{syntax:\"*\";inherits:false}@property --tw-skew-x{syntax:\"*\";inherits:false}@property --tw-skew-y{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}";
6
45
  const HbSelectStyle0 = selectCss;
7
46
 
8
47
  const Select = /*@__PURE__*/ proxyCustomElement(class Select extends H {
@@ -73,12 +112,32 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends H {
73
112
  * 多选时最多显示多少个tag
74
113
  */
75
114
  maxCollapseTags;
115
+ /**
116
+ * V1:是否开启虚拟滚动(1000+ 选项时推荐)。默认 false。
117
+ * 开启后下拉仅渲染可见窗口内的选项,DOM 节点数恒定。
118
+ */
119
+ virtual = false;
120
+ /**
121
+ * V1:下拉最大高度(px)。virtual=true 时必填(定义视口高度)。默认 256。
122
+ */
123
+ dropdownMaxHeight = 256;
124
+ /**
125
+ * V1:虚拟滚动每项预估高度(px)。默认 34。
126
+ */
127
+ virtualItemHeight = 34;
76
128
  isOpen = false;
77
129
  inputValue = '';
78
130
  searchValue = '';
79
131
  filteredOptions = [];
80
132
  /** 键盘高亮的选项索引(-1 表示无) */
81
133
  activeOptionIndex = -1;
134
+ /** V1:下拉滚动位置(px),驱动虚拟滚动可见窗口重算 */
135
+ dropdownScrollTop = 0;
136
+ /** V1:下拉滚动回调 */
137
+ handleDropdownScroll = (e) => {
138
+ const target = e.target;
139
+ this.dropdownScrollTop = target.scrollTop;
140
+ };
82
141
  /**
83
142
  * O4:实例级稳定 id,用于 combobox 的 aria-controls / aria-activedescendant 关联,
84
143
  * 让读屏在键盘导航时播报当前高亮项。
@@ -274,27 +333,40 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends H {
274
333
  this.updateInputValue();
275
334
  this.hbChange.emit(this.modelValue);
276
335
  };
336
+ /** 渲染单个选项 <li>(普通 + 虚拟滚动共用,V1 提取) */
337
+ renderOption(option, index) {
338
+ return (h("li", { id: `${this.listboxId}-opt-${index}`, class: {
339
+ 'hb-select__menu-item': true,
340
+ 'hb-select__menu-item--selected': this.isSelected(option),
341
+ 'hb-select__menu-item--disabled': option.disabled,
342
+ 'hb-select__menu-item--divided': option.divided,
343
+ 'hb-select__menu-item--active': index === this.activeOptionIndex,
344
+ }, style: this.virtual ? { height: `${this.virtualItemHeight}px` } : undefined, role: "option", "aria-selected": this.isSelected(option) ? 'true' : 'false', "aria-disabled": option.disabled ? 'true' : undefined, onClick: () => this.handleSelect(option) }, this.multiple && (h("span", { class: "hb-select__menu-item-checkbox", "aria-hidden": "true" }, this.isSelected(option) ? (h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": 3, "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M5 12l5 5L20 7" }))) : null)), h("span", { class: "hb-select__menu-item-label" }, option.label)));
345
+ }
277
346
  render() {
278
347
  const displayOptions = this.filterable ? this.filteredOptions : this.options;
279
348
  const showClear = this.clearable && this.modelValue !== undefined && (this.multiple ? this.modelValue.length > 0 : true);
280
- return (h("div", { key: 'b4a502d0791ec418009f85cb7f56e28dd883a29d', class: {
349
+ return (h("div", { key: '711a2660ec0ff788a027b7097a64f74ee535ae58', class: {
281
350
  'hb-select': true,
282
351
  'hb-select--open': this.isOpen,
283
352
  'hb-select--disabled': this.disabled,
284
353
  [`hb-select--${this.size}`]: true,
285
- }, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-controls": this.isOpen ? this.listboxId : undefined, "aria-activedescendant": this.isOpen && this.activeOptionIndex >= 0 ? `${this.listboxId}-opt-${this.activeOptionIndex}` : undefined }, h("div", { key: '1d94bc1d92b716386d6f791e5cb0b4aa5f4e7c6b', class: "hb-select__input-wrapper", onClick: this.handleInputClick, onKeyDown: this.handleWrapperKeydown }, this.multiple && Array.isArray(this.modelValue) && this.modelValue.length > 0 ? (h("div", { class: "hb-select__tags" }, this.modelValue.slice(0, this.collapseTags && this.maxCollapseTags ? this.maxCollapseTags : undefined).map(val => {
354
+ }, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-controls": this.isOpen ? this.listboxId : undefined, "aria-activedescendant": this.isOpen && this.activeOptionIndex >= 0 ? `${this.listboxId}-opt-${this.activeOptionIndex}` : undefined }, h("div", { key: '7719c10931fd36306a7bc302b167c43a782158bd', class: "hb-select__input-wrapper", onClick: this.handleInputClick, onKeyDown: this.handleWrapperKeydown }, this.multiple && Array.isArray(this.modelValue) && this.modelValue.length > 0 ? (h("div", { class: "hb-select__tags" }, this.modelValue.slice(0, this.collapseTags && this.maxCollapseTags ? this.maxCollapseTags : undefined).map(val => {
286
355
  const option = this.options.find(opt => opt.value === val);
287
356
  return (h("span", { class: "hb-select__tag" }, h("span", { class: "hb-select__tag-text" }, option ? option.label : val), h("span", { class: "hb-select__tag-close", role: "button", "aria-label": "\u79FB\u9664\u6807\u7B7E", tabIndex: 0, onClick: e => {
288
357
  e.stopPropagation();
289
358
  this.handleSelect(option || { value: val, label: String(val) });
290
359
  }, onKeyDown: activationClickHandler }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": 2, "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M6 6l12 12M18 6L6 18" })))));
291
- }), this.collapseTags && this.maxCollapseTags && this.modelValue.length > this.maxCollapseTags && (h("span", { class: "hb-select__tag" }, h("span", { class: "hb-select__tag-text" }, "+", this.modelValue.length - this.maxCollapseTags))))) : (h("input", { type: "text", class: "hb-select__input", placeholder: this.placeholder, value: this.filterable && this.isOpen ? this.searchValue : this.inputValue, disabled: this.disabled, readonly: !this.filterable || !this.isOpen, onInput: this.handleSearch, "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', role: "combobox" })), h("span", { key: 'a3baeacc8cdbf27eba98f6598691bda8d2eb05a1', class: "hb-select__suffix" }, showClear && (h("span", { key: 'a6949d1ab21d12029532dc74d8211075d2eef3cc', class: "hb-select__clear", role: "button", "aria-label": "\u6E05\u7A7A", tabIndex: 0, onClick: this.handleClear, onKeyDown: activationClickHandler }, h("svg", { key: 'e9c4b5432f7880392485135eeab6ea704a6b8276', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": 2, "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { key: '2a8a040a65bb299cad10023d22f4875c46dfb532', d: "M6 6l12 12M18 6L6 18" })))), h("span", { key: '5b7c7a3cf6adfc64b7310e5564b447256cf317cb', class: "hb-select__arrow", "aria-hidden": "true" }, h("svg", { key: '72d1d5fe5ec09baf891abc60c0c08e1803c82979', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": 2, "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { key: '136724fc7a387c0831a703f5561e40b9681f7c08', d: "M6 9l6 6 6-6" }))))), this.isOpen && (h("div", { key: '25f7454d0e3bbcaacc1032d97fbcb3a7bd40300b', class: "hb-select__dropdown" }, h("ul", { key: '41037c823d64c4c5b4fc7dac74c7ae39a8557867', class: "hb-select__menu", role: "listbox", id: this.listboxId }, this.createOption && (h("li", { key: '25337a9a9f1ee67957aacad3c106edbc57284029', class: { 'hb-select__menu-item': true, 'hb-select__menu-item--create': true }, role: "option", "aria-selected": "false", onClick: this.handleCreate }, h("span", { key: '43b94deb1f4d4ab2fac5d248a8fb538dd476e7de', class: "hb-select__menu-item-label" }, "\u521B\u5EFA\u300C", this.createOption.label, "\u300D"))), displayOptions.length === 0 && !this.createOption ? (h("li", { class: "hb-select__menu-item hb-select__menu-item--empty", "aria-disabled": "true" }, "\u65E0\u6570\u636E")) : (displayOptions.map((option, index) => (h("li", { id: `${this.listboxId}-opt-${index}`, class: {
292
- 'hb-select__menu-item': true,
293
- 'hb-select__menu-item--selected': this.isSelected(option),
294
- 'hb-select__menu-item--disabled': option.disabled,
295
- 'hb-select__menu-item--divided': option.divided,
296
- 'hb-select__menu-item--active': index === this.activeOptionIndex,
297
- }, role: "option", "aria-selected": this.isSelected(option) ? 'true' : 'false', "aria-disabled": option.disabled ? 'true' : undefined, onClick: () => this.handleSelect(option) }, this.multiple && (h("span", { class: "hb-select__menu-item-checkbox", "aria-hidden": "true" }, this.isSelected(option) ? (h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": 3, "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M5 12l5 5L20 7" }))) : null)), h("span", { class: "hb-select__menu-item-label" }, option.label))))))))));
360
+ }), this.collapseTags && this.maxCollapseTags && this.modelValue.length > this.maxCollapseTags && (h("span", { class: "hb-select__tag" }, h("span", { class: "hb-select__tag-text" }, "+", this.modelValue.length - this.maxCollapseTags))))) : (h("input", { type: "text", class: "hb-select__input", placeholder: this.placeholder, value: this.filterable && this.isOpen ? this.searchValue : this.inputValue, disabled: this.disabled, readonly: !this.filterable || !this.isOpen, onInput: this.handleSearch, "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', role: "combobox" })), h("span", { key: 'a9dc4ecd508bb6828296cf2a9465ab5c24595573', class: "hb-select__suffix" }, showClear && (h("span", { key: 'cde7a95063f12c03844303681a3a95da1f5aaa66', class: "hb-select__clear", role: "button", "aria-label": "\u6E05\u7A7A", tabIndex: 0, onClick: this.handleClear, onKeyDown: activationClickHandler }, h("svg", { key: 'a9abef626a4a3da495afffe7e562fb557a26f8e7', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": 2, "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { key: 'a95c9113f3c7ef741dc9a8111576827571668ecf', d: "M6 6l12 12M18 6L6 18" })))), h("span", { key: '184023640706c01ed18854cb5b1975f9def18dc4', class: "hb-select__arrow", "aria-hidden": "true" }, h("svg", { key: '14fec9c7d46ad1d22ddf07de502aedabe8b19b18', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": 2, "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { key: 'd280de7e1545be150238126b65f6c37e499bb83a', d: "M6 9l6 6 6-6" }))))), this.isOpen && (h("div", { key: 'e9a10e24e49095535c232ec39be458780789fde4', class: "hb-select__dropdown" }, h("ul", { key: '874854750698dcb2346cbd3a965ba0e500b5bafc', class: "hb-select__menu", role: "listbox", id: this.listboxId,
361
+ // V1:虚拟滚动时滚动容器限高 + onScroll 更新可见窗口
362
+ style: this.virtual ? { maxHeight: `${this.dropdownMaxHeight}px`, overflowY: 'auto' } : undefined, onScroll: this.virtual ? this.handleDropdownScroll : undefined }, this.createOption && (h("li", { key: '5ca5a633a0d69ddb1ba065bb08d947d663b774ac', class: { 'hb-select__menu-item': true, 'hb-select__menu-item--create': true }, role: "option", "aria-selected": "false", onClick: this.handleCreate }, h("span", { key: 'f986194f0456c910bba2447603505edce6cb6e60', class: "hb-select__menu-item-label" }, "\u521B\u5EFA\u300C", this.createOption.label, "\u300D"))), displayOptions.length === 0 && !this.createOption ? (h("li", { class: "hb-select__menu-item hb-select__menu-item--empty", "aria-disabled": "true" }, "\u65E0\u6570\u636E")) : this.virtual ? (
363
+ // V1:虚拟滚动——仅渲染可见窗口 + 顶部撑高 spacer
364
+ h("div", { style: { height: `${getTotalHeight(displayOptions.length, this.virtualItemHeight)}px`, position: 'relative' } }, h("div", { style: { transform: `translateY(${getOffsetTop(getVirtualRange({ total: displayOptions.length, itemHeight: this.virtualItemHeight, viewportHeight: this.dropdownMaxHeight, scrollTop: this.dropdownScrollTop }).startIndex, this.virtualItemHeight)}px)` } }, displayOptions
365
+ .slice(getVirtualRange({ total: displayOptions.length, itemHeight: this.virtualItemHeight, viewportHeight: this.dropdownMaxHeight, scrollTop: this.dropdownScrollTop }).startIndex, getVirtualRange({ total: displayOptions.length, itemHeight: this.virtualItemHeight, viewportHeight: this.dropdownMaxHeight, scrollTop: this.dropdownScrollTop }).endIndex)
366
+ .map((option, i) => {
367
+ const absIndex = getVirtualRange({ total: displayOptions.length, itemHeight: this.virtualItemHeight, viewportHeight: this.dropdownMaxHeight, scrollTop: this.dropdownScrollTop }).startIndex + i;
368
+ return this.renderOption(option, absIndex);
369
+ })))) : (displayOptions.map((option, index) => this.renderOption(option, index))))))));
298
370
  }
299
371
  static get watchers() { return {
300
372
  "modelValue": ["handleValueChange"],
@@ -315,11 +387,15 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends H {
315
387
  "allowCreate": [4, "allow-create"],
316
388
  "collapseTags": [4, "collapse-tags"],
317
389
  "maxCollapseTags": [2, "max-collapse-tags"],
390
+ "virtual": [4],
391
+ "dropdownMaxHeight": [2, "dropdown-max-height"],
392
+ "virtualItemHeight": [2, "virtual-item-height"],
318
393
  "isOpen": [32],
319
394
  "inputValue": [32],
320
395
  "searchValue": [32],
321
396
  "filteredOptions": [32],
322
- "activeOptionIndex": [32]
397
+ "activeOptionIndex": [32],
398
+ "dropdownScrollTop": [32]
323
399
  }, undefined, {
324
400
  "modelValue": ["handleValueChange"],
325
401
  "options": ["handleOptionsChange"]
@@ -1 +1 @@
1
- {"file":"hb-select.js","mappings":"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","names":[],"sources":["src/components/Select/select.css?tag=hb-select&encapsulation=shadow","src/components/Select/Select.tsx"],"sourcesContent":[":host {\n display: inline-block;\n position: relative;\n --hb-select-font-size: 14px;\n --hb-select-height: 32px;\n --hb-select-border-color: var(--hb-border-color, #dcdfe6);\n --hb-select-border-color-hover: var(--hb-color-primary);\n --hb-select-bg-color: var(--hb-color-white, #ffffff);\n --hb-select-text-color: var(--hb-color-text-regular, #606266);\n --hb-select-placeholder-color: var(--hb-color-text-placeholder, #c0c4cc);\n}\n\n.hb-select {\n display: inline-block;\n position: relative;\n width: 240px;\n}\n\n.hb-select__input-wrapper {\n position: relative;\n display: inline-block;\n width: 100%;\n cursor: pointer;\n}\n\n.hb-select__input {\n display: inline-block;\n width: 100%;\n height: var(--hb-select-height);\n line-height: var(--hb-select-height);\n padding: 0 30px 0 15px;\n font-size: var(--hb-select-font-size);\n color: var(--hb-select-text-color);\n background-color: var(--hb-select-bg-color);\n border: 1px solid var(--hb-select-border-color);\n border-radius: 4px;\n box-sizing: border-box;\n cursor: pointer;\n outline: none;\n transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n\n.hb-select__input::placeholder {\n color: var(--hb-select-placeholder-color);\n}\n\n.hb-select__input:hover:not(:disabled) {\n border-color: var(--hb-select-border-color-hover);\n}\n\n.hb-select__input:focus {\n border-color: var(--hb-select-border-color-hover);\n}\n\n.hb-select__tags {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n padding: 0 30px 0 5px;\n min-height: var(--hb-select-height);\n border: 1px solid var(--hb-select-border-color);\n border-radius: 4px;\n background-color: var(--hb-select-bg-color);\n}\n\n.hb-select__tag {\n display: inline-flex;\n align-items: center;\n height: 24px;\n padding: 0 8px;\n margin: 2px 0 2px 6px;\n background-color: var(--hb-fill-color-light, #f0f2f5);\n border: 1px solid var(--hb-border-color-lighter, #e4e7ed);\n border-radius: 4px;\n font-size: 12px;\n color: var(--hb-color-text-regular, #606266);\n}\n\n.hb-select__tag-text {\n margin-right: 4px;\n}\n\n.hb-select__tag-close {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 12px;\n height: 12px;\n cursor: pointer;\n color: var(--hb-color-text-placeholder, #c0c4cc);\n transition: color 0.2s;\n}\n\n.hb-select__tag-close svg {\n width: 100%;\n height: 100%;\n}\n\n.hb-select__tag-close:hover {\n color: var(--hb-color-text-regular, #606266);\n}\n\n.hb-select__suffix {\n position: absolute;\n right: 8px;\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n color: var(--hb-select-text-color);\n}\n\n.hb-select__clear {\n margin-right: 8px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 14px;\n height: 14px;\n cursor: pointer;\n color: var(--hb-select-placeholder-color);\n transition: color 0.2s;\n}\n\n.hb-select__clear svg {\n width: 100%;\n height: 100%;\n}\n\n.hb-select__clear:hover {\n color: var(--hb-select-text-color);\n}\n\n.hb-select__arrow {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 12px;\n height: 12px;\n color: var(--hb-select-placeholder-color);\n transition: transform 0.3s;\n}\n\n.hb-select__arrow svg {\n width: 100%;\n height: 100%;\n}\n\n.hb-select--open .hb-select__arrow {\n transform: rotate(180deg);\n}\n\n.hb-select__dropdown {\n position: absolute;\n top: 100%;\n left: 0;\n margin-top: 4px;\n background-color: var(--hb-select-bg-color);\n border: 1px solid var(--hb-select-border-color);\n border-radius: 4px;\n box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);\n z-index: 1000;\n min-width: 100%;\n max-height: 300px;\n overflow-y: auto;\n}\n\n.hb-select__menu {\n margin: 0;\n padding: 6px 0;\n list-style: none;\n}\n\n.hb-select__menu-item {\n display: flex;\n align-items: center;\n padding: 8px 20px;\n font-size: var(--hb-select-font-size);\n color: var(--hb-select-text-color);\n cursor: pointer;\n transition: background-color 0.2s;\n}\n\n.hb-select__menu-item:hover:not(.hb-select__menu-item--disabled):not(.hb-select__menu-item--divided) {\n background-color: var(--hb-fill-color-light, #f5f7fa);\n}\n\n.hb-select__menu-item--selected {\n color: var(--hb-color-primary);\n font-weight: 600;\n}\n\n.hb-select__menu-item--disabled {\n color: var(--hb-color-text-disabled, #c0c4cc);\n cursor: not-allowed;\n}\n\n.hb-select__menu-item--divided {\n border-top: 1px solid var(--hb-border-color-lighter, #e4e7ed);\n margin-top: 6px;\n padding-top: 6px;\n}\n\n.hb-select__menu-item--empty {\n color: var(--hb-select-placeholder-color);\n cursor: default;\n}\n\n.hb-select__menu-item-checkbox {\n margin-right: 8px;\n width: 14px;\n height: 14px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--hb-color-primary, #1677ff);\n}\n\n.hb-select__menu-item-checkbox svg {\n width: 100%;\n height: 100%;\n}\n\n.hb-select__menu-item--create {\n color: var(--hb-color-primary, #1677ff);\n font-weight: 500;\n}\n\n.hb-select__menu-item--create:hover {\n background-color: var(--hb-color-primary-bg, #e6f4ff);\n}\n\n.hb-select__menu-item-label {\n flex: 1;\n}\n\n.hb-select--small {\n font-size: 12px;\n}\n\n.hb-select--small .hb-select__input {\n height: 24px;\n line-height: 24px;\n font-size: 12px;\n padding: 0 25px 0 12px;\n}\n\n.hb-select--large {\n font-size: 16px;\n}\n\n.hb-select--large .hb-select__input {\n height: 40px;\n line-height: 40px;\n font-size: 16px;\n padding: 0 35px 0 18px;\n}\n\n.hb-select--disabled {\n cursor: not-allowed;\n}\n\n.hb-select--disabled .hb-select__input {\n background-color: var(--hb-fill-color-light, #f5f7fa);\n border-color: var(--hb-select-border-color);\n color: var(--hb-color-text-disabled, #c0c4cc);\n cursor: not-allowed;\n}\n","import { Component, h, Prop, Event, EventEmitter, State, Element, Watch } from '@stencil/core';\nimport { createClickOutsideHandler } from '../../utils/click-outside';\nimport { handleListKeyboard, activationClickHandler } from '../../utils/a11y';\n\nexport interface SelectOption {\n value: string | number;\n label: string;\n disabled?: boolean;\n divided?: boolean;\n}\n\n/**\n * Select 选择器组件\n * 当选项过多时,使用下拉菜单展示并选择内容\n */\n@Component({\n tag: 'hb-select',\n styleUrl: 'select.css',\n shadow: true,\n})\nexport class Select {\n @Element() el: HTMLElement;\n\n /**\n * 绑定值\n */\n @Prop({ mutable: true }) modelValue?: string | number | (string | number)[];\n\n /**\n * 可选项数据源\n */\n @Prop() options: SelectOption[] = [];\n\n /**\n * 输入框占位文本\n */\n @Prop() placeholder: string = '请选择';\n\n /**\n * 是否禁用\n * @default false\n */\n @Prop() disabled: boolean = false;\n\n /**\n * 输入框尺寸\n */\n @Prop() size: 'large' | 'default' | 'small' = 'default';\n\n /**\n * 是否可清空\n * @default false\n */\n @Prop() clearable: boolean = false;\n\n /**\n * 是否多选\n * @default false\n */\n @Prop() multiple: boolean = false;\n\n /**\n * 是否可搜索\n * @default false\n */\n @Prop() filterable: boolean = false;\n\n /**\n * 自定义过滤方法\n */\n @Prop() filterMethod?: (query: string) => void;\n\n /**\n * 是否默认展开\n * @default false\n */\n @Prop() defaultFirstOption: boolean = false;\n\n /**\n * 是否允许创建新条目\n * @default false\n */\n @Prop() allowCreate: boolean = false;\n\n /**\n * 多选时是否将选中值按文字的形式展示\n * @default false\n */\n @Prop() collapseTags: boolean = false;\n\n /**\n * 多选时最多显示多少个tag\n */\n @Prop() maxCollapseTags?: number;\n\n @State() isOpen: boolean = false;\n @State() inputValue: string = '';\n @State() searchValue: string = '';\n @State() filteredOptions: SelectOption[] = [];\n /** 键盘高亮的选项索引(-1 表示无) */\n @State() activeOptionIndex: number = -1;\n\n /**\n * O4:实例级稳定 id,用于 combobox 的 aria-controls / aria-activedescendant 关联,\n * 让读屏在键盘导航时播报当前高亮项。\n */\n private listboxId = `hb-select-listbox-${Math.random().toString(36).slice(2, 11)}`;\n\n /**\n * 值改变事件\n */\n @Event() hbChange: EventEmitter<string | number | (string | number)[]>;\n\n /**\n * 下拉框出现/隐藏时触发\n */\n @Event() hbVisibleChange: EventEmitter<boolean>;\n\n private clickOutside = createClickOutsideHandler({\n host: null as any,\n isOpen: () => this.isOpen,\n onClose: () => {\n this.isOpen = false;\n this.hbVisibleChange.emit(false);\n },\n });\n\n componentDidLoad() {\n this.clickOutside = createClickOutsideHandler({\n host: this.el,\n isOpen: () => this.isOpen,\n onClose: () => {\n this.isOpen = false;\n this.hbVisibleChange.emit(false);\n },\n });\n this.clickOutside.connect();\n this.updateInputValue();\n if (this.filterable) {\n this.filteredOptions = this.options;\n }\n }\n\n disconnectedCallback() {\n this.clickOutside.disconnect();\n }\n\n @Watch('modelValue')\n handleValueChange() {\n this.updateInputValue();\n }\n\n @Watch('options')\n handleOptionsChange() {\n if (this.filterable) {\n this.filteredOptions = this.options;\n }\n }\n\n private updateInputValue() {\n if (!this.modelValue) {\n this.inputValue = '';\n return;\n }\n\n if (this.multiple && Array.isArray(this.modelValue)) {\n const labels = this.modelValue.map(val => {\n const option = this.options.find(opt => opt.value === val);\n return option ? option.label : String(val);\n });\n this.inputValue = labels.join(', ');\n } else {\n const option = this.options.find(opt => opt.value === this.modelValue);\n this.inputValue = option ? option.label : String(this.modelValue);\n }\n }\n\n private handleInputClick = () => {\n if (this.disabled) return;\n this.isOpen = !this.isOpen;\n if (this.isOpen) {\n // defaultFirstOption=true:打开时自动高亮第一个可选(非禁用)项\n this.activeOptionIndex = this.defaultFirstOption\n ? Math.max(\n -1,\n this.options.findIndex(o => !o.disabled),\n )\n : -1;\n }\n this.hbVisibleChange.emit(this.isOpen);\n };\n\n private handleWrapperKeydown = (e: KeyboardEvent) => {\n if (this.disabled) return;\n const displayOptions = this.filterable ? this.filteredOptions : this.options;\n\n if (!this.isOpen) {\n // 关闭态:Enter / Space / 方向键 展开\n if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar' || e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n e.preventDefault();\n this.isOpen = true;\n this.activeOptionIndex = -1;\n this.hbVisibleChange.emit(true);\n }\n return;\n }\n\n const action = handleListKeyboard(e, {\n activeIndex: this.activeOptionIndex,\n itemCount: displayOptions.length,\n loop: true,\n });\n switch (action.type) {\n case 'navigate':\n e.preventDefault();\n this.activeOptionIndex = action.index;\n break;\n case 'select': {\n e.preventDefault();\n const opt = displayOptions[action.index];\n if (opt && !opt.disabled) this.handleSelect(opt);\n break;\n }\n case 'close':\n e.preventDefault();\n this.isOpen = false;\n this.hbVisibleChange.emit(false);\n break;\n default:\n break;\n }\n };\n\n private handleSelect = (option: SelectOption) => {\n if (option.disabled) return;\n\n if (this.multiple) {\n const currentValue = (this.modelValue as (string | number)[]) || [];\n const index = currentValue.indexOf(option.value);\n\n if (index > -1) {\n currentValue.splice(index, 1);\n } else {\n currentValue.push(option.value);\n }\n\n this.modelValue = [...currentValue];\n } else {\n this.modelValue = option.value;\n this.isOpen = false;\n this.hbVisibleChange.emit(false);\n }\n\n this.updateInputValue();\n this.hbChange.emit(this.modelValue);\n };\n\n private handleClear = (e: Event) => {\n e.stopPropagation();\n this.modelValue = this.multiple ? [] : undefined;\n this.inputValue = '';\n this.isOpen = false;\n this.hbChange.emit(this.modelValue);\n this.hbVisibleChange.emit(false);\n };\n\n private handleSearch = (e: Event) => {\n const target = e.target as HTMLInputElement;\n this.searchValue = target.value;\n\n if (this.filterMethod) {\n this.filterMethod(target.value);\n } else {\n this.filteredOptions = this.options.filter(opt => opt.label.toLowerCase().includes(target.value.toLowerCase()));\n }\n };\n\n private isSelected(option: SelectOption): boolean {\n if (this.multiple && Array.isArray(this.modelValue)) {\n return this.modelValue.includes(option.value);\n }\n return this.modelValue === option.value;\n }\n\n /**\n * allowCreate + filterable:当用户输入的文本在已有选项中不存在时,\n * 渲染一个\"创建 xxx\"项。返回待创建的文本(已 trim);无需创建返回 null。\n */\n private get createOption(): SelectOption | null {\n if (!this.allowCreate || !this.filterable || !this.isOpen) return null;\n const q = this.searchValue.trim();\n if (!q) return null;\n const exists = this.options.some(o => String(o.label).toLowerCase() === q.toLowerCase() || String(o.value).toLowerCase() === q.toLowerCase());\n if (exists) return null;\n return { value: q, label: q };\n }\n\n private handleCreate = () => {\n const opt = this.createOption;\n if (!opt) return;\n if (this.multiple) {\n const arr = ((this.modelValue as (string | number)[]) || []).slice();\n if (!arr.includes(opt.value)) arr.push(opt.value);\n this.modelValue = arr;\n } else {\n this.modelValue = opt.value;\n this.isOpen = false;\n this.hbVisibleChange.emit(false);\n }\n this.searchValue = '';\n this.filteredOptions = this.options;\n this.updateInputValue();\n this.hbChange.emit(this.modelValue);\n };\n\n render() {\n const displayOptions = this.filterable ? this.filteredOptions : this.options;\n const showClear = this.clearable && this.modelValue !== undefined && (this.multiple ? (this.modelValue as any[]).length > 0 : true);\n\n return (\n <div\n class={{\n 'hb-select': true,\n 'hb-select--open': this.isOpen,\n 'hb-select--disabled': this.disabled,\n [`hb-select--${this.size}`]: true,\n }}\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={this.isOpen ? 'true' : 'false'}\n aria-controls={this.isOpen ? this.listboxId : undefined}\n aria-activedescendant={this.isOpen && this.activeOptionIndex >= 0 ? `${this.listboxId}-opt-${this.activeOptionIndex}` : undefined}\n >\n <div class=\"hb-select__input-wrapper\" onClick={this.handleInputClick} onKeyDown={this.handleWrapperKeydown}>\n {this.multiple && Array.isArray(this.modelValue) && this.modelValue.length > 0 ? (\n <div class=\"hb-select__tags\">\n {this.modelValue.slice(0, this.collapseTags && this.maxCollapseTags ? this.maxCollapseTags : undefined).map(val => {\n const option = this.options.find(opt => opt.value === val);\n return (\n <span class=\"hb-select__tag\">\n <span class=\"hb-select__tag-text\">{option ? option.label : val}</span>\n <span\n class=\"hb-select__tag-close\"\n role=\"button\"\n aria-label=\"移除标签\"\n tabIndex={0}\n onClick={e => {\n e.stopPropagation();\n this.handleSelect(option || { value: val, label: String(val) });\n }}\n onKeyDown={activationClickHandler}\n >\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width={2} stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M6 6l12 12M18 6L6 18\" />\n </svg>\n </span>\n </span>\n );\n })}\n {this.collapseTags && this.maxCollapseTags && this.modelValue.length > this.maxCollapseTags && (\n <span class=\"hb-select__tag\">\n <span class=\"hb-select__tag-text\">+{this.modelValue.length - this.maxCollapseTags}</span>\n </span>\n )}\n </div>\n ) : (\n <input\n type=\"text\"\n class=\"hb-select__input\"\n placeholder={this.placeholder}\n value={this.filterable && this.isOpen ? this.searchValue : this.inputValue}\n disabled={this.disabled}\n readonly={!this.filterable || !this.isOpen}\n onInput={this.handleSearch}\n aria-haspopup=\"listbox\"\n aria-expanded={this.isOpen ? 'true' : 'false'}\n role=\"combobox\"\n />\n )}\n <span class=\"hb-select__suffix\">\n {showClear && (\n <span class=\"hb-select__clear\" role=\"button\" aria-label=\"清空\" tabIndex={0} onClick={this.handleClear} onKeyDown={activationClickHandler}>\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width={2} stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M6 6l12 12M18 6L6 18\" />\n </svg>\n </span>\n )}\n <span class=\"hb-select__arrow\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width={2} stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M6 9l6 6 6-6\" />\n </svg>\n </span>\n </span>\n </div>\n {this.isOpen && (\n <div class=\"hb-select__dropdown\">\n <ul class=\"hb-select__menu\" role=\"listbox\" id={this.listboxId}>\n {/* allowCreate:用户输入文本不存在时,渲染创建项(置顶) */}\n {this.createOption && (\n <li class={{ 'hb-select__menu-item': true, 'hb-select__menu-item--create': true }} role=\"option\" aria-selected=\"false\" onClick={this.handleCreate}>\n <span class=\"hb-select__menu-item-label\">创建「{this.createOption.label}」</span>\n </li>\n )}\n {displayOptions.length === 0 && !this.createOption ? (\n <li class=\"hb-select__menu-item hb-select__menu-item--empty\" aria-disabled=\"true\">\n 无数据\n </li>\n ) : (\n displayOptions.map((option, index) => (\n <li\n id={`${this.listboxId}-opt-${index}`}\n class={{\n 'hb-select__menu-item': true,\n 'hb-select__menu-item--selected': this.isSelected(option),\n 'hb-select__menu-item--disabled': option.disabled,\n 'hb-select__menu-item--divided': option.divided,\n 'hb-select__menu-item--active': index === this.activeOptionIndex,\n }}\n role=\"option\"\n aria-selected={this.isSelected(option) ? 'true' : 'false'}\n aria-disabled={option.disabled ? 'true' : undefined}\n onClick={() => this.handleSelect(option)}\n >\n {this.multiple && (\n <span class=\"hb-select__menu-item-checkbox\" aria-hidden=\"true\">\n {this.isSelected(option) ? (\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width={3} stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M5 12l5 5L20 7\" />\n </svg>\n ) : null}\n </span>\n )}\n <span class=\"hb-select__menu-item-label\">{option.label}</span>\n </li>\n ))\n )}\n </ul>\n </div>\n )}\n </div>\n );\n }\n}\n"],"version":3}
1
+ {"file":"hb-select.js","mappings":"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","names":[],"sources":["src/utils/virtual-scroll.ts","src/components/Select/select.css?tag=hb-select&encapsulation=shadow","src/components/Select/Select.tsx"],"sourcesContent":["/**\n * 通用虚拟滚动工具(V1,包2)。\n *\n * 从 Table 的虚拟滚动逻辑提取,供 Select/Cascader/Tree/TreeSelect/Menu 复用。\n * 仅渲染「可见窗口 + 上下缓冲」范围的项,而非全量列表——1000+ 选项时 DOM 节点数恒定。\n *\n * 用法(组件内):\n * 1. 维护 scrollTop state(onScroll 回调更新)\n * 2. 调 getVirtualRange({ total, itemHeight, viewportHeight, scrollTop, buffer }) 得 [start, end)\n * 3. 仅渲染 list.slice(start, end),用 getOffsetTop(start, itemHeight) 撑出顶部空白\n */\n\nexport interface VirtualRangeOptions {\n /** 列表总项数 */\n total: number;\n /** 每项高度(px),>0 */\n itemHeight: number;\n /** 视口高度(px) */\n viewportHeight: number;\n /** 当前滚动位置(px) */\n scrollTop: number;\n /** 上下缓冲行数(默认 5) */\n buffer?: number;\n}\n\nexport interface VirtualRange {\n /** 起始索引(含) */\n startIndex: number;\n /** 结束索引(不含) */\n endIndex: number;\n}\n\n/**\n * 计算可见窗口 [startIndex, endIndex)。\n * startIndex 夹到 [0, total),endIndex 夹到 [0, total]。\n */\nexport function getVirtualRange(opts: VirtualRangeOptions): VirtualRange {\n const { total, viewportHeight, scrollTop, buffer = 5 } = opts;\n if (total <= 0) return { startIndex: 0, endIndex: 0 };\n const itemHeight = opts.itemHeight > 0 ? opts.itemHeight : 1;\n\n let startIndex = Math.floor(scrollTop / itemHeight) - buffer;\n if (startIndex < 0) startIndex = 0;\n\n let endIndex = Math.ceil((scrollTop + viewportHeight) / itemHeight) + buffer;\n if (endIndex > total) endIndex = total;\n\n return { startIndex, endIndex };\n}\n\n/** 撑出顶部空白高度(px),用于偏移可见窗口到正确滚动位置。 */\nexport function getOffsetTop(startIndex: number, itemHeight: number): number {\n const h = itemHeight > 0 ? itemHeight : 1;\n return startIndex * h;\n}\n\n/** 容器总高度(px),用于撑出滚动条。 */\nexport function getTotalHeight(total: number, itemHeight: number): number {\n const h = itemHeight > 0 ? itemHeight : 1;\n return total * h;\n}\n",":host {\n display: inline-block;\n position: relative;\n --hb-select-font-size: 14px;\n --hb-select-height: 32px;\n --hb-select-border-color: var(--hb-border-color, #dcdfe6);\n --hb-select-border-color-hover: var(--hb-color-primary);\n --hb-select-bg-color: var(--hb-color-white, #ffffff);\n --hb-select-text-color: var(--hb-color-text-regular, #606266);\n --hb-select-placeholder-color: var(--hb-color-text-placeholder, #c0c4cc);\n}\n\n.hb-select {\n display: inline-block;\n position: relative;\n width: 240px;\n}\n\n.hb-select__input-wrapper {\n position: relative;\n display: inline-block;\n width: 100%;\n cursor: pointer;\n}\n\n.hb-select__input {\n display: inline-block;\n width: 100%;\n height: var(--hb-select-height);\n line-height: var(--hb-select-height);\n padding: 0 30px 0 15px;\n font-size: var(--hb-select-font-size);\n color: var(--hb-select-text-color);\n background-color: var(--hb-select-bg-color);\n border: 1px solid var(--hb-select-border-color);\n border-radius: 4px;\n box-sizing: border-box;\n cursor: pointer;\n outline: none;\n transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n\n.hb-select__input::placeholder {\n color: var(--hb-select-placeholder-color);\n}\n\n.hb-select__input:hover:not(:disabled) {\n border-color: var(--hb-select-border-color-hover);\n}\n\n.hb-select__input:focus {\n border-color: var(--hb-select-border-color-hover);\n}\n\n.hb-select__tags {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n padding: 0 30px 0 5px;\n min-height: var(--hb-select-height);\n border: 1px solid var(--hb-select-border-color);\n border-radius: 4px;\n background-color: var(--hb-select-bg-color);\n}\n\n.hb-select__tag {\n display: inline-flex;\n align-items: center;\n height: 24px;\n padding: 0 8px;\n margin: 2px 0 2px 6px;\n background-color: var(--hb-fill-color-light, #f0f2f5);\n border: 1px solid var(--hb-border-color-lighter, #e4e7ed);\n border-radius: 4px;\n font-size: 12px;\n color: var(--hb-color-text-regular, #606266);\n}\n\n.hb-select__tag-text {\n margin-right: 4px;\n}\n\n.hb-select__tag-close {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 12px;\n height: 12px;\n cursor: pointer;\n color: var(--hb-color-text-placeholder, #c0c4cc);\n transition: color 0.2s;\n}\n\n.hb-select__tag-close svg {\n width: 100%;\n height: 100%;\n}\n\n.hb-select__tag-close:hover {\n color: var(--hb-color-text-regular, #606266);\n}\n\n.hb-select__suffix {\n position: absolute;\n right: 8px;\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n color: var(--hb-select-text-color);\n}\n\n.hb-select__clear {\n margin-right: 8px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 14px;\n height: 14px;\n cursor: pointer;\n color: var(--hb-select-placeholder-color);\n transition: color 0.2s;\n}\n\n.hb-select__clear svg {\n width: 100%;\n height: 100%;\n}\n\n.hb-select__clear:hover {\n color: var(--hb-select-text-color);\n}\n\n.hb-select__arrow {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 12px;\n height: 12px;\n color: var(--hb-select-placeholder-color);\n transition: transform 0.3s;\n}\n\n.hb-select__arrow svg {\n width: 100%;\n height: 100%;\n}\n\n.hb-select--open .hb-select__arrow {\n transform: rotate(180deg);\n}\n\n.hb-select__dropdown {\n position: absolute;\n top: 100%;\n left: 0;\n margin-top: 4px;\n background-color: var(--hb-select-bg-color);\n border: 1px solid var(--hb-select-border-color);\n border-radius: 4px;\n box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);\n z-index: 1000;\n min-width: 100%;\n max-height: 300px;\n overflow-y: auto;\n}\n\n.hb-select__menu {\n margin: 0;\n padding: 6px 0;\n list-style: none;\n}\n\n.hb-select__menu-item {\n display: flex;\n align-items: center;\n padding: 8px 20px;\n font-size: var(--hb-select-font-size);\n color: var(--hb-select-text-color);\n cursor: pointer;\n transition: background-color 0.2s;\n}\n\n.hb-select__menu-item:hover:not(.hb-select__menu-item--disabled):not(.hb-select__menu-item--divided) {\n background-color: var(--hb-fill-color-light, #f5f7fa);\n}\n\n.hb-select__menu-item--selected {\n color: var(--hb-color-primary);\n font-weight: 600;\n}\n\n.hb-select__menu-item--disabled {\n color: var(--hb-color-text-disabled, #c0c4cc);\n cursor: not-allowed;\n}\n\n.hb-select__menu-item--divided {\n border-top: 1px solid var(--hb-border-color-lighter, #e4e7ed);\n margin-top: 6px;\n padding-top: 6px;\n}\n\n.hb-select__menu-item--empty {\n color: var(--hb-select-placeholder-color);\n cursor: default;\n}\n\n.hb-select__menu-item-checkbox {\n margin-right: 8px;\n width: 14px;\n height: 14px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--hb-color-primary, #1677ff);\n}\n\n.hb-select__menu-item-checkbox svg {\n width: 100%;\n height: 100%;\n}\n\n.hb-select__menu-item--create {\n color: var(--hb-color-primary, #1677ff);\n font-weight: 500;\n}\n\n.hb-select__menu-item--create:hover {\n background-color: var(--hb-color-primary-bg, #e6f4ff);\n}\n\n.hb-select__menu-item-label {\n flex: 1;\n}\n\n.hb-select--small {\n font-size: 12px;\n}\n\n.hb-select--small .hb-select__input {\n height: 24px;\n line-height: 24px;\n font-size: 12px;\n padding: 0 25px 0 12px;\n}\n\n.hb-select--large {\n font-size: 16px;\n}\n\n.hb-select--large .hb-select__input {\n height: 40px;\n line-height: 40px;\n font-size: 16px;\n padding: 0 35px 0 18px;\n}\n\n.hb-select--disabled {\n cursor: not-allowed;\n}\n\n.hb-select--disabled .hb-select__input {\n background-color: var(--hb-fill-color-light, #f5f7fa);\n border-color: var(--hb-select-border-color);\n color: var(--hb-color-text-disabled, #c0c4cc);\n cursor: not-allowed;\n}\n","import { Component, h, Prop, Event, EventEmitter, State, Element, Watch } from '@stencil/core';\nimport { createClickOutsideHandler } from '../../utils/click-outside';\nimport { handleListKeyboard, activationClickHandler } from '../../utils/a11y';\nimport { getVirtualRange, getOffsetTop, getTotalHeight } from '../../utils/virtual-scroll';\n\nexport interface SelectOption {\n value: string | number;\n label: string;\n disabled?: boolean;\n divided?: boolean;\n}\n\n/**\n * Select 选择器组件\n * 当选项过多时,使用下拉菜单展示并选择内容\n */\n@Component({\n tag: 'hb-select',\n styleUrl: 'select.css',\n shadow: true,\n})\nexport class Select {\n @Element() el: HTMLElement;\n\n /**\n * 绑定值\n */\n @Prop({ mutable: true }) modelValue?: string | number | (string | number)[];\n\n /**\n * 可选项数据源\n */\n @Prop() options: SelectOption[] = [];\n\n /**\n * 输入框占位文本\n */\n @Prop() placeholder: string = '请选择';\n\n /**\n * 是否禁用\n * @default false\n */\n @Prop() disabled: boolean = false;\n\n /**\n * 输入框尺寸\n */\n @Prop() size: 'large' | 'default' | 'small' = 'default';\n\n /**\n * 是否可清空\n * @default false\n */\n @Prop() clearable: boolean = false;\n\n /**\n * 是否多选\n * @default false\n */\n @Prop() multiple: boolean = false;\n\n /**\n * 是否可搜索\n * @default false\n */\n @Prop() filterable: boolean = false;\n\n /**\n * 自定义过滤方法\n */\n @Prop() filterMethod?: (query: string) => void;\n\n /**\n * 是否默认展开\n * @default false\n */\n @Prop() defaultFirstOption: boolean = false;\n\n /**\n * 是否允许创建新条目\n * @default false\n */\n @Prop() allowCreate: boolean = false;\n\n /**\n * 多选时是否将选中值按文字的形式展示\n * @default false\n */\n @Prop() collapseTags: boolean = false;\n\n /**\n * 多选时最多显示多少个tag\n */\n @Prop() maxCollapseTags?: number;\n\n /**\n * V1:是否开启虚拟滚动(1000+ 选项时推荐)。默认 false。\n * 开启后下拉仅渲染可见窗口内的选项,DOM 节点数恒定。\n */\n @Prop() virtual: boolean = false;\n\n /**\n * V1:下拉最大高度(px)。virtual=true 时必填(定义视口高度)。默认 256。\n */\n @Prop() dropdownMaxHeight: number = 256;\n\n /**\n * V1:虚拟滚动每项预估高度(px)。默认 34。\n */\n @Prop() virtualItemHeight: number = 34;\n\n @State() isOpen: boolean = false;\n @State() inputValue: string = '';\n @State() searchValue: string = '';\n @State() filteredOptions: SelectOption[] = [];\n /** 键盘高亮的选项索引(-1 表示无) */\n @State() activeOptionIndex: number = -1;\n /** V1:下拉滚动位置(px),驱动虚拟滚动可见窗口重算 */\n @State() dropdownScrollTop: number = 0;\n\n /** V1:下拉滚动回调 */\n private handleDropdownScroll = (e: Event) => {\n const target = e.target as HTMLElement;\n this.dropdownScrollTop = target.scrollTop;\n };\n\n /**\n * O4:实例级稳定 id,用于 combobox 的 aria-controls / aria-activedescendant 关联,\n * 让读屏在键盘导航时播报当前高亮项。\n */\n private listboxId = `hb-select-listbox-${Math.random().toString(36).slice(2, 11)}`;\n\n /**\n * 值改变事件\n */\n @Event() hbChange: EventEmitter<string | number | (string | number)[]>;\n\n /**\n * 下拉框出现/隐藏时触发\n */\n @Event() hbVisibleChange: EventEmitter<boolean>;\n\n private clickOutside = createClickOutsideHandler({\n host: null as any,\n isOpen: () => this.isOpen,\n onClose: () => {\n this.isOpen = false;\n this.hbVisibleChange.emit(false);\n },\n });\n\n componentDidLoad() {\n this.clickOutside = createClickOutsideHandler({\n host: this.el,\n isOpen: () => this.isOpen,\n onClose: () => {\n this.isOpen = false;\n this.hbVisibleChange.emit(false);\n },\n });\n this.clickOutside.connect();\n this.updateInputValue();\n if (this.filterable) {\n this.filteredOptions = this.options;\n }\n }\n\n disconnectedCallback() {\n this.clickOutside.disconnect();\n }\n\n @Watch('modelValue')\n handleValueChange() {\n this.updateInputValue();\n }\n\n @Watch('options')\n handleOptionsChange() {\n if (this.filterable) {\n this.filteredOptions = this.options;\n }\n }\n\n private updateInputValue() {\n if (!this.modelValue) {\n this.inputValue = '';\n return;\n }\n\n if (this.multiple && Array.isArray(this.modelValue)) {\n const labels = this.modelValue.map(val => {\n const option = this.options.find(opt => opt.value === val);\n return option ? option.label : String(val);\n });\n this.inputValue = labels.join(', ');\n } else {\n const option = this.options.find(opt => opt.value === this.modelValue);\n this.inputValue = option ? option.label : String(this.modelValue);\n }\n }\n\n private handleInputClick = () => {\n if (this.disabled) return;\n this.isOpen = !this.isOpen;\n if (this.isOpen) {\n // defaultFirstOption=true:打开时自动高亮第一个可选(非禁用)项\n this.activeOptionIndex = this.defaultFirstOption\n ? Math.max(\n -1,\n this.options.findIndex(o => !o.disabled),\n )\n : -1;\n }\n this.hbVisibleChange.emit(this.isOpen);\n };\n\n private handleWrapperKeydown = (e: KeyboardEvent) => {\n if (this.disabled) return;\n const displayOptions = this.filterable ? this.filteredOptions : this.options;\n\n if (!this.isOpen) {\n // 关闭态:Enter / Space / 方向键 展开\n if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar' || e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n e.preventDefault();\n this.isOpen = true;\n this.activeOptionIndex = -1;\n this.hbVisibleChange.emit(true);\n }\n return;\n }\n\n const action = handleListKeyboard(e, {\n activeIndex: this.activeOptionIndex,\n itemCount: displayOptions.length,\n loop: true,\n });\n switch (action.type) {\n case 'navigate':\n e.preventDefault();\n this.activeOptionIndex = action.index;\n break;\n case 'select': {\n e.preventDefault();\n const opt = displayOptions[action.index];\n if (opt && !opt.disabled) this.handleSelect(opt);\n break;\n }\n case 'close':\n e.preventDefault();\n this.isOpen = false;\n this.hbVisibleChange.emit(false);\n break;\n default:\n break;\n }\n };\n\n private handleSelect = (option: SelectOption) => {\n if (option.disabled) return;\n\n if (this.multiple) {\n const currentValue = (this.modelValue as (string | number)[]) || [];\n const index = currentValue.indexOf(option.value);\n\n if (index > -1) {\n currentValue.splice(index, 1);\n } else {\n currentValue.push(option.value);\n }\n\n this.modelValue = [...currentValue];\n } else {\n this.modelValue = option.value;\n this.isOpen = false;\n this.hbVisibleChange.emit(false);\n }\n\n this.updateInputValue();\n this.hbChange.emit(this.modelValue);\n };\n\n private handleClear = (e: Event) => {\n e.stopPropagation();\n this.modelValue = this.multiple ? [] : undefined;\n this.inputValue = '';\n this.isOpen = false;\n this.hbChange.emit(this.modelValue);\n this.hbVisibleChange.emit(false);\n };\n\n private handleSearch = (e: Event) => {\n const target = e.target as HTMLInputElement;\n this.searchValue = target.value;\n\n if (this.filterMethod) {\n this.filterMethod(target.value);\n } else {\n this.filteredOptions = this.options.filter(opt => opt.label.toLowerCase().includes(target.value.toLowerCase()));\n }\n };\n\n private isSelected(option: SelectOption): boolean {\n if (this.multiple && Array.isArray(this.modelValue)) {\n return this.modelValue.includes(option.value);\n }\n return this.modelValue === option.value;\n }\n\n /**\n * allowCreate + filterable:当用户输入的文本在已有选项中不存在时,\n * 渲染一个\"创建 xxx\"项。返回待创建的文本(已 trim);无需创建返回 null。\n */\n private get createOption(): SelectOption | null {\n if (!this.allowCreate || !this.filterable || !this.isOpen) return null;\n const q = this.searchValue.trim();\n if (!q) return null;\n const exists = this.options.some(o => String(o.label).toLowerCase() === q.toLowerCase() || String(o.value).toLowerCase() === q.toLowerCase());\n if (exists) return null;\n return { value: q, label: q };\n }\n\n private handleCreate = () => {\n const opt = this.createOption;\n if (!opt) return;\n if (this.multiple) {\n const arr = ((this.modelValue as (string | number)[]) || []).slice();\n if (!arr.includes(opt.value)) arr.push(opt.value);\n this.modelValue = arr;\n } else {\n this.modelValue = opt.value;\n this.isOpen = false;\n this.hbVisibleChange.emit(false);\n }\n this.searchValue = '';\n this.filteredOptions = this.options;\n this.updateInputValue();\n this.hbChange.emit(this.modelValue);\n };\n\n /** 渲染单个选项 <li>(普通 + 虚拟滚动共用,V1 提取) */\n private renderOption(option: SelectOption, index: number) {\n return (\n <li\n id={`${this.listboxId}-opt-${index}`}\n class={{\n 'hb-select__menu-item': true,\n 'hb-select__menu-item--selected': this.isSelected(option),\n 'hb-select__menu-item--disabled': option.disabled,\n 'hb-select__menu-item--divided': option.divided,\n 'hb-select__menu-item--active': index === this.activeOptionIndex,\n }}\n style={this.virtual ? { height: `${this.virtualItemHeight}px` } : undefined}\n role=\"option\"\n aria-selected={this.isSelected(option) ? 'true' : 'false'}\n aria-disabled={option.disabled ? 'true' : undefined}\n onClick={() => this.handleSelect(option)}\n >\n {this.multiple && (\n <span class=\"hb-select__menu-item-checkbox\" aria-hidden=\"true\">\n {this.isSelected(option) ? (\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width={3} stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M5 12l5 5L20 7\" />\n </svg>\n ) : null}\n </span>\n )}\n <span class=\"hb-select__menu-item-label\">{option.label}</span>\n </li>\n );\n }\n\n render() {\n const displayOptions = this.filterable ? this.filteredOptions : this.options;\n const showClear = this.clearable && this.modelValue !== undefined && (this.multiple ? (this.modelValue as any[]).length > 0 : true);\n\n return (\n <div\n class={{\n 'hb-select': true,\n 'hb-select--open': this.isOpen,\n 'hb-select--disabled': this.disabled,\n [`hb-select--${this.size}`]: true,\n }}\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={this.isOpen ? 'true' : 'false'}\n aria-controls={this.isOpen ? this.listboxId : undefined}\n aria-activedescendant={this.isOpen && this.activeOptionIndex >= 0 ? `${this.listboxId}-opt-${this.activeOptionIndex}` : undefined}\n >\n <div class=\"hb-select__input-wrapper\" onClick={this.handleInputClick} onKeyDown={this.handleWrapperKeydown}>\n {this.multiple && Array.isArray(this.modelValue) && this.modelValue.length > 0 ? (\n <div class=\"hb-select__tags\">\n {this.modelValue.slice(0, this.collapseTags && this.maxCollapseTags ? this.maxCollapseTags : undefined).map(val => {\n const option = this.options.find(opt => opt.value === val);\n return (\n <span class=\"hb-select__tag\">\n <span class=\"hb-select__tag-text\">{option ? option.label : val}</span>\n <span\n class=\"hb-select__tag-close\"\n role=\"button\"\n aria-label=\"移除标签\"\n tabIndex={0}\n onClick={e => {\n e.stopPropagation();\n this.handleSelect(option || { value: val, label: String(val) });\n }}\n onKeyDown={activationClickHandler}\n >\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width={2} stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M6 6l12 12M18 6L6 18\" />\n </svg>\n </span>\n </span>\n );\n })}\n {this.collapseTags && this.maxCollapseTags && this.modelValue.length > this.maxCollapseTags && (\n <span class=\"hb-select__tag\">\n <span class=\"hb-select__tag-text\">+{this.modelValue.length - this.maxCollapseTags}</span>\n </span>\n )}\n </div>\n ) : (\n <input\n type=\"text\"\n class=\"hb-select__input\"\n placeholder={this.placeholder}\n value={this.filterable && this.isOpen ? this.searchValue : this.inputValue}\n disabled={this.disabled}\n readonly={!this.filterable || !this.isOpen}\n onInput={this.handleSearch}\n aria-haspopup=\"listbox\"\n aria-expanded={this.isOpen ? 'true' : 'false'}\n role=\"combobox\"\n />\n )}\n <span class=\"hb-select__suffix\">\n {showClear && (\n <span class=\"hb-select__clear\" role=\"button\" aria-label=\"清空\" tabIndex={0} onClick={this.handleClear} onKeyDown={activationClickHandler}>\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width={2} stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M6 6l12 12M18 6L6 18\" />\n </svg>\n </span>\n )}\n <span class=\"hb-select__arrow\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width={2} stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M6 9l6 6 6-6\" />\n </svg>\n </span>\n </span>\n </div>\n {this.isOpen && (\n <div class=\"hb-select__dropdown\">\n <ul\n class=\"hb-select__menu\"\n role=\"listbox\"\n id={this.listboxId}\n // V1:虚拟滚动时滚动容器限高 + onScroll 更新可见窗口\n style={this.virtual ? { maxHeight: `${this.dropdownMaxHeight}px`, overflowY: 'auto' } : undefined}\n onScroll={this.virtual ? this.handleDropdownScroll : undefined}\n >\n {/* allowCreate:用户输入文本不存在时,渲染创建项(置顶) */}\n {this.createOption && (\n <li class={{ 'hb-select__menu-item': true, 'hb-select__menu-item--create': true }} role=\"option\" aria-selected=\"false\" onClick={this.handleCreate}>\n <span class=\"hb-select__menu-item-label\">创建「{this.createOption.label}」</span>\n </li>\n )}\n {displayOptions.length === 0 && !this.createOption ? (\n <li class=\"hb-select__menu-item hb-select__menu-item--empty\" aria-disabled=\"true\">\n 无数据\n </li>\n ) : this.virtual ? (\n // V1:虚拟滚动——仅渲染可见窗口 + 顶部撑高 spacer\n <div style={{ height: `${getTotalHeight(displayOptions.length, this.virtualItemHeight)}px`, position: 'relative' }}>\n <div style={{ transform: `translateY(${getOffsetTop(getVirtualRange({ total: displayOptions.length, itemHeight: this.virtualItemHeight, viewportHeight: this.dropdownMaxHeight, scrollTop: this.dropdownScrollTop }).startIndex, this.virtualItemHeight)}px)` }}>\n {displayOptions\n .slice(\n getVirtualRange({ total: displayOptions.length, itemHeight: this.virtualItemHeight, viewportHeight: this.dropdownMaxHeight, scrollTop: this.dropdownScrollTop }).startIndex,\n getVirtualRange({ total: displayOptions.length, itemHeight: this.virtualItemHeight, viewportHeight: this.dropdownMaxHeight, scrollTop: this.dropdownScrollTop }).endIndex,\n )\n .map((option, i) => {\n const absIndex = getVirtualRange({ total: displayOptions.length, itemHeight: this.virtualItemHeight, viewportHeight: this.dropdownMaxHeight, scrollTop: this.dropdownScrollTop }).startIndex + i;\n return this.renderOption(option, absIndex);\n })}\n </div>\n </div>\n ) : (\n displayOptions.map((option, index) => this.renderOption(option, index))\n )}\n </ul>\n </div>\n )}\n </div>\n );\n }\n}\n"],"version":3}