@indielayer/ui
Version:
Indielayer UI Components with Tailwind CSS build for Vue 3
60 lines (59 loc) • 2.18 kB
JavaScript
const i = {
classes: {
wrapper: ({ data: e }) => {
const r = ["inline-block relative cursor-pointer align-middle"];
return e.isInsideForm && !e.isInsideFormGroup && r.push("mb-5"), r;
},
box: ({ props: e }) => {
const r = ["rounded flex justify-center items-center shrink-0 border border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)]"];
return e.size === "lg" ? r.push("h-5 w-5") : e.size === "xl" ? r.push("h-6 w-6") : r.push("h-4 w-4"), r;
},
content: ({ props: e }) => {
const r = ["flex items-center"];
return e.disabled && r.push("cursor-not-allowed"), r;
},
icon: ({ props: e }) => {
const r = ["fill-current text-white"];
return e.size === "lg" ? r.push("h-3 w-3") : e.size === "xl" ? r.push("h-4 w-4") : r.push("h-2.5 w-2.5"), r;
},
label: ({ props: e, data: r }) => {
const s = ["inline-block text-secondary-800 dark:text-secondary-200 pl-2"];
return s.push(r.isInsideFormGroup ? "font-normal" : "font-medium"), e.size === "xs" ? s.push("text-xs") : e.size === "sm" ? s.push("text-sm") : e.size === "lg" ? s.push("text-lg") : e.size === "xl" && s.push("text-xl"), s;
}
},
styles({ props: e, colors: r, css: s, data: a }) {
const t = r.getPalette("gray"), l = r.getPalette(e.color), o = [];
return e.loading ? s.variables({
bg: "transparent",
border: "transparent",
dark: {
bg: "transparent",
border: "transparent"
}
}) : (e.disabled ? o.push(s.variables({
bg: t[100],
border: t[200],
dark: {
bg: t[800],
border: t[700]
}
})) : (a.checked ? o.push(s.variables({
bg: l[500],
border: l[500],
dark: {
bg: l[500],
border: l[500]
}
})) : o.push(s.variables({
bg: "#fff",
border: e.glow ? l[300] : t[300],
dark: {
bg: t[900],
border: e.glow ? l[300] : t[400]
}
})), e.glow && o.push(s.get("glow", r.getColorOpacity(l[500], 0.5)))), o);
}
}, n = i;
export {
n as default
};