@king-design/intact 2.0.0-beta.0

package/es/components/table/useWidth.js

@@ -0,0 +1,127 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import _JSON$stringify from "@babel/runtime-corejs3/core-js/json/stringify";
+import { useInstance, onMounted, onBeforeUnmount, createRef } from 'intact';
+import ResizeObserver from 'resize-observer-polyfill';
+import { useState } from '../../hooks/useState';
+import { debounce } from '../utils';
+var hasLocalStorage = typeof localStorage !== 'undefined';
+export function useWidth(scrollRef, getColumns) {
+  var instance = useInstance();
+  var tableRef = createRef();
+  var widthMap = useState({});
+  var tableWidth = useState(null);
+  initWidthFromStore();
+  var ro;
+  onMounted(function () {
+    checkTableWidth(true); // use debounce instead of throttle, because if there is
+    // transition on parent container, the width is weired
+    // #342
+
+    ro = new ResizeObserver(debounce(function () {
+      if (instance.$unmounted) return;
+      checkTableWidth(false);
+    }, 100, true));
+    ro.observe(scrollRef.value);
+  });
+  onBeforeUnmount(function () {
+    ro.disconnect();
+  }); // if exist widthStoreKey, we get the default width from localStorage
+
+  function initWidthFromStore() {
+    var _instance$get = instance.get(),
+        widthStoreKey = _instance$get.widthStoreKey;
+
+    if (widthStoreKey && hasLocalStorage) {
+      var data = localStorage.getItem(widthStoreKey);
+
+      if (data) {
+        try {
+          var _JSON$parse = JSON.parse(data),
+              map = _mapInstanceProperty(_JSON$parse),
+              width = _JSON$parse.width;
+
+          if (map) {
+            widthMap.set(map);
+          }
+
+          if (width) {
+            tableWidth.set(width);
+          }
+        } catch (e) {}
+      }
+    }
+  }
+
+  function storeWidth() {
+    // store width if has widthStoreKey
+    var _instance$get2 = instance.get(),
+        widthStoreKey = _instance$get2.widthStoreKey;
+
+    if (widthStoreKey) {
+      localStorage.setItem(widthStoreKey, _JSON$stringify({
+        map: widthMap.value,
+        width: tableWidth.value
+      }));
+    }
+  }
+
+  function checkTableWidth(isMount) {
+    checkColumnMinWidth(false);
+
+    if (instance.get('resizable')) {
+      var _tableWidth = tableRef.value.offsetWidth;
+      var containerWidth = scrollRef.value.offsetWidth;
+
+      if (_tableWidth < containerWidth) {
+        tableWidth.set(isMount ? null : containerWidth);
+        storeWidth();
+      }
+    }
+  }
+
+  function checkColumnMinWidth(isStop) {
+    var shouldUpdate = false;
+    getColumns().forEach(function (rowColumns) {
+      rowColumns.forEach(function (column) {
+        var _column$props = column.props,
+            key = _column$props.key,
+            minWidth = _column$props.minWidth;
+
+        if (minWidth) {
+          var width = column.children.elementRef.value.offsetWidth;
+
+          if (width < minWidth) {
+            widthMap.value[key] = minWidth;
+            shouldUpdate = true;
+          }
+        }
+      });
+    });
+
+    if (shouldUpdate) {
+      instance.forceUpdate(function () {
+        // check again because it may affect other columns
+        if (!isStop) {
+          // only check one more time, because sometimes we can not fix the width of column, #473
+          // e.g. table display: none;
+          checkColumnMinWidth(true);
+        }
+      });
+    }
+  }
+
+  function getWidth(key) {
+    var width = widthMap.value[key]; // if (width === 'auto') return width;
+
+    if (width) return width + "px";
+    return null;
+  }
+
+  return {
+    tableRef: tableRef,
+    tableWidth: tableWidth,
+    widthMap: widthMap,
+    storeWidth: storeWidth,
+    getWidth: getWidth
+  };
+}

package/es/components/tabs/constants.d.ts

@@ -0,0 +1 @@
+export declare const TABS = "Tabs";

package/es/components/tabs/constants.js

@@ -0,0 +1 @@
+export var TABS = 'Tabs';

package/es/components/tabs/index.d.ts

