@king-design/vue 2.0.0-beta.0

package/components/table/row.d.ts

@@ -0,0 +1,49 @@
+import { Component, VNodeComponentClass, Props, Key, IntactDom } from 'intact-vue-next';
+import type { TableColumnProps } from './column';
+import type { TableProps, TableRowKey } from './table';
+import type { TableGrid } from './useMerge';
+export interface TableRowProps {
+    key: TableRowKey;
+    data: any;
+    cols: Props<TableColumnProps>[];
+    checkType: TableProps['checkType'];
+    hasFixedLeft: boolean;
+    onClick: (data: any, index: number, key: TableRowKey) => void;
+    checked: boolean;
+    indeterminate: boolean;
+    index: number;
+    disabled: boolean;
+    allDisabled: boolean;
+    onChangeChecked: (index: number, checked: boolean) => void;
+    grid: TableGrid;
+    selected: boolean;
+    spreaded: boolean;
+    hasChildren: boolean;
+    indent: number;
+    onToggleSpreadRow: (key: TableRowKey) => void;
+    onBeforeUnmount: (key: TableRowKey) => void;
+    offsetMap: Record<Key, number>;
+    draggable: boolean;
+    draggingKey: TableRowKey | null;
+    onRowDragStart: DragCallback;
+    onRowDragOver: DragCallback;
+    onRowDragEnd: DragCallback;
+}
+declare type DragCallback = (e: MouseEvent, tableRow: TableRow) => void;
+export declare class TableRow extends Component<TableRowProps> {
+    static template: string | import("intact").Template<any>;
+    $update(lastVNode: VNodeComponentClass<this>, nextVNode: VNodeComponentClass<this>, parentDom: Element, anchor: IntactDom | null, mountedQueue: Function[], force: boolean): void;
+    onClick(e: MouseEvent): void;
+    onChangeChecked(v: boolean): void;
+    onClickArrow(e: MouseEvent): void;
+    onMouseEnter(e: MouseEvent): void;
+    onMouseLeave(e: MouseEvent): void;
+    onRowDragStart(e: MouseEvent): void;
+    onRowDragOver(e: MouseEvent): void;
+    onRowDragEnd(e: MouseEvent): void;
+    beforeUnmount(): void;
+}
+export {};
+
+
+export {normalize} from 'intact-vue-next';

package/components/table/row.js

@@ -0,0 +1,122 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import { __decorate } from "tslib";
+import { Component } from 'intact-vue-next';
+import template from './row.vdt';
+import { bind } from '../utils';
+export var TableRow = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(TableRow, _Component);
+
+  function TableRow() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  var _proto = TableRow.prototype;
+
+  _proto.$update = function $update(lastVNode, nextVNode, parentDom, anchor, mountedQueue, force) {
+    var lastProps = lastVNode.props;
+    var nextProps = nextVNode.props;
+    var isSame = true;
+    var key;
+
+    for (key in lastProps) {
+      // ignore index
+      if (key === 'index') continue;
+
+      if (lastProps[key] !== nextProps[key]) {
+        isSame = false;
+        break;
+      }
+    }
+
+    if (!isSame) {
+      _Component.prototype.$update.call(this, lastVNode, nextVNode, parentDom, anchor, mountedQueue, force);
+    } else {
+      // should update index
+      this.set(nextProps, {
+        silent: true
+      });
+    }
+  };
+
+  _proto.onClick = function onClick(e) {
+    if (e.target.tagName === 'INPUT') return;
+
+    var _this$get = this.get(),
+        index = _this$get.index,
+        key = _this$get.key,
+        data = _this$get.data,
+        onClick = _this$get.onClick,
+        disabled = _this$get.disabled;
+
+    if (!disabled) {
+      onClick(data, index, key);
+    }
+  };
+
+  _proto.onChangeChecked = function onChangeChecked(v) {
+    var _this$get2 = this.get(),
+        index = _this$get2.index,
+        onChangeChecked = _this$get2.onChangeChecked;
+
+    onChangeChecked(index, v);
+  };
+
+  _proto.onClickArrow = function onClickArrow(e) {
+    e.stopPropagation();
+
+    var _this$get3 = this.get(),
+        onToggleSpreadRow = _this$get3.onToggleSpreadRow,
+        key = _this$get3.key;
+
+    onToggleSpreadRow(key);
+  };
+
+  _proto.onMouseEnter = function onMouseEnter(e) {
+    // for tooltip
+    var mouseEnter = this.get('ev-mouseenter');
+    mouseEnter && mouseEnter(e);
+  };
+
+  _proto.onMouseLeave = function onMouseLeave(e) {
+    // for tooltip
+    var mouseLeave = this.get('ev-mouseleave');
+    mouseLeave && mouseLeave(e);
+  };
+
+  _proto.onRowDragStart = function onRowDragStart(e) {
+    this.get('onRowDragStart')(e, this);
+  };
+
+  _proto.onRowDragOver = function onRowDragOver(e) {
+    this.get('onRowDragOver')(e, this);
+  };
+
+  _proto.onRowDragEnd = function onRowDragEnd(e) {
+    this.get('onRowDragEnd')(e, this);
+  };
+
+  _proto.beforeUnmount = function beforeUnmount() {
+    this.get('onBeforeUnmount')(this.get('key'));
+  };
+
+  return TableRow;
+}(Component);
+TableRow.template = template;
+
+__decorate([bind], TableRow.prototype, "onClick", null);
+
+__decorate([bind], TableRow.prototype, "onChangeChecked", null);
+
+__decorate([bind], TableRow.prototype, "onClickArrow", null);
+
+__decorate([bind], TableRow.prototype, "onMouseEnter", null);
+
+__decorate([bind], TableRow.prototype, "onMouseLeave", null);
+
+__decorate([bind], TableRow.prototype, "onRowDragStart", null);
+
+__decorate([bind], TableRow.prototype, "onRowDragOver", null);
+
+__decorate([bind], TableRow.prototype, "onRowDragEnd", null);
+
+export {normalize} from 'intact-vue-next';

