@scalar/api-client/dist/v2/features/modal/Modal.vue2.js

the open source API testing client

import { defineComponent as x, ref as w, useId as E, watch as I, nextTick as N, onBeforeMount as D, onBeforeUnmount as F, computed as k, withDirectives as h, createElementBlock as u, openBlock as c, createElementVNode as d, unref as o, createVNode as s, withCtx as U, vShow as b } from "vue";
import { addScalarClassesToHeadless as V, ScalarTeleportRoot as $ } from "@scalar/components";
import { ScalarToasts as A } from "@scalar/use-toasts";
import { createWorkspaceEventBus as M } from "@scalar/workspace-store/events";
import { useFocusTrap as H } from "@vueuse/integrations/useFocusTrap";
import L from "../operation/Operation.vue.js";
import { getActiveEnvironment as z } from "../../helpers/get-active-environment.js";
import { useColorMode as O } from "../../hooks/use-color-mode.js";
import { useGlobalHotKeys as R } from "../../hooks/use-global-hot-keys.js";
import { useScrollLock as j } from "../../hooks/use-scroll-lock.js";
import { useWorkspaceClientModalEvents as q } from "./hooks/use-workspace-client-modal-events.js";
import G from "../../components/sidebar/SidebarToggle.vue.js";
import K from "../../components/sidebar/Sidebar.vue.js";
const P = { class: "scalar scalar-app" }, J = { class: "scalar-container" }, Q = ["id"], X = {
  key: 0,
  class: "relative flex flex-1"
}, Y = {
  key: 1,
  class: "flex h-full w-full items-center justify-center"
}, Z = {}, me = /* @__PURE__ */ x({
  ...Z,
  __name: "Modal",
  props: {
    workspaceStore: {},
    document: {},
    path: {},
    method: {},
    exampleName: {},
    modalState: {},
    sidebarState: {},
    plugins: { default: () => [] }
  },
  setup(a, { expose: y }) {
    typeof window < "u" && (window.dataDumpWorkspace = () => a.workspaceStore);
    const l = M({
      debug: !1
    });
    O({ workspaceStore: a.workspaceStore });
    const m = {
      name: "default",
      id: "default"
    }, n = w(!0);
    q({
      eventBus: l,
      document: a.document,
      workspaceStore: a.workspaceStore,
      isSidebarOpen: n,
      sidebarState: a.sidebarState,
      modalState: a.modalState
    }), R(l, "modal");
    const p = w(null), f = E(), { activate: B, deactivate: g } = H(p, {
      allowOutsideClick: !0,
      fallbackFocus: `#${f}`
    }), v = () => {
      g(), l.emit("operation:cancel:request");
    }, T = j(() => typeof window < "u" ? window.document.body : null);
    I(
      () => a.modalState.open,
      (e) => {
        T.value = e, e ? B({ checkCanFocusTrap: () => N() }) : v();
      }
    ), D(() => V()), F(() => v());
    const W = 288, i = k(
      () => a.workspaceStore?.workspace?.["x-scalar-sidebar-width"] ?? W
    ), C = (e) => a.workspaceStore?.update("x-scalar-sidebar-width", e), S = k(
      () => z(a.workspaceStore, a.document.value)
    );
    return y({
      sidebarWidth: i,
      environment: S
    }), (e, t) => h((c(), u("div", P, [
      d("div", J, [
        d("div", {
          id: o(f),
          ref_key: "client",
          ref: p,
          "aria-label": "API Client",
          "aria-modal": "true",
          class: "scalar-app-layout scalar-client flex",
          role: "dialog",
          tabindex: "-1"
        }, [
          s(o($), null, {
            default: U(() => [
              s(o(A)),
              e.document.value && e.path?.value && e.method?.value ? (c(), u("main", X, [
                s(o(G), {
                  modelValue: n.value,
                  "onUpdate:modelValue": t[0] || (t[0] = (r) => n.value = r),
                  class: "absolute top-2 left-3 z-[10001]"
                }, null, 8, ["modelValue"]),
                h(s(o(K), {
                  sidebarWidth: i.value,
                  "onUpdate:sidebarWidth": [
                    t[1] || (t[1] = (r) => i.value = r),
                    C
                  ],
                  activeWorkspace: m,
                  class: "z-[10000] h-full max-md:absolute! max-md:w-full!",
                  documents: [e.document.value],
                  eventBus: o(l),
                  isDroppable: () => !1,
                  layout: "modal",
                  sidebarState: e.sidebarState.state,
                  workspaces: [],
                  onSelectItem: e.sidebarState.handleSelectItem
                }, null, 8, ["sidebarWidth", "documents", "eventBus", "sidebarState", "onSelectItem"]), [
                  [b, n.value]
                ]),
                s(L, {
                  activeWorkspace: m,
                  class: "flex-1",
                  document: e.document.value,
                  documentSlug: e.document.value["x-scalar-navigation"]?.id ?? "",
                  environment: S.value,
                  eventBus: o(l),
                  exampleName: e.exampleName?.value,
                  layout: "modal",
                  method: e.method?.value,
                  path: e.path?.value,
                  plugins: e.plugins,
                  workspaceStore: e.workspaceStore
                }, null, 8, ["document", "documentSlug", "environment", "eventBus", "exampleName", "method", "path", "plugins", "workspaceStore"])
              ])) : (c(), u("div", Y, [...t[3] || (t[3] = [
                d("span", { class: "text-c-3" }, "No document selected", -1)
              ])]))
            ]),
            _: 1
          })
        ], 8, Q),
        d("div", {
          class: "scalar-app-exit",
          onClick: t[2] || (t[2] = (r) => e.modalState.hide())
        })
      ])
    ], 512)), [
      [b, e.modalState.open]
    ]);
  }
});
export {
  me as default
};