@layui/layui-vue/es/table/index2.js

a component library for Vue 3 base on layui-vue

import { defineComponent as ie, useSlots as se, shallowRef as u, ref as b, computed as z, watch as ue, nextTick as K, onMounted as de, onBeforeUnmount as re, provide as ce, openBlock as t, createElementBlock as s, normalizeClass as W, normalizeStyle as E, createVNode as k, normalizeProps as me, guardReactiveProps as pe, unref as o, renderSlot as w, createCommentVNode as d, createElementVNode as r, withDirectives as fe, Fragment as P, renderList as U, createBlock as V, vShow as ye, mergeProps as he } from "vue";
/* empty css           */
import { useResizeObserver as O } from "@vueuse/core";
import ve from "../empty/index2.js";
import be from "./components/TableHeader.js";
import ge from "./components/TablePage.js";
import Se from "./components/TableToolbar.js";
import xe from "./components/TableTotal.js";
import { useTable as Ce } from "./hooks/useTable.js";
import { tableEmits as ke } from "./typing.js";
import { LAY_TABLE_CONTEXT as we } from "./constant.js";
import Be from "./components/TableMain/TableMain.js";
const Re = { key: 0, class: "layui-table-box-header" }, Ne = { class: "layui-table-box" }, Le = ["lay-size", "lay-skin"], Te = ["width"], ze = { key: 1, class: "layui-table-loading" }, We = [r("i", { class: "layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop" }, null, -1)], Ee = { key: 1, class: "layui-table-footer" }, Pe = { key: 1, class: "layui-table-page" }, Ae = { key: 0, class: "layui-table-page-slot" }, Xe = ie({ name: "LayTable", __name: "index", props: { id: { default: "id" }, dataSource: { default: () => [] }, columns: {}, skin: {}, size: { default: "md" }, page: {}, defaultToolbar: { type: [Boolean, Array], default: !1 }, selectedKey: { default: "" }, selectedKeys: { default: () => [] }, indentSize: { default: 30 }, childrenColumnName: { default: "children" }, height: {}, maxHeight: { default: "auto" }, even: { type: Boolean, default: !1 }, expandIndex: { default: 0 }, rowClassName: { type: [String, Function], default: "" }, cellClassName: { type: [String, Function], default: "" }, rowStyle: { type: [String, Function], default: "" }, cellStyle: { type: [String, Function], default: "" }, spanMethod: { type: Function, default: () => {
} }, defaultExpandAll: { type: Boolean, default: !1 }, expandKeys: { default: () => [] }, loading: { type: Boolean, default: !1 }, getCheckboxProps: { type: Function, default: () => {
} }, getRadioProps: { type: Function, default: () => {
} }, resize: { type: Boolean, default: !1 }, autoColsWidth: { type: Boolean, default: !1 }, emptyDescription: {}, initSort: { default: () => ({ field: "", type: "" }) } }, emits: ke, setup(X, { expose: Y, emit: j }) {
  const n = X, A = j, f = se(), { hierarchicalColumns: D, lastLevelAllColumns: q, lastLevelShowColumns: g, tableDataSource: c, columnsState: J, selectedState: F, expandState: Q, hasTotalRow: M, commonGetClasses: Z, commonGetStylees: ee } = Ce(n, A), B = u(null), i = u(null), _ = u(null), H = b(), R = b(0), N = u(null), L = u(null), T = u(null), le = u(null), y = b(!1), h = b(!1), ae = z(() => [y.value ? "layui-table-has-fixed-left" : "", h.value ? "layui-table-has-fixed-right" : "", { "layui-table-has-bottom-width": !(M.value || n.page && n.page.total > 0 || f.footer) }]);
  function m() {
    var l, p, v;
    const e = ((l = i.value) == null ? void 0 : l.clientWidth) || 0, a = ((p = i.value) == null ? void 0 : p.offsetWidth) || 0;
    R.value = e < a ? a - e : 0, H.value = ((v = L.value) == null ? void 0 : v.offsetWidth) + "px";
  }
  let S, x;
  function C() {
    var v, I, G, $;
    const e = ((v = i.value) == null ? void 0 : v.scrollLeft) || 0, a = ((I = i.value) == null ? void 0 : I.scrollWidth) || 0, l = ((G = i.value) == null ? void 0 : G.clientWidth) || 0, p = (($ = i.value) == null ? void 0 : $.offsetWidth) || 0;
    N.value && (N.value.scrollLeft = e), T.value && (T.value.scrollLeft = e), a > l ? e == 0 ? (y.value = !1, h.value = !0) : e + p + 2 > a ? (y.value = !0, h.value = !1) : (y.value = !0, h.value = !0) : (y.value = !1, h.value = !1);
  }
  ue(() => [n.height, n.maxHeight, c], () => {
    K(() => {
      m();
    });
  }), de(() => {
    var e, a;
    K(() => {
      m();
    }), C(), (e = i.value) == null || e.addEventListener("scroll", () => {
      m(), C();
    }), (a = i.value) == null || a.addEventListener("transitionend", () => {
      m();
    }), S = O(i, () => {
      m(), C();
    }), x = O(L, () => {
      m(), C();
    });
  }), re(() => {
    S == null || S.stop(), x == null || x.stop();
  });
  const te = b(0), oe = z(() => c.find((e) => {
    if (e[n.childrenColumnName])
      return !0;
  }) != null), ne = z(() => ({ defaultToolbar: n.defaultToolbar, spanMethod: n.spanMethod, tableDataSource: c, hierarchicalColumns: D.value, lastLevelAllColumns: q.value, tableRef: B.value }));
  return Y({ getCheckData: F.getAllSelectedDataSource }), ce(we, { tableEmits: A, tableProps: n, tableSlots: f, tableRef: B, tableBodyTableRef: _, tableHeaderRef: N, tableHeaderTableRef: L, tableTotalRef: T, tableTotalTableRef: le, tableDataSource: c, columnsState: J, selectedState: F, expandState: Q, commonGetClasses: Z, commonGetStylees: ee }), (e, a) => (t(), s("div", { ref_key: "tableRef", ref: B, class: W(["layui-form layui-border-box layui-table-view", ae.value]), style: E({ height: e.height, maxHeight: e.maxHeight }) }, [k(Se, me(pe(ne.value)), null, 16), o(f).header ? (t(), s("div", Re, [w(e.$slots, "header")])) : d("", !0), r("div", Ne, [k(be, { lastLevelShowColumns: o(g), hierarchicalColumns: o(D), tableBodyScrollWidth: R.value }, null, 8, ["lastLevelShowColumns", "hierarchicalColumns", "tableBodyScrollWidth"]), r("div", { class: W(["layui-table-body layui-table-main", { "layui-table-body-loading": n.loading }]), ref_key: "tableBodyRef", ref: i }, [fe(r("table", { class: W(["layui-table", { "layui-table-even": n.even }]), "lay-size": e.size, "lay-skin": e.skin, ref_key: "tableBodyTableRef", ref: _ }, [r("colgroup", null, [(t(!0), s(P, null, U(o(g), (l) => (t(), s("col", { key: l.key || l.type, width: l.width, style: E({ minWidth: l.minWidth }) }, null, 12, Te))), 128))]), r("tbody", null, [(t(!0), s(P, null, U(o(c), (l, p) => (t(), V(o(Be), { key: l[e.id], id: e.id, index: p, data: l, page: e.page, columns: o(g), "indent-size": e.indentSize, currentIndentSize: te.value, expandSpace: oe.value, expandIndex: e.expandIndex, cellStyle: e.cellStyle, cellClassName: e.cellClassName, rowStyle: e.rowStyle, rowClassName: e.rowClassName, spanMethod: e.spanMethod, defaultExpandAll: e.defaultExpandAll, getCheckboxProps: e.getCheckboxProps, getRadioProps: e.getRadioProps, childrenColumnName: e.childrenColumnName }, null, 8, ["id", "index", "data", "page", "columns", "indent-size", "currentIndentSize", "expandSpace", "expandIndex", "cellStyle", "cellClassName", "rowStyle", "rowClassName", "spanMethod", "defaultExpandAll", "getCheckboxProps", "getRadioProps", "childrenColumnName"]))), 128))])], 10, Le), [[ye, e.loading == 0]]), o(c).length == 0 && e.loading == 0 ? (t(), s(P, { key: 0 }, [w(e.$slots, "empty", {}, () => [k(ve, { description: e.emptyDescription }, null, 8, ["description"])]), r("div", { style: E({ width: H.value }) }, null, 4)], 64)) : d("", !0), e.loading == 1 ? (t(), s("div", ze, We)) : d("", !0)], 2), o(M) ? (t(), V(xe, { key: 0, lastLevelShowColumns: o(g), tableBodyScrollWidth: R.value }, null, 8, ["lastLevelShowColumns", "tableBodyScrollWidth"])) : d("", !0), o(f).footer ? (t(), s("div", Ee, [w(e.$slots, "footer")])) : d("", !0)]), e.page && e.page.total > 0 ? (t(), s("div", Pe, [k(ge, he(e.page, { current: e.page.current, "onUpdate:current": a[0] || (a[0] = (l) => e.page.current = l), limit: e.page.limit, "onUpdate:limit": a[1] || (a[1] = (l) => e.page.limit = l) }), null, 16, ["current", "limit"]), o(f).page ? (t(), s("div", Ae, [w(e.$slots, "page")])) : d("", !0)])) : d("", !0)], 6));
} });
export {
  Xe as default
};