@vunk/plus 0.1.0 → 1.1.0

package/components/tables-v1/index.mjs

@@ -0,0 +1,431 @@
+import { VkTableColumns, _VkTableColumnsElCtx as _VkTableColumnsElCtx$1 } from '@vunk/plus/components/table-columns';
+import { useElBreakpoints } from '@vunk/plus/composables/el-breakpoints';
+import { VkDuplexCalc } from '@vunk/core';
+import { useSizeProp, paginationProps, paginationEmits, ElPagination, ElTable } from 'element-plus';
+import { defineComponent, computed, resolveComponent, openBlock, createBlock, withCtx, createVNode, mergeProps, toHandlers, createElementBlock, createCommentVNode } from 'vue';
+import { bindPropsFactory, onEmitsFactory } from '@vunk/core/shared/utils-vue';
+import { pickObject } from '@vunk/core/shared/utils-object';
+import { _VkTableColumnsElCtx } from '@vunk/skzz/components/table-columns';
+import { _ as _export_sfc } from '../_plugin-vue_export-helper.mjs';
+
+const tableProps$1 = {
+  /**
+  * @description table data
+  */
+  data: {
+    type: Array,
+    default: () => []
+  },
+  /**
+   * @description size of Table
+   */
+  size: useSizeProp,
+  width: [String, Number],
+  /**
+   * @description table's height. By default it has an `auto` height. If its value is a number, the height is measured in pixels; if its value is a string, the value will be assigned to element's style.height, the height is affected by external styles
+   */
+  height: [String, Number],
+  /**
+   * @description table's max-height. The legal value is a number or the height in px
+   */
+  maxHeight: [String, Number],
+  /**
+   * @description whether width of column automatically fits its container
+   */
+  fit: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * @description whether Table is striped
+   */
+  stripe: Boolean,
+  /**
+   * @description whether Table has vertical border
+   */
+  border: Boolean,
+  /**
+   * @description key of row data, used for optimizing rendering. Required if `reserve-selection` is on or display tree data. When its type is String, multi-level access is supported, e.g. `user.info.id`, but `user.info[0].id` is not supported, in which case `Function` should be used
+   */
+  rowKey: [String, Function],
+  /**
+   * @description whether Table header is visible
+   */
+  showHeader: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * @description whether to display a summary row
+   */
+  showSummary: Boolean,
+  /**
+   * @description displayed text for the first column of summary row
+   */
+  sumText: String,
+  /**
+   * @description custom summary method
+   */
+  summaryMethod: Function,
+  /**
+   * @description function that returns custom class names for a row, or a string assigning class names for every row
+   */
+  rowClassName: [String, Function],
+  /**
+   * @description function that returns custom style for a row, or an object assigning custom style for every row
+   */
+  rowStyle: [Object, Function],
+  /**
+   * @description function that returns custom class names for a cell, or a string assigning class names for every cell
+   */
+  cellClassName: [String, Function],
+  /**
+   * @description function that returns custom style for a cell, or an object assigning custom style for every cell
+   */
+  cellStyle: [Object, Function],
+  /**
+   * @description function that returns custom class names for a row in table header, or a string assigning class names for every row in table header
+   */
+  headerRowClassName: [String, Function],
+  /**
+   * @description function that returns custom style for a row in table header, or an object assigning custom style for every row in table header
+   */
+  headerRowStyle: [Object, Function],
+  /**
+   * @description function that returns custom class names for a cell in table header, or a string assigning class names for every cell in table header
+   */
+  headerCellClassName: [String, Function],
+  /**
+   * @description function that returns custom style for a cell in table header, or an object assigning custom style for every cell in table header
+   */
+  headerCellStyle: [Object, Function],
+  /**
+   * @description whether current row is highlighted
+   */
+  highlightCurrentRow: Boolean,
+  /**
+   * @description key of current row, a set only prop
+   */
+  currentRowKey: [String, Number],
+  /**
+   * @description displayed text when data is empty. You can customize this area with `#empty`
+   */
+  emptyText: String,
+  /**
+   * @description set expanded rows by this prop, prop's value is the keys of expand rows, you should set row-key before using this prop
+   */
+  expandRowKeys: Array,
+  /**
+   * @description whether expand all rows by default, works when the table has a column type="expand" or contains tree structure data
+   */
+  defaultExpandAll: Boolean,
+  /**
+   * @description set the default sort column and order. property `prop` is used to set default sort column, property `order` is used to set default sort order
+   */
+  defaultSort: Object,
+  /**
+   * @description the `effect` of the overflow tooltip
+   */
+  tooltipEffect: String,
+  /**
+   * @description the options for the overflow tooltip, [see the following tooltip component](tooltip.html#attributes)
+   */
+  tooltipOptions: Object,
+  /**
+   * @description method that returns rowspan and colspan
+   */
+  spanMethod: Function,
+  /**
+   * @description controls the behavior of master checkbox in multi-select tables when only some rows are selected (but not all). If true, all rows will be selected, else deselected
+   */
+  selectOnIndeterminate: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * @description horizontal indentation of tree data
+   */
+  indent: {
+    type: Number,
+    default: 16
+  },
+  /**
+   * @description configuration for rendering nested data
+   */
+  treeProps: {
+    type: Object,
+    default: () => {
+      return {
+        hasChildren: "hasChildren",
+        children: "children",
+        checkStrictly: false
+      };
+    }
+  },
+  /**
+   * @description whether to lazy loading data
+   */
+  lazy: Boolean,
+  /**
+   * @description method for loading child row data, only works when `lazy` is true
+   */
+  load: Function,
+  style: {
+    type: Object,
+    default: () => ({})
+  },
+  className: {
+    type: String,
+    default: ""
+  },
+  /**
+   * @description sets the algorithm used to lay out table cells, rows, and columns
+   */
+  tableLayout: {
+    type: String,
+    default: "fixed"
+  },
+  /**
+   * @description always show scrollbar
+   */
+  scrollbarAlwaysOn: Boolean,
+  /**
+   * @description ensure main axis minimum-size doesn't follow the content
+   */
+  flexible: Boolean,
+  /**
+   * @description whether to hide extra content and show them in a tooltip when hovering on the cell.It will affect all the table columns
+   */
+  showOverflowTooltip: [Boolean, Object],
+  appendFilterPanelTo: String,
+  scrollbarTabindex: {
+    type: [Number, String],
+    default: void 0
+  }
+};
+bindPropsFactory(tableProps$1);
+const tableEmits = {
+  "select": null,
+  "select-all": null,
+  "selection-change": null,
+  "cell-mouse-enter": null,
+  "cell-mouse-leave": null,
+  "cell-contextmenu": null,
+  "cell-click": null,
+  "cell-dblclick": null,
+  "row-click": null,
+  "row-contextmenu": null,
+  "row-dblclick": null,
+  "header-click": null,
+  "header-contextmenu": null,
+  "sort-change": null,
+  "filter-change": null,
+  "current-change": null,
+  "header-dragend": null,
+  "expand-change": null,
+  "scroll": null
+};
+const createElTableOnEmits = onEmitsFactory(tableEmits);
+
+const createPaginationBindProps = bindPropsFactory(paginationProps);
+const createPaginationOnEmits = onEmitsFactory(paginationEmits);
+const tableProps = pickObject(tableProps$1, {
+  excludes: ["style", "className"]
+});
+const createTableBindProps = bindPropsFactory(tableProps);
+const props = {
+  ..._VkTableColumnsElCtx.tableColumnProps,
+  ...paginationProps,
+  ...tableProps,
+  border: {
+    type: Boolean,
+    default: true
+  },
+  tableClass: {
+    type: String,
+    default: ""
+  },
+  tableStyle: {
+    type: Object,
+    default: void 0
+  },
+  layout: {
+    type: String,
+    default: void 0
+  },
+  pageSize: {
+    type: Number,
+    default: 10
+  },
+  currentPage: {
+    type: Number,
+    default: 1
+  },
+  /**
+   * @description 表示偏移量 v-model:start 和 v-model:currentPage 二选一 
+   */
+  start: {
+    type: Number,
+    default: void 0
+  },
+  /**
+   * @description 表格列
+   * @link ./table-columns
+   */
+  columns: {
+    type: Array,
+    default: () => []
+  },
+  /**
+   * @description 组件模块。
+   * 如无需分页，可传入 `:modules="[]"`
+   */
+  modules: {
+    type: Array,
+    default: () => ["pagination"]
+  },
+  align: {
+    type: String,
+    default: "center"
+  },
+  headerAlign: {
+    type: String,
+    default: "center"
+  },
+  elRef: {
+    type: Function,
+    default: void 0
+  }
+};
+const createBindProps = bindPropsFactory(props);
+const emits = {
+  ...paginationEmits,
+  ...tableEmits,
+  "update:start": (val) => typeof val === "number"
+};
+const createOnEmits = onEmitsFactory(emits);
+
+var ctx = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  createBindProps: createBindProps,
+  createOnEmits: createOnEmits,
+  createPaginationBindProps: createPaginationBindProps,
+  createPaginationOnEmits: createPaginationOnEmits,
+  createTableBindProps: createTableBindProps,
+  emits: emits,
+  props: props
+});
+
+var _sfc_main = defineComponent({
+  name: "VkTablesV1",
+  components: {
+    VkTableColumns,
+    VkDuplexCalc,
+    ElPagination,
+    ElTable
+  },
+  props,
+  emits,
+  setup(props2, { emit }) {
+    const paginationBindProps = createPaginationBindProps(props2, ["layout", "currentPage"]);
+    const paginationOnEmits = createPaginationOnEmits(emit, [
+      "update:current-page"
+    ]);
+    const columnsProps = _VkTableColumnsElCtx$1.createTableColumnBindProps(props2);
+    const tableProps = createTableBindProps(props2);
+    const tableOnEmits = createElTableOnEmits(emit);
+    const { isMobile } = useElBreakpoints();
+    const hasPagination = computed(() => props2.modules.includes("pagination"));
+    const theCurrentPage = computed({
+      get: () => {
+        if (props2.start !== void 0) {
+          return Math.floor(props2.start / props2.pageSize) + 1;
+        }
+        return props2.currentPage;
+      },
+      set: (val) => {
+        emit("update:current-page", val);
+        updateStart({ currentPage: val });
+      }
+    });
+    function updateStart(e) {
+      const currentPage = e.currentPage ?? theCurrentPage.value;
+      const pageSize = e.pageSize ?? props2.pageSize;
+      emit("update:start", (currentPage - 1) * pageSize);
+    }
+    const layout = computed(() => {
+      if (props2.layout) {
+        return props2.layout;
+      }
+      if (isMobile.value) {
+        return "total, prev, pager, next";
+      }
+      return "total, sizes, prev, pager, next, jumper";
+    });
+    return {
+      paginationBindProps,
+      paginationOnEmits,
+      theCurrentPage,
+      updateStart,
+      columnsProps,
+      tableProps,
+      tableOnEmits,
+      layout,
+      hasPagination
+    };
+  }
+});
+
+const _hoisted_1 = {
+  key: 0,
+  class: "vk-tables-v1-pagination-x"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_VkTableColumns = resolveComponent("VkTableColumns");
+  const _component_ElTable = resolveComponent("ElTable");
+  const _component_ElPagination = resolveComponent("ElPagination");
+  const _component_VkDuplexCalc = resolveComponent("VkDuplexCalc");
+  return openBlock(), createBlock(_component_VkDuplexCalc, {
+    class: "vk-tables-v1",
+    "with-resize": "one",
+    gap: "var(--vk-tables-v1-gap, 14px)"
+  }, {
+    one: withCtx(() => [
+      createVNode(_component_ElTable, mergeProps(_ctx.tableProps, {
+        ref: _ctx.elRef,
+        style: _ctx.tableStyle,
+        "class-name": `vk-tables-v1-table ${_ctx.tableClass}`
+      }, toHandlers(_ctx.tableOnEmits)), {
+        default: withCtx(() => [
+          createVNode(_component_VkTableColumns, mergeProps(_ctx.columnsProps, { source: _ctx.columns }), null, 16, ["source"])
+        ]),
+        _: 1
+        /* STABLE */
+      }, 16, ["style", "class-name"])
+    ]),
+    default: withCtx(() => [
+      _ctx.hasPagination ? (openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(_component_ElPagination, mergeProps(_ctx.paginationBindProps, {
+          "current-page": _ctx.theCurrentPage,
+          "onUpdate:currentPage": _cache[0] || (_cache[0] = ($event) => _ctx.theCurrentPage = $event),
+          layout: _ctx.layout
+        }, toHandlers(_ctx.paginationOnEmits), {
+          "onUpdate:pageSize": _cache[1] || (_cache[1] = ($event) => _ctx.updateStart({ pageSize: $event }))
+        }), null, 16, ["current-page", "layout"])
+      ])) : createCommentVNode("v-if", true)
+    ]),
+    _: 1
+    /* STABLE */
+  });
+}
+var VkTablesV1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/vunk-plus/vunk-plus/packages/components/tables-v1/src/index.vue"]]);
+
+var types = /*#__PURE__*/Object.freeze({
+  __proto__: null
+});
+
+VkTablesV1.install = (app) => {
+  app.component(VkTablesV1.name || "VkTablesV1", VkTablesV1);
+};
+
+export { VkTablesV1, ctx as _VkTabelsV1Ctx, types as __VkTablesV1, VkTablesV1 as default };