@scalar/api-client
Version:
the open source API testing client
54 lines (53 loc) • 1.79 kB
JavaScript
import { defineComponent as n, createBlock as r, openBlock as d, withCtx as u, createElementVNode as t, normalizeClass as l, unref as o, createVNode as m } from "vue";
import { cva as p, ScalarIcon as f } from "@scalar/components";
import b from "./DataTableCell.vue.js";
const h = ["checked", "disabled"], x = /* @__PURE__ */ n({
__name: "DataTableCheckbox",
props: {
modelValue: { type: Boolean },
disabled: { type: Boolean },
align: { default: "center" }
},
emits: ["update:modelValue"],
setup(e) {
const c = p({
base: "w-8 h-8 flex items-center justify-center text-b-2 peer-checked:text-c-1 pointer-events-none absolute",
variants: {
align: {
left: "left-0",
center: "centered"
}
}
});
return (s, a) => (d(), r(b, { class: "group/cell relative flex min-w-8" }, {
default: u(() => [
t("input", {
checked: e.modelValue,
class: "peer absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-default",
disabled: !!e.disabled,
type: "checkbox",
onChange: a[0] || (a[0] = (i) => s.$emit("update:modelValue", i.target.checked))
}, null, 40, h),
t("div", {
class: l(o(c)({ align: e.align }))
}, [
t("div", {
class: l([
"absolute m-auto size-3/4 rounded border-[1px] opacity-0",
!e.disabled && "group-has-[:focus-visible]/cell:border-c-accent group-hover:opacity-100 group-has-[:focus-visible]/cell:opacity-100"
])
}, null, 2),
m(o(f), {
icon: "Checkmark",
size: "xs",
thickness: "2.5"
})
], 2)
]),
_: 1
}));
}
});
export {
x as default
};