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