@scalar/api-client
Version:
the open source API testing client
122 lines (121 loc) • 5.21 kB
JavaScript
import { defineComponent as b, ref as y, useTemplateRef as x, computed as B, createBlock as s, openBlock as a, normalizeClass as $, withCtx as I, createElementBlock as r, createCommentVNode as m, createElementVNode as O, renderSlot as c, createTextVNode as S, Fragment as E, mergeProps as v, unref as u } from "vue";
import { ScalarIconButton as V } from "@scalar/components";
import { ScalarIconX as h, ScalarIconEye as A, ScalarIconEyeSlash as T } from "@scalar/icons";
import W from "./DataTableCell.vue.js";
import q from "./DataTableInputSelect.vue.js";
import F from "../code-input/CodeInput.vue.js";
const N = ["for"], P = { class: "relative flex min-w-0 flex-1" }, D = ["readOnly", "type", "value"], U = {
key: 1,
class: "centered-y text-orange absolute right-7 text-xs"
}, G = /* @__PURE__ */ b({
inheritAttrs: !1,
__name: "DataTableInput",
props: {
id: {},
type: {},
containerClass: {},
required: { type: Boolean, default: !1 },
modelValue: {},
canAddCustomEnumValue: { type: Boolean, default: !0 },
readOnly: { type: Boolean, default: !1 },
enum: {},
min: {},
max: {},
environment: {},
description: {},
lineWrapping: { type: Boolean, default: !1 }
},
emits: ["update:modelValue", "inputFocus", "inputBlur", "selectVariable"],
setup(e, { emit: w }) {
const t = e, d = w, i = y(!0), k = y(!1), f = x("codeInput"), g = () => !k.value && d("inputBlur"), p = B(
() => t.type === "password" ? "text" : t.type ?? "text"
), C = () => {
!t.enum?.length && !t.readOnly && f.value?.focus();
};
return (n, l) => (a(), s(W, {
class: $(["relative flex", e.containerClass])
}, {
default: I(() => [
n.$slots.default ? (a(), r("div", {
key: 0,
class: "text-c-1 flex items-center pr-0 pl-3",
for: e.id ?? "",
onClick: C
}, [
c(n.$slots, "default", {}, void 0, !0),
l[6] || (l[6] = S(": ", -1))
], 8, N)) : m("", !0),
O("div", P, [
t.enum && t.enum.length ? (a(), s(q, {
key: 0,
canAddCustomValue: t.canAddCustomEnumValue,
modelValue: t.modelValue,
value: t.enum,
"onUpdate:modelValue": l[0] || (l[0] = (o) => d("update:modelValue", o))
}, null, 8, ["canAddCustomValue", "modelValue", "value"])) : (a(), r(E, { key: 1 }, [
i.value && e.type === "password" ? (a(), r("input", v({ key: 0 }, e.id ? { ...n.$attrs, id: e.id } : n.$attrs, {
autocomplete: "off",
class: ["text-c-1 disabled:text-c-2 peer w-full min-w-0 border-none px-2 py-1.25 -outline-offset-1", { "scalar-password-input": e.type === "password" }],
"data-1p-ignore": "",
readOnly: e.readOnly,
spellcheck: "false",
type: p.value,
value: e.modelValue,
onInput: l[1] || (l[1] = (o) => d(
"update:modelValue",
o.target.value ?? ""
))
}), null, 16, D)) : (a(), s(u(F), v({ key: 1 }, n.$attrs, {
id: e.id,
ref_key: "codeInput",
ref: f,
class: ["text-c-1 disabled:text-c-2 peer w-full min-w-0 border-none -outline-offset-1", [
e.type === "password" && e.description && "pr-12",
e.description && "pr-8",
e.type === "password" && "scalar-password-input"
]],
description: e.description,
disableCloseBrackets: "",
disableTabIndent: "",
environment: e.environment,
lineWrapping: !!e.lineWrapping,
max: e.max,
min: e.min,
modelValue: e.modelValue ?? "",
readOnly: e.readOnly,
required: !!e.required,
spellcheck: "false",
type: p.value,
onBlur: g,
onFocus: l[2] || (l[2] = (o) => d("inputFocus")),
"onUpdate:modelValue": l[3] || (l[3] = (o) => d("update:modelValue", o))
}), null, 16, ["id", "class", "description", "environment", "lineWrapping", "max", "min", "modelValue", "readOnly", "required", "type"]))
], 64))
]),
n.$slots.warning ? (a(), r("div", U, [
c(n.$slots, "warning", {}, void 0, !0)
])) : m("", !0),
c(n.$slots, "icon", {}, void 0, !0),
e.modelValue ? (a(), s(u(V), {
key: 2,
class: "-ml-.25 h-6 w-6 self-center p-1.25",
icon: u(h),
label: "Clear Value",
onClick: l[4] || (l[4] = (o) => d("update:modelValue", ""))
}, null, 8, ["icon"])) : m("", !0),
e.type === "password" ? (a(), s(u(V), {
key: 3,
class: "-ml-.5 mr-1.25 h-6 w-6 self-center p-1.25",
"data-testid": "data-table-password-toggle",
icon: i.value ? u(A) : u(T),
label: i.value ? "Show Password" : "Hide Password",
onClick: l[5] || (l[5] = (o) => i.value = !i.value)
}, null, 8, ["icon", "label"])) : m("", !0)
]),
_: 3
}, 8, ["class"]));
}
});
export {
G as default
};