lkt-item-crud 2.0.6 → 2.0.7

package/dist/build.d.ts

@@ -1,7 +1,7 @@
-declare function xe(B?: boolean): void;
-declare namespace et {
-    function install(B: any, G?: {}): void;
+declare function tt(B?: boolean): void;
+declare namespace at {
+    function install(B: any, J?: {}): void;
 }
-declare function at(B: any): void;
-declare function tt(B: any): void;
-export { xe as debugLktItemCrud, et as default, at as setItemCrudDefaultDropIcon, tt as setItemCrudDefaultSaveIcon };
+declare function ut(B: any): void;
+declare function ot(B: any): void;
+export { tt as debugLktItemCrud, at as default, ut as setItemCrudDefaultDropIcon, ot as setItemCrudDefaultSaveIcon };

package/dist/build.js

@@ -1,31 +1,31 @@
-import { defineComponent as me, ref as l, watch as h, useSlots as be, computed as y, resolveComponent as ie, createElementBlock as w, createCommentVNode as v, openBlock as s, withDirectives as Z, createBlock as T, unref as c, renderSlot as k, vShow as x, mergeProps as ee, withCtx as $, mergeDefaults as Ce, nextTick as ke, onMounted as De, resolveDynamicComponent as Se, normalizeProps as Ie, guardReactiveProps as Ue, createElementVNode as we, toDisplayString as Te, createSlots as se } from "vue";
-import { httpCall as Me } from "lkt-http-client";
-import { DataState as ve } from "lkt-data-state";
-import { ensureButtonConfig as E, LktSettings as n, ItemCrudMode as U, ItemCrudButtonNavVisibility as ne, TablePermission as de, ItemCrudView as pe, ItemCrudButtonNavPosition as ce, NotificationType as N, getDefaultValues as Re, ItemCrud as Ee, ToastPositionX as X } from "lkt-vue-kernel";
-import { closeModal as Ne } from "lkt-modal";
-import { __ as $e } from "lkt-i18n";
-import { openToast as _ } from "lkt-toast";
-const W = class W {
+import { defineComponent as ge, ref as l, watch as h, useSlots as ye, computed as y, resolveComponent as le, createElementBlock as T, createCommentVNode as p, openBlock as s, withDirectives as _, createBlock as M, unref as c, renderSlot as D, vShow as x, mergeProps as ee, withCtx as $, mergeDefaults as De, nextTick as Se, onMounted as Ue, resolveDynamicComponent as Ie, normalizeProps as we, guardReactiveProps as Te, createElementVNode as Me, toDisplayString as Re, createSlots as ve } from "vue";
+import { httpCall as Ee } from "lkt-http-client";
+import { DataState as ce } from "lkt-data-state";
+import { ensureButtonConfig as E, LktSettings as n, ItemCrudMode as w, ItemCrudButtonNavVisibility as re, TablePermission as ie, ItemCrudView as fe, ItemCrudButtonNavPosition as me, NotificationType as N, getDefaultValues as Ne, ItemCrud as $e, ToastPositionX as q } from "lkt-vue-kernel";
+import { closeModal as Ve } from "lkt-modal";
+import { __ as Le } from "lkt-i18n";
+import { openToast as z } from "lkt-toast";
+const G = class G {
 };
-W.debugEnabled = !1, W.defaultSaveIcon = "", W.defaultDropIcon = "";
-let q = W;
+G.debugEnabled = !1, G.defaultSaveIcon = "", G.defaultDropIcon = "";
+let F = G;
 const g = (...B) => {
-  q.debugEnabled && console.info("[LktItemCrud] ", ...B);
-}, xe = (B = !0) => {
-  q.debugEnabled = B;
-}, Ve = {
+  F.debugEnabled && console.info("[LktItemCrud] ", ...B);
+}, tt = (B = !0) => {
+  F.debugEnabled = B;
+}, Oe = {
   key: 0,
   class: "lkt-item-crud-buttons"
-}, Le = {
+}, Ae = {
   key: 0,
   class: "lkt-item-crud-buttons"
-}, Oe = {
+}, je = {
   key: 1,
   class: "lkt-item-crud-buttons"
-}, Ae = {
+}, Pe = {
   key: 5,
   class: "lkt-item-crud-buttons"
-}, fe = /* @__PURE__ */ me({
+}, be = /* @__PURE__ */ ge({
   __name: "ButtonNav",
   props: {
     item: { default: () => ({}) },
@@ -41,6 +41,7 @@ const g = (...B) => {
     canUpdate: { type: Boolean },
     canDrop: { type: Boolean },
     canSwitchEditMode: { type: Boolean },
+    perms: {},
     httpSuccessRead: { type: Boolean },
     buttonNavVisibility: {}
   },
@@ -51,164 +52,172 @@ const g = (...B) => {
     "save",
     "drop"
   ],
-  setup(B, { expose: G, emit: te }) {
-    const o = te, a = B, f = l(E(a.createButton, n.defaultCreateButton)), i = l(E(a.updateButton, n.defaultUpdateButton)), d = l(E(a.dropButton, n.defaultDropButton)), D = l(E(a.editModeButton, n.defaultEditModeButton));
+  setup(B, { expose: J, emit: te }) {
+    const o = te, a = B, f = l(E(a.createButton, n.defaultCreateButton)), r = l(E(a.updateButton, n.defaultUpdateButton)), d = l(E(a.dropButton, n.defaultDropButton)), C = l(E(a.editModeButton, n.defaultEditModeButton));
     h(() => a.createButton, (t) => {
       f.value = E(t, n.defaultCreateButton);
     }, { deep: !0 }), h(() => a.updateButton, (t) => {
-      i.value = E(t, n.defaultUpdateButton);
+      r.value = E(t, n.defaultUpdateButton);
     }, { deep: !0 }), h(() => a.dropButton, (t) => {
       d.value = E(t, n.defaultDropButton);
     }, { deep: !0 }), h(() => a.editModeButton, (t) => {
-      D.value = E(t, n.defaultEditModeButton);
+      C.value = E(t, n.defaultEditModeButton);
     }, { deep: !0 });
-    const b = be(), C = l(null), I = l(null), p = l(a.loading);
-    h(() => a.loading, (t) => p.value = t), h(p, (t) => o("update:loading", t));
-    const r = l(a.editing);
-    h(() => a.editing, (t) => r.value = t), h(r, (t) => o("update:editing", t));
-    const S = () => {
-      p.value = !0;
+    const b = ye(), k = l(null), I = l(null), v = l(a.loading);
+    h(() => a.loading, (t) => v.value = t), h(v, (t) => o("update:loading", t));
+    const i = l(a.editing);
+    h(() => a.editing, (t) => i.value = t), h(i, (t) => o("update:editing", t));
+    const U = () => {
+      v.value = !0;
     }, V = () => {
-      p.value = !1;
-    }, M = (t, m) => {
+      v.value = !1;
+    }, R = (t, m) => {
       typeof t > "u" || o("create", t, m);
-    }, z = (t, m) => {
+    }, H = (t, m) => {
       typeof t > "u" || o("save", t, m);
-    }, J = (t, m) => {
+    }, Q = (t, m) => {
       typeof t > "u" || o("drop", t, m);
     };
-    G({
+    J({
       doSave: () => {
-        C.value && typeof C.value.click == "function" && C.value.click();
+        k.value && typeof k.value.click == "function" && k.value.click();
       },
       doDrop: () => {
         I.value && typeof I.value.click == "function" && I.value.click();
       }
     });
-    const A = y(() => {
+    const O = y(() => {
       var t, m;
-      return a.mode !== U.Create && !a.canUpdate || !a.dataChanged ? !1 : typeof ((t = i.value) == null ? void 0 : t.disabled) == "function" ? !i.value.disabled(a.item) : typeof ((m = i.value) == null ? void 0 : m.disabled) == "boolean" ? !i.value.disabled : !0;
-    }), F = y(() => {
+      return a.mode !== w.Update || !a.canUpdate || !a.dataChanged ? !1 : typeof ((t = r.value) == null ? void 0 : t.disabled) == "function" ? !r.value.disabled(a.item) : typeof ((m = r.value) == null ? void 0 : m.disabled) == "boolean" ? !r.value.disabled : !0;
+    }), j = y(() => {
       var t, m;
-      return a.mode !== U.Create || !a.dataChanged ? !1 : typeof ((t = f.value) == null ? void 0 : t.disabled) == "function" ? !f.value.disabled(a.item) : typeof ((m = f.value) == null ? void 0 : m.disabled) == "boolean" ? !f.value.disabled : !0;
-    }), O = y(() => {
+      return a.mode !== w.Create || !a.dataChanged ? !1 : typeof ((t = f.value) == null ? void 0 : t.disabled) == "function" ? !f.value.disabled(a.item) : typeof ((m = f.value) == null ? void 0 : m.disabled) == "boolean" ? !f.value.disabled : !0;
+    }), A = y(() => {
       var t, m;
       return a.canDrop ? typeof ((t = d.value) == null ? void 0 : t.disabled) == "function" ? !d.value.disabled(a.item) : typeof ((m = d.value) == null ? void 0 : m.disabled) == "boolean" ? !d.value.disabled : !0 : !1;
-    }), j = y(() => !a.canDrop || a.dropButton === !1 ? !1 : !a.canUpdate && a.canDrop ? !0 : !p.value && a.editing && a.httpSuccessRead), P = y(() => a.mode === U.Create && a.createButton === !1 || a.mode === U.Update && a.updateButton === !1 ? !1 : a.dataChanged ? !0 : p.value ? !1 : a.mode === U.Create ? !0 : a.buttonNavVisibility === ne.Never ? !1 : a.editing && a.httpSuccessRead), H = y(() => a.editModeButton === !1 || !a.canSwitchEditMode || !a.canUpdate && !a.canDrop || !a.canUpdate && a.canDrop ? !1 : !p.value && a.mode !== U.Create && a.httpSuccessRead), Y = y(() => a.buttonNavVisibility === ne.Always && (A.value || F.value || O.value) || b["prev-buttons-ever"] ? !0 : a.buttonNavVisibility === ne.Never ? !1 : P.value || j.value || H.value);
+    }), P = y(() => !a.canDrop || a.dropButton === !1 ? !1 : !a.canUpdate && a.canDrop ? !0 : !v.value && a.editing && a.httpSuccessRead), X = y(() => a.mode === w.Create && a.createButton === !1 || a.mode === w.Update && a.updateButton === !1 ? !1 : a.dataChanged ? O.value || j.value : v.value ? !1 : a.mode === w.Create ? !0 : a.buttonNavVisibility === re.Never ? !1 : a.editing && a.httpSuccessRead), K = y(() => a.editModeButton === !1 || !a.canSwitchEditMode || !a.canUpdate && !a.canDrop || !a.canUpdate && a.canDrop ? !1 : !v.value && a.mode !== w.Create && a.httpSuccessRead), Z = y(() => a.buttonNavVisibility === re.Always && (O.value || j.value || A.value) || b["prev-buttons-ever"] ? !0 : a.buttonNavVisibility === re.Never ? !1 : X.value || P.value || K.value);
     return (t, m) => {
-      const K = ie("lkt-button");
-      return Y.value ? (s(), w("div", Ve, [
-        c(b)["prev-buttons-ever"] ? Z((s(), w("div", Le, [
-          k(t.$slots, "prev-buttons-ever")
+      const W = le("lkt-button");
+      return Z.value ? (s(), T("div", Oe, [
+        c(b)["prev-buttons-ever"] ? _((s(), T("div", Ae, [
+          D(t.$slots, "prev-buttons-ever", {
+            canUpdate: t.canUpdate,
+            canDrop: t.canDrop,
+            perms: t.perms
+          })
         ], 512)), [
-          [x, !p.value]
-        ]) : v("", !0),
-        c(b)["prev-buttons"] ? Z((s(), w("div", Oe, [
-          k(t.$slots, "prev-buttons")
+          [x, !v.value]
+        ]) : p("", !0),
+        c(b)["prev-buttons"] ? _((s(), T("div", je, [
+          D(t.$slots, "prev-buttons", {
+            canUpdate: t.canUpdate,
+            canDrop: t.canDrop,
+            perms: t.perms
+          })
         ], 512)), [
-          [x, r.value && !p.value]
-        ]) : v("", !0),
-        t.mode === c(U).Update && P.value ? (s(), T(K, ee({
+          [x, i.value && !v.value]
+        ]) : p("", !0),
+        t.mode === c(w).Update && X.value ? (s(), M(W, ee({
           key: 2,
           ref_key: "saveButtonRef",
-          ref: C
-        }, i.value, {
-          disabled: !A.value,
-          onLoading: S,
+          ref: k
+        }, r.value, {
+          disabled: !O.value,
+          onLoading: U,
           onLoaded: V,
-          onClick: z
+          onClick: H
         }), {
           default: $(() => [
-            c(b)["button-save"] ? k(t.$slots, "button-save", {
+            c(b)["button-save"] ? D(t.$slots, "button-save", {
               key: 0,
               item: t.item,
-              editMode: r.value,
+              editMode: i.value,
               isCreate: !1,
               canUpdate: t.canUpdate,
               canDrop: t.canDrop
-            }) : v("", !0)
+            }) : p("", !0)
           ]),
           _: 3
-        }, 16, ["disabled"])) : t.mode === c(U).Create && P.value ? (s(), T(K, ee({
+        }, 16, ["disabled"])) : t.mode === c(w).Create && X.value ? (s(), M(W, ee({
           key: 3,
           ref_key: "saveButtonRef",
-          ref: C
+          ref: k
         }, f.value, {
-          disabled: !F.value,
-          onLoading: S,
+          disabled: !j.value,
+          onLoading: U,
           onLoaded: V,
-          onClick: M
+          onClick: R
         }), {
           default: $(() => [
-            c(b)["button-save"] ? k(t.$slots, "button-save", {
+            c(b)["button-save"] ? D(t.$slots, "button-save", {
               key: 0,
               item: t.item,
-              editMode: r.value,
+              editMode: i.value,
               isCreate: !0,
               canUpdate: t.canUpdate,
               canDrop: t.canDrop
-            }) : v("", !0)
+            }) : p("", !0)
           ]),
           _: 3
-        }, 16, ["disabled"])) : v("", !0),
-        t.mode !== c(U).Create ? Z((s(), T(K, ee({
+        }, 16, ["disabled"])) : p("", !0),
+        t.mode !== c(w).Create ? _((s(), M(W, ee({
           key: 4,
           ref_key: "dropButtonRef",
           ref: I
         }, d.value, {
-          disabled: !O.value,
-          onLoading: S,
+          disabled: !A.value,
+          onLoading: U,
           onLoaded: V,
-          onClick: J
+          onClick: Q
         }), {
           default: $(() => [
-            c(b)["button-drop"] ? k(t.$slots, "button-drop", {
+            c(b)["button-drop"] ? D(t.$slots, "button-drop", {
               key: 0,
               item: t.item,
-              editMode: r.value,
+              editMode: i.value,
               isCreate: !1,
               canUpdate: t.canUpdate,
               canDrop: t.canDrop
-            }) : v("", !0)
+            }) : p("", !0)
           ]),
           _: 3
         }, 16, ["disabled"])), [
-          [x, j.value]
-        ]) : v("", !0),
-        c(b).buttons ? Z((s(), w("div", Ae, [
-          k(t.$slots, "buttons")
+          [x, P.value]
+        ]) : p("", !0),
+        c(b).buttons ? _((s(), T("div", Pe, [
+          D(t.$slots, "buttons")
         ], 512)), [
-          [x, r.value && !p.value]
-        ]) : v("", !0),
-        H.value ? (s(), T(K, ee({ key: 6 }, D.value, {
-          checked: r.value,
-          "onUpdate:checked": m[0] || (m[0] = (ae) => r.value = ae),
+          [x, i.value && !v.value]
+        ]) : p("", !0),
+        K.value ? (s(), M(W, ee({ key: 6 }, C.value, {
+          checked: i.value,
+          "onUpdate:checked": m[0] || (m[0] = (ae) => i.value = ae),
           class: "lkt-item-crud--switch-mode-button"
-        }), null, 16, ["checked"])) : v("", !0)
-      ])) : v("", !0);
+        }), null, 16, ["checked"])) : p("", !0)
+      ])) : p("", !0);
     };
   }
-}), je = { class: "lkt-item-crud" }, Pe = {
+}), Xe = { class: "lkt-item-crud" }, qe = {
   key: 0,
   class: "lkt-item-crud_header"
-}, Xe = {
+}, ze = {
   key: 0,
   class: "lkt-item-crud_header-slot"
-}, _e = {
+}, Fe = {
   key: 1,
   class: "lkt-item-crud_header-title"
-}, qe = {
+}, He = {
   key: 2,
   class: "lkt-item-crud_header-slot"
-}, ze = {
+}, Ke = {
   key: 2,
   class: "lkt-item-crud_content"
-}, Fe = {
+}, We = {
   key: 0,
   class: "lkt-grid-1"
-}, He = /* @__PURE__ */ me({
+}, Ge = /* @__PURE__ */ ge({
   __name: "LktItemCrud",
-  props: /* @__PURE__ */ Ce({
+  props: /* @__PURE__ */ De({
     modelValue: {},
     editing: { type: Boolean },
     perms: {},
@@ -228,7 +237,7 @@ const g = (...B) => {
     title: {},
     beforeEmitUpdate: { type: Function },
     notificationType: {}
-  }, Re(Ee)),
+  }, Ne($e)),
   emits: [
     "update:modelValue",
     "update:editing",
@@ -241,154 +250,154 @@ const g = (...B) => {
     "error",
     "modified-data"
   ],
-  setup(B, { expose: G, emit: te }) {
-    const o = B, a = be(), f = te, i = l(!0), d = l(o.modelValue), D = l(o.perms), b = l(o.editing), C = l(!1), I = l(!1), p = l(200), r = l(new ve(d.value, o.dataStateConfig)), S = l(!1), V = l(new ve(o.readData)), M = l(o.mode === U.Create), z = l(!1), J = l(!1), L = l(null), Q = y(() => !M.value && Array.isArray(D.value) && D.value.includes(de.Update)), A = y(() => !M.value && Array.isArray(D.value) && D.value.includes(de.Drop)), F = y(() => !M.value && Array.isArray(D.value) && D.value.includes(de.SwitchEditMode)), O = async () => {
-      g("fetchItem"), i.value = !0, p.value = -1, I.value = !1;
+  setup(B, { expose: J, emit: te }) {
+    const o = B, a = ye(), f = te, r = l(!0), d = l(o.modelValue), C = l(o.perms), b = l(o.editing), k = l(!1), I = l(!1), v = l(200), i = l(new ce(d.value, o.dataStateConfig)), U = l(!1), V = l(new ce(o.readData)), R = l(o.mode === w.Create), H = l(!1), Q = l(!1), L = l(null), Y = y(() => !R.value && Array.isArray(C.value) && C.value.includes(ie.Update)), O = y(() => !R.value && Array.isArray(C.value) && C.value.includes(ie.Drop)), j = y(() => !R.value && Array.isArray(C.value) && C.value.includes(ie.SwitchEditMode)), A = async () => {
+      g("fetchItem"), r.value = !0, v.value = -1, I.value = !1;
       try {
-        const e = await Me(o.readResource, o.readData);
-        if (g("fetchItem -> response", e), i.value = !1, p.value = e.httpStatus, !e.success) {
-          C.value = !1, p.value = e.httpStatus, f("error", e.httpStatus);
+        const e = await Ee(o.readResource, o.readData);
+        if (g("fetchItem -> response", e), r.value = !1, v.value = e.httpStatus, !e.success) {
+          k.value = !1, v.value = e.httpStatus, f("error", e.httpStatus);
           return;
         }
-        C.value = !0, d.value = e.data, D.value = e.perms, r.value.increment(d.value).turnStoredIntoOriginal(), S.value = r.value.changed(), V.value.turnStoredIntoOriginal(), f("read", e);
+        k.value = !0, d.value = e.data, C.value = e.perms, i.value.increment(d.value).turnStoredIntoOriginal(), U.value = i.value.changed(), V.value.turnStoredIntoOriginal(), f("read", e);
       } catch {
-        i.value = !1, C.value = !1, p.value = 404, f("error", 404);
+        r.value = !1, k.value = !1, v.value = 404, f("error", 404);
         return;
       }
     };
     h(() => o.modelValue, (e) => {
-      d.value = e, r.value.increment(e);
+      d.value = e, i.value.increment(e);
     }, { deep: !0 }), h(d, (e) => {
-      if (z.value = !0, g("item updated ->", d.value), typeof o.beforeEmitUpdate == "function") {
+      if (H.value = !0, g("item updated ->", d.value), typeof o.beforeEmitUpdate == "function") {
         g("item updated -> has beforeEmitUpdate");
         let u = o.beforeEmitUpdate(d.value);
         g("item updated -> override with: ", u), typeof u == "object" && (d.value = u);
       }
-      f("update:modelValue", d.value), g("item updated -> update dataState"), r.value.increment(e), S.value = r.value.changed(), ke(() => z.value = !1);
-    }, { deep: !0 }), h(D, () => f("perms", D.value)), h(S, (e) => {
+      f("update:modelValue", d.value), g("item updated -> update dataState"), i.value.increment(e), U.value = i.value.changed(), Se(() => H.value = !1);
+    }, { deep: !0 }), h(C, () => f("perms", C.value)), h(U, (e) => {
       f("modified-data", e);
     }), h(() => o.readData, (e) => {
-      V.value.increment(e), V.value.changed() && O();
+      V.value.increment(e), V.value.changed() && A();
     }), h(() => o.editing, (e) => {
       g("editing updated -> updating editMode", e), b.value = e;
     }), h(b, (e) => {
       g("editMode updated -> emit update", e), f("update:editing", e);
-    }), De(() => {
-      o.readResource && !M.value ? O() : (M.value, C.value = !0, b.value = !0, i.value = !1, r.value.increment(d.value).turnStoredIntoOriginal(), S.value = r.value.changed());
+    }), Ue(() => {
+      o.readResource && !R.value ? A() : (R.value, k.value = !0, b.value = !0, r.value = !1, i.value.increment(d.value).turnStoredIntoOriginal(), U.value = i.value.changed());
     });
-    const j = (e, u) => {
+    const P = (e, u) => {
       if (u) {
-        if (i.value = !1, typeof e < "u" && (p.value = e.httpStatus, !e.success))
+        if (r.value = !1, typeof e < "u" && (v.value = e.httpStatus, !e.success))
           return I.value = !0, f("error", e.httpStatus), !1;
         I.value = !0;
       }
       return !0;
-    }, P = (e) => {
-      !ue.value && e.autoReloadId && (g("doAutoReloadId -> autoReloadId detected: ", e.autoReloadId), o.readData.id = e.autoReloadId, g("doAutoReloadId -> turning off create mode"), M.value = !1, O());
-    }, H = (e, u) => {
-      if (g("onCreate"), !j(u, o.createButton.resource)) {
-        o.notificationType === N.Toast && _({
+    }, X = (e) => {
+      !ue.value && e.autoReloadId && (g("doAutoReloadId -> autoReloadId detected: ", e.autoReloadId), o.readData.id = e.autoReloadId, g("doAutoReloadId -> turning off create mode"), R.value = !1, A());
+    }, K = (e, u) => {
+      if (g("onCreate"), !P(u, o.createButton.resource)) {
+        o.notificationType === N.Toast && z({
           text: n.defaultCreateErrorText,
           details: n.defaultCreateErrorDetails,
           icon: n.defaultCreateErrorIcon,
-          positionX: X.Right
+          positionX: q.Right
         });
         return;
       }
-      J.value = !0, g("onCreate -> turn stored data into original"), r.value.increment(d.value).turnStoredIntoOriginal(), o.notificationType === N.Toast && _({
+      Q.value = !0, g("onCreate -> turn stored data into original"), i.value.increment(d.value).turnStoredIntoOriginal(), o.notificationType === N.Toast && z({
         text: n.defaultCreateSuccessText,
         details: n.defaultCreateSuccessDetails,
         icon: n.defaultCreateSuccessIcon,
-        positionX: X.Right
-      }), P(u), f("create", u);
-    }, Y = (e, u) => {
-      if (g("onUpdate"), !j(u, o.updateButton.resource)) {
-        o.notificationType === N.Toast && _({
+        positionX: q.Right
+      }), X(u), f("create", u);
+    }, Z = (e, u) => {
+      if (g("onUpdate"), !P(u, o.updateButton.resource)) {
+        o.notificationType === N.Toast && z({
           text: n.defaultUpdateErrorText,
           details: n.defaultUpdateErrorDetails,
           icon: n.defaultUpdateErrorIcon,
-          positionX: X.Right
+          positionX: q.Right
         });
         return;
       }
-      g("onUpdate -> turn stored data into original"), r.value.turnStoredIntoOriginal(), o.notificationType === N.Toast && _({
+      g("onUpdate -> turn stored data into original"), i.value.turnStoredIntoOriginal(), o.notificationType === N.Toast && z({
         text: n.defaultUpdateSuccessText,
         details: n.defaultUpdateSuccessDetails,
         icon: n.defaultUpdateSuccessIcon,
-        positionX: X.Right
-      }), P(u), f("update", u);
+        positionX: q.Right
+      }), X(u), f("update", u);
     }, t = (e, u) => {
-      if (g("onDrop"), !j(u, o.dropButton.resource)) {
-        o.notificationType === N.Toast && _({
+      if (g("onDrop"), !P(u, o.dropButton.resource)) {
+        o.notificationType === N.Toast && z({
           text: n.defaultDropErrorText,
           details: n.defaultDropErrorDetails,
           icon: n.defaultDropErrorIcon,
-          positionX: X.Right
+          positionX: q.Right
         });
         return;
       }
-      o.notificationType === N.Toast && _({
+      o.notificationType === N.Toast && z({
         text: n.defaultDropSuccessText,
         details: n.defaultDropSuccessDetails,
         icon: n.defaultDropSuccessIcon,
-        positionX: X.Right
-      }), f("drop", u), o.view === pe.Modal && (g("onDrop -> close modal"), Ne(o.modalConfig.modalName, o.modalConfig.modalKey));
+        positionX: q.Right
+      }), f("drop", u), o.view === fe.Modal && (g("onDrop -> close modal"), Ve(o.modalConfig.modalName, o.modalConfig.modalKey));
     };
-    G({
+    J({
       doDrop: () => {
         L.value && L.value.doDrop();
       },
-      doRefresh: O,
+      doRefresh: A,
       doSave: () => {
         L.value && L.value.doSave();
       },
-      hasModifiedData: () => r.value.changed()
+      hasModifiedData: () => i.value.changed()
     });
     const ae = y(() => {
       var e;
-      return r.value.changed() ? (e = o.modalConfig) == null ? void 0 : e.closeConfirm : "";
-    }), ge = (e) => {
+      return i.value.changed() ? (e = o.modalConfig) == null ? void 0 : e.closeConfirm : "";
+    }), he = (e) => {
       var u;
       if (typeof ((u = o.modalConfig) == null ? void 0 : u.beforeClose) == "function")
         return o.modalConfig.beforeClose({
           ...e,
-          itemCreated: J.value
+          itemCreated: Q.value
         });
-    }, oe = y(() => o.title.startsWith("__:") ? String($e(o.title.substring(3))) : o.title), ye = y(() => i.value ? !1 : oe.value.length > 0 || !!a["post-title"]), ue = y(() => o.view === pe.Modal), re = y(() => ue.value ? "lkt-modal" : "section"), he = y(() => re.value === "lkt-modal" ? {
+    }, oe = y(() => o.title.startsWith("__:") ? String(Le(o.title.substring(3))) : o.title), Be = y(() => r.value ? !1 : oe.value.length > 0 || !!a["post-title"]), ue = y(() => o.view === fe.Modal), se = y(() => ue.value ? "lkt-modal" : "section"), ke = y(() => se.value === "lkt-modal" ? {
       title: o.title,
       item: d.value,
       ...o.modalConfig,
-      beforeClose: ge,
+      beforeClose: he,
       closeConfirm: ae.value
     } : {});
     return (e, u) => {
-      const le = ie("lkt-http-info"), Be = ie("lkt-loader");
-      return s(), T(Se(re.value), Ie(Ue(he.value)), {
+      const pe = le("lkt-http-info"), Ce = le("lkt-loader");
+      return s(), M(Ie(se.value), we(Te(ke.value)), {
         default: $(() => [
-          we("article", je, [
-            !ue.value && ye.value ? (s(), w("header", Pe, [
-              c(a)["pre-title"] ? (s(), w("div", Xe, [
-                k(e.$slots, "pre-title", {
+          Me("article", Xe, [
+            !ue.value && Be.value ? (s(), T("header", qe, [
+              c(a)["pre-title"] ? (s(), T("div", ze, [
+                D(e.$slots, "pre-title", {
                   item: d.value,
-                  loading: i.value
+                  loading: r.value
                 })
-              ])) : v("", !0),
-              oe.value.length > 0 ? (s(), w("h1", _e, Te(oe.value), 1)) : v("", !0),
-              c(a)["post-title"] ? (s(), w("div", qe, [
-                k(e.$slots, "post-title", {
+              ])) : p("", !0),
+              oe.value.length > 0 ? (s(), T("h1", Fe, Re(oe.value), 1)) : p("", !0),
+              c(a)["post-title"] ? (s(), T("div", He, [
+                D(e.$slots, "post-title", {
                   item: d.value,
-                  loading: i.value
+                  loading: r.value
                 })
-              ])) : v("", !0)
-            ])) : v("", !0),
-            e.buttonNavPosition === c(ce).Top ? (s(), T(fe, {
+              ])) : p("", !0)
+            ])) : p("", !0),
+            e.buttonNavPosition === c(me).Top ? (s(), M(be, {
               key: 1,
               ref_key: "buttonNav",
               ref: L,
-              loading: i.value,
-              "onUpdate:loading": u[0] || (u[0] = (R) => i.value = R),
+              loading: r.value,
+              "onUpdate:loading": u[0] || (u[0] = (S) => r.value = S),
               editing: b.value,
-              "onUpdate:editing": u[1] || (u[1] = (R) => b.value = R),
+              "onUpdate:editing": u[1] || (u[1] = (S) => b.value = S),
               item: d.value,
               mode: e.mode,
               view: e.view,
@@ -397,63 +406,72 @@ const g = (...B) => {
               "update-button": e.updateButton,
               "drop-button": e.dropButton,
               "edit-mode-button": e.editModeButton,
-              "data-changed": S.value,
-              "http-success-read": C.value,
-              "can-update": Q.value,
-              "can-drop": A.value,
-              "can-switch-edit-mode": F.value,
-              onCreate: H,
-              onSave: Y,
+              "data-changed": U.value,
+              "http-success-read": k.value,
+              "can-update": Y.value,
+              "can-drop": O.value,
+              "can-switch-edit-mode": j.value,
+              perms: C.value,
+              onCreate: K,
+              onSave: Z,
               onDrop: t
-            }, se({ _: 2 }, [
+            }, ve({ _: 2 }, [
               c(a)["prev-buttons-ever"] ? {
                 name: "prev-buttons-ever",
-                fn: $(() => [
-                  k(e.$slots, "prev-buttons-ever")
+                fn: $(({ canUpdate: S, canDrop: ne, perms: de }) => [
+                  D(e.$slots, "prev-buttons-ever", {
+                    canUpdate: S,
+                    canDrop: ne,
+                    perms: de
+                  })
                 ]),
                 key: "0"
               } : void 0,
               c(a)["prev-buttons"] ? {
                 name: "prev-buttons-ever",
-                fn: $(() => [
-                  k(e.$slots, "prev-buttons")
+                fn: $(({ canUpdate: S, canDrop: ne, perms: de }) => [
+                  D(e.$slots, "prev-buttons", {
+                    canUpdate: S,
+                    canDrop: ne,
+                    perms: de
+                  })
                 ]),
                 key: "1"
               } : void 0
-            ]), 1032, ["loading", "editing", "item", "mode", "view", "button-nav-visibility", "create-button", "update-button", "drop-button", "edit-mode-button", "data-changed", "http-success-read", "can-update", "can-drop", "can-switch-edit-mode"])) : v("", !0),
-            i.value ? v("", !0) : (s(), w("div", ze, [
-              C.value ? (s(), w("div", Fe, [
-                I.value && e.notificationType === c(N).Inline ? (s(), T(le, {
+            ]), 1032, ["loading", "editing", "item", "mode", "view", "button-nav-visibility", "create-button", "update-button", "drop-button", "edit-mode-button", "data-changed", "http-success-read", "can-update", "can-drop", "can-switch-edit-mode", "perms"])) : p("", !0),
+            r.value ? p("", !0) : (s(), T("div", Ke, [
+              k.value ? (s(), T("div", We, [
+                I.value && e.notificationType === c(N).Inline ? (s(), M(pe, {
                   key: 0,
-                  code: p.value,
-                  palette: p.value === 200 ? "success" : "danger",
+                  code: v.value,
+                  palette: v.value === 200 ? "success" : "danger",
                   quick: "",
                   "can-close": "",
-                  onClose: u[2] || (u[2] = (R) => I.value = !1)
-                }, null, 8, ["code", "palette"])) : v("", !0),
-                k(e.$slots, "item", {
+                  onClose: u[2] || (u[2] = (S) => I.value = !1)
+                }, null, 8, ["code", "palette"])) : p("", !0),
+                D(e.$slots, "item", {
                   item: d.value,
-                  loading: i.value,
+                  loading: r.value,
                   editMode: b.value,
-                  isCreate: M.value,
-                  canUpdate: Q.value,
-                  canDrop: A.value,
-                  itemBeingEdited: z.value
+                  isCreate: R.value,
+                  canUpdate: Y.value,
+                  canDrop: O.value,
+                  itemBeingEdited: H.value
                 })
-              ])) : e.notificationType === c(N).Inline ? (s(), T(le, {
+              ])) : e.notificationType === c(N).Inline ? (s(), M(pe, {
                 key: 1,
-                code: p.value
-              }, null, 8, ["code"])) : v("", !0)
+                code: v.value
+              }, null, 8, ["code"])) : p("", !0)
             ])),
-            i.value ? (s(), T(Be, { key: 3 })) : v("", !0),
-            e.buttonNavPosition === c(ce).Bottom ? (s(), T(fe, {
+            r.value ? (s(), M(Ce, { key: 3 })) : p("", !0),
+            e.buttonNavPosition === c(me).Bottom ? (s(), M(be, {
               key: 4,
               ref_key: "buttonNav",
               ref: L,
-              loading: i.value,
-              "onUpdate:loading": u[3] || (u[3] = (R) => i.value = R),
+              loading: r.value,
+              "onUpdate:loading": u[3] || (u[3] = (S) => r.value = S),
               editing: b.value,
-              "onUpdate:editing": u[4] || (u[4] = (R) => b.value = R),
+              "onUpdate:editing": u[4] || (u[4] = (S) => b.value = S),
               item: d.value,
               mode: e.mode,
               view: e.view,
@@ -462,48 +480,48 @@ const g = (...B) => {
               "update-button": e.updateButton,
               "drop-button": e.dropButton,
               "edit-mode-button": e.editModeButton,
-              "data-changed": S.value,
-              "http-success-read": C.value,
-              "can-update": Q.value,
-              "can-drop": A.value,
-              "can-switch-edit-mode": F.value,
-              onCreate: H,
-              onSave: Y,
+              "data-changed": U.value,
+              "http-success-read": k.value,
+              "can-update": Y.value,
+              "can-drop": O.value,
+              "can-switch-edit-mode": j.value,
+              onCreate: K,
+              onSave: Z,
               onDrop: t
-            }, se({ _: 2 }, [
+            }, ve({ _: 2 }, [
               c(a)["prev-buttons-ever"] ? {
                 name: "prev-buttons-ever",
                 fn: $(() => [
-                  k(e.$slots, "prev-buttons-ever")
+                  D(e.$slots, "prev-buttons-ever")
                 ]),
                 key: "0"
               } : void 0,
               c(a)["prev-buttons"] ? {
                 name: "prev-buttons-ever",
                 fn: $(() => [
-                  k(e.$slots, "prev-buttons")
+                  D(e.$slots, "prev-buttons")
                 ]),
                 key: "1"
               } : void 0
-            ]), 1032, ["loading", "editing", "item", "mode", "view", "button-nav-visibility", "create-button", "update-button", "drop-button", "edit-mode-button", "data-changed", "http-success-read", "can-update", "can-drop", "can-switch-edit-mode"])) : v("", !0)
+            ]), 1032, ["loading", "editing", "item", "mode", "view", "button-nav-visibility", "create-button", "update-button", "drop-button", "edit-mode-button", "data-changed", "http-success-read", "can-update", "can-drop", "can-switch-edit-mode"])) : p("", !0)
           ])
         ]),
         _: 3
       }, 16);
     };
   }
-}), et = {
-  install: (B, G = {}) => {
-    B.component("lkt-item-crud") === void 0 && B.component("lkt-item-crud", He);
+}), at = {
+  install: (B, J = {}) => {
+    B.component("lkt-item-crud") === void 0 && B.component("lkt-item-crud", Ge);
   }
-}, tt = (B) => {
-  q.defaultSaveIcon = B;
-}, at = (B) => {
-  q.defaultDropIcon = B;
+}, ot = (B) => {
+  F.defaultSaveIcon = B;
+}, ut = (B) => {
+  F.defaultDropIcon = B;
 };
 export {
-  xe as debugLktItemCrud,
-  et as default,
-  at as setItemCrudDefaultDropIcon,
-  tt as setItemCrudDefaultSaveIcon
+  tt as debugLktItemCrud,
+  at as default,
+  ut as setItemCrudDefaultDropIcon,
+  ot as setItemCrudDefaultSaveIcon
 };

package/dist/components/ButtonNav.vue.d.ts

@@ -15,6 +15,7 @@ type __VLS_Props = {
     canUpdate?: boolean;
     canDrop?: boolean;
     canSwitchEditMode?: boolean;
+    perms?: Array<string>;
     httpSuccessRead?: boolean;
     buttonNavVisibility: ItemCrudButtonNavVisibility;
 };
@@ -1651,7 +1652,15 @@ declare const isEditing: import("vue").Ref<boolean, boolean>;
 declare const onButtonLoading: () => void, onButtonLoaded: () => void, onCreate: ($event: Event | undefined, r: HTTPResponse) => void, onSave: ($event: Event | undefined, r: HTTPResponse) => void, onDrop: ($event: Event | undefined, r: HTTPResponse) => void;
 declare const ableToUpdate: import("vue").ComputedRef<boolean>, ableToCreate: import("vue").ComputedRef<boolean>, ableToDrop: import("vue").ComputedRef<boolean>, showDropButton: import("vue").ComputedRef<boolean>, showSaveButton: import("vue").ComputedRef<boolean>, showSwitchButton: import("vue").ComputedRef<boolean>, showButtons: import("vue").ComputedRef<boolean>;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_17: {
+declare var __VLS_1: {
+    canUpdate: boolean | undefined;
+    canDrop: boolean | undefined;
+    perms: string[] | undefined;
+}, __VLS_3: {
+    canUpdate: boolean | undefined;
+    canDrop: boolean | undefined;
+    perms: string[] | undefined;
+}, __VLS_17: {
     item: LktObject;
     editMode: boolean;
     isCreate: boolean;

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

@@ -3,7 +3,7 @@ import { HTTPResponse } from 'lkt-http-client';
 import { ItemCrudButtonNavPosition, ItemCrudConfig, ItemCrudMode, ItemCrudView, LktObject, NotificationType } from 'lkt-vue-kernel';
 import ButtonNav from '../components/ButtonNav.vue';
 declare const slots: SetupContext['slots'];
-declare const isLoading: import("vue").Ref<boolean, boolean>, item: import("vue").Ref<LktObject, LktObject>, editMode: import("vue").Ref<boolean, boolean>, httpSuccessRead: import("vue").Ref<boolean, boolean>, showStoreMessage: import("vue").Ref<boolean, boolean>, httpStatus: import("vue").Ref<number, number>, dataChanged: import("vue").Ref<boolean, boolean>, createMode: import("vue").Ref<boolean, boolean>, itemBeingEdited: import("vue").Ref<boolean, boolean>, buttonNav: import("vue").Ref<null, null>, canUpdate: import("vue").ComputedRef<boolean>, canDrop: import("vue").ComputedRef<boolean>, canSwitchEditMode: import("vue").ComputedRef<boolean>;
+declare const isLoading: import("vue").Ref<boolean, boolean>, item: import("vue").Ref<LktObject, LktObject>, perms: import("vue").Ref<string[], string[]>, editMode: import("vue").Ref<boolean, boolean>, httpSuccessRead: import("vue").Ref<boolean, boolean>, showStoreMessage: import("vue").Ref<boolean, boolean>, httpStatus: import("vue").Ref<number, number>, dataChanged: import("vue").Ref<boolean, boolean>, createMode: import("vue").Ref<boolean, boolean>, itemBeingEdited: import("vue").Ref<boolean, boolean>, buttonNav: import("vue").Ref<null, null>, canUpdate: import("vue").ComputedRef<boolean>, canDrop: import("vue").ComputedRef<boolean>, canSwitchEditMode: import("vue").ComputedRef<boolean>;
 declare const onCreate: ($event: PointerEvent, r: HTTPResponse) => void, onUpdate: ($event: PointerEvent, r: HTTPResponse) => void, onDrop: ($event: PointerEvent, r: HTTPResponse) => void;
 declare const computedTitle: import("vue").ComputedRef<string>, displayHeader: import("vue").ComputedRef<boolean>, computedInsideModal: import("vue").ComputedRef<boolean>, computedContainerTag: import("vue").ComputedRef<"lkt-modal" | "section">, computedContainerAttrs: import("vue").ComputedRef<{}>;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
@@ -13,7 +13,15 @@ declare var __VLS_6: {
 }, __VLS_8: {
     item: LktObject;
     loading: boolean;
-}, __VLS_21: {}, __VLS_23: {}, __VLS_33: {
+}, __VLS_21: {
+    canUpdate: boolean | undefined;
+    canDrop: boolean | undefined;
+    perms: string[] | undefined;
+}, __VLS_23: {
+    canUpdate: boolean | undefined;
+    canDrop: boolean | undefined;
+    perms: string[] | undefined;
+}, __VLS_33: {
     item: LktObject;
     loading: false;
     editMode: boolean;
@@ -44,6 +52,7 @@ declare const __VLS_self: import("vue").DefineComponent<ItemCrudConfig, {
     slots: typeof slots;
     isLoading: typeof isLoading;
     item: typeof item;
+    perms: typeof perms;
     editMode: typeof editMode;
     httpSuccessRead: typeof httpSuccessRead;
     showStoreMessage: typeof showStoreMessage;

package/package.json

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

package/src/components/ButtonNav.vue

@@ -37,6 +37,7 @@
         canUpdate?: boolean
         canDrop?: boolean
         canSwitchEditMode?: boolean
+        perms?: Array<string>
 
         httpSuccessRead?: boolean
 
@@ -114,7 +115,7 @@
 
 
     const ableToUpdate = computed(() => {
-            if (props.mode !== ItemCrudMode.Create && !props.canUpdate) return false;
+            if (props.mode !== ItemCrudMode.Update || !props.canUpdate) return false;
             if (!props.dataChanged) return false;
 
             if (typeof safeUpdateButton.value?.disabled === 'function') return !safeUpdateButton.value.disabled(props.item);
@@ -151,7 +152,9 @@
         showSaveButton = computed(() => {
             if (props.mode === ItemCrudMode.Create && props.createButton === false) return false;
             if (props.mode === ItemCrudMode.Update && props.updateButton === false) return false;
-            if (props.dataChanged) return true;
+            if (props.dataChanged) {
+                return ableToUpdate.value || ableToCreate.value;
+            }
             if (isLoading.value) return false;
 
             if (props.mode === ItemCrudMode.Create) {
@@ -188,11 +191,19 @@
     <div v-if="showButtons" class="lkt-item-crud-buttons">
 
         <div class="lkt-item-crud-buttons" v-if="slots['prev-buttons-ever']" v-show="!isLoading">
-            <slot name="prev-buttons-ever" />
+            <slot name="prev-buttons-ever"
+                  :can-update="canUpdate"
+                  :can-drop="canDrop"
+                  :perms="perms"
+            />
         </div>
 
         <div class="lkt-item-crud-buttons" v-if="slots['prev-buttons']" v-show="isEditing && !isLoading">
-            <slot name="prev-buttons" />
+            <slot name="prev-buttons"
+                  :can-update="canUpdate"
+                  :can-drop="canDrop"
+                  :perms="perms"
+            />
         </div>
 
         <lkt-button

package/src/lib-components/LktItemCrud.vue

@@ -362,15 +362,24 @@
                 :can-update="canUpdate"
                 :can-drop="canDrop"
                 :can-switch-edit-mode="canSwitchEditMode"
+                :perms="perms"
                 @create="onCreate"
                 @save="onUpdate"
                 @drop="onDrop"
             >
-                <template #prev-buttons-ever v-if="slots['prev-buttons-ever']">
-                    <slot name="prev-buttons-ever" />
+                <template #prev-buttons-ever="{canUpdate, canDrop, perms}" v-if="slots['prev-buttons-ever']">
+                    <slot name="prev-buttons-ever"
+                          :can-update="canUpdate"
+                          :can-drop="canDrop"
+                          :perms="perms"
+                    />
                 </template>
-                <template #prev-buttons-ever v-if="slots['prev-buttons']">
-                    <slot name="prev-buttons" />
+                <template #prev-buttons-ever="{canUpdate, canDrop, perms}" v-if="slots['prev-buttons']">
+                    <slot name="prev-buttons"
+                          :can-update="canUpdate"
+                          :can-drop="canDrop"
+                          :perms="perms"
+                    />
                 </template>
             </button-nav>