@hi-ui/query-filter 5.0.0-experimental.0 → 5.0.0-experimental.2

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 (10) hide show
  1. package/CHANGELOG.md +35 -0
  2. package/lib/cjs/FilterDrawer/index.js +31 -4
  3. package/lib/cjs/QueryFilter.js +29 -3
  4. package/lib/cjs/styles/index.scss.js +1 -1
  5. package/lib/esm/FilterDrawer/index.js +33 -6
  6. package/lib/esm/QueryFilter.js +29 -3
  7. package/lib/esm/styles/index.scss.js +1 -1
  8. package/lib/types/FilterDrawer/index.d.ts +8 -2
  9. package/lib/types/QueryFilter.d.ts +6 -1
  10. package/package.json +11 -10
package/CHANGELOG.md CHANGED
@@ -1,5 +1,40 @@
1
1
  # @hi-ui/query-filter
2
2
 
3
+ ## 5.0.0-experimental.2
4
+
5
+ ### Minor Changes
6
+
7
+ - 59cef699f: feat: 组件语义化样式改造，增加 styles 和 classNames 属性 (5.0)
8
+
9
+ ### Patch Changes
10
+
11
+ - eb17c4697: style: 修复 UI/样式问题 (5.0)
12
+ - Updated dependencies [7f204c892]
13
+ - Updated dependencies [eb17c4697]
14
+ - Updated dependencies [eb17c4697]
15
+ - Updated dependencies [c407744fe]
16
+ - Updated dependencies [ec647a5ee]
17
+ - Updated dependencies [59cef699f]
18
+ - @hi-ui/icons@5.0.0-experimental.1
19
+ - @hi-ui/core@5.0.0-experimental.1
20
+ - @hi-ui/button@5.0.0-experimental.1
21
+ - @hi-ui/drawer@5.0.0-experimental.1
22
+ - @hi-ui/form@5.0.0-experimental.1
23
+ - @hi-ui/input@5.0.0-experimental.2
24
+ - @hi-ui/tooltip@5.0.0-experimental.1
25
+ - @hi-ui/use-merge-semantic@5.0.0-experimental.0
26
+
27
+ ## 5.0.0-experimental.1
28
+
29
+ ### Patch Changes
30
+
31
+ - 8f23e9322: style: 表单类组件统一调整后缀颜色、placeholder 颜色 (5.0)
32
+ - 发布 hiui experimental 版本
33
+ - Updated dependencies [8f23e9322]
34
+ - Updated dependencies [900c6c2f0]
35
+ - Updated dependencies
36
+ - @hi-ui/input@5.0.0-experimental.1
37
+
3
38
  ## 5.0.0-experimental.0
4
39
 
5
40
  ### Major Changes
package/lib/cjs/FilterDrawer/index.js CHANGED
@@ -21,6 +21,7 @@ var Drawer = require('@hi-ui/drawer');
21
21
  var Button = require('@hi-ui/button');
22
22
  var index = require('../FilterForm/index.js');
23
23
  var context = require('../context.js');
