@king-design/vue 2.0.0-beta.0

package/components/drawer/styles.d.ts

@@ -0,0 +1,9 @@
+import '../../styles/global';
+declare type ValueOf<T extends readonly any[]> = T[number];
+export declare type Placement = ValueOf<typeof placements>;
+export declare const placements: readonly ["top", "right", "bottom", "left"];
+export declare function makeStyles(overlay: boolean): string;
+export {};
+
+
+export {normalize} from 'intact-vue-next';

package/components/drawer/styles.js

@@ -0,0 +1,45 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults } from '../../styles/utils';
+import '../../styles/global';
+export var placements = ['top', 'right', 'bottom', 'left'];
+var defaults = {
+  get transition() {
+    return theme.transition;
+  },
+
+  get boxShadow() {
+    return theme.boxShadow;
+  }
+
+};
+var drawer;
+setDefault(function () {
+  drawer = deepDefaults(theme, {
+    drawer: defaults
+  }).drawer;
+});
+export function makeStyles(overlay) {
+  return /*#__PURE__*/css("box-shadow:none;border-radius:0;position:fixed!important;background:transparent!important;box-shadow:none!important;&.transition-enter-active,&.transition-leave-active,&.transition-appear-active{transition:opacity ", drawer.transition, "!important;overflow:hidden;.k-drawer-content{transition:transform ", drawer.transition, ";}}.k-drawer-content{height:100%;display:flex;background:#fff;flex-direction:column;transform:translateX(0);box-shadow:", drawer.boxShadow, ";.k-dialog-body{flex-grow:1;}}", _mapInstanceProperty(placements).call(placements, function (placement) {
+    var positionValue = '';
+    var transformValue = '';
+    placements.forEach(function (p) {
+      // Set top to `0 !important` when overlay is false and placement is right or left
+      // Because dialog without overlay don't have positional parent element
+      positionValue += p !== placement ? (placement === 'right' || placement === 'left') && !overlay && p === 'top' ? p + ": 0;" : p + ": auto;" : p + ": 0;";
+    });
+
+    if (placement === 'left' || placement === 'right') {
+      positionValue += 'height: 100% !important;';
+      transformValue = placement === 'left' ? 'translateX(-100%)' : 'translateX(100%)';
+    } else {
+      positionValue += 'width: 100% !important;';
+      transformValue = placement === 'top' ? 'translateY(-100%)' : 'translateY(100%)';
+    }
+
+    return "\n                &.k-" + placement + " {\n                    " + positionValue + "\n                    &.transition-enter-from,\n                    &.transition-leave-to,\n                    &.transition-appear-from {\n                        transform: none !important;\n                        .k-drawer-content {\n                            transform: " + transformValue + ";\n                        }\n                    }\n                }\n            ";
+  }), ";");
+}
+
+export {normalize} from 'intact-vue-next';

package/components/dropdown/dropdown.d.ts

@@ -0,0 +1,60 @@
+import { Component, TypeDefs, VNode } from 'intact-vue-next';
+import { Options, Feedback } from '../position';
+import { Portal, PortalProps } from '../portal';
+import { FeedbackCallback } from './usePosition';
+import type { Events } from '../types';
+export declare type Position = Options;
+export declare type PositionShorthand = 'left' | 'bottom' | 'right' | 'top';
+export declare const DROPDOWN = "Dropdown";
+export declare const ROOT_DROPDOWN = "RootDropdown";
+export interface DropdownProps {
+    trigger?: 'hover' | 'click' | 'contextmenu';
+    disabled?: boolean;
+    value?: boolean;
+    position?: Position | 'left' | 'bottom' | 'right' | 'top';
+    of?: 'self' | 'parent' | Event;
+    container?: PortalProps['container'];
+}
+export interface DropdownEvents {
+    shouldFocus: [];
+    show: [];
+    hide: [];
+    mouseenter: [MouseEvent];
+    mouseleave: [MouseEvent];
+    positioned: [Feedback];
+}
+export interface DropdownBlocks {
+}
+export declare class Dropdown<T extends DropdownProps = DropdownProps, E extends DropdownEvents = DropdownEvents, B extends DropdownBlocks = DropdownBlocks> extends Component<T, E, B> {
+    static $doubleVNodes: boolean;
+    static typeDefs: Required<TypeDefs<DropdownProps>>;
+    static defaults: () => Partial<DropdownProps>;
+    static events: Events<DropdownEvents>;
+    static template: (this: Dropdown) => (VNode<import("intact").VNodeTag> | VNode<typeof Portal>)[];
+    menuVNode: VNode | null;
+    dropdown: Dropdown | null;
+    rootDropdown: Dropdown | null;
+    showedDropdown: Dropdown | null;
+    positionHook: {
+        handle: (callback: FeedbackCallback) => void;
+        positioned: {
+            value: boolean;
+        };
+    };
+    protected alwaysPortal: boolean;
+    private timer;
+    private triggerProps;
+    init(): void;
+    show(shouldFocus?: boolean): void;
+    hide(immediately?: boolean): void;
+    focusFirst(): void;
+    position(callback?: FeedbackCallback): void;
+    private onEnter;
+    private onContextMenu;
+    private onLeave;
+    private callOriginalCallback;
+    private normalizeTriggerProps;
+}
+
+
+export {normalize} from 'intact-vue-next';

