@scalar/api-reference/dist/v2/ApiReferenceWorkspace.vue.js

Generate beautiful API references from OpenAPI documents

import { defineComponent as R, ref as d, toRef as I, provide as N, useTemplateRef as w, onBeforeMount as L, watch as i, computed as V, createElementBlock as A, openBlock as C, createBlock as B, createCommentVNode as P, createVNode as k, unref as n, resolveDynamicComponent as U, withCtx as s, createTextVNode as _, toDisplayString as K, renderSlot as l, isRef as F } from "vue";
import { safeLocalStorage as O, REFERENCE_LS_KEYS as W } from "@scalar/helpers/object/local-storage";
import { makeUrlAbsolute as Y } from "@scalar/helpers/url/make-url-absolute";
import { redirectToProxy as z } from "@scalar/oas-utils/helpers";
import { useColorMode as H } from "@scalar/use-hooks/useColorMode";
import { useSeoMeta as j } from "@unhead/vue";
import { useFavicon as q } from "@vueuse/core";
import G from "../components/ApiReferenceLayout.vue.js";
import { NAV_STATE_SYMBOL as J } from "../hooks/useNavState.js";
import { isClient as D } from "./blocks/scalar-request-example-block/helpers/find-client.js";
import { getDocumentName as Q } from "./helpers/get-document-name.js";
import { mapConfiguration as g } from "./helpers/map-configuration.js";
import { normalizeContent as X } from "./helpers/normalize-content.js";
import { useWorkspaceStoreEvents as Z } from "./hooks/use-workspace-store-events.js";
import { useMultipleDocuments as ee } from "../features/multiple-documents/useMultipleDocuments.js";
import te from "../features/multiple-documents/DocumentSelector.vue.js";
const De = /* @__PURE__ */ R({
  __name: "ApiReferenceWorkspace",
  props: {
    configuration: {},
    store: {}
  },
  emits: ["updateContent"],
  setup(E) {
    const c = E, {
      availableDocuments: f,
      selectedConfiguration: o,
      selectedDocumentIndex: u,
      isIntersectionEnabled: m,
      hash: M,
      hashPrefix: h
    } = ee({
      configuration: I(c, "configuration"),
      isIntersectionEnabled: d(!1),
      hash: d(""),
      hashPrefix: d("")
    }), x = (e, t) => fetch(
      z(o.value.proxyUrl, e.toString()),
      t
    );
    N(J, { isIntersectionEnabled: m, hash: M, hashPrefix: h });
    const p = w("root"), r = c.store;
    L(() => {
      const e = O().getItem(
        W.SELECTED_CLIENT
      );
      D(e) && !r.workspace["x-scalar-default-client"] && r.update("x-scalar-default-client", e);
    });
    const y = async (e) => {
      const t = X(e.content), a = Q({
        name: e.slug || e.title,
        url: e.url,
        document: t
      });
      if (r.workspace.documents[a]) {
        t && (m.value = !1, r.replaceDocument(a, t), r.update("x-scalar-active-document", a), setTimeout(() => {
          m.value = !0;
        }, 300));
        return;
      }
      if (t)
        return await r.addDocument({
          name: a,
          document: t,
          config: g(e)
        });
      if (e.url)
        return await r.addDocument({
          name: e.slug ?? "default",
          url: Y(e.url, {
            basePath: o.value.pathRouting?.basePath
          }),
          fetch: e.fetch ?? x,
          config: g(e)
        });
    };
    i(
      [
        () => o.value.slug,
        () => o.value.url,
        () => o.value.content
      ],
      ([e, t, a]) => {
        (e || t || a) && y(o.value);
      },
      { immediate: !0 }
    ), Z(r, p), i(
      () => o.value.defaultHttpClient,
      (e) => {
        if (e) {
          const { targetKey: t, clientKey: a } = e, v = `${t}/${a}`;
          D(v) && r.update("x-scalar-default-client", v);
        }
      },
      { immediate: !0 }
    );
    function S(e) {
      if (e === !0)
        return "dark";
      if (e === !1)
        return "light";
    }
    const { toggleColorMode: b, isDarkMode: T } = H({
      initialColorMode: S(o.value.darkMode),
      overrideColorMode: o.value.forceDarkModeState
    });
    i(
      () => o.value.darkMode,
      (e) => r.update("x-scalar-dark-mode", !!e)
    ), i(
      () => T.value,
      (e) => r.update("x-scalar-dark-mode", e),
      { immediate: !0 }
    ), i(
      () => u.value,
      (e) => r.update(
        "x-scalar-active-document",
        f.value[e]?.slug
      ),
      { immediate: !0 }
    ), o.value.metaData && j(o.value.metaData);
    const $ = V(() => o.value.favicon);
    return q($), (e, t) => (C(), A("div", {
      ref_key: "root",
      ref: p
    }, [
      n(o)?.customCss ? (C(), B(U("style"), { key: 0 }, {
        default: s(() => [
          _(K(n(o).customCss), 1)
        ]),
        _: 1
      })) : P("", !0),
      k(G, {
        configuration: n(o),
        isDark: !!n(r).workspace["x-scalar-dark-mode"],
        store: n(r),
        onToggleDarkMode: t[1] || (t[1] = () => n(b)()),
        onUpdateContent: t[2] || (t[2] = (a) => e.$emit("updateContent", a))
      }, {
        "document-selector": s(() => [
          k(n(te), {
            modelValue: n(u),
            "onUpdate:modelValue": t[0] || (t[0] = (a) => F(u) ? u.value = a : null),
            options: n(f)
          }, null, 8, ["modelValue", "options"])
        ]),
        "content-start": s(() => [
          l(e.$slots, "content-start")
        ]),
        "content-end": s(() => [
          l(e.$slots, "content-end")
        ]),
        "sidebar-start": s(() => [
          l(e.$slots, "sidebar-start")
        ]),
        "sidebar-end": s(() => [
          l(e.$slots, "sidebar-end")
        ]),
        footer: s(() => [
          l(e.$slots, "footer")
        ]),
        _: 3
      }, 8, ["configuration", "isDark", "store"])
    ], 512));
  }
});
export {
  De as default
};