@@ -0,0 +1,27 @@
+import { Component, TypeDefs } from 'intact';
+import { Sizes } from '../../styles/utils';
+import { TabProps } from './tab';
+import type { Events } from '../types';
+export * from './tab';
+export interface TabsProps<T = any> {
+    value?: T;
+    vertical?: boolean;
+    size?: Sizes;
+    type?: 'default' | 'card' | 'border-card' | 'no-border-card';
+    closable?: boolean;
+    beforeChange?: (value: T) => boolean | Promise<boolean>;
+}
+export interface TabsEvents<T = any> {
+    remove: [T];
+}
+export declare class Tabs<T = any> extends Component<TabsProps<T>, TabsEvents<T>> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<TabsProps<any>>>;
+    static defaults: () => Partial<TabsProps<any>>;
+    static events: Events<TabsEvents<any>>;
+    private activeBar;
+    private scroll;
+    init(): void;
+    changeTab(tabProps: TabProps): Promise<void>;
+    remove(value: T): void;
+}

package/es/components/tabs/index.js

@@ -0,0 +1,117 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { Component, provide } from 'intact';
+import template from './index.vdt';
+import { TABS } from './constants';
+import { sizes } from '../../styles/utils';
+import { useActiveBar } from './useActiveBar';
+import { useScroll } from './useScroll';
+export * from './tab';
+var typeDefs = {
+  value: null,
+  vertical: Boolean,
+  size: sizes,
+  type: ['default', 'card', 'border-card', 'no-border-card'],
+  closable: Boolean,
+  beforeChange: Function
+};
+
+var defaults = function defaults() {
+  return {
+    size: 'default',
+    type: 'default'
+  };
+};
+
+var events = {
+  remove: true
+};
+export var Tabs = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Tabs, _Component);
+
+  function Tabs() {
+    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.activeBar = useActiveBar();
+    _this.scroll = useScroll();
+    return _this;
+  }
+
+  var _proto = Tabs.prototype;
+
+  _proto.init = function init() {
+    provide(TABS, this);
+  };
+
+  _proto.changeTab = /*#__PURE__*/function () {
+    var _changeTab = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(tabProps) {
+      var _this$get, beforeChange, ret;
+
+      return _regeneratorRuntime.wrap(function _callee$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _this$get = this.get(), beforeChange = _this$get.beforeChange;
+
+              if (!beforeChange) {
+                _context2.next = 7;
+                break;
+              }
+
+              _context2.next = 4;
+              return beforeChange(tabProps.value);
+
+            case 4:
+              ret = _context2.sent;
+
+              if (ret) {
+                _context2.next = 7;
+                break;
+              }
+
+              return _context2.abrupt("return");
+
+            case 7:
+              // if exits 'to', we don't change the value,
+              // but let the page to change it by passing the value prop
+              if (!tabProps.to) {
+                this.set('value', tabProps.value); // } else if (this.$router) {
+                // this.$router.push(item.to);
+              } else {
+                window.location.href = tabProps.to;
+              }
+
+            case 8:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee, this);
+    }));
+
+    function changeTab(_x) {
+      return _changeTab.apply(this, arguments);
+    }
+
+    return changeTab;
+  }();
+
+  _proto.remove = function remove(value) {
+    this.trigger('remove', value);
+  };
+
+  return Tabs;
+}(Component);
+Tabs.template = template;
+Tabs.typeDefs = typeDefs;
+Tabs.defaults = defaults;
+Tabs.events = events;

