@king-design/vue 3.6.0-beta.0 → 3.6.1

package/components/select/menu.js

@@ -16,7 +16,7 @@ export var SelectMenu = /*#__PURE__*/function (_Component) {
     }
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.select = inject(SELECT);
-    _this.card = useCard(_this.select.label.activeIndices);
+    _this.card = useCard(_this.select.label.activeIndices, _this.select.input.keywords);
     _this.searchable = useSearchable();
     _this.config = useConfigContext();
     return _this;

package/components/select/option.js

@@ -40,7 +40,8 @@ export var Option = /*#__PURE__*/function (_Component) {
       select.set('value', this.get('value'));
     } else {
       var values = select.get('value');
-      if (keepKeywords && isCreated && Array.isArray(values) && _includesInstanceProperty(values).call(values, value)) {
+      if (!keepKeywords && isCreated && Array.isArray(values) && _includesInstanceProperty(values).call(values, value)) {
+        select.resetKeywords();
         return;
       }
       values = toggleArray(values, value);

package/components/select/select.js

@@ -23,7 +23,8 @@ var typeDefs = _extends({}, BaseSelect.typeDefs, {
 });
 var defaults = function defaults() {
   return _extends({}, BaseSelect.defaults(), {
-    labelMap: new _Map()
+    labelMap: new _Map(),
+    keepKeywords: true
   });
 };
 export var Select = /*#__PURE__*/function (_BaseSelect) {

package/components/select/styles.d.ts

@@ -1,4 +1,83 @@
+import { Sizes } from '../../styles/utils';
 import '../../styles/global';
+type SizeStyles = {
+    padding: string;
+    height: string;
+    fontSize: string;
+};
+declare const defaults: {
+    readonly transition: string;
+    width: string;
+    readonly height: string;
+    bgColor: string;
+    readonly fontSize: string;
+    readonly border: string;
+    readonly focusBorder: string;
+    readonly hoverBorder: string;
+    readonly activeColor: string;
+    readonly borderRadius: string;
+    suffixGap: string;
+    clearGap: string;
+    readonly placeholderColor: string;
+    disabled: {
+        readonly color: string;
+        readonly bgColor: string;
+        readonly borderColor: string;
+    };
+    group: {
+        readonly labelColor: string;
+        labelPadding: string;
+    };
+    card: {
+        height: string;
+        readonly itemHoverColor: string;
+        itemHoverBgColor: string;
+    };
+    multiple: {
+        checkmark: {
+            fontSize: string;
+        };
+    };
+    tag: {
+        margin: string;
+        padding: string;
+        readonly borderRadius: string;
+        readonly bgColor: string;
+        disabledBgColor: string;
+        delete: {
+            gap: string;
+            fontSize: string;
+            readonly color: string;
+        };
+    };
+    menuMaxHeight: string;
+    empty: {
+        padding: string;
+        readonly color: string;
+    };
+    searchable: {
+        padding: string;
+        headerGap: string;
+        readonly border: string;
+        header: {
+            padding: string;
+            gap: string;
+            btnPadding: string;
+            btnGap: string;
+        };
+        optionPadding: string;
+        footer: {
+            padding: string;
+            gap: string;
+            btnGap: string;
+        };
+    };
+    flat: {
+        readonly color: string;
+    };
+} & Record<Sizes, SizeStyles>;
+declare let select: typeof defaults;
+export { select };
 export declare const makeStyles: {
     (k: string): string;
     clearCache(): {};

package/components/select/styles.js

@@ -146,6 +146,7 @@ setDefault(function () {
   makeMenuStyles == null || makeMenuStyles.clearCache();
   makeGroupStyles == null || makeGroupStyles.clearCache();
 });
+export { select };
 export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css("display:inline-flex;align-items:center;vertical-align:middle;position:relative;width:", select.width, ";cursor:pointer;outline:none;border:", select.border, ";background:", select.bgColor, ";transition:border ", select.transition, ",background ", select.transition, ",box-shadow ", select.transition, ";border-radius:", select.borderRadius, ";.", k, "-select-main{flex:1;min-width:0;}.", k, "-select-prefix,.", k, "-select-suffix{display:flex;align-items:center;position:relative;}.", k, "-select-suffix{margin-left:", select.suffixGap, ";}.", k, "-select-placeholder{color:", select.placeholderColor, ";user-select:none;}.", k, "-input .", k, "-input-inner{background:transparent;}&.", k, "-fluid{width:100%;}.", k, "-select-clear{opacity:0;transition:opacity ", select.transition, ",color ", select.transition, "!important;pointer-events:none;position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%, -50%);}&:hover{border:", select.hoverBorder, ";.", k, "-select-clear.", k, "-show{opacity:1;pointer-events:all;+.", k, "-select-suffix-icon{opacity:0;}}}.", k, "-select-suffix-icon{display:inline-flex;align-items:center;transition:opacity ", select.transition, ";}.", k, "-select-arrow{display:inline-block;transition:transform ", select.transition, ";}&.", k, "-dropdown-open{border:", select.focusBorder, ";.", k, "-select-arrow{transform:rotateX(180deg);}}&:focus{outline:none;border:", select.focusBorder, ";}.", k, "-tags{padding:3px 0;}.", k, "-tag{word-break:break-word;height:auto;max-width:calc(100% - ", getRight(select.tag.margin), " - 1px);}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = select[size];

package/components/select/useCard.d.ts

@@ -1,8 +1,9 @@
 import { Children, NonNullableRefObject } from 'intact-vue-next';
-export declare function useCard(defaultActiveIndex: NonNullableRefObject<number[]>): {
-    process: (children: Children) => {
+import { State } from '../../hooks/useState';
+export declare function useCard(defaultActiveIndex: NonNullableRefObject<number[]>, keywords: State<string>): {
+    process: (children: Children, isSearching: boolean) => {
         labels: Children[] | import('intact-vue-next').Block<any>[];
         group: Children[];
     };
-    activeIndex: import("../../hooks/useState").State<number>;
+    activeIndex: State<number>;
 };

package/components/select/useCard.js

@@ -2,11 +2,22 @@ import { useInstance } from 'intact-vue-next';
 import { eachChildren, isComponentVNode, last } from '../utils';
 import { EMPTY_OBJ } from 'intact-shared';
 import { OptionGroup } from './group';
-import { useState } from '../../hooks/useState';
-export function useCard(defaultActiveIndex) {
-  var children = useInstance().get('children');
+import { useState, watchState } from '../../hooks/useState';
+export function useCard(defaultActiveIndex, keywords) {
+  var instance = useInstance();
   var activeIndex = useState(last(defaultActiveIndex.value) || 0);
-  function process(children) {
+  watchState(keywords, function (keywords) {
+    if (keywords) {
+      activeIndex.set(0);
+    } else {
+      setDefaultActiveIndex();
+    }
+  });
+  instance.select.on('show', setDefaultActiveIndex);
+  function setDefaultActiveIndex() {
+    activeIndex.set(last(defaultActiveIndex.value) || 0);
+  }
+  function process(children, isSearching) {
     var groupLabels = [];
     var _children = [];
     var index = 0;

package/components/select/useInput.d.ts

@@ -1,6 +1,6 @@
 import { State } from '../../hooks/useState';
 import type { Input } from '../input';
-export declare function useInput(resetKeywords: (keywords: State<string>) => void): {
+export declare function useInput(resetKeywords: () => void): {
     onInput: (value: string) => void;
     keywords: State<string>;
     inputRef: import('intact-vue-next').RefObject<Input<string | number>>;

package/components/select/useInput.js

@@ -29,9 +29,9 @@ export function useInput(resetKeywords) {
   component.on('$changed:show', function (show) {
     if (show) {
       focusInput();
-      resetKeywords(keywords);
+      resetKeywords();
     } else if (component.get('multiple')) {
-      resetKeywords(keywords);
+      resetKeywords();
     }
   });
   component.on('$changed:value', function () {
@@ -45,8 +45,8 @@ export function useInput(resetKeywords) {
        * don't reset keywords on multiple mode for continue selection
        * https://github.com/ksc-fe/kpc/issues/983
        */
-      if (keepKeywords) {
-        resetKeywords(keywords);
+      if (!keepKeywords) {
+        resetKeywords();
       }
     }
   });

package/components/spinner/index.spec.js

@@ -321,100 +321,138 @@ describe('Spinner', function () {
       }
     }, _callee6);
   })));
-  it('dynamic step', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
-    var _mount8, instance, element, btns, test, _test;
-    return _regeneratorRuntime.wrap(function _callee8$(_context11) {
-      while (1) switch (_context11.prev = _context11.next) {
+  it('forceStep without min value', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+    var Demo, _mount8, instance, element;
+    return _regeneratorRuntime.wrap(function _callee7$(_context10) {
+      while (1) switch (_context10.prev = _context10.next) {
         case 0:
-          _test = function _test3() {
-            _test = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7(index) {
+          Demo = /*#__PURE__*/function (_Component3) {
+            _inheritsLoose(Demo, _Component3);
+            function Demo() {
               var _context9;
-              var _ref8, prev, next, model;
-              return _regeneratorRuntime.wrap(function _callee7$(_context10) {
-                while (1) switch (_context10.prev = _context10.next) {
+              var _this3;
+              for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+                args[_key3] = arguments[_key3];
+              }
+              _this3 = _Component3.call.apply(_Component3, _concatInstanceProperty(_context9 = [this]).call(_context9, args)) || this;
+              _this3.Spinner = Spinner;
+              return _this3;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                value: 1
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "const {Spinner} = this;\n                <Spinner step={1} v-model=\"value\" forceStep />\n            ";
+          _mount8 = mount(Demo), instance = _mount8[0], element = _mount8[1];
+          expect(instance.get('value')).to.eql(1);
+          instance.set('value', -1);
+          _context10.next = 7;
+          return wait();
+        case 7:
+          expect(instance.get('value')).to.eql(-1);
+        case 8:
+        case "end":
+          return _context10.stop();
+      }
+    }, _callee7);
+  })));
+  it('dynamic step', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
+    var _mount9, instance, element, btns, test, _test;
+    return _regeneratorRuntime.wrap(function _callee9$(_context13) {
+      while (1) switch (_context13.prev = _context13.next) {
+        case 0:
+          _test = function _test3() {
+            _test = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8(index) {
+              var _context11;
+              var _ref9, prev, next, model;
+              return _regeneratorRuntime.wrap(function _callee8$(_context12) {
+                while (1) switch (_context12.prev = _context12.next) {
                   case 0:
-                    _ref8 = index === 1 ? btns : _sliceInstanceProperty(_context9 = _Array$from(btns)).call(_context9, 2), prev = _ref8[0], next = _ref8[1];
+                    _ref9 = index === 1 ? btns : _sliceInstanceProperty(_context11 = _Array$from(btns)).call(_context11, 2), prev = _ref9[0], next = _ref9[1];
                     model = "value" + index;
                     prev.click();
-                    _context10.next = 5;
+                    _context12.next = 5;
                     return wait();
                   case 5:
                     expect(instance.get(model)).to.eql(-1);
                     instance.set(model, -5);
-                    _context10.next = 9;
+                    _context12.next = 9;
                     return wait();
                   case 9:
                     prev.click();
-                    _context10.next = 12;
+                    _context12.next = 12;
                     return wait();
                   case 12:
                     expect(instance.get(model)).to.eql(-10);
                     next.click();
-                    _context10.next = 16;
+                    _context12.next = 16;
                     return wait();
                   case 16:
                     expect(instance.get(model)).to.eql(-5);
                     next.click();
-                    _context10.next = 20;
+                    _context12.next = 20;
                     return wait();
                   case 20:
                     expect(instance.get(model)).to.eql(-4);
                     instance.set(model, 5);
-                    _context10.next = 24;
+                    _context12.next = 24;
                     return wait();
                   case 24:
                     next.click();
-                    _context10.next = 27;
+                    _context12.next = 27;
                     return wait();
                   case 27:
                     expect(instance.get(model)).to.eql(10);
                     prev.click();
-                    _context10.next = 31;
+                    _context12.next = 31;
                     return wait();
                   case 31:
                     expect(instance.get(model)).to.eql(5);
                     prev.click();
-                    _context10.next = 35;
+                    _context12.next = 35;
                     return wait();
                   case 35:
                     expect(instance.get(model)).to.eql(4);
                   case 36:
                   case "end":
-                    return _context10.stop();
+                    return _context12.stop();
                 }
-              }, _callee7);
+              }, _callee8);
             }));
             return _test.apply(this, arguments);
           };
           test = function _test2(_x) {
             return _test.apply(this, arguments);
           };
-          _mount8 = mount(DynamicStepDemo), instance = _mount8[0], element = _mount8[1];
+          _mount9 = mount(DynamicStepDemo), instance = _mount9[0], element = _mount9[1];
           btns = element.querySelectorAll('.k-btn');
-          _context11.next = 6;
+          _context13.next = 6;
           return test(1);
         case 6:
         case "end":
-          return _context11.stop();
+          return _context13.stop();
       }
-    }, _callee8);
+    }, _callee9);
   })));
-  it('should set correct value with dynamic step when min is not equal 0', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
-    var Demo, _mount9, instance, element, _element$querySelecto5, prev, next;
-    return _regeneratorRuntime.wrap(function _callee9$(_context13) {
-      while (1) switch (_context13.prev = _context13.next) {
+  it('should set correct value with dynamic step when min is not equal 0', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
+    var Demo, _mount10, instance, element, _element$querySelecto5, prev, next;
+    return _regeneratorRuntime.wrap(function _callee10$(_context15) {
+      while (1) switch (_context15.prev = _context15.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component3) {
-            _inheritsLoose(Demo, _Component3);
+          Demo = /*#__PURE__*/function (_Component4) {
+            _inheritsLoose(Demo, _Component4);
             function Demo() {
-              var _context12;
-              var _this3;
-              for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-                args[_key3] = arguments[_key3];
+              var _context14;
+              var _this4;
+              for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+                args[_key4] = arguments[_key4];
               }
-              _this3 = _Component3.call.apply(_Component3, _concatInstanceProperty(_context12 = [this]).call(_context12, args)) || this;
-              _this3.Spinner = Spinner;
-              return _this3;
+              _this4 = _Component4.call.apply(_Component4, _concatInstanceProperty(_context14 = [this]).call(_context14, args)) || this;
+              _this4.Spinner = Spinner;
+              return _this4;
             }
             Demo.defaults = function defaults() {
               return {
@@ -424,27 +462,27 @@ describe('Spinner', function () {
             return Demo;
           }(Component);
           Demo.template = "const {Spinner} = this; <Spinner min={30}\n                max={500}\n                step={{100: 10, 500: 50}}\n                v-model=\"value\"\n                forceStep\n            />";
-          _mount9 = mount(Demo), instance = _mount9[0], element = _mount9[1];
+          _mount10 = mount(Demo), instance = _mount10[0], element = _mount10[1];
           _element$querySelecto5 = element.querySelectorAll('.k-btn'), prev = _element$querySelecto5[0], next = _element$querySelecto5[1];
           next.click();
-          _context13.next = 7;
+          _context15.next = 7;
           return wait();
         case 7:
           expect(instance.get('value')).to.eql(150);
           prev.click();
-          _context13.next = 11;
+          _context15.next = 11;
           return wait();
         case 11:
           expect(instance.get('value')).to.eql(100);
           prev.click();
-          _context13.next = 15;
+          _context15.next = 15;
           return wait();
         case 15:
           expect(instance.get('value')).to.eql(90);
         case 16:
         case "end":
-          return _context13.stop();
+          return _context15.stop();
       }
-    }, _callee9);
+    }, _callee10);
   })));
 });

package/components/spinner/useValue.js

@@ -78,7 +78,8 @@ export function minMaxStep(value, min, max, step) {
   if (value >= max) return max;
   if (value <= min) return min;
   if (step) {
-    value = Number((Math.round((value - min) / step) * step + min).toFixed(10));
+    var _min = min === -Infinity ? 0 : min;
+    value = Number((Math.round((value - _min) / step) * step + _min).toFixed(10));
     // value = Number((Math.round(value / step) * step).toFixed(10))
     return minMaxStep(value, min, max, null);
   }

package/components/table/index.spec.js

@@ -5,6 +5,7 @@ import _JSON$stringify from "@babel/runtime-corejs3/core-js/json/stringify";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js/instance/find-index";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
+import _Array$from from "@babel/runtime-corejs3/core-js/array/from";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import { __decorate } from "tslib";
 import BasicDemo from '~/components/table/demos/basic';
@@ -784,21 +785,20 @@ describe('Table', function () {
           return wait();
         case 6:
           expect(element.innerHTML).to.matchSnapshot();
-          debugger;
           expect(table.getCheckedData()).to.have.lengthOf(8);
           arrow = element.querySelector('.k-table-arrow');
           arrow.click();
-          _context21.next = 13;
+          _context21.next = 12;
           return wait();
-        case 13:
+        case 12:
           expect(element.innerHTML).to.matchSnapshot();
           arrow.click();
-          _context21.next = 17;
+          _context21.next = 16;
           return wait();
-        case 17:
+        case 16:
           expect(element.innerHTML).to.matchSnapshot();
           expect(table.getCheckedData()).to.have.lengthOf(8);
-        case 19:
+        case 18:
         case "end":
           return _context21.stop();
       }
@@ -1102,4 +1102,82 @@ describe('Table', function () {
       }
     }, _callee24);
   })));
+  it('fixHeader with Affix header scroll sync', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee25() {
+    var Demo, _mount27, instance, element, scrollContainer, affixWrapper1, affixWrapper2, affixWrapper3;
+    return _regeneratorRuntime.wrap(function _callee25$(_context32) {
+      while (1) switch (_context32.prev = _context32.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component6) {
+            _inheritsLoose(Demo, _Component6);
+            function Demo() {
+              var _context31;
+              var _this5;
+              for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+                args[_key5] = arguments[_key5];
+              }
+              _this5 = _Component6.call.apply(_Component6, _concatInstanceProperty(_context31 = [this]).call(_context31, args)) || this;
+              _this5.Table = Table;
+              _this5.TableColumn = TableColumn;
+              return _this5;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                data: _Array$from({
+                  length: 10
+                }, function (_, i) {
+                  return {
+                    name: "Name " + i,
+                    column1: "Column1 " + i,
+                    column2: "Column2 " + i,
+                    column3: "Column3 " + i,
+                    action: "Action " + i
+                  };
+                }),
+                fixHeader: 200,
+                virtual: false,
+                stickScrollbar: false
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const {Table, TableColumn} = this;\n                const {data, fixHeader, virtual, stickScrollbar} = this.get();\n                <Table data={data} fixHeader={fixHeader} virtual={virtual} stickScrollbar={stickScrollbar} ref=\"table\">\n                    <TableColumn fixed=\"left\" key=\"name\" title=\"Name\" width=\"200\" />\n                    <TableColumn key=\"column1\" title=\"Column1\" width=\"300\" />\n                    <TableColumn key=\"column2\" title=\"Column2\" width=\"300\" />\n                    <TableColumn key=\"column3\" title=\"Column3\" width=\"300\" />\n                    <TableColumn fixed=\"right\" key=\"action\" title=\"Action\" width=\"200\" />\n                </Table>\n            ";
+          _mount27 = mount(Demo), instance = _mount27[0], element = _mount27[1]; // Test 1: fixHeader only - scroll left 50px
+          _context32.next = 5;
+          return wait();
+        case 5:
+          scrollContainer = element.querySelector('.k-table-wrapper');
+          scrollContainer.scrollLeft = 50;
+          _context32.next = 9;
+          return wait(100);
+        case 9:
+          affixWrapper1 = element.querySelector('.k-table-affix-header .k-affix-wrapper');
+          expect(affixWrapper1.scrollLeft).to.eql(50);
+          // Test 2: fixHeader + virtual - scroll left 50px more (total 100px)
+          instance.set('virtual', true);
+          _context32.next = 14;
+          return wait();
+        case 14:
+          scrollContainer.scrollLeft = 100;
+          _context32.next = 17;
+          return wait(100);
+        case 17:
+          affixWrapper2 = element.querySelector('.k-table-affix-header .k-affix-wrapper');
+          expect(affixWrapper2.scrollLeft).to.eql(100);
+          // Test 3: stickScrollbar + fixHeader - scroll right 50px (back to 50px)
+          instance.set('stickScrollbar', true);
+          _context32.next = 22;
+          return wait();
+        case 22:
+          scrollContainer.scrollLeft = 50;
+          _context32.next = 25;
+          return wait(100);
+        case 25:
+          affixWrapper3 = element.querySelector('.k-table-affix-header .k-affix-wrapper');
+          expect(affixWrapper3.scrollLeft).to.eql(50);
+        case 27:
+        case "end":
+          return _context32.stop();
+      }
+    }, _callee25);
+  })));
 });

package/components/table/useStickyHeader.js

@@ -17,7 +17,7 @@ export function useStickyHeader(callbacks) {
   });
   // when the scroll element scroll horizontally, scroll the sticky header too 
   callbacks.push(function (scrollLeft) {
-    if (isNull(stickHeader.value)) return;
+    if (isNull(stickHeader.value) && !instance.get('fixHeader')) return;
     var affixHeadWrapper = headRef.value.parentElement;
     affixHeadWrapper.scrollLeft = scrollLeft;
   });