hongluan-ui/lib/components/table/src/config.js

Hongluan Component Library for Vue 3

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var index = require('../../checkbox/index.js');
var index$2 = require('../../spinner/index.js');
var index$1 = require('../../icon/index.js');
require('../../system-icon/index.js');
require('../../../utils/index.js');
var arrowRight = require('../../system-icon/src/arrow-right.js');
var objects = require('../../../utils/objects.js');

const defaultClassNames = {
  selection: "table-column-selection",
  expand: "table-expand-column"
};
const cellStarts = {
  default: {
    order: ""
  },
  selection: {
    width: 48,
    minWidth: 48,
    realWidth: 48,
    order: ""
  },
  expand: {
    width: 48,
    minWidth: 48,
    realWidth: 48,
    order: ""
  },
  index: {
    width: 48,
    minWidth: 48,
    realWidth: 48,
    order: ""
  }
};
const getDefaultClassName = (type) => {
  return defaultClassNames[type] || "";
};
const cellForced = {
  selection: {
    renderHeader({ store, column }) {
      function isDisabled() {
        return store.states.data.value && store.states.data.value.length === 0;
      }
      return vue.h(index.HlCheckbox, {
        disabled: isDisabled(),
        size: store.states.tableSize.value,
        indeterminate: store.states.selection.value.length > 0 && !store.states.isAllSelected.value,
        "onUpdate:modelValue": store.toggleAllSelection,
        modelValue: store.states.isAllSelected.value,
        ariaLabel: column.label
      });
    },
    renderCell({
      row,
      column,
      store,
      $index
    }) {
      return vue.h(index.HlCheckbox, {
        disabled: column.selectable ? !column.selectable.call(null, row, $index) : false,
        size: store.states.tableSize.value,
        onChange: () => {
          store.commit("rowSelectedChanged", row);
        },
        onClick: (event) => event.stopPropagation(),
        modelValue: store.isSelected(row),
        ariaLabel: column.label
      });
    },
    sortable: false,
    resizable: false
  },
  index: {
    renderHeader({ column }) {
      return column.label || "#";
    },
    renderCell({
      column,
      $index
    }) {
      let i = $index + 1;
      const index = column.index;
      if (typeof index === "number") {
        i = $index + index;
      } else if (typeof index === "function") {
        i = index($index);
      }
      return vue.h("div", {}, [i]);
    },
    sortable: false
  },
  expand: {
    renderHeader({ column }) {
      return column.label || "";
    },
    renderCell({
      row,
      store,
      expanded
    }) {
      const classes = ["table-expand-icon"];
      if (expanded) {
        classes.push("table-expand-icon-expanded");
      }
      const callback = function(e) {
        e.stopPropagation();
        store.toggleRowExpansion(row);
      };
      return vue.h("div", {
        class: classes,
        onClick: callback
      }, {
        default: () => {
          return [
            vue.h(index$1.HlIcon, null, {
              default: () => {
                return [vue.h(arrowRight["default"])];
              }
            })
          ];
        }
      });
    },
    sortable: false,
    resizable: false
  }
};
function defaultRenderCell({
  row,
  column,
  $index
}) {
  var _a;
  const property = column.property;
  const value = property && objects.getProp(row, property).value;
  if (column && column.formatter) {
    return column.formatter(row, column, value, $index);
  }
  return ((_a = value == null ? void 0 : value.toString) == null ? void 0 : _a.call(value)) || "";
}
function treeCellPrefix({
  row,
  treeNode,
  store
}, createPlaceholder = false) {
  if (!treeNode) {
    if (createPlaceholder) {
      return [
        vue.h("span", {
          class: "table-placeholder"
        })
      ];
    }
    return null;
  }
  const ele = [];
  const callback = function(e) {
    e.stopPropagation();
    if (treeNode.loading) {
      return;
    }
    store.loadOrToggle(row);
  };
  if (treeNode.indent) {
    ele.push(vue.h("span", {
      class: "table-indent",
      style: { "padding-left": `${treeNode.indent}px` }
    }));
  }
  if (typeof treeNode.expanded === "boolean" && !treeNode.noLazyChildren) {
    const expandClasses = [
      "table-expand-icon",
      treeNode.expanded ? "table-expand-icon-expanded" : ""
    ];
    ele.push(vue.h("div", {
      class: expandClasses,
      onClick: callback
    }, {
      default: () => {
        return [
          treeNode.loading ? vue.h(index$2.HlSpinner) : vue.h(index$1.HlIcon, null, {
            default: () => [vue.h(arrowRight["default"])]
          })
        ];
      }
    }));
  } else {
    ele.push(vue.h("span", {
      class: "table-placeholder"
    }));
  }
  return ele;
}

exports.cellForced = cellForced;
exports.cellStarts = cellStarts;
exports.defaultRenderCell = defaultRenderCell;
exports.getDefaultClassName = getDefaultClassName;
exports.treeCellPrefix = treeCellPrefix;
//# sourceMappingURL=config.js.map