package/components/table/row.vdt.js

@@ -0,0 +1,128 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, createUnknownComponentVNode as _$cc } from 'intact-vue-next';
+import { getClassAndStyleForFixed } from './useFixedColumns';
+import { Checkbox } from '../checkbox';
+import { Radio } from '../radio';
+import { TableCell } from './cell';
+import { createElementVNode, className as cx } from 'intact';
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj,
+      _this = this;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      cols = _this$get.cols,
+      data = _this$get.data,
+      checkType = _this$get.checkType,
+      hasFixedLeft = _this$get.hasFixedLeft,
+      checked = _this$get.checked,
+      disabled = _this$get.disabled,
+      className = _this$get.className,
+      merge = _this$get.merge,
+      grid = _this$get.grid,
+      rowIndex = _this$get.index,
+      indeterminate = _this$get.indeterminate,
+      allDisabled = _this$get.allDisabled,
+      selected = _this$get.selected,
+      spreaded = _this$get.spreaded,
+      hasChildren = _this$get.hasChildren,
+      indent = _this$get.indent,
+      key = _this$get.key,
+      offsetMap = _this$get.offsetMap,
+      draggable = _this$get.draggable,
+      draggingKey = _this$get.draggingKey;
+
+  var classNameObj = (_classNameObj = {
+    'k-disabled': disabled,
+    'k-checked': checked,
+    'k-selected': selected,
+
+    /* 'k-hidden': hidden, */
+    'k-spreaded': spreaded,
+    'k-dragging': draggingKey === key
+  }, _classNameObj[className] = className, _classNameObj);
+
+  var getGridItem = function getGridItem(columnIndex) {
+    var _grid$rowIndex;
+
+    return ((_grid$rowIndex = grid[rowIndex]) == null ? void 0 : _grid$rowIndex[columnIndex]) || {
+      render: true,
+      spans: null
+    };
+  };
+
+  var vNodes = [];
+
+  var pushCheckTypeVNode = function pushCheckTypeVNode(children) {
+    var _getGridItem = getGridItem(0),
+        render = _getGridItem.render,
+        spans = _getGridItem.spans;
+
+    if (!render) return;
+    vNodes.push(_$cv('td', _extends({
+      'key': '$checktype'
+    }, getClassAndStyleForFixed({
+      fixed: hasFixedLeft ? 'left' : false,
+      className: 'k-table-check'
+    }, 0), spans), children));
+  };
+
+  if (checkType === 'checkbox') {
+    pushCheckTypeVNode(_$cc(Checkbox, {
+      'value': indeterminate ? false : checked,
+      'disabled': allDisabled,
+      'indeterminate': indeterminate,
+      'ev-$change:value': this.onChangeChecked
+    }));
+  } else if (checkType === 'radio') {
+    pushCheckTypeVNode(_$cc(Radio, {
+      'value': indeterminate ? false : checked,
+      'disabled': allDisabled,
+      'ev-$change:value': this.onChangeChecked
+    }));
+  }
+
+  var columnIndexOffset = checkType !== 'none' ? 1 : 0;
+  cols.forEach(function (props, columnIndex) {
+    var _getGridItem2 = getGridItem(columnIndex + columnIndexOffset),
+        render = _getGridItem2.render,
+        spans = _getGridItem2.spans;
+
+    if (!render) return;
+    var columnKey = props.key;
+    vNodes.push(_$cc(TableCell, {
+      'props': props,
+      'columnIndex': columnIndex,
+      'rowIndex': rowIndex,
+      'data': data,
+      'offset': offsetMap[columnKey],
+      'checkType': checkType,
+      'indent': indent,
+      'grid': grid,
+      'colspan': spans ? spans.colspan : undefined,
+      'rowspan': spans ? spans.rowspan : undefined,
+      'onClickArrow': _this.onClickArrow,
+      'hasChildren': hasChildren,
+      'key': columnKey
+    }, columnKey));
+  }); // for performance, no normalize
+
+  return createElementVNode(2, 'tr', vNodes, 8
+  /* HasKeyedChildren */
+  , cx(classNameObj), {
+    'data-key': key,
+    'ev-mouseenter': this.onMouseEnter,
+    'ev-mouseleave': this.onMouseLeave,
+    'ev-click': this.onClick,
+    'ev-dragstart': draggable ? this.onRowDragStart : null,
+    'ev-dragover': draggable ? this.onRowDragOver : null,
+    'ev-dragend': draggable ? this.onRowDragEnd : null,
+    'draggable': draggable ? true : null
+  });
+}
+;
+
+export {normalize} from 'intact-vue-next';