package/components/dropdown/dropdown.js

@@ -0,0 +1,314 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
+import { __decorate } from "tslib";
+import { Component, createVNode as h, directClone, provide, inject, findDomFromVNode, createVNode, nextTick } from 'intact-vue-next';
+import { bind, isTextChildren } from '../utils';
+import { EMPTY_OBJ, isFunction, noop } from 'intact-shared';
+import { cx } from '@emotion/css';
+import { useDocumentClick, containsOrEqual } from '../../hooks/useDocumentClick';
+import { Portal } from '../portal';
+import { useShowHideEvents } from '../../hooks/useShowHideEvents';
+import { usePosition } from './usePosition';
+export var DROPDOWN = 'Dropdown';
+export var ROOT_DROPDOWN = 'RootDropdown';
+var typeDefs = {
+  trigger: ['hover', 'click', 'contextmenu'],
+  disabled: Boolean,
+  value: Boolean,
+  position: [Object, 'left', 'bottom', 'right', 'top'],
+  // Event is undefined in NodeJs
+  of: ['self', 'parent', typeof Event === 'undefined' ? undefined : Event],
+  container: [String, Function]
+};
+
+var defaults = function defaults() {
+  return {
+    trigger: 'hover',
+    position: {},
+    of: 'self'
+  };
+};
+
+var events = {
+  shouldFocus: true,
+  show: true,
+  hide: true,
+  mouseenter: true,
+  mouseleave: true,
+  positioned: true
+};
+export var Dropdown = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Dropdown, _Component);
+
+  function Dropdown() {
+    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.menuVNode = null;
+    _this.dropdown = null;
+    _this.rootDropdown = null;
+    _this.showedDropdown = null;
+    _this.positionHook = usePosition();
+    _this.alwaysPortal = false;
+    _this.timer = undefined;
+    _this.triggerProps = null;
+    return _this;
+  }
+
+  var _proto = Dropdown.prototype;
+
+  _proto.init = function init() {
+    var _this2 = this;
+
+    provide(DROPDOWN, this);
+    this.dropdown = inject(DROPDOWN, null);
+    useDocumentClickForDropdown(this);
+    useHideLastMenuOnShow(this); // is root dropdown or not
+
+    var rootDropdown = this.rootDropdown = inject(ROOT_DROPDOWN, null);
+
+    if (!rootDropdown) {
+      provide(ROOT_DROPDOWN, this);
+    }
+
+    useShowHideEvents(); // if disabled, always set value to false
+
+    this.watch('disabled', function (disabled) {
+      if (disabled) {
+        _this2.set('value', false);
+      }
+    });
+  };
+
+  _proto.show = function show(shouldFocus) {
+    var _this3 = this;
+
+    if (shouldFocus === void 0) {
+      shouldFocus = false;
+    }
+
+    if (this.get('disabled')) return;
+    clearTimeout(this.timer);
+    this.set('value', true);
+
+    if (shouldFocus) {
+      nextTick(function () {
+        _this3.focusFirst();
+      });
+    }
+  };
+
+  _proto.hide = function hide(immediately) {
+    var _this4 = this;
+
+    if (immediately === void 0) {
+      immediately = false;
+    }
+
+    if (this.get('disabled')) return;
+    if (!this.get('value')) return;
+
+    if (immediately) {
+      this.set('value', false);
+    } else {
+      this.timer = window.setTimeout(function () {
+        _this4.set('value', false);
+      }, 200);
+    }
+  };
+
+  _proto.focusFirst = function focusFirst() {
+    this.trigger('shouldFocus');
+  };
+
+  _proto.position = function position(callback) {
+    if (callback === void 0) {
+      callback = noop;
+    }
+
+    return this.positionHook.handle(callback);
+  };
+
+  _proto.onEnter = function onEnter(e) {
+    this.callOriginalCallback(e.type === 'click' ? 'ev-click' : 'ev-mouseenter', e);
+    this.show();
+  };
+
+  _proto.onContextMenu = function onContextMenu(e) {
+    this.callOriginalCallback('ev-contextmenu', e);
+    e.preventDefault();
+    this.set('of', e);
+    this.show();
+  };
+
+  _proto.onLeave = function onLeave(e) {
+    this.callOriginalCallback('ev-mouseleave', e);
+    this.hide();
+  };
+
+  _proto.callOriginalCallback = function callOriginalCallback(name, e) {
+    var callback = this.triggerProps[name];
+    var callbackOnDropdown = this.get(name);
+    if (isFunction(callback)) callback(e);
+    if (isFunction(callbackOnDropdown)) callbackOnDropdown(e);
+  };
+
+  _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 _props = vnode.props;
+      return {
+        vnode: vnode,
+        'ev-click': _props.onClick,
+        'ev-mouseenter': _props.onMouseEnter,
+        'ev-mouseleave': _props.onMouseLeave,
+        'ev-contextmenu': _props.onContextMenu,
+        className: _props.className || _props.class
+        /* vue-next */
+
+      };
+    } else if (this.$isVue) {
+      var _vnode = props.vnode;
+      if (!_vnode) return props;
+      var data = _vnode.data;
+      var on = data && data.on || EMPTY_OBJ;
+      var ret = {
+        vnode: _vnode
+      };
+      ['click', 'mouseenter', 'mouseleave', 'contextmenu'].forEach(function (event) {
+        var method = on[event];
+
+        if (method) {
+          ret["ev-" + event] = method;
+        }
+      });
+      return ret;
+    }
+
+    return props;
+  };
+
+  return Dropdown;
+}(Component);
+Dropdown.$doubleVNodes = true;
+Dropdown.typeDefs = typeDefs;
+Dropdown.defaults = defaults;
+Dropdown.events = events;
+
+Dropdown.template = function () {
+  var _cx;
+
+  var children = this.get('children'); // ignore whitespaces between elements in Vue
+
+  if (this.$isVue || this.$isVueNext) {
+    if (Array.isArray(children)) {
+      children = _filterInstanceProperty(children).call(children, function (child) {
+        return child !== ' ';
+      });
+    }
+  }
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (!Array.isArray(children) || children.length !== 2) {
+      throw new Error('Dropdown must receive two children, ' + 'one is a trigger and the another one is DropdownMenu.' + (Array.isArray(children) && children.length > 2 ? ' Please check the children, maybe you should remove the whitespaces.' : ''));
+    }
+  }
+
+  var _children = children,
+      trigger = _children[0],
+      menu = _children[1];
+  var triggerType = this.get('trigger');
+  var props = {};
+
+  if (triggerType !== 'contextmenu') {
+    props['ev-click'] = this.onEnter;
+
+    if (triggerType === 'hover') {
+      props['ev-mouseenter'] = this.onEnter;
+      props['ev-mouseleave'] = this.onLeave;
+    }
+  } else {
+    props['ev-contextmenu'] = this.onContextMenu;
+  }
+
+  var clonedTrigger = isTextChildren(trigger) ? createVNode('span', null, trigger) : directClone(trigger);
+  var triggerProps = this.triggerProps = this.normalizeTriggerProps(trigger.props || EMPTY_OBJ); // add a className for opening status
+
+  var className = trigger.className || triggerProps.className;
+  className = cx((_cx = {}, _cx[className] = className, _cx['k-dropdown-open'] = this.get('value'), _cx));
+  clonedTrigger.props = _extends({}, triggerProps, props, {
+    className: className
+  });
+  clonedTrigger.className = className;
+  this.menuVNode = menu;
+  return [clonedTrigger, // wrap the root dropdown menu to Portal to render into body
+  this.alwaysPortal || !this.rootDropdown ? h(Portal, {
+    children: menu,
+    container: this.get('container')
+  }) : menu];
+};
+
+__decorate([bind], Dropdown.prototype, "position", null);
+
+__decorate([bind], Dropdown.prototype, "onEnter", null);
+
+__decorate([bind], Dropdown.prototype, "onContextMenu", null);
+
+__decorate([bind], Dropdown.prototype, "onLeave", null);
+
+function useDocumentClickForDropdown(dropdown) {
+  var elementRef = function elementRef() {
+    return findDomFromVNode(dropdown.menuVNode, true);
+  };
+
+  var _useDocumentClick = useDocumentClick(elementRef, function (e) {
+    // case 1: if click an trigger and the trigger type is hover, ignore it
+    // case 2: if right click on trigger and the trigger type is contextmenu, ignore it
+    var trigger = dropdown.get('trigger');
+    var isHover = trigger === 'hover';
+
+    if (isHover || trigger === 'contextmenu') {
+      var triggerDom = findDomFromVNode(dropdown.$lastInput, true);
+      var target = e.target;
+
+      if (containsOrEqual(triggerDom, target)) {
+        if (isHover) return;
+        if (!isHover && e.type === 'contextmenu') return;
+      }
+    }
+
+    dropdown.hide(true);
+  }, true),
+      addDocumentClick = _useDocumentClick[0],
+      removeDocumentClick = _useDocumentClick[1];
+
+  dropdown.on('show', addDocumentClick);
+  dropdown.on('hide', removeDocumentClick);
+}
+
+function useHideLastMenuOnShow(dropdown) {
+  var parentDropdown = dropdown.dropdown;
+  dropdown.on('show', function () {
+    if (parentDropdown) {
+      var showed = parentDropdown.showedDropdown;
+
+      if (showed && showed !== dropdown) {
+        showed.hide(true);
+      }
+
+      parentDropdown.showedDropdown = dropdown;
+    }
+  });
+}
+
+export {normalize} from 'intact-vue-next';

