@king-design/react 3.1.4-beta.2 → 3.1.4

package/components/input/search.js

@@ -16,54 +16,42 @@ var typeDefs = {
   size: sizes,
   open: Boolean
 };
-
 var defaults = function defaults() {
   return {
     get placeholder() {
       return _$('请输入关键字');
     },
-
     value: '',
     type: 'default',
     size: 'default',
     open: false
   };
 };
-
 export var Search = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Search, _Component);
-
   function Search() {
     var _context;
-
     var _this;
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.elementRef = createRef();
     _this.inputRef = createRef();
     _this.config = useConfigContext();
     return _this;
   }
-
   var _proto = Search.prototype;
-
   _proto.init = function init() {
     useDocumentClick(this.elementRef, this.hide.bind(this));
   };
-
   _proto.open = function open() {
     this.set('open', true);
     this.inputRef.value.select();
   };
-
   _proto.hide = function hide() {
     this.set('open', false);
   };
-
   _proto.onClickBtn = function onClickBtn() {
     // if the box is open, then submit the form
     if (this.get('open')) {
@@ -72,31 +60,23 @@ export var Search = /*#__PURE__*/function (_Component) {
       this.open();
     }
   };
-
   _proto.onChangeValue = function onChangeValue(v) {
     if (!this.get('open')) return;
     this.set('value', v);
   };
-
   _proto.onSubmit = function onSubmit(e) {
     e.preventDefault();
     this.submit();
   };
-
   _proto.submit = function submit() {
     var _context2;
-
     this.trigger('submit', _trimInstanceProperty(_context2 = this.get('value')).call(_context2));
   };
-
   return Search;
 }(Component);
 Search.template = template;
 Search.typeDefs = typeDefs;
 Search.defaults = defaults;
-
 __decorate([bind], Search.prototype, "onClickBtn", null);
-
 __decorate([bind], Search.prototype, "onChangeValue", null);
-
 __decorate([bind], Search.prototype, "onSubmit", null);

package/components/input/search.vdt.js

@@ -7,19 +7,16 @@ import { getRestProps } from '../utils';
 import { makeSearchStyles } from './styles';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
-
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
-
   var _this$get = this.get(),
