@scalar/api-client/dist/views/Request/RequestSection/RequestParams.vue.js

the open source API testing client

import { defineComponent as O, computed as m, onMounted as S, nextTick as p, ref as N, watch as A, createBlock as d, openBlock as v, withCtx as i, createElementVNode as f, createCommentVNode as h, createVNode as k, normalizeClass as B, unref as g, withModifiers as M, createTextVNode as P, toDisplayString as R } from "vue";
import { ScalarTooltip as W, ScalarButton as z } from "@scalar/components";
import { requestExampleParametersSchema as w } from "@scalar/oas-utils/entities/spec";
import D from "../../../components/ViewLayout/ViewLayoutCollapse.vue.js";
import V from "./RequestTable.vue.js";
import { useWorkspace as x } from "../../../store/store.js";
const G = { class: "text-c-2 request-meta-buttons flex whitespace-nowrap opacity-0 group-hover/params:opacity-100 has-[:focus-visible]:opacity-100" }, U = { class: "sr-only" }, Z = /* @__PURE__ */ O({
  __name: "RequestParams",
  props: {
    example: {},
    environment: {},
    envVariables: {},
    workspace: {},
    title: {},
    label: {},
    paramKey: {},
    readOnlyEntries: { default: () => [] },
    invalidParams: {}
  },
  setup(t) {
    const { requestExampleMutators: s } = x(), n = m(() => t.example.parameters[t.paramKey] ?? []);
    S(() => {
      p(() => {
        y();
      });
    });
    const o = () => {
      const e = w.parse({ enabled: !1 }), a = [...n.value, e];
      s.edit(t.example.uid, `parameters.${t.paramKey}`, a);
    }, u = N(null), C = (e, a, r) => {
      const c = n.value;
      if (c.length > e) {
        const l = [...c];
        if (!l[e])
          return;
        l[e] = { ...l[e], [a]: r }, (l[e].key !== "" || l[e].value !== "") && (l[e].enabled = !0), l[e].key === "" && l[e].value === "" && l.splice(e, 1), s.edit(
          t.example.uid,
          `parameters.${t.paramKey}`,
          l
        );
      } else {
        const l = [w.parse({ [a]: r })];
        s.edit(t.example.uid, `parameters.${t.paramKey}`, l), p(() => {
          if (!u.value)
            return;
          u.value.querySelectorAll("input")[a === "key" ? 0 : 1]?.focus();
        });
      }
      e === c.length - 1 && o();
    }, K = (e, a) => s.edit(
      t.example.uid,
      `parameters.${t.paramKey}.${e}.enabled`,
      a
    ), $ = () => {
      const e = n.value.filter((a) => a.required);
      s.edit(
        t.example.uid,
        `parameters.${t.paramKey}`,
        e
      ), p(() => o());
    }, q = (e) => {
      const a = n.value;
      if (a.length > e) {
        const r = [...a];
        r.splice(e, 1), s.edit(
          t.example.uid,
          `parameters.${t.paramKey}`,
          r
        );
      }
    };
    function y() {
      if (n.value.length === 0)
        o();
      else if (n.value.length >= 1) {
        const e = n.value[n.value.length - 1];
        e && e.key !== "" && e.value !== "" && o();
      }
    }
    const E = m(
      () => n.value.filter((e) => e.key || e.value).length
    ), T = m(() => n.value.length > 1);
    A(
      () => t.example,
      (e, a) => {
        e !== a && y();
      },
      { immediate: !0 }
    );
    const b = m(() => (t.readOnlyEntries ?? []).length > 0);
    return (e, a) => (v(), d(D, {
      class: "group/params",
      itemCount: E.value
    }, {
      title: i(() => [
        P(R(e.title), 1)
      ]),
      actions: i(() => [
        f("div", G, [
          T.value ? (v(), d(g(W), {
            key: 0,
            content: "Clear optional parameters",
            placement: "left"
          }, {
            default: i(() => [
              k(g(z), {
                class: "pr-0.75 pl-1 transition-none",
                size: "sm",
                variant: "ghost",
                onClick: M($, ["stop"])
              }, {
                default: i(() => [
                  a[0] || (a[0] = P(" Clear ", -1)),
                  f("span", U, "All " + R(e.title), 1)
                ]),
                _: 1
              })
            ]),
            _: 1
          })) : h("", !0)
        ])
      ]),
      default: i(() => [
        f("div", {
          ref_key: "tableWrapperRef",
          ref: u
        }, [
          b.value ? (v(), d(V, {
            key: 0,
            class: B(["flex-1", { "bg-c-3/5": b.value }]),
            columns: ["32px", "", ""],
            envVariables: e.envVariables,
            environment: e.environment,
            invalidParams: e.invalidParams,
            isGlobal: "",
            isReadOnly: "",
            items: e.readOnlyEntries,
            label: e.label,
            workspace: e.workspace
          }, null, 8, ["class", "envVariables", "environment", "invalidParams", "items", "label", "workspace"])) : h("", !0),
          k(V, {
            class: "flex-1",
            columns: ["32px", "", ""],
            envVariables: e.envVariables,
            environment: e.environment,
            invalidParams: e.invalidParams,
            items: n.value,
            label: e.label,
            workspace: e.workspace,
            onToggleRow: K,
            onUpdateRow: C,
            onDeleteRow: q
          }, null, 8, ["envVariables", "environment", "invalidParams", "items", "label", "workspace"])
        ], 512)
      ]),
      _: 1
    }, 8, ["itemCount"]));
  }
});
export {
  Z as default
};