@seemusic/ui-components/lib/components/SopBasicTable/SopBasicTable.mjs

A Vue 3 UI Library. Uses Composable.

import { defineComponent, ref, createVNode, mergeProps, isVNode, Fragment } from "vue";
import { ElTable, ElTableColumn } from "element-plus";
import { Icon } from "@iconify/vue";
import _sfc_main from "./EditTableCell.vue.mjs";
import SopPagination from "../SopPagination/SopPagination.mjs";
import "../SopPagination/styles/SopPagination.scss";
import { extend } from "../../utils/index.mjs";
function _isSlot(s) {
  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
}
const SopBasicTable = /* @__PURE__ */ defineComponent({
  name: "SopBasicTable",
  components: {
    ElTable,
    ElTableColumn,
    EditTableCell: _sfc_main
  },
  props: {
    columns: {
      type: Object,
      required: true
    },
    data: {
      type: Array,
      required: true
    },
    config: {
      type: Object,
      default: () => {
        return {
          isPagination: true
        };
      }
    }
  },
  emits: ["edit-column-change", "current-change", "size-change"],
  setup(props, {
    attrs,
    slots,
    emit,
    expose
  }) {
    const tableRef = ref(null);
    const editRowIndex = ref(null);
    const isCancelEditRow = ref(false);
    const cancelEdit = () => isCancelEditRow.value = true;
    const getEditRowIndex = () => editRowIndex.value;
    function setEditRowIndex(idx) {
      editRowIndex.value = idx;
      isCancelEditRow.value = false;
    }
    const headerSlot = slots.header ? {
      header: (scope) => {
        var _a;
        return (_a = slots.header) == null ? void 0 : _a.call(slots, scope);
      }
    } : {};
    function getDefaultColumn(column) {
      let _slot;
      return createVNode(ElTableColumn, column, _isSlot(_slot = extend({
        default: (scope) => {
          var _a;
          return (_a = slots.default) == null ? void 0 : _a.call(slots, scope);
        }
      }, headerSlot)) ? _slot : {
        default: () => [_slot]
      });
    }
    function editHeaderSlot(column) {
      if (column.editable) {
        return {
          header: ({
            column: column2
          }) => {
            return createVNode(Fragment, null, [createVNode("span", null, [column2.label]), createVNode(Icon, {
              "icon": "solar:pen-2-outline"
            }, null)]);
          }
        };
      }
      return {};
    }
    function renderEditCellColumn(column) {
      let _slot2;
      return createVNode(ElTableColumn, column, _isSlot(_slot2 = extend({
        default: (scope) => {
          var _a;
          if (column.editable) {
            return createVNode(_sfc_main, {
              "column": column,
              "scope": scope,
              "isCancelEditRow": isCancelEditRow.value,
              "isOpenEdit": scope.$index === editRowIndex.value,
              "onEdit-column-change": (val) => onEditChange(val, scope, column),
              "onCancel-edit-row-state-change": () => isCancelEditRow.value = false
            }, null);
          } else {
            (_a = slots.default) == null ? void 0 : _a.call(slots, scope);
          }
        }
      }, editHeaderSlot(column))) ? _slot2 : {
        default: () => [_slot2]
      });
    }
    function onEditChange(val, scope, column) {
      const {
        row
      } = scope;
      row[column.prop] = val;
      emit("edit-column-change", scope);
    }
    function renderCustomColumn(column) {
      if (column.customRender != "render") {
        let _slot3;
        return createVNode(ElTableColumn, column, _isSlot(_slot3 = extend({
          default: (scope) => {
            var _a;
            return (_a = slots[column.customRender]) == null ? void 0 : _a.call(slots, scope);
          }
        }, headerSlot)) ? _slot3 : {
          default: () => [_slot3]
        });
      } else {
        let _slot4;
        return createVNode(ElTableColumn, column, _isSlot(_slot4 = extend({
          default: (scope) => {
            var _a;
            return (_a = column.render) == null ? void 0 : _a.call(column, scope);
          }
        }, headerSlot)) ? _slot4 : {
          default: () => [_slot4]
        });
      }
    }
    function renderColumn(column) {
      let _slot5;
      if (!Object.keys(column).includes("formatter")) {
        column["formatter"] = (row, _, cellValue) => {
          return cellValue ? cellValue : column.placeholder || "-";
        };
      }
      switch (column.type) {
        case "index":
        case "selection":
          return getDefaultColumn(column);
        case "expand":
          return createVNode(ElTableColumn, column, _isSlot(_slot5 = extend({
            default: (scope) => {
              var _a;
              return (_a = slots.expand) == null ? void 0 : _a.call(slots, scope);
            }
          }, headerSlot)) ? _slot5 : {
            default: () => [_slot5]
          });
      }
      if (column.renderHeader && typeof column.renderHeader === "function") {
        {
          extend({
            default: (scope) => {
              var _a;
              return (_a = slots.default) == null ? void 0 : _a.call(slots, scope);
            }
          }, {
            header: (scope) => column.renderHeader(scope)
          });
        }
      }
      if (column.customRender) {
        return renderCustomColumn(column);
      }
      if (column.editable) {
        return renderEditCellColumn(column);
      }
      return getDefaultColumn(column);
    }
    expose({
      tableRef,
      setEditRowIndex,
      getEditRowIndex,
      cancelEdit
    });
    return () => createVNode("div", {
      "class": "basic-table"
    }, [createVNode(ElTable, mergeProps({
      "ref": tableRef,
      "class": "basic-table",
      "border": true,
      "stripe": true,
      "data": props.data
    }, attrs), {
      default: () => [props.columns && props.columns.length && props.columns.map((column) => renderColumn(column))]
    }), props.config && props.config.isPagination && createVNode(SopPagination, mergeProps(props.config.pagination, {
      "onCurrent-change": (pageNum) => emit("current-change", pageNum),
      "onSize-change": (sizeNum) => emit("size-change", sizeNum)
    }), null)]);
  }
});
export {
  SopBasicTable as default
};
//# sourceMappingURL=SopBasicTable.mjs.map