@king-design/vue 2.0.0-beta.0

package/components/affix/index.d.ts

@@ -0,0 +1,32 @@
+import { Component, TypeDefs } from 'intact-vue-next';
+export interface AffixProps {
+    top?: number;
+    bottom?: number;
+    exclude?: (data: ExcludeParam) => boolean;
+    shouldFix?: (data: ShouldFixParam) => boolean;
+}
+export interface AffixEvents {
+    change: [boolean];
+}
+export declare type ExcludeParam = {
+    offsetTop?: number;
+    offsetBottom?: number;
+    top: number;
+    bottom: number;
+    width: number;
+    height: number;
+};
+export declare type ShouldFixParam = {
+    offsetTop?: number;
+    offsetBottom?: number;
+    viewportHeight?: number;
+};
+export declare class Affix extends Component<AffixProps, AffixEvents> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<AffixProps>>;
+    private elementRef;
+    private style;
+}
+
+
+export {normalize} from 'intact-vue-next';

package/components/affix/index.js

@@ -0,0 +1,35 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { Component, createRef } from 'intact-vue-next';
+import template from './index.vdt';
+import { useStyle } from './useStyle';
+var typeDefs = {
+  top: Number,
+  bottom: Number,
+  exclude: Function,
+  shouldFix: Function
+};
+export var Affix = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Affix, _Component);
+
+  function Affix() {
+    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.elementRef = createRef();
+    _this.style = useStyle(_this.elementRef);
+    return _this;
+  }
+
+  return Affix;
+}(Component);
+Affix.template = template;
+Affix.typeDefs = typeDefs;
+
+export {normalize} from 'intact-vue-next';

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

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

package/components/affix/index.spec.js

@@ -0,0 +1,132 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import BasicDemo from '~/components/affix/demos/basic';
+import CustomDemo from '~/components/affix/demos/custom';
+import { mount, unmount, wait } from '../../test/utils';
+describe('Affix', function () {
+  afterEach(function () {
+    return unmount();
+  });
+  it('basic test', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _mount, instance, element, _element$querySelecto, affix1, affix2, _element$querySelecto2, wrapper1, wrapper2, test;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            this.timeout(0);
+            _mount = mount(BasicDemo, {
+              marginTop: '200px'
+            }), instance = _mount[0], element = _mount[1];
+            _element$querySelecto = element.querySelectorAll('.k-affix'), affix1 = _element$querySelecto[0], affix2 = _element$querySelecto[1];
+            _element$querySelecto2 = element.querySelectorAll('.k-affix-wrapper'), wrapper1 = _element$querySelecto2[0], wrapper2 = _element$querySelecto2[1];
+
+            test = function test(height1, style1, height2, style2) {
+              expect(affix1.style.height).to.eql(height1);
+              expect(wrapper1.getAttribute('style')).to.eql(style1);
+              expect(affix2.style.height).to.eql(height2);
+              expect(wrapper2.getAttribute('style')).to.eql(style2);
+            }; // browser may scroll to the last position of page
+
+
+            _context.next = 7;
+            return wait(100);
+
+          case 7:
+            window.scrollTo(0, document.scrollingElement.scrollHeight - 1080);
+            _context.next = 10;
+            return wait(100);
+
+          case 10:
+            test(wrapper1.offsetHeight + "px", "position: fixed; width: 800px; top: 87px;", '', null); // scroll to the top
+
+            window.scrollTo(0, 0);
+            _context.next = 14;
+            return wait(100);
+
+          case 14:
+            test("", null, '', null); // change bottom
+
+            instance.set('bottom', 900);
+            _context.next = 18;
+            return wait(100);
+
+          case 18:
+            test("", null, wrapper2.offsetHeight + "px", "position: fixed; width: 800px; bottom: 900px;");
+
+          case 19:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, this);
+  })));
+  it('custom fix rule', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _mount2, instance, element, _element$querySelecto3, affix1, affix2, _element$querySelecto4, wrapper1, wrapper2, test;
+
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            this.timeout(0);
+            _mount2 = mount(CustomDemo, {
+              marginTop: '200px'
+            }), instance = _mount2[0], element = _mount2[1];
+            _element$querySelecto3 = element.querySelectorAll('.k-affix'), affix1 = _element$querySelecto3[0], affix2 = _element$querySelecto3[1];
+            _element$querySelecto4 = element.querySelectorAll('.k-affix-wrapper'), wrapper1 = _element$querySelecto4[0], wrapper2 = _element$querySelecto4[1];
+
+            test = function test(height1, style1, height2, style2) {
+              expect(affix1.style.height).to.eql(height1);
+              expect(wrapper1.getAttribute('style')).to.eql(style1);
+              expect(affix2.style.height).to.eql(height2);
+              expect(wrapper2.getAttribute('style')).to.eql(style2);
+            }; // browser may scroll to the last position of page
+
+
+            _context2.next = 7;
+            return wait(100);
+
+          case 7:
+            window.scrollTo(0, document.scrollingElement.scrollHeight - 1080);
+            _context2.next = 10;
+            return wait(100);
+
+          case 10:
+            test(wrapper1.offsetHeight + "px", "position: fixed; width: 800px; top: 150px;", '', null); // scroll to the top
+
+            window.scrollTo(0, 0);
+            _context2.next = 14;
+            return wait(100);
+
+          case 14:
+            test("", null, '', null); // change bottom
+
+            element.style.marginTop = '900px';
+            instance.set('bottom', 500);
+            _context2.next = 19;
+            return wait();
+
+          case 19:
+            document.scrollingElement.scrollTop = document.scrollingElement.scrollHeight;
+            _context2.next = 22;
+            return wait(100);
+
+          case 22:
+            test(wrapper1.offsetHeight + "px", "position: fixed; width: 800px; top: 150px;", wrapper2.offsetHeight + "px", "position: fixed; width: 800px; bottom: 500px;");
+            window.scrollTo(0, 0);
+            _context2.next = 26;
+            return wait(100);
+
+          case 26:
+            test("", null, '', null);
+
+          case 27:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2, this);
+  })));
+});
+
+export {normalize} from 'intact-vue-next';

