@alicloud/console-components-search 0.2.10 → 0.2.13
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 +11 -10
- package/config/config.ts +1 -0
- package/demos/demo1.demo.tsx +4 -13
- package/dist/index.css +54 -1
- package/dist/index.js +120592 -45
- package/doc-dist/10.js +1 -1
- package/doc-dist/9.js +1 -1
- package/doc-dist/deps/main.css +1 -1
- package/doc-dist/deps/main.js +1 -1
- package/doc-dist/deps/main.os.css +1 -1
- package/doc-dist/log-deps-build.log +1 -1
- package/es/search.js +3 -1
- package/es/style.js +1 -1
- package/es/useCssVar.js +1 -1
- package/lib/search.js +4 -1
- package/lib/style.js +1 -1
- package/lib/useCssVar.d.ts +1 -1
- package/lib/useCssVar.js +1 -1
- package/package.json +1 -1
package/doc-dist/10.js
CHANGED
|
@@ -2,5 +2,5 @@
|
|
|
2
2
|
if (!window.__CONSOLE_OS_GLOBAL_HOOK__){window.__CONSOLE_OS_GLOBAL_VARS_={};window.__CONSOLE_OS_GLOBAL_HOOK__ = function(id, resolver) {resolver(undefined, undefined, undefined, {window: window,location: location,history: history,document: document})};window.__CONSOLE_OS_GLOBAL_HOOK__.standalone = true}
|
|
3
3
|
window.__CONSOLE_OS_GLOBAL_HOOK__("console-fe-test-rc-search-doc", function(require, module, exports, context){ var window = context.window;var location = context.location;var history = context.history;var document = context.document;with(window.__CONSOLE_OS_GLOBAL_VARS_) {
|
|
4
4
|
|
|
5
|
-
(window["webpackJsonpconsole-fe-test-rc-search-doc"]=window["webpackJsonpconsole-fe-test-rc-search-doc"]||[]).push([[10],{681:function(e,a,n){"use strict";n.r(a),n.d(a,"demo",(function(){return
|
|
5
|
+
(window["webpackJsonpconsole-fe-test-rc-search-doc"]=window["webpackJsonpconsole-fe-test-rc-search-doc"]||[]).push([[10],{681:function(e,a,n){"use strict";n.r(a),n.d(a,"demo",(function(){return x})),n.d(a,"meta",(function(){return h})),n.d(a,"code",(function(){return b})),n.d(a,"imports",(function(){return m})),n.d(a,"deps",(function(){return v}));var l={};n.r(l),n.d(l,"default",(function(){return i}));var t=n(5),o=n(1),r=n(0),c=n.n(r),d=n(63),u=n(64),p=[{label:"实例名称",dataIndex:"name",template:"input",templateProps:{placeholder:"按实例名称搜索",dataSource:[]},groupName:"test"},{label:"网络类型",dataIndex:"type",template:"select",templateProps:{placeholder:"请选择网络类型",dataSource:[{label:"A",value:"a"},{label:"B",value:"b"},{label:"C",value:"c"},{label:"D",value:"d"}]},groupName:"test"},{label:"付费类型",dataIndex:"pay",template:"multiple",templateProps:{placeholder:"请选择付费类型",dataSource:[{label:"A",value:"a"},{label:"B",value:"b"},{label:"C",value:"c"},{label:"D",value:"d"}]},groupName:"test2"}],s=[{label:"实例名称",dataIndex:"name",template:"input",templateProps:{placeholder:"按实例名称搜索",dataSource:[]}},{label:"网络类型",dataIndex:"type",template:"select",templateProps:{placeholder:"请选择网络类型",dataSource:[{label:"A",value:"a"},{label:"B",value:"b"},{label:"C",value:"c"},{label:"D",value:"d"}]}},{label:"付费类型",dataIndex:"pay",template:"multiple",templateProps:{placeholder:"请选择付费类型",dataSource:[{label:"A",value:"a"},{label:"B",value:"b"},{label:"C",value:"c"},{label:"D",value:"d"}]}}],i=function(e){var a=Object(r.useState)([{label:"实例名称",value:"xxxxxx",dataIndex:"name"},{value:[{tagKey:"test",tagValue:""}],dataIndex:"tag"}]),n=Object(o.a)(a,2),l=n[0],i=n[1];return console.log(l),c.a.createElement(u.ConfigProvider,null,c.a.createElement("div",null,c.a.createElement(d.Search,{defaultDataIndex:"name",options:s,onSearch:function(e,a){console.log(e,a)},suggestions:[{label:"实例名称",children:["222222"]},"33333333"]}),c.a.createElement("br",null),c.a.createElement("br",null),c.a.createElement("div",null,"搜索条件成组"),c.a.createElement(d.Search,{defaultDataIndex:"name",options:p,onSearch:function(e,a,n){i([].concat(Object(t.a)(l),[n]))},suggestions:[{label:"实例名称",children:["222222"]},"33333333"]}),c.a.createElement("div",{style:{marginTop:8}},c.a.createElement(d.SearchFilter,{dataSource:l,onChange:function(e,a){i(a)}}))))};const m=["react","@alicloud/console-components-search","@alicloud/console-components","react"],b="/**\n * @title 场景1\n */\n\nimport React from \"react\";\nimport { Search, SearchFilter } from \"@alicloud/console-components-search\";\nimport { ConfigProvider } from \"@alicloud/console-components\";\nimport { useState } from \"react\";\n \n let options = [\n {\n label: '实例名称',\n dataIndex: 'name',\n template: 'input',\n templateProps: {\n placeholder: '按实例名称搜索',\n dataSource: []\n },\n groupName:\"test\"\n },\n {\n label: '网络类型',\n dataIndex: 'type',\n template: 'select',\n templateProps: {\n placeholder: '请选择网络类型',\n dataSource: [\n {label: 'A', value: 'a'},\n {label: 'B', value: 'b'},\n {label: 'C', value: 'c'},\n {label: 'D', value: 'd'},\n ]\n },\n groupName:\"test\"\n },\n {\n label: '付费类型',\n dataIndex: 'pay',\n template: 'multiple',\n templateProps: {\n placeholder: '请选择付费类型',\n dataSource: [\n {label: 'A', value: 'a'},\n {label: 'B', value: 'b'},\n {label: 'C', value: 'c'},\n {label: 'D', value: 'd'},\n ]\n },\n groupName:\"test2\"\n }\n]\n\nlet options2 = [\n {\n label: '实例名称',\n dataIndex: 'name',\n template: 'input',\n templateProps: {\n placeholder: '按实例名称搜索',\n dataSource: []\n },\n },\n {\n label: '网络类型',\n dataIndex: 'type',\n template: 'select',\n templateProps: {\n placeholder: '请选择网络类型',\n dataSource: [\n {label: 'A', value: 'a'},\n {label: 'B', value: 'b'},\n {label: 'C', value: 'c'},\n {label: 'D', value: 'd'},\n ]\n },\n },\n {\n label: '付费类型',\n dataIndex: 'pay',\n template: 'multiple',\n templateProps: {\n placeholder: '请选择付费类型',\n dataSource: [\n {label: 'A', value: 'a'},\n {label: 'B', value: 'b'},\n {label: 'C', value: 'c'},\n {label: 'D', value: 'd'},\n ]\n },\n }\n]\n\n\n const Demo1: React.FC<{}> = (props) => {\n const [filters, setFilters] = useState<any>([\n {label: '实例名称', value: 'xxxxxx', dataIndex: 'name'},\n {value: [{tagKey: 'test', tagValue: ''}], dataIndex: 'tag'}\n ]);\n console.log(filters)\n return (\n <ConfigProvider>\n <div>\n <Search\n defaultDataIndex=\"name\"\n options={options2}\n onSearch={(value, dataIndex) => {\n console.log(value, dataIndex)\n }}\n suggestions={[{label: '实例名称', children: ['222222']}, '33333333']}\n />\n <br/><br/>\n\n <div>搜索条件成组</div>\n <Search\n defaultDataIndex=\"name\"\n options={options}\n onSearch={(value, dataIndex, extra) => {\n //@ts-ignore\n setFilters([...filters, extra])\n }}\n suggestions={[{label: '实例名称', children: ['222222']}, '33333333']}\n />\n\n <div style={{marginTop: 8}}>\n <SearchFilter\n dataSource={filters}\n onChange={(deletedFilter, remainFilters)=> {\n setFilters(remainFilters)\n }}\n />\n </div>\n </div>\n </ConfigProvider>\n );\n };\n \n export default Demo1;\n ",v={react:r,"@alicloud/console-components-search":d,"@alicloud/console-components":u,react:r},{default:x,meta:h={}}=l}}]);
|
|
6
6
|
}})
|
package/doc-dist/9.js
CHANGED
|
@@ -2,5 +2,5 @@
|
|
|
2
2
|
if (!window.__CONSOLE_OS_GLOBAL_HOOK__){window.__CONSOLE_OS_GLOBAL_VARS_={};window.__CONSOLE_OS_GLOBAL_HOOK__ = function(id, resolver) {resolver(undefined, undefined, undefined, {window: window,location: location,history: history,document: document})};window.__CONSOLE_OS_GLOBAL_HOOK__.standalone = true}
|
|
3
3
|
window.__CONSOLE_OS_GLOBAL_HOOK__("console-fe-test-rc-search-doc", function(require, module, exports, context){ var window = context.window;var location = context.location;var history = context.history;var document = context.document;with(window.__CONSOLE_OS_GLOBAL_VARS_) {
|
|
4
4
|
|
|
5
|
-
(window["webpackJsonpconsole-fe-test-rc-search-doc"]=window["webpackJsonpconsole-fe-test-rc-search-doc"]||[]).push([[9],{682:function(e,n,a){"use strict";a.r(n);var l=a(0),o=a.n(l),t=a(285);n.default=e=>o.a.createElement(t.a,Object.assign({source:"# @alicloud/console-components-search\n\n基础搜索组件： 当前控制台的基础搜索主要针对列表页的搜索场景，此次基础搜索组件主要通过一个简约通用的框架满足控制台针对列表页不同场景下的搜索需求\n## install \n\n```bash\ntnpm i @alicloud/console-components-search --save-dev\n```\n\n## Usage\n\n```js\n/**\n * @title 场景1\n */\n\n import React from \"react\";\n import { Search } from \"@alicloud/console-components-search\";\n \n let options = [\n {\n label: '实例名称',\n dataIndex: 'name',\n template: 'input',\n templateProps: {\n placeholder: '按实例名称搜索',\n dataSource: []\n },\n groupName:\"test\"\n },\n {\n label: '网络类型',\n dataIndex: 'type',\n template: 'select',\n templateProps: {\n placeholder: '请选择网络类型',\n dataSource: [\n {label: 'A', value: 'a'},\n {label: 'B', value: 'b'},\n {label: 'C', value: 'c'},\n {label: 'D', value: 'd'},\n ]\n },\n groupName:\"test\"\n },\n {\n label: '付费类型',\n dataIndex: 'pay',\n template: 'multiple',\n templateProps: {\n placeholder: '请选择付费类型',\n dataSource: [\n {label: 'A', value: 'a'},\n {label: 'B', value: 'b'},\n {label: 'C', value: 'c'},\n {label: 'D', value: 'd'},\n ]\n },\n groupName:\"test2\"\n }\n]\n\nlet options2 = [\n {\n label: '实例名称',\n dataIndex: 'name',\n template: 'input',\n templateProps: {\n placeholder: '按实例名称搜索',\n dataSource: []\n },\n },\n {\n label: '网络类型',\n dataIndex: 'type',\n template: 'select',\n templateProps: {\n placeholder: '请选择网络类型',\n dataSource: [\n {label: 'A', value: 'a'},\n {label: 'B', value: 'b'},\n {label: 'C', value: 'c'},\n {label: 'D', value: 'd'},\n ]\n },\n },\n {\n label: '付费类型',\n dataIndex: 'pay',\n template: 'multiple',\n templateProps: {\n placeholder: '请选择付费类型',\n dataSource: [\n {label: 'A', value: 'a'},\n {label: 'B', value: 'b'},\n {label: 'C', value: 'c'},\n {label: 'D', value: 'd'},\n ]\n },\n }\n]\n\n\n const Demo1: React.FC<{}> = (props) => {\n \n return (\n <div>\n <Search\n defaultDataIndex=\"name\"\n options={options2}\n onSearch={(value, dataIndex) => {\n console.log(value, dataIndex)\n }}\n suggestions={[{label: '实例名称', children: ['222222']}, '33333333']}\n />\n <br/><br/>\n\n <div>搜索条件成组</div>\n <Search\n defaultDataIndex=\"name\"\n options={options}\n onSearch={(value, dataIndex) => {\n console.log(value, dataIndex)\n }}\n suggestions={[{label: '实例名称', children: ['222222']}, '33333333']}\n />\n </div>\n );\n };\n \n export default Demo1;\n \n```\n\n##
|
|
5
|
+
(window["webpackJsonpconsole-fe-test-rc-search-doc"]=window["webpackJsonpconsole-fe-test-rc-search-doc"]||[]).push([[9],{682:function(e,n,a){"use strict";a.r(n);var l=a(0),o=a.n(l),t=a(285);n.default=e=>o.a.createElement(t.a,Object.assign({source:"# @alicloud/console-components-search\n\n基础搜索组件： 当前控制台的基础搜索主要针对列表页的搜索场景，此次基础搜索组件主要通过一个简约通用的框架满足控制台针对列表页不同场景下的搜索需求\n## install \n\n```bash\ntnpm i @alicloud/console-components-search --save-dev\n```\n\n\n## Demo\n\n\n[$XView](https://xconsole.aliyun-inc.com/demo-playground?consoleOSId=console-fe-test-rc-search-doc&servePath=https%3A%2F%2Fopensource-microapp.oss-cn-hangzhou.aliyuncs.com%2Fapp%2Fbreezr-docs%2Fconsole-fe-test-rc-search-doc%2F-latest%2F&entryKey=demo1 )\n\n\n## Usage\n\n```js\n/**\n * @title 场景1\n */\n\n import React from \"react\";\n import { Search } from \"@alicloud/console-components-search\";\n \n let options = [\n {\n label: '实例名称',\n dataIndex: 'name',\n template: 'input',\n templateProps: {\n placeholder: '按实例名称搜索',\n dataSource: []\n },\n groupName:\"test\"\n },\n {\n label: '网络类型',\n dataIndex: 'type',\n template: 'select',\n templateProps: {\n placeholder: '请选择网络类型',\n dataSource: [\n {label: 'A', value: 'a'},\n {label: 'B', value: 'b'},\n {label: 'C', value: 'c'},\n {label: 'D', value: 'd'},\n ]\n },\n groupName:\"test\"\n },\n {\n label: '付费类型',\n dataIndex: 'pay',\n template: 'multiple',\n templateProps: {\n placeholder: '请选择付费类型',\n dataSource: [\n {label: 'A', value: 'a'},\n {label: 'B', value: 'b'},\n {label: 'C', value: 'c'},\n {label: 'D', value: 'd'},\n ]\n },\n groupName:\"test2\"\n }\n]\n\nlet options2 = [\n {\n label: '实例名称',\n dataIndex: 'name',\n template: 'input',\n templateProps: {\n placeholder: '按实例名称搜索',\n dataSource: []\n },\n },\n {\n label: '网络类型',\n dataIndex: 'type',\n template: 'select',\n templateProps: {\n placeholder: '请选择网络类型',\n dataSource: [\n {label: 'A', value: 'a'},\n {label: 'B', value: 'b'},\n {label: 'C', value: 'c'},\n {label: 'D', value: 'd'},\n ]\n },\n },\n {\n label: '付费类型',\n dataIndex: 'pay',\n template: 'multiple',\n templateProps: {\n placeholder: '请选择付费类型',\n dataSource: [\n {label: 'A', value: 'a'},\n {label: 'B', value: 'b'},\n {label: 'C', value: 'c'},\n {label: 'D', value: 'd'},\n ]\n },\n }\n]\n\n\n const Demo1: React.FC<{}> = (props) => {\n \n return (\n <div>\n <Search\n defaultDataIndex=\"name\"\n options={options2}\n onSearch={(value, dataIndex) => {\n console.log(value, dataIndex)\n }}\n suggestions={[{label: '实例名称', children: ['222222']}, '33333333']}\n />\n <br/><br/>\n\n <div>搜索条件成组</div>\n <Search\n defaultDataIndex=\"name\"\n options={options}\n onSearch={(value, dataIndex) => {\n console.log(value, dataIndex)\n }}\n suggestions={[{label: '实例名称', children: ['222222']}, '33333333']}\n />\n </div>\n );\n };\n \n export default Demo1;\n \n```\n\n## API\n\n### Search\n\n基础搜索组件的参数\n[$XView](https://xconsole.aliyun-inc.com/demo-playground?servePath=https%3A%2F%2Fopensource-microapp.oss-cn-hangzhou.aliyuncs.com%2Fapp%2Fbreezr-docs%2Fconsole-fe-test-rc-search-doc%2F-latest%2F&consoleOSId=console-fe-test-rc-search-doc&entryKey=types%2FIRcSearchProps)\n\n### IRcSearchOptionsProps\n\n配置组件类别的options\n[$XView](http://localhost:3333/?entryKey=types%2FIRcSearchOptions&consoleOSId=console-fe-test-rc-search-doc)\n\n### SearchFilter\n\n[$XView](http://localhost:3333/?entryKey=types%2FIRcSearchTagListProps&consoleOSId=console-fe-test-rc-search-doc)\n\n### IRcSearchTagItemProps\n\n[$XView](http://localhost:3333/?entryKey=types%2FIRcSearchTagItemProps&consoleOSId=console-fe-test-rc-search-doc)"},e))}}]);
|
|
6
6
|
}})
|
package/doc-dist/deps/main.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
body .xconsole-rcsearch-multi-pop.xconsole-rcsearch-multi-pop>ul{padding:8px}body .xconsole-rcsearch-multi-pop .next-select-menu-item{padding-left:0!important}body .xconsole-rcsearch-multi-pop .next-select-menu-item .next-menu-icon-selected{display:none}body .xconsole-rcsearch-multi-pop .next-menu-group-label{padding-left:0}body .xconsole-rc-search-popup{margin-top:4px}.rc-search-taglist:not(.isWind).rc-search-taglist:not(.isWind) [class*=-icon-close]:before{content:var(--icon-content-
|
|
1
|
+
body .xconsole-rcsearch-multi-pop.xconsole-rcsearch-multi-pop>ul{padding:8px}body .xconsole-rcsearch-multi-pop .next-select-menu-item{padding-left:0!important}body .xconsole-rcsearch-multi-pop .next-select-menu-item .next-menu-icon-selected{display:none}body .xconsole-rcsearch-multi-pop .next-menu-group-label{padding-left:0}body .xconsole-rc-search-popup{margin-top:4px}body .rc-search.isWind{--console-rc-search-label-color:#f7f7f7;--console-rc-search-label-hover-color:#ebebeb}body .rc-search.isWidget{--console-rc-search-close-btn-top:2px;--console-rc-search-close-btn-left:-2px;--icon-content-delete-filling:"\E6A2"}.rc-search-taglist:not(.isWind).rc-search-taglist:not(.isWind) [class*=-icon-close]:before{content:var(--icon-content-close)!important}.console-tags-tag.console-tags-tag{font-weight:400;color:var(--color-text1-9,#333)!important}.console-tags-tag.console-tags-tag .console-tags-tag-label{font-weight:500;color:var(--color-text1-6,grey);margin-right:8px}.console-tags-tag.console-tags-tag[class*=tag-closable]>[class*=tag-close-btn]{margin-left:12px}.console-tags-tag.console-tags-tag.console-tags-tag.console-tags-tag:hover [class*=-icon-close]{color:#181818}.console-tags-tag:not(:last-child){margin-right:8px}.console-tags-tag_empty{color:var(--color-text1-6,grey)}.console-tags-tag-dot.console-tags-tag-dot [class*=-badge-dot]{right:4px;top:0}
|