lkt-item-crud 1.0.11 → 1.1.0

package/dist/build.js

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

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import { Plugin } from "vue";
+import "./../lkt-item-crud.css";
+declare const LktItemCrud: Plugin;
+export default LktItemCrud;

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

@@ -0,0 +1,283 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    modelValue: {
+        type: ObjectConstructor;
+        required: false;
+        default: () => {};
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    editModeText: {
+        type: StringConstructor;
+        default: string;
+    };
+    saveText: {
+        type: StringConstructor;
+        default: string;
+    };
+    dropText: {
+        type: StringConstructor;
+        default: string;
+    };
+    hiddenSave: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hiddenDrop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hiddenButtons: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readResource: {
+        type: StringConstructor;
+        required: false;
+    };
+    createResource: {
+        type: StringConstructor;
+        required: false;
+    };
+    updateResource: {
+        type: StringConstructor;
+        required: false;
+    };
+    dropResource: {
+        type: StringConstructor;
+        required: false;
+    };
+    readData: {
+        type: ObjectConstructor;
+        required: false;
+        default: () => {};
+    };
+    createData: {
+        type: ObjectConstructor;
+        required: false;
+        default: () => {};
+    };
+    updateData: {
+        type: ObjectConstructor;
+        required: false;
+        default: () => {};
+    };
+    dropData: {
+        type: ObjectConstructor;
+        required: false;
+        default: () => {};
+    };
+    isCreate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    createConfirm: {
+        type: StringConstructor;
+        default: string;
+    };
+    updateConfirm: {
+        type: StringConstructor;
+        default: string;
+    };
+    dropConfirm: {
+        type: StringConstructor;
+        default: string;
+    };
+    createDisabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    updateDisabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    dropDisabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    saveValidator: {
+        type: FunctionConstructor;
+        required: false;
+        default: () => boolean;
+    };
+}, {
+    doDrop: () => void;
+    doRefresh: () => Promise<void>;
+    doSave: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: (...args: any[]) => void;
+    drop: (...args: any[]) => void;
+    update: (...args: any[]) => void;
+    "update:modelValue": (...args: any[]) => void;
+    read: (...args: any[]) => void;
+    create: (...args: any[]) => void;
+    perms: (...args: any[]) => void;
+    "modified-data": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: ObjectConstructor;
+        required: false;
+        default: () => {};
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    editModeText: {
+        type: StringConstructor;
+        default: string;
+    };
+    saveText: {
+        type: StringConstructor;
+        default: string;
+    };
+    dropText: {
+        type: StringConstructor;
+        default: string;
+    };
+    hiddenSave: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hiddenDrop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hiddenButtons: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readResource: {
+        type: StringConstructor;
+        required: false;
+    };
+    createResource: {
+        type: StringConstructor;
+        required: false;
+    };
+    updateResource: {
+        type: StringConstructor;
+        required: false;
+    };
+    dropResource: {
+        type: StringConstructor;
+        required: false;
+    };
+    readData: {
+        type: ObjectConstructor;
+        required: false;
+        default: () => {};
+    };
+    createData: {
+        type: ObjectConstructor;
+        required: false;
+        default: () => {};
+    };
+    updateData: {
+        type: ObjectConstructor;
+        required: false;
+        default: () => {};
+    };
+    dropData: {
+        type: ObjectConstructor;
+        required: false;
+        default: () => {};
+    };
+    isCreate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    createConfirm: {
+        type: StringConstructor;
+        default: string;
+    };
+    updateConfirm: {
+        type: StringConstructor;
+        default: string;
+    };
+    dropConfirm: {
+        type: StringConstructor;
+        default: string;
+    };
+    createDisabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    updateDisabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    dropDisabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    saveValidator: {
+        type: FunctionConstructor;
+        required: false;
+        default: () => boolean;
+    };
+}>> & {
+    onError?: ((...args: any[]) => any) | undefined;
+    onDrop?: ((...args: any[]) => any) | undefined;
+    onUpdate?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onRead?: ((...args: any[]) => any) | undefined;
+    onCreate?: ((...args: any[]) => any) | undefined;
+    onPerms?: ((...args: any[]) => any) | undefined;
+    "onModified-data"?: ((...args: any[]) => any) | undefined;
+}, {
+    title: string;
+    modelValue: Record<string, any>;
+    editModeText: string;
+    saveText: string;
+    dropText: string;
+    hiddenSave: boolean;
+    hiddenDrop: boolean;
+    hiddenButtons: boolean;
+    readData: Record<string, any>;
+    createData: Record<string, any>;
+    updateData: Record<string, any>;
+    dropData: Record<string, any>;
+    isCreate: boolean;
+    createConfirm: string;
+    updateConfirm: string;
+    dropConfirm: string;
+    createDisabled: boolean;
+    updateDisabled: boolean;
+    dropDisabled: boolean;
+    saveValidator: Function;
+}, {}>, {
+    "post-title"?(_: {
+        item: Record<string, any>;
+        loading: boolean;
+    }): any;
+    "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;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/style.css

@@ -1 +1 @@
-.lkt-item-crud{display:flex;flex-direction:column;gap:var(--gap)}.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 .15s;background:#ffffff;z-index:2}.lkt-item-crud-buttons>:last-child{margin-left:auto}
+.lkt-item-crud{display:flex;flex-direction:column;gap:var(--gap)}.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 .15s;background:#fff;z-index:2}.lkt-item-crud-buttons>:last-child{margin-left:auto}

package/package.json

@@ -1,61 +1,36 @@
 {
   "name": "lkt-item-crud",
-  "version": "1.0.11",
+  "version": "1.1.0",
   "description": "",
-  "main": "src/index.ts",
-  "module": "src/index.ts",
-  "files": [
-    "dist/*",
-    "src/**/*.vue"
-  ],
-  "sideEffects": false,
+  "type": "module",
+  "module": "./dist/build.js",
   "exports": {
     ".": {
-      "import": "./dist/lkt-item-crud.es.js",
-      "require": "./dist/lkt-item-crud.umd.js"
+      "import": "./dist/build.js"
     },
-    "./dist/style.css": "./dist/style.css"
+    "./styles": "./dist/style.css"
   },
-  "types": "./dist/types/index.d.ts",
+  "types": "./dist/index.d.ts",
+  "files": ["dist/*", "src/**/*.vue"],
+  "license": "MIT",
+  "sideEffects": false,
   "scripts": {
-    "serve": "vite",
-    "build": "vite build && vue-tsc --emitDeclarationOnly --project tsconfig.json && mv dist/src dist/types",
-    "build2": "vite build",
-    "preview": "vite preview",
-    "test": "jest",
-    "test-coverage": "vitest run --coverage"
+    "build": "rm -rf dist/*; vue-tsc --declaration --emitDeclarationOnly; vite build; cp build/* dist/"
   },
   "author": "Antonio Ibáñez",
   "devDependencies": {
-    "@babel/core": "^7.13.13",
-    "@babel/preset-env": "^7.13.12",
-    "@babel/types": "^7.18.9",
-    "@testing-library/cypress": "^7.0.4",
-    "@testing-library/dom": "^7.30.1",
-    "@testing-library/jest-dom": "^5.11.10",
-    "@types/jest": "^29.0.1",
-    "@types/node": "^18.6.2",
-    "@typescript-eslint/eslint-plugin": "^5.36.2",
-    "@typescript-eslint/parser": "^5.36.2",
-    "@vitejs/plugin-vue": "^3.0.1",
-    "babel-eslint": "^10.1.0",
-    "babel-jest": "^29.0.3",
-    "babel-loader": "^8.2.2",
-    "cypress": "^6.8.0",
-    "eslint": "8.22.0",
-    "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-cypress": "^2.11.2",
-    "eslint-plugin-html": "^7.1.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jest": "^24.3.2",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-simple-import-sort": "^7.0.0",
-    "jest": "^29.0.3",
-    "prettier": "^2.7.1",
-    "ts-jest": "^29.0.0",
-    "typescript": "^4.8.3",
-    "vite": "^3.1.2",
-    "vue-tsc": "^0.38.9"
+    "@babel/types": "^7.23.6",
+    "@types/node": "^20.11.19",
+    "@types/rollup": "^0.54.0",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "rollup": "^4.9.6",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.3",
+    "vue": "^3.3.0",
+    "vue-tsc": "^1.8.27"
+  },
+  "engines": {
+    "node": ">=18"
   },
   "dependencies": {
     "lkt-button": "^1.0.14",
@@ -67,10 +42,6 @@
     "lkt-loader": "^1.0.2",
     "lkt-string-tools": "^1.0.2",
     "lkt-ts-interfaces": "^1.0.2",
-    "path": "^0.12.7",
-    "vue": "^3.3.0"
-  },
-  "engines": {
-    "node": ">=18"
+    "path": "^0.12.7"
   }
 }

package/src/lib-components/LktItemCrud.vue

@@ -209,8 +209,11 @@ const showDropButton = computed(() => {
             && httpSuccessRead.value;
     }),
     showSaveButton = computed(() => {
+        if (isLoading.value) return false;
+
+        if (props.isCreate) return true;
+
         return !props.hiddenSave
-            && !isLoading.value
             && editMode.value
             && httpSuccessRead.value;
     }),

package/dist/jest.config.d.ts

@@ -1,2 +0,0 @@
-export const preset: string;
-export const testEnvironment: string;