package/components/dropdown/index.d.ts

@@ -0,0 +1,12 @@
+import { Dropdown as BaseDropdown, DropdownProps, DropdownEvents, DropdownBlocks } from './dropdown';
+import { DropdownMenu as BaseDropdownMenu, DropdownMenuProps, DropdownMenuEvents, DropdownMenuBlocks } from './menu';
+export * from './item';
+export type { Position as PositionOption, PositionShorthand } from './dropdown';
+export type { DropdownProps, DropdownEvents, DropdownBlocks, DropdownMenuProps, DropdownMenuEvents, DropdownMenuBlocks, };
+export declare class Dropdown extends BaseDropdown<DropdownProps, DropdownEvents, DropdownBlocks> {
+}
+export declare class DropdownMenu extends BaseDropdownMenu<DropdownMenuProps, DropdownMenuEvents, DropdownMenuBlocks> {
+}
+
+
+export {normalize} from 'intact-vue-next';

package/components/dropdown/index.js

@@ -0,0 +1,39 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import { Dropdown as BaseDropdown } from './dropdown';
+import { DropdownMenu as BaseDropdownMenu } from './menu';
+export * from './item'; // Don't export the generic type class, because it will let
+// the type inferring break down
+// declare class _Dropdown extends BaseDropdown<
+// DropdownProps,
+// DropdownEvents,
+// DropdownBlocks
+// > { } 
+// declare class _DropdownMenu extends BaseDropdownMenu<
+// DropdownMenuProps,
+// DropdownMenuEvents,
+// DropdownMenuBlocks
+// > { }
+// export const Dropdown = BaseDropdown as typeof _Dropdown;
+// export const DropdownMenu = BaseDropdownMenu as typeof _DropdownMenu;
+// above codes can not be used as instance type
+
+export var Dropdown = /*#__PURE__*/function (_BaseDropdown) {
+  _inheritsLoose(Dropdown, _BaseDropdown);
+
+  function Dropdown() {
+    return _BaseDropdown.apply(this, arguments) || this;
+  }
+
+  return Dropdown;
+}(BaseDropdown);
+export var DropdownMenu = /*#__PURE__*/function (_BaseDropdownMenu) {
+  _inheritsLoose(DropdownMenu, _BaseDropdownMenu);
+
+  function DropdownMenu() {
+    return _BaseDropdownMenu.apply(this, arguments) || this;
+  }
+
+  return DropdownMenu;
+}(BaseDropdownMenu);
+
+export {normalize} from 'intact-vue-next';

package/components/dropdown/index.spec.d.ts

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