package/es/components/tabs/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,96 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import ClosableDemo from '~/components/tabs/demos/closable';
+import BeforeChangeDemo from '~/components/tabs/demos/beforeChange';
+import { mount, unmount, wait } from '../../test/utils';
+describe('Tabs', function () {
+  afterEach(function () {
+    return unmount();
+  });
+  it('closable', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _mount, instance, element, tabs, prev, next, icon;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            this.timeout(0);
+            _mount = mount(ClosableDemo), instance = _mount[0], element = _mount[1];
+            element.style.width = '400px';
+            tabs = element.querySelector('.k-tabs'); // add tab
+
+            instance._add();
+
+            _context.next = 7;
+            return wait(300);
+
+          case 7:
+            expect(tabs.outerHTML).to.matchSnapshot(); // prev & next
+
+            prev = tabs.querySelector('.k-tabs-prev');
+            next = tabs.querySelector('.k-tabs-next');
+            prev.click();
+            _context.next = 13;
+            return wait();
+
+          case 13:
+            expect(tabs.outerHTML).to.matchSnapshot();
+            next.click();
+            _context.next = 17;
+            return wait();
+
+          case 17:
+            expect(tabs.outerHTML).to.matchSnapshot(); // close
+
+            icon = tabs.querySelector('.k-tab-close');
+            icon.click();
+            _context.next = 22;
+            return wait();
+
+          case 22:
+            expect(tabs.outerHTML).to.matchSnapshot();
+
+          case 23:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, this);
+  })));
+  it('beforeChange', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var ret, _mount2, instance, element, tab;
+
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            ret = false;
+
+            BeforeChangeDemo.prototype.beforeChange = function () {
+              return ret;
+            };
+
+            _mount2 = mount(BeforeChangeDemo), instance = _mount2[0], element = _mount2[1];
+            tab = element.querySelector('.k-tab');
+            tab.click();
+            _context2.next = 7;
+            return wait(50);
+
+          case 7:
+            expect(instance.get('tab')).to.eql('ruleout');
+            ret = true;
+            tab.click();
+            _context2.next = 12;
+            return wait(50);
+
+          case 12:
+            expect(instance.get('tab')).to.eql('rulein');
+
+          case 13:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+});

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

@@ -0,0 +1,60 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn, createUnknownComponentVNode as _$cc, createElementVNode as _$ce } from 'intact';
+import { Button } from '../button';
+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,
+      vertical = _this$get.vertical,
+      size = _this$get.size,
+      type = _this$get.type;
+
+  var _this$scroll = this.scroll,
+      isScroll = _this$scroll.isScroll,
+      left = _this$scroll.left,
+      enablePrev = _this$scroll.enablePrev,
+      enableNext = _this$scroll.enableNext,
+      prev = _this$scroll.prev,
+      next = _this$scroll.next,
+      scrollRef = _this$scroll.scrollRef,
+      wrapperRef = _this$scroll.wrapperRef;
+  var classNameObj = (_classNameObj = {
+    'k-tabs': true
+  }, _classNameObj["k-" + size] = size, _classNameObj['k-vertical'] = vertical, _classNameObj['k-tabs-card'] = type === 'no-border-card', _classNameObj["k-tabs-" + type] = type !== 'default', _classNameObj["k-is-scroll"] = isScroll.value, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  return _$cv('div', _extends({
+    'className': _$cn(classNameObj)
+  }, getRestProps(this)), [isScroll.value ? _$cc(Button, {
+    'className': 'k-tabs-prev',
+    'type': 'none',
+    'icon': true,
+    'key': 'prev',
+    'size': size,
+    'disabled': !enablePrev.value,
+    'ev-click': prev,
+    'children': _$ce(2, 'i', null, 1, 'ion-ios-arrow-left')
+  }, 'prev') : undefined, _$ce(2, 'div', _$ce(2, 'div', [children, _$ce(2, 'div', null, 1, 'k-tabs-active-bar', {
+    'style': this.activeBar.value
+  })], 0, 'k-tabs-wrapper', {
+    'style': {
+      transform: "translateX(" + left.value + "px)"
+    }
+  }, null, wrapperRef), 2, 'k-tabs-scroll c-clearfix', null, null, scrollRef), isScroll.value ? _$cc(Button, {
+    'className': 'k-tabs-next',
+    'type': 'none',
+    'icon': true,
+    'key': 'next',
+    'size': size,
+    'disabled': !enableNext.value,
+    'ev-click': next,
+    'children': _$ce(2, 'i', null, 1, 'ion-ios-arrow-right')
+  }, 'next') : undefined]);
+}
+;

package/es/components/tabs/styles.d.ts

@@ -0,0 +1,2 @@
+import '../../styles/global';
+export declare function makeStyles(): string;

package/es/components/tabs/styles.js