package/components/affix/index.vdt.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce } from 'intact-vue-next';
+import { getRestProps, addStyle } from '../utils';
+import { makeStyles } from './styles';
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      children = _this$get.children,
+      className = _this$get.className,
+      style = _this$get.style;
+
+  var _this$style = this.style,
+      _style = _this$style.style,
+      containerStyle = _this$style.containerStyle;
+  var classNameObj = (_classNameObj = {
+    'k-affix': true,
+    'k-fixed': _style.value
+  }, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  return _$cv('div', _extends({
+    'className': _$cn(classNameObj)
+  }, getRestProps(this), {
+    'style': addStyle(style, containerStyle.value),
+    'ref': this.elementRef
+  }), _$ce(2, 'div', children, 0, 'k-affix-wrapper', {
+    'style': _style.value
+  }));
+}
+;
+
+export {normalize} from 'intact-vue-next';

package/components/affix/styles.d.ts

@@ -0,0 +1,5 @@
+import '../../styles/global';
+export declare function makeStyles(): string;
+
+
+export {normalize} from 'intact-vue-next';

package/components/affix/styles.js

@@ -0,0 +1,18 @@
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults } from '../../styles/utils';
+import '../../styles/global';
+var defaults = {
+  zIndex: 9
+};
+var affix;
+setDefault(function () {
+  affix = deepDefaults(theme, {
+    affix: defaults
+  }).affix;
+});
+export function makeStyles() {
+  return /*#__PURE__*/css("position:relative;z-index:", affix.zIndex, ";");
+}
+
+export {normalize} from 'intact-vue-next';

package/components/affix/useStyle.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from 'intact-vue-next';
+export declare function useStyle(elementRef: RefObject<HTMLElement>): {
+    style: import("../../hooks/useState").State<Record<string, string> | null>;
+    containerStyle: import("../../hooks/useState").State<Record<string, string> | null>;
+};
+
+
+export {normalize} from 'intact-vue-next';

