@king-design/intact 2.0.1 → 2.0.4

package/components/skeleton/item.vdt

@@ -0,0 +1,28 @@
+import {makeItemStyles} from './style';
+import {getRestProps} from '../utils';
+
+const {type} = this.get();
+
+const classNameObj = {
+    'k-skeleton-item': true,
+    [makeItemStyles()]: true
+};
+
+const ItemklsObj = {
+    'k-skeleton-item-box': true,
+    [`skeleton-item-${type}`]: true
+};
+
+const skeletonItem = <div class={ItemklsObj} {...getRestProps(this)}>
+    <svg
+        v-if={type === 'image'}
+        viewBox="0 0 1024 1024"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M64 896V128h896v768H64z m64-128l192-192 116.352 116.352L640 448l256 307.2V192H128v576z m224-480a96 96 0 1 1-0.064 192.064A96 96 0 0 1 352 288z"
+        />
+    </svg>
+</div>;
+
+<div class={classNameObj}>{skeletonItem}</div>

package/components/skeleton/skeleton.ts

@@ -0,0 +1,33 @@
+import {Component, TypeDefs} from 'intact';
+import template from './skeleton.vdt';
+
+export interface SkeletonProps {
+    loading: boolean
+    animated?: boolean
+    rows?: number
+    avator?: boolean
+    size?: string
+}
+
+export interface SkeletonEvents {}
+
+export interface SkeletonBlocks {}
+
+const typeDefs: Required<TypeDefs<SkeletonProps>> = {
+    loading: Boolean,
+    animated: Boolean,
+    rows: Number,
+    avator: Boolean,
+    size: String
+};
+
+const defaults = (): Partial<SkeletonProps> => ({
+    rows: 2,
+    size: 'large'
+});
+
+export class Skeleton extends Component<SkeletonProps, SkeletonEvents, SkeletonBlocks> {
+    static template = template;
+    static typeDefs = typeDefs;
+    static defaults = defaults;
+}

package/components/skeleton/skeleton.vdt

@@ -0,0 +1,32 @@
+import {SkeletonItem} from './item';
+import {makeStyles, kls} from './style';
+
+const {rows, avator, animated, children, loading, size} = this.get();
+
+const targetRows = typeof rows !== 'number'
+    ? 3
+    : rows < 1
+        ? 1
+        : parseInt(rows);
+
+const skeletonList = Array(targetRows + 2).fill();
+const skeletonItems = <SkeletonItem v-for={skeletonList}></SkeletonItem>;
+
+const classNameObj = {
+    'k-skeleton': true,
+    'k-animated': animated,
+    [makeStyles(size)]: true
+};
+
+<div class={classNameObj} v-if={loading}>
+    <template v-if={children}>
+        <div>{children}</div>
+    </template>
+    <template v-else>
+        <div v-if={avator} class={kls('avator-box')}>
+            <SkeletonItem type="avator"></SkeletonItem>
+            <div class="k-skeleton-items">{skeletonItems}</div>
+        </div>
+        <div class="k-skeleton-items" v-else>{skeletonItems}</div>
+    </template>
+</div>

package/components/skeleton/style.ts