@@ -0,0 +1,93 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults, sizes } from '../../styles/utils';
+import '../../styles/global';
+var closeFontSizeMap = {
+  large: '24px',
+  default: '20px',
+  small: '18px',
+  mini: '16px'
+};
+var defaults = deepDefaults({
+  get borderColor() {
+    return theme.color.border;
+  },
+
+  borderWidth: '1px',
+
+  get border() {
+    return tabs.borderWidth + " solid " + tabs.borderColor;
+  },
+
+  margin: "0 10px",
+
+  get color() {
+    return theme.color.text;
+  },
+
+  closeGutter: "8px",
+  // vertical
+  verticalPadding: "0 25px",
+
+  //active
+  get activeColor() {
+    return theme.color.primary;
+  },
+
+  highlight: {
+    height: "2px",
+
+    // get bottom() { return `calc(-${tabs.highlight.height} / 2)` },
+    get bgColor() {
+      return theme.color.primary;
+    }
+
+  },
+  // scroll
+  navigatorWidth: "20px",
+  // border-card
+  borderCard: {
+    get bgColor() {
+      return theme.color.bg;
+    }
+
+  },
+  // no-border-card
+  noBorderCard: {
+    bgColor: "#eee",
+    gutter: "4px"
+  }
+}, sizes.reduce(function (memo, size) {
+  memo[size] = {
+    get fontSize() {
+      return theme[size].fontSize;
+    },
+
+    get height() {
+      return theme[size].height;
+    },
+
+    get padding() {
+      return "0 " + theme[size].padding;
+    },
+
+    get closeFontSize() {
+      return closeFontSizeMap[size];
+    }
+
+  };
+  return memo;
+}, {}));
+var tabs;
+setDefault(function () {
+  tabs = deepDefaults(theme, {
+    tabs: defaults
+  }).tabs;
+});
+export function makeStyles() {
+  return /*#__PURE__*/css("border-bottom:", tabs.border, ";position:relative;line-height:1;.k-tab{margin:", tabs.margin, ";cursor:pointer;display:inline-block;text-align:center;color:", tabs.color, ";position:relative;vertical-align:middle;&:hover,&.k-active{color:", tabs.activeColor, ";}&.k-disabled{color:", theme.color.disabled, ";cursor:not-allowed;}}.k-tab-close{margin-right:-", tabs.closeGutter, ";margin-left:", tabs.closeGutter, ";position:relative;top:-1px;}.k-tabs-active-bar{transition:all ", theme.transition, ";position:absolute;left:0;height:", tabs.highlight.height, ";background:", tabs.highlight.bgColor, ";bottom:calc(-", tabs.highlight.height, " / 2);}&.k-vertical{display:inline-block;border-bottom:none;border-right:", tabs.border, ";.k-tab{display:block;margin:0;padding:", tabs.verticalPadding, ";}.k-tabs-active-bar{left:auto;top:0;right:calc(-", tabs.highlight.height, " / 2);width:", tabs.highlight.height, ";height:auto;}}&.k-tabs-card{.k-tab{margin:0;}.k-tabs-active-bar{background:#fff;top:0;height:auto;z-index:-1;border-left:", tabs.border, ";border-right:", tabs.border, ";&:before{content:'';display:block;position:absolute;height:", tabs.highlight.height, ";background:", theme.color.primary, ";top:0;left:-", tabs.borderWidth, ";right:-", tabs.borderWidth, ";}}&.k-vertical{.k-tabs-active-bar{left:0;width:auto;border-left:none;border-right:none;border-top:", tabs.border, ";border-bottom:", tabs.border, ";&:before{width:", tabs.highlight.height, ";left:0;right:auto;bottom:0;height:auto;}}}}&.k-tabs-border-card{border:", tabs.border, ";border-bottom:none;background:", tabs.borderCard.bgColor, ";.k-tab{margin:0;}.k-tabs-active-bar{background:#fff;top:0;height:auto;z-index:-1;}&.k-vertical{border-right:none;border-bottom:", tabs.border, ";.k-tabs-active-bar{width:auto;height:0;left:0;bottom:0;right:0;}}}&.k-tabs-no-border-card{border-bottom:none;.k-tab{margin-right:", tabs.noBorderCard.gutter, ";&:before{content:'';display:block;position:absolute;background:", tabs.noBorderCard.bgColor, ";top:0;bottom:0;left:0;right:0;z-index:-1;}}.k-tabs-acitve-bar{border:none;&:before{left:0;right:0;}}.k-vertical{border-right:none;.k-tab{margin-top:", tabs.noBorderCard.gutter, ";}.k-tabs-active-bar{border:none;}}}&:not(.k-vertical){.k-tabs-scroll{overflow:hidden;position:relative;padding-bottom:1px;margin-bottom:-1px;}&.k-tabs-border-card,&.k-tabs-no-border-card{.k-tabs-scroll{padding-bottom:0;margin-bottom:0;}}.k-tabs-wrapper{white-space:nowrap;float:left;transition:transform ", theme.transition, ";}.k-tabs-prev,.k-tabs-next{position:absolute;top:0;width:", tabs.navigatorWidth, "!important;}.k-tabs-prev{left:0;}.k-tabs-next{right:0;}&.k-is-scroll{padding:0 ", tabs.navigatorWidth, ";}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+    var styles = tabs[size];
+    return "\n                &.k-" + size + " {\n                    .k-tab {\n                        font-size: " + styles.fontSize + ";\n                        height: " + styles.height + ";\n                        line-height: " + styles.height + ";\n                        padding: " + styles.padding + ";\n                    }\n                    .k-tab-close .k-icon {\n                        font-size: " + styles.closeFontSize + ";\n                    }\n                }\n            ";
+  }), ";");
+}

