@piveau/dpi 0.2.0-alpha.20 → 0.2.0-alpha.21

package/dist/packages/dpi/src/data-provider-interface/HappyFlowComponents/ProjectTable.vue2.js

@@ -1,40 +1,42 @@
-import { defineComponent as H, ref as b, computed as i, watch as C, createElementBlock as n, openBlock as s, createElementVNode as o, createBlock as g, resolveDynamicComponent as N, unref as r, withCtx as x, createVNode as B, createStaticVNode as L, Fragment as U, renderList as R } from "vue";
-import { whenever as q, useDebounce as W } from "@vueuse/core";
+import { defineComponent as x, ref as p, computed as i, watch as U, createElementBlock as n, openBlock as l, createElementVNode as s, createBlock as _, resolveDynamicComponent as R, unref as r, withCtx as q, createVNode as y, createStaticVNode as z, Fragment as A, renderList as F } from "vue";
+import { PhCircleNotch as W } from "@phosphor-icons/vue";
+import { whenever as $ } from "@vueuse/core";
 import "axios";
 import "jquery";
-import { useRouter as $ } from "vue-router";
-import { useStore as z } from "vuex";
-import { useRuntimeEnv as F } from "../../composables/useRuntimeEnv.js";
-import { useErrorDialog as J } from "../composables/useErrorDialog.js";
-import { useProjectSearch as O } from "../composables/useTwinbyHome.js";
-import { useTwinbyUser as A } from "../composables/useTwinbyUser.js";
-import { formatDate as K } from "../utils/formatDate.js";
-import G from "./ui/ButtonV3.vue.js";
-import M from "./ui/TableRowV3.vue.js";
-const Q = { class: "dpiV3_dpiHome V3-typography" }, X = { class: "dpiV3_homeHeadWrap" }, Y = { class: "interactionButtonsDPIHome" }, Z = { class: "dpiV3_table" }, j = {
+import { useRouter as J } from "vue-router";
+import { useStore as O } from "vuex";
+import { useRuntimeEnv as K } from "../../composables/useRuntimeEnv.js";
+import { useDebouncedLoading as G } from "../composables/useDebouncedLoading.js";
+import { useErrorDialog as M } from "../composables/useErrorDialog.js";
+import { useProjectSearch as Q } from "../composables/useTwinbyHome.js";
+import { useTwinbyUser as X } from "../composables/useTwinbyUser.js";
+import { formatDate as Y } from "../utils/formatDate.js";
+import Z from "./ui/ButtonV3.vue.js";
+import j from "./ui/TableRowV3.vue.js";
+const ee = { class: "dpiV3_dpiHome V3-typography" }, ae = { class: "dpiV3_homeHeadWrap" }, te = { class: "interactionButtonsDPIHome" }, ie = { class: "dpiV3_table" }, oe = {
   key: 0,
-  class: "loading-screen"
-}, ee = {
+  class: "dpiV3_loadingSkeleton"
+}, le = {
   key: 1,
   class: "dpiV3_innerTable"
-}, fe = /* @__PURE__ */ H({
+}, ye = /* @__PURE__ */ x({
   __name: "ProjectTable",
-  setup(ae) {
-    var p, v, f, h;
-    const u = F(), d = z();
-    $(), localStorage.getItem("dpi_duplicate"), b(""), i(() => d.getters["auth/getUserCatalogIds"]), b({
+  setup(se) {
+    var b, g, k, w;
+    const c = K(), d = O();
+    J(), localStorage.getItem("dpi_duplicate"), p(""), i(() => d.getters["auth/getUserCatalogIds"]), p({
       loading: !1,
       message: "",
       confirm: () => null
     });
-    const k = i(() => d.getters["auth/getUserData"]);
-    i(() => k.value.rtpToken);
-    const w = (t) => d.dispatch("snackbar/showSnackbar", t), _ = i(() => {
-      var t, e;
-      return (e = (t = d.getters) == null ? void 0 : t["auth/getUserData"]) == null ? void 0 : e.authToken;
-    }), { useSearch: y } = O(u.api.baseUrl), m = i(() => ({
-      Authorization: `Bearer ${_.value}`
-    })), { getSearchResultsEnhanced: S, isLoading: P, query: V } = y({
+    const S = i(() => d.getters["auth/getUserData"]);
+    i(() => S.value.rtpToken);
+    const P = (a) => d.dispatch("snackbar/showSnackbar", a), V = i(() => {
+      var a, e;
+      return (e = (a = d.getters) == null ? void 0 : a["auth/getUserData"]) == null ? void 0 : e.authToken;
+    }), { useSearch: D } = Q(c.api.baseUrl), v = i(() => ({
+      Authorization: `Bearer ${V.value}`
+    })), { getSearchResultsEnhanced: E, query: f, isFetching: C } = D({
       queryParams: {
         limit: 100
       },
@@ -42,23 +44,23 @@ const Q = { class: "dpiV3_dpiHome V3-typography" }, X = { class: "dpiV3_homeHead
         resource: "project",
         accessControlPermissions: "edit,publish,delete"
       },
-      headers: m
-    }), l = i(() => V.error.value), { openErrorDialog: D } = J();
-    q(l, () => {
-      if (!l.value)
+      headers: v
+    }), o = i(() => f.error.value), { openErrorDialog: I } = M();
+    $(o, () => {
+      if (!o.value)
         return;
-      const t = new Error(`${JSON.stringify(l.value)}
+      const a = new Error(`${JSON.stringify(o.value)}
 
-${JSON.stringify(m.value)}`);
-      D(t, "Fehler beim Laden der Projekte");
+${JSON.stringify(v.value)}`);
+      I(a, "Fehler beim Laden der Projekte");
     });
-    const { allowedToCreate: c } = A({
-      keycloak: ((v = (p = u.authentication) == null ? void 0 : p.keycloak) == null ? void 0 : v.url) || "https://keycloak.twin.bydata.de",
-      realm: ((h = (f = u.authentication) == null ? void 0 : f.keycloak) == null ? void 0 : h.realm) || "piveau",
+    const { allowedToCreate: u } = X({
+      keycloak: ((g = (b = c.authentication) == null ? void 0 : b.keycloak) == null ? void 0 : g.url) || "https://keycloak.twin.bydata.de",
+      realm: ((w = (k = c.authentication) == null ? void 0 : k.keycloak) == null ? void 0 : w.realm) || "piveau",
       audience: "piveau-hub-repo"
-    }), E = i(() => {
-      var t;
-      return (t = S.value) == null ? void 0 : t.map((e) => ({
+    }), T = i(() => {
+      var a;
+      return (a = E.value) == null ? void 0 : a.map((e) => ({
         id: e.id,
         title: e.title,
         modified: e.modified,
@@ -70,25 +72,32 @@ ${JSON.stringify(m.value)}`);
         allowDelete: e.allowDelete
       }));
     });
-    C(l, () => {
-      console.error(l), w({
-        message: l.value.message,
+    U(o, () => {
+      console.error(o), P({
+        message: o.value.message,
         color: "error"
       });
     });
-    const I = W(P, 500);
-    return (t, e) => (s(), n("div", Q, [
-      o("div", X, [
-        e[0] || (e[0] = o("h2", { class: "dpiV3_tableHeader" }, " Ihre Projekte ", -1)),
-        e[1] || (e[1] = o("p", null, "Hier sehen Sie alle Projekte, die Sie bearbeiten oder veröffentlichen können.", -1)),
-        o("div", Y, [
-          (s(), g(N(r(c) ? "RouterLink" : "span"), {
-            disabled: !r(c),
+    const { isLoading: L } = G(C), m = p(!1);
+    async function h() {
+      await new Promise((a) => setTimeout(a, 2100)), f.refetch(), m.value = !1;
+    }
+    function H() {
+      m.value = !0, h();
+    }
+    const N = i(() => L.value || m.value);
+    return (a, e) => (l(), n("div", ee, [
+      s("div", ae, [
+        e[0] || (e[0] = s("h2", { class: "dpiV3_tableHeader" }, " Ihre Projekte ", -1)),
+        e[1] || (e[1] = s("p", null, "Hier sehen Sie alle Projekte, die Sie bearbeiten oder veröffentlichen können.", -1)),
+        s("div", te, [
+          (l(), _(R(r(u) ? "RouterLink" : "span"), {
+            disabled: !r(u),
             to: { name: "DataProviderInterface-InputProject", query: { locale: "de", edit: !1 }, params: { property: "datasets" } }
           }, {
-            default: x(() => [
-              B(G, {
-                disabled: !r(c),
+            default: q(() => [
+              y(Z, {
+                disabled: !r(u),
                 "button-text": "Neues Projekt erstellen",
                 size: "large"
               }, null, 8, ["disabled"])
@@ -97,25 +106,31 @@ ${JSON.stringify(m.value)}`);
           }, 8, ["disabled"]))
         ])
       ]),
-      o("div", Z, [
-        r(I) ? (s(), n("div", j, e[2] || (e[2] = [
-          o("p", null, "Lädt Daten...", -1)
-        ]))) : (s(), n("div", ee, [
-          e[3] || (e[3] = L('<div class="dpiV3_tableHeadWrap" data-v-1cfd553a><div class="dpiV3_thWrap" data-v-1cfd553a><div scope="col" data-v-1cfd553a><span data-v-1cfd553a>Name</span></div><div scope="col" class="dpiV3_statusHead" data-v-1cfd553a><span data-v-1cfd553a>Status</span></div><div scope="col" class="dpiV3_statusHead" data-v-1cfd553a><span data-v-1cfd553a>Sichtbarkeit</span></div></div><div class="dpiV3_blankCell" data-v-1cfd553a></div></div>', 1)),
-          o("div", null, [
-            (s(!0), n(U, null, R(E.value, (a, T) => (s(), g(M, {
-              id: a.id,
-              key: a.id ?? T,
+      s("div", ie, [
+        N.value ? (l(), n("div", oe, [
+          y(r(W), {
+            size: 48,
+            weight: "bold",
+            class: "dpiV3_spinningIcon"
+          })
+        ])) : (l(), n("div", le, [
+          e[2] || (e[2] = z('<div class="dpiV3_tableHeadWrap" data-v-cda1ef87><div class="dpiV3_thWrap" data-v-cda1ef87><div scope="col" data-v-cda1ef87><span data-v-cda1ef87>Name</span></div><div scope="col" class="dpiV3_statusHead" data-v-cda1ef87><span data-v-cda1ef87>Status</span></div><div scope="col" class="dpiV3_statusHead" data-v-cda1ef87><span data-v-cda1ef87>Sichtbarkeit</span></div></div><div class="dpiV3_blankCell" data-v-cda1ef87></div></div>', 1)),
+          s("div", null, [
+            (l(!0), n(A, null, F(T.value, (t, B) => (l(), _(j, {
+              id: t.id,
+              key: t.id ?? B,
               type: "project",
-              text: a.title || "Kein Titel in englisch oder deutsch vohanden",
-              date: a.modified ? r(K)(a.modified) : "-",
-              dataset: a,
-              visibility: a.visibility,
-              draft: a.publicationStatus === "draft",
-              catalogue: a.catalogId,
-              "allow-edit": a.allowEdit,
-              "allow-publish": a.allowPublish,
-              "allow-delete": a.allowDelete
+              text: t.title || "Kein Titel in englisch oder deutsch vohanden",
+              date: t.modified ? r(Y)(t.modified) : "-",
+              dataset: t,
+              visibility: t.visibility,
+              draft: t.publicationStatus === "draft",
+              catalogue: t.catalogId,
+              "allow-edit": t.allowEdit,
+              "allow-publish": t.allowPublish,
+              "allow-delete": t.allowDelete,
+              onComplete: h,
+              onStart: H
             }, null, 8, ["id", "text", "date", "dataset", "visibility", "draft", "catalogue", "allow-edit", "allow-publish", "allow-delete"]))), 128))
           ])
         ]))
@@ -124,5 +139,5 @@ ${JSON.stringify(m.value)}`);
   }
 });
 export {
-  fe as default
+  ye as default
 };

package/dist/packages/dpi/src/data-provider-interface/HappyFlowComponents/ui/Autocomplete/Autocomplete.vue.js

@@ -1,7 +1,7 @@
 import o from "./Autocomplete.vue2.js";
 /* empty css                  */
 import t from "../../../../../../../_virtual/_plugin-vue_export-helper.js";
-const a = /* @__PURE__ */ t(o, [["__scopeId", "data-v-d965a582"]]);
+const r = /* @__PURE__ */ t(o, [["__scopeId", "data-v-514c9e60"]]);
 export {
-  a as default
+  r as default
 };

package/dist/packages/dpi/src/data-provider-interface/HappyFlowComponents/ui/Autocomplete/Autocomplete.vue2.js

@@ -1,10 +1,13 @@
-import { defineComponent as D, mergeModels as L, useModel as h, computed as N, createElementBlock as i, openBlock as n, createVNode as d, unref as r, withCtx as s, createElementVNode as c, createBlock as m, createCommentVNode as f, renderSlot as k, createTextVNode as w, toDisplayString as _, normalizeClass as b, resolveDynamicComponent as F, Fragment as S, renderList as E } from "vue";
-import { Combobox as P, ComboboxLabel as z, ComboboxButton as I, ComboboxInput as O, ComboboxOptions as U, ComboboxOption as $ } from "@headlessui/vue";
-import { PhCaretUp as A, PhCaretDown as T } from "@phosphor-icons/vue";
+import { defineComponent as w, mergeModels as L, useModel as k, computed as N, createElementBlock as s, openBlock as r, createVNode as i, unref as n, withCtx as d, createElementVNode as c, createBlock as m, createCommentVNode as f, renderSlot as _, createTextVNode as E, toDisplayString as b, normalizeClass as g, resolveDynamicComponent as F, Fragment as M, renderList as P } from "vue";
+import { Combobox as S, ComboboxLabel as z, ComboboxButton as $, ComboboxInput as A, ComboboxOptions as I, ComboboxOption as O } from "@headlessui/vue";
+import { PhCaretUp as U, PhCaretDown as K, PhCircleNotch as T } from "@phosphor-icons/vue";
 const j = { class: "autocomplete" }, G = { class: "autocomplete__wrapper" }, H = { class: "autocomplete__input-icon" }, J = {
+  key: 0,
+  class: "autocomplete__loading"
+}, Q = {
   key: 0,
   class: "autocomplete__no-results"
-}, W = /* @__PURE__ */ D({
+}, Y = /* @__PURE__ */ w({
   __name: "Autocomplete",
   props: /* @__PURE__ */ L({
     options: {},
@@ -12,6 +15,7 @@ const j = { class: "autocomplete" }, G = { class: "autocomplete__wrapper" }, H =
     errorMessage: { default: "" },
     placeholder: { default: "" },
     name: { default: "" },
+    loading: { type: Boolean, default: !1 },
     optionLabel: { type: Function, default: (u) => u },
     optionValue: { type: Function, default: (u) => u },
     optionDisabled: { type: Function, default: () => !1 }
@@ -23,110 +27,121 @@ const j = { class: "autocomplete" }, G = { class: "autocomplete__wrapper" }, H =
   }),
   emits: ["update:modelValue", "update:query"],
   setup(u) {
-    const l = u, p = h(u, "modelValue"), v = h(u, "query"), y = N(() => !!l.errorMessage);
-    function M(e) {
+    const l = u, p = k(u, "modelValue"), y = k(u, "query"), v = N(() => !!l.errorMessage);
+    function B(e) {
       e.open && e.event.stopPropagation();
     }
-    function q(e) {
+    function D(e) {
       return typeof e == "string" ? l.optionLabel(e) : e.name || String(e.id);
     }
-    function g(e) {
+    function C(e) {
       return typeof e == "string" ? l.optionValue(e) : String(e.id);
     }
-    function C(e) {
+    function V(e) {
       return typeof e == "string" ? l.optionDisabled(e) : !!e.unavailable;
     }
-    function x(e, o) {
+    function q(e, o) {
       if (!e || !o)
         return !1;
       if (e === o)
         return !0;
       if (typeof e == "string" && typeof o == "string")
         return e === o;
-      const t = g(e), a = g(o);
+      const t = C(e), a = C(o);
       return t === a;
     }
-    function B(e) {
+    function x(e) {
       return !e || typeof e == "string" ? "" : e.name || "";
     }
-    return (e, o) => (n(), i("div", j, [
-      d(r(P), {
+    return (e, o) => (r(), s("div", j, [
+      i(n(S), {
         modelValue: p.value,
         "onUpdate:modelValue": o[1] || (o[1] = (t) => p.value = t),
         name: l.name,
-        by: x,
+        by: q,
         nullable: ""
       }, {
-        default: s(() => [
+        default: d(() => [
           c("div", G, [
-            l.label ? (n(), m(r(z), {
+            l.label ? (r(), m(n(z), {
               key: 0,
               class: "autocomplete__label",
               as: "div"
             }, {
-              default: s(() => [
-                k(e.$slots, "label", {
+              default: d(() => [
+                _(e.$slots, "label", {
                   label: l.label,
                   selected: p.value
                 }, () => [
-                  w(_(l.label), 1)
+                  E(b(l.label), 1)
                 ], !0)
               ]),
               _: 3
             })) : f("", !0),
             c("div", {
-              class: b(["autocomplete__input-container", { "autocomplete__input-container--error": y.value }])
+              class: g(["autocomplete__input-container", { "autocomplete__input-container--error": v.value }])
             }, [
-              d(r(I), {
+              i(n($), {
                 as: "div",
                 class: "autocomplete__input-wrapper"
               }, {
-                default: s(({ open: t }) => [
-                  d(r(O), {
+                default: d(({ open: t }) => [
+                  i(n(A), {
                     class: "autocomplete__input",
-                    "display-value": (a) => B(a),
+                    "display-value": (a) => x(a),
                     placeholder: l.placeholder,
-                    onChange: o[0] || (o[0] = (a) => v.value = a.target.value),
-                    onClick: (a) => M({ event: a, open: t })
+                    onChange: o[0] || (o[0] = (a) => y.value = a.target.value),
+                    onClick: (a) => B({ event: a, open: t })
                   }, null, 8, ["display-value", "placeholder", "onClick"]),
                   c("div", H, [
-                    (n(), m(F(t ? r(A) : r(T)), { size: "1.5rem" }))
+                    (r(), m(F(t ? n(U) : n(K)), { size: "1.5rem" }))
                   ])
                 ]),
                 _: 1
               })
             ], 2),
-            e.errorMessage ? (n(), i("div", {
+            e.errorMessage ? (r(), s("div", {
               key: 1,
-              class: b(["autocomplete__message", { "autocomplete__message--error": y.value }])
-            }, _(e.errorMessage), 3)) : f("", !0)
+              class: g(["autocomplete__message", { "autocomplete__message--error": v.value }])
+            }, b(e.errorMessage), 3)) : f("", !0)
           ]),
-          d(r(U), {
+          i(n(I), {
             class: "autocomplete__options",
             as: "ul"
           }, {
-            default: s(() => [
-              (n(!0), i(S, null, E(l.options, (t) => (n(), m(r($), {
-                key: typeof t == "string" ? t : t.id,
-                as: "template",
-                value: t,
-                disabled: C(t)
-              }, {
-                default: s(({ active: a, selected: V }) => [
-                  k(e.$slots, "option", {
-                    option: t,
-                    active: a,
-                    selected: V,
-                    disabled: C(t)
-                  }, () => [
-                    c("li", {
-                      class: b(["autocomplete__option", { "autocomplete__option--active": a, "autocomplete__option--selected": V }])
-                    }, _(q(t)), 3)
-                  ], !0)
-                ]),
-                _: 2
-              }, 1032, ["value", "disabled"]))), 128)),
-              l.options.length === 0 && v.value !== "" ? (n(), i("div", J, " No results found. ")) : f("", !0)
+            default: d(() => [
+              l.loading ? (r(), s("div", J, [
+                _(e.$slots, "loading", {}, () => [
+                  i(n(T), {
+                    size: "24px",
+                    color: "#0172AD",
+                    weight: "bold",
+                    class: "autocomplete__loading-spinner"
+                  })
+                ], !0)
+              ])) : (r(), s(M, { key: 1 }, [
+                (r(!0), s(M, null, P(l.options, (t) => (r(), m(n(O), {
+                  key: typeof t == "string" ? t : t.id,
+                  as: "template",
+                  value: t,
+                  disabled: V(t)
+                }, {
+                  default: d(({ active: a, selected: h }) => [
+                    _(e.$slots, "option", {
+                      option: t,
+                      active: a,
+                      selected: h,
+                      disabled: V(t)
+                    }, () => [
+                      c("li", {
+                        class: g(["autocomplete__option", { "autocomplete__option--active": a, "autocomplete__option--selected": h }])
+                      }, b(D(t)), 3)
+                    ], !0)
+                  ]),
+                  _: 2
+                }, 1032, ["value", "disabled"]))), 128)),
+                l.options.length === 0 && y.value !== "" ? (r(), s("div", Q, " Keine Ergebnisse gefunden. ")) : f("", !0)
+              ], 64))
             ]),
             _: 3
           })
@@ -137,5 +152,5 @@ const j = { class: "autocomplete" }, G = { class: "autocomplete__wrapper" }, H =
   }
 });
 export {
-  W as default
+  Y as default
 };

package/dist/packages/dpi/src/data-provider-interface/HappyFlowComponents/ui/Autocomplete/AutocompleteVocab.vue.js

@@ -1,7 +1,7 @@
 import o from "./AutocompleteVocab.vue2.js";
 /* empty css                       */
 import t from "../../../../../../../_virtual/_plugin-vue_export-helper.js";
-const r = /* @__PURE__ */ t(o, [["__scopeId", "data-v-36e5f0b6"]]);
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-ac1ed51f"]]);
 export {
-  r as default
+  m as default
 };

package/dist/packages/dpi/src/data-provider-interface/HappyFlowComponents/ui/Autocomplete/AutocompleteVocab.vue2.js

@@ -1,10 +1,10 @@
-import { defineComponent as G, mergeModels as P, computed as l, ref as M, useModel as J, watch as R, createBlock as B, openBlock as F, unref as f, createSlots as K, withCtx as A, createElementVNode as W, createTextVNode as X, createCommentVNode as Y, toDisplayString as Z, renderSlot as w } from "vue";
-import { PhSpinner as ee } from "@phosphor-icons/vue";
-import { defineHubSearch as re } from "@piveau/sdk-vue";
-import { useDebounce as D } from "@vueuse/core";
-import oe from "zod";
-import le from "./Autocomplete.vue.js";
-const te = { class: "autocomplete-vocab__label" }, ve = /* @__PURE__ */ G({
+import { defineComponent as K, mergeModels as P, computed as l, ref as M, useModel as W, watch as R, createBlock as B, openBlock as A, unref as v, createSlots as X, withCtx as D, createElementVNode as Y, createTextVNode as Z, createCommentVNode as w, toDisplayString as ee, renderSlot as re } from "vue";
+import { PhSpinner as oe } from "@phosphor-icons/vue";
+import { defineHubSearch as le } from "@piveau/sdk-vue";
+import { useDebounce as p } from "@vueuse/core";
+import te from "zod";
+import se from "./Autocomplete.vue.js";
+const ae = { class: "autocomplete-vocab__label" }, fe = /* @__PURE__ */ K({
   __name: "AutocompleteVocab",
   props: /* @__PURE__ */ P({
     by: { default: "" },
@@ -20,30 +20,30 @@ const te = { class: "autocomplete-vocab__label" }, ve = /* @__PURE__ */ G({
     isAutocompleteDisabled: { type: Boolean, default: !1 },
     postProcessFn: {}
   }, {
-    modelValue: { default: () => "" },
+    modelValue: { default: "" },
     modelModifiers: {}
   }),
   emits: /* @__PURE__ */ P(["select"], ["update:modelValue"]),
-  setup(p, { emit: I }) {
-    const r = p, U = I, u = l(() => !!r.vocabulary), v = l(() => r.by || u.value ? "vocabulary" : "resource"), k = l(() => r.resource === "dataset" ? "dataset" : u.value ? "vocabulary" : v.value), E = l(() => r.resource === "dataset" ? "datasets" : u.value ? "vocabularies" : v.value === "resource" ? `resources/${r.resource}` : "vocabularies"), _ = l(() => !r.isAutocompleteDisabled && !!(r.resource || r.vocabulary)), { useSearch: $, useResource: C } = re({
+  setup(b, { emit: I }) {
+    const r = b, U = I, u = l(() => !!r.vocabulary), m = l(() => r.by || u.value ? "vocabulary" : "resource"), _ = l(() => r.resource === "dataset" ? "dataset" : u.value ? "vocabulary" : m.value), k = l(() => r.resource === "dataset" ? "datasets" : u.value ? "vocabularies" : m.value === "resource" ? `resources/${r.resource}` : "vocabularies"), E = l(() => !r.isAutocompleteDisabled && !!(r.resource || r.vocabulary)), { useSearch: L, useResource: $ } = le({
       baseUrl: r.baseUrl,
-      index: k.value,
-      indexDetails: E.value,
-      schema: oe.any()
+      index: _.value,
+      indexDetails: k.value,
+      schema: te.any()
     }, (e) => {
-      var d, q, V;
-      const o = (d = r.setupFn) == null ? void 0 : d.call(r, e), s = String((o == null ? void 0 : o.id) || (e == null ? void 0 : e.resource) || ""), n = String((o == null ? void 0 : o.name) || ((q = e == null ? void 0 : e.pref_label) == null ? void 0 : q.de) || ((V = e == null ? void 0 : e.pref_label) == null ? void 0 : V.en) || "");
+      var d, V, F;
+      const o = (d = r.setupFn) == null ? void 0 : d.call(r, e), s = String((o == null ? void 0 : o.id) || (e == null ? void 0 : e.resource) || ""), n = String((o == null ? void 0 : o.name) || ((V = e == null ? void 0 : e.pref_label) == null ? void 0 : V.de) || ((F = e == null ? void 0 : e.pref_label) == null ? void 0 : F.en) || "");
       return {
         ...o,
         id: s,
         name: n
       };
-    }), m = M(""), L = D(m, 300), N = l(() => r.vocabulary), { getSearchResultsEnhanced: O } = $({
+    }), f = M(""), C = p(f, 300), N = l(() => r.vocabulary), { getSearchResultsEnhanced: O, isFetching: x } = L({
       queryOptions: {
-        enabled: _
+        enabled: E
       },
       queryParams: {
-        q: L,
+        q: C,
         limit: 12,
         // ...vocabularyRef.value
         //   ? { vocabulary: vocabularyRef }
@@ -52,28 +52,28 @@ const te = { class: "autocomplete-vocab__label" }, ve = /* @__PURE__ */ G({
         // resource: computed(() => props.resource || ''),
       },
       additionalParams: l(() => ({
-        resource: v.value === "resource" ? r.resource : ""
+        resource: m.value === "resource" ? r.resource : ""
       }))
-    }), x = l(() => {
+    }), z = l(() => {
       let e = O.value || [];
       return r.postProcessFn && (e = r.postProcessFn(e)), e;
-    }), t = J(p, "modelValue"), b = l(() => !(!t.value || typeof t.value == "string")), z = l(() => typeof t.value == "string");
+    }), t = W(b, "modelValue"), y = l(() => !(!t.value || typeof t.value == "string")), T = l(() => typeof t.value == "string");
     function i(e) {
       return String(e ?? "").trim();
     }
     const c = l(() => {
       var e;
       return typeof t.value == "string" ? i(t.value) : i((e = t.value) == null ? void 0 : e.id);
-    }), y = l(() => z.value && !!c.value), T = l(() => y.value ? u.value ? `${r.vocabulary}/vocable` : c.value : ""), j = l(() => u.value ? { resource: c.value } : {}), {
-      resultEnhanced: H,
-      isSuccess: se,
-      isLoading: Q
-    } = C(T, {
-      additionalParams: j,
+    }), g = l(() => T.value && !!c.value), j = l(() => g.value ? u.value ? `${r.vocabulary}/vocable` : c.value : ""), H = l(() => u.value ? { resource: c.value } : {}), {
+      resultEnhanced: Q,
+      isSuccess: ue,
+      isFetching: G
+    } = $(j, {
+      additionalParams: H,
       queryOptions: {
-        enabled: y
+        enabled: g
       }
-    }), g = D(Q, 350), a = M(), h = l({
+    }), h = p(G, 350), J = p(x, 350), a = M(), S = l({
       get: () => {
         var s, n;
         const e = c.value;
@@ -94,48 +94,49 @@ const te = { class: "autocomplete-vocab__label" }, ve = /* @__PURE__ */ G({
         a.value = e, t.value = i(e.id);
       }
     });
-    return R(H, (e, o) => {
-      e && (o && o.id === e.id || (a.value = e, b.value && (t.value = e), b.value || (t.value = i(e.id))));
+    return R(Q, (e, o) => {
+      e && (o && o.id === e.id || (a.value = e, y.value && (t.value = e), y.value || (t.value = i(e.id))));
     }, { immediate: !0 }), R(a, (e) => {
       e && U("select", e);
-    }, { immediate: !0 }), (e, o) => (F(), B(le, {
-      modelValue: h.value,
-      "onUpdate:modelValue": o[0] || (o[0] = (s) => h.value = s),
-      query: m.value,
-      "onUpdate:query": o[1] || (o[1] = (s) => m.value = s),
-      options: x.value || [],
+    }, { immediate: !0 }), (e, o) => (A(), B(se, {
+      modelValue: S.value,
+      "onUpdate:modelValue": o[0] || (o[0] = (s) => S.value = s),
+      query: f.value,
+      "onUpdate:query": o[1] || (o[1] = (s) => f.value = s),
+      options: z.value || [],
       label: e.label,
       "error-message": e.errorMessage,
       placeholder: e.placeholder,
       name: e.name,
-      disabled: f(g) || r.disabled
-    }, K({
-      label: A(() => [
-        W("div", te, [
-          X(Z(e.label) + " ", 1),
-          f(g) ? (F(), B(f(ee), {
+      disabled: v(h) || r.disabled,
+      loading: v(J)
+    }, X({
+      label: D(() => [
+        Y("div", ae, [
+          Z(ee(e.label) + " ", 1),
+          v(h) ? (A(), B(v(oe), {
             key: 0,
             class: "animate-spin"
-          })) : Y("", !0)
+          })) : w("", !0)
         ])
       ]),
       _: 2
     }, [
       e.$slots.option ? {
         name: "option",
-        fn: A(({ option: s, active: n, selected: S, disabled: d }) => [
-          w(e.$slots, "option", {
+        fn: D(({ option: s, active: n, selected: q, disabled: d }) => [
+          re(e.$slots, "option", {
             option: s,
             active: n,
-            selected: S,
+            selected: q,
             disabled: d
           }, void 0, !0)
         ]),
         key: "0"
       } : void 0
-    ]), 1032, ["modelValue", "query", "options", "label", "error-message", "placeholder", "name", "disabled"]));
+    ]), 1032, ["modelValue", "query", "options", "label", "error-message", "placeholder", "name", "disabled", "loading"]));
   }
 });
 export {
-  ve as default
+  fe as default
 };