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

A reusable Vue 3 CRUD Manager component styled with Bootstrap.

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