tanxin-ui 0.2.0

package/es/table/src/table-body.d.ts

@@ -0,0 +1,129 @@
+import type { PropType } from 'vue';
+import type { StrOrNumber, Width } from '../../utils/type';
+import type { Column } from './context';
+declare const _default: import("vue").DefineComponent<{
+    size: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    columns: {
+        type: PropType<Column[]>;
+        default: () => any[];
+    };
+    width: PropType<Width>;
+    maxHeight: PropType<Width>;
+    rowHeight: {
+        type: PropType<Width>;
+        default: number;
+    };
+    virtualList: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    clickSelect: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    dblclickSelect: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    multipleSelect: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    rowKey: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    disableRowKeys: {
+        type: PropType<StrOrNumber[]>;
+        default: () => any[];
+    };
+    startIndex: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    endIndex: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    tableSlots: ObjectConstructor;
+}, {
+    render: () => JSX.Element;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:data"[], "update:data", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    size: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    columns: {
+        type: PropType<Column[]>;
+        default: () => any[];
+    };
+    width: PropType<Width>;
+    maxHeight: PropType<Width>;
+    rowHeight: {
+        type: PropType<Width>;
+        default: number;
+    };
+    virtualList: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    clickSelect: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    dblclickSelect: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    multipleSelect: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    rowKey: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    disableRowKeys: {
+        type: PropType<StrOrNumber[]>;
+        default: () => any[];
+    };
+    startIndex: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    endIndex: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    tableSlots: ObjectConstructor;
+}>> & {
+    "onUpdate:data"?: (...args: any[]) => any;
+}, {
+    size: string;
+    columns: Column[];
+    rowHeight: Width;
+    virtualList: boolean;
+    multipleSelect: boolean;
+    rowKey: string;
+    clickSelect: boolean;
+    dblclickSelect: boolean;
+    disableRowKeys: StrOrNumber[];
+    startIndex: number;
+    endIndex: number;
+}>;
+export default _default;

package/es/table/src/table-body.js