package/components/affix/useStyle.js

@@ -0,0 +1,125 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { useInstance, onMounted, onUnmounted, nextTick } from 'intact-vue-next';
+import { useState, watchState } from '../../hooks/useState';
+import { isNullOrUndefined } from 'intact-shared';
+import ResizeObserver from 'resize-observer-polyfill';
+import { useReceive } from '../../hooks/useReceive';
+export function useStyle(elementRef) {
+  var instance = useInstance();
+  var style = useState(null);
+  var containerStyle = useState(null);
+  var ro = null;
+
+  function genStyle() {
+    var _instance$get = instance.get(),
+        offsetTop = _instance$get.top,
+        offsetBottom = _instance$get.bottom,
+        exclude = _instance$get.exclude,
+        shouldFix = _instance$get.shouldFix;
+
+    var _elementRef$value$get = elementRef.value.getBoundingClientRect(),
+        top = _elementRef$value$get.top,
+        bottom = _elementRef$value$get.bottom,
+        width = _elementRef$value$get.width,
+        height = _elementRef$value$get.height;
+
+    var setStyle = function setStyle(styles) {
+      if (!exclude || exclude && !exclude({
+        offsetTop: offsetTop,
+        offsetBottom: offsetBottom,
+        top: top,
+        bottom: bottom,
+        width: width,
+        height: height
+      })) {
+        style.set(_extends({
+          position: 'fixed',
+          width: width + "px"
+        }, styles));
+        containerStyle.set({
+          height: height + "px"
+        });
+      } else {
+        resetStyle();
+      }
+    };
+
+    if (isNullOrUndefined(offsetTop) && isNullOrUndefined(offsetBottom)) {
+      offsetTop = 0;
+    }
+
+    if (!isNullOrUndefined(offsetTop)) {
+      if (shouldFix && shouldFix({
+        offsetTop: offsetTop,
+        offsetBottom: offsetBottom
+      }) || !shouldFix && top < offsetTop) {
+        return setStyle({
+          top: offsetTop + "px"
+        });
+      }
+    } else {
+      var viewportHeight = document.documentElement.clientHeight;
+
+      if (shouldFix && shouldFix({
+        offsetTop: offsetTop,
+        offsetBottom: offsetBottom,
+        viewportHeight: viewportHeight
+      }) || !shouldFix && !isNullOrUndefined(offsetBottom) && viewportHeight - bottom <= offsetBottom) {
+        return setStyle({
+          bottom: offsetBottom + "px"
+        });
+      }
+    }
+
+    resetStyle();
+  }
+
+  function resetStyle() {
+    style.set(null);
+    containerStyle.set(null);
+  }
+
+  function observe() {
+    ro = new ResizeObserver(function () {
+      style.set(_extends({}, style.value, {
+        width: elementRef.value.offsetWidth + 'px'
+      }));
+    });
+    ro.observe(elementRef.value);
+  }
+
+  function disconnect() {
+    if (ro) {
+      ro.disconnect();
+    }
+  }
+
+  watchState(style, function (newStyle, oldStyle) {
+    nextTick(function () {
+      if (newStyle && !oldStyle) {
+        instance.trigger('change', true);
+        observe();
+      } else if (!newStyle) {
+        instance.trigger('change', false);
+        disconnect();
+      }
+    });
+  });
+  onMounted(function () {
+    genStyle();
+    window.addEventListener('scroll', genStyle);
+    window.addEventListener('resize', genStyle);
+  });
+  onUnmounted(function () {
+    window.removeEventListener('scroll', genStyle);
+    window.removeEventListener('resize', genStyle);
+    disconnect();
+  });
+  useReceive(['top', 'bottom'], genStyle, true);
+  return {
+    style: style,
+    containerStyle: containerStyle
+  };
+}
+
+export {normalize} from 'intact-vue-next';

package/components/badge/index.d.ts