package/components/table/styles.d.ts

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

package/components/table/styles.js

@@ -0,0 +1,86 @@
+import _sortInstanceProperty from "@babel/runtime-corejs3/core-js/instance/sort";
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults, palette } from '../../styles/utils';
+import '../../styles/global';
+var defaults = {
+  border: "1px solid #e5e5e5",
+  fontSize: "12px",
+  bgColor: "#fff",
+
+  get color() {
+    return theme.color.text;
+  },
+
+  fixLeftShadow: "inset 5px 0px 6px -6px rgb(0 0 0 / 30%)",
+  fixRightShadow: "inset -5px 0px 6px -6px rgb(0 0 0 / 30%)",
+  // head
+  thead: {
+    get bgColor() {
+      return theme.color.bg;
+    },
+
+    padding: "0 5px 0 12px",
+    fontSize: "12px",
+    fontWeight: "bold",
+    textAlign: 'left',
+    height: "30px",
+    delimiterHeight: '12px',
+    delimiterColor: '#bfbfbf'
+  },
+  // tbody 
+  tbody: {
+    get hoverBgcolor() {
+      return theme.color.bg;
+    },
+
+    padding: "11px 5px 11px 12px"
+  },
+  // stripe
+  stripeBgColor: '#f9f9fc',
+  // group
+  group: {
+    width: "14px",
+    gap: "10px",
+    color: "#a6a6a6",
+    menuMaxHeight: '200px',
+
+    get activeColor() {
+      return theme.color.primary;
+    }
+
+  },
+  // sort
+  sort: {
+    iconHeight: "7px",
+    gap: "10px",
+    color: "#a6a6a6",
+    disabledColor: "#ddd"
+  },
+  expandBgColor: '#fdfcff',
+
+  get selectedBgColor() {
+    return palette(theme.color.primary, -4);
+  },
+
+  // tree
+  arrow: {
+    gap: "4px"
+  },
+  resizeWidth: "5px",
+  draggingOpacity: ".4"
+};
+var table;
+setDefault(function () {
+  table = deepDefaults(theme, {
+    table: defaults
+  }).table;
+});
+export function makeStyles() {
+  return /*#__PURE__*/css("font-size:", table.fontSize, ";color:", table.color, ";border-top:", table.border, ";position:relative;z-index:0;.k-table-wrapper{border-bottom:", table.border, ";overflow:auto;}table{width:100%;border-spacing:0;table-layout:fixed;}thead{text-align:", table.thead.textAlign, ";font-size:", table.thead.fontSize, ";font-weight:", table.thead.fontWeight, ";position:sticky;top:0;z-index:2;tr{height:", table.thead.height, ";}}th{padding:", table.thead.padding, ";position:relative;background:", table.thead.bgColor, ";border-bottom:", table.border, ";&:before{content:'';height:", table.thead.delimiterHeight, ";position:absolute;background-color:", table.thead.delimiterColor, ";width:1px;left:1px;top:50%;transform:translateY(-50%);}&:first-of-type:before{display:none;}}.k-table-title{display:inline-flex;align-items:center;max-width:100%;}.k-table-title-text{flex:1;}tbody{tr{&:hover td{background:", table.tbody.hoverBgcolor, ";}&:last-of-type td{border-bottom:none;}}}td{padding:", table.tbody.padding, ";border-bottom:", table.border, ";background:", table.bgColor, ";word-wrap:break-word;}.k-fixed-left,.k-fixed-right{position:sticky;z-index:1;&:after{content:'';display:block;transition:box-shadow ", theme.transition, ";position:absolute;top:0;bottom:0px;width:10px;pointer-events:none;}}.k-fixed-left:after{right:-11px;}.k-fixed-right:after{left:-11px;}&.k-scroll-left .k-fixed-right:after{box-shadow:", table.fixRightShadow, ";}&.k-scroll-right .k-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}&.k-scroll-middle{.k-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}.k-fixed-right:after{box-shadow:", table.fixRightShadow, ";}}.k-fixed-right+.k-fixed-right:after{display:none;}.k-table-affix-header{position:sticky;top:0;left:0;.k-affix-wrapper{overflow:hidden;}}&.k-border,&.k-grid{.k-table-wrapper{border-left:", table.border, ";border-right:", table.border, ";}}&.k-grid{td:not(:last-of-type),th:not(:last-of-type){border-right:", table.border, ";}th:before{display:none;}}&.k-stripe{tr:nth-child(even):not(:hover) td{background:", table.stripeBgColor, ";}}.k-table-group{width:", table.group.width, "!important;height:", table.group.width, "!important;margin-left:", table.group.gap, ";position:relative;color:", table.group.color, ";&:hover{color:", theme.color.primary, ";}.k-icon{transition:transform ", theme.transition, ";}&.k-dropdown-open .k-icon{transform:rotate(180deg);}}.k-table-check{.k-checkbox,.k-radio{position:relative;top:-1px;}}.k-column-sortable{cursor:pointer;}.k-column-sort{.k-icon{display:block;height:", _sortInstanceProperty(table).iconHeight, ";line-height:", _sortInstanceProperty(table).iconHeight, ";margin-left:", _sortInstanceProperty(table).gap, ";color:", _sortInstanceProperty(table).color, ";}&.k-asc .k-icon.k-desc,&.k-desc .k-icon.k-asc{color:", _sortInstanceProperty(table).disabledColor, ";}}.k-table-spin.k-overlay{z-index:2;}.k-table-empty{text-align:center;}tr.k-expand{td{padding:0;background:#fdfcff;}}&.k-with-expand{tr:not(.k-expand){td{border-bottom:none;}}}.k-table-expand{border-top:", table.border, ";}tbody tr.k-selected td{background:", table.selectedBgColor, ";}.k-table-arrow{margin-right:", table.arrow.gap, ";transition:transform ", theme.transition, ";position:relative;top:-1px;}tr.k-spreaded{.k-table-arrow{transform:rotate(90deg);}}.k-table-resize{height:100%;width:", table.resizeWidth, ";position:absolute;top:0;left:-1px;cursor:ew-resize;}tr.k-dragging{opacity:", table.draggingOpacity, ";}.k-table-scrollbar{overflow-x:auto;overflow-y:hidden;}.k-table-scrollbar-inner{height:1px;}");
+}
+export function makeGroupMenuStyles() {
+  return /*#__PURE__*/css("max-height:", table.group.menuMaxHeight, ";overflow:auto;.k-dropdown-item.k-active{color:", table.group.activeColor, ";}");
+}
+
+export {normalize} from 'intact-vue-next';

