@scalar/api-client
Version:
the open source API testing client
95 lines (94 loc) • 3.81 kB
JavaScript
import { defineComponent as C, ref as B, computed as h, resolveComponent as w, createElementBlock as b, openBlock as n, createVNode as r, unref as p, withCtx as d, withModifiers as R, normalizeClass as M, createCommentVNode as m, createBlock as E, createElementVNode as g, normalizeStyle as I, toDisplayString as N } from "vue";
import { ScalarIcon as S } from "@scalar/components";
import { Draggable as z } from "@scalar/draggable";
import { useRouter as V } from "vue-router";
import $ from "./SidebarListElementActions.vue.js";
const O = { class: "empty-variable-name line-clamp-1 text-sm break-all group-hover:pr-5" }, q = /* @__PURE__ */ C({
__name: "SidebarListElement",
props: {
variable: {},
warningMessage: {},
to: {},
isDeletable: { type: Boolean },
isCopyable: { type: Boolean },
isRenameable: { type: Boolean },
isDraggable: { type: Boolean, default: !1 },
isDroppable: { type: [Boolean, Function], default: !1 },
collectionId: {}
},
emits: ["delete", "colorModal", "rename", "onDragEnd"],
setup(i, { emit: u }) {
const o = u, t = V(), f = (e) => {
e.metaKey ? window.open(t.resolve(i.to).href, "_blank") : t.push(i.to);
}, c = (e) => {
o("delete", e);
}, v = (e) => {
o("colorModal", e);
}, D = (e) => {
o("rename", e);
}, y = B(null), s = h(() => ({
ceiling: 0.5,
floor: 0.5
}));
return (e, l) => {
const k = w("router-link");
return n(), b("li", null, [
r(p(z), {
id: e.variable.uid,
ref_key: "draggableRef",
ref: y,
ceiling: s.value.ceiling,
floor: s.value.floor,
isDraggable: e.isDraggable,
isDroppable: e.isDroppable,
parentIds: e.collectionId ? [e.collectionId] : [],
onOnDragEnd: l[2] || (l[2] = (...a) => e.$emit("onDragEnd", ...a))
}, {
default: d(() => [
r(k, {
class: M(["text-c-2 hover:bg-b-2 group relative flex h-8 items-center gap-1.5 rounded py-1 pr-1.5 font-medium no-underline", [e.variable.color ? "pl-5" : "pl-1.5"]]),
exactActiveClass: "bg-b-2 !text-c-1",
role: "button",
to: e.to,
onClick: l[1] || (l[1] = R((a) => f(a), ["prevent"]))
}, {
default: d(() => [
e.variable.color ? (n(), b("button", {
key: 0,
class: "hover:bg-b-3 rounded p-1.5",
type: "button",
onClick: l[0] || (l[0] = (a) => v(e.variable.uid))
}, [
g("div", {
class: "h-2.5 w-2.5 rounded-xl",
style: I({ backgroundColor: e.variable.color })
}, null, 4)
])) : m("", !0),
e.variable.icon ? (n(), E(p(S), {
key: 1,
class: "text-sidebar-c-2 size-3.5 stroke-[2.25]",
icon: e.variable.icon
}, null, 8, ["icon"])) : m("", !0),
g("span", O, N(e.variable.name), 1),
r($, {
isCopyable: !!e.isCopyable,
isDeletable: !!e.isDeletable,
isRenameable: !!e.isRenameable,
variable: { ...e.variable, isDefault: e.variable.isDefault ?? !1 },
warningMessage: e.warningMessage,
onDelete: c,
onRename: D
}, null, 8, ["isCopyable", "isDeletable", "isRenameable", "variable", "warningMessage"])
]),
_: 1
}, 8, ["class", "to"])
]),
_: 1
}, 8, ["id", "ceiling", "floor", "isDraggable", "isDroppable", "parentIds"])
]);
};
}
});
export {
q as default
};