xdesign-vue-next/es/table/hooks/useRowExpand.mjs

XDesign Component for vue-next

/**
 * xdesign v1.0.6
 * (c) 2023 xdesign
 * @license MIT
 */

import { createElementVNode, openBlock, createElementBlock, toRefs, computed, createVNode } from 'vue';
import { _ as _defineProperty } from '../../_chunks/dep-f9e836af.mjs';
import { _ as _toConsumableArray } from '../../_chunks/dep-5bec687c.mjs';
import { _ as _slicedToArray } from '../../_chunks/dep-32d4c595.mjs';
import { g as get_1 } from '../../_chunks/dep-7fa157cd.mjs';
import useClassName from './useClassName.mjs';
import { useTNodeJSX } from '../../hooks/tnode.mjs';
import useDefaultValue from '../../hooks/useDefaultValue.mjs';
import '../../hooks/useConfig.mjs';
import { useConfig } from '../../config-provider/useConfig.mjs';
import '../../_chunks/dep-82805301.mjs';
import '../../_chunks/dep-89b966f4.mjs';
import '../../_chunks/dep-10a947a6.mjs';
import '../../_chunks/dep-fa6608fd.mjs';
import '../../_chunks/dep-a95026f2.mjs';
import '../../_chunks/dep-068e912d.mjs';
import '../../_chunks/dep-7dcfa37a.mjs';
import '../../_chunks/dep-b75d8d74.mjs';
import '../../_chunks/dep-addc2a84.mjs';
import '../../_chunks/dep-6aa0223b.mjs';
import '../../_chunks/dep-db381ece.mjs';
import '../../_chunks/dep-1cc1c24f.mjs';
import '../../_chunks/dep-6ad18815.mjs';
import '../../_chunks/dep-5755c21c.mjs';
import '../../_chunks/dep-7f239c43.mjs';
import '../../_chunks/dep-4903a8a8.mjs';
import '../../_chunks/dep-91ac8f71.mjs';
import '../../_chunks/dep-c4737535.mjs';
import '../../_chunks/dep-81c83986.mjs';
import '../../_chunks/dep-6f04869e.mjs';
import '../../_chunks/dep-d32fbbb3.mjs';
import '../../_chunks/dep-dafada74.mjs';
import '../../_chunks/dep-6e7b37b8.mjs';
import '../../_chunks/dep-e1ab85c5.mjs';
import '../../_chunks/dep-5f0e0453.mjs';
import '../../_chunks/dep-71f84cf2.mjs';
import '../../_chunks/dep-0e832fc7.mjs';
import '../../_chunks/dep-69963a8c.mjs';
import '../../_chunks/dep-8d1c9a23.mjs';
import '../../_chunks/dep-03412fab.mjs';
import '../../_chunks/dep-205ff58d.mjs';
import '../../_chunks/dep-11fa9c2c.mjs';
import '../../_chunks/dep-b09f48fa.mjs';
import '../../_chunks/dep-26bf361a.mjs';
import '../../_chunks/dep-3ec3335a.mjs';
import '../../_chunks/dep-ed4e7c50.mjs';
import '../../_chunks/dep-a666b9ad.mjs';
import '../../_common/js/global-config/default-config.mjs';
import '../../_common/js/global-config/locale/en_US.mjs';
import '../../config-provider/type.mjs';
import '../../_chunks/dep-a628549d.mjs';
import '../../_chunks/dep-f4eba04c.mjs';
import '../../_chunks/dep-735bcd0d.mjs';
import '../../_chunks/dep-765678ef.mjs';
import '../../_chunks/dep-8db27830.mjs';
import '../../_chunks/dep-ae4bffa5.mjs';
import '../../utils/render-tnode.mjs';
import '../../_chunks/dep-9d7ebc32.mjs';

const _hoisted_1 = {
  class: "x-icon",
  viewBox: "0 0 24 24",
  width: "1.1em",
  height: "1.1em"
};
const _hoisted_2 = /*#__PURE__*/createElementVNode("path", {
  fill: "currentColor",
  d: "M12 11V8l4 4l-4 4v-3H8v-2h4Zm0-9c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12S6.48 2 12 2Zm0 18c4.42 0 8-3.58 8-8s-3.58-8-8-8s-8 3.58-8 8s3.58 8 8 8Z"
}, null, -1 /* HOISTED */);
const _hoisted_3 = [
  _hoisted_2
];

function render(_ctx, _cache) {
  return (openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3))
}

var __unplugin_components_0 = { name: 'ri-arrow-right-circle-line', render };
/* vite-plugin-components disabled */