24
+ var useMergeSemantic = require('@hi-ui/use-merge-semantic');
24
25
  function _interopDefaultCompat(e) {
25
26
  return e && _typeof(e) === 'object' && 'default' in e ? e : {
26
27
  'default': e
@@ -42,7 +43,25 @@ var FilterDrawer = function FilterDrawer(_a) {
42
43
  pinTexts = _a.pinTexts,
43
44
  onClose = _a.onClose,
44
45
  customFieldProps = _a.customFieldProps,
45
- restProps = tslib.__rest(_a, ["filterFields", "formData", "onChange", "onPinChange", "onSelect", "title", "sureText", "cancelText", "visible", "pinTexts", "onClose", "customFieldProps"]);
46
+ classNamesProp = _a.classNames,
47
+ stylesProp = _a.styles,
48
+ restProps = tslib.__rest(_a, ["filterFields", "formData", "onChange", "onPinChange", "onSelect", "title", "sureText", "cancelText", "visible", "pinTexts", "onClose", "customFieldProps", "classNames", "styles"]);
49
+ var _useGlobalContext = core.useGlobalContext(),
50
+ filterDrawerConfig = _useGlobalContext.filterDrawer;
51
+ var _useMergeSemantic = useMergeSemantic.useMergeSemantic({
52
+ classNamesList: [filterDrawerConfig === null || filterDrawerConfig === void 0 ? void 0 : filterDrawerConfig.classNames, classNamesProp],
53
+ stylesList: [filterDrawerConfig === null || filterDrawerConfig === void 0 ? void 0 : filterDrawerConfig.styles, stylesProp],
54
+ info: {
55
+ props: Object.assign(Object.assign({}, restProps), {
56
+ title: title,
57
+ visible: visibleProp,
58
+ filterFields: propsFilterFields,
59
+ formData: propsFormData
60
+ })
61
+ }
62
+ }),
63
+ classNames = _useMergeSemantic.classNames,
64
+ styles = _useMergeSemantic.styles;
46
65
  var _useState = React.useState(propsFormData),
47
66
  formData = _useState[0],
48
67
  setFormData = _useState[1];
@@ -106,12 +125,20 @@ var FilterDrawer = function FilterDrawer(_a) {
106
125
  };
107
126
  return /*#__PURE__*/React__default["default"].createElement(Drawer__default["default"], Object.assign({
108
127
  className: prefixCls,
128
+ classNames: {
129
+ root: classNames === null || classNames === void 0 ? void 0 : classNames.root,
130
+ footer: classNames === null || classNames === void 0 ? void 0 : classNames.footer
131
+ },
132
+ styles: {
133
+ root: styles === null || styles === void 0 ? void 0 : styles.root,
134
+ footer: styles === null || styles === void 0 ? void 0 : styles.footer
135
+ },
109
136
  title: title,
110
137
  footer: /*#__PURE__*/React__default["default"].createElement("div", {
111
- className: prefixCls + "-footer",
112
- style: {
138
+ className: classname.cx(prefixCls + "-footer", classNames === null || classNames === void 0 ? void 0 : classNames.footer),
139
+ style: Object.assign({
113
140
  textAlign: 'right'
114
- }
141
+ }, styles === null || styles === void 0 ? void 0 : styles.footer)
115
142
  }, /*#__PURE__*/React__default["default"].createElement(Button.Button, {
116
143
  appearance: "line",
117
144
  onClick: handleClose
package/lib/cjs/QueryFilter.js CHANGED
@@ -17,7 +17,9 @@ var tslib = require('tslib');
17
17
  var React = require('react');
18
18
  var classname = require('@hi-ui/classname');
19
19
  var env = require('@hi-ui/env');
20
+ var core = require('@hi-ui/core');
20
21
  var index = require('./FilterForm/index.js');
22
+ var useMergeSemantic = require('@hi-ui/use-merge-semantic');
21
23
  function _interopDefaultCompat(e) {
22
24
  return e && _typeof(e) === 'object' && 'default' in e ? e : {
23
25
  'default': e
@@ -34,11 +36,28 @@ var QueryFilter = /*#__PURE__*/React.forwardRef(function (_a, ref) {
34
36
  _a$role = _a.role,
35
37
  role = _a$role === void 0 ? 'query-filter' : _a$role,
36
38
  className = _a.className,
39
+ style = _a.style,
40
+ classNamesProp = _a.classNames,
41
+ stylesProp = _a.styles,
37
42
  filterFields = _a.filterFields,
38
43
  formData = _a.formData,
39
44
  onChange = _a.onChange,
40
- rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "filterFields", "formData", "onChange"]);
41
- var cls = classname.cx(prefixCls, className);
45
+ rest = tslib.__rest(_a, ["prefixCls", "role", "className", "style", "classNames", "styles", "children", "filterFields", "formData", "onChange"]);
46
+ var globalContext = core.useGlobalContext();
47
+ var queryFilterConfig = globalContext === null || globalContext === void 0 ? void 0 : globalContext.queryFilter;
48
+ var _useMergeSemantic = useMergeSemantic.useMergeSemantic({
49
+ classNamesList: [queryFilterConfig === null || queryFilterConfig === void 0 ? void 0 : queryFilterConfig.classNames, classNamesProp],
50
+ stylesList: [queryFilterConfig === null || queryFilterConfig === void 0 ? void 0 : queryFilterConfig.styles, stylesProp],
51
+ info: {
52
+ props: Object.assign(Object.assign({}, rest), {
53
+ filterFields: filterFields,
54
+ formData: formData
55
+ })
56
+ }
57
+ }),
58
+ classNames = _useMergeSemantic.classNames,
59
+ styles = _useMergeSemantic.styles;
60
+ var cls = classname.cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.root);
42
61
  var _useCacheSelectedData = index.useCacheSelectedData(),
43
62
  cacheSelectedData = _useCacheSelectedData.cacheSelectedData;
44
63
  var handleChange = function handleChange(formData) {
@@ -47,7 +66,8 @@ var QueryFilter = /*#__PURE__*/React.forwardRef(function (_a, ref) {
47
66
  return /*#__PURE__*/React__default["default"].createElement("div", {
48
67
  ref: ref,
49
68
  role: role,
50
- className: cls
69
+ className: cls,
70
+ style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root)
51
71
  }, /*#__PURE__*/React__default["default"].createElement(index.FilterForm, Object.assign({
52
72
  placement: "horizontal",
53
73
  showLabel: false,
@@ -55,6 +75,12 @@ var QueryFilter = /*#__PURE__*/React.forwardRef(function (_a, ref) {
55
75
  appearance: "contained",
56
76
  filterFields: filterFields,
57
77
  formData: formData,
78
+ classNames: {
79
+ form: classNames === null || classNames === void 0 ? void 0 : classNames.form
80
+ },
81
+ styles: {
82
+ form: styles === null || styles === void 0 ? void 0 : styles.form
83
+ },
58
84
  onChange: function onChange(value, allValues) {
59
85
  handleChange(allValues);
60
86
  },
package/lib/cjs/styles/index.scss.js CHANGED
@@ -12,7 +12,7 @@
12
12
  Object.defineProperty(exports, '__esModule', {
13
13
  value: true
14
14
  });
15
- var css_248z = ".hi-v5-query-filter-form-wrapper .hi-v5-query-filter-form {gap: var(--query-filter-form-gap, var(--hi-v5-spacing-4, 8px));}.hi-v5-query-filter-form-wrapper .hi-v5-query-filter-form-item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v5-query-filter-form-wrapper .hi-v5-query-filter-form-item-form {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;}.hi-v5-query-filter-form-wrapper .hi-v5-query-filter-form-item-pin-btn {-ms-flex-negative: 0;flex-shrink: 0;width: var(--hi-v5-height-8, 32px) !important;height: var(--hi-v5-height-8, 32px) !important;margin: var(--hi-v5-spacing-1, 2px) 0 0 var(--hi-v5-spacing-4, 8px);}.hi-v5-query-filter-button-icon {font-size: var(--hi-v5-text-size-lg, 1rem);}.hi-v5-query-filter-button-text {-webkit-margin-start: var(--hi-v5-spacing-4, 8px);margin-inline-start: var(--hi-v5-spacing-4, 8px);}.hi-v5-query-filter-button.has-count .hi-v5-query-filter-button-text {color: var(--hi-v5-color-primary-600, var(--hi-v5-color-brandblue-600, #1843d2));}.hi-v5-query-filter-button-count-wrapper {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;width: 14px;height: 14px;border-radius: 9999px;color: #fff;background-color: var(--hi-v5-color-primary-600, var(--hi-v5-color-brandblue-600, #1843d2));}.hi-v5-query-filter-button-count {font-size: 20px;-webkit-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: center;transform-origin: center;}.hi-v5-query-filter-search-input[class*=\"--appearance-filled\"] [class*=__inner],.hi-v5-query-filter-search-input[class*=\"--appearance-filled\"] [class*=__inner--focused] {background-color: var(--hi-v5-color-gray-100, #f2f4f7) !important;}";
15
+ var css_248z = ".hi-v5-query-filter-form-wrapper .hi-v5-query-filter-form {gap: var(--query-filter-form-gap, var(--hi-v5-spacing-4, 8px));}.hi-v5-query-filter-form-wrapper .hi-v5-query-filter-form-item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v5-query-filter-form-wrapper .hi-v5-query-filter-form-item-form {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;}.hi-v5-query-filter-form-wrapper .hi-v5-query-filter-form-item-pin-btn {-ms-flex-negative: 0;flex-shrink: 0;width: var(--hi-v5-height-8, 32px) !important;height: var(--hi-v5-height-8, 32px) !important;margin: var(--hi-v5-spacing-1, 2px) 0 0 var(--hi-v5-spacing-4, 8px);}.hi-v5-query-filter-form-wrapper .hi-v5-query-filter-form .hi-v5-button--type-default.hi-v5-button--appearance-line {color: var(--hi-v5-color-gray-700, #60636b);}.hi-v5-query-filter-button-icon {font-size: var(--hi-v5-text-size-lg, 1rem);}.hi-v5-query-filter-button-text {-webkit-margin-start: var(--hi-v5-spacing-4, 8px);margin-inline-start: var(--hi-v5-spacing-4, 8px);}.hi-v5-query-filter-button.has-count .hi-v5-query-filter-button-text {color: var(--hi-v5-color-primary-600, var(--hi-v5-color-brandblue-600, #1843d2));}.hi-v5-query-filter-button-count-wrapper {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;width: 14px;height: 14px;border-radius: 9999px;color: #fff;background-color: var(--hi-v5-color-primary-600, var(--hi-v5-color-brandblue-600, #1843d2));}.hi-v5-query-filter-button-count {font-size: 20px;-webkit-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: center;transform-origin: center;}.hi-v5-query-filter-search-input[class*=\"--appearance-filled\"] [class*=__inner],.hi-v5-query-filter-search-input[class*=\"--appearance-filled\"] [class*=__inner--focused] {background-color: var(--hi-v5-color-gray-100, #f2f4f7) !important;}.hi-v5-query-filter-search-input .hi-v5-input__prefix, .hi-v5-query-filter-search-input .hi-v5-input__suffix {color: var(--hi-v5-color-gray-700, #60636b);}";
16
16
  var __styleInject__ = require('@hi-ui/style-inject')["default"];
17
17
  __styleInject__(css_248z);
18
18
  exports["default"] = css_248z;
package/lib/esm/FilterDrawer/index.js CHANGED
@@ -9,12 +9,13 @@
9
9
  */
10
10
  import { __rest } from 'tslib';
11
11
  import React, { useState, useRef, useEffect } from 'react';
12
- import { useLocaleContext } from '@hi-ui/core';
13
- import { getPrefixCls } from '@hi-ui/classname';
12
+ import { useGlobalContext, useLocaleContext } from '@hi-ui/core';
13
+ import { getPrefixCls, cx } from '@hi-ui/classname';
14
14
  import Drawer from '@hi-ui/drawer';
15
15
  import { Button } from '@hi-ui/button';
16
16
  import { FilterForm, updateSelectedCacheData } from '../FilterForm/index.js';
17
17
  import { useFilterContext } from '../context.js';
18
+ import { useMergeSemantic } from '@hi-ui/use-merge-semantic';
18
19
  var prefixCls = getPrefixCls('query-filter-drawer');
19
20
  var FilterDrawer = function FilterDrawer(_a) {
20
21
  var propsFilterFields = _a.filterFields,
@@ -29,7 +30,25 @@ var FilterDrawer = function FilterDrawer(_a) {
29
30
  pinTexts = _a.pinTexts,
30
31
  onClose = _a.onClose,
31
32
  customFieldProps = _a.customFieldProps,
32
- restProps = __rest(_a, ["filterFields", "formData", "onChange", "onPinChange", "onSelect", "title", "sureText", "cancelText", "visible", "pinTexts", "onClose", "customFieldProps"]);
33
+ classNamesProp = _a.classNames,
34
+ stylesProp = _a.styles,
35
+ restProps = __rest(_a, ["filterFields", "formData", "onChange", "onPinChange", "onSelect", "title", "sureText", "cancelText", "visible", "pinTexts", "onClose", "customFieldProps", "classNames", "styles"]);
36
+ var _useGlobalContext = useGlobalContext(),
37
+ filterDrawerConfig = _useGlobalContext.filterDrawer;
38
+ var _useMergeSemantic = useMergeSemantic({
39
+ classNamesList: [filterDrawerConfig === null || filterDrawerConfig === void 0 ? void 0 : filterDrawerConfig.classNames, classNamesProp],
40
+ stylesList: [filterDrawerConfig === null || filterDrawerConfig === void 0 ? void 0 : filterDrawerConfig.styles, stylesProp],
41
+ info: {
42
+ props: Object.assign(Object.assign({}, restProps), {
43
+ title: title,
44
+ visible: visibleProp,
45
+ filterFields: propsFilterFields,
46
+ formData: propsFormData
47
+ })
48
+ }
49
+ }),
50
+ classNames = _useMergeSemantic.classNames,
51
+ styles = _useMergeSemantic.styles;
33
52
  var _useState = useState(propsFormData),
34
53
  formData = _useState[0],
35
54
  setFormData = _useState[1];
@@ -93,12 +112,20 @@ var FilterDrawer = function FilterDrawer(_a) {
93
112
  };
94
113
  return /*#__PURE__*/React.createElement(Drawer, Object.assign({
95
114
  className: prefixCls,
115
+ classNames: {
116
+ root: classNames === null || classNames === void 0 ? void 0 : classNames.root,
117
+ footer: classNames === null || classNames === void 0 ? void 0 : classNames.footer
118
+ },
119
+ styles: {
120
+ root: styles === null || styles === void 0 ? void 0 : styles.root,
121
+ footer: styles === null || styles === void 0 ? void 0 : styles.footer
122
+ },
96
123
  title: title,
97
124
  footer: /*#__PURE__*/React.createElement("div", {
98
- className: prefixCls + "-footer",
99
- style: {
125
+ className: cx(prefixCls + "-footer", classNames === null || classNames === void 0 ? void 0 : classNames.footer),
126
+ style: Object.assign({
100
127
  textAlign: 'right'
101
- }
128
+ }, styles === null || styles === void 0 ? void 0 : styles.footer)
102
129
  }, /*#__PURE__*/React.createElement(Button, {
103
130
  appearance: "line",
104
131
  onClick: handleClose
package/lib/esm/QueryFilter.js CHANGED
@@ -11,7 +11,9 @@ import { __rest } from 'tslib';
11
11
  import React, { forwardRef } from 'react';
12
12
  import { getPrefixCls, cx } from '@hi-ui/classname';
13
13
  import { __DEV__ } from '@hi-ui/env';
14
+ import { useGlobalContext } from '@hi-ui/core';
14
15
  import { useCacheSelectedData, FilterForm } from './FilterForm/index.js';
16
+ import { useMergeSemantic } from '@hi-ui/use-merge-semantic';
15
17
  var QUERY_FILTER_PREFIX = getPrefixCls('query-filter');
16
18
  /**
17
19
  * 筛选表单
@@ -22,11 +24,28 @@ var QueryFilter = /*#__PURE__*/forwardRef(function (_a, ref) {
22
24
  _a$role = _a.role,
23
25
  role = _a$role === void 0 ? 'query-filter' : _a$role,
24
26
  className = _a.className,
27
+ style = _a.style,
28
+ classNamesProp = _a.classNames,
29
+ stylesProp = _a.styles,
25
30
  filterFields = _a.filterFields,
26
31
  formData = _a.formData,
27
32
  onChange = _a.onChange,
28
- rest = __rest(_a, ["prefixCls", "role", "className", "children", "filterFields", "formData", "onChange"]);
29
- var cls = cx(prefixCls, className);
33
+ rest = __rest(_a, ["prefixCls", "role", "className", "style", "classNames", "styles", "children", "filterFields", "formData", "onChange"]);
34
+ var globalContext = useGlobalContext();
35
+ var queryFilterConfig = globalContext === null || globalContext === void 0 ? void 0 : globalContext.queryFilter;
36
+ var _useMergeSemantic = useMergeSemantic({
37
+ classNamesList: [queryFilterConfig === null || queryFilterConfig === void 0 ? void 0 : queryFilterConfig.classNames, classNamesProp],
38
+ stylesList: [queryFilterConfig === null || queryFilterConfig === void 0 ? void 0 : queryFilterConfig.styles, stylesProp],
39
+ info: {
40
+ props: Object.assign(Object.assign({}, rest), {
41
+ filterFields: filterFields,
42
+ formData: formData
43
+ })
44
+ }
45
+ }),
46
+ classNames = _useMergeSemantic.classNames,
47
+ styles = _useMergeSemantic.styles;
48
+ var cls = cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.root);
30
49
  var _useCacheSelectedData = useCacheSelectedData(),
31
50
  cacheSelectedData = _useCacheSelectedData.cacheSelectedData;
32
51
  var handleChange = function handleChange(formData) {
@@ -35,7 +54,8 @@ var QueryFilter = /*#__PURE__*/forwardRef(function (_a, ref) {
35
54
  return /*#__PURE__*/React.createElement("div", {
36
55
  ref: ref,
37
56
  role: role,
38
- className: cls
57
+ className: cls,
58
+ style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root)
39
59
  }, /*#__PURE__*/React.createElement(FilterForm, Object.assign({
40
60
  placement: "horizontal",
41
61
  showLabel: false,
@@ -43,6 +63,12 @@ var QueryFilter = /*#__PURE__*/forwardRef(function (_a, ref) {
43
63
  appearance: "contained",
44
64
  filterFields: filterFields,
45
65
  formData: formData,
66
+ classNames: {
67
+ form: classNames === null || classNames === void 0 ? void 0 : classNames.form
68
+ },
69
+ styles: {
70
+ form: styles === null || styles === void 0 ? void 0 : styles.form
71
+ },
46
72
  onChange: function onChange(value, allValues) {
47
73
  handleChange(allValues);
48
74
  },
package/lib/esm/styles/index.scss.js CHANGED
@@ -8,6 +8,6 @@
8
8
  * LICENSE file in the root directory of this source tree.
9
9
  */
10
10
  import __styleInject__ from '@hi-ui/style-inject';
11
- var css_248z = ".hi-v5-query-filter-form-wrapper .hi-v5-query-filter-form {gap: var(--query-filter-form-gap, var(--hi-v5-spacing-4, 8px));}.hi-v5-query-filter-form-wrapper .hi-v5-query-filter-form-item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v5-query-filter-form-wrapper .hi-v5-query-filter-form-item-form {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;}.hi-v5-query-filter-form-wrapper .hi-v5-query-filter-form-item-pin-btn {-ms-flex-negative: 0;flex-shrink: 0;width: var(--hi-v5-height-8, 32px) !important;height: var(--hi-v5-height-8, 32px) !important;margin: var(--hi-v5-spacing-1, 2px) 0 0 var(--hi-v5-spacing-4, 8px);}.hi-v5-query-filter-button-icon {font-size: var(--hi-v5-text-size-lg, 1rem);}.hi-v5-query-filter-button-text {-webkit-margin-start: var(--hi-v5-spacing-4, 8px);margin-inline-start: var(--hi-v5-spacing-4, 8px);}.hi-v5-query-filter-button.has-count .hi-v5-query-filter-button-text {color: var(--hi-v5-color-primary-600, var(--hi-v5-color-brandblue-600, #1843d2));}.hi-v5-query-filter-button-count-wrapper {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;width: 14px;height: 14px;border-radius: 9999px;color: #fff;background-color: var(--hi-v5-color-primary-600, var(--hi-v5-color-brandblue-600, #1843d2));}.hi-v5-query-filter-button-count {font-size: 20px;-webkit-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: center;transform-origin: center;}.hi-v5-query-filter-search-input[class*=\"--appearance-filled\"] [class*=__inner],.hi-v5-query-filter-search-input[class*=\"--appearance-filled\"] [class*=__inner--focused] {background-color: var(--hi-v5-color-gray-100, #f2f4f7) !important;}";
11
+ var css_248z = ".hi-v5-query-filter-form-wrapper .hi-v5-query-filter-form {gap: var(--query-filter-form-gap, var(--hi-v5-spacing-4, 8px));}.hi-v5-query-filter-form-wrapper .hi-v5-query-filter-form-item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v5-query-filter-form-wrapper .hi-v5-query-filter-form-item-form {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;}.hi-v5-query-filter-form-wrapper .hi-v5-query-filter-form-item-pin-btn {-ms-flex-negative: 0;flex-shrink: 0;width: var(--hi-v5-height-8, 32px) !important;height: var(--hi-v5-height-8, 32px) !important;margin: var(--hi-v5-spacing-1, 2px) 0 0 var(--hi-v5-spacing-4, 8px);}.hi-v5-query-filter-form-wrapper .hi-v5-query-filter-form .hi-v5-button--type-default.hi-v5-button--appearance-line {color: var(--hi-v5-color-gray-700, #60636b);}.hi-v5-query-filter-button-icon {font-size: var(--hi-v5-text-size-lg, 1rem);}.hi-v5-query-filter-button-text {-webkit-margin-start: var(--hi-v5-spacing-4, 8px);margin-inline-start: var(--hi-v5-spacing-4, 8px);}.hi-v5-query-filter-button.has-count .hi-v5-query-filter-button-text {color: var(--hi-v5-color-primary-600, var(--hi-v5-color-brandblue-600, #1843d2));}.hi-v5-query-filter-button-count-wrapper {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;width: 14px;height: 14px;border-radius: 9999px;color: #fff;background-color: var(--hi-v5-color-primary-600, var(--hi-v5-color-brandblue-600, #1843d2));}.hi-v5-query-filter-button-count {font-size: 20px;-webkit-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: center;transform-origin: center;}.hi-v5-query-filter-search-input[class*=\"--appearance-filled\"] [class*=__inner],.hi-v5-query-filter-search-input[class*=\"--appearance-filled\"] [class*=__inner--focused] {background-color: var(--hi-v5-color-gray-100, #f2f4f7) !important;}.hi-v5-query-filter-search-input .hi-v5-input__prefix, .hi-v5-query-filter-search-input .hi-v5-input__suffix {color: var(--hi-v5-color-gray-700, #60636b);}";
12
12
  __styleInject__(css_248z);
13
13
  export { css_248z as default };
package/lib/types/FilterDrawer/index.d.ts CHANGED
@@ -1,10 +1,16 @@
1
1
  import React from 'react';
2
2
  import { DrawerProps } from '@hi-ui/drawer';
3
3
  import { FilterFieldProps, FilterFormProps } from '../FilterForm';
4
- export declare const FilterDrawer: React.FC<Omit<FilterFormProps, 'onChange' | 'placement'> & {
4
+ import type { ComponentSemantic, SemanticClassNamesType, SemanticStylesType } from '@hi-ui/use-merge-semantic';
5
+ export type FilterDrawerSemanticName = 'root' | 'footer';
6
+ export type FilterDrawerSemanticClassNames = SemanticClassNamesType<FilterDrawerProps, FilterDrawerSemanticName>;
7
+ export type FilterDrawerSemanticStyles = SemanticStylesType<FilterDrawerProps, FilterDrawerSemanticName>;
8
+ export type FilterDrawerSemantic = ComponentSemantic<FilterDrawerSemanticClassNames, FilterDrawerSemanticStyles>;
9
+ export type FilterDrawerProps = Omit<FilterFormProps, 'onChange' | 'placement'> & {
5
10
  onChange?: (formData: Record<string, unknown>, fields: FilterFieldProps[]) => void;
6
11
  sureText?: React.ReactNode;
7
12
  cancelText?: React.ReactNode;
8
13
  } & DrawerProps & {
9
14
  onSelect?: (val: Record<string, unknown>, allVals: Record<string, unknown>, filterField?: FilterFieldProps) => void;
10
- }>;
15
+ } & FilterDrawerSemantic;
16
+ export declare const FilterDrawer: React.FC<FilterDrawerProps>;
package/lib/types/QueryFilter.d.ts CHANGED
@@ -1,11 +1,16 @@
1
1
  import React from 'react';
2
2
  import { HiBaseHTMLProps } from '@hi-ui/core';
3
3
  import { FilterFormProps } from './FilterForm';
4
+ import type { ComponentSemantic, SemanticClassNamesType, SemanticStylesType } from '@hi-ui/use-merge-semantic';
4
5
  /**
5
6
  * 筛选表单
6
7
  */
7
8
  export declare const QueryFilter: React.ForwardRefExoticComponent<QueryFilterProps & React.RefAttributes<HTMLDivElement | null>>;
8
- export interface QueryFilterProps extends HiBaseHTMLProps<'div'>, FilterFormProps {
9
+ export type QueryFilterSemanticName = 'root' | 'form';
10
+ export type QueryFilterSemanticClassNames = SemanticClassNamesType<QueryFilterProps, QueryFilterSemanticName>;
11
+ export type QueryFilterSemanticStyles = SemanticStylesType<QueryFilterProps, QueryFilterSemanticName>;
12
+ export type QueryFilterSemantic = ComponentSemantic<QueryFilterSemanticClassNames, QueryFilterSemanticStyles>;
13
+ export interface QueryFilterProps extends HiBaseHTMLProps<'div'>, Omit<FilterFormProps, 'classNames' | 'styles'>, QueryFilterSemantic {
9
14
  /**
10
15
  * 表单数据变化回调
11
16
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/query-filter",
3
- "version": "5.0.0-experimental.0",
3
+ "version": "5.0.0-experimental.2",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -45,22 +45,23 @@
45
45
  },
46
46
  "dependencies": {
47
47
  "@hi-ui/classname": "^5.0.0-experimental.0",
48
- "@hi-ui/button": "^5.0.0-experimental.0",
49
- "@hi-ui/drawer": "^5.0.0-experimental.0",
48
+ "@hi-ui/button": "^5.0.0-experimental.1",
49
+ "@hi-ui/drawer": "^5.0.0-experimental.1",
50
50
  "@hi-ui/env": "^5.0.0-experimental.0",
51
- "@hi-ui/form": "^5.0.0-experimental.0",
52
- "@hi-ui/tooltip": "^5.0.0-experimental.0",
53
- "@hi-ui/icons": "^5.0.0-experimental.0",
54
- "@hi-ui/input": "^5.0.0-experimental.0"
51
+ "@hi-ui/form": "^5.0.0-experimental.1",
52
+ "@hi-ui/tooltip": "^5.0.0-experimental.1",
53
+ "@hi-ui/icons": "^5.0.0-experimental.1",
54
+ "@hi-ui/input": "^5.0.0-experimental.2",
55
+ "@hi-ui/use-merge-semantic": "^5.0.0-experimental.0"
55
56
  },
56
57
  "peerDependencies": {
57
- "@hi-ui/core": ">=5.0.0-experimental.0",
58
+ "@hi-ui/core": ">=5.0.0-experimental.1",
58
59
  "react": ">=16.8.6",
59
60
  "react-dom": ">=16.8.6"
60
61
  },
61
62
  "devDependencies": {
62
- "@hi-ui/core": "^5.0.0-experimental.0",
63
- "@hi-ui/core-css": "^5.0.0-experimental.0",
63
+ "@hi-ui/core": "^5.0.0-experimental.1",
64
+ "@hi-ui/core-css": "^5.0.0-experimental.2",
64
65
  "react": "^17.0.1",
65
66
  "react-dom": "^17.0.1"
66
67
  }