@king-design/vue 2.0.0-beta.0

package/components/menu/item.vdt.js

@@ -0,0 +1,103 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createElementVNode as _$ce, createUnknownComponentVNode as _$cc, className as _$cn, createVNode as _$cv, extend as _$ex, EMPTY_OBJ as _$em } from 'intact-vue-next';
+import { directClone, Transition } from 'intact';
+import { Dropdown, DropdownItem } from '../dropdown';
+import { Tooltip } from '../tooltip';
+import { Icon } from '../icon';
+import { Menu } from './menu';
+import { getRestProps, expandAnimationCallbacks } from '../utils';
+import { isNullOrUndefined } from 'intact-shared';
+import { makeItemStyles, makeTitleStyles } from './styles';
+var _$tmp0 = {
+  'className': 'k-menu-dot ion-record'
+};
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj,
+      _this = this;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var rootMenu = this.rootMenu;
+
+  var _rootMenu$get = rootMenu.get(),
+      theme = _rootMenu$get.theme,
+      type = _rootMenu$get.type,
+      rootDot = _rootMenu$get.dot;
+
+  var _this$get = this.get(),
+      children = _this$get.children,
+      key = _this$get.key,
+      className = _this$get.className,
+      disabled = _this$get.disabled,
+      dot = _this$get.dot;
+
+  var _this$highlight = this.highlight,
+      isHighlighted = _this$highlight.isHighlighted,
+      isSelected = _this$highlight.isSelected;
+  var isExpandedKey = this.expanded.isExpanded;
+  var isExpanded = isExpandedKey(key);
+
+  var _this$dropdown = this.dropdown(),
+      isTopItem = _this$dropdown.isTopItem,
+      subMenuVNode = _this$dropdown.subMenuVNode,
+      isDropdownMenu = _this$dropdown.isDropdownMenu,
+      tooltipContents = _this$dropdown.tooltipContents,
+      iconVNode = _this$dropdown.iconVNode,
+      titleVNodes = _this$dropdown.titleVNodes,
+      position = _this$dropdown.position,
+      isCollapse = _this$dropdown.isCollapse;
+
+  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);
+  var showDot = isTopItem && !iconVNode && isNullOrUndefined(dot) ? rootDot : dot;
+
+  var title = function title(children) {
+    var _$cn2;
+
+    return _$ce(2, 'div', [showDot ? _$cc(Icon, _$tmp0) : undefined, _$ce(2, 'div', children, 0, 'k-menu-name'), subMenuVNode ? _$ce(2, 'i', null, 1, 'k-menu-arrow ion-ios-arrow-down') : undefined], 0, _$cn((_$cn2 = {
+      'k-menu-title': true
+    }, _$cn2[makeTitleStyles()] = true, _$cn2)), {
+      'ev-click': _this.onClick.bind(_this, subMenuVNode)
+    });
+  };
+
+  return _$cv('div', _extends({
+    'className': _$cn(classNameObj)
+  }, getRestProps(this)), !isDropdownMenu ? [title(titleVNodes), _$cc(Transition, _extends({
+    'show': isExpanded,
+    'key': 'subMenu'
+  }, expandAnimationCallbacks, {
+    'children': subMenuVNode
+  }), 'subMenu')] : !subMenuVNode ? isTopItem && isCollapse ? _$cc(Tooltip, {
+    'position': rootMenu.get('type') !== 'horizontal' ? 'right' : 'bottom',
+    'theme': rootMenu.get('theme') === 'dark' ? 'dark' : 'light',
+    'children': title(iconVNode),
+    '$blocks': function ($blocks) {
+      var _$blocks = {},
+          __$blocks = _$ex({}, $blocks);
+
+      return (_$blocks['content'] = function ($super) {
+        return tooltipContents;
+      }, __$blocks['content'] = function ($super, data) {
+        var block = $blocks['content'];
+
+        var callBlock = function callBlock() {
+          return _$blocks['content'].call($this, $super, data);
+        };
+
+        return block ? block.call($this, callBlock, data) : callBlock();
+      }), __$blocks;
+    }.call($this, _$em)
+  }) : title(titleVNodes) : [_$cc(Dropdown, {
+    'position': position,
+    'children': [title(isTopItem && isCollapse ? iconVNode : titleVNodes), subMenuVNode]
+  }), _$cc(Transition, _extends({
+    'show': isExpanded,
+    'key': 'subMenu'
+  }, expandAnimationCallbacks), 'subMenu')]);
+}
+;
+
+export {normalize} from 'intact-vue-next';