-      className = _this$get.className,
-      placeholder = _this$get.placeholder,
-      value = _this$get.value,
-      type = _this$get.type,
-      size = _this$get.size,
-      open = _this$get.open;
-
+    className = _this$get.className,
+    placeholder = _this$get.placeholder,
+    value = _this$get.value,
+    type = _this$get.type,
+    size = _this$get.size,
+    open = _this$get.open;
   var k = this.config.k;
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-search"] = true, _classNameObj[className] = className, _classNameObj[k + "-open"] = open, _classNameObj[k + "-hide"] = !open, _classNameObj[k + "-" + type] = type, _classNameObj[makeSearchStyles(k)] = true, _classNameObj);
   return _$cv('form', _extends({}, getRestProps(this), {

package/components/input/styles.js

@@ -10,80 +10,60 @@ var defaults = deepDefaults({
   get transition() {
     return theme.transition.middle;
   },
-
   get fontSize() {
     return theme.default.fontSize;
   },
-
   get height() {
     return theme.default.height;
   },
-
   width: '300px',
-
   get border() {
     return "1px solid " + theme.color.border;
   },
-
   get paddingGap() {
     return theme.default.padding;
   },
-
   bgColor: '#fff',
-
   get color() {
     return theme.color.text;
   },
-
   get focusBorder() {
     return "1px solid " + theme.color.primary;
   },
-
   // get hoverBorder() { return `1px solid ${theme.color.darkBorder}` },
   get hoverBorder() {
     return "1px solid " + theme.color.primary;
   },
-
   get borderRadius() {
     return theme.borderRadius;
   },
-
   get placeholderColor() {
     return theme.color.placeholder;
   },
-
   // clearable
   get clearIconColor() {
     return theme.color.placeholder;
   },
-
   clearIconGap: '3px',
-
   // textarea
   get textareaPadding() {
     return "6px " + input.paddingGap;
   },
-
   // group
   get groupBgColor() {
     return theme.color.bg;
   },
-
   groupPaddingGap: '16px',
-
   // disabled
   get disabledBorderColor() {
     return theme.color.disabledBorder;
   },
-
   get disabledColor() {
     return theme.color.disabled;
   },
-
   get disabledBgColor() {
     return theme.color.disabledBg;
   },
-
   // search input
   search: {
     suffixMarginRight: '15px'
@@ -93,18 +73,15 @@ var defaults = deepDefaults({
     get color() {
       return theme.color.lightBlack;
     },
-
     get bgColor() {
       return theme.color.bg;
     }
-
   },
   // count
   count: {
     get color() {
       return theme.color.placeholder;
     }
-
   }
 }, sizes.reduce(function (memo, size) {
   var styles = theme[size];
@@ -112,15 +89,12 @@ var defaults = deepDefaults({
     get fontSize() {
       return styles.fontSize;
     },
-
     get height() {
       return styles.height;
     },
-
     get paddingGap() {
       return styles.padding;
     }
-
   };
   return memo;
 }, {}));
@@ -129,12 +103,11 @@ setDefault(function () {
   input = deepDefaults(theme, {
     input: defaults
   }).input;
-  makeStyles == null ? void 0 : makeStyles.clearCache();
-  makeSearchStyles == null ? void 0 : makeSearchStyles.clearCache();
+  makeStyles == null || makeStyles.clearCache();
+  makeSearchStyles == null || makeSearchStyles.clearCache();
 });
 export var makeStyles = cache(function makeStyles(k) {
   var _context;
-
   return /*#__PURE__*/css("display:inline-block;width:", input.width, ";color:", input.color, ";vertical-align:middle;.", k, "-input-wrapper{display:inline-flex;align-items:center;width:100%;position:relative;border:", input.border, ";background-color:", input.bgColor, ";transition:border ", input.transition, ",background ", input.transition, ",box-shadow ", input.transition, ";border-radius:", input.borderRadius, ";&:hover{border:", input.hoverBorder, ";z-index:1;}}&.", k, "-focus .", k, "-input-wrapper{border:", input.focusBorder, ";z-index:1;}.", k, "-input-inner{flex:1;outline:none;color:inherit;font-size:inherit;border:none;background:transparent;padding:0;width:0;max-width:100%;&::placeholder{color:", input.placeholderColor, ";}}&.", k, "-fluid{width:100%;}.", k, "-input-prefix,.", k, "-input-suffix{display:flex;align-items:center;gap:", input.clearIconGap, ";color:", theme.color.lightBlack, ";position:relative;}.", k, "-input-prefix{margin-right:", input.clearIconGap, ";}.", k, "-input-suffix{margin-left:", input.clearIconGap, ";}.", k, "-input-clear{opacity:0;transition:opacity ", input.transition, ";pointer-events:none;color:", input.clearIconColor, ";}&:hover .", k, "-input-clear.", k, "-input-show{opacity:1;pointer-events:all;}.", k, "-input-show-password{color:", input.clearIconColor, ";}&.", k, "-stack-clear{.", k, "-input-clear{position:absolute;z-index:1;right:0;&.", k, "-input-show+*{transition:opacity ", input.transition, ";}}&:hover{.", k, "-input-clear.", k, "-input-show+*{opacity:0;}}}&.", k, "-group{display:inline-flex;.", k, "-input-wrapper{border-radius:0;flex:1;}.", k, "-input-wrapper:first-child{border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";}.", k, "-input-wrapper:last-child{border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;}}.", k, "-input-prepend,.", k, "-input-append{display:inline-flex;align-items:center;background-color:", input.groupBgColor, ";border:", input.border, ";white-space:nowrap;.", k, "-btn{margin:-1px;&.", k, "-none:hover{background:transparent;}}.", k, "-select{margin:-1px;text-align:left;}}.", k, "-input-prepend{&,.", k, "-btn,.", k, "-select{z-index:1;border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";}}.", k, "-input-append{&,.", k, "-btn,.", k, "-select{z-index:1;border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;}}.", k, "-input-padding{padding:0 ", input.groupPaddingGap, ";}.", k, "-input-prepend{border-right:none;}.", k, "-input-append{border-left:none;}&.", k, "-flat{color:", _flatInstanceProperty(input).color, ";.", k, "-input-wrapper{border:none;background:", _flatInstanceProperty(input).bgColor, ";}}&.", k, "-disabled{color:", input.disabledColor, ";cursor:not-allowed;.", k, "-input-wrapper{border-color:", input.disabledBorderColor, ";background:", input.disabledBgColor, ";}.", k, "-input-inner{cursor:not-allowed;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = input[size];
     var sizeClassName = /*#__PURE__*/css("font-size:", styles.fontSize, ";.", k, "-input-wrapper{height:", styles.height, ";padding:0 ", styles.paddingGap, ";}");

package/components/input/useAutoRows.js

@@ -8,7 +8,6 @@ export function useAutoRows(inputRef) {
   var paddingTop;
   var paddingBottom;
   var isBorderBox;
-
   function getStyles() {
     if (instance.get('type') === 'textarea') {
       var styles = getComputedStyle(inputRef.value);
@@ -18,7 +17,6 @@ export function useAutoRows(inputRef) {
       isBorderBox = styles.boxSizing === 'border-box';
     }
   }
-
   onMounted(getStyles);
   instance.watch('type', getStyles, {
     presented: true
@@ -36,44 +34,34 @@ export function useAutoRows(inputRef) {
     presented: true
   });
   onMounted(adjust);
-
   function adjust() {
     var _instance$get = instance.get(),
-        rows = _instance$get.rows,
-        type = _instance$get.type;
-
+      rows = _instance$get.rows,
+      type = _instance$get.type;
     if (type === 'textarea' && (rows === 'auto' || isObject(rows))) {
       var textarea = inputRef.value;
-      var originheight = textarea.style.height; // we shuold remove height before get scrollHeight,
+      var originheight = textarea.style.height;
+      // we shuold remove height before get scrollHeight,
       // otherwise we cannot shrink the height when we remove the text
-
       textarea.style.height = '';
       var scrollHeight = textarea.scrollHeight;
       var lines = (scrollHeight - paddingTop - paddingBottom) / lineHeight;
       textarea.style.height = originheight;
       var actualLines = lines;
-
       if (rows !== 'auto') {
         var min = rows.min,
-            max = rows.max;
-
+          max = rows.max;
         if (min && lines <= min) {
           actualLines = min;
         }
-
         if (max && lines >= max) {
           actualLines = max;
         }
       }
-
-      height.set(lineHeight * actualLines + (isBorderBox ? paddingTop + paddingBottom + 2
-      /* border */
-      : 0));
+      height.set(lineHeight * actualLines + (isBorderBox ? paddingTop + paddingBottom + 2 /* border */ : 0));
       return;
     }
-
     height.set(0);
   }
-
   return height;
 }

package/components/input/useAutoWidth.js

@@ -13,27 +13,22 @@ export function useAutoWidth() {
     presented: true
   });
   onMounted(adjustWidth);
-
   function adjustWidth() {
     if (instance.get('autoWidth')) {
       nextTick(function () {
         var fakeElem = fakeRef.value;
-
         if (isVisible(fakeElem)) {
           var _width = fakeElem.offsetWidth || 1;
-
           width.set(_width);
         }
       });
     }
   }
-
   return {
     fakeRef: fakeRef,
     width: width
   };
 }
-
 function isVisible(elem) {
   return elem && (elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length);
 }

package/components/input/useFocus.js

@@ -9,11 +9,9 @@ export function useFocus() {
   instance.on('blur', function () {
     return isFocus.set(false);
   });
-
   function focusInputOnClick(e) {
     instance.focus();
   }
-
   return {
     isFocus: isFocus,
     focusInputOnClick: focusInputOnClick

package/components/input/useFrozen.js

@@ -5,29 +5,24 @@ export function useFrozen() {
   var instance = useInstance();
   var inputing = useState(false);
   var originalValue = useState('');
-
   function startInput(e) {
     inputing.set(true);
     originalValue.set(e.target.value);
     instance.trigger('focus', e);
   }
-
   function endInput(e) {
     // ignore dispatch event, #523
     if (e._dispatch) return;
     var propValue = (instance.$vNode.props || EMPTY_OBJ).value;
-
     if (!isNullOrUndefined(propValue)) {
       // set the value as the value that parent passes to it
       instance.set({
         value: propValue
       });
     }
-
     inputing.set(false);
     instance.trigger('blur', e);
   }
-
   function onInput(e) {
     var value = e.target.value;
     instance.set({
@@ -36,7 +31,6 @@ export function useFrozen() {
     originalValue.set(value);
     instance.trigger('input', e);
   }
-
   return {
     inputing: inputing,
     originalValue: originalValue,

package/components/input/useShowPassword.js

@@ -11,17 +11,14 @@ export function useShowPassword() {
   });
   useReceive(['type', 'showPassword'], function () {
     var _instance$get = instance.get(),
-        showPassword = _instance$get.showPassword,
-        type = _instance$get.type;
-
+      showPassword = _instance$get.showPassword,
+      type = _instance$get.type;
     showIcon.set(type === 'password' && !!showPassword);
   });
-
   function toggleShow() {
     isShow.set(!isShow.value);
     type.set(isShow.value ? 'text' : 'password');
   }
-
   return {
     isShow: isShow,
     type: type,

package/components/layout/aside.js

@@ -13,56 +13,44 @@ var typeDefs = {
   width: [Number, String],
   collapsedWidth: [Number, String]
 };
-
 var defaults = function defaults() {
   return {
     theme: 'dark',
     width: defaultWidth
   };
 };
-
 export var Aside = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Aside, _Component);
-
   function Aside() {
     var _context;
-
     var _this;
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.rootLayout = inject(ROOT_LAYOUT);
     _this.config = useConfigContext();
     return _this;
   }
-
   var _proto = Aside.prototype;
-
   _proto.getStyles = function getStyles() {
     var _this$get = this.get(),
-        fixed = _this$get.fixed,
-        width = _this$get.width,
-        collapse = _this$get.collapse,
-        collapsedWidth = _this$get.collapsedWidth;
-
+      fixed = _this$get.fixed,
+      width = _this$get.width,
+      collapse = _this$get.collapse,
+      collapsedWidth = _this$get.collapsedWidth;
     var style = addStyle(this.get('style'), {
       width: !collapse ? getStyle(width) : getCollapseWidth(collapsedWidth)
     });
     if (!fixed) return style;
-
     var _this$rootLayout$pars = this.rootLayout.parse(),
-        hasFixedHeader = _this$rootLayout$pars.hasFixedHeader,
-        headerHeight = _this$rootLayout$pars.headerHeight;
-
+      hasFixedHeader = _this$rootLayout$pars.hasFixedHeader,
+      headerHeight = _this$rootLayout$pars.headerHeight;
     if (!hasFixedHeader) return style;
     return addStyle(style, {
       top: getStyle(headerHeight)
     });
   };
-
   return Aside;
 }(Component);
 Aside.template = template;

package/components/layout/aside.vdt.js

@@ -6,18 +6,15 @@ import { Menu } from '../menu';
 import { makeAsideStyles } from './styles';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
-
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
-
   var _this$get = this.get(),
-      className = _this$get.className,
-      children = _this$get.children,
-      collapse = _this$get.collapse,
-      fixed = _this$get.fixed,
-      theme = _this$get.theme;
-
+    className = _this$get.className,
+    children = _this$get.children,
+    collapse = _this$get.collapse,
+    fixed = _this$get.fixed,
+    theme = _this$get.theme;
   var k = this.config.k;
   var vNodes = mapChildren(children, function (vNode) {
     if (vNode.tag === Menu) {
@@ -27,7 +24,6 @@ export default function ($props, $blocks, $__proto__) {
       });
       return _$ce(2, 'div', vNodeClone, 0, _$cn(k + "-layout-wrapper"));
     }
-
     return vNode;
   });
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-layout-aside"] = true, _classNameObj[k + "-collapsed"] = collapse, _classNameObj[k + "-fixed"] = fixed, _classNameObj[k + "-" + theme] = true, _classNameObj[className] = className, _classNameObj[makeAsideStyles(k)] = true, _classNameObj);

package/components/layout/body.js

@@ -8,47 +8,35 @@ import { useConfigContext } from '../config';
 import { makeBodyStyles } from './styles';
 export var Body = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Body, _Component);
-
   function Body() {
     var _context;
-
     var _this;
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.layout = inject(LAYOUT);
     _this.config = useConfigContext();
     return _this;
   }
-
   var _proto = Body.prototype;
-
   _proto.init = function init() {
     provide(BODY, this);
   };
-
   _proto.getClassNames = function getClassNames() {
     var _ref;
-
     var _this$get = this.get(),
-        className = _this$get.className;
-
+      className = _this$get.className;
     var k = this.config.k;
     return _ref = {}, _ref[k + "-layout-body"] = true, _ref[className] = className, _ref[makeBodyStyles(k)] = true, _ref;
   };
-
   _proto.getStyles = function getStyles() {
     var style = this.get('style');
-
     var _this$layout$parse = this.layout.parse(),
-        hasFixedAside = _this$layout$parse.hasFixedAside,
-        asideWidth = _this$layout$parse.asideWidth,
-        hasFixedHeader = _this$layout$parse.hasFixedHeader,
-        headerHeight = _this$layout$parse.headerHeight;
-
+      hasFixedAside = _this$layout$parse.hasFixedAside,
+      asideWidth = _this$layout$parse.asideWidth,
+      hasFixedHeader = _this$layout$parse.hasFixedHeader,
+      headerHeight = _this$layout$parse.headerHeight;
     if (!hasFixedAside && !hasFixedHeader) return style;
     return addStyle(style, {
       // FIXME: we must use padding instead of margin, otherwise the table's width is wired
@@ -56,7 +44,6 @@ export var Body = /*#__PURE__*/function (_Component) {
       marginTop: hasFixedHeader ? getStyle(headerHeight) : null
     });
   };
-
   return Body;
 }(Component);
 Body.template = template;

package/components/layout/footer.js

@@ -5,33 +5,24 @@ import template from './template.vdt';
 import { useConfigContext } from '../config';
 export var Footer = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Footer, _Component);
-
   function Footer() {
     var _context;
-
     var _this;
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.config = useConfigContext();
     return _this;
   }
-
   var _proto = Footer.prototype;
-
   _proto.getClassNames = function getClassNames() {
     var _ref;
-
     var _this$get = this.get(),
-        className = _this$get.className;
-
+      className = _this$get.className;
     var k = this.config.k;
     return _ref = {}, _ref[k + "-layout-footer"] = true, _ref[className] = className, _ref;
   };
-
   return Footer;
 }(Component);
 Footer.template = template;

package/components/layout/header.js

@@ -14,63 +14,49 @@ var typeDefs = {
   blur: Boolean,
   boxShadow: Boolean
 };
-
 var defaults = function defaults() {
   return {
     height: defaultHeight,
     theme: 'dark'
   };
 };
-
 export var Header = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Header, _Component);
-
   function Header() {
     var _context;
-
     var _this;
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.rootLayout = inject(ROOT_LAYOUT);
     _this.config = useConfigContext();
     return _this;
   }
-
   var _proto = Header.prototype;
-
   _proto.getClassNames = function getClassNames() {
     var _ref;
-
     var _this$get = this.get(),
-        className = _this$get.className,
-        fixed = _this$get.fixed,
-        theme = _this$get.theme,
-        blur = _this$get.blur,
-        boxShadow = _this$get.boxShadow;
-
+      className = _this$get.className,
+      fixed = _this$get.fixed,
+      theme = _this$get.theme,
+      blur = _this$get.blur,
+      boxShadow = _this$get.boxShadow;
     var k = this.config.k;
     return _ref = {}, _ref[k + "-layout-header"] = true, _ref[k + "-fixed"] = fixed, _ref[k + "-blur"] = blur, _ref[k + "-box-shadow"] = boxShadow, _ref[k + "-" + theme] = true, _ref[className] = className, _ref[makeHeaderStyles(k)] = true, _ref;
   };
-
   _proto.getStyles = function getStyles() {
     var _this$get2 = this.get(),
-        style = _this$get2.style,
-        height = _this$get2.height;
-
+      style = _this$get2.style,
+      height = _this$get2.height;
     var _this$rootLayout$pars = this.rootLayout.parse(),
-        hasFixedAside = _this$rootLayout$pars.hasFixedAside,
-        asideWidth = _this$rootLayout$pars.asideWidth;
-
+      hasFixedAside = _this$rootLayout$pars.hasFixedAside,
+      asideWidth = _this$rootLayout$pars.asideWidth;
     return addStyle(style, {
       height: getStyle(height),
       left: hasFixedAside ? getStyle(asideWidth) : null
     });
   };
-
   return Header;
 }(Component);
 Header.template = template;