@king-design/intact 3.1.1-beta.2 → 3.1.1

package/components/collapse/index.spec.ts

@@ -11,7 +11,7 @@ describe('Collapse', () => {
         this.timeout(0);
         const [instance, element] = mount(BasicDemo);
 
-        const [title1, title2, title3] = element.querySelectorAll<HTMLElement>('.k-collapse-title');
+        const [title1, title2, title3] = element.querySelectorAll<HTMLElement>(':scope > .k-collapse-title');
         title2.click();
         await wait(500);
         // the innerHTML is different on travis and local environment

package/components/form/index.md

@@ -29,6 +29,7 @@ sidebar: doc
 | htmlFor | 指定`label`的`for`属性 | `string` | `undefined` | 
 | hideLabel | 是否隐藏`label`，默认会展示`label`，即使该属性为空，也会展示占位元素 | `boolean` | `false` |
 | fluid | `FormItem`的宽度默认是被子元素撑开的，添加该属性可以渲染`100%`的宽度 | `boolean` | `false` |
+| validateOnStart | 是否组件一渲染就开始验证，而不是等用户输入完成再验证 | `boolean` | `false` |
 
 ```ts
 export declare type Method = (value: any, param: any) => boolean | string | Promise<boolean | string>

package/components/form/index.spec.ts

@@ -461,4 +461,21 @@ describe('Form', () => {
         await wait(500);
         expect(element.querySelector('.k-form-error')).to.be.null;
     });
+
+    it('should validate on init when setting validateOnStart prop', async () => {
+        class Demo extends Component {
+            static template = `
+                const {Form, FormItem} = this;
+                <Form ref="form">
+                    <FormItem rules={{required: true}} validateOnStart />
+                </Form>
+            `;
+            Form = Form;
+            FormItem = FormItem;
+        }
+        const [instance, element] = mount(Demo);
+
+        await wait(500);
+        expect(element.querySelector('.k-form-error')).to.be.exist;
+    });
 });

package/components/form/item.ts

@@ -20,6 +20,7 @@ export interface FormItemProps {
     htmlFor?: string
     hideLabel?: boolean
     fluid?: boolean
+    validateOnStart?: boolean
 }
 
 export interface FormItemEvents {
@@ -52,6 +53,7 @@ const typeDefs: Required<TypeDefs<FormItemProps>> = {
     htmlFor: String,
     hideLabel: Boolean,
     fluid: Boolean,
+    validateOnStart: Boolean,
 };
 
 export class FormItem extends Component<FormItemProps, FormItemEvents, FormItemBlocks> {

package/components/form/useDirty.ts

@@ -10,6 +10,10 @@ export function useDirty(
     const instance = useInstance() as FormItem;
     const isDirty = useState(false);
 
+    if (instance.get('validateOnStart')) {
+        dirty();
+    }
+
     function onChange(e: Event) {
         dirty();
         instance.trigger('change', e);

package/components/input/styles.ts

@@ -304,10 +304,11 @@ export function makeStyles(k: string) {
         .${k}-input-fake {
             left: 0;
             top: 0;
-            right: 0;
             position: absolute;
             overflow: hidden;
-            width: 100%;
+            // should not specify width
+            // right: 0;
+            // width: 100%;
             visibility: hidden;
             white-space: nowrap;
         }

package/components/popover/demos/basic.md

@@ -14,6 +14,7 @@ import {Popover, Button} from 'kpc';
         ev-ok={this.ok}
         ev-cancel={this.cancel}
         ref="popover1"
+        size="small"
     >
         <Button>删除</Button>
     </Popover>

package/components/popover/styles.ts

@@ -10,6 +10,9 @@ const defaults = {
         fontSize: '14px',
         lineHeight: '20px',
         fontWeight: 500,
+    },
+    small: {
+        width: '240px',
     }
 };
 
@@ -41,5 +44,10 @@ export default function makeStyles(k: string) {
             .${k}-tooltip-footer {
                 text-align: right;
             }
+            &.${k}-small {
+                padding: ${popover.padding};
+                width: ${popover.small.width};
+            }
+        }
     `;
 }

package/es/components/collapse/index.spec.js

@@ -16,7 +16,7 @@ describe('Collapse', function () {
           case 0:
             this.timeout(0);
             _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
-            _element$querySelecto = element.querySelectorAll('.k-collapse-title'), title1 = _element$querySelecto[0], title2 = _element$querySelecto[1], title3 = _element$querySelecto[2];
+            _element$querySelecto = element.querySelectorAll(':scope > .k-collapse-title'), title1 = _element$querySelecto[0], title2 = _element$querySelecto[1], title3 = _element$querySelecto[2];
             title2.click();
             _context.next = 6;
             return wait(500);

package/es/components/form/index.spec.js

@@ -1362,4 +1362,47 @@ describe('Form', function () {
       }
     }, _callee8);
   })));
