@devkitvue/dataview/dist/index.es.js

Devkit Base Components is a Vue plugin offering a collection of reusable, headless components designed to streamline your Vue.js development workflow. Built for flexibility and maintainability, this library gives you complete control over styling and beha

import { defineComponent as O, useSlots as _, ref as B, inject as G, computed as l, renderSlot as i, createCommentVNode as K, createElementVNode as a, createTextVNode as J, toDisplayString as L, createBlock as V, createVNode as W, openBlock as k, resolveDynamicComponent as X, unref as d, normalizeProps as Y, guardReactiveProps as Z, h as ee } from "vue";
import { useQuery as te } from "@tanstack/vue-query";
import { resolveApiEndpoint as oe } from "@devkitvue/apiclient";
import { useActions as re } from "@devkitvue/datalist";
import { AppBtn as v } from "@devkitvue/base-components";
import { useRoute as ae, useRouter as se } from "vue-router";
import { useToast as ne } from "primevue";
const le = { class: "mx-auto max-w-4xl overflow-hidden rounded-lg bg-gradient-to-b from-[#121624] to-[#0d0f1a] shadow-lg" }, ie = { class: "relative px-8 pb-10 pt-4 md:px-12" }, de = { class: "absolute -top-14 h-28 w-28 rounded-full border-4 border-white object-cover" }, ce = { class: "mt-16 flex flex-col gap-1 text-white" }, ue = { class: "text-2xl font-semibold" }, me = { class: "text-sm text-gray-300" }, pe = { class: "mt-6 flex gap-4" }, we = /* @__PURE__ */ O({
  __name: "DataView",
  props: {
    context: {}
  },
  emits: ["update:submited", "update:submit", "deleteRestore:submited", "deleteRestore:submit", "delete:submited", "delete:submit", "error"],
  setup(o, { emit: c }) {
    const n = c, s = _(), u = B(!1), q = ae(), f = ne(), A = G("apiClient"), {
      requestValue: C,
      viewKey: $,
      routerParamName: I = "id",
      record: m,
      datalistKey: N,
      requestMapper: y
    } = o.context, b = (e) => {
      if (e instanceof Error) {
        f.add({
          severity: "error",
          summary: "failed",
          detail: e.message,
          life: 3e3
        });
        return;
      }
      f.add({
        severity: "error",
        summary: "failed",
        detail: e,
        life: 3e3
      });
    }, h = l(() => {
      if (C) return o.context.requestValue;
      try {
        const e = q.params[I];
        return /^\d+$/.test(e) ? Number(e) : e;
      } catch (e) {
        return b(e), 0;
      }
    }), P = async () => {
      if (typeof m == "object")
        return { record: m, options: o.context.options };
      try {
        const e = {
          recordId: h.value
        };
        y && y(e);
        const r = await oe(m, A, e);
        return u.value = r.record.deletedAt != "", r;
      } catch (e) {
        throw b(e), e;
      }
    }, x = te({
      queryKey: [$, h],
      queryFn: () => P().then(async (e) => e),
      enabled: !0
    }), S = l(
      () => {
        var e;
        return ((e = x.data.value) == null ? void 0 : e.options) || o.context.options || { title: o.context.viewKey };
      }
    ), t = l(() => {
      var e;
      return ((e = x.data.value) == null ? void 0 : e.record) || void 0;
    }), {
      permittedActions: g,
      createUpdateRecord: E,
      deleteRestoreOpenDialog: p,
      deleteRestoreVariants: w,
      // deleteRestoreMutationFn,
      // deleteMutation,
      viewRecord: F
    } = re({
      title: "hamada",
      isDeletedRef: u,
      dataKeys: [N || ""],
      options: S,
      formSections: o.context.formSections,
      rowIdentifier: o.context.rowIdentifier
    }), j = () => g.value.filter((e) => ["delete", "deleteRestore", "update"].includes(e.actionKey)).map((e) => {
      const r = e.actionKey, U = `${r}:submited`, z = `actions.${r}`, H = (M) => n(U, M), R = s[z];
      return R ? R({ record: t.value }) : ee(v, {
        variant: "outlined",
        action: () => e.actionFn(H, t.value),
        ...e,
        key: e.actionKey + e.label
      });
    });
    console.log(
      s,
      g,
      E,
      p,
      // deleteRestoreMutationFn,
      // deleteMutation,
      F
    );
    const { push: T } = se(), Q = l(() => (console.log("Crrent data is", t), {
      key: w.value.label,
      action: () => p({ record: t.value }),
      ...w.value
    }));
    return (e, r) => t.value ? i(e.$slots, "card", {
      key: 0,
      data: t.value
    }, () => [
      a("section", le, [
        r[0] || (r[0] = a("div", { class: "h-32 w-full bg-gradient-to-r from-emerald-400 via-teal-500 to-blue-600" }, null, -1)),
        a("div", ie, [
          a("div", de, [
            i(e.$slots, "cardImage", { data: t.value })
          ]),
          a("div", ce, [
            a("h2", ue, [
              i(e.$slots, "cardTitle", { data: t.value }, () => [
                J(L(e.context.headerKey ? t.value[e.context.headerKey] : ""), 1)
              ])
            ]),
            a("p", me, [
              i(e.$slots, "cardInfo", { data: t.value })
            ])
          ]),
          a("div", pe, [
            (k(), V(X(j))),
            W(d(v), Y(Z(Q.value)), null, 16),
            u.value ? (k(), V(d(v), {
              key: 0,
              action: () => d(p)({
                record: t.value,
                callback: () => d(T)(e.context.listRoute || "/"),
                isHardDelete: !0
              }),
              variant: "outlined",
              icon: "delete-bin-2-line",
              label: "hard_delete",
              severity: "danger"
            }, null, 8, ["action"])) : K("", !0)
          ])
        ])
      ])
    ]) : K("", !0);
  }
}), D = Symbol("apiClient"), Re = {
  install(o, { apiClient: c }) {
    var s;
    const n = (s = o._context) == null ? void 0 : s.provides;
    (!n || !(D in n)) && o.provide(D, c);
  }
};
export {
  D as ApiClientKey,
  we as DataView,
  Re as default
};