package/components/table/table.d.ts

@@ -0,0 +1,97 @@
+import { Component, TypeDefs } from 'intact-vue-next';
+import { TableMerge } from './useMerge';
+import { TooltipProps } from '../tooltip/tooltip';
+import type { Events } from '../types';
+export interface TableProps<T = any, K extends TableRowKey = TableRowKey, C extends CheckType = CheckType, S extends string = string, G extends TableGroupValue = TableGroupValue> {
+    data?: T[];
+    fixHeader?: boolean | string | number;
+    stickHeader?: boolean | string | number;
+    stickScrollbar?: boolean | string | number;
+    checkType?: C;
+    checkedKeys?: K[];
+    rowKey?: (value: T, index: number) => K;
+    rowCheckable?: boolean;
+    disableRow?: (value: T, index: number, key: K) => boolean;
+    type?: 'default' | 'border' | 'grid';
+    stripe?: boolean;
+    rowClassName?: (value: T, index: number, key: K) => string | undefined;
+    group?: G;
+    sort?: TableSortValue<S>;
+    loading?: boolean;
+    merge?: TableMerge<T, C>;
+    expandedKeys?: K[];
+    rowExpandable?: boolean;
+    selectedKeys?: K[];
+    rowSelectable?: boolean | 'single' | 'multiple';
+    childrenKey?: string;
+    indent?: number;
+    spreadKeys?: K[];
+    tooltipPosition?: TooltipProps['position'];
+    tooltipContainer?: TooltipProps['container'];
+    keepStatus?: boolean;
+    showIndeterminate?: boolean;
+    resizable?: boolean;
+    minColWidth?: number;
+    widthStoreKey?: string;
+}
+export interface TableEvents<T = any, K extends TableRowKey = number> {
+    clickRow: [T, number, K];
+    dragstart: [{
+        key: K;
+        from: number;
+    }];
+    dragend: [{
+        key: K;
+        from: number;
+        to: number;
+    }];
+}
+export interface TableBlocks<T = unknown> {
+    empty: null;
+    tooltip: [T, number];
+    expand: [T, number];
+}
+declare type CheckType = 'checkbox' | 'radio' | 'none';
+export declare type TableCheckType = CheckType;
+export declare type TableRowKey = string | number;
+export declare type TableSortValue<T = string> = {
+    key?: T;
+    type?: 'desc' | 'asc';
+};
+export declare type TableGroupValue<T extends string | number | symbol = string | number | symbol> = Record<T, any | any[]>;
+export declare class Table<T = any, RowKey extends TableRowKey = TableRowKey, Checkbox extends CheckType = 'checkbox', Sort extends string = string, Group extends TableGroupValue = TableGroupValue> extends Component<TableProps<T, RowKey, Checkbox, Sort, Group>, TableEvents<T, RowKey>, TableBlocks<T>> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<TableProps<unknown, TableRowKey, CheckType, string, TableGroupValue<string | number | symbol>>>>;
+    static defaults: () => Partial<TableProps<any, TableRowKey, CheckType, string, TableGroupValue<string | number | symbol>>>;
+    static events: Events<TableEvents<any, number>>;
+    private tree;
+    private columns;
+    private scroll;
+    private stickyHeader;
+    private width;
+    private resizable;
+    private fixedColumns;
+    private disableRow;
+    private merge;
+    private checked;
+    private sortable;
+    private expandable;
+    private selected;
+    private resetRowStatus;
+    private draggable;
+    private stickyScrollbar;
+    checkAll(): void;
+    uncheckAll(): void;
+    getCheckedData(): any[];
+    getSelectedData(): any[];
+    scrollToRowByIndex(index: number): Promise<void>;
+    scrollToRowByKey(key: TableRowKey): Promise<void>;
+    exportTable(data?: any[] | undefined, filename?: string): Promise<string>;
+    private getData;
+    private clickRow;
+    private onChangeGroup;
+}
+export {};
+
+
+export {normalize} from 'intact-vue-next';