@@ -0,0 +1,13 @@
+import { Component, TypeDefs } from 'intact-vue-next';
+export interface BadgeProps {
+    text?: string | number;
+    max?: number;
+    disabled?: boolean;
+}
+export declare class Badge extends Component<BadgeProps> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<BadgeProps>>;
+}
+
+
+export {normalize} from 'intact-vue-next';

package/components/badge/index.js

@@ -0,0 +1,21 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import { Component } from 'intact-vue-next';
+import template from './index.vdt';
+var typeDefs = {
+  text: [String, Number],
+  max: Number,
+  disabled: Boolean
+};
+export var Badge = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Badge, _Component);
+
+  function Badge() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  return Badge;
+}(Component);
+Badge.template = template;
+Badge.typeDefs = typeDefs;
+
+export {normalize} from 'intact-vue-next';

package/components/badge/index.vdt.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce } from 'intact-vue-next';
+import { getRestProps } from '../utils';
+import makeStyles from './styles';
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      className = _this$get.className,
+      children = _this$get.children,
+      text = _this$get.text,
+      disabled = _this$get.disabled,
+      max = _this$get.max;
+
+  if (typeof text === 'number' && max && text > max) {
+    text = max + "+";
+  }
+
+  var classNameObj = (_classNameObj = {
+    'k-badge': true
+  }, _classNameObj[className] = className, _classNameObj['k-has-text'] = text != null, _classNameObj['k-alone'] = !children, _classNameObj[makeStyles()] = true, _classNameObj);
+  return _$cv('div', _extends({}, getRestProps(this), {
+    'className': _$cn(classNameObj)
+  }), [children, !disabled ? _$ce(2, 'sup', text, 0, 'k-badge-text') : undefined]);
+}
+;
+
+export {normalize} from 'intact-vue-next';

package/components/badge/styles.d.ts

@@ -0,0 +1,5 @@
+import '../../styles/global';
+export default function makeStyles(): string;
+
+
+export {normalize} from 'intact-vue-next';

package/components/badge/styles.js

@@ -0,0 +1,28 @@
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults } from '../../styles/utils';
+import '../../styles/global';
+var defaults = {
+  width: '8px',
+
+  get height() {
+    return badge.width;
+  },
+
+  bgColor: '#ff4133',
+  // has-text
+  textHeight: '16px',
+  textPadding: '5px',
+  textColor: '#fff'
+};
+var badge;
+setDefault(function () {
+  badge = deepDefaults(theme, {
+    badge: defaults
+  }).badge;
+});
+export default function makeStyles() {
+  return /*#__PURE__*/css("display:inline-block;position:relative;vertical-align:middle;>.k-badge-text{display:inline-block;position:absolute;width:", badge.width, ";height:", badge.height, ";border-radius:50%;top:0;right:0;transform:translate(50%, -50%);background:", badge.bgColor, ";font-size:75%;vertical-align:baseline;}&.k-has-text>.k-badge-text{width:auto;height:", badge.textHeight, ";line-height:", badge.textHeight, ";border-radius:calc(", badge.textHeight, " / 2);padding:0 ", badge.textPadding, ";color:", badge.textColor, ";}&.k-alone>.k-badge-text{position:static;transform:none;}");
+}
+
+export {normalize} from 'intact-vue-next';

package/components/breadcrumb/index.d.ts

@@ -0,0 +1,18 @@
+import { Component, TypeDefs } from 'intact-vue-next';
+export * from './item';
+export interface BreadcrumbProps {
+    separator?: string;
+}
+export interface BreadcrumbEvents {
+}
+export interface BreadcrumbBlocks {
+    separator: null;
+}
+export declare class Breadcrumb extends Component<BreadcrumbProps, BreadcrumbEvents, BreadcrumbBlocks> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<BreadcrumbProps>>;
+    static defaults: () => Partial<BreadcrumbProps>;
+}
+
+
+export {normalize} from 'intact-vue-next';

package/components/breadcrumb/index.js

