vue-editable-table
Version:
An editable table component for Vue with Tailwind CSS
212 lines (211 loc) • 7.83 kB
JavaScript
import { ref as b, computed as U, reactive as _, watch as E, onMounted as D, onUnmounted as M, openBlock as r, createElementBlock as a, createElementVNode as n, renderSlot as X, normalizeStyle as Y, createTextVNode as V, createCommentVNode as y, Fragment as S, renderList as k, normalizeClass as J, nextTick as x } from "vue";
const G = { class: "p-0" }, H = { class: "py-1" }, K = { class: "relative overflow-x-auto" }, Q = { class: "table-fixed border-collapse border border-gray-200 min-w-max" }, W = ["value", "onInput", "readonly"], Z = ["onClick"], I = {
key: 0,
class: "relative w-10 text-center"
}, ee = ["value", "onInput", "onFocus", "readonly"], te = {
key: 0,
class: ""
}, le = ["onClick"], oe = {
__name: "EditableTable",
props: {
modelValue: {
type: Array,
required: !0
},
columnNames: {
type: Array,
required: !0
},
canaddcolumn: {
type: Boolean,
required: !0
},
canaddrow: {
type: Boolean,
required: !0
},
canremovecolumn: {
type: Boolean,
required: !0
},
removerows: {
type: Array
},
canremoverow: {
type: Boolean,
required: !0
},
removecolumns: {
type: Array
},
disablecolumns: {
type: Array
},
disablerows: {
type: Array
},
colstyle: {
type: Array
}
},
emits: ["update:modelValue", "update:columnNames"],
setup(i, { emit: A }) {
const N = b({ top: 0, left: 0 }), u = i, p = b(!1), c = A, o = b(JSON.parse(JSON.stringify(u.modelValue))), s = b(JSON.parse(JSON.stringify(u.columnNames))), f = U(() => s.value.length), m = _({
row: null,
col: null
});
E(
() => u.modelValue,
(e) => {
JSON.stringify(e) !== JSON.stringify(o.value) && (o.value = JSON.parse(JSON.stringify(e)));
},
{ deep: !0 }
), E(
() => u.columnNames,
(e) => {
JSON.stringify(e) !== JSON.stringify(s.value) && (s.value = JSON.parse(JSON.stringify(e)));
},
{ deep: !0 }
);
const R = (e, l) => m.row === e && m.col === l, B = (e, l) => {
m.row = e, m.col = l;
}, q = () => {
m.row = null, m.col = null;
}, z = (e, l, v) => {
const t = v.target.value;
o.value[e][l] !== t && (o.value[e][l] = t, c("update:modelValue", JSON.parse(JSON.stringify(o.value))));
}, L = (e, l) => {
const v = l.target.value;
s.value[e] !== v && (s.value[e] = v, c("update:columnNames", [...s.value]));
}, h = b(null), P = async () => {
p.value = !p.value;
debugger;
await x(), g();
}, $ = () => {
s.value.push(`Column ${f.value + 1}`), o.value.forEach((e) => {
e.push("");
}), O(), p.value = !1;
}, F = (e) => {
f.value <= 1 || (s.value.splice(e, 1), o.value.forEach((l) => {
l.splice(e, 1);
}), O());
}, T = () => {
debugger;
const e = Array(f.value).fill("");
o.value.push(e), c("update:modelValue", JSON.parse(JSON.stringify(o.value))), c("addRow", JSON.parse(JSON.stringify(e))), p.value = !1;
}, j = (e) => {
o.value.splice(e, 1), c("update:modelValue", JSON.parse(JSON.stringify(o.value))), c("removeRow", e);
}, O = () => {
c("update:modelValue", JSON.parse(JSON.stringify(o.value))), c("update:columnNames", [...s.value]);
}, g = () => {
if (h.value != null) {
const e = h.value.getBoundingClientRect();
N.value = {
top: e.top + window.scrollY + e.height,
left: e.left + window.scrollX - 140
};
}
};
return D(() => {
window.addEventListener("scroll", g), window.addEventListener("resize", g);
}), M(() => {
window.removeEventListener("scroll", g), window.removeEventListener("resize", g);
}), (e, l) => (r(), a("div", G, [
n("div", null, [
X(e.$slots, "header")
]),
p.value ? (r(), a("div", {
key: 0,
class: "fixed z-[9999] w-36 rounded-md bg-white shadow-lg ring-1 ring-black/5",
style: Y({ top: N.value.top + "px", left: N.value.left + "px" }),
role: "menu",
"aria-orientation": "vertical",
"aria-labelledby": "user-menu-button",
tabindex: "-1"
}, [
n("div", H, [
u.canaddrow ? (r(), a("div", {
key: 0,
class: "flex items-center cursor-pointer px-4 py-2 text-sm text-gray-700 hover:bg-gray-100",
onClick: T
}, l[0] || (l[0] = [
n("i", { class: "icon-rows-plus-bottom mr-2" }, null, -1),
V(" Add Row ")
]))) : y("", !0),
u.canaddcolumn ? (r(), a("div", {
key: 1,
class: "flex items-center px-4 py-2 cursor-pointer text-sm text-gray-700 hover:bg-gray-100",
onClick: $
}, l[1] || (l[1] = [
n("i", { class: "icon-columns-plus-right mr-2" }, null, -1),
V(" Add Column ")
]))) : y("", !0)
])
], 4)) : y("", !0),
n("div", K, [
l[3] || (l[3] = n("div", null, null, -1)),
n("table", Q, [
n("thead", null, [
n("tr", null, [
(r(!0), a(S, null, k(f.value, (v, t) => (r(), a("th", {
key: t,
class: J([i.colstyle[t] ? i.colstyle[t] : "", "relative border border-gray-300 bg-gray-100 text-left"])
}, [
n("input", {
value: s.value[t],
onInput: (w) => L(t, w),
readonly: i.disablecolumns.includes(t),
placeholder: "Column name",
class: "w-full pl-1 mt-1 mb-1 border-none bg-transparent focus:bg-white outline-none"
}, null, 40, W),
u.canremovecolumn == !0 && !i.removecolumns.includes(t) ? (r(), a("button", {
key: 0,
onClick: (w) => F(t),
class: "absolute icon-column-delete right-1 top-1/2 -translate-y-1/2 h-4 flex items-center justify-center"
}, null, 8, Z)) : y("", !0)
], 2))), 128)),
u.canaddcolumn || u.canaddrow || u.canremovecolumn || u.canremoverow ? (r(), a("th", I, [
n("button", {
ref_key: "buttonRef",
ref: h,
onClick: P,
class: "icon-filter-list p-0 m-0 text-gray-600 hover:text-gray-800"
}, null, 512),
l[2] || (l[2] = n("div", { class: "relative inline-block text-left" }, null, -1))
])) : y("", !0)
])
]),
n("tbody", null, [
(r(!0), a(S, null, k(o.value, (v, t) => (r(), a("tr", { key: t }, [
(r(!0), a(S, null, k(f.value, (w, d) => (r(), a("td", {
key: d,
class: J(["border border-gray-200 bg-white relative", i.colstyle[d] ? i.colstyle[d] : ""])
}, [
n("input", {
value: o.value[t][d],
onInput: (C) => z(t, d, C),
onFocus: (C) => B(t, d),
readonly: i.disablerows.includes(t),
onBlur: q,
class: J({
"w-full pl-2 pt-0 m-0 bg-white border-none outline-none": !0,
"bg-white": R(t, d)
})
}, null, 42, ee)
], 2))), 128)),
u.canremoverow == !0 && !i.removerows.includes(t) ? (r(), a("td", te, [
n("button", {
onClick: (w) => j(t),
class: "icon-rows-delete flex p-0 m-0 items-center justify-center"
}, null, 8, le)
])) : y("", !0)
]))), 128))
])
])
])
]));
}
};
export {
oe as default
};