lkt-item-crud 1.0.7 → 1.0.8

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

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

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

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

package/dist/types/lib-components/LktItemCrud.vue.d.ts

@@ -23,7 +23,7 @@ declare const _default: {
         };
         readResource: {
             type: StringConstructor;
-            required: true;
+            required: false;
         };
         createResource: {
             type: StringConstructor;
@@ -127,7 +127,7 @@ declare const _default: {
         };
         readResource: {
             type: StringConstructor;
-            required: true;
+            required: false;
         };
         createResource: {
             type: StringConstructor;
@@ -252,7 +252,7 @@ declare const _default: {
         };
         readResource: {
             type: StringConstructor;
-            required: true;
+            required: false;
         };
         createResource: {
             type: StringConstructor;
@@ -378,7 +378,7 @@ declare const _default: {
     };
     readResource: {
         type: StringConstructor;
-        required: true;
+        required: false;
     };
     createResource: {
         type: StringConstructor;

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "lkt-item-crud",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "",
   "main": "src/index.ts",
   "module": "src/index.ts",
   "files": [
-    "lkt-item-crud.css",
     "dist/*",
     "src/**/*.vue"
   ],

package/src/index.ts

@@ -2,10 +2,19 @@ import {App} from "vue";
 import {default as itemCrud} from "./lib-components/LktItemCrud.vue";
 
 import "./../lkt-item-crud.css";
+import LktButton from "lkt-button";
+import LktHttpInfo from "lkt-http-info";
+import LktLoader from "lkt-loader";
 
 const LktItemCrud = {
     install: (app: App, options = {}) => {
-        app.component('LktItemCrud', itemCrud);
+        // Register plugin components
+        if (app.component('lkt-item-crud') === undefined) app.component('lkt-item-crud', LktItemCrud);
+
+        // Register additional components
+        if (app.component('lkt-button') === undefined)  app.use(LktButton);
+        if (app.component('lkt-http-info') === undefined)  app.use(LktHttpInfo);
+        if (app.component('lkt-loader') === undefined)  app.use(LktLoader);
     },
 };
 export default LktItemCrud;

package/src/lib-components/LktItemCrud.vue

@@ -15,7 +15,7 @@ const props = defineProps({
     saveText: {type: String, default: 'Save'},
     dropText: {type: String, default: 'Delete'},
 
-    readResource: {type: String, required: true},
+    readResource: {type: String, required: false},
     createResource: {type: String, required: false},
     updateResource: {type: String, required: false},
     dropResource: {type: String, required: false},
@@ -155,14 +155,16 @@ const onDrop = ($event: PointerEvent, r: HTTPResponse) => {
 
     },
     onSave = ($event: PointerEvent, r: HTTPResponse) => {
-        isLoading.value = false;
-        httpStatus.value = r.httpStatus;
-        if (!r.success) {
+        if (saveResource.value) {
+            isLoading.value = false;
+            httpStatus.value = r.httpStatus;
+            if (!r.success) {
+                showStoreMessage.value = true;
+                emit('error', r.httpStatus);
+                return;
+            }
             showStoreMessage.value = true;
-            emit('error', r.httpStatus);
-            return;
         }
-        showStoreMessage.value = true;
         let emits: 'create' | 'update' = props.isCreate ? 'create' : 'update';
         if (!props.isCreate) {
             dataState.value.turnStoredIntoOriginal();

package/lkt-item-crud.css

@@ -1,27 +0,0 @@
-.lkt-item-crud {
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
-}
-
-.lkt-item-crud_content {
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
-}
-
-.lkt-item-crud-buttons {
-    position: sticky;
-    top: calc(-1 * var(--gap));
-    display: flex;
-    align-items: center;
-    gap: var(--gap);
-    transition: all linear .150s;
-    background: #ffffff;
-    z-index: 2;
-    padding: var(--gap) 0;
-}
-
-.lkt-item-crud-buttons > :last-child {
-    margin-left: auto;
-}