@@ -0,0 +1,206 @@
+import { defineComponent, ref, createVNode, Fragment, createTextVNode, mergeProps, resolveComponent } from "vue";
+import { PropTypes } from "../../utils/type.js";
+import { injectTable } from "./context.js";
+import { useConfig } from "../../utils/hooks/useConfig.js";
+import { getAlign, getDirection } from "./table-header.js";
+import { TRadio } from "../../radio/index.js";
+import { TCheckbox } from "../../checkbox/index.js";
+import dayjs from "dayjs";
+const tableBodyProps = {
+  size: PropTypes.oneOf(["xs", "sm", "md", "lg", "xl"]).def("md"),
+  columns: {
+    type: Array,
+    default: () => []
+  },
+  width: [String, Number],
+  maxHeight: [String, Number],
+  rowHeight: {
+    type: [String, Number],
+    default: 45
+  },
+  virtualList: PropTypes.bool.def(false),
+  clickSelect: PropTypes.bool.def(false),
+  dblclickSelect: PropTypes.bool.def(false),
+  multipleSelect: PropTypes.bool.def(false),
+  rowKey: PropTypes.string.def("__key"),
+  disableRowKeys: {
+    type: Array,
+    default: () => []
+  },
+  startIndex: PropTypes.number.def(0),
+  endIndex: PropTypes.number.def(0),
+  tableSlots: Object
+};
+var TTableBody = defineComponent({
+  name: "TTableBody",
+  components: {
+    TRadio,
+    TCheckbox
+  },
+  inheritAttrs: false,
+  props: tableBodyProps,
+  emits: ["update:data"],
+  setup(props) {
+    const {
+      prefixCls
+    } = useConfig("table", props);
+    const tableContext = injectTable();
+    const focusedRowKey = ref("");
+    const handleRowSelectChange = (checked, rowData) => {
+      tableContext.setRowSelected(checked, rowData);
+    };
+    const getColumnValue = (rowData, column) => {
+      var _a;
+      if (column.field.indexOf(".") < 0)
+        return getFormatData((_a = rowData[column.field]) != null ? _a : "", column);
+      let label = rowData;
+      const fieldArr = column.field.split(".");
+      for (let i = 0; i < fieldArr.length; i++) {
+        const item = fieldArr[i];
+        if (!label.hasOwnProperty(item))
+          return "";
+        label = label[item];
+      }
+      return getFormatData(label, column);
+    };
+    const getFormatData = (value, column) => {
+      if (column.timeFormat) {
+        if (value)
+          return dayjs(value.toString()).format(column.timeFormat);
+        else
+          return "";
+      }
+      return value;
+    };
+    const getColumnData = (column, rowData) => {
+      var _a;
+      const value = getColumnValue(rowData, column);
+      if (!column.hasOwnProperty("dictionary"))
+        return value;
+      if (column.dictionary == null)
+        return value;
+      const item = column.dictionary.find((x) => x[column.valueKey] == value);
+      return (_a = item == null ? void 0 : item[column.labelKey]) != null ? _a : "";
+    };
+    const getTdData = (column, rowData, rowIndex) => {
+      var _a;
+      switch (column.type) {
+        case "select":
+          const checked = tableContext.selectedRowKeys.value.includes(rowData[props.rowKey]);
+          if (props.multipleSelect) {
+            return createVNode(resolveComponent("t-checkbox"), {
+              "size": "lg",
+              "key": rowData[props.rowKey],
+              "value": checked,
+              "disabled": props.disableRowKeys.includes(rowData[props.rowKey]),
+              "bool": true,
+              "onChange": (checked2) => handleRowSelectChange(checked2, rowData)
+            }, null);
+          } else
+            return createVNode(resolveComponent("t-radio"), {
+              "value": tableContext.selectedRowKeys.value[0],
+              "key": rowData[props.rowKey],
+              "size": "lg",
+              "label": rowData[props.rowKey],
+              "item-value": rowData[props.rowKey],
+              "disabled": props.disableRowKeys.includes(rowData[props.rowKey]),
+              "onChange": (checked2) => handleRowSelectChange(checked2, rowData)
+            }, null);
+        case "index":
+          if (props.virtualList)
+            rowIndex += props.startIndex;
+          if (column["render"])
+            return column["render"](rowData, rowIndex, column);
+          else
+            return rowIndex + 1;
+        default:
+          if (column["render"])
+            return column["render"](rowData, rowIndex, column);
+          else if ((_a = props.tableSlots) == null ? void 0 : _a.hasOwnProperty(column["field"])) {
+            return props.tableSlots[column["field"]]({
+              data: rowData,
+              index: rowIndex,
+              column
+            });
+          }
+          return getColumnData(column, rowData);
+      }
+    };
+    const getTdElements = (rowIndex) => {
+      const result = props.columns.map((column) => {
+        var _a, _b;
+        const align = getAlign(column);
+        const direction = getDirection(column);
+        const style = {};
+        if ((_a = column.color) != null ? _a : "")
+          style.color = column.color;
+        if ((_b = column.bold) != null ? _b : false)
+          style.fontWeight = "bold";
+        const tdProps = {
+          class: [`${prefixCls.value}-td`, {
+            [`align-${align}`]: true,
+            [`dir-${direction}`]: direction != "row"
+          }],
+          style
+        };
+        return createVNode("td", null, [createVNode("div", tdProps, [getTdData(column, tableContext.displayDataList.value[rowIndex], rowIndex)])]);
+      });
+      return result;
+    };
+    const getEmdptyElement = () => {
+      const columnCount = props.columns.length;
+      const tdProps = {
+        class: [`${prefixCls.value}-td`, `align-center`]
+      };
+      return createVNode("tr", {
+        "class": "is-empty"
+      }, [createVNode("td", {
+        "colspan": columnCount
+      }, [createVNode("div", tdProps, [createTextVNode("\u6682\u65E0\u6570\u636E")])])]);
+    };
+    const selectRow = (rowData) => {
+      if (props.multipleSelect) {
+        tableContext.setRowSelected(!tableContext.selectedRowKeys.value.includes(rowData[props.rowKey]), rowData);
+      } else {
+        tableContext.setRowSelected(true, rowData);
+      }
+    };
+    const getTrProps = (rowData) => {
+      const theProps = {};
+      theProps["onClick"] = (event) => {
+        event.stopPropagation();
+        focusedRowKey.value = rowData[props.rowKey];
+        if (props.clickSelect)
+          selectRow(rowData);
+      };
+      if (props.dblclickSelect) {
+        theProps["onDblclick"] = (event) => {
+          event.stopPropagation();
+          selectRow(rowData);
+        };
+      }
+      return theProps;
+    };
+    const getTrClasses = (data) => {
+      return [{
+        [`is-focus`]: focusedRowKey.value == data[props.rowKey],
+        [`is-selected`]: tableContext.selectedRowKeys.value.includes(data[props.rowKey])
+      }];
+    };
+    const render = () => {
+      const isEmpty = tableContext.displayDataList.value.length <= 0;
+      return createVNode(Fragment, null, [createVNode("tbody", null, [isEmpty ? getEmdptyElement() : tableContext.displayDataList.value.map((data, rowIndex) => {
+        return createVNode("tr", mergeProps(getTrProps(data), {
+          "class": getTrClasses(data)
+        }), [getTdElements(rowIndex)]);
+      })])]);
+    };
+    return {
+      render
+    };
+  },
+  render() {
+    return this.render();
+  }
+});
+export { TTableBody as default };