@@ -0,0 +1,105 @@
+import {deepDefaults}  from '../../styles/utils';
+import { theme, setDefault } from '../../styles/theme';
+import {css, keyframes} from '@emotion/css';
+import '../../styles/global';
+
+export const kls = (className: string) => `k-skeleton-${className}`;
+
+type ItemSize = 'default' | 'large' | 'small' | 'mini';
+
+const defaults = {
+    item: {
+        bgColor: '#dcdde0'
+    }
+};
+
+let skeleton: typeof defaults;
+setDefault(() => {
+    skeleton = deepDefaults(theme, {skeleton: defaults}).skeleton;
+});
+
+export function makeStyles(size: ItemSize) {
+    return css`
+        &.k-animated {
+            .${kls('item')} {
+                & > .k-skeleton-item-box {
+                    background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
+                    background-size: 400% 100%;
+                    animation: ${skeletonLoading} 1.4s ease infinite;
+                }
+            }
+        }
+        .k-skeleton-items {
+            .${kls('item')}:first-child {
+                .skeleton-item-text {
+                    width: 33%;
+                }
+            }
+            .${kls('item')}:last-child {
+                .skeleton-item-text {
+                    width: 61%;
+                }
+            }    
+        }
+        .${kls('avator-box')} {
+            display: flex;
+            & > div:last-child {
+                flex-grow: 1;
+                padding-left: 20px;
+            }
+        }
+        .skeleton-item-button,
+        .skeleton-item-input {
+            height: ${theme[size].height}
+        }
+    `;
+}
+
+const skeletonLoading = keyframes`
+    0% {
+        background-position: 100% 50%;
+    }
+    to {
+        background-position: 0 50%;
+    }
+`;
+
+export function makeItemStyles() {
+    const skeletonItem = skeleton.item;
+    return css`
+        & > div {
+            background: ${skeletonItem.bgColor}
+        }        
+        .skeleton-item-text {
+            width: 100%;
+            height: 16px;
+            border-radius: 4px;
+            margin-top: 16px;
+        }
+        .skeleton-item-avator {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+        }
+        .skeleton-item-image {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 200px;
+            height: 200px;
+            & > svg {
+                width: 48px;
+                height: 48px;
+                fill: ${skeletonItem.bgColor};
+            }
+        }
+        .skeleton-item-button {
+            width: 64px;
+            background: ${skeletonItem.bgColor};
+        }
+        .skeleton-item-input {
+            width: 160px;
+            background: ${skeletonItem.bgColor};
+        }
+    `;
+}

package/components/tree/useFilter.ts

