@kne/react-filter 1.0.5 → 1.0.6
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.
- package/README.md +280 -62
- package/dist/index.css +38 -3
- package/dist/index.css.map +1 -1
- package/dist/index.js +409 -97
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +403 -92
- package/dist/index.modern.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -95,6 +95,9 @@ function MyComponent() {
|
|
|
95
95
|
| `DateRangePickerFilterItem` | 日期范围筛选 |
|
|
96
96
|
| `TypeDateRangePickerFilterItem` | 类型日期范围筛选（日/周/月切换） |
|
|
97
97
|
| `SuperSelectFilterItem` | 通用选择器筛选（单选/多选/搜索/全选） |
|
|
98
|
+
| `SelectTableListFilterItem` | 表格选择器筛选（多列数据展示） |
|
|
99
|
+
| `SelectTreeFilterItem` | 树形选择器筛选（层级数据） |
|
|
100
|
+
| `SelectCascaderFilterItem` | 级联选择器筛选（父子关联、搜索过滤） |
|
|
98
101
|
| `SelectFunctionFilterItem` | 职能筛选（多级数据、拼音搜索） |
|
|
99
102
|
| `SelectIndustryFilterItem` | 行业筛选（多级数据、拼音搜索） |
|
|
100
103
|
| `SelectAddressFilterItem` | 城市筛选（国内外城市搜索） |
|
|
@@ -140,7 +143,7 @@ const {
|
|
|
140
143
|
SelectIndustryFilterItem, SelectAddressFilterItem
|
|
141
144
|
} = fields;
|
|
142
145
|
const { Flex, Button, message } = antd;
|
|
143
|
-
const { useState } = React;
|
|
146
|
+
const { useState, useRef, useEffect } = React;
|
|
144
147
|
|
|
145
148
|
const departmentOptions = [
|
|
146
149
|
{ value: 'tech', label: '技术研发部' },
|
|
@@ -151,8 +154,70 @@ const departmentOptions = [
|
|
|
151
154
|
{ value: 'marketing', label: '市场营销部' }
|
|
152
155
|
];
|
|
153
156
|
|
|
157
|
+
const filterList = [
|
|
158
|
+
{
|
|
159
|
+
type: InputFilterItem,
|
|
160
|
+
props: { name: 'keyword', label: '关键词', placeholder: '请输入关键词搜索' }
|
|
161
|
+
},
|
|
162
|
+
{
|
|
163
|
+
type: NumberRangeFilterItem,
|
|
164
|
+
props: { name: 'amount', label: '金额', unit: '元', min: 0, max: 999999 }
|
|
165
|
+
},
|
|
166
|
+
{
|
|
167
|
+
type: DatePickerFilterItem,
|
|
168
|
+
props: { name: 'createTime', label: '创建时间', format: 'YYYY-MM-DD' }
|
|
169
|
+
},
|
|
170
|
+
{
|
|
171
|
+
type: DateRangePickerFilterItem,
|
|
172
|
+
props: { name: 'dateRange', label: '日期范围', format: 'YYYY-MM-DD' }
|
|
173
|
+
},
|
|
174
|
+
{
|
|
175
|
+
type: TypeDateRangePickerFilterItem,
|
|
176
|
+
props: { name: 'typeDateRange', label: '快捷日期' }
|
|
177
|
+
},
|
|
178
|
+
{
|
|
179
|
+
type: SuperSelectFilterItem,
|
|
180
|
+
props: { name: 'department', label: '部门', options: departmentOptions }
|
|
181
|
+
},
|
|
182
|
+
{
|
|
183
|
+
type: SelectFunctionFilterItem,
|
|
184
|
+
props: { name: 'function', label: '职能' }
|
|
185
|
+
},
|
|
186
|
+
{
|
|
187
|
+
type: SelectIndustryFilterItem,
|
|
188
|
+
props: { name: 'industry', label: '行业' }
|
|
189
|
+
},
|
|
190
|
+
{
|
|
191
|
+
type: SelectAddressFilterItem,
|
|
192
|
+
props: { name: 'city', label: '城市' }
|
|
193
|
+
}
|
|
194
|
+
];
|
|
195
|
+
|
|
196
|
+
const ContainerWidthIndicator = ({ containerRef }) => {
|
|
197
|
+
const [width, setWidth] = useState(0);
|
|
198
|
+
|
|
199
|
+
useEffect(() => {
|
|
200
|
+
const el = containerRef.current;
|
|
201
|
+
if (!el) return undefined;
|
|
202
|
+
|
|
203
|
+
const update = () => setWidth(Math.round(el.clientWidth));
|
|
204
|
+
update();
|
|
205
|
+
|
|
206
|
+
const observer = new ResizeObserver(update);
|
|
207
|
+
observer.observe(el);
|
|
208
|
+
return () => observer.disconnect();
|
|
209
|
+
}, [containerRef]);
|
|
210
|
+
|
|
211
|
+
return (
|
|
212
|
+
<div style={{ fontSize: 12, color: '#999', marginBottom: 4 }}>
|
|
213
|
+
中间容器宽度: {width}px（观察收起/更多时是否持续增大或跳动）
|
|
214
|
+
</div>
|
|
215
|
+
);
|
|
216
|
+
};
|
|
217
|
+
|
|
154
218
|
const BaseExample = () => {
|
|
155
219
|
const [filterValue, setFilterValue] = useState([]);
|
|
220
|
+
const filterContainerRef = useRef(null);
|
|
156
221
|
|
|
157
222
|
const handleSearch = () => {
|
|
158
223
|
const params = Filter.getFilterValue(filterValue);
|
|
@@ -161,54 +226,35 @@ const BaseExample = () => {
|
|
|
161
226
|
};
|
|
162
227
|
|
|
163
228
|
return (
|
|
164
|
-
<Flex vertical gap={16}>
|
|
165
|
-
<
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
}
|
|
178
|
-
{
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
{
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
type: SuperSelectFilterItem,
|
|
194
|
-
props: { name: 'department', label: '部门', options: departmentOptions }
|
|
195
|
-
},
|
|
196
|
-
{
|
|
197
|
-
type: SelectFunctionFilterItem,
|
|
198
|
-
props: { name: 'function', label: '职能' }
|
|
199
|
-
},
|
|
200
|
-
{
|
|
201
|
-
type: SelectIndustryFilterItem,
|
|
202
|
-
props: { name: 'industry', label: '行业' }
|
|
203
|
-
},
|
|
204
|
-
{
|
|
205
|
-
type: SelectAddressFilterItem,
|
|
206
|
-
props: { name: 'city', label: '城市' }
|
|
207
|
-
}
|
|
208
|
-
]
|
|
209
|
-
]}
|
|
210
|
-
displayLine={1}
|
|
211
|
-
/>
|
|
229
|
+
<Flex vertical gap={16} style={{ width: '100%' }}>
|
|
230
|
+
<div style={{ width: '100%' }}>
|
|
231
|
+
<ContainerWidthIndicator containerRef={filterContainerRef} />
|
|
232
|
+
<div
|
|
233
|
+
style={{
|
|
234
|
+
width: '100%',
|
|
235
|
+
display: 'flex',
|
|
236
|
+
alignItems: 'flex-start',
|
|
237
|
+
gap: 8
|
|
238
|
+
}}
|
|
239
|
+
>
|
|
240
|
+
<Button>左侧操作</Button>
|
|
241
|
+
<div
|
|
242
|
+
ref={filterContainerRef}
|
|
243
|
+
style={{
|
|
244
|
+
flex: 1,
|
|
245
|
+
minWidth: 0,
|
|
246
|
+
overflow: 'hidden',
|
|
247
|
+
border: '1px dashed #d9d9d9',
|
|
248
|
+
borderRadius: 4
|
|
249
|
+
}}
|
|
250
|
+
>
|
|
251
|
+
<Filter value={filterValue} onChange={setFilterValue} list={filterList} />
|
|
252
|
+
</div>
|
|
253
|
+
<Button type="primary" onClick={handleSearch}>
|
|
254
|
+
搜索
|
|
255
|
+
</Button>
|
|
256
|
+
</div>
|
|
257
|
+
</div>
|
|
212
258
|
<Flex gap={8}>
|
|
213
259
|
<span>当前筛选值:</span>
|
|
214
260
|
<pre style={{ margin: 0, background: '#f5f5f5', padding: 8, borderRadius: 4, flex: 1 }}>{JSON.stringify(filterValue, null, 2)}</pre>
|
|
@@ -333,7 +379,7 @@ render(<AdvancedFilterExample />);
|
|
|
333
379
|
```
|
|
334
380
|
|
|
335
381
|
- 筛选字段组件
|
|
336
|
-
- 展示所有筛选字段组件类型，包括输入筛选、数字区间、日期选择、下拉选择以及 SuperSelect
|
|
382
|
+
- 展示所有筛选字段组件类型，包括输入筛选、数字区间、日期选择、下拉选择以及 SuperSelect 选择器（列表/表格/树形/级联）和业务选择器（职能/行业/城市）
|
|
337
383
|
- _ReactFilter(@kne/current-lib_react-filter)[import * as _ReactFilter from "@kne/react-filter"],(@kne/current-lib_react-filter/dist/index.css),antd(antd)
|
|
338
384
|
|
|
339
385
|
```jsx
|
|
@@ -341,8 +387,8 @@ const { fields, PopoverItem } = _ReactFilter;
|
|
|
341
387
|
const {
|
|
342
388
|
InputFilterItem, NumberRangeFilterItem, DatePickerFilterItem,
|
|
343
389
|
DateRangePickerFilterItem, TypeDateRangePickerFilterItem,
|
|
344
|
-
SuperSelectFilterItem,
|
|
345
|
-
SelectIndustryFilterItem, SelectAddressFilterItem
|
|
390
|
+
SuperSelectFilterItem, SelectTableListFilterItem, SelectTreeFilterItem, SelectCascaderFilterItem,
|
|
391
|
+
SelectFunctionFilterItem, SelectIndustryFilterItem, SelectAddressFilterItem
|
|
346
392
|
} = fields;
|
|
347
393
|
const { Input, InputNumber, Space, Flex, Select, Divider, Tag } = antd;
|
|
348
394
|
const { useState } = React;
|
|
@@ -512,6 +558,120 @@ const SuperSelectExample = () => {
|
|
|
512
558
|
);
|
|
513
559
|
};
|
|
514
560
|
|
|
561
|
+
// SuperSelect 其他选择组件示例（表格/树形/级联）
|
|
562
|
+
const employeeOptions = [
|
|
563
|
+
{ id: 'emp_1', name: '张三', department: '技术研发部', position: '工程师' },
|
|
564
|
+
{ id: 'emp_2', name: '李四', department: '产品设计部', position: '设计师' },
|
|
565
|
+
{ id: 'emp_3', name: '王五', department: '运营部', position: '经理' },
|
|
566
|
+
{ id: 'emp_4', name: '赵六', department: '市场部', position: '专员' },
|
|
567
|
+
{ id: 'emp_5', name: '钱七', department: '技术研发部', position: '工程师' }
|
|
568
|
+
];
|
|
569
|
+
|
|
570
|
+
const employeeColumns = [
|
|
571
|
+
{ name: 'name', title: '姓名', span: 8 },
|
|
572
|
+
{ name: 'department', title: '部门', span: 8 },
|
|
573
|
+
{ name: 'position', title: '职位', span: 8 }
|
|
574
|
+
];
|
|
575
|
+
|
|
576
|
+
const organizationTree = [
|
|
577
|
+
{ id: 'root', parentId: null, name: '集团总部' },
|
|
578
|
+
{ id: 'tech', parentId: 'root', name: '技术中心' },
|
|
579
|
+
{ id: 'tech-fe', parentId: 'tech', name: '前端开发组' },
|
|
580
|
+
{ id: 'tech-be', parentId: 'tech', name: '后端开发组' },
|
|
581
|
+
{ id: 'product', parentId: 'root', name: '产品中心' },
|
|
582
|
+
{ id: 'product-design', parentId: 'product', name: '产品设计组' }
|
|
583
|
+
];
|
|
584
|
+
|
|
585
|
+
const regionData = [
|
|
586
|
+
{
|
|
587
|
+
id: 'beijing',
|
|
588
|
+
name: '北京市',
|
|
589
|
+
children: [
|
|
590
|
+
{ id: 'haidian', name: '海淀区' },
|
|
591
|
+
{ id: 'chaoyang', name: '朝阳区' }
|
|
592
|
+
]
|
|
593
|
+
},
|
|
594
|
+
{
|
|
595
|
+
id: 'guangdong',
|
|
596
|
+
name: '广东省',
|
|
597
|
+
children: [
|
|
598
|
+
{
|
|
599
|
+
id: 'guangzhou',
|
|
600
|
+
name: '广州市',
|
|
601
|
+
children: [
|
|
602
|
+
{ id: 'tianhe', name: '天河区' },
|
|
603
|
+
{ id: 'yuexiu', name: '越秀区' }
|
|
604
|
+
]
|
|
605
|
+
},
|
|
606
|
+
{
|
|
607
|
+
id: 'shenzhen',
|
|
608
|
+
name: '深圳市',
|
|
609
|
+
children: [
|
|
610
|
+
{ id: 'nanshan', name: '南山区' },
|
|
611
|
+
{ id: 'futian', name: '福田区' }
|
|
612
|
+
]
|
|
613
|
+
}
|
|
614
|
+
]
|
|
615
|
+
}
|
|
616
|
+
];
|
|
617
|
+
|
|
618
|
+
const SuperSelectVariantsExample = () => {
|
|
619
|
+
const [values, setValues] = useState({});
|
|
620
|
+
|
|
621
|
+
return (
|
|
622
|
+
<Flex vertical gap={24}>
|
|
623
|
+
<Flex align="center" gap={8}>
|
|
624
|
+
<h4 style={{ margin: 0 }}>SuperSelect 其他选择组件</h4>
|
|
625
|
+
<Tag color="blue">表格</Tag>
|
|
626
|
+
<Tag color="blue">树形</Tag>
|
|
627
|
+
<Tag color="blue">级联</Tag>
|
|
628
|
+
</Flex>
|
|
629
|
+
<p style={{ margin: 0, color: '#666', fontSize: 12 }}>
|
|
630
|
+
基于 @kne/super-select 的表格、树形、级联选择器筛选项，适用于多列数据、层级结构、级联数据等场景
|
|
631
|
+
</p>
|
|
632
|
+
<Flex wrap gap={16}>
|
|
633
|
+
<SelectTableListFilterItem
|
|
634
|
+
label="员工（表格多选）"
|
|
635
|
+
value={values.employee}
|
|
636
|
+
onChange={(val) => setValues(prev => ({ ...prev, employee: val }))}
|
|
637
|
+
options={employeeOptions}
|
|
638
|
+
columns={employeeColumns}
|
|
639
|
+
valueKey="id"
|
|
640
|
+
labelKey="name"
|
|
641
|
+
/>
|
|
642
|
+
<SelectTreeFilterItem
|
|
643
|
+
label="部门（树形多选）"
|
|
644
|
+
value={values.department}
|
|
645
|
+
onChange={(val) => setValues(prev => ({ ...prev, department: val }))}
|
|
646
|
+
options={organizationTree}
|
|
647
|
+
valueKey="id"
|
|
648
|
+
labelKey="name"
|
|
649
|
+
/>
|
|
650
|
+
<SelectCascaderFilterItem
|
|
651
|
+
label="地区（级联多选）"
|
|
652
|
+
value={values.region}
|
|
653
|
+
onChange={(val) => setValues(prev => ({ ...prev, region: val }))}
|
|
654
|
+
options={regionData}
|
|
655
|
+
valueKey="id"
|
|
656
|
+
labelKey="name"
|
|
657
|
+
/>
|
|
658
|
+
<SelectCascaderFilterItem
|
|
659
|
+
label="地区（级联单选）"
|
|
660
|
+
single
|
|
661
|
+
value={values.singleRegion}
|
|
662
|
+
onChange={(val) => setValues(prev => ({ ...prev, singleRegion: val }))}
|
|
663
|
+
options={regionData}
|
|
664
|
+
valueKey="id"
|
|
665
|
+
labelKey="name"
|
|
666
|
+
/>
|
|
667
|
+
</Flex>
|
|
668
|
+
<pre style={{ margin: 0, background: '#f5f5f5', padding: 8, borderRadius: 4 }}>
|
|
669
|
+
{JSON.stringify(values, null, 2)}
|
|
670
|
+
</pre>
|
|
671
|
+
</Flex>
|
|
672
|
+
);
|
|
673
|
+
};
|
|
674
|
+
|
|
515
675
|
// 业务选择器示例（职能/行业/城市）
|
|
516
676
|
const BusinessSelectExample = () => {
|
|
517
677
|
const [values, setValues] = useState({});
|
|
@@ -554,11 +714,19 @@ const BusinessSelectExample = () => {
|
|
|
554
714
|
);
|
|
555
715
|
};
|
|
556
716
|
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
717
|
+
const FilterFieldsDemo = () => (
|
|
718
|
+
<Flex vertical>
|
|
719
|
+
<FilterFieldsExample />
|
|
720
|
+
<Divider />
|
|
721
|
+
<SuperSelectExample />
|
|
722
|
+
<Divider />
|
|
723
|
+
<SuperSelectVariantsExample />
|
|
724
|
+
<Divider />
|
|
725
|
+
<BusinessSelectExample />
|
|
726
|
+
</Flex>
|
|
727
|
+
);
|
|
728
|
+
|
|
729
|
+
render(<FilterFieldsDemo />);
|
|
562
730
|
|
|
563
731
|
```
|
|
564
732
|
|
|
@@ -948,11 +1116,12 @@ import { PopoverItem } from '@kne/react-filter';
|
|
|
948
1116
|
|
|
949
1117
|
| 属性 | 类型 | 默认值 | 说明 |
|
|
950
1118
|
| ----------- | -------------- | -------- | -------------- |
|
|
951
|
-
| list
|
|
952
|
-
| displayLine
|
|
953
|
-
|
|
|
954
|
-
|
|
|
955
|
-
|
|
|
1119
|
+
| list | `Array` | `[]` | 筛选项配置数组，默认支持单层数组，也兼容双层数组 |
|
|
1120
|
+
| displayLine | `number` | `1` | 双层数组模式下默认展示行数 |
|
|
1121
|
+
| visibleCountStrategy | `'asc' \| 'desc'` | `'asc'` | 单层数组模式下可见项计算策略，`asc` 从少往多累加，`desc` 从多往少递减 |
|
|
1122
|
+
| label | `string` | `'筛选'` | 标题 |
|
|
1123
|
+
| extra | `ReactNode` | - | 额外操作区域 |
|
|
1124
|
+
| className | `string` | - | 自定义类名 |
|
|
956
1125
|
|
|
957
1126
|
---
|
|
958
1127
|
|
|
@@ -1095,6 +1264,55 @@ import { SuperSelectFilterItem } from '@kne/react-filter';
|
|
|
1095
1264
|
|
|
1096
1265
|
> 注意：需要安装 `@kne/super-select` 依赖。
|
|
1097
1266
|
|
|
1267
|
+
#### SelectTableListFilterItem 表格选择器筛选
|
|
1268
|
+
|
|
1269
|
+
基于 `@kne/super-select` 的 `SelectTableList` 组件，适用于需要展示多列数据的筛选场景。
|
|
1270
|
+
|
|
1271
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
1272
|
+
| --------- | ---------- | ------- | ------------ |
|
|
1273
|
+
| name | `string` | - | 字段名称 |
|
|
1274
|
+
| label | `string` | - | 标签 |
|
|
1275
|
+
| options | `Array` | - | 选项数据 |
|
|
1276
|
+
| columns | `Array` | - | 表格列配置 |
|
|
1277
|
+
| valueKey | `string` | `'id'` | 值字段名 |
|
|
1278
|
+
| labelKey | `string` | `'name'`| 标签字段名 |
|
|
1279
|
+
| single | `boolean` | `false` | 是否单选 |
|
|
1280
|
+
| maxLength | `number` | - | 最多可选数量 |
|
|
1281
|
+
|
|
1282
|
+
> 注意：需要安装 `@kne/super-select` 依赖。
|
|
1283
|
+
|
|
1284
|
+
#### SelectTreeFilterItem 树形选择器筛选
|
|
1285
|
+
|
|
1286
|
+
基于 `@kne/super-select` 的 `SelectTree` 组件，适用于组织架构、分类等层级数据筛选。
|
|
1287
|
+
|
|
1288
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
1289
|
+
| --------- | ---------- | ------- | ------------ |
|
|
1290
|
+
| name | `string` | - | 字段名称 |
|
|
1291
|
+
| label | `string` | - | 标签 |
|
|
1292
|
+
| options | `Array` | - | 树形数据（含 `parentId`） |
|
|
1293
|
+
| valueKey | `string` | `'id'` | 值字段名 |
|
|
1294
|
+
| labelKey | `string` | `'name'`| 标签字段名 |
|
|
1295
|
+
| single | `boolean` | `false` | 是否单选 |
|
|
1296
|
+
| maxLength | `number` | - | 最多可选数量 |
|
|
1297
|
+
|
|
1298
|
+
> 注意：需要安装 `@kne/super-select` 依赖。
|
|
1299
|
+
|
|
1300
|
+
#### SelectCascaderFilterItem 级联选择器筛选
|
|
1301
|
+
|
|
1302
|
+
基于 `@kne/super-select` 的 `SelectCascader` 组件，支持多列菜单展示、父子关联选择、搜索过滤。
|
|
1303
|
+
|
|
1304
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
1305
|
+
| --------- | ---------- | ------- | ------------ |
|
|
1306
|
+
| name | `string` | - | 字段名称 |
|
|
1307
|
+
| label | `string` | - | 标签 |
|
|
1308
|
+
| options | `Array` | - | 级联数据（含 `children`） |
|
|
1309
|
+
| valueKey | `string` | `'id'` | 值字段名 |
|
|
1310
|
+
| labelKey | `string` | `'name'`| 标签字段名 |
|
|
1311
|
+
| single | `boolean` | `false` | 是否单选 |
|
|
1312
|
+
| maxLength | `number` | - | 最多可选数量 |
|
|
1313
|
+
|
|
1314
|
+
> 注意：需要安装 `@kne/super-select` 依赖。
|
|
1315
|
+
|
|
1098
1316
|
#### SelectFunctionFilterItem 职能筛选
|
|
1099
1317
|
|
|
1100
1318
|
基于 `@kne/super-select-plus` 的职能选择器筛选项，支持多级职能数据选择、拼音搜索。
|
package/dist/index.css
CHANGED
|
@@ -21,12 +21,17 @@
|
|
|
21
21
|
|
|
22
22
|
.kne-react-filter_khFt2 {
|
|
23
23
|
width: 100%;
|
|
24
|
+
min-width: 0;
|
|
24
25
|
padding: 8px var(--padding-width, 16px);
|
|
25
|
-
line-height: 32px;
|
|
26
26
|
border-bottom: solid 1px rgba(126, 134, 142, 0.16);
|
|
27
27
|
}
|
|
28
28
|
.kne-react-filter_khFt2 > .ant-space-item:last-child {
|
|
29
29
|
flex: 1;
|
|
30
|
+
min-width: 0;
|
|
31
|
+
}
|
|
32
|
+
.kne-react-filter_khFt2 .ant-row {
|
|
33
|
+
min-width: 0;
|
|
34
|
+
width: 100%;
|
|
30
35
|
}
|
|
31
36
|
|
|
32
37
|
@keyframes kne-react-filter_6RxjE {
|
|
@@ -102,6 +107,7 @@
|
|
|
102
107
|
font-weight: bold;
|
|
103
108
|
white-space: nowrap;
|
|
104
109
|
font-size: var(--font-size-small, 12px) !important;
|
|
110
|
+
line-height: 20px;
|
|
105
111
|
}
|
|
106
112
|
|
|
107
113
|
.kne-react-filter_Y9XTa {
|
|
@@ -109,7 +115,8 @@
|
|
|
109
115
|
align-items: center;
|
|
110
116
|
flex-wrap: wrap;
|
|
111
117
|
position: relative;
|
|
112
|
-
min-height:
|
|
118
|
+
min-height: 20px;
|
|
119
|
+
line-height: 20px;
|
|
113
120
|
gap: 8px;
|
|
114
121
|
}
|
|
115
122
|
.kne-react-filter_Y9XTa .kne-react-filter_CJ935 {
|
|
@@ -120,6 +127,22 @@
|
|
|
120
127
|
color: var(--primary-color, #1890ff);
|
|
121
128
|
}
|
|
122
129
|
|
|
130
|
+
.kne-react-filter_Ccx24 {
|
|
131
|
+
flex-wrap: nowrap;
|
|
132
|
+
}
|
|
133
|
+
.kne-react-filter_Ccx24 > * {
|
|
134
|
+
flex-shrink: 0;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.kne-react-filter_uMXzo {
|
|
138
|
+
position: absolute;
|
|
139
|
+
visibility: hidden;
|
|
140
|
+
pointer-events: none;
|
|
141
|
+
height: 0;
|
|
142
|
+
overflow: hidden;
|
|
143
|
+
flex-wrap: nowrap;
|
|
144
|
+
}
|
|
145
|
+
|
|
123
146
|
.kne-react-filter_7Ob6- {
|
|
124
147
|
line-height: 24px;
|
|
125
148
|
margin-bottom: 6px;
|
|
@@ -132,7 +155,7 @@
|
|
|
132
155
|
}
|
|
133
156
|
|
|
134
157
|
.kne-react-filter_Co4Pg {
|
|
135
|
-
height:
|
|
158
|
+
height: auto;
|
|
136
159
|
}
|
|
137
160
|
|
|
138
161
|
.kne-react-filter_JpaMr {
|
|
@@ -219,6 +242,7 @@
|
|
|
219
242
|
.kne-react-filter_qlWu6 {
|
|
220
243
|
min-width: 0;
|
|
221
244
|
width: 100%;
|
|
245
|
+
line-height: 20px;
|
|
222
246
|
}
|
|
223
247
|
|
|
224
248
|
.kne-react-filter_oaIF4 {
|
|
@@ -228,12 +252,23 @@
|
|
|
228
252
|
max-width: 100%;
|
|
229
253
|
}
|
|
230
254
|
|
|
255
|
+
.kne-react-filter_3gXxO {
|
|
256
|
+
overflow: hidden;
|
|
257
|
+
}
|
|
258
|
+
.kne-react-filter_3gXxO .kne-react-filter_Jq43Q {
|
|
259
|
+
overflow: hidden;
|
|
260
|
+
}
|
|
261
|
+
|
|
231
262
|
.kne-react-filter_Jq43Q {
|
|
232
263
|
min-width: 0;
|
|
233
264
|
width: 100%;
|
|
234
265
|
max-width: 100%;
|
|
235
266
|
}
|
|
236
267
|
|
|
268
|
+
[data-filter-more] {
|
|
269
|
+
flex: 0 0 auto;
|
|
270
|
+
}
|
|
271
|
+
|
|
237
272
|
.kne-react-filter_BdfSI {
|
|
238
273
|
display: none;
|
|
239
274
|
}
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["style.module.scss"],"names":[],"mappings":"AAAA;EACE,qBAAqB;EACrB,uBAAuB;EACvB,kDAAkD;AACpD;AACA;EACE,eAAe;AACjB;;AAEA;EACE,cAAc;EACd,kDAAkD;EAClD,qBAAqB;AACvB;;AAEA;EACE,cAAc;EACd,kDAAkD;EAClD,sBAAsB;AACxB;;AAEA;EACE,WAAW;EACX,uCAAuC;EACvC,
|
|
1
|
+
{"version":3,"sources":["style.module.scss"],"names":[],"mappings":"AAAA;EACE,qBAAqB;EACrB,uBAAuB;EACvB,kDAAkD;AACpD;AACA;EACE,eAAe;AACjB;;AAEA;EACE,cAAc;EACd,kDAAkD;EAClD,qBAAqB;AACvB;;AAEA;EACE,cAAc;EACd,kDAAkD;EAClD,sBAAsB;AACxB;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,uCAAuC;EACvC,kDAAkD;AACpD;AACA;EACE,OAAO;EACP,YAAY;AACd;AACA;EACE,YAAY;EACZ,WAAW;AACb;;AAEA;EACE;IACE,aAAa;EACf;EACA;IACE,4DAA4D;EAC9D;AACF;AACA;EACE;IACE,4DAA4D;IAC5D,UAAU;EACZ;EACA;IACE,aAAa;IACb,UAAU;EACZ;AACF;AACA;EACE;IACE,UAAU;EACZ;EACA;IACE,UAAU;EACZ;AACF;AACA;EACE;IACE,UAAU;EACZ;EACA;IACE,UAAU;EACZ;AACF;AACA;EACE,SAAS;EACT,QAAQ;EACR,OAAO;EACP,MAAM;EACN,gBAAgB;EAChB,kBAAkB;EAClB,UAAU;EACV,cAAc;AAChB;;AAEA;EACE,WAAW;EACX,iBAAiB;AACnB;AACA;EACE,iBAAiB;AACnB;AACA;EACE,4CAA4C;AAC9C;AACA;EACE,OAAO;AACT;AACA;EACE,gDAAgD;AAClD;;AAEA;EACE,qDAAqD;EACrD,cAAc;EACd,kDAAkD;AACpD;;AAEA;EACE,cAAc;EACd,iBAAiB;EACjB,mBAAmB;EACnB,kDAAkD;EAClD,iBAAiB;AACnB;;AAEA;EACE,aAAa;EACb,mBAAmB;EACnB,eAAe;EACf,kBAAkB;EAClB,gBAAgB;EAChB,iBAAiB;EACjB,QAAQ;AACV;AACA;EACE,mCAAmC;EACnC,yBAAyB;AAC3B;AACA;EACE,oCAAoC;AACtC;;AAEA;EACE,iBAAiB;AACnB;AACA;EACE,cAAc;AAChB;;AAEA;EACE,kBAAkB;EAClB,kBAAkB;EAClB,oBAAoB;EACpB,SAAS;EACT,gBAAgB;EAChB,iBAAiB;AACnB;;AAEA;EACE,iBAAiB;EACjB,kBAAkB;AACpB;AACA;EACE,kDAAkD;AACpD;AACA;EACE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sB;IACtB,mBAAmB;EACrB;EACA;IACE,WAAW;IACX,YAAY;EACd;EACA;IACE,YAAY;IACZ,gBAAgB;EAClB;EACA;IACE,cAAc;EAChB;EACA;IACE,iBAAiB;EACnB;EACA;IACE,aAAa;IACb,sBAAsB;IACtB,WAAW;IACX,YAAY;EACd;EACA;IACE,mBAAmB;IACnB,mBAAmB;EACrB;EACA;IACE,cAAc;IACd,YAAY;EACd;EACA;IACE,cAAc;IACd,cAAc;IACd,gBAAgB;EAClB;EACA;IACE,gBAAgB;IAChB,gBAAgB;EAClB;EACA;IACE,iBAAiB;EACnB;EACA;IACE,aAAa;IACb,mBAAmB;IACnB,iBAAiB;IACjB,QAAQ;IACR,gBAAgB;IAChB,gBAAgB;IAChB,kBAAkB;IAClB,+BAA+B;IAC/B,qBAAqB;IACrB,iCAAiC;EACnC;EACA;IACE,aAAa;EACf;EACA;IACE,eAAe;IACf,iBAAiB;EACnB;EACA;IACE,cAAc;EAChB;EACA;IACE,UAAU;EACZ;EACA;IACE,kBAAkB;IAClB,MAAM;IACN,QAAQ;IACR,UAAU;IACV,WAAW;IACX,YAAY;IACZ,gEAAgE;IAChE,oBAAoB;EACtB;EACA;IACE,kBAAkB;IAClB,aAAa;IACb,mBAAmB;IACnB,yBAAyB;IACzB,gBAAgB;EAClB;EACA;IACE,aAAa;EACf;EACA;IACE,mBAAmB;EACrB;EACA;IACE,iBAAiB;EACnB;EACA;IACE,aAAa;EACf;EACA;IACE,kBAAkB;IAClB,SAAS;IACT,oBAAoB;IACpB,mBAAmB;IACnB,2BAA2B;IAC3B,YAAY;IACZ,UAAU;IACV,oCAAoC;IACpC,uCAAuC;IACvC,cAAc;EAChB;EACA;IACE,aAAa;EACf;EACA;IACE,mBAAmB;IACnB,gBAAgB;EAClB;EACA;IACE,aAAa;IACb,mBAAmB;IACnB,iBAAiB;IACjB,QAAQ;IACR,gBAAgB;IAChB,kBAAkB;IAClB,+BAA+B;IAC/B,qBAAqB;IACrB,iCAAiC;EACnC;EACA;IACE,aAAa;EACf;EACA;IACE,cAAc;IACd,iBAAiB;IACjB,gBAAgB;EAClB;EACA;IACE,sBAAsB;IACtB,YAAY;IACZ,eAAe;IACf,gBAAgB;EAClB;EACA;IACE,kBAAkB;IAClB,MAAM;IACN,OAAO;IACP,UAAU;IACV,WAAW;IACX,YAAY;IACZ,gEAAgE;IAChE,oBAAoB;EACtB;EACA;IACE,kBAAkB;IAClB,QAAQ;IACR,QAAQ;IACR,aAAa;IACb,mBAAmB;IACnB,yBAAyB;IACzB,WAAW;IACX,YAAY;IACZ,UAAU;IACV,SAAS;IACT,mCAAmC;IACnC,oEAAoE;IACpE,2BAA2B;IAC3B,eAAe;EACjB;EACA;IACE,WAAW;IACX,kBAAkB;IAClB,MAAM;IACN,WAAW;IACX,WAAW;IACX,YAAY;IACZ,qFAAqF;IACrF,oBAAoB;EACtB;EACA;IACE,cAAc;IACd,eAAe;IACf,cAAc;EAChB;EACA;IACE,YAAY;EACd;EACA;IACE,YAAY;IACZ,gBAAgB;IAChB,iBAAiB;IACjB,oBAAoB;IACpB,2CAA2C;IAC3C,aAAa;IACb,mBAAmB;EACrB;EACA;IACE,0BAA0B;IAC1B,kBAAkB;IAClB,sBAAsB;IACtB,YAAY;IACZ,gBAAgB;IAChB,4DAA4D;IAC5D,gBAAgB;EAClB;EACA;IACE,aAAa;IACb,sBAAsB;IACtB,WAAW;IACX,4DAA4D;IAC5D,aAAa;IACb,gBAAgB;IAChB,gBAAgB;IAChB,mFAAmF;IACnF,gBAAgB;EAClB;EACA;IACE,cAAc;IACd,aAAa;IACb,cAAc;IACd,iCAAiC;EACnC;EACA;IACE,cAAc;EAChB;EACA;IACE,YAAY;IACZ,eAAe;IACf,eAAe;EACjB;AACF;AAj2BA;EACE,aAAa;EACb,eAAe;EACf,QAAQ;EACR,gBAAgB;AAClB;;AAEA;EACE,oBAAoB;EACpB,mBAAmB;EACnB,uBAAuB;EACvB,iBAAiB;EACjB,eAAe;EACf,iBAAiB;EACjB,kBAAkB;EAClB,eAAe;EACf,oBAAoB;EACpB,YAAY;EACZ,2CAA2C;EAC3C,mCAAmC;EACnC,yBAAiB;UAAjB,iBAAiB;AACnB;AACA;EACE,2DAA2D;EAC3D,oCAAoC;AACtC;AACA;EACE,2DAA2D;EAC3D,oCAAoC;AACtC","file":"index.css","sourcesContent":[".shortcuts-container {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n padding-top: 8px;\n}\n\n.shortcut-item {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 2px 12px;\n font-size: 12px;\n line-height: 20px;\n border-radius: 4px;\n cursor: pointer;\n transition: all 0.2s;\n border: none;\n background: var(--bg-color-grey-1, #f5f5f5);\n color: var(--font-color-grey, #666);\n user-select: none;\n}\n.shortcut-item:hover {\n background: var(--primary-color-1, rgba(24, 144, 255, 0.1));\n color: var(--primary-color, #1890ff);\n}\n.shortcut-item.is-active {\n background: var(--primary-color-1, rgba(24, 144, 255, 0.1));\n color: var(--primary-color, #1890ff);\n}"]}
|