@scalar/api-client/dist/v2/blocks/scalar-address-bar-block/components/AddressBar.vue2.js

the open source API testing client

import { defineComponent as I, useId as L, computed as w, ref as S, useTemplateRef as U, onMounted as M, onBeforeUnmount as N, createElementBlock as z, openBlock as h, unref as n, createElementVNode as s, normalizeClass as D, createVNode as a, createCommentVNode as E, normalizeStyle as F, createBlock as H, createTextVNode as p, toDisplayString as m, withCtx as W } from "vue";
import { ScalarWrappingText as O, ScalarButton as P, ScalarIcon as K } from "@scalar/components";
import { REQUEST_METHODS as Q } from "@scalar/helpers/http/http-info";
import { ScalarIconWarningCircle as j } from "@scalar/icons";
import { useLoadingAnimation as G } from "../hooks/use-loading-animation.js";
import J from "./AddressBarHistory.vue.js";
import X from "../../../../components/HttpMethod/HttpMethod.vue.js";
import Y from "../../../components/server/ServerDropdown.vue.js";
import Z from "../../../components/code-input/CodeInput.vue.js";
const _ = ["id"], ee = { class: "pointer-events-none absolute top-0 left-0 block h-full w-full overflow-hidden rounded-lg border" }, te = { class: "z-context-plus flex gap-1" }, oe = { class: "scroll-timeline-x scroll-timeline-x-hidden z-context-plus relative flex w-full bg-blend-normal" }, se = {
  key: 0,
  class: "z-context absolute inset-x-0 top-[calc(100%+4px)] flex flex-col items-center rounded px-6"
}, ne = { class: "text-c-danger bg-b-danger border-c-danger flex items-center gap-1 rounded border p-1" }, le = { class: "min-w-0 flex-1" }, re = {
  "aria-hidden": "true",
  class: "inline-flex items-center gap-1"
}, ae = { class: "sr-only" }, be = /* @__PURE__ */ I({
  __name: "AddressBar",
  props: {
    path: {},
    method: {},
    server: {},
    servers: {},
    history: {},
    layout: {},
    eventBus: {},
    environment: {}
  },
  emits: ["execute", "update:servers"],
  setup(o, { expose: R, emit: $ }) {
    const f = $, v = L(), { percentage: b, startLoading: g, stopLoading: c } = G(), V = w(() => ({
      backgroundColor: `color-mix(in srgb, transparent 90%, ${Q[o.method].colorVar})`,
      transform: `translate3d(-${b.value}%,0,0)`
    })), d = S(null), r = S(null), x = w(() => r.value || d.value), B = (e, t, l) => {
      const A = i.value?.cursorPosition();
      o.eventBus.emit(
        "operation:update:pathMethod",
        {
          meta: { method: o.method, path: o.path },
          payload: { method: e, path: t },
          callback: (u) => {
            (u === "success" || u === "no-change") && (r.value = null, d.value = null), u === "success" ? o.eventBus.emit("ui:focus:address-bar", { position: A }) : u === "conflict" && (e !== o.method && (r.value = e), t !== o.path && (d.value = t));
          }
        },
        l
      );
    }, q = (e) => B(e, d.value ?? o.path), T = (e) => {
      const t = e.startsWith("/") ? e : `/${e}`;
      B(r.value ?? o.method, t, {
        debounceKey: `operation:update:pathMethod-${o.path}-${o.method}`
      });
    }, y = U("sendButtonRef"), i = U("addressBarRef"), C = () => y.value?.$el?.focus(), k = (e) => {
      if (i.value?.isFocused && o.layout !== "desktop")
        return;
      const t = e && "position" in e ? e.position : "end";
      i.value?.focus(t), e && "event" in e && e.event.preventDefault();
    };
    return M(() => {
      o.eventBus.on("ui:focus:address-bar", k), o.eventBus.on("ui:focus:send-button", C), o.eventBus.on("hooks:on:request:sent", g), o.eventBus.on("hooks:on:request:complete", c);
    }), N(() => {
      o.eventBus.off("ui:focus:address-bar", k), o.eventBus.off("ui:focus:send-button", C), o.eventBus.off("hooks:on:request:sent", g), o.eventBus.off("hooks:on:request:complete", c), c();
    }), R({
      methodConflict: r,
      pathConflict: d
    }), (e, t) => (h(), z("div", {
      id: n(v),
      class: "scalar-address-bar order-last flex h-(--scalar-address-bar-height) w-full [--scalar-address-bar-height:32px] lg:order-none lg:w-auto"
    }, [
      s("div", {
        class: D(["address-bar-bg-states text-xxs group relative order-last flex w-full max-w-[calc(100dvw-24px)] flex-1 flex-row items-stretch rounded-lg p-0.75 lg:order-none lg:max-w-[580px] lg:min-w-[580px] xl:max-w-[720px] xl:min-w-[720px]", {
          "outline-c-danger outline": x.value
        }])
      }, [
        s("div", ee, [
          s("div", {
            class: "absolute top-0 left-0 z-[1002] h-full w-full",
            style: F(V.value)
          }, null, 4)
        ]),
        s("div", te, [
          a(n(X), {
            isEditable: e.layout !== "modal",
            isSquare: "",
            method: r.value ?? e.method,
            teleport: "",
            onChange: q
          }, null, 8, ["isEditable", "method"])
        ]),
        s("div", oe, [
          e.servers.length ? (h(), H(n(Y), {
            key: 0,
            layout: e.layout,
            server: e.server,
            servers: e.servers,
            target: n(v),
            "onUpdate:selectedServer": t[0] || (t[0] = (l) => e.eventBus.emit("server:update:selected", l)),
            "onUpdate:servers": t[1] || (t[1] = (l) => f("update:servers")),
            "onUpdate:variable": t[2] || (t[2] = (l) => e.eventBus.emit("server:update:variables", l))
          }, null, 8, ["layout", "server", "servers", "target"])) : E("", !0),
          t[6] || (t[6] = s("div", { class: "fade-left" }, null, -1)),
          a(n(Z), {
            ref_key: "addressBarRef",
            ref: i,
            alwaysEmitChange: "",
            "aria-label": "Path",
            class: "min-w-fit outline-none",
            disableCloseBrackets: "",
            disabled: e.layout === "modal",
            disableEnter: "",
            disableTabIndent: "",
            emitOnBlur: !1,
            environment: e.environment,
            importCurl: "",
            layout: e.layout,
            modelValue: e.path,
            placeholder: e.server ? "" : "Enter a URL or cURL command",
            server: "",
            onCurl: t[3] || (t[3] = (l) => e.eventBus.emit("ui:open:command-palette", {
              action: "import-curl-command",
              payload: {
                curl: l
              }
            })),
            onSubmit: t[4] || (t[4] = (l) => f("execute")),
            "onUpdate:modelValue": T
          }, null, 8, ["disabled", "environment", "layout", "modelValue", "placeholder"]),
          t[7] || (t[7] = s("div", { class: "fade-right" }, null, -1))
        ]),
        a(J, {
          history: e.history,
          target: n(v)
        }, null, 8, ["history", "target"]),
        x.value ? (h(), z("div", se, [
          s("div", ne, [
            a(n(j), { size: "sm" }),
            s("div", le, [
              t[8] || (t[8] = p(" A ", -1)),
              s("em", null, m(r.value?.toUpperCase() ?? e.method.toUpperCase()), 1),
              t[9] || (t[9] = p(" request to ", -1)),
              a(n(O), {
                text: d.value ?? e.path
              }, null, 8, ["text"]),
              t[10] || (t[10] = p(" already exists in this document ", -1))
            ])
          ])
        ])) : E("", !0),
        a(n(P), {
          ref_key: "sendButtonRef",
          ref: y,
          class: "z-context-plus relative h-auto shrink-0 overflow-hidden py-1 pr-2.5 pl-2 font-bold",
          disabled: n(b) < 100,
          onClick: t[5] || (t[5] = (l) => f("execute"))
        }, {
          default: W(() => [
            s("span", re, [
              a(n(K), {
                class: "relative shrink-0 fill-current",
                icon: "Play",
                size: "xs"
              }),
              t[11] || (t[11] = s("span", { class: "text-xxs hidden lg:flex" }, "Send", -1))
            ]),
            s("span", ae, " Send " + m(e.method) + " request to " + m(e.server?.url ?? "") + m(e.path), 1)
          ]),
          _: 1
        }, 8, ["disabled"])
      ], 2)
    ], 8, _));
  }
});
export {
  be as default
};