@@ -47,11 +47,10 @@ export function useFilter(getNodes: () => Node<Key>[], getExpandedKeys: () => Se
     }
 
     function updateFilterUpward(node: Node<Key> | null) {
-        if (!node) return;
+        if (!node || node.filter) return;
 
         // should expand the node 
         getExpandedKeys().add(node.key);
-        if (node.filter) return;
 
         node.filter = true;
         updateFilterUpward(node.parent);

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

@@ -1,4 +1,6 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import BasicDemo from '~/components/cascader/demos/basic';
 import CustomDemo from '~/components/cascader/demos/custom';
@@ -6,6 +8,8 @@ import ChangeOnSelectDemo from '~/components/cascader/demos/changeOnSelect';
 import LoadDataDemo from '~/components/cascader/demos/loadData';
 import FilterDemo from '~/components/cascader/demos/filterable';
 import { mount, unmount, dispatchEvent, getElement, getElements, wait } from '../../test/utils';
+import { Cascader } from './';
+import { Component } from 'intact';
 describe('Cascader', function () {
   afterEach( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     return _regeneratorRuntime.wrap(function _callee$(_context) {
@@ -278,4 +282,88 @@ describe('Cascader', function () {
       }
     }, _callee7);
   })));
+  it('duplicated sub data', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+    var Demo, _mount7, instance, element, _getElements2, dropdown1, dropdown2, _dropdown1$querySelec4, item1, item2, _dropdown2$querySelec3, item21, dropdown3, _dropdown3$querySelec2, item31;
+
+    return _regeneratorRuntime.wrap(function _callee8$(_context9) {
+      while (1) {
+        switch (_context9.prev = _context9.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component) {
+              _inheritsLoose(Demo, _Component);
+
+              function Demo() {
+                var _context8;
+
+                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(_context8 = [this]).call(_context8, args)) || this;
+                _this.Cascader = Cascader;
+                return _this;
+              }
+
+              Demo.defaults = function defaults() {
+                return {
+                  value: ['beijing', 'haidian'],
+                  data: [{
+                    value: 'beijing',
+                    label: '北京',
+                    children: [{
+                      value: 'haidian',
+                      label: '海淀区'
+                    }]
+                  }, {
+                    value: 'hunan',
+                    label: '湖南',
+                    children: [{
+                      value: 'haidian',
+                      label: '海淀区'
+                    }]
+                  }]
+                };
+              };
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "const {Cascader} = this; <Cascader data={this.get('data')} v-model=\"value\" />";
+            _mount7 = mount(Demo), instance = _mount7[0], element = _mount7[1];
+            dispatchEvent(element, 'click');
+            _context9.next = 6;
+            return wait();
+
+          case 6:
+            _getElements2 = getElements('.k-cascader-menu'), dropdown1 = _getElements2[0], dropdown2 = _getElements2[1];
+            _dropdown1$querySelec4 = dropdown1.querySelectorAll(':scope > .k-dropdown-item'), item1 = _dropdown1$querySelec4[0], item2 = _dropdown1$querySelec4[1];
+            expect(item1.classList.contains('k-selected')).to.be.true;
+            expect(item2.classList.contains('k-selected')).to.be.false;
+            _dropdown2$querySelec3 = dropdown2.querySelectorAll(':scope > .k-dropdown-item'), item21 = _dropdown2$querySelec3[0];
+            expect(item21.classList.contains('k-selected')).to.be.true;
+            dispatchEvent(item2, 'click');
+            _context9.next = 15;
+            return wait();
+
+          case 15:
+            dropdown3 = getElement('.k-cascader-menu');
+            _dropdown3$querySelec2 = dropdown3.querySelectorAll(':scope > .k-dropdown-item'), item31 = _dropdown3$querySelec2[0];
+            expect(item31.classList.contains('k-selected')).to.be.false;
+            dispatchEvent(item31, 'click');
+            _context9.next = 21;
+            return wait();
+
+          case 21:
+            expect(instance.get('value')).to.eql(['hunan', 'haidian']);
+            expect(element.textContent).to.eql('湖南 / 海淀区');
+
+          case 23:
+          case "end":
+            return _context9.stop();
+        }
+      }
+    }, _callee8);
+  })));
 });

package/es/components/cascader/index.vdt.js