package/es/table/src/table-header.d.ts

@@ -0,0 +1,111 @@
+import type { PropType } from 'vue';
+import type { Width } from '../../utils/type';
+import type { Column } from './context';
+export declare const getWidth: (column: Column) => string;
+export declare const getAlign: (column: Column) => import("./context").CellAlign;
+export declare const getDirection: (column: Column) => "desc" | "row" | "asc";
+declare const _default: import("vue").DefineComponent<{
+    size: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    columns: {
+        type: PropType<Column[]>;
+        default: () => any[];
+    };
+    width: PropType<Width>;
+    maxHeight: PropType<Width>;
+    rowHeight: {
+        type: PropType<Width>;
+        default: number;
+    };
+    fixed: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    headerFixed: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    virtualList: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    multipleSelect: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    rowKey: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    showHeader: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+}, {
+    render: () => JSX.Element;
+    colgroupElements: import("vue").ComputedRef<JSX.Element>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:data"[], "update:data", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    size: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    columns: {
+        type: PropType<Column[]>;
+        default: () => any[];
+    };
+    width: PropType<Width>;
+    maxHeight: PropType<Width>;
+    rowHeight: {
+        type: PropType<Width>;
+        default: number;
+    };
+    fixed: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    headerFixed: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    virtualList: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    multipleSelect: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    rowKey: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    showHeader: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:data"?: (...args: any[]) => any;
+}, {
+    fixed: boolean;
+    size: string;
+    columns: Column[];
+    showHeader: boolean;
+    rowHeight: Width;
+    headerFixed: boolean;
+    virtualList: boolean;
+    multipleSelect: boolean;
+    rowKey: string;
+}>;
+export default _default;

package/es/table/src/table-header.js

