lkt-item-crud 1.1.4 → 1.1.6

package/dist/build.d.ts

@@ -1,4 +1,4 @@
-export { Be as default };
-declare namespace Be {
-    function install(a: any, U?: {}): void;
+export { _e as default };
+declare namespace _e {
+    function install(o: any, I?: {}): void;
 }

package/dist/build.js

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

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

@@ -132,6 +132,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     drop: (...args: any[]) => void;
     update: (...args: any[]) => void;
     "update:modelValue": (...args: any[]) => void;
+    "update:isCreate": (...args: any[]) => void;
     read: (...args: any[]) => void;
     create: (...args: any[]) => void;
     perms: (...args: any[]) => void;
@@ -266,6 +267,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     onDrop?: ((...args: any[]) => any) | undefined;
     onUpdate?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:isCreate"?: ((...args: any[]) => any) | undefined;
     onRead?: ((...args: any[]) => any) | undefined;
     onCreate?: ((...args: any[]) => any) | undefined;
     onPerms?: ((...args: any[]) => any) | undefined;
@@ -304,14 +306,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     "button-drop"?(_: {
         item: Record<string, any>;
         editMode: boolean;
-        isCreate: false;
+        isCreate: any;
         canUpdate: boolean;
         canDrop: boolean;
     }): any;
     "button-save"?(_: {
         item: Record<string, any>;
         editMode: boolean;
-        isCreate: boolean;
+        isCreate: any;
         canUpdate: boolean;
         canDrop: boolean;
     }): any;
@@ -319,7 +321,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         item: Record<string, any>;
         loading: false;
         editMode: boolean;
-        isCreate: boolean;
+        isCreate: any;
         canUpdate: boolean;
         canDrop: boolean;
     }): any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkt-item-crud",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "description": "",
   "type": "module",
   "module": "./dist/build.js",

package/src/lib-components/LktItemCrud.vue

