@scalar/api-client
Version:
the open source API testing client
120 lines (119 loc) • 4.97 kB
JavaScript
import { defineComponent as b, ref as d, computed as g, createBlock as r, openBlock as n, normalizeClass as B, withCtx as C, createElementBlock as i, createCommentVNode as u, createElementVNode as $, renderSlot as p, createTextVNode as O, Fragment as I, mergeProps as y, unref as h } from "vue";
import { ScalarIconButton as A } from "@scalar/components";
import W from "../CodeInput/CodeInput.vue.js";
import q from "./DataTableCell.vue.js";
import E from "./DataTableInputSelect.vue.js";
const F = ["for"], S = { class: "relative flex min-w-0 flex-1" }, T = ["readOnly", "type", "value"], N = {
key: 1,
class: "centered-y text-orange absolute right-7 text-xs"
}, L = /* @__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: {},
envVariables: {},
workspace: {},
description: {},
lineWrapping: { type: Boolean, default: !1 }
},
emits: ["update:modelValue", "inputFocus", "inputBlur", "selectVariable"],
setup(v, { emit: c }) {
const a = v, t = c, s = d(!0), w = d(!1), m = d(null), V = () => {
w.value || t("inputBlur");
}, f = g(
() => a.type === "password" ? "text" : a.type ?? "text"
), k = () => {
var e, l;
!((e = a.enum) != null && e.length) && !a.readOnly && ((l = m.value) == null || l.focus());
};
return (e, l) => (n(), r(q, {
class: B(["relative flex", e.containerClass])
}, {
default: C(() => [
e.$slots.default ? (n(), i("div", {
key: 0,
class: "text-c-1 flex items-center pr-0 pl-3",
for: e.id ?? "",
onClick: k
}, [
p(e.$slots, "default", {}, void 0, !0),
l[5] || (l[5] = O(": "))
], 8, F)) : u("", !0),
$("div", S, [
a.enum && a.enum.length ? (n(), r(E, {
key: 0,
canAddCustomValue: a.canAddCustomEnumValue,
modelValue: a.modelValue,
value: a.enum,
"onUpdate:modelValue": l[0] || (l[0] = (o) => t("update:modelValue", o))
}, null, 8, ["canAddCustomValue", "modelValue", "value"])) : (n(), i(I, { key: 1 }, [
s.value && e.type === "password" ? (n(), i("input", y({ key: 0 }, e.id ? { ...e.$attrs, id: e.id } : e.$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: f.value,
value: e.modelValue,
onInput: l[1] || (l[1] = (o) => t(
"update:modelValue",
o.target.value ?? ""
))
}), null, 16, T)) : (n(), r(W, y({ key: 1 }, e.$attrs, {
id: e.id,
ref_key: "codeInput",
ref: m,
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: "",
envVariables: e.envVariables,
environment: e.environment,
lineWrapping: !!e.lineWrapping,
max: e.max,
min: e.min,
modelValue: e.modelValue ?? "",
readOnly: e.readOnly,
required: !!e.required,
spellcheck: "false",
type: f.value,
workspace: e.workspace,
onBlur: V,
onFocus: l[2] || (l[2] = (o) => t("inputFocus")),
"onUpdate:modelValue": l[3] || (l[3] = (o) => t("update:modelValue", o))
}), null, 16, ["id", "class", "description", "envVariables", "environment", "lineWrapping", "max", "min", "modelValue", "readOnly", "required", "type", "workspace"]))
], 64))
]),
e.$slots.warning ? (n(), i("div", N, [
p(e.$slots, "warning", {}, void 0, !0)
])) : u("", !0),
p(e.$slots, "icon", {}, void 0, !0),
e.type === "password" ? (n(), r(h(A), {
key: 2,
class: "-ml-.5 mr-1.25 h-6 w-6 self-center p-1.25",
icon: s.value ? "Show" : "Hide",
label: s.value ? "Show Password" : "Hide Password",
onClick: l[4] || (l[4] = (o) => s.value = !s.value)
}, null, 8, ["icon", "label"])) : u("", !0)
]),
_: 3
}, 8, ["class"]));
}
});
export {
L as default
};