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