vue-bootstrap-crud-manager/dist/vue-bootstrap-crud-manager.es.js

A reusable Vue 3 CRUD Manager component styled with Bootstrap.

import { defineComponent as M, ref as b, reactive as E, watch as N, onMounted as A, createElementBlock as o, openBlock as n, createElementVNode as e, toDisplayString as i, Fragment as h, renderList as v, createCommentVNode as D, withModifiers as j, withDirectives as S, vModelDynamic as U } from "vue";
import { Modal as B } from "bootstrap";
const O = { class: "container my-4" }, R = { class: "d-flex justify-content-between align-items-center mb-3" }, $ = { class: "table table-bordered table-hover" }, F = { class: "table-light" }, I = ["onClick"], L = ["onClick"], q = { key: 0 }, x = ["colspan"], z = { class: "modal-dialog" }, G = { class: "modal-content" }, H = { class: "modal-header" }, J = { class: "modal-title" }, K = { class: "modal-body" }, P = ["for"], Q = ["type", "id", "onUpdate:modelValue"], T = { class: "modal-footer" }, W = {
  type: "submit",
  class: "btn btn-success"
}, X = /* @__PURE__ */ M({
  __name: "CrudManager",
  props: {
    title: {},
    schema: {},
    modelValue: {}
  },
  emits: ["update:modelValue"],
  setup(y, { emit: f }) {
    const k = f, p = b(null);
    let s = null;
    const a = b([...modelValue]), d = E({}), _ = b(null), c = b(!1);
    N(
      () => modelValue,
      (t) => {
        a.value = [...t];
      },
      { deep: !0 }
    );
    const g = () => {
      c.value = !1, Object.keys(d).forEach((t) => delete d[t]), schema.forEach((t) => d[t.key] = ""), s == null || s.show();
    }, C = (t) => {
      c.value = !0, _.value = t, Object.assign(d, a.value[t]), s == null || s.show();
    }, w = () => {
      c.value && _.value !== null ? a.value[_.value] = { ...d } : a.value.push({ ...d }), k("update:modelValue", a.value), s == null || s.hide();
    }, V = (t) => {
      a.value.splice(t, 1), k("update:modelValue", a.value);
    };
    return A(() => {
      p.value && (s = new B(p.value));
    }), (t, u) => (n(), o("div", O, [
      e("div", R, [
        e("h3", null, i(t.title), 1),
        e("button", {
          class: "btn btn-primary",
          onClick: g
        }, "Add New")
      ]),
      e("table", $, [
        e("thead", F, [
          e("tr", null, [
            (n(!0), o(h, null, v(t.schema, (l) => (n(), o("th", {
              key: l.key
            }, i(l.label), 1))), 128)),
            u[0] || (u[0] = e("th", null, "Actions", -1))
          ])
        ]),
        e("tbody", null, [
          (n(!0), o(h, null, v(a.value, (l, r) => (n(), o("tr", { key: r }, [
            (n(!0), o(h, null, v(t.schema, (m) => (n(), o("td", {
              key: m.key
            }, i(l[m.key]), 1))), 128)),
            e("td", null, [
              e("button", {
                class: "btn btn-sm btn-warning me-1",
                onClick: (m) => C(r)
              }, "Edit", 8, I),
              e("button", {
                class: "btn btn-sm btn-danger",
                onClick: (m) => V(r)
              }, "Delete", 8, L)
            ])
          ]))), 128)),
          a.value.length === 0 ? (n(), o("tr", q, [
            e("td", {
              colspan: t.schema.length + 1,
              class: "text-center"
            }, "No data found", 8, x)
          ])) : D("", !0)
        ])
      ]),
      e("div", {
        class: "modal fade",
        ref_key: "modalRef",
        ref: p,
        tabindex: "-1"
      }, [
        e("div", z, [
          e("div", G, [
            e("form", {
              onSubmit: j(w, ["prevent"])
            }, [
              e("div", H, [
                e("h5", J, i(c.value ? "Edit Item" : "Add New Item"), 1),
                u[1] || (u[1] = e("button", {
                  type: "button",
                  class: "btn-close",
                  "data-bs-dismiss": "modal"
                }, null, -1))
              ]),
              e("div", K, [
                (n(!0), o(h, null, v(t.schema, (l) => (n(), o("div", {
                  key: l.key,
                  class: "mb-3"
                }, [
                  e("label", {
                    for: l.key,
                    class: "form-label"
                  }, i(l.label), 9, P),
                  S(e("input", {
                    type: l.type || "text",
                    class: "form-control",
                    id: l.key,
                    "onUpdate:modelValue": (r) => d[l.key] = r
                  }, null, 8, Q), [
                    [U, d[l.key]]
                  ])
                ]))), 128))
              ]),
              e("div", T, [
                u[2] || (u[2] = e("button", {
                  type: "button",
                  class: "btn btn-secondary",
                  "data-bs-dismiss": "modal"
                }, "Cancel", -1)),
                e("button", W, i(c.value ? "Update" : "Save"), 1)
              ])
            ], 32)
          ])
        ])
      ], 512)
    ]));
  }
}), ee = {
  install(y) {
    y.component("CrudManager", X);
  }
};
export {
  X as CrudManager,
  ee as default
};