package/components/menu/menu.d.ts

@@ -0,0 +1,29 @@
+import { Component, TypeDefs, Key } from 'intact-vue-next';
+export interface MenuProps<K extends Key = Key> {
+    expandedKeys?: K[];
+    selectedKey?: K;
+    theme?: 'light' | 'dark' | 'white';
+    collapse?: boolean;
+    type?: 'vertical' | 'horizontal';
+    size?: 'large' | 'default' | 'small';
+    accordion?: boolean;
+    dot?: boolean;
+}
+export interface MenuEvents {
+}
+export interface MenuBlocks {
+    header: null;
+}
+export declare const MENU = "Menu";
+export declare const ROOT_MENU = "RootMenu";
+export declare class Menu<K extends Key = Key> extends Component<MenuProps<K>, MenuEvents, MenuBlocks> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<MenuProps<Key>>>;
+    static defaults: () => Partial<MenuProps<Key>>;
+    rootMenu: Menu<Key> | null;
+    parentMenu: Menu<Key> | null;
+    init(): void;
+}
+
+
+export {normalize} from 'intact-vue-next';

package/components/menu/menu.js

@@ -0,0 +1,61 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { Component, provide, inject } from 'intact-vue-next';
+import template from './menu.vdt';
+var typeDefs = {
+  expandedKeys: Array,
+  selectedKey: [String, Number],
+  theme: ['light', 'dark', 'white'],
+  collapse: Boolean,
+  type: ['vertical', 'horizontal'],
+  size: ['large', 'default', 'small'],
+  accordion: Boolean,
+  dot: Boolean
+};
+
+var defaults = function defaults() {
+  return {
+    expandedKeys: [],
+    theme: 'dark',
+    type: 'vertical',
+    size: 'default'
+  };
+};
+
+export var MENU = 'Menu';
+export var ROOT_MENU = 'RootMenu';
+export var Menu = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Menu, _Component);
+
+  function Menu() {
+    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.rootMenu = inject(ROOT_MENU, null);
+    _this.parentMenu = inject(MENU, null);
+    return _this;
+  }
+
+  var _proto = Menu.prototype;
+
+  _proto.init = function init() {
+    provide(MENU, this); // is root menu or not
+
+    if (!this.rootMenu) {
+      provide(ROOT_MENU, this);
+    }
+  };
+
+  return Menu;
+}(Component);
+Menu.template = template;
+Menu.typeDefs = typeDefs;
+Menu.defaults = defaults;
+
+export {normalize} from 'intact-vue-next';

package/components/menu/menu.vdt.js

@@ -0,0 +1,57 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { noop as _$no, createElementVNode as _$ce, className as _$cn, createVNode as _$cv, createUnknownComponentVNode as _$cc } from 'intact-vue-next';
+import { DropdownMenu } from '../dropdown';
+import { getRestProps, findChildren, isComponentVNode } from '../utils';
+import { isDropdown } from './useDropdown';
+import { makeMenuStyles, makeTitleStyles } from './styles';
+import { Icon } from '../icon';
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj, _$cn2;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var _$blocks = {};
+  var __$blocks = {};
+
+  var _this$get = this.get(),
+      children = _this$get.children,
+      className = _this$get.className;
+
+  var _get = (this.rootMenu || this).get(),
+      collapse = _get.collapse,
+      theme = _get.theme,
+      type = _get.type,
+      size = _get.size;
+
+  var isRootMenu = !this.rootMenu;
+  var isDropdownMenu = !isRootMenu && isDropdown(this.rootMenu);
+  var classNameObj = (_classNameObj = {
+    'k-menu': true
+  }, _classNameObj[className] = className, _classNameObj["k-" + theme] = (isRootMenu || isDropdownMenu) && theme, _classNameObj["k-" + size] = isRootMenu && size !== 'default', _classNameObj['k-collapsed'] = isRootMenu && collapse, _classNameObj["k-" + type] = isRootMenu && type, _classNameObj[makeMenuStyles()] = true, _classNameObj);
+  var header = (_$blocks['header'] = function ($super) {
+    return null;
+  }, __$blocks['header'] = function ($super, data) {
+    var block = $blocks['header'];
+
+    var callBlock = function callBlock() {
+      return _$blocks['header'].call($this, $super, data);
+    };
+
+    return block ? block.call($this, callBlock, data) : callBlock();
+  }, __$blocks['header'](_$no));
+  var content = [$blocks.header ? _$ce(2, 'div', !collapse ? header : findChildren(header, function (vNode) {
+    return isComponentVNode(vNode, Icon);
+  }), 0, _$cn((_$cn2 = {
+    'k-menu-header': true
+  }, _$cn2[makeTitleStyles()] = true, _$cn2))) : undefined, children];
+  return !isDropdownMenu ? _$cv('div', _extends({}, getRestProps(this), {
+    'className': _$cn(classNameObj)
+  }), [content, null]) : _$cc(DropdownMenu, _extends({}, getRestProps(this), {
+    'className': _$cn(classNameObj),
+    'children': content
+  }));
+}
+;
+
+export {normalize} from 'intact-vue-next';