@@ -41,7 +41,7 @@ export default function ($props, $blocks, $__proto__) {
       onSelect = _this$value.onSelect,
       toggleShowedValue = _this$value.toggleShowedValue;
 
-  var Options = function Options(data, level, loaded) {
+  var Options = function Options(data, level, loaded, parentSelected) {
     if (!data.length) {
       if (!loaded) {
         return _$cc(Icon, _$tmp0);
@@ -53,7 +53,7 @@ export default function ($props, $blocks, $__proto__) {
     return _mapInstanceProperty(data).call(data, function (item, index) {
       var value = item.value;
       var showed = isShowed(value, level);
-      var selected = isSelected(value, level);
+      var selected = parentSelected && isSelected(value, level);
       var children = item.children;
 
       var Item = function Item() {
@@ -79,7 +79,7 @@ export default function ($props, $blocks, $__proto__) {
         'ev-show': _this.load.bind(null, item),
         'children': [Item(), _$cc(DropdownMenu, {
           'className': _$cn(classNameObj),
-          'children': showed ? Options(children, level + 1, item.loaded) : null
+          'children': showed ? Options(children, level + 1, item.loaded, selected) : null
         })]
       }) : Item();
     });
@@ -100,7 +100,7 @@ export default function ($props, $blocks, $__proto__) {
       return !filterable || !keywords ? _$cc(DropdownMenu, {
         'className': _$cn(classNameObj),
         'key': 'common',
-        'children': Options(data, 0, true)
+        'children': Options(data, 0, true, true)
       }, 'common') : _$cc(DropdownMenu, {
         'key': 'filter',
         'className': _$cn((_$cn2 = {

package/es/components/cascader/useLabel.js

@@ -1,4 +1,3 @@
-import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
 import { useInstance } from 'intact';
 import { useBaseLabel } from '../select/useBaseLabel';
 export function useLabel() {
@@ -11,27 +10,24 @@ export function useLabel() {
     var labels = [];
     var length = value.length;
 
-    var loop = function loop(data) {
+    var loop = function loop(data, level) {
+      if (level === length) return;
+
       for (var i = 0; i < data.length; i++) {
         var item = data[i];
 
-        if (_includesInstanceProperty(value).call(value, item.value)) {
+        if (item.value === value[level]) {
           labels.push(item.label);
+          var children = item.children;
 
-          if (labels.length === length) {
-            return;
+          if (children) {
+            loop(children, level + 1);
           }
         }
-
-        var children = item.children;
-
-        if (children) {
-          loop(children);
-        }
       }
     };
 
-    loop(data);
+    loop(data, 0);
     return labels.length ? format(labels) : null;
   }
 

package/es/components/dropdown/dropdown.js

@@ -163,9 +163,11 @@ export var Dropdown = /*#__PURE__*/function (_Component) {
 
   _proto.normalizeTriggerProps = function normalizeTriggerProps(props) {
     // if use kpc in react or vue, normalize props by Wrapper.props.vnode;
-    if (this.$isReact || this.$isVueNext) {
-      var vnode = props.vnode;
-      if (!vnode) return props;
+    var vnode = props.vnode;
+    if (!vnode) return props; // maybe we render the intact component in react slot property, in this case
+    // the $isReact is false. so use the vnode $$typeof field as gauge
+
+    if (vnode.$$typeof || this.$isVueNext) {
       var _props = vnode.props;
       if (!_props) return props;
       return {
@@ -179,12 +181,10 @@ export var Dropdown = /*#__PURE__*/function (_Component) {
 
       };
     } else if (this.$isVue) {
-      var _vnode = props.vnode;
-      if (!_vnode) return props;
-      var data = _vnode.data;
+      var data = vnode.data;
       var on = data && data.on || EMPTY_OBJ;
       var ret = {
-        vnode: _vnode
+        vnode: vnode
       };
       ['click', 'mouseenter', 'mouseleave', 'contextmenu'].forEach(function (event) {
         var method = on[event];

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

@@ -8,7 +8,7 @@ import BasicDemo, { data as basicDemoData } from '~/components/form/demos/basic'
 import CustomDemo from '~/components/form/demos/custom';
 import VariableDemo from '~/components/form/demos/variable';
 import RemoteDemo from '~/components/form/demos/remote';
-import { mount, unmount, dispatchEvent, wait } from '../../test/utils';
+import { mount, dispatchEvent, wait } from '../../test/utils';
 import { Component } from 'intact';
 import { Form, FormItem } from './';
 import { Input } from '../input';
@@ -29,9 +29,7 @@ RemoteDemo.prototype.validateUserName = function (value) {
 };
 
 describe('Form', function () {
-  afterEach(function () {
-    return unmount();
-  });
+  // afterEach(() => unmount());
   it('validate', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var _mount, instance, element, form, item, input;
 

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

@@ -39,14 +39,14 @@ describe('Menu', function () {
     }, _callee);
   })));
   it('select', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-    var _mount2, instance, element, menu, _element$querySelecto, title, disabledTitle, subTitle;
+    var _mount2, instance, element, _element$querySelecto, title, disabledTitle, subTitle;
 
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
             _mount2 = mount(CollapseDemo), instance = _mount2[0], element = _mount2[1];
-            menu = instance.refs.__test;
+            expect(element.innerHTML).to.matchSnapshot();
             _element$querySelecto = element.querySelectorAll('.k-menu-title'), title = _element$querySelecto[0], disabledTitle = _element$querySelecto[1];
             title.click();
             _context2.next = 6;
@@ -54,14 +54,14 @@ describe('Menu', function () {
 
           case 6:
             expect(element.outerHTML).to.matchSnapshot();
-            expect(menu.get('selectedKey')).to.eql('1');
+            expect(instance.get('selectedKey')).to.eql('1');
             disabledTitle.click();
             _context2.next = 11;
             return wait();
 
           case 11:
             expect(element.outerHTML).to.matchSnapshot();
-            expect(menu.get('selectedKey')).to.eql('1');
+            expect(instance.get('selectedKey')).to.eql('1');
             subTitle = element.querySelector('.k-expanded .k-menu .k-menu-title');
             subTitle.click();
             _context2.next = 17;
@@ -69,9 +69,16 @@ describe('Menu', function () {
 
           case 17:
             expect(element.outerHTML).to.matchSnapshot();
-            expect(menu.get('selectedKey')).to.eql('3-1');
+            expect(instance.get('selectedKey')).to.eql('3-1'); // clear
 
-          case 19:
+            instance.set('selectedKey', '');
+            _context2.next = 22;
+            return wait();
+
+          case 22:
+            expect(element.querySelector('.k-highlighted')).to.be.null;
+
+          case 23:
           case "end":
             return _context2.stop();
         }

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

@@ -18,7 +18,6 @@ export declare class MenuItem extends Component<MenuItemProps, MenuItemEvents> {
     parentMenu: Menu<Key>;
     parentMenuItem: MenuItem | null;
     private expanded;
-    private highlight;
     private dropdown;
     private router;
     init(): void;

package/es/components/menu/item.js

@@ -5,10 +5,11 @@ import { Component, inject, provide } from 'intact';
 import { ROOT_MENU, MENU } from './menu';
 import template from './item.vdt';
 import { bind } from '../utils';
-import { useHighlight } from './useHighlight';
 import { useExpanded } from './useExpanded';
 import { useDropdown } from './useDropdown';
 import { useRouter, navigate } from '../../hooks/useRouter';
+import { useRecordItem } from '../../hooks/useRecordComponent';
+import { MENU_RECORD_KEY } from './useHighlight';
 var typeDefs = {
   key: {
     type: [String, Number],
@@ -36,7 +37,6 @@ export var MenuItem = /*#__PURE__*/function (_Component) {
     _this.parentMenu = inject(MENU);
     _this.parentMenuItem = inject(MENU_ITEM, null);
     _this.expanded = useExpanded(_this.rootMenu, _this.parentMenu);
-    _this.highlight = useHighlight(_this.rootMenu, _this.parentMenuItem);
     _this.dropdown = useDropdown(_this.rootMenu, _this.parentMenu);
     _this.router = useRouter();
     return _this;
@@ -46,19 +46,21 @@ export var MenuItem = /*#__PURE__*/function (_Component) {
 
   _proto.init = function init() {
     provide(MENU_ITEM, this);
+    useRecordItem(MENU_RECORD_KEY);
   };
 
   _proto.onClick = function onClick(hasSubMenu, e) {
     var _this$get = this.get(),
         disabled = _this$get.disabled,
-        to = _this$get.to;
+        to = _this$get.to,
+        key = _this$get.key;
 
     if (disabled) return;
 
     if (hasSubMenu) {
       this.expanded.toggle();
     } else {
-      this.highlight.select();
+      this.rootMenu.highlight.select(key);
     }
 
     this.trigger('click', e);

package/es/components/menu/item.vdt.js

@@ -32,9 +32,9 @@ export default function ($props, $blocks, $__proto__) {
       disabled = _this$get.disabled,
       dot = _this$get.dot;
 
-  var _this$highlight = this.highlight,
-      isHighlighted = _this$highlight.isHighlighted,
-      isSelected = _this$highlight.isSelected;
+  var _rootMenu$highlight = rootMenu.highlight,
+      isHighlighted = _rootMenu$highlight.isHighlighted,
+      isSelected = _rootMenu$highlight.isSelected;
   var isExpandedKey = this.expanded.isExpanded;
   var isExpanded = isExpandedKey(key);
 
@@ -50,7 +50,7 @@ export default function ($props, $blocks, $__proto__) {
 
   var classNameObj = (_classNameObj = {
     'k-menu-item': true
-  }, _classNameObj[className] = className, _classNameObj['k-expanded'] = isExpanded, _classNameObj['k-disabled'] = disabled, _classNameObj['k-active'] = isSelected(), _classNameObj['k-highlighted'] = isHighlighted(), _classNameObj[makeItemStyles()] = true, _classNameObj);
+  }, _classNameObj[className] = className, _classNameObj['k-expanded'] = isExpanded, _classNameObj['k-disabled'] = disabled, _classNameObj['k-active'] = isSelected(key), _classNameObj['k-highlighted'] = isHighlighted(key), _classNameObj[makeItemStyles()] = true, _classNameObj);
   var showDot = isTopItem && !iconVNode && isNullOrUndefined(dot) ? rootDot : dot;
 
   var title = function title(children) {

package/es/components/menu/menu.d.ts

@@ -1,4 +1,5 @@
 import { Component, TypeDefs, Key } from 'intact';
+import { useHighlight } from './useHighlight';
 export interface MenuProps<K extends Key = Key> {
     expandedKeys?: K[];
     selectedKey?: K;
@@ -22,5 +23,7 @@ export declare class Menu<K extends Key = Key> extends Component<MenuProps<K>, M
     static defaults: () => Partial<MenuProps<Key>>;
     rootMenu: Menu<Key> | null;
     parentMenu: Menu<Key> | null;
+    subExpandedKeys?: Set<K>;
+    highlight?: ReturnType<typeof useHighlight>;
     init(): void;
 }

package/es/components/menu/menu.js

@@ -2,6 +2,7 @@ import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import { Component, provide, inject } from 'intact';
 import template from './menu.vdt';
+import { useHighlight } from './useHighlight';
 var typeDefs = {
   expandedKeys: Array,
   selectedKey: [String, Number],
@@ -39,6 +40,8 @@ export var Menu = /*#__PURE__*/function (_Component) {
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.rootMenu = inject(ROOT_MENU, null);
     _this.parentMenu = inject(MENU, null);
+    _this.subExpandedKeys = void 0;
+    _this.highlight = void 0;
     return _this;
   }
 
@@ -49,6 +52,7 @@ export var Menu = /*#__PURE__*/function (_Component) {
 
     if (!this.rootMenu) {
       provide(ROOT_MENU, this);
+      this.highlight = useHighlight();
     }
   };
 

package/es/components/menu/useExpanded.d.ts

@@ -1,8 +1,5 @@
-import { Key } from 'intact';
 import type { Menu } from './';
-export declare function useExpanded(rootMenu: Menu, parentMenu: Menu & {
-    subExpandedKeys?: Set<Key>;
-}): {
+export declare function useExpanded(rootMenu: Menu, parentMenu: Menu): {
     isExpanded: () => boolean;
     expand: () => void;
     shrink: () => void;

package/es/components/menu/useHighlight.d.ts

@@ -1,10 +1,7 @@
 import { Key } from 'intact';
-import type { Menu, MenuItem } from './';
-export declare function useHighlight(rootMenu: Menu & {
-    highlightedKeys?: Key[];
-}, parentMenuItem: MenuItem | null): {
-    isHighlighted: () => boolean;
-    updateStatus: (v: Key | undefined) => void;
-    select: () => void;
-    isSelected: () => boolean;
+export declare const MENU_RECORD_KEY = "MenuKeys";
+export declare function useHighlight(): {
+    isHighlighted: (key: Key) => boolean;
+    select: (key: Key) => void;
+    isSelected: (key: Key) => boolean;
 };