@kaiheila/ui-components 0.1.12 → 0.1.15

package/Readme.md

@@ -19,3 +19,5 @@ npm run demo
 ```
 npm run build
 ```
+### 更新记录
+- v0.1.13 更改步进器样式 | src/input/number-input.jsx

package/dist/main.css

@@ -243,6 +243,7 @@ textarea {
 .chuanyu-button.disabled,
 .chuanyu-button:disabled {
   cursor: not-allowed;
+  opacity: 0.5;
 }
 .chuanyu-button.size-xs {
   font-size: 12px;
@@ -294,19 +295,15 @@ textarea {
 .chuanyu-button.type-primary:not(.disabled):active {
   background-color: var(--color-primary-active);
 }
-.chuanyu-button.type-primary:disabled {
-  opacity: 0.5;
-  background-color: var(--color-primary);
-}
 .chuanyu-button.type-simple-primary {
   background-color: transparent;
   color: var(--color-primary);
 }
-.chuanyu-button.type-simple-primary:hover {
+.chuanyu-button.type-simple-primary:not(.disabled):hover {
   background-color: var(--color-primary);
   color: #fff;
 }
-.chuanyu-button.type-simple-primary:active {
+.chuanyu-button.type-simple-primary:not(.disabled):active {
   background-color: var(--color-primary-active);
   color: #fff;
 }
@@ -316,13 +313,9 @@ textarea {
 .chuanyu-button.type-appprimary:not(.disabled):hover {
   background-color: var(--color-primary-hover);
 }
-.chuanyu-button.type-appprimary:active {
+.chuanyu-button.type-appprimary:not(.disabled):active {
   background-color: var(--color-primary-active);
 }
-.chuanyu-button.type-appprimary:disabled {
-  opacity: 0.5;
-  background-color: var(--color-primary);
-}
 .chuanyu-button.type-danger {
   background-color: var(--color-error);
 }
@@ -372,10 +365,6 @@ textarea {
 .chuanyu-button.type-simple:not(.disabled):active {
   background-color: var(--button-simple-active);
 }
-.chuanyu-button.type-simple:disabled {
-  opacity: 0.5;
-  background-color: transparent;
-}
 .chuanyu-button.type-default {
   color: var(--text-description-color);
   background-color: var(--button-default);
@@ -387,9 +376,8 @@ textarea {
   background-color: var(--button-default-active);
 }
 .chuanyu-button.type-default:disabled {
-  cursor: not-allowed;
   opacity: 0.5;
-  background: rgba(187, 190, 196, 0.3);
+  background-color: var(--button-default);
 }
 .chuanyu-button.type-ghost {
   color: var(--text-description-color);
@@ -402,21 +390,17 @@ textarea {
 .chuanyu-button.type-ghost:not(.disabled):active {
   background-color: var(--button-simple-active);
 }
-.chuanyu-button.type-ghost:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
 .chuanyu-button.type-ghost-danger {
   color: var(--color-error);
   border-color: var(--color-error);
   border-width: 1px;
   border-style: solid;
 }
-.chuanyu-button.type-ghost-danger:hover {
+.chuanyu-button.type-ghost-danger:not(.disabled):hover {
   color: var(--color-error-hover);
   border-color: var(--color-error-hover);
 }
-.chuanyu-button.type-ghost-danger:active {
+.chuanyu-button.type-ghost-danger:not(.disabled):active {
   color: var(--color-error-hover);
   border-color: var(--color-error-hover);
 }
@@ -425,10 +409,10 @@ textarea {
   background-color: transparent;
   border: 1px solid rgba(228, 75, 77);
 }
-.chuanyu-button.type-simple-danger:hover {
+.chuanyu-button.type-simple-danger:not(.disabled):hover {
   border: 1px solid rgba(230, 93, 95);
 }
-.chuanyu-button.type-simple-danger:active {
+.chuanyu-button.type-simple-danger:not(.disabled):active {
   background-color: rgba(228, 75, 77, 0.1);
 }
 .chuanyu-button.loading .loading-ico {
@@ -803,28 +787,32 @@ textarea {
 .number-input input {
   color: var(--text-color);
   border: none;
-  padding: 0px 8px 0;
+  padding: 0;
   width: 42px;
-  height: 24px;
+  height: 32px;
   font-size: 14px;
-  text-align: center;
-  vertical-align: bottom;
   background-color: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
 }
 .number-input .xy-iconfont {
-  display: inline-block;
-  width: 24px;
-  height: 24px;
-  border-radius: 6px;
-  background-color: var(--color-ede);
-  font-size: 24px;
-  color: var(--text-description-color);
-  text-align: center;
-  line-height: 24px;
+  display: flex;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  font-size: 16px;
+  border: 1px solid var(--color-controls);
+  align-items: center;
+  justify-content: center;
   cursor: pointer;
 }
 .number-input .xy-iconfont:not(.disabled):hover {
-  color: var(--text-color);
+  background: var(--menu-hover);
+}
+.number-input .xy-iconfont:not(.disabled):active {
+  background: var(--menu-active);
 }
 .number-input .xy-iconfont.disabled {
   opacity: 0.5;
@@ -1006,11 +994,13 @@ textarea {
   margin-top: 4px;
   border-radius: 12px;
   padding: 8px;
-  z-index: 1000;
   max-height: 240px;
+  font-size: 14px;
+  line-height: 20px;
   overflow-y: auto;
   background-color: var(--color-grey-bg);
   box-shadow: var(--box-shadow);
+  z-index: 1000;
 }
 .selector-option.fixed {
   position: fixed;
@@ -1055,21 +1045,26 @@ textarea {
 }
 .selector-search-select {
   position: relative;
+  display: flex;
   width: 100%;
   padding: 9px 48px 9px 16px;
   border-radius: 12px;
   border: 1px solid var(--border-color);
 }
-.selector-search-select:hover {
+.selector-search-select.disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.selector-search-select:not(.disabled):hover {
   border-color: var(--border-hover-color);
 }
-.selector-search-select:active,
-.selector-search-select.active {
+.selector-search-select:not(.disabled):active,
+.selector-search-select:not(.disabled).active {
   border-color: var(--border-hover-color);
   box-shadow: 0 0 0 3px var(--border-active-color);
 }
-.selector-search-select:active .dropdown-icon,
-.selector-search-select.active .dropdown-icon {
+.selector-search-select:not(.disabled):active .dropdown-icon,
+.selector-search-select:not(.disabled).active .dropdown-icon {
   transform: translateY(-50%) rotate(180deg);
 }
 .selector-search-select .selector-search-label {
@@ -1102,7 +1097,8 @@ textarea {
   height: 16px;
 }
 .selector-search-select input {
-  height: 19px;
+  padding: 0;
+  height: 20px;
   width: 100%;
   border: none;
   cursor: default;
@@ -1316,7 +1312,7 @@ body .__react_component_tooltip.type-dark.place-right:after {
   transition: 200ms ease-out all;
 }
 .ui-switch small::before {
-  content: '';
+  content: "";
   position: absolute;
   left: 0;
   top: 0;
@@ -1335,11 +1331,11 @@ body .__react_component_tooltip.type-dark.place-right:after {
 .ui-switch.checked small::before {
   background-color: var(--color-primary);
 }
-.ui-switch:active small::before {
+.ui-switch:active:not(.disabled) small::before {
   left: 0;
   right: -100%;
 }
-.ui-switch.checked:active small::before {
+.ui-switch.checked:active:not(.disabled) small::before {
   right: 0;
   left: -100%;
 }
@@ -1357,7 +1353,7 @@ body .__react_component_tooltip.type-dark.place-right:after {
   right: 10%;
   top: 25%;
   z-index: 0;
-  color: #A9A9A9;
+  color: #a9a9a9;
 }
 .ui-switch .on {
   display: none;
@@ -1390,8 +1386,12 @@ body .__react_component_tooltip.type-dark.place-right:after {
   cursor: pointer;
 }
 .kaihei-auth-switch.disabled {
+  opacity: 0.5;
   cursor: not-allowed;
 }
+.kaihei-auth-switch:not(.disabled) .auth-status-item:hover {
+  background-color: var(--menu-hover);
+}
 .kaihei-auth-switch .auth-status-item {
   flex: 1;
   display: flex;
@@ -1402,9 +1402,6 @@ body .__react_component_tooltip.type-dark.place-right:after {
 .kaihei-auth-switch .auth-status-item .xy-iconfont {
   font-size: 24px;
 }
-.kaihei-auth-switch .auth-status-item:hover {
-  background-color: var(--menu-hover);
-}
 .kaihei-auth-switch .auth-status-item.close-status {
   border-top-left-radius: 8px;
   border-bottom-left-radius: 8px;

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.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\"]}}");
+module.exports = JSON.parse("{\"name\":\"@kaiheila/ui-components\",\"version\":\"0.1.14\",\"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 */
@@ -4454,16 +4454,58 @@ var number_input_NumberInput = /*#__PURE__*/function (_Component) {
           min = _this$props2.min,
           max = _this$props2.max,
           maxLength = _this$props2.maxLength;
+      console.log('console log to chrome min', min);
       return /*#__PURE__*/external_react_default.a.createElement("div", {
         className: "number-input"
       }, /*#__PURE__*/external_react_default.a.createElement("span", {
-        className: external_classnames_default()('xy-iconfont xy-icon-input_number_minus', {
+        className: external_classnames_default()('xy-iconfont', {
           disabled: inputValue <= min
         }),
         onClick: function onClick() {
           return _this2.onConfirm(inputValue - step);
         }
-      }), /*#__PURE__*/external_react_default.a.createElement("input", {
+      }, /*#__PURE__*/external_react_default.a.createElement("svg", {
+        width: "16px",
+        height: "16px",
+        viewBox: "0 0 16 16",
+        version: "1.1"
+      }, /*#__PURE__*/external_react_default.a.createElement("g", {
+        id: "\u5F39\u7A97",
+        stroke: "none",
+        "stroke-width": "1",
+        fill: "none",
+        "fill-rule": "evenodd"
+      }, /*#__PURE__*/external_react_default.a.createElement("g", {
+        id: "\u8FDB\u6B65\u5668",
+        transform: "translate(-635.000000, -255.000000)"
+      }, /*#__PURE__*/external_react_default.a.createElement("g", {
+        id: "\u52A9\u529B\u670D\u52A1\u5668",
+        transform: "translate(333.000000, 41.000000)"
+      }, /*#__PURE__*/external_react_default.a.createElement("g", {
+        id: "\u7F16\u7EC4-2",
+        transform: "translate(24.000000, 164.000000)"
+      }, /*#__PURE__*/external_react_default.a.createElement("g", {
+        id: "\u7F16\u7EC4-39",
+        transform: "translate(270.000000, 42.000000)"
+      }, /*#__PURE__*/external_react_default.a.createElement("g", {
+        id: "\u51CF\u5C11",
+        transform: "translate(8.000000, 8.000000)"
+      }, /*#__PURE__*/external_react_default.a.createElement("rect", {
+        id: "\u77E9\u5F62",
+        x: "0",
+        y: "0",
+        width: "16",
+        height: "16",
+        rx: "4"
+      }), /*#__PURE__*/external_react_default.a.createElement("rect", {
+        id: "\u5F62\u72B6\u7ED3\u5408",
+        fill: "#999999",
+        transform: "translate(8.000000, 8.000000) rotate(-270.000000) translate(-8.000000, -8.000000) ",
+        x: "7",
+        y: "2",
+        width: "2",
+        height: "12"
+      }))))))))), /*#__PURE__*/external_react_default.a.createElement("input", {
         type: "text",
         value: inputValue,
         maxLength: maxLength,
@@ -4473,13 +4515,54 @@ var number_input_NumberInput = /*#__PURE__*/function (_Component) {
           return _this2.onConfirm(target.value);
         }
       }), /*#__PURE__*/external_react_default.a.createElement("span", {
-        className: external_classnames_default()('xy-iconfont xy-icon-input_number_plus', {
+        className: external_classnames_default()('xy-iconfont', {
           disabled: inputValue >= max
         }),
         onClick: function onClick() {
           return _this2.onConfirm(inputValue + step);
         }
-      }));
+      }, /*#__PURE__*/external_react_default.a.createElement("svg", {
+        width: "16px",
+        height: "16px",
+        viewBox: "0 0 16 16",
+        version: "1.1"
+      }, /*#__PURE__*/external_react_default.a.createElement("g", {
+        id: "\u5F39\u7A97",
+        stroke: "none",
+        "stroke-width": "1",
+        fill: "none",
+        "fill-rule": "evenodd"
+      }, /*#__PURE__*/external_react_default.a.createElement("g", {
+        id: "\u8FDB\u6B65\u5668",
+        transform: "translate(-709.000000, -255.000000)"
+      }, /*#__PURE__*/external_react_default.a.createElement("g", {
+        id: "\u52A9\u529B\u670D\u52A1\u5668",
+        transform: "translate(333.000000, 41.000000)"
+      }, /*#__PURE__*/external_react_default.a.createElement("g", {
+        id: "\u7F16\u7EC4-2",
+        transform: "translate(24.000000, 164.000000)"
+      }, /*#__PURE__*/external_react_default.a.createElement("g", {
+        id: "\u7F16\u7EC4-39",
+        transform: "translate(270.000000, 42.000000)"
+      }, /*#__PURE__*/external_react_default.a.createElement("g", {
+        id: "\u63A7\u4EF6/\u8F93\u5165\u6846\u5907\u4EFD-2",
+        transform: "translate(74.000000, 0.000000)"
+      }, /*#__PURE__*/external_react_default.a.createElement("g", {
+        id: "\u6DFB\u52A0",
+        transform: "translate(8.000000, 8.000000)"
+      }, /*#__PURE__*/external_react_default.a.createElement("rect", {
+        id: "\u77E9\u5F62",
+        x: "0",
+        y: "0",
+        width: "16",
+        height: "16",
+        rx: "4"
+      }), /*#__PURE__*/external_react_default.a.createElement("path", {
+        d: "M8,2 C8.55228475,2 9,2.44771525 9,3 L9,7 L13,7 C13.5522847,7 14,7.44771525 14,8 C14,8.55228475 13.5522847,9 13,9 L9,9 L9,13 C9,13.5522847 8.55228475,14 8,14 C7.44771525,14 7,13.5522847 7,13 L7,9 L3,9 C2.44771525,9 2,8.55228475 2,8 C2,7.44771525 2.44771525,7 3,7 L7,7 L7,3 C7,2.44771525 7.44771525,2 8,2 Z",
+        id: "\u5F62\u72B6\u7ED3\u5408",
+        fill: "#999999",
+        transform: "translate(8.000000, 8.000000) rotate(-270.000000) translate(-8.000000, -8.000000) "
+      })))))))))));
     }
   }]);
 
@@ -6003,10 +6086,12 @@ var selector_search_SelectorSearch = /*#__PURE__*/function (_Component) {
           filterData = _this$state.filterData,
           optionsStyle = _this$state.optionsStyle;
       var _this$props2 = this.props,
+          _this$props2$disabled = _this$props2.disabled,
+          disabled = _this$props2$disabled === void 0 ? false : _this$props2$disabled,
           placeholder = _this$props2.placeholder,
           renderOption = _this$props2.renderOption,
-          _this$props2$disabled = _this$props2.disabledValues,
-          disabledValues = _this$props2$disabled === void 0 ? [] : _this$props2$disabled,
+          _this$props2$disabled2 = _this$props2.disabledValues,
+          disabledValues = _this$props2$disabled2 === void 0 ? [] : _this$props2$disabled2,
           _this$props2$labelKey = _this$props2.labelKey,
           labelKey = _this$props2$labelKey === void 0 ? 'label' : _this$props2$labelKey,
           _this$props2$valueKey = _this$props2.valueKey,
@@ -6038,7 +6123,8 @@ var selector_search_SelectorSearch = /*#__PURE__*/function (_Component) {
         className: "selector-search-contain"
       }, /*#__PURE__*/external_react_default.a.createElement("div", {
         className: external_classnames_default()('selector-search-select theme-input-bg-base', {
-          'active': showList
+          'active': showList,
+          disabled: disabled
         }),
         ref: this.selectRef,
         onClick: this.toggle

package/package.json

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