lkt-item-crud 1.0.8 → 1.0.9

package/dist/lkt-item-crud.es.js

@@ -1,11 +1,204 @@
-import o from "lkt-button";
-import n from "lkt-http-info";
-import e from "lkt-loader";
-const i = {
-  install: (t, m = {}) => {
-    t.component("lkt-item-crud") === void 0 && t.component("lkt-item-crud", i), t.component("lkt-button") === void 0 && t.use(o), t.component("lkt-http-info") === void 0 && t.use(n), t.component("lkt-loader") === void 0 && t.use(e);
+import { defineComponent as Z, useSlots as ee, ref as d, computed as v, watch as R, resolveComponent as V, openBlock as i, createElementBlock as p, createElementVNode as I, toDisplayString as M, renderSlot as L, createCommentVNode as C, withDirectives as B, createBlock as _, withCtx as J, unref as E, vShow as q, createVNode as H } from "vue";
+import { httpCall as te } from "lkt-http-client";
+import { DataState as ae } from "lkt-data-state";
+import le from "lkt-button";
+import ue from "lkt-http-info";
+import re from "lkt-loader";
+const oe = { class: "lkt-item-crud" }, se = {
+  key: 0,
+  class: "lkt-item-crud_header"
+}, de = { class: "lkt-item-crud_header-title" }, ie = { class: "lkt-item-crud_header-slot" }, ne = { class: "lkt-item-crud-buttons" }, ce = { key: 1 }, ve = { key: 1 }, fe = {
+  key: 1,
+  class: "lkt-item-crud_content"
+}, me = {
+  key: 0,
+  class: "lkt-grid-1"
+}, pe = { name: "LktItemCrud", inheritAttrs: !1 }, ke = /* @__PURE__ */ Z({
+  ...pe,
+  props: {
+    modelValue: { type: Object, required: !1, default: () => ({}) },
+    title: { type: String, default: "" },
+    editModeText: { type: String, default: "Edition Mode" },
+    saveText: { type: String, default: "Save" },
+    dropText: { type: String, default: "Delete" },
+    readResource: { type: String, required: !1 },
+    createResource: { type: String, required: !1 },
+    updateResource: { type: String, required: !1 },
+    dropResource: { type: String, required: !1 },
+    readData: { type: Object, required: !1, default: () => ({}) },
+    createData: { type: Object, required: !1, default: () => ({}) },
+    updateData: { type: Object, required: !1, default: () => ({}) },
+    dropData: { type: Object, required: !1, default: () => ({}) },
+    isCreate: { type: Boolean, default: !1 },
+    createConfirm: { type: String, default: "" },
+    updateConfirm: { type: String, default: "" },
+    dropConfirm: { type: String, default: "" },
+    createDisabled: { type: Boolean, default: !1 },
+    updateDisabled: { type: Boolean, default: !1 },
+    dropDisabled: { type: Boolean, default: !1 },
+    saveValidator: { type: Function, required: !1, default: () => !0 }
+  },
+  emits: ["update:modelValue", "read", "create", "update", "drop", "perms", "error", "modified-data"],
+  setup(t, { expose: N, emit: A }) {
+    const e = t, O = ee(), o = A;
+    let F = [];
+    const l = d(!0), r = d(e.modelValue), k = d(F), c = d(!1), n = d(!1), f = d(!1), s = d(200), S = d(null), h = d(null), y = d(new ae(r.value)), P = v(() => e.isCreate ? e.createConfirm : e.updateConfirm), T = v(() => e.isCreate ? e.createResource : e.updateResource), z = v(() => e.isCreate ? { ...e.createData, ...JSON.parse(JSON.stringify(r.value)) } : { ...e.updateData, ...JSON.parse(JSON.stringify(r.value)) }), G = v(() => e.isCreate ? e.createDisabled : e.updateDisabled), b = v(() => !e.isCreate && k.value.includes("update")), D = v(() => !e.isCreate && k.value.includes("drop")), w = async () => {
+      l.value = !0, s.value = -1, f.value = !1;
+      try {
+        const a = await te(e.readResource, e.readData);
+        if (l.value = !1, s.value = a.httpStatus, !a.success) {
+          n.value = !1, s.value = a.httpStatus, o("error", a.httpStatus);
+          return;
+        }
+        n.value = !0, r.value = a.data, k.value = a.perms, y.value.increment(r.value).turnStoredIntoOriginal(), o("read", a);
+      } catch {
+        l.value = !1, n.value = !1, s.value = 404, o("error", 404);
+        return;
+      }
+    }, K = v(() => l.value ? !1 : e.title || !!O["post-title"]);
+    R(() => e.modelValue, (a) => {
+      r.value = a, y.value.increment(a);
+    }, { deep: !0 }), R(r, (a) => {
+      o("update:modelValue", r.value), y.value.increment(a);
+    }, { deep: !0 }), R(k, () => o("perms", k.value));
+    const $ = v(() => G.value || !e.isCreate && !b.value || typeof e.saveValidator == "function" && !e.saveValidator(r.value) ? !1 : y.value.changed());
+    R($, (a) => o("modified-data", a)), e.readResource && !e.isCreate ? w() : e.isCreate && (n.value = !0, c.value = !0, l.value = !1);
+    const Q = (a, u) => {
+      if (l.value = !1, s.value = u.httpStatus, !u.success) {
+        f.value = !0, o("error", u.httpStatus);
+        return;
+      }
+      f.value = !0, o("drop", u);
+    }, W = (a, u) => {
+      if (T.value) {
+        if (l.value = !1, s.value = u.httpStatus, !u.success) {
+          f.value = !0, o("error", u.httpStatus);
+          return;
+        }
+        f.value = !0;
+      }
+      let g = e.isCreate ? "create" : "update";
+      e.isCreate || y.value.turnStoredIntoOriginal(), u.autoReloadId && (e.readData.id = u.autoReloadId, w()), o(g, u);
+    }, x = () => {
+      l.value = !0, s.value = -1;
+    }, j = () => {
+      l.value = !1;
+    };
+    return N({
+      doDrop: () => {
+        h.value && typeof h.value.click == "function" && h.value.click();
+      },
+      doRefresh: w,
+      doSave: () => {
+        S.value && typeof S.value.click == "function" && S.value.click();
+      }
+    }), (a, u) => {
+      const g = V("lkt-button"), X = V("lkt-field-switch"), U = V("lkt-http-info"), Y = V("lkt-loader");
+      return i(), p("article", oe, [
+        K.value ? (i(), p("header", se, [
+          I("h1", de, M(t.title), 1),
+          I("div", ie, [
+            L(a.$slots, "post-title", {
+              item: r.value,
+              loading: l.value
+            })
+          ])
+        ])) : C("", !0),
+        B(I("div", ne, [
+          t.isCreate ? C("", !0) : B((i(), _(g, {
+            key: 0,
+            ref: (m) => h.value = m,
+            palette: "danger",
+            disabled: t.dropDisabled || !D.value,
+            "confirm-modal": t.dropConfirm,
+            resource: t.dropResource,
+            "resource-data": t.dropData,
+            onLoading: x,
+            onLoaded: j,
+            onClick: Q
+          }, {
+            default: J(() => [
+              E(O)["button-drop"] ? L(a.$slots, "button-drop", {
+                key: 0,
+                item: r.value,
+                editMode: c.value,
+                isCreate: t.isCreate,
+                canUpdate: b.value,
+                canDrop: D.value
+              }) : (i(), p("span", ce, M(t.dropText), 1))
+            ]),
+            _: 3
+          }, 8, ["disabled", "confirm-modal", "resource", "resource-data"])), [
+            [q, !l.value && c.value && n.value]
+          ]),
+          B(H(g, {
+            ref: (m) => S.value = m,
+            palette: "success",
+            disabled: !$.value,
+            "confirm-modal": P.value,
+            resource: T.value,
+            "resource-data": z.value,
+            onLoading: x,
+            onLoaded: j,
+            onClick: W
+          }, {
+            default: J(() => [
+              E(O)["button-save"] ? L(a.$slots, "button-save", {
+                key: 0,
+                item: r.value,
+                editMode: c.value,
+                isCreate: t.isCreate,
+                canUpdate: b.value,
+                canDrop: D.value
+              }) : (i(), p("span", ve, M(t.saveText), 1))
+            ]),
+            _: 3
+          }, 8, ["disabled", "confirm-modal", "resource", "resource-data"]), [
+            [q, !l.value && c.value && n.value]
+          ]),
+          B(H(X, {
+            modelValue: c.value,
+            "onUpdate:modelValue": u[0] || (u[0] = (m) => c.value = m),
+            label: t.editModeText
+          }, null, 8, ["modelValue", "label"]), [
+            [q, !l.value && n.value && !t.isCreate]
+          ])
+        ], 512), [
+          [q, n.value]
+        ]),
+        l.value ? C("", !0) : (i(), p("div", fe, [
+          n.value ? (i(), p("div", me, [
+            f.value ? (i(), _(U, {
+              key: 0,
+              code: s.value,
+              quick: "",
+              palette: s.value === 200 ? "success" : "danger",
+              "can-close": "",
+              onClose: u[1] || (u[1] = (m) => f.value = !1)
+            }, null, 8, ["code", "palette"])) : C("", !0),
+            L(a.$slots, "item", {
+              item: r.value,
+              loading: l.value,
+              editMode: c.value,
+              isCreate: t.isCreate,
+              canUpdate: b.value,
+              canDrop: D.value
+            })
+          ])) : (i(), _(U, {
+            key: 1,
+            code: s.value
+          }, null, 8, ["code"]))
+        ])),
+        l.value ? (i(), _(Y, { key: 2 })) : C("", !0)
+      ]);
+    };
+  }
+});
+const Ve = {
+  install: (t, N = {}) => {
+    t.component("lkt-item-crud") === void 0 && t.component("lkt-item-crud", ke), t.component("lkt-button") === void 0 && t.use(le), t.component("lkt-http-info") === void 0 && t.use(ue), t.component("lkt-loader") === void 0 && t.use(re);
   }
 };
 export {
-  i as default
+  Ve as default
 };

package/dist/lkt-item-crud.umd.js

@@ -1 +1 @@
-(function(e,o){typeof exports=="object"&&typeof module<"u"?module.exports=o(require("lkt-button"),require("lkt-http-info"),require("lkt-loader")):typeof define=="function"&&define.amd?define(["lkt-button","lkt-http-info","lkt-loader"],o):(e=typeof globalThis<"u"?globalThis:e||self,e.LktItemCrud=o(e.LktButton,e.LktHttpInfo,e.LktLoader))})(this,function(e,o,d){"use strict";const n=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},i=n(e),f=n(o),l=n(d),k="",u={install:(t,r={})=>{t.component("lkt-item-crud")===void 0&&t.component("lkt-item-crud",u),t.component("lkt-button")===void 0&&t.use(i.default),t.component("lkt-http-info")===void 0&&t.use(f.default),t.component("lkt-loader")===void 0&&t.use(l.default)}};return u});
+(function(e,p){typeof exports=="object"&&typeof module<"u"?module.exports=p(require("vue"),require("lkt-http-client"),require("lkt-data-state"),require("lkt-button"),require("lkt-http-info"),require("lkt-loader")):typeof define=="function"&&define.amd?define(["vue","lkt-http-client","lkt-data-state","lkt-button","lkt-http-info","lkt-loader"],p):(e=typeof globalThis<"u"?globalThis:e||self,e.LktItemCrud=p(e.Vue,e.LktHttpClient,e.LktDataState,e.LktButton,e.LktHttpInfo,e.LktLoader))})(this,function(e,p,N,R,I,O){"use strict";const D=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},E=D(R),T=D(I),x=D(O),M={class:"lkt-item-crud"},j={key:0,class:"lkt-item-crud_header"},$={class:"lkt-item-crud_header-title"},U={class:"lkt-item-crud_header-slot"},H={class:"lkt-item-crud-buttons"},J={key:1},A={key:1},F={key:1,class:"lkt-item-crud_content"},P={key:0,class:"lkt-grid-1"},z={name:"LktItemCrud",inheritAttrs:!1},G=e.defineComponent({...z,props:{modelValue:{type:Object,required:!1,default:()=>({})},title:{type:String,default:""},editModeText:{type:String,default:"Edition Mode"},saveText:{type:String,default:"Save"},dropText:{type:String,default:"Delete"},readResource:{type:String,required:!1},createResource:{type:String,required:!1},updateResource:{type:String,required:!1},dropResource:{type:String,required:!1},readData:{type:Object,required:!1,default:()=>({})},createData:{type:Object,required:!1,default:()=>({})},updateData:{type:Object,required:!1,default:()=>({})},dropData:{type:Object,required:!1,default:()=>({})},isCreate:{type:Boolean,default:!1},createConfirm:{type:String,default:""},updateConfirm:{type:String,default:""},dropConfirm:{type:String,default:""},createDisabled:{type:Boolean,default:!1},updateDisabled:{type:Boolean,default:!1},dropDisabled:{type:Boolean,default:!1},saveValidator:{type:Function,required:!1,default:()=>!0}},emits:["update:modelValue","read","create","update","drop","perms","error","modified-data"],setup(t,{expose:g,emit:K}){const a=t,B=e.useSlots(),n=K;let Q=[];const o=e.ref(!0),d=e.ref(a.modelValue),m=e.ref(Q),u=e.ref(!1),i=e.ref(!1),c=e.ref(!1),s=e.ref(200),v=e.ref(null),h=e.ref(null),k=e.ref(new N.DataState(d.value)),W=e.computed(()=>a.isCreate?a.createConfirm:a.updateConfirm),L=e.computed(()=>a.isCreate?a.createResource:a.updateResource),X=e.computed(()=>a.isCreate?{...a.createData,...JSON.parse(JSON.stringify(d.value))}:{...a.updateData,...JSON.parse(JSON.stringify(d.value))}),Y=e.computed(()=>a.isCreate?a.createDisabled:a.updateDisabled),C=e.computed(()=>!a.isCreate&&m.value.includes("update")),y=e.computed(()=>!a.isCreate&&m.value.includes("drop")),b=async()=>{o.value=!0,s.value=-1,c.value=!1;try{const l=await p.httpCall(a.readResource,a.readData);if(o.value=!1,s.value=l.httpStatus,!l.success){i.value=!1,s.value=l.httpStatus,n("error",l.httpStatus);return}i.value=!0,d.value=l.data,m.value=l.perms,k.value.increment(d.value).turnStoredIntoOriginal(),n("read",l)}catch{o.value=!1,i.value=!1,s.value=404,n("error",404);return}},Z=e.computed(()=>o.value?!1:a.title||!!B["post-title"]);e.watch(()=>a.modelValue,l=>{d.value=l,k.value.increment(l)},{deep:!0}),e.watch(d,l=>{n("update:modelValue",d.value),k.value.increment(l)},{deep:!0}),e.watch(m,()=>n("perms",m.value));const V=e.computed(()=>Y.value||!a.isCreate&&!C.value||typeof a.saveValidator=="function"&&!a.saveValidator(d.value)?!1:k.value.changed());e.watch(V,l=>n("modified-data",l)),a.readResource&&!a.isCreate?b():a.isCreate&&(i.value=!0,u.value=!0,o.value=!1);const ee=(l,r)=>{if(o.value=!1,s.value=r.httpStatus,!r.success){c.value=!0,n("error",r.httpStatus);return}c.value=!0,n("drop",r)},te=(l,r)=>{if(L.value){if(o.value=!1,s.value=r.httpStatus,!r.success){c.value=!0,n("error",r.httpStatus);return}c.value=!0}let S=a.isCreate?"create":"update";a.isCreate||k.value.turnStoredIntoOriginal(),r.autoReloadId&&(a.readData.id=r.autoReloadId,b()),n(S,r)},w=()=>{o.value=!0,s.value=-1},_=()=>{o.value=!1};return g({doDrop:()=>{h.value&&typeof h.value.click=="function"&&h.value.click()},doRefresh:b,doSave:()=>{v.value&&typeof v.value.click=="function"&&v.value.click()}}),(l,r)=>{const S=e.resolveComponent("lkt-button"),ae=e.resolveComponent("lkt-field-switch"),q=e.resolveComponent("lkt-http-info"),le=e.resolveComponent("lkt-loader");return e.openBlock(),e.createElementBlock("article",M,[Z.value?(e.openBlock(),e.createElementBlock("header",j,[e.createElementVNode("h1",$,e.toDisplayString(t.title),1),e.createElementVNode("div",U,[e.renderSlot(l.$slots,"post-title",{item:d.value,loading:o.value})])])):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("div",H,[t.isCreate?e.createCommentVNode("",!0):e.withDirectives((e.openBlock(),e.createBlock(S,{key:0,ref:f=>h.value=f,palette:"danger",disabled:t.dropDisabled||!y.value,"confirm-modal":t.dropConfirm,resource:t.dropResource,"resource-data":t.dropData,onLoading:w,onLoaded:_,onClick:ee},{default:e.withCtx(()=>[e.unref(B)["button-drop"]?e.renderSlot(l.$slots,"button-drop",{key:0,item:d.value,editMode:u.value,isCreate:t.isCreate,canUpdate:C.value,canDrop:y.value}):(e.openBlock(),e.createElementBlock("span",J,e.toDisplayString(t.dropText),1))]),_:3},8,["disabled","confirm-modal","resource","resource-data"])),[[e.vShow,!o.value&&u.value&&i.value]]),e.withDirectives(e.createVNode(S,{ref:f=>v.value=f,palette:"success",disabled:!V.value,"confirm-modal":W.value,resource:L.value,"resource-data":X.value,onLoading:w,onLoaded:_,onClick:te},{default:e.withCtx(()=>[e.unref(B)["button-save"]?e.renderSlot(l.$slots,"button-save",{key:0,item:d.value,editMode:u.value,isCreate:t.isCreate,canUpdate:C.value,canDrop:y.value}):(e.openBlock(),e.createElementBlock("span",A,e.toDisplayString(t.saveText),1))]),_:3},8,["disabled","confirm-modal","resource","resource-data"]),[[e.vShow,!o.value&&u.value&&i.value]]),e.withDirectives(e.createVNode(ae,{modelValue:u.value,"onUpdate:modelValue":r[0]||(r[0]=f=>u.value=f),label:t.editModeText},null,8,["modelValue","label"]),[[e.vShow,!o.value&&i.value&&!t.isCreate]])],512),[[e.vShow,i.value]]),o.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",F,[i.value?(e.openBlock(),e.createElementBlock("div",P,[c.value?(e.openBlock(),e.createBlock(q,{key:0,code:s.value,quick:"",palette:s.value===200?"success":"danger","can-close":"",onClose:r[1]||(r[1]=f=>c.value=!1)},null,8,["code","palette"])):e.createCommentVNode("",!0),e.renderSlot(l.$slots,"item",{item:d.value,loading:o.value,editMode:u.value,isCreate:t.isCreate,canUpdate:C.value,canDrop:y.value})])):(e.openBlock(),e.createBlock(q,{key:1,code:s.value},null,8,["code"]))])),o.value?(e.openBlock(),e.createBlock(le,{key:2})):e.createCommentVNode("",!0)])}}}),oe="";return{install:(t,g={})=>{t.component("lkt-item-crud")===void 0&&t.component("lkt-item-crud",G),t.component("lkt-button")===void 0&&t.use(E.default),t.component("lkt-http-info")===void 0&&t.use(T.default),t.component("lkt-loader")===void 0&&t.use(x.default)}}});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkt-item-crud",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "",
   "main": "src/index.ts",
   "module": "src/index.ts",

package/src/index.ts

@@ -9,7 +9,7 @@ import LktLoader from "lkt-loader";
 const LktItemCrud = {
     install: (app: App, options = {}) => {
         // Register plugin components
-        if (app.component('lkt-item-crud') === undefined) app.component('lkt-item-crud', LktItemCrud);
+        if (app.component('lkt-item-crud') === undefined) app.component('lkt-item-crud', itemCrud);
 
         // Register additional components
         if (app.component('lkt-button') === undefined)  app.use(LktButton);