import './assets/data-table-style.css';/* empty css                        */
import e from "./TdCell.js";
import t from "./assets/TableIcon.js";
import n from "./TrHead.js";
import r from "./ThCell.js";
import i from "./TrBody.js";
import a from "./ColumnCaret.js";
import { useEventListener as o } from "../../composition/useEventListener.js";
import { useResize as s } from "./composition/useResize.js";
import c from "./RowsCommandMenu.js";
import l from "./ColumnsCommandMenu.js";
import u from "./TScroll.js";
import { createState as d } from "./state.js";
import "../../index.js";
import { Fragment as f, computed as p, createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createVNode as v, defineComponent as y, nextTick as b, normalizeStyle as x, onMounted as S, openBlock as C, ref as w, renderList as T, unref as E, watch as D, watchPostEffect as O, withCtx as k } from "vue";
import { tapIf as A } from "@milaboratories/helpers";
var j = { class: "command-menu__container" }, M = {
	key: 0,
	class: "table-body__no-data"
}, N = { class: "carets" }, P = /* @__PURE__ */ y({
	__name: "TableComponent",
	props: { settings: {} },
	emits: ["update:data", "change:sort"],
	setup(y, { emit: P }) {
		let F = P, I = y, L = d(I), R = p(() => L.data.rows.length === 0), z = p(() => ({ height: R.value ? "212px" : L.data.bodyHeight + "px" }));
		D(L.data, (e) => F("update:data", e), { deep: !0 }), D(I, () => U);
		let B = w(), V = w(), H = w(), U = () => {
			A(H.value, (e) => {
				L.updateDimensions(e.getBoundingClientRect());
			});
		}, W = L.tableColumns, G = L.tableRows, { mouseDown: K } = s(L, B);
		S(() => {
			b(U);
		}), O(() => {
			E(I.settings), b(U);
		}), o(window, "resize", () => b(U));
		let q = (e) => {
			e.preventDefault(), L.updateOffsets(e);
		};
		return (o, s) => (C(), g("div", {
			ref_key: "tableRef",
			ref: B,
			class: "data-table",
			onMousedown: s[2] ||= (...e) => E(K) && E(K)(...e)
		}, [
			_("div", j, [v(c), v(l)]),
			_("div", {
				ref_key: "headRef",
				ref: V,
				class: "table-head"
			}, [v(n, null, {
				default: k(() => [(C(!0), g(f, null, T(E(W), (e, t) => (C(), m(r, {
					key: t,
					col: e,
					style: x(e.style),
					"onChange:sort": s[0] ||= (e) => o.$emit("change:sort", e)
				}, null, 8, ["col", "style"]))), 128))]),
				_: 1
			})], 512),
			_("div", {
				ref_key: "bodyRef",
				ref: H,
				class: "table-body",
				style: x(z.value),
				onWheel: q
			}, [R.value ? (C(), g("div", M, [_("div", null, [v(t), s[3] ||= _("div", null, "No Data To Show", -1)])])) : h("", !0), (C(!0), g(f, null, T(E(G), (t, n) => (C(), m(i, {
				key: n,
				row: t
			}, {
				default: k(() => [(C(!0), g(f, null, T(t.cells, (t) => (C(), m(e, {
					key: t.column.id + ":" + n,
					cell: t,
					style: x(t.style)
				}, null, 8, ["cell", "style"]))), 128))]),
				_: 2
			}, 1032, ["row"]))), 128))], 36),
			_("div", N, [(C(!0), g(f, null, T(E(W), (e, t) => (C(), m(a, {
				key: t,
				column: e,
				style: x(e.style),
				"onChange:sort": s[1] ||= (e) => o.$emit("change:sort", e)
			}, null, 8, ["column", "style"]))), 128))]),
			v(u, {
				offset: E(L).data.scrollTop,
				"window-size": E(L).data.bodyHeight,
				"data-size": E(L).data.dataHeight,
				"onChange:offset": E(L).updateScrollTop
			}, null, 8, [
				"offset",
				"window-size",
				"data-size",
				"onChange:offset"
			])
		], 544));
	}
});
export { P as default };

//# sourceMappingURL=TableComponent.vue2.js.map