lkt-item-crud 1.0.6 → 1.0.8

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

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

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "lkt-item-crud",
-  "version": "1.0.6",
+  "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},
@@ -74,7 +74,9 @@ const saveConfirm = computed(() => {
         return props.isCreate
             ? props.createDisabled
             : props.updateDisabled;
-    })
+    }),
+    canUpdate = computed(() => !props.isCreate && perms.value.includes('update')),
+    canDrop = computed(() => !props.isCreate && perms.value.includes('drop'));
 
 const fetchItem = async () => {
     isLoading.value = true;
@@ -124,6 +126,7 @@ watch(perms, () => emit('perms', perms.value));
 
 const ableToSave = computed(() => {
     if (saveDisabled.value) return false;
+    if (!props.isCreate && !canUpdate.value) return false;
 
     if (typeof props.saveValidator === 'function' && !props.saveValidator(item.value)) return false;
 
@@ -152,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();
@@ -209,7 +214,7 @@ defineExpose({
                 v-show="!isLoading && editMode && httpSuccessRead"
                 v-if="!isCreate"
                 palette="danger"
-                v-bind:disabled="dropDisabled"
+                v-bind:disabled="dropDisabled || !canDrop"
                 v-bind:confirm-modal="dropConfirm"
                 v-bind:resource="dropResource"
                 v-bind:resource-data="dropData"
@@ -217,7 +222,10 @@ defineExpose({
                 v-on:loaded="onButtonLoaded"
                 v-on:click="onDrop">
                 <slot v-if="!!slots['button-drop']" name="button-drop" v-bind:item="item"
-                      v-bind:edit-mode="editMode"></slot>
+                      v-bind:edit-mode="editMode"
+                    v-bind:is-create="isCreate"
+                    v-bind:can-update="canUpdate"
+                    v-bind:can-drop="canDrop"></slot>
                 <span v-else>{{ dropText }}</span>
             </lkt-button>
 
@@ -233,7 +241,10 @@ defineExpose({
                 v-on:loaded="onButtonLoaded"
                 v-on:click="onSave">
                 <slot v-if="!!slots['button-save']" name="button-save" v-bind:item="item"
-                      v-bind:edit-mode="editMode"></slot>
+                      v-bind:edit-mode="editMode"
+                    v-bind:is-create="isCreate"
+                    v-bind:can-update="canUpdate"
+                    v-bind:can-drop="canDrop"></slot>
                 <span v-else>{{ saveText }}</span>
             </lkt-button>
 
@@ -246,7 +257,10 @@ defineExpose({
                 <lkt-http-info :code="httpStatus" v-if="showStoreMessage" quick
                                :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"></slot>
+                <slot name="item" v-bind:item="item" v-bind:loading="isLoading" v-bind:edit-mode="editMode"
+                    v-bind:is-create="isCreate"
+                    v-bind:can-update="canUpdate"
+                    v-bind:can-drop="canDrop"></slot>
             </div>
             <lkt-http-info :code="httpStatus" v-else></lkt-http-info>
         </div>

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;
-}