@@ -49,7 +49,7 @@ const props = defineProps({
 
 const slots = useSlots();
 
-const emit = defineEmits(['update:modelValue', 'read', 'create', 'update', 'drop', 'perms', 'error', 'modified-data']);
+const emit = defineEmits(['update:modelValue', 'update:isCreate', 'read', 'create', 'update', 'drop', 'perms', 'error', 'modified-data']);
 
 let basePerms: string[] = [];
 
@@ -62,36 +62,37 @@ const isLoading = ref(true),
     httpStatus = ref(200),
     saveButton = ref(null),
     dropButton = ref(null),
-    dataState = ref(new DataState(item.value));
+    dataState = ref(new DataState(item.value)),
+    createMode = ref(createMode.value);
 
 const saveConfirm = computed(() => {
-        return props.isCreate
+        return createMode.value
             ? props.createConfirm
             : props.updateConfirm;
     }),
     confirmData = computed(() => {
-        return props.isCreate
+        return createMode.value
             ? props.createConfirmData
             : props.updateConfirmData;
     }),
     saveResource = computed(() => {
-        return props.isCreate
+        return createMode.value
             ? props.createResource
             : props.updateResource;
     }),
     saveData = computed(() => {
-        if (props.isCreate) {
+        if (createMode.value) {
             return {...props.createData, ...JSON.parse(JSON.stringify(item.value))};
         }
         return {...props.updateData, ...JSON.parse(JSON.stringify(item.value))};
     }),
     saveDisabled = computed(() => {
-        return props.isCreate
+        return createMode.value
             ? props.createDisabled
             : props.updateDisabled;
     }),
-    canUpdate = computed(() => !props.isCreate && perms.value.includes('update')),
-    canDrop = computed(() => !props.isCreate && perms.value.includes('drop'));
+    canUpdate = computed(() => !createMode.value && perms.value.includes('update')),
+    canDrop = computed(() => !createMode.value && perms.value.includes('drop'));
 
 const fetchItem = async () => {
     isLoading.value = true;
@@ -141,17 +142,18 @@ watch(perms, () => emit('perms', perms.value));
 
 const ableToSave = computed(() => {
     if (saveDisabled.value) return false;
-    if (!props.isCreate && !canUpdate.value) return false;
+    if (!createMode.value && !canUpdate.value) return false;
 
     if (typeof props.saveValidator === 'function' && !props.saveValidator(item.value)) return false;
 
     return dataState.value.changed();
 });
 watch(ableToSave, (v) => emit('modified-data', v));
+watch(createMode, (v) => emit('update:isCreate', v));
 
 // Fetch item
-if (props.readResource && !props.isCreate) fetchItem();
-else if (props.isCreate) {
+if (props.readResource && !createMode.value) fetchItem();
+else if (createMode.value) {
     httpSuccessRead.value = true;
     editMode.value = true;
     isLoading.value = false;
@@ -180,17 +182,21 @@ const onDrop = ($event: PointerEvent, r: HTTPResponse) => {
             }
             showStoreMessage.value = true;
         }
-        let emits: 'create' | 'update' = props.isCreate ? 'create' : 'update';
-        if (!props.isCreate) {
+        let emits: 'create' | 'update' = createMode.value ? 'create' : 'update';
+        if (!createMode.value) {
             dataState.value.turnStoredIntoOriginal();
         }
 
         if (r.autoReloadId) {
             props.readData['id'] = r.autoReloadId;
+            createMode.value = false;
             fetchItem();
         }
-        if (props.isCreate && typeof props.onCreate === 'function') props.onCreate();
-        if (!props.isCreate && typeof props.onUpdate === 'function') props.onUpdate();
+        if (createMode.value) {
+            if (typeof props.onCreate === 'function') props.onCreate();
+        } else {
+            if (typeof props.onUpdate === 'function') props.onUpdate();
+        }
         emit(emits, r)
     },
     onButtonLoading = () => {
@@ -224,7 +230,7 @@ const showDropButton = computed(() => {
     showSaveButton = computed(() => {
         if (isLoading.value) return false;
 
-        if (props.isCreate) return true;
+        if (createMode.value) return true;
 
         return !props.hiddenSave
             && editMode.value
@@ -232,7 +238,7 @@ const showDropButton = computed(() => {
     }),
     showSwitchButton = computed(() => {
         return !isLoading.value
-            && !props.isCreate
+            && !createMode.value
             && httpSuccessRead.value;
     }),
     showButtons = computed(() => {
@@ -252,7 +258,7 @@ const showDropButton = computed(() => {
             <lkt-button
                 :ref="(el:any) => dropButton = el"
                 v-show="showDropButton"
-                v-if="!isCreate"
+                v-if="!createMode"
                 palette="danger"
                 v-bind:disabled="dropDisabled || !canDrop"
                 v-bind:confirm-modal="dropConfirm"
@@ -264,7 +270,7 @@ const showDropButton = computed(() => {
                 v-on:click="onDrop">
                 <slot v-if="!!slots['button-drop']" name="button-drop" v-bind:item="item"
                       v-bind:edit-mode="editMode"
-                      v-bind:is-create="isCreate"
+                      v-bind:is-create="createMode"
                       v-bind:can-update="canUpdate"
                       v-bind:can-drop="canDrop"></slot>
                 <span v-else>{{ dropText }}</span>
@@ -284,7 +290,7 @@ const showDropButton = computed(() => {
                 v-on:click="onSave">
                 <slot v-if="!!slots['button-save']" name="button-save" v-bind:item="item"
                       v-bind:edit-mode="editMode"
-                      v-bind:is-create="isCreate"
+                      v-bind:is-create="createMode"
                       v-bind:can-update="canUpdate"
                       v-bind:can-drop="canDrop"></slot>
                 <span v-else>{{ saveText }}</span>
@@ -300,7 +306,7 @@ const showDropButton = computed(() => {
                                :palette="httpStatus === 200 ? 'success' : 'danger'" can-close
                                v-on:close="showStoreMessage = false"></lkt-http-info>
                 <slot name="item" v-bind:item="item" v-bind:loading="isLoading" v-bind:edit-mode="editMode"
-                      v-bind:is-create="isCreate"
+                      v-bind:is-create="createMode"
                       v-bind:can-update="canUpdate"
                       v-bind:can-drop="canDrop"></slot>
             </div>