@@ -0,0 +1,219 @@
+import { defineComponent, ref, computed, createVNode, mergeProps, createTextVNode, resolveComponent, watch, Fragment } from "vue";
+import { PropTypes, isFunction } from "../../utils/type.js";
+import { injectTable } from "./context.js";
+import { useConfig } from "../../utils/hooks/useConfig.js";
+import { getLength } from "../../utils/common.js";
+import { TCheckbox } from "../../checkbox/index.js";
+import { nanoid } from "nanoid";
+import "../../utils/components/icons/Checkmark.js";
+import "../../utils/components/icons/CheckmarkCircle.js";
+import "../../utils/components/icons/CheckmarkSharp.js";
+import "../../utils/components/icons/CheckmarkCircleOutline.js";
+import "../../utils/components/icons/AlertCircle.js";
+import "../../utils/components/icons/AlertCircleOutline.js";
+import "../../utils/components/icons/InformationCircle.js";
+import "../../utils/components/icons/InformationCircleOutline.js";
+import "../../utils/components/icons/CloseCircle.js";
+import "../../utils/components/icons/CloseCircleOutline.js";
+import "../../utils/components/icons/HelpCircleSharp.js";
+import "../../utils/components/icons/EyeOffOutline.js";
+import "../../utils/components/icons/EyeOutline.js";
+import "../../utils/components/icons/LoadingOutlined.js";
+import "../../utils/components/icons/Close.js";
+import "../../utils/components/icons/CloseOutline.js";
+import "../../utils/components/icons/ArrowsMaximize.js";
+import "../../utils/components/icons/ArrowsMinimize.js";
+import "../../utils/components/icons/AddOutline.js";
+import "../../utils/components/icons/RemoveOutline.js";
+import "../../utils/components/icons/ChevronUp.js";
+import "../../utils/components/icons/ChevronDown.js";
+import "../../utils/components/icons/ChevronForward.js";
+import "../../utils/components/icons/ChevronLeft24Filled.js";
+import "../../utils/components/icons/ChevronRight24Filled.js";
+import "../../utils/components/icons/ChevronDoubleLeft16Filled.js";
+import "../../utils/components/icons/ChevronDoubleRight16Filled.js";
+import "../../utils/components/icons/CheckmarkOutline.js";
+import "../../utils/components/icons/IosCheckmark.js";
+import "../../utils/components/icons/Empty.js";
+import "../../utils/components/icons/Bars.js";
+import "../../utils/components/icons/ArrowUpCircle.js";
+import "../../utils/components/icons/ArrowUp.js";
+import "../../utils/components/icons/ArrowForward.js";
+import "../../utils/components/icons/TimeOutline.js";
+import "../../utils/components/icons/CalendarClearOutline.js";
+import "../../utils/components/icons/KeyboardArrowLeftRound.js";
+import "../../utils/components/icons/KeyboardArrowRightRound.js";
+import "../../utils/components/icons/KeyboardDoubleArrowLeftRound.js";
+import "../../utils/components/icons/KeyboardDoubleArrowRightRound.js";
+import "../../utils/components/icons/MenuFoldOutlined.js";
+import "../../utils/components/icons/IosArrowDown.js";
+import "../../utils/components/icons/IosArrowBack.js";
+import "../../utils/components/icons/IosArrowForward.js";
+import "../../utils/components/icons/ImageSharp.js";
+import "../../utils/components/icons/Pause.js";
+import "../../utils/components/icons/Refresh.js";
+import "../../utils/components/icons/QuestionCircle24Regular.js";
+import "../../utils/components/icons/CloudUploadOutline.js";
+import "../../utils/components/icons/UploadFileFilled.js";
+import "../../utils/components/icons/EllipsisHorizontal.js";
+import "../../utils/components/icons/ArrowNext24Filled.js";
+import "../../utils/components/icons/ArrowPrevious24Filled.js";
+import ArrowDropDownSharp from "../../utils/components/icons/ArrowDropDownSharp.js";
+import ArrowDropUpSharp from "../../utils/components/icons/ArrowDropUpSharp.js";
+import "../../utils/components/icons/ArrowForwardIosFilled.js";
+const tableHeaderProps = {
+  size: PropTypes.oneOf(["xs", "sm", "md", "lg", "xl"]).def("md"),
+  columns: {
+    type: Array,
+    default: () => []
+  },
+  width: [String, Number],
+  maxHeight: [String, Number],
+  rowHeight: {
+    type: [String, Number],
+    default: 45
+  },
+  fixed: PropTypes.bool.def(false),
+  headerFixed: PropTypes.bool.def(false),
+  virtualList: PropTypes.bool.def(false),
+  multipleSelect: PropTypes.bool.def(false),
+  rowKey: PropTypes.string.def("__key"),
+  showHeader: PropTypes.bool.def(true)
+};
+const getWidth = (column) => {
+  return column["width"] ? getLength(column["width"]) : "";
+};
+const getAlign = (column) => {
+  return column["align"] || "left";
+};
+const getDirection = (column) => {
+  return column["direction"] || "row";
+};
+var TTableHeader = defineComponent({
+  name: "TTableHeader",
+  components: {
+    TCheckbox
+  },
+  inheritAttrs: false,
+  props: tableHeaderProps,
+  emits: ["update:data"],
+  setup(props) {
+    const {
+      prefixCls
+    } = useConfig("table", props);
+    const tableContext = injectTable();
+    const columns = ref(props.columns);
+    const sortColumns = ref([]);
+    const colgroupElements = computed(() => {
+      return createVNode("colgroup", null, [columns.value.map((column) => {
+        const width = getWidth(column);
+        const style = {};
+        if (width)
+          style["width"] = width;
+        return createVNode("col", {
+          "style": style
+        }, null);
+      })]);
+    });
+    const handleSelectAll = (value) => {
+      tableContext.setAllSelected(value);
+    };
+    const getThContent = (column) => {
+      switch (column["type"]) {
+        case "select":
+          return props.multipleSelect ? createVNode(resolveComponent("t-checkbox"), {
+            "value": tableContext.allSelected.value,
+            "indeterminate": tableContext.indeterminate.value,
+            "bool": true,
+            "key": nanoid(10),
+            "size": "lg",
+            "onChange": handleSelectAll
+          }, null) : null;
+        case "index":
+          return column.title || "\u5E8F\u53F7";
+        default:
+          return column.title;
+      }
+    };
+    const handleSortClick = (column) => {
+      if (!sortColumns.value.includes(column.field)) {
+        column.direction = "";
+      }
+      if (column.direction == "asc") {
+        column.direction = "desc";
+      } else if (column.direction == "desc") {
+        column.direction = "";
+      } else {
+        column.direction = "asc";
+      }
+      sortColumns.value = [column.field];
+      let sorter = column.sorter;
+      if (sorter !== "remote") {
+        if (column.direction == "")
+          return;
+        if (!isFunction(sorter)) {
+          sorter = (a, b) => {
+            if (column.type == "number")
+              return a[column.field] - b[column.field];
+            return a[column.field].localeCompare(b[column.field], "zh");
+          };
+        }
+        tableContext.dataSort(sorter, column.direction);
+      } else {
+        tableContext.remoteSort(column);
+      }
+    };
+    const headerThElements = computed(() => {
+      return props.columns.map((column) => {
+        const align = getAlign(column);
+        const direction = getDirection(column);
+        const thProps = {
+          class: [`${prefixCls.value}-td`, {
+            [`align-${align}`]: true,
+            [`dir-${direction}`]: direction != "row"
+          }]
+        };
+        const titleProps = {};
+        if (column.hasOwnProperty("sorter") && column.sorter !== false) {
+          titleProps["onClick"] = () => handleSortClick(column);
+        }
+        return createVNode("th", null, [createVNode("div", thProps, [createVNode("div", mergeProps({
+          "class": [`${prefixCls.value}-title`, {
+            [`with-sort`]: column.hasOwnProperty("sorter") && column.sorter !== false
+          }]
+        }, titleProps), [getThContent(column), createTextVNode(" "), getThSort(column)])])]);
+      });
+    });
+    const getThSort = (column) => {
+      return column.hasOwnProperty("sorter") && column.sorter !== false ? createVNode("span", {
+        "class": `${prefixCls.value}-sort`
+      }, [createVNode(resolveComponent("t-icon"), {
+        "class": [{
+          [`active`]: sortColumns.value.includes(column.field) && column.direction == "asc"
+        }]
+      }, {
+        default: () => [createVNode(ArrowDropUpSharp, null, null)]
+      }), createVNode(resolveComponent("t-icon"), {
+        "class": [{
+          [`active`]: sortColumns.value.includes(column.field) && column.direction == "desc"
+        }]
+      }, {
+        default: () => [createVNode(ArrowDropDownSharp, null, null)]
+      })]) : null;
+    };
+    watch(() => tableContext.allSelected.value, () => {
+      console.log("watch", "tableContext.allSelected.value", tableContext.allSelected.value);
+    });
+    const render = () => {
+      return createVNode(Fragment, null, [colgroupElements.value, props.showHeader ? createVNode("thead", null, [createVNode("tr", null, [headerThElements.value])]) : null]);
+    };
+    return {
+      render,
+      colgroupElements
+    };
+  },
+  render() {
+    return this.render();
+  }
+});
+export { TTableHeader as default, getAlign, getDirection, getWidth };