package/es/components/tabs/tab.d.ts

@@ -0,0 +1,16 @@
+import { Component } from 'intact';
+export interface TabProps {
+    value?: any;
+    disabled?: boolean;
+    to?: string | object;
+    closable?: boolean;
+}
+export interface TabEvents {
+    click: [MouseEvent];
+}
+export declare class Tab extends Component<TabProps, TabEvents> {
+    static template: string | import("intact").Template<any>;
+    private tabs;
+    private onClick;
+    private remove;
+}

package/es/components/tabs/tab.js

@@ -0,0 +1,53 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { __decorate } from "tslib";
+import { Component, inject } from 'intact';
+import template from './tab.vdt';
+import { TABS } from './constants';
+import { bind } from '../utils';
+var typeDefs = {
+  value: null,
+  disabled: Boolean,
+  to: [String, Object],
+  closable: Boolean
+};
+export var Tab = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Tab, _Component);
+
+  function Tab() {
+    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.tabs = inject(TABS);
+    return _this;
+  }
+
+  var _proto = Tab.prototype;
+
+  _proto.onClick = function onClick(e) {
+    if (this.get('disabled')) {
+      e.preventDefault();
+    } else {
+      this.tabs.changeTab(this.get());
+      this.trigger('click', e);
+    }
+  };
+
+  _proto.remove = function remove(e) {
+    e.stopPropagation();
+    this.tabs.remove(this.get('value'));
+  };
+
+  return Tab;
+}(Component);
+Tab.template = template;
+
+__decorate([bind], Tab.prototype, "onClick", null);
+
+__decorate([bind], Tab.prototype, "remove", null);

package/es/components/tabs/tab.vdt.js

@@ -0,0 +1,44 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn, createUnknownComponentVNode as _$cc } from 'intact';
+import { Button } from '../button';
+import { Icon } from '../icon';
+import { getRestProps } from '../utils';
+import { isNullOrUndefined } from 'intact-shared';
+var _$tmp0 = {
+  'className': 'ion-ios-close-empty'
+};
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      value = _this$get.value,
+      children = _this$get.children,
+      className = _this$get.className,
+      disabled = _this$get.disabled,
+      closable = _this$get.closable;
+
+  var _this$tabs$get = this.tabs.get(),
+      currentValue = _this$tabs$get.value;
+
+  var classNameObj = (_classNameObj = {
+    'k-tab': true,
+    'k-active': !isNullOrUndefined(value) && value === currentValue
+  }, _classNameObj[className] = className, _classNameObj['k-disabled'] = disabled, _classNameObj);
+  return _$cv('div', _extends({}, getRestProps(this), {
+    'className': _$cn(classNameObj),
+    'ev-click': this.onClick
+  }), [children, (isNullOrUndefined(closable) ? this.tabs.get('closable') : closable) ? _$cc(Button, {
+    'type': 'none',
+    'icon': true,
+    'disabled': disabled,
+    'size': 'mini',
+    'className': 'k-tab-close',
+    'ev-click': this.remove,
+    'children': _$cc(Icon, _$tmp0)
+  }) : undefined]);
+}
+;

package/es/components/tabs/useActiveBar.d.ts

@@ -0,0 +1 @@
+export declare function useActiveBar(): import("../../hooks/useState").State<Record<string, string> | null>;