@scalar/api-client
Version:
the open source API testing client
149 lines (148 loc) • 5.51 kB
JavaScript
import { defineComponent as T, computed as m, ref as V, watch as _, nextTick as E, createElementBlock as f, openBlock as o, createBlock as v, withDirectives as K, unref as a, withCtx as s, createVNode as u, createElementVNode as i, toDisplayString as y, withKeys as M, vModelText as R, createCommentVNode as S, Fragment as C, renderList as U, normalizeClass as W } from "vue";
import { ScalarComboboxMultiselect as $, ScalarButton as b, ScalarIcon as h, ScalarDropdown as F, ScalarDropdownItem as D, ScalarDropdownDivider as L } from "@scalar/components";
const q = { class: "group-[.alert]:outline-orange group-[.error]:outline-red w-full pr-10 -outline-offset-1 has-[:focus-visible]:rounded-[4px] has-[:focus-visible]:outline" }, G = { class: "text-c-1 whitespace-nowrap" }, H = { class: "text-c-1 overflow-hidden text-ellipsis" }, J = { class: "overflow-hidden text-ellipsis" }, P = { class: "flex h-4 w-4 items-center justify-center" }, Z = /* @__PURE__ */ T({
__name: "DataTableInputSelect",
props: {
modelValue: {},
value: {},
default: {},
canAddCustomValue: { type: Boolean, default: !0 },
type: {}
},
emits: ["update:modelValue"],
setup(B, { emit: j }) {
const n = B, c = j, p = m(() => n.value ?? []), d = V(!1), r = V(""), x = V(null);
_(r, (e) => {
c("update:modelValue", e);
});
const g = (e) => {
c("update:modelValue", e), d.value = !1;
}, z = () => {
r.value.trim() && g(r.value);
}, A = () => {
r.value.trim() || c("update:modelValue", ""), d.value = !1;
}, I = (e) => n.modelValue.toString() === e;
_(d, (e) => {
e && E(() => {
x.value?.focus();
});
});
const k = m(() => n.modelValue !== void 0 ? n.modelValue : n.default), w = m(() => {
const e = new Set(n.modelValue.toString().split(", "));
return p.value.filter((l) => e.has(l)).map((l) => ({ id: l, label: l, value: l }));
}), N = m(
() => p.value.map((e) => ({ id: e, label: e, value: e }))
), O = (e) => {
const l = e.map((t) => t.value);
c("update:modelValue", l.join(", "));
};
return (e, l) => (o(), f("div", q, [
e.type === "array" ? (o(), v(a($), {
key: 0,
modelValue: w.value,
options: N.value,
"onUpdate:modelValue": O
}, {
default: s(() => [
u(a(b), {
class: "custom-scroll h-full justify-start gap-1.5 px-2 py-1.5 pr-6 font-normal outline-none",
fullWidth: "",
variant: "ghost"
}, {
default: s(() => [
i("span", G, y(w.value.length > 0 ? w.value.map((t) => t.label).join(", ") : "Select a value"), 1),
u(a(h), {
icon: "ChevronDown",
size: "md",
class: "min-w-4"
})
]),
_: 1
})
]),
_: 1
}, 8, ["modelValue", "options"])) : d.value ? K((o(), f("input", {
key: 1,
ref_key: "inputRef",
ref: x,
"onUpdate:modelValue": l[0] || (l[0] = (t) => r.value = t),
class: "text-c-1 w-full min-w-0 border-none px-2 py-1.5 outline-none",
placeholder: "Value",
type: "text",
onBlur: A,
onKeyup: M(z, ["enter"])
}, null, 544)), [
[R, r.value]
]) : (o(), v(a(F), {
key: 2,
resize: "",
value: k.value
}, {
items: s(() => [
(o(!0), f(C, null, U(p.value, (t) => (o(), v(a(D), {
key: t,
class: "group/item flex items-center gap-1.5 overflow-hidden text-ellipsis whitespace-nowrap",
value: t,
onClick: (Q) => g(t)
}, {
default: s(() => [
i("div", {
class: W([
"flex h-4 w-4 items-center justify-center rounded-full p-[3px]",
I(t) ? "bg-c-accent text-b-1" : "shadow-border text-transparent"
])
}, [
u(a(h), {
class: "size-2.5",
icon: "Checkmark",
thickness: "3"
})
], 2),
i("span", J, y(t), 1)
]),
_: 2
}, 1032, ["value", "onClick"]))), 128)),
e.canAddCustomValue ? (o(), f(C, { key: 0 }, [
p.value.length ? (o(), v(a(L), { key: 0 })) : S("", !0),
u(a(D), {
class: "flex items-center gap-1.5",
onClick: l[1] || (l[1] = (t) => d.value = !0)
}, {
default: s(() => [
i("div", P, [
u(a(h), {
icon: "Add",
size: "sm"
})
]),
l[2] || (l[2] = i("span", null, "Add value", -1))
]),
_: 1,
__: [2]
})
], 64)) : S("", !0)
]),
default: s(() => [
u(a(b), {
class: "h-full justify-start gap-1.5 overflow-auto px-2 py-1.5 font-normal whitespace-nowrap outline-none",
fullWidth: "",
variant: "ghost"
}, {
default: s(() => [
i("span", H, y(k.value || "Select a value"), 1),
u(a(h), {
icon: "ChevronDown",
size: "md"
})
]),
_: 1
})
]),
_: 1
}, 8, ["value"]))
]));
}
});
export {
Z as default
};