@alicloud/console-components-search 0.2.26 → 0.2.29
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/config/components-with-style.tsx +2 -2
- package/demos/demo1.demo.tsx +1 -1
- package/dist/index.js +2 -2
- package/doc-dist/10.js +1 -1
- package/doc-dist/deps/main.js +7 -7
- package/doc-dist/log-deps-build.log +3 -3
- package/es/ComplexSearch/index.js +3 -1
- package/es/style.js +1 -1
- package/lib/ComplexSearch/index.js +3 -1
- package/lib/style.js +1 -1
- package/package.json +1 -1
package/demos/demo1.demo.tsx
CHANGED
package/dist/index.js
CHANGED
|
@@ -85079,7 +85079,7 @@ var styled_components_1 = __importDefault(__webpack_require__(49));
|
|
|
85079
85079
|
var prefix = function (props) {
|
|
85080
85080
|
return props.prefix ? "." + props.prefix : '.next-';
|
|
85081
85081
|
};
|
|
85082
|
-
var SearchWarp = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n display: flex;\n --input-clear-icon-transform: 1;\n --input-hint-icon-color: #808080;\n .left-wrap {\n flex: 1;\n border: 1px solid var(--btn-pure-normal-border-color, #d1d5d9);\n display: flex;\n border-bottom-left-radius: var(--corner-1, 2px);\n border-top-left-radius: var(--corner-1, 2px);\n border-right: none;\n &.focus {\n border: 1px solid #0064c8;\n border: 1px solid var(--input-focus-border-color,#0064c8);;\n border-right: none;\n }\n .condition{\n height: 26px;\n display: inline-block;\n margin-top: 2px;\n }\n .condition-item{\n height: 26px;\n display: inline-block;\n line-height: 26px;\n background-color: var(--console-rc-search-label-color, #F7F9FA);\n :hover {\n background-color: var(--console-rc-search-label-hover-color, #EFF3F8);\n }\n border-radius: var(--corner-1, 2px);\n padding: 0 8px;\n margin: 0 2px;\n font-size: 12px;\n color: #333;\n position: relative;\n &-txt{\n padding-right: 4px;\n }\n &:hover{\n background-color: #E0E4E8;\n }\n }\n .condition-select{\n width: 100%;\n height: 100%;\n opacity: 0;\n position: absolute;\n top: 0;\n left: 0;\n min-width: auto;\n &.rc-search-prefix-no-select {\n ", "input", "disabled {\n cursor: auto;\n }\n }\n ", "select-inner{\n min-width: auto;\n }\n }\n .forms{\n flex: 1;\n position: relative;\n .clear-level1{\n position: absolute;\n top: var(--console-rc-search-close-btn-top, 1px);\n right: var(--console-rc-search-close-btn-left, 1px);\n height: 28px;\n width: 30px;\n background-color: transparent;\n z-index: 99;\n color: #333;\n text-align: center;\n line-height: 28px;\n font-size: 12px;\n cursor: pointer;\n padding: 6px 0 0 6px;\n }\n }\n .main-input{\n ", "select-arrow {\n display: none !important;\n }\n height: auto;\n border: none;\n box-shadow: none;\n &.single{\n flex: 1;\n }\n &.select{\n width: 100%;\n }\n &.multi{\n width: 100%;\n /* .next-select-values .next-tag{\n display: none;\n } */\n }\n \n ", "input, ", "input{\n height: auto;\n box-shadow: none;\n }\n }\n ", "input", "medium{\n height: auto;\n }\n }\n\n .right-wrap {\n width: 32px;\n .search-btn {\n width: 32px;\n padding: 0 !important;\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n &.focus {\n border-color: #0064c8;\n border-color: var(--input-focus-border-color,#0064c8);\n }\n border-
|
|
85082
|
+
var SearchWarp = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n display: flex;\n --input-clear-icon-transform: 1;\n --input-hint-icon-color: #808080;\n .left-wrap {\n flex: 1;\n border: 1px solid var(--btn-pure-normal-border-color, #d1d5d9);\n display: flex;\n border-bottom-left-radius: var(--corner-1, 2px);\n border-top-left-radius: var(--corner-1, 2px);\n border-right: none;\n &.focus {\n border: 1px solid #0064c8;\n border: 1px solid var(--input-focus-border-color,#0064c8);;\n border-right: none;\n }\n .condition{\n height: 26px;\n display: inline-block;\n margin-top: 2px;\n }\n .condition-item{\n height: 26px;\n display: inline-block;\n line-height: 26px;\n background-color: var(--console-rc-search-label-color, #F7F9FA);\n :hover {\n background-color: var(--console-rc-search-label-hover-color, #EFF3F8);\n }\n border-radius: var(--corner-1, 2px);\n padding: 0 8px;\n margin: 0 2px;\n font-size: 12px;\n color: #333;\n position: relative;\n &-txt{\n padding-right: 4px;\n }\n &:hover{\n background-color: #E0E4E8;\n }\n }\n .condition-select{\n width: 100%;\n height: 100%;\n opacity: 0;\n position: absolute;\n top: 0;\n left: 0;\n min-width: auto;\n &.rc-search-prefix-no-select {\n ", "input", "disabled {\n cursor: auto;\n }\n }\n ", "select-inner{\n min-width: auto;\n }\n }\n .forms{\n flex: 1;\n position: relative;\n .clear-level1{\n position: absolute;\n top: var(--console-rc-search-close-btn-top, 1px);\n right: var(--console-rc-search-close-btn-left, 1px);\n height: 28px;\n width: 30px;\n background-color: transparent;\n z-index: 99;\n color: #333;\n text-align: center;\n line-height: 28px;\n font-size: 12px;\n cursor: pointer;\n padding: 6px 0 0 6px;\n }\n }\n .main-input{\n ", "select-arrow {\n display: none !important;\n }\n height: auto;\n border: none;\n box-shadow: none;\n &.single{\n flex: 1;\n }\n &.select{\n width: 100%;\n }\n &.multi{\n width: 100%;\n /* .next-select-values .next-tag{\n display: none;\n } */\n }\n \n ", "input, ", "input{\n height: auto;\n box-shadow: none;\n }\n }\n ", "input", "medium{\n height: auto;\n }\n }\n\n .right-wrap {\n width: 32px;\n .search-btn {\n width: 32px;\n padding: 0 !important;\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n &.focus {\n border-color: #0064c8;\n border-color: var(--input-focus-border-color,#0064c8);\n }\n }\n }\n\n .isWidget & .right-wrap,\n .isWind & .right-wrap {\n .search-btn {\n &:hover {\n border-color: #0064c8;\n border-color: var(--input-focus-border-color,#0064c8);\n }\n }\n }\n\n & ", "input-control ", "input-clear-icon::before {\n content: var(--icon-content-close, \"ea22\") !important;\n }\n\n .isWidget & ", "input-control ", "input-clear-icon::before {\n content: \"\\E697\" !important;\n }\n"], ["\n height: 100%;\n width: 100%;\n display: flex;\n --input-clear-icon-transform: 1;\n --input-hint-icon-color: #808080;\n .left-wrap {\n flex: 1;\n border: 1px solid var(--btn-pure-normal-border-color, #d1d5d9);\n display: flex;\n border-bottom-left-radius: var(--corner-1, 2px);\n border-top-left-radius: var(--corner-1, 2px);\n border-right: none;\n &.focus {\n border: 1px solid #0064c8;\n border: 1px solid var(--input-focus-border-color,#0064c8);;\n border-right: none;\n }\n .condition{\n height: 26px;\n display: inline-block;\n margin-top: 2px;\n }\n .condition-item{\n height: 26px;\n display: inline-block;\n line-height: 26px;\n background-color: var(--console-rc-search-label-color, #F7F9FA);\n :hover {\n background-color: var(--console-rc-search-label-hover-color, #EFF3F8);\n }\n border-radius: var(--corner-1, 2px);\n padding: 0 8px;\n margin: 0 2px;\n font-size: 12px;\n color: #333;\n position: relative;\n &-txt{\n padding-right: 4px;\n }\n &:hover{\n background-color: #E0E4E8;\n }\n }\n .condition-select{\n width: 100%;\n height: 100%;\n opacity: 0;\n position: absolute;\n top: 0;\n left: 0;\n min-width: auto;\n &.rc-search-prefix-no-select {\n ", "input", "disabled {\n cursor: auto;\n }\n }\n ", "select-inner{\n min-width: auto;\n }\n }\n .forms{\n flex: 1;\n position: relative;\n .clear-level1{\n position: absolute;\n top: var(--console-rc-search-close-btn-top, 1px);\n right: var(--console-rc-search-close-btn-left, 1px);\n height: 28px;\n width: 30px;\n background-color: transparent;\n z-index: 99;\n color: #333;\n text-align: center;\n line-height: 28px;\n font-size: 12px;\n cursor: pointer;\n padding: 6px 0 0 6px;\n }\n }\n .main-input{\n ", "select-arrow {\n display: none !important;\n }\n height: auto;\n border: none;\n box-shadow: none;\n &.single{\n flex: 1;\n }\n &.select{\n width: 100%;\n }\n &.multi{\n width: 100%;\n /* .next-select-values .next-tag{\n display: none;\n } */\n }\n \n ", "input, ", "input{\n height: auto;\n box-shadow: none;\n }\n }\n ", "input", "medium{\n height: auto;\n }\n }\n\n .right-wrap {\n width: 32px;\n .search-btn {\n width: 32px;\n padding: 0 !important;\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n &.focus {\n border-color: #0064c8;\n border-color: var(--input-focus-border-color,#0064c8);\n }\n }\n }\n\n .isWidget & .right-wrap,\n .isWind & .right-wrap {\n .search-btn {\n &:hover {\n border-color: #0064c8;\n border-color: var(--input-focus-border-color,#0064c8);\n }\n }\n }\n\n & ", "input-control ", "input-clear-icon::before {\n content: var(--icon-content-close, \"\\ea22\") !important;\n }\n\n .isWidget & ", "input-control ", "input-clear-icon::before {\n content: \"\\\\E697\" !important;\n }\n"])), prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix);
|
|
85083
85083
|
exports.SearchWarp = SearchWarp;
|
|
85084
85084
|
var MenuContentWrap = styled_components_1.default.ul(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "tag-small", "tag-closable > ", "tag-close-btn {\n margin-left: 8px;\n padding-right: 4px;\n padding-top: 1px;\n }\n ", "tag-small", "tag-closable > ", "tag-body {\n max-width: calc(100% - 8px - 8px - var(--tag-size-m-padding-lr, 8px));\n }\n ", "tag-small", "tag-closable > ", "tag-close-btn ", "icon:before, ", "tag-small", "tag-closable > ", "tag-close-btn ", "icon ", "icon-remote {\n font-size: 13px;\n }\n"], ["\n ", "tag-small", "tag-closable > ", "tag-close-btn {\n margin-left: 8px;\n padding-right: 4px;\n padding-top: 1px;\n }\n ", "tag-small", "tag-closable > ", "tag-body {\n max-width: calc(100% - 8px - 8px - var(--tag-size-m-padding-lr, 8px));\n }\n ", "tag-small", "tag-closable > ", "tag-close-btn ", "icon:before, ", "tag-small", "tag-closable > ", "tag-close-btn ", "icon ", "icon-remote {\n font-size: 13px;\n }\n"])), prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix);
|
|
85085
85085
|
exports.MenuContentWrap = MenuContentWrap;
|
|
@@ -107627,7 +107627,7 @@ var ComplexSearch = function (props) {
|
|
|
107627
107627
|
var _a, _b, _c;
|
|
107628
107628
|
var type = selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.template;
|
|
107629
107629
|
var searchValue = getValue(constants_1.SEARCH_FILTER_VALUE_FIELD);
|
|
107630
|
-
var props = __assign({ hasBorder: false, autoFocus: true, hasClear: true, key: type, placeholder: ((_a = selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.templateProps) === null || _a === void 0 ? void 0 : _a.placeholder) ||
|
|
107630
|
+
var props = __assign({ hasBorder: false, autoFocus: true, hasClear: true, key: type, placeholder: ((_a = selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.templateProps) === null || _a === void 0 ? void 0 : _a.placeholder) || lodash_1.template(message_1.default.defaultPlaceHolder)({ value: selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.label }) }, focusProps);
|
|
107631
107631
|
var selectProps = {
|
|
107632
107632
|
dataSource: normalizeSelectDataSource(selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.label, ((_b = selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.templateProps) === null || _b === void 0 ? void 0 : _b.dataSource) || []),
|
|
107633
107633
|
defaultVisible: true,
|
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,n,a){"use strict";a.r(n),a.d(n,"demo",(function(){return x})),a.d(n,"meta",(function(){return f})),a.d(n,"code",(function(){return b})),a.d(n,"imports",(function(){return m})),a.d(n,"deps",(function(){return v}));var t={};a.r(t),a.d(t,"default",(function(){return p}));var l=a(5),o=a(1),r=a(0),d=a.n(r),c=a(63),u=a(64),s=[{label:"实例名称",dataIndex:"name",template:"input",templateProps:{
|
|
5
|
+
(window["webpackJsonpconsole-fe-test-rc-search-doc"]=window["webpackJsonpconsole-fe-test-rc-search-doc"]||[]).push([[10],{681:function(e,n,a){"use strict";a.r(n),a.d(n,"demo",(function(){return x})),a.d(n,"meta",(function(){return f})),a.d(n,"code",(function(){return b})),a.d(n,"imports",(function(){return m})),a.d(n,"deps",(function(){return v}));var t={};a.r(t),a.d(t,"default",(function(){return p}));var l=a(5),o=a(1),r=a(0),d=a.n(r),c=a(63),u=a(64),s=[{label:"实例名称",dataIndex:"name",template:"input",templateProps:{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"}],i=[{label:"实例名称",dataIndex:"name",template:"input",templateProps:{placeholder:"按实例名称搜索",dataSource:[]}}],p=function(e){var n=Object(r.useState)([{label:"实例名称",value:"xxxxxx",dataIndex:"name"},{value:[{tagKey:"test",tagValue:""}],dataIndex:"tag"}]),a=Object(o.a)(n,2),t=a[0],p=a[1];return d.a.createElement(u.ConfigProvider,null,d.a.createElement("div",null,d.a.createElement("div",null,"默认固定搜索条件"),d.a.createElement(c.Search,{defaultDataIndex:"name",defaultSelectedDataIndex:"name",options:[{label:"实例名称",dataIndex:"name",template:"input",templateProps:{placeholder:"按实例名称搜索"}}],onSearch:function(e,n){console.log(e,n)}}),d.a.createElement("br",null),d.a.createElement("br",null),d.a.createElement(c.Search,{defaultDataIndex:"name",options:i,onSearch:function(e,n){console.log(e,n)},suggestions:[{label:"实例名称",children:["222222"]},"33333333"]}),d.a.createElement("br",null),d.a.createElement("br",null),d.a.createElement("div",null,"搜索条件成组"),d.a.createElement(c.Search,{defaultDataIndex:"name",defaultSelectedDataIndex:"name",options:s,onSearch:function(e,n,a){p([].concat(Object(l.a)(t),[a]))},suggestions:[{label:"实例名称",children:["222222"]},"33333333"]}),d.a.createElement("div",{style:{marginTop:8}},d.a.createElement(c.SearchFilter,{dataSource:t,onChange:function(e,n){p(n)}}))))};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\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 return (\n <ConfigProvider>\n <div>\n <div>默认固定搜索条件</div>\n <Search\n defaultDataIndex=\"name\"\n defaultSelectedDataIndex=\"name\"\n options={[{\n label: '实例名称',\n dataIndex: 'name',\n template: 'input',\n templateProps: {\n placeholder: '按实例名称搜索',\n },\n }]}\n onSearch={(value, dataIndex) => {\n console.log(value, dataIndex)\n }}\n />\n <br/><br/>\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 defaultSelectedDataIndex=\"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":c,"@alicloud/console-components":u,react:r},{default:x,meta:f={}}=t}}]);
|
|
6
6
|
}})
|