@kaiheila/ui-components 0.1.8 → 0.1.11

package/dist/main.css

@@ -100,21 +100,15 @@ textarea {
   border-radius: 50%;
 }
 .kaihei-loading-spin:before {
-  border: 3px solid #edeef0;
-}
-.theme-dark .kaihei-loading-spin:before {
-  border-color: rgba(237, 238, 240, 0.07);
+  border: 3px solid var(--border-color);
 }
 .kaihei-loading-spin:after {
   animation-duration: 0.6s;
   border: 3px solid transparent;
-  border-top-color: #999ba1;
+  border-top-color: var(--text-tip-color);
   -webkit-animation: loaderSpin 0.6s linear infinite;
   animation: loaderSpin 0.6s linear infinite;
 }
-.theme-dark .kaihei-loading-spin:after {
-  border-top-color: rgba(153, 155, 161, 0.5);
-}
 .kaihei-loading-spin.block-loading-spin {
   display: block;
   margin-left: auto;
@@ -446,12 +440,6 @@ textarea {
   width: 18px;
   line-height: 1;
 }
-.chuanyu-button.loading .btn-loading-ico .kaihei-loading-spin:before {
-  border-color: #edeef0;
-}
-.chuanyu-button.loading .btn-loading-ico .kaihei-loading-spin:after {
-  border-top-color: rgba(153, 155, 161, 0.5);
-}
 .size-sm .button-loading-spin {
   transform-origin: 50%;
   transform: scale(0.9);
@@ -720,18 +708,12 @@ textarea {
 .search-input {
   position: relative;
   display: flex;
+  align-items: center;
+  padding: 0 16px;
+  height: 40px;
+  font-size: 14px;
   border-radius: 12px;
-  line-height: 20px;
   border: 1px solid var(--border-color);
-  font-size: 14px;
-}
-.search-input.md {
-  height: 32px;
-  line-height: 32px;
-}
-.search-input.md .button-clear,
-.search-input.md .button-search {
-  font-size: 24px;
 }
 .search-input.noborder {
   border-color: transparent;
@@ -745,8 +727,8 @@ textarea {
   box-shadow: 0 0 0 3px var(--border-active-color);
 }
 .search-input input {
-  padding: 3px 30px 3px 16px;
-  width: 100%;
+  flex: 1;
+  min-width: 0;
   height: 100%;
   border: none;
   background: transparent;
@@ -757,13 +739,13 @@ textarea {
 }
 .search-input .button-clear,
 .search-input .button-search {
-  right: 10px;
-  top: 50%;
-  transform: translateY(-50%);
-  font-size: 16px;
-  position: absolute;
-  cursor: pointer;
+  display: flex;
+  margin-left: 16px;
+  width: 24px;
+  height: 24px;
+  font-size: 24px;
   color: var(--text-tip-color);
+  cursor: pointer;
 }
 .search-input .button-clear:hover,
 .search-input .button-search:hover {
@@ -771,7 +753,20 @@ textarea {
 }
 .search-input .button-clear:active,
 .search-input .button-search:active {
-  color: var(--text-description-color);
+  color: var(--text-color);
+}
+.search-input .button-clear svg,
+.search-input .button-search svg {
+  width: 24px;
+  height: 24px;
+}
+.search-input.sm {
+  height: 32px;
+  padding: 0 8px;
+}
+.search-input.sm .button-clear,
+.search-input.sm .button-search {
+  margin-left: 8px;
 }
 .number-input {
   display: flex;
@@ -891,9 +886,8 @@ textarea {
   color: var(--text-description-color);
 }
 .selector-contain.type-ghost .selector-select {
-  padding: 6px 32px 6px 12px;
+  padding: 6px 32px 6px 16px;
   border-radius: 16px;
-  border-width: 0;
   background-color: var(--menu-background);
 }
 .selector-contain.simple .selector-select {
@@ -963,12 +957,17 @@ textarea {
 }
 .selector-select .dropdown-icon {
   position: absolute;
+  display: flex;
   top: 50%;
   transform: translateY(-50%);
   right: 10px;
   font-size: 24px;
   transition: transform 0.2s;
 }
+.selector-select .dropdown-icon svg {
+  width: 24px;
+  height: 24px;
+}
 .selector-option {
   position: absolute;
   width: 100%;
@@ -1058,11 +1057,16 @@ textarea {
 }
 .selector-search-select .dropdown-icon {
   position: absolute;
+  display: flex;
   top: 50%;
   transform: translateY(-50%);
   right: 10px;
   font-size: 24px;
-  transition: transform 200ms linear;
+  transition: transform 0.2s;
+}
+.selector-search-select .dropdown-icon svg {
+  width: 24px;
+  height: 24px;
 }
 .selector-search-select input {
   width: 100%;
@@ -1487,11 +1491,18 @@ body .__react_component_tooltip.type-dark.place-right:after {
 }
 .time-selector-select .dropdown-icon {
   position: absolute;
+  display: flex;
+  top: 50%;
+  margin-top: -12px;
   right: 8px;
   font-size: 24px;
   color: var(--text-description-color);
   transition: transform 200ms linear;
 }
+.time-selector-select .dropdown-icon svg {
+  width: 24px;
+  height: 24px;
+}
 .time-selector-option {
   position: absolute;
   width: 100%;

package/dist/ui-components.js

@@ -2803,7 +2803,7 @@ module.exports = require("react-dom");
 /* 6 */
 /***/ (function(module) {
 
-module.exports = JSON.parse("{\"name\":\"@kaiheila/ui-components\",\"version\":\"0.1.7\",\"description\":\"开黑啦 UI Components\",\"main\":\"dist/ui-components.js\",\"scripts\":{\"build\":\"webpack\",\"demo\":\"webpack-dev-server --config webpack.config.demo.js\"},\"keywords\":[\"UI\",\"Components\"],\"author\":\"yangchuan\",\"license\":\"ISC\",\"files\":[\"dist\"],\"devDependencies\":{\"@babel/core\":\"^7.15.5\",\"@babel/preset-env\":\"^7.15.6\",\"@babel/preset-react\":\"^7.14.5\",\"@webpack-cli/serve\":\"^1.6.0\",\"babel-loader\":\"^8.2.2\",\"classnames\":\"^2.3.1\",\"css-loader\":\"^2.1.1\",\"html-webpack-plugin\":\"^4.5.2\",\"less\":\"^4.1.2\",\"less-loader\":\"^5.0.0\",\"mini-css-extract-plugin\":\"^0.8.0\",\"prop-types\":\"^15.7.2\",\"react\":\"^16.9.0\",\"react-dom\":\"^16.9.0\",\"react-tooltip\":\"^4.2.21\",\"style-loader\":\"^1.0.0\",\"url-loader\":\"^2.1.0\",\"webpack\":\"^4.40.2\",\"webpack-cli\":\"^3.3.1\",\"webpack-dev-server\":\"^3.2.1\"},\"peerDependencies\":{\"react\":\"^16.9.0\",\"react-dom\":\"^16.9.0\"},\"browserslist\":{\"production\":[\">0.2%\",\"not dead\",\"not op_mini all\"],\"development\":[\"last 1 chrome version\",\"last 1 firefox version\",\"last 1 safari version\"]}}");
+module.exports = JSON.parse("{\"name\":\"@kaiheila/ui-components\",\"version\":\"0.1.10\",\"description\":\"开黑啦 UI Components\",\"main\":\"dist/ui-components.js\",\"scripts\":{\"build\":\"webpack\",\"demo\":\"webpack-dev-server --config webpack.config.demo.js\"},\"keywords\":[\"UI\",\"Components\"],\"author\":\"yangchuan\",\"license\":\"ISC\",\"files\":[\"dist\"],\"devDependencies\":{\"@babel/core\":\"^7.15.5\",\"@babel/preset-env\":\"^7.15.6\",\"@babel/preset-react\":\"^7.14.5\",\"@webpack-cli/serve\":\"^1.6.0\",\"babel-loader\":\"^8.2.2\",\"classnames\":\"^2.3.1\",\"css-loader\":\"^2.1.1\",\"html-webpack-plugin\":\"^4.5.2\",\"less\":\"^4.1.2\",\"less-loader\":\"^5.0.0\",\"mini-css-extract-plugin\":\"^0.8.0\",\"prop-types\":\"^15.7.2\",\"react\":\"^16.9.0\",\"react-dom\":\"^16.9.0\",\"react-tooltip\":\"^4.2.21\",\"style-loader\":\"^1.0.0\",\"url-loader\":\"^2.1.0\",\"webpack\":\"^4.40.2\",\"webpack-cli\":\"^3.3.1\",\"webpack-dev-server\":\"^3.2.1\"},\"peerDependencies\":{\"react\":\"^16.9.0\",\"react-dom\":\"^16.9.0\"},\"browserslist\":{\"production\":[\">0.2%\",\"not dead\",\"not op_mini all\"],\"development\":[\"last 1 chrome version\",\"last 1 firefox version\",\"last 1 safari version\"]}}");
 
 /***/ }),
 /* 7 */
@@ -4703,7 +4703,7 @@ var search_input_SearchInput = /*#__PURE__*/function (_Component) {
           _this$props$placehold = _this$props.placeholder,
           placeholder = _this$props$placehold === void 0 ? '' : _this$props$placehold,
           _this$props$size = _this$props.size,
-          size = _this$props$size === void 0 ? 'sm' : _this$props$size,
+          size = _this$props$size === void 0 ? '' : _this$props$size,
           _this$props$type = _this$props.type,
           type = _this$props$type === void 0 ? '' : _this$props$type;
       return /*#__PURE__*/external_react_default.a.createElement("div", {
@@ -4723,11 +4723,35 @@ var search_input_SearchInput = /*#__PURE__*/function (_Component) {
         type: "text",
         placeholder: placeholder
       }), value == '' ? /*#__PURE__*/external_react_default.a.createElement("span", {
-        className: "button-search xy-iconfont xy-icon-role-member-search"
-      }) : /*#__PURE__*/external_react_default.a.createElement("span", {
+        className: "button-search"
+      }, /*#__PURE__*/external_react_default.a.createElement("svg", {
+        t: "1655350445297",
+        viewBox: "0 0 1024 1024",
+        version: "1.1",
+        xmlns: "http://www.w3.org/2000/svg",
+        pId: "4996",
+        width: "200",
+        height: "200"
+      }, /*#__PURE__*/external_react_default.a.createElement("path", {
+        d: "M484.693333 130.56a350.122667 350.122667 0 0 1 269.226667 574.037333l132.352 132.394667a32 32 0 0 1-41.642667 48.384l-3.584-3.114667-132.437333-132.394666A350.122667 350.122667 0 1 1 484.693333 130.602667z m0 64a286.122667 286.122667 0 1 0 0 572.245333 286.122667 286.122667 0 0 0 0-572.202666z",
+        pId: "4997",
+        fill: "currentColor"
+      }))) : /*#__PURE__*/external_react_default.a.createElement("span", {
         onClick: this.clear,
-        className: "button-clear xy-iconfont xy-icon-role-member-search-close"
-      }));
+        className: "button-clear"
+      }, /*#__PURE__*/external_react_default.a.createElement("svg", {
+        t: "1655352871719",
+        viewBox: "0 0 1024 1024",
+        version: "1.1",
+        xmlns: "http://www.w3.org/2000/svg",
+        pId: "5254",
+        width: "200",
+        height: "200"
+      }, /*#__PURE__*/external_react_default.a.createElement("path", {
+        d: "M380.352 326.912l5.312 4.48L511.936 457.6l126.4-126.272a38.4 38.4 0 0 1 58.752 49.024l-4.48 5.312-126.336 126.272 126.4 126.4a38.4 38.4 0 0 1-49.024 58.752l-5.312-4.48L512 566.336l-126.272 126.4a38.4 38.4 0 0 1-58.752-49.024l4.48-5.312L457.6 512 331.328 385.664a38.4 38.4 0 0 1 49.024-58.752z",
+        pId: "5255",
+        fill: "currentColor"
+      }))));
     }
   }]);
 
@@ -5511,8 +5535,9 @@ var selector_Selector = /*#__PURE__*/function (_Component) {
           noTheme = _this$props2.noTheme,
           _this$props2$simple = _this$props2.simple,
           simple = _this$props2$simple === void 0 ? false : _this$props2$simple,
-          optionsWidth = _this$props2.optionsWidth;
-      var baseStyle = {};
+          optionsWidth = _this$props2.optionsWidth,
+          optionStyle = _this$props2.optionStyle;
+      var baseStyle = optionStyle || {};
 
       if (optionsWidth) {
         baseStyle.width = optionsWidth;
@@ -5651,8 +5676,20 @@ var selector_Selector = /*#__PURE__*/function (_Component) {
           __html: printEmoji(label)
         }
       })), /*#__PURE__*/external_react_default.a.createElement("span", {
-        className: "xy-iconfont xy-icon-ic_angle_down_gray dropdown-icon"
-      })), this.renderOptions(list, showList), /*#__PURE__*/external_react_default.a.createElement("div", {
+        className: "dropdown-icon"
+      }, /*#__PURE__*/external_react_default.a.createElement("svg", {
+        t: "1655362138862",
+        viewBox: "0 0 1024 1024",
+        version: "1.1",
+        xmlns: "http://www.w3.org/2000/svg",
+        pId: "5770",
+        width: "200",
+        height: "200"
+      }, /*#__PURE__*/external_react_default.a.createElement("path", {
+        d: "M286.144 448.192l24.512 23.808 23.104 21.632 21.76 19.584 20.736 17.472c107.392 87.488 171.52 84.672 281.664-8.448l21.248-18.56 22.4-20.608 23.808-22.72 12.416-12.16a10.752 10.752 0 0 0-7.552-18.432H293.76a10.752 10.752 0 0 0-7.616 18.432z",
+        pId: "5771",
+        fill: "currentColor"
+      })))), this.renderOptions(list, showList), /*#__PURE__*/external_react_default.a.createElement("div", {
         className: "ab-shadow",
         ref: this.loadShadowRef
       }));
@@ -5951,7 +5988,6 @@ var selector_search_SelectorSearch = /*#__PURE__*/function (_Component) {
         ref: this.selectRef,
         onClick: this.toggle
       }, /*#__PURE__*/external_react_default.a.createElement("input", {
-        className: "search-input",
         type: "text",
         value: keyword,
         onChange: function onChange(event) {
@@ -5970,8 +6006,20 @@ var selector_search_SelectorSearch = /*#__PURE__*/function (_Component) {
       }, placeholder ? placeholder : '请选择') : /*#__PURE__*/external_react_default.a.createElement("span", {
         className: "selector-search-label"
       }, label)), /*#__PURE__*/external_react_default.a.createElement("span", {
-        className: "xy-iconfont xy-icon-ic_angle_down_gray dropdown-icon"
-      })), showList ? /*#__PURE__*/external_react_default.a.createElement("ul", {
+        className: "dropdown-icon"
+      }, /*#__PURE__*/external_react_default.a.createElement("svg", {
+        t: "1655362138862",
+        viewBox: "0 0 1024 1024",
+        version: "1.1",
+        xmlns: "http://www.w3.org/2000/svg",
+        pId: "5770",
+        width: "200",
+        height: "200"
+      }, /*#__PURE__*/external_react_default.a.createElement("path", {
+        d: "M286.144 448.192l24.512 23.808 23.104 21.632 21.76 19.584 20.736 17.472c107.392 87.488 171.52 84.672 281.664-8.448l21.248-18.56 22.4-20.608 23.808-22.72 12.416-12.16a10.752 10.752 0 0 0-7.552-18.432H293.76a10.752 10.752 0 0 0-7.616 18.432z",
+        pId: "5771",
+        fill: "currentColor"
+      })))), showList ? /*#__PURE__*/external_react_default.a.createElement("ul", {
         className: "selector-search-option theme-scroll-bar",
         style: optionsStyle
       }, list) : null);