+  it('should validate on init when setting validateOnStart prop', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
+    var Demo, _mount9, instance, element;
+
+    return _regeneratorRuntime.wrap(function _callee9$(_context13) {
+      while (1) {
+        switch (_context13.prev = _context13.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component4) {
+              _inheritsLoose(Demo, _Component4);
+
+              function Demo() {
+                var _context12;
+
+                var _this4;
+
+                for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+                  args[_key4] = arguments[_key4];
+                }
+
+                _this4 = _Component4.call.apply(_Component4, _concatInstanceProperty(_context12 = [this]).call(_context12, args)) || this;
+                _this4.Form = Form;
+                _this4.FormItem = FormItem;
+                return _this4;
+              }
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const {Form, FormItem} = this;\n                <Form ref=\"form\">\n                    <FormItem rules={{required: true}} validateOnStart />\n                </Form>\n            ";
+            _mount9 = mount(Demo), instance = _mount9[0], element = _mount9[1];
+            _context13.next = 5;
+            return wait(500);
+
+          case 5:
+            expect(element.querySelector('.k-form-error')).to.be.exist;
+
+          case 6:
+          case "end":
+            return _context13.stop();
+        }
+      }
+    }, _callee9);
+  })));
 });

package/es/components/form/item.d.ts

@@ -10,6 +10,7 @@ export interface FormItemProps {
     htmlFor?: string;
     hideLabel?: boolean;
     fluid?: boolean;
+    validateOnStart?: boolean;
 }
 export interface FormItemEvents {
     change: [Event];

package/es/components/form/item.js

@@ -24,7 +24,8 @@ var typeDefs = {
   label: String,
   htmlFor: String,
   hideLabel: Boolean,
-  fluid: Boolean
+  fluid: Boolean,
+  validateOnStart: Boolean
 };
 export var FormItem = /*#__PURE__*/function (_Component) {
   _inheritsLoose(FormItem, _Component);

package/es/components/form/useDirty.js

@@ -4,6 +4,10 @@ export function useDirty(getValidate) {
   var instance = useInstance();
   var isDirty = useState(false);
 
+  if (instance.get('validateOnStart')) {
+    dirty();
+  }
+
   function onChange(e) {
     dirty();
     instance.trigger('change', e);

package/es/components/input/styles.js

@@ -139,7 +139,7 @@ export function makeStyles(k) {
     return /*#__PURE__*/css("&.", k, "-", size, "{", sizeClassName, ";}");
   }), "&.", k, "-inline{.", k, "-input-wrapper{height:auto;border:none;border-radius:0;padding:0;}}&.", k, "-type-textarea{.", k, "-input-wrapper{display:inline-block;padding:0;height:auto;}.", k, "-textarea{width:100%;padding:", input.textareaPadding, ";line-height:1.5;vertical-align:top;}.", k, "-input-suffix{margin:0;justify-content:flex-end;}}", _mapInstanceProperty(_context = Input.typeDefs.resize).call(_context, function (type) {
     return /*#__PURE__*/css("&.", k, "-resize-", type, "{.", k, "-textarea{resize:", type, ";}}");
-  }), ".", k, "-input-fake{left:0;top:0;right:0;position:absolute;overflow:hidden;width:100%;visibility:hidden;white-space:nowrap;}&.", k, "-auto-width{width:auto;max-width:100%;}.", k, "-input-count{color:", input.count.color, ";}");
+  }), ".", k, "-input-fake{left:0;top:0;position:absolute;overflow:hidden;visibility:hidden;white-space:nowrap;}&.", k, "-auto-width{width:auto;max-width:100%;}.", k, "-input-count{color:", input.count.color, ";}");
 }
 export function makeSearchStyles(k) {
   return /*#__PURE__*/css("position:relative;display:inline-block;.", k, "-input{transition:width ", input.transition, ";}.", k, "-btn{position:absolute;top:0;right:0;z-index:1;}&.", k, "-default .", k, "-btn:hover{background:transparent;}.", k, "-input-suffix{margin-right:", input.search.suffixMarginRight, ";}&.", k, "-hide{", _mapInstanceProperty(sizes).call(sizes, function (size) {

package/es/components/popover/styles.js

@@ -9,6 +9,9 @@ var defaults = {
     fontSize: '14px',
     lineHeight: '20px',
     fontWeight: 500
+  },
+  small: {
+    width: '240px'
   }
 };
 var popover;
@@ -18,5 +21,5 @@ setDefault(function () {
   }).popover;
 });
 export default function makeStyles(k) {
-  return /*#__PURE__*/css("&.", k, "-tooltip-content.", k, "-popover{width:", popover.width, ";padding:", popover.padding, ";.", k, "-popover-title{display:flex;align-items:center;font-size:", popover.title.fontSize, ";line-height:", popover.title.lineHeight, ";font-weight:", popover.title.fontWeight, ";}.", k, "-popover-icon{margin-right:", popover.gap, ";}.", k, "-popover-content{margin-top:", popover.gap, ";}.", k, "-tooltip-footer{text-align:right;}}");
+  return /*#__PURE__*/css("&.", k, "-tooltip-content.", k, "-popover{width:", popover.width, ";padding:", popover.padding, ";.", k, "-popover-title{display:flex;align-items:center;font-size:", popover.title.fontSize, ";line-height:", popover.title.lineHeight, ";font-weight:", popover.title.fontWeight, ";}.", k, "-popover-icon{margin-right:", popover.gap, ";}.", k, "-popover-content{margin-top:", popover.gap, ";}.", k, "-tooltip-footer{text-align:right;}&.", k, "-small{padding:", popover.padding, ";width:", popover.small.width, ";}}");
 }

package/es/index.d.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.1.1-beta.2
+ * @king-design v3.1.1
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -60,4 +60,4 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export declare const version = "3.1.1-beta.2";
+export declare const version = "3.1.1";

package/es/index.js

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.1.1-beta.2
+ * @king-design v3.1.1
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -62,5 +62,5 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export var version = '3.1.1-beta.2';
+export var version = '3.1.1';
 /* generate end */

package/es/site/data/components/popover/demos/basic/react.js

@@ -41,7 +41,8 @@ var Demo = /*#__PURE__*/function (_React$Component) {
       onCancel: this.cancel,
       ref: function ref(i) {
         return _this2.popover1 = i;
-      }
+      },
+      size: "small"
     }, /*#__PURE__*/React.createElement(Button, null, "\u5220\u9664")), ' ', /*#__PURE__*/React.createElement(Popover, {
       title: "\u786E\u5B9A\u5220\u9664\uFF1F",
       content: "\u8FD9\u662F\u4E00\u6BB5\u63CF\u8FF0\u6587\u5B57",

package/index.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.1.1-beta.2
+ * @king-design v3.1.1
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -65,6 +65,6 @@ export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
 
-export const version = '3.1.1-beta.2';
+export const version = '3.1.1';
 
 /* generate end */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@king-design/intact",
-  "version": "3.1.1-beta.2",
+  "version": "3.1.1",
   "description": "A component library written in Intact for Intact, Vue, React and Angular",
   "main": "es/index.js",
   "engines": {
@@ -179,7 +179,7 @@
   "dependencies": {
     "@babel/runtime-corejs3": "^7.16.0",
     "@emotion/css": "^11.5.0",
-    "@king-design/react": "^3.1.1-beta.2",
+    "@king-design/react": "^3.1.1",
     "dayjs": "^1.10.7",
     "enquire.js": "^2.1.6",
     "intact": "^3.0.19",