@@ -0,0 +1,28 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import { Component } from 'intact-vue-next';
+import template from './index.vdt';
+export * from './item';
+var typeDefs = {
+  separator: String
+};
+
+var defaults = function defaults() {
+  return {
+    separator: '>'
+  };
+};
+
+export var Breadcrumb = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Breadcrumb, _Component);
+
+  function Breadcrumb() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  return Breadcrumb;
+}(Component);
+Breadcrumb.template = template;
+Breadcrumb.typeDefs = typeDefs;
+Breadcrumb.defaults = defaults;
+
+export {normalize} from 'intact-vue-next';

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

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

package/components/breadcrumb/index.spec.js

@@ -0,0 +1,46 @@
+import Demo from '~/components/breadcrumb/demos/basic';
+import { mount, dispatchEvent, unmount } from '../../test/utils'; // Vue.use(VueRouter);
+
+describe('Breadcrumb', function () {
+  afterEach(function () {
+    unmount();
+  });
+  it('should go to the url set by to', function () {
+    var _mount = mount(Demo),
+        instance = _mount[0],
+        element = _mount[1];
+
+    dispatchEvent(element.children[0].children[0], 'click');
+    expect(location.hash).to.eql('#/');
+  }); // it('should go to the url when use vue-router', () => {
+  // const Test = {
+  // template: (`
+  // <Breadcrumb>
+  // <BreadcrumbItem to="index">Home</BreadcrumbItem>
+  // <BreadcrumbItem>Detail</BreadcrumbItem>
+  // </Breadcrumb>
+  // `),
+  // components: {
+  // Breadcrumb, BreadcrumbItem,
+  // }
+  // };
+  // const router = new VueRouter({
+  // mode: 'history',
+  // routes: [
+  // {path: '*', component: Test}
+  // ]
+  // });
+  // const container = document.createElement('div');
+  // document.body.appendChild(container);
+  // const app = new Vue({
+  // router,
+  // render: h => h('router-view')
+  // }).$mount(container);
+  // app.$el.querySelector('a').click();
+  // expect(location.pathname).to.eql('/index');
+  // history.back();
+  // document.body.removeChild(app.$el);
+  // });
+});
+
+export {normalize} from 'intact-vue-next';

package/components/breadcrumb/index.vdt.js

@@ -0,0 +1,62 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/splice";
+import { createElementVNode as _$ce, noop as _$no, createVNode as _$cv, className as _$cn } from 'intact-vue-next';
+import { getRestProps, mapChildren } from '../utils';
+import { BreadcrumbItem } from './item';
+import makeStyles from './styles';
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var _$blocks = {};
+  var __$blocks = {};
+
+  var _this$get = this.get(),
+      children = _this$get.children,
+      separator = _this$get.separator,
+      className = _this$get.className;
+
+  var classNameObj = (_classNameObj = {
+    'k-breadcrumb': true
+  }, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+
+  var separatorVNode = _$ce(2, 'span', (_$blocks['separator'] = function ($super) {
+    return separator;
+  }, __$blocks['separator'] = function ($super, data) {
+    var block = $blocks['separator'];
+
+    var callBlock = function callBlock() {
+      return _$blocks['separator'].call($this, $super, data);
+    };
+
+    return block ? block.call($this, callBlock, data) : callBlock();
+  }, __$blocks['separator'](_$no)), 0, 'k-breadcrumb-separator');
+
+  var vNodes = [];
+  var lastIndex = -1;
+  var separatorAmount = 0;
+  mapChildren(children, function (vNode, index) {
+    vNodes.push(vNode);
+
+    if (vNode.tag === BreadcrumbItem) {
+      lastIndex = index;
+      separatorAmount++;
+      vNodes.push(separatorVNode);
+    }
+  }); // remove the last BreadcrumbItem's separator,
+  // because it may have other vNodes follow the last BreadcrumbItem.
+  // we record the last separator's index and splice array like bellow to remove it
+
+  if (lastIndex > -1) {
+    _spliceInstanceProperty(vNodes).call(vNodes, lastIndex + separatorAmount, 1);
+  }
+
+  return _$cv('div', _extends({
+    'className': _$cn(classNameObj)
+  }, getRestProps(this)), vNodes);
+}
+;
+
+export {normalize} from 'intact-vue-next';