package/components/menu/styles.d.ts

@@ -0,0 +1,9 @@
+import '../../styles/global';
+declare let menu: any;
+export { menu };
+export declare function makeMenuStyles(): string;
+export declare function makeTitleStyles(): string;
+export declare function makeItemStyles(): string;
+
+
+export {normalize} from 'intact-vue-next';

package/components/menu/styles.js

@@ -0,0 +1,138 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults, getLeft, palette } from '../../styles/utils';
+import '../../styles/global';
+var sizes = ['large', 'small'];
+var defaults = {
+  width: '200px',
+  bgColor: '#262626',
+  fontSize: '14px',
+
+  get borderRadius() {
+    return theme.borderRadius;
+  },
+
+  item: {
+    height: '40px',
+    padding: '0 21px',
+    color: '#b2b2b2',
+    hoverColor: '#fff',
+
+    get disabledColor() {
+      return theme.color.text;
+    },
+
+    get activeBgColor() {
+      return theme.color.primary;
+    },
+
+    dotFontSize: '12px'
+  },
+  icon: {
+    width: '16px',
+    gap: '11px'
+  },
+  header: {
+    height: '50px',
+    fontSize: '14px',
+    borderBottom: '1px solid #1b1b1d'
+  },
+  // sub-menu
+  subBgColor: '#000',
+  light: {
+    bgColor: '#e5e5e9',
+    subBgColor: '#d5d5d9',
+    border: '1px solid #d5d5d9',
+    item: {
+      get color() {
+        return theme.color.text;
+      },
+
+      get hoverColor() {
+        return theme.color.primary;
+      },
+
+      disabledColor: '#999'
+    }
+  },
+  white: {
+    bgColor: '#fff',
+    subBgColor: '#fafafa',
+    border: '1px solid #eee',
+    item: {
+      get color() {
+        return theme.color.text;
+      },
+
+      get hoverColor() {
+        return theme.color.primary;
+      },
+
+      get disabledColor() {
+        return theme.color.disabled;
+      }
+
+    },
+    active: {
+      get color() {
+        return theme.color.primary;
+      },
+
+      get bgColor() {
+        return palette(theme.color.primary, -4);
+      }
+
+    }
+  },
+  // dropdown
+  dropdown: {
+    minWidth: '150px'
+  },
+  large: {
+    width: '250px',
+
+    get fontSize() {
+      return menu.fontSize;
+    }
+
+  },
+  small: {
+    width: '180px',
+
+    get fontSize() {
+      return theme.small.fontSize;
+    }
+
+  }
+};
+var menu;
+setDefault(function () {
+  menu = deepDefaults(theme, {
+    menu: defaults
+  }).menu;
+});
+export { menu };
+export function makeMenuStyles() {
+  var _context;
+
+  // we must increase the priority by adding &.k-menu
+  // to override the css of dropdownMenu
+  return /*#__PURE__*/css("&.k-menu{width:", menu.width, ";transition:width ", theme.transition, ";background:", menu.bgColor, ";font-size:", menu.fontSize, ";}&:not(.k-dropdown-menu) &:not(.k-dropdown-menu){width:auto;background:", menu.subBgColor, ";.k-menu-title{padding-left:calc(", getLeft(menu.item.padding), " + ", menu.icon.width, " + ", menu.icon.gap, ");}}&:not(.k-dropdown-menu) &:not(.k-dropdown-menu) &:not(.k-dropdown-menu){.k-menu-title{padding-left:calc(", getLeft(menu.item.padding), " + ", menu.icon.width, " * 2 + ", menu.icon.gap, ");}}.k-icon{width:", menu.icon.width, ";margin-right:", menu.icon.gap, ";text-align:center;flex-shrink:0;}.k-menu-header{height:", menu.header.height, ";font-size:", menu.header.fontSize, ";font-weight:bold;border-bottom:", menu.header.borderBottom, ";}", _mapInstanceProperty(_context = ['light', 'white']).call(_context, function (theme) {
+    var styles = menu[theme];
+    return /*#__PURE__*/css("&.k-", theme, "{background:", styles.bgColor, ";.k-menu-header{color:", styles.item.color, ";border-bottom:", styles.border, ";}.k-menu-item{.k-menu-title{color:", styles.item.color, ";&:hover{color:", styles.item.hoverColor, ";}}&.k-highlighted{>.k-menu-title{color:", styles.item.hoverColor, ";}}&.k-disabled{>.k-menu-title{color:", styles.item.disabledColor, "!important;}}}.k-menu:not(.k-dropdown-menu){background:", styles.subBgColor, ";}&.k-horizontal{.k-menu-header{border-right:", styles.border, ";}}}");
+  }), " &.k-white{.k-menu-item.k-active{>.k-menu-title{color:", menu.white.active.color, "!important;background:", menu.white.active.bgColor, ";}}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+    var styles = menu[size];
+    return /*#__PURE__*/css("&.k-", size, "{width:", styles.width, ";font-size:", styles.fontSize, ";.k-menu{font-size:", styles.fontSize, ";}}");
+  }), "&.k-collapsed{width:calc(", menu.icon.width, " + ", getLeft(menu.item.padding), " * 2);.k-icon{margin-right:0;}.k-menu-arrow{display:none;}}&.k-dropdown-menu{width:auto;min-width:", menu.dropdown.minWidth, ";.k-menu-arrow{transform:rotate(-90deg);}}&.k-horizontal{width:auto;display:flex;align-items:center;.k-menu-header{border-bottom:none;border-right:", menu.header.borderBottom, ";}}");
+}
+export function makeTitleStyles() {
+  var item = menu.item;
+  return /*#__PURE__*/css("display:flex;align-items:center;padding:", menu.item.padding, ";color:", menu.item.color, ";white-space:nowrap;overflow:hidden;flex-wrap:nowrap;");
+}
+export function makeItemStyles() {
+  var item = menu.item;
+  return /*#__PURE__*/css(".k-menu-title{cursor:pointer;height:", menu.item.height, ";transition:all ", theme.transition, ";&:hover{color:", menu.item.hoverColor, ";}}.k-menu-name{flex:1;display:flex;align-items:center;}.k-menu-arrow{transition:transform ", theme.transition, ";margin-left:", menu.icon.gap, ";}&.k-expanded{>.k-menu-title{color:", menu.item.hoverColor, ";.k-menu-arrow{transform:rotate(180deg);}}}&.k-highlighted{>.k-menu-title{color:", menu.item.hoverColor, ";}}&.k-active{>.k-menu-title{color:", menu.item.hoverColor, "!important;background:", menu.item.activeBgColor, ";}}&.k-disabled{>.k-menu-title{color:", menu.item.disabledColor, "!important;cursor:not-allowed;}}.k-menu-dot{font-size:", menu.item.dotFontSize, ";transform:scale(.4);}");
+}
+
+export {normalize} from 'intact-vue-next';