@@ -6987,8 +7035,20 @@ var time_selector_TimeSelector = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/external_react_default.a.createElement("span", {
         className: "time-selector-label"
       }, "".concat(hour.toString().padStart(2, '0'), ":").concat(minute.toString().padStart(2, '0'))), /*#__PURE__*/external_react_default.a.createElement("span", {
-        className: "xy-iconfont xy-icon-ic_angle_down_gray dropdown-icon"
-      })), displayOption && /*#__PURE__*/external_react_default.a.createElement("div", {
+        className: "dropdown-icon"
+      }, /*#__PURE__*/external_react_default.a.createElement("svg", {
+        t: "1655362138862",
+        viewBox: "0 0 1024 1024",
+        version: "1.1",
+        xmlns: "http://www.w3.org/2000/svg",
+        pId: "5770",
+        width: "200",
+        height: "200"
+      }, /*#__PURE__*/external_react_default.a.createElement("path", {
+        d: "M286.144 448.192l24.512 23.808 23.104 21.632 21.76 19.584 20.736 17.472c107.392 87.488 171.52 84.672 281.664-8.448l21.248-18.56 22.4-20.608 23.808-22.72 12.416-12.16a10.752 10.752 0 0 0-7.552-18.432H293.76a10.752 10.752 0 0 0-7.616 18.432z",
+        pId: "5771",
+        fill: "currentColor"
+      })))), displayOption && /*#__PURE__*/external_react_default.a.createElement("div", {
         className: "time-selector-option",
         ref: function ref(e) {
           return _this2.optionRef = e;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaiheila/ui-components",
-  "version": "0.1.8",
+  "version": "0.1.11",
   "description": "开黑啦 UI Components",
   "main": "dist/ui-components.js",
   "scripts": {