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