package/components/menu/useDropdown.d.ts

@@ -0,0 +1,19 @@
+import { VNodeComponentClass } from 'intact-vue-next';
+import { Menu } from './';
+import { Icon } from '../icon';
+import { ValidVNode } from '../utils';
+import { Options } from '../position';
+export declare function useDropdown(rootMenu: Menu, parentMenu: Menu): () => {
+    isTopItem: boolean;
+    subMenuVNode: VNodeComponentClass<Menu<import("intact").Key>> | null;
+    isDropdownMenu: boolean;
+    tooltipContents: ValidVNode[];
+    iconVNode: VNodeComponentClass<Icon> | null;
+    titleVNodes: ValidVNode[];
+    position: Options | null;
+    isCollapse: boolean | undefined;
+};
+export declare function isDropdown(rootMenu: Menu): boolean;
+
+
+export {normalize} from 'intact-vue-next';

package/components/menu/useDropdown.js

@@ -0,0 +1,83 @@
+import { useInstance, onBeforeMount, onBeforeUpdate, inject } from 'intact-vue-next';
+import { Menu } from './';
+import { Icon } from '../icon';
+import { isComponentVNode, eachChildren, isTextVNode, isStringOrNumberNotEmpty } from '../utils';
+import { ROOT_DROPDOWN } from '../dropdown/dropdown';
+export function useDropdown(rootMenu, parentMenu) {
+  var instance = useInstance();
+  var isTopItem = rootMenu === parentMenu;
+  var rootDropdown = inject(ROOT_DROPDOWN, null);
+  var subMenuVNode = null;
+  var isDropdownMenu = false;
+  var tooltipContents;
+  var iconVNode;
+  var titleVNodes;
+  var isCollapse;
+  var position = null;
+  onBeforeMount(parseChildren);
+  onBeforeUpdate(parseChildren);
+  parsePosition(rootMenu.get('type'));
+  rootMenu.watch('type', parsePosition); // hide dropdown menu on select
+
+  instance.on('select', hide);
+
+  function parseChildren() {
+    isDropdownMenu = isDropdown(rootMenu);
+    tooltipContents = [];
+    iconVNode = null;
+    titleVNodes = [];
+    isCollapse = rootMenu.get('collapse');
+    var children = instance.get('children');
+    eachChildren(children, function (vNode) {
+      if (isComponentVNode(vNode, Menu)) {
+        subMenuVNode = vNode;
+      } else if (isTopItem && isCollapse) {
+        if (isStringOrNumberNotEmpty(vNode) || isTextVNode(vNode)) {
+          tooltipContents.push(vNode);
+        } else if (!iconVNode && isComponentVNode(vNode, Icon)) {
+          iconVNode = vNode;
+        }
+      } else {
+        titleVNodes.push(vNode);
+      }
+    });
+  }
+
+  function parsePosition(type) {
+    position = type !== 'horizontal' || !isTopItem ? {
+      my: 'left top',
+      at: 'right+5 top'
+    } : {
+      my: 'left top',
+      at: 'left bottom+5'
+    };
+  }
+
+  function hide() {
+    if (!isTopItem && rootDropdown) {
+      rootDropdown.hide(true);
+    }
+  }
+
+  return function () {
+    return {
+      isTopItem: isTopItem,
+      subMenuVNode: subMenuVNode,
+      isDropdownMenu: isDropdownMenu,
+      tooltipContents: tooltipContents,
+      iconVNode: iconVNode,
+      titleVNodes: titleVNodes,
+      position: position,
+      isCollapse: isCollapse
+    };
+  };
+}
+export function isDropdown(rootMenu) {
+  var _rootMenu$get = rootMenu.get(),
+      collapse = _rootMenu$get.collapse,
+      type = _rootMenu$get.type;
+
+  return collapse || type === 'horizontal';
+}
+
+export {normalize} from 'intact-vue-next';

