@scalar/api-client
Version:
the open source API testing client
205 lines (204 loc) • 8.45 kB
JavaScript
import { defineComponent as q, ref as x, watch as g, computed as o, createBlock as s, openBlock as d, unref as n, normalizeClass as E, withCtx as m, createVNode as u, createCommentVNode as f, createElementBlock as R, Fragment as N, createElementVNode as h, toDisplayString as P } from "vue";
import { ScalarButton as C, ScalarIconButton as j, ScalarIcon as G } from "@scalar/components";
import { ScalarIconTrash as K, ScalarIconGlobe as O } from "@scalar/icons";
import { unpackProxyObject as B } from "@scalar/workspace-store/helpers/unpack-proxy";
import { resolve as W } from "@scalar/workspace-store/resolve";
import { getFileName as A } from "../helpers/files.js";
import { validateParameter as H } from "../helpers/validate-parameter.js";
import D from "./RequestTableTooltip.vue.js";
import J from "../../../components/data-table/DataTableRow.vue.js";
import L from "../../../components/data-table/DataTableCheckbox.vue.js";
import y from "../../../components/data-table/DataTableCell.vue.js";
import S from "../../../components/code-input/CodeInput.vue.js";
const M = { class: "text-c-2 filemask flex w-full max-w-[100%] items-center justify-center overflow-hidden p-1" }, Q = {
key: 1,
class: "p-0.5"
}, de = /* @__PURE__ */ q({
__name: "RequestTableRow",
props: {
data: {},
hasCheckboxDisabled: { type: Boolean },
invalidParams: {},
label: {},
environment: {},
showUploadButton: { type: Boolean }
},
emits: ["upsertRow", "deleteRow", "uploadFile", "removeFile", "navigate"],
setup(e, { emit: F }) {
const r = F, c = x(e.data.name ?? ""), i = x(B(e.data.value) ?? ""), v = x(e.data.isDisabled ?? !1);
g(
() => e.data.name,
(t) => c.value = t ?? ""
), g(
() => e.data.value,
(t) => i.value = B(t) ?? ""
), g(
() => e.data.isDisabled,
(t) => v.value = t ?? !1
);
const k = o(() => i.value instanceof File), w = o(
() => (k.value ? A(i.value) : i.value) ?? ""
), z = o(() => e.data.schema?.default), I = o(() => {
if (!e.data.schema)
return [];
if (e.data.schema.enum)
return e.data.schema.enum.map((t) => String(t));
if ("items" in e.data.schema) {
const t = W.schema(e.data.schema.items);
if (t?.enum)
return t.enum.map((a) => String(a));
}
return [];
}), T = o(
() => e.data.schema && "minimum" in e.data.schema ? e.data.schema.minimum : void 0
), $ = o(
() => e.data.schema && "maximum" in e.data.schema ? e.data.schema.maximum : void 0
), U = o(
() => e.data.schema && "type" in e.data.schema ? e.data.schema.type : void 0
), V = o(
() => H(e.data.schema, i.value)
), b = (t) => {
t.name !== void 0 && (c.value = t.name), t.value !== void 0 && (i.value = t.value), v.value = t.isDisabled ?? !1, r("upsertRow", {
name: c.value,
value: i.value,
isDisabled: v.value
});
};
return (t, a) => (d(), s(n(J), {
id: e.data.name,
class: E({
alert: V.value.ok === !1,
error: V.value.ok === !1 && e.invalidParams?.has(e.data.name)
})
}, {
default: m(() => [
u(n(L), {
class: "!border-r",
disabled: e.hasCheckboxDisabled ?? !1,
modelValue: !v.value,
"onUpdate:modelValue": a[0] || (a[0] = (l) => b({ isDisabled: !l }))
}, null, 8, ["disabled", "modelValue"]),
u(n(y), null, {
default: m(() => [
u(n(S), {
"aria-label": `${e.label} Key`,
disableCloseBrackets: "",
disabled: e.data.isReadonly,
disableEnter: "",
disableTabIndent: "",
environment: e.environment,
lineWrapping: "",
modelValue: c.value,
placeholder: "Key",
required: !!e.data.isRequired,
onSelectVariable: a[1] || (a[1] = (l) => b({ name: l })),
"onUpdate:modelValue": a[2] || (a[2] = (l) => b({ name: l }))
}, null, 8, ["aria-label", "disabled", "environment", "modelValue", "required"])
]),
_: 1
}),
u(n(y), null, {
default: m(() => [
u(n(S), {
"aria-label": `${e.label} Value`,
class: "pr-6 group-hover:pr-10 group-has-[.cm-focused]:pr-10",
default: z.value,
disableCloseBrackets: "",
disabled: e.data.isReadonly,
disableEnter: "",
disableTabIndent: "",
enum: I.value,
environment: e.environment,
examples: e.data.schema?.examples?.map((l) => String(l)) ?? [],
linethrough: e.data.isOverridden,
lineWrapping: "",
max: $.value,
min: T.value,
modelValue: w.value,
placeholder: "Value",
type: U.value,
"onUpdate:modelValue": a[5] || (a[5] = (l) => b({ value: l }))
}, {
icon: m(() => [
(e.data.name || i.value) && !e.data.isRequired && e.data.isReadonly !== !0 ? (d(), s(n(C), {
key: 0,
class: "text-c-2 hover:text-c-1 hover:bg-b-2 z-context -mr-0.5 hidden h-fit rounded p-1 group-hover:flex group-has-[.cm-focused]:flex",
size: "sm",
variant: "ghost",
onClick: a[3] || (a[3] = (l) => r("deleteRow"))
}, {
default: m(() => [
u(n(K), { class: "size-3.5" })
]),
_: 1
})) : f("", !0),
e.data.globalRoute !== void 0 ? (d(), s(n(j), {
key: 1,
class: "text-c-2 hover:text-c-1 hover:bg-b-2 z-context -mr-0.5 h-fit",
icon: n(O),
label: "Global cookies are shared across the whole workspace. Click to navigate.",
size: "xs",
tooltip: "top",
variant: "ghost",
onClick: a[4] || (a[4] = (l) => r("navigate", e.data.globalRoute))
}, null, 8, ["icon"])) : f("", !0),
e.data.isReadonly ? (d(), s(D, {
key: 2,
description: "This is a readonly property and you can not modify it! If you want to change it you have to override it or disable it using the checkbox",
value: null
})) : e.data.schema ? (d(), s(D, {
key: 3,
description: e.data.description,
schema: e.data.schema,
value: i.value
}, null, 8, ["description", "schema", "value"])) : f("", !0)
]),
_: 1
}, 8, ["aria-label", "default", "disabled", "enum", "environment", "examples", "linethrough", "max", "min", "modelValue", "type"])
]),
_: 1
}),
e.showUploadButton ? (d(), s(n(y), {
key: 0,
class: "group/upload flex items-center justify-center whitespace-nowrap"
}, {
default: m(() => [
k.value ? (d(), R(N, { key: 0 }, [
h("div", M, [
h("span", null, P(w.value), 1)
]),
h("button", {
class: "bg-b-2 centered-x centered-y absolute hidden w-[calc(100%_-_8px)] rounded p-0.5 text-center text-xs font-medium group-hover/upload:block",
type: "button",
onClick: a[6] || (a[6] = (l) => r("removeFile"))
}, " Delete ")
], 64)) : (d(), R("div", Q, [
u(n(C), {
class: "bg-b-2 hover:bg-b-3 text-c-2 h-fit border-0 py-px shadow-none",
size: "sm",
variant: "outlined",
onClick: a[7] || (a[7] = (l) => r("uploadFile"))
}, {
default: m(() => [
a[8] || (a[8] = h("span", null, "Select File", -1)),
u(n(G), {
class: "ml-1",
icon: "Upload",
size: "xs",
thickness: "2.5"
})
]),
_: 1
})
]))
]),
_: 1
})) : f("", !0)
]),
_: 1
}, 8, ["id", "class"]));
}
});
export {
de as default
};