function useRowExpand(props, context) {
  var _toRefs = toRefs(props),
    expandedRowKeys = _toRefs.expandedRowKeys;
  var renderTNode = useTNodeJSX();
  var _useConfig = useConfig("table"),
    t = _useConfig.t,
    globalConfig = _useConfig.globalConfig;
  var _useClassName = useClassName(),
    tableExpandClasses = _useClassName.tableExpandClasses,
    positiveRotate90 = _useClassName.positiveRotate90,
    tableFullRowClasses = _useClassName.tableFullRowClasses;
  var _useDefaultValue = useDefaultValue(expandedRowKeys, props.defaultExpandedRowKeys || [], props.onExpandChange, "expandedRowKeys"),
    _useDefaultValue2 = _slicedToArray(_useDefaultValue, 2),
    tExpandedRowKeys = _useDefaultValue2[0],
    setTExpandedRowKeys = _useDefaultValue2[1];
  var showExpandedRow = computed(function () {
    return Boolean(props.expandedRow || context.slots.expandedRow || context.slots["expanded-row"]);
  });
  var showExpandIconColumn = computed(function () {
    return props.expandIcon !== false && showExpandedRow.value;
  });
  var isFirstColumnFixed = computed(function () {
    var _props$columns;
    return ((_props$columns = props.columns) === null || _props$columns === void 0 || (_props$columns = _props$columns[0]) === null || _props$columns === void 0 ? void 0 : _props$columns.fixed) === "left";
  });
  var onToggleExpand = function onToggleExpand(e, row) {
    props.expandOnRowClick && e.stopPropagation();
    var currentId = get_1(row, props.rowKey || "id");
    var index = tExpandedRowKeys.value.indexOf(currentId);
    var newKeys = _toConsumableArray(tExpandedRowKeys.value);
    index !== -1 ? newKeys.splice(index, 1) : newKeys.push(currentId);
    setTExpandedRowKeys(newKeys, {
      expandedRowData: props.data.filter(function (t2) {
        return newKeys.includes(get_1(t2, props.rowKey || "id"));
      }),
      currentRowData: row
    });
  };
  var renderExpandIcon = function renderExpandIcon(_, p) {
    var row = p.row,
      rowIndex = p.rowIndex;
    var currentId = get_1(row, props.rowKey || "id");
    var expanded = tExpandedRowKeys.value.includes(currentId);
    var icon = renderTNode("expandIcon", {
      defaultNode: t(globalConfig.value.expandIcon) || createVNode(__unplugin_components_0, null, null),
      params: {
        row: row,
        index: rowIndex
      }
    });
    if (!icon) return null;
    var classes = [tableExpandClasses.iconBox, tableExpandClasses[expanded ? "expanded" : "collapsed"], _defineProperty({}, positiveRotate90, expanded)];
    return createVNode("span", {
      "class": classes,
      "onClick": function onClick(e) {
        return onToggleExpand(e, row);
      }
    }, [icon]);
  };
  var getExpandColumn = function getExpandColumn() {
    var expandCol = {
      colKey: "__EXPAND_ROW_ICON_COLUMN__",
      width: 46,
      className: tableExpandClasses.iconCell,
      fixed: isFirstColumnFixed.value ? "left" : void 0,
      cell: renderExpandIcon,
      stopPropagation: true
    };
    return expandCol;
  };
  var renderExpandedRow = function renderExpandedRow(p) {
    var rowId = get_1(p.row, props.rowKey || "id");
    if (!tExpandedRowKeys.value || !tExpandedRowKeys.value.includes(rowId)) return null;
    var isFixedLeft = p.isWidthOverflow && props.columns.find(function (item) {
      return item.fixed === "left";
    });
    return createVNode("tr", {
      "key": "expand_".concat(rowId),
      "class": [tableExpandClasses.row, _defineProperty({}, tableFullRowClasses.base, isFixedLeft)]
    }, [createVNode("td", {
      "colspan": p.columns.length
    }, [createVNode("div", {
      "class": [tableExpandClasses.rowInner, _defineProperty({}, tableFullRowClasses.innerFullRow, isFixedLeft)],
      "style": isFixedLeft ? {
        width: "".concat(p.tableWidth, "px")
      } : {}
    }, [createVNode("div", {
      "class": tableFullRowClasses.innerFullElement
    }, [renderTNode("expandedRow", {
      params: p
    })])])])]);
  };
  var onInnerExpandRowClick = function onInnerExpandRowClick(p) {
    onToggleExpand(p.e, p.row);
  };
  return {
    showExpandedRow: showExpandedRow,
    showExpandIconColumn: showExpandIconColumn,
    getExpandColumn: getExpandColumn,
    renderExpandedRow: renderExpandedRow,
    onInnerExpandRowClick: onInnerExpandRowClick
  };
}

export { useRowExpand as default };
//# sourceMappingURL=useRowExpand.mjs.map