package/components/menu/useExpanded.d.ts

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

package/components/menu/useExpanded.js

@@ -0,0 +1,80 @@
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
+import _Set from "@babel/runtime-corejs3/core-js/set";
+import { useInstance, onBeforeUnmount } from 'intact-vue-next';
+import { inArray, addOrRemove } from '../table/useChecked';
+import { isDropdown } from './useDropdown';
+export function useExpanded(rootMenu, parentMenu) {
+  var instance = useInstance();
+  onBeforeUnmount(removeSubExpandedKey);
+
+  function isExpanded() {
+    var isExpanded = !isDropdown(rootMenu) && inArray(rootMenu.get('expandedKeys'), instance.get('key'));
+
+    if (isExpanded) {
+      addSubExpandedKey();
+    } else {
+      removeSubExpandedKey();
+    }
+
+    return isExpanded;
+  }
+
+  function expand() {
+    expandOrShrink(true);
+  }
+
+  function shrink() {
+    expandOrShrink(false);
+  }
+
+  function toggle() {
+    if (isExpanded()) {
+      shrink();
+    } else if (!rootMenu.get('accordion')) {
+      expand();
+    } else {
+      // accordion
+      var subExpandedKeys = parentMenu.subExpandedKeys;
+
+      if (subExpandedKeys) {
+        subExpandedKeys.forEach(function (key) {
+          addOrRemove(rootMenu.get('expandedKeys'), key, false);
+        });
+      }
+
+      expand();
+    }
+  }
+
+  function expandOrShrink(isExpand) {
+    var _context;
+
+    var expandedKeys = _sliceInstanceProperty(_context = rootMenu.get('expandedKeys')).call(_context);
+
+    addOrRemove(expandedKeys, instance.get('key'), isExpand);
+    rootMenu.set({
+      expandedKeys: expandedKeys
+    });
+  }
+
+  function addSubExpandedKey() {
+    var key = instance.get('key');
+    var subExpandedKeys = parentMenu.subExpandedKeys || (parentMenu.subExpandedKeys = new _Set());
+    subExpandedKeys.add(key);
+  }
+
+  function removeSubExpandedKey() {
+    var key = instance.get('key');
+    var subExpandedKeys = parentMenu.subExpandedKeys || (parentMenu.subExpandedKeys = new _Set());
+    subExpandedKeys.delete(key);
+  }
+
+  return {
+    isExpanded: isExpanded,
+    expand: expand,
+    shrink: shrink,
+    toggle: toggle
+  };
+}
+
+export {normalize} from 'intact-vue-next';

package/components/menu/useHighlight.d.ts

@@ -0,0 +1,13 @@
+import { Key } from 'intact-vue-next';
+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 {normalize} from 'intact-vue-next';

package/components/menu/useHighlight.js

@@ -0,0 +1,60 @@
+import _Set from "@babel/runtime-corejs3/core-js/set";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import _Array$from from "@babel/runtime-corejs3/core-js/array/from";
+import { useInstance } from 'intact-vue-next';
+import { inArray } from '../table/useChecked'; // import {isEqualArray} from '../utils';
+
+export function useHighlight(rootMenu, parentMenuItem) {
+  var instance = useInstance(); // we can not watch selectedKey on before initializing rootMenu
+  // because rootMenu has initialized
+  // so call updateStatus here
+
+  updateStatus(rootMenu.get('selectedKey'));
+  rootMenu.watch('selectedKey', updateStatus);
+
+  function updateStatus(v) {
+    var _instance$get = instance.get(),
+        key = _instance$get.key;
+
+    if (v !== key) return;
+    var items = [];
+    var parentItem = parentMenuItem;
+
+    while (parentItem) {
+      items.push(parentItem);
+      parentItem = parentItem.parentMenuItem;
+    }
+
+    var expandedKeys = new _Set(rootMenu.get('expandedKeys'));
+
+    var highlightedKeys = _mapInstanceProperty(items).call(items, function (item) {
+      var key = item.get('key');
+      expandedKeys.add(key);
+      return key;
+    });
+
+    rootMenu.highlightedKeys = highlightedKeys;
+    rootMenu.set('expandedKeys', _Array$from(expandedKeys));
+  }
+
+  function isHighlighted() {
+    return inArray(rootMenu.highlightedKeys, instance.get('key'));
+  }
+
+  function select() {
+    rootMenu.set('selectedKey', instance.get('key'));
+  }
+
+  function isSelected() {
+    return rootMenu.get('selectedKey') === instance.get('key');
+  }
+
+  return {
+    isHighlighted: isHighlighted,
+    updateStatus: updateStatus,
+    select: select,
+    isSelected: isSelected
+  };
+}
+
+export {normalize} from 'intact-vue-next';

package/components/message/index.d.ts

@@ -0,0 +1,4 @@
+export * from './message';
+
+
+export {normalize} from 'intact-vue-next';

package/components/message/index.js

@@ -0,0 +1,3 @@
+export * from './message';
+
+export {normalize} from 'intact-vue-next';