@indielayer/ui
Version:
Indielayer UI Components with Tailwind CSS build for Vue 3
77 lines (76 loc) • 1.93 kB
JavaScript
const l = {
classes: {
wrapper: ({ props: s, data: r }) => {
const t = ["relative !flex items-center whitespace-nowrap px-3 min-h-[2rem]"];
return s.disabled || t.push("cursor-pointer"), r.isActive && t.push("font-medium"), s.rounded && t.push("rounded"), s.size === "xs" ? t.push("py-1 text-xs") : s.size === "sm" ? t.push("py-1.5 text-sm") : s.size === "lg" ? t.push("py-3") : s.size === "xl" ? t.push("py-4 text-lg") : t.push("py-1.5"), t;
}
},
styles: ({ colors: s, props: r, css: t, data: i }) => {
const e = s.getPalette(r.color || "gray"), a = s.getPalette("secondary");
return r.disabled ? t.variables({
text: a[300],
dark: {
text: a[600]
}
}) : r.filled ? i.isActive ? t.variables({
bg: r.selected ? e[100] : r.checkbox ? "transparent" : e[200],
text: e[800],
hover: {
bg: (r.selected, e[200]),
text: e[800]
},
dark: {
bg: (r.selected, e[700]),
text: e[100],
hover: {
bg: (r.selected, e[700]),
text: e[100]
}
}
}) : t.variables({
bg: r.selected ? e[100] : "transparent",
text: e[700],
hover: {
bg: e[100],
text: e[900]
},
dark: {
bg: r.selected ? e[800] : "transparent",
text: e[200],
hover: {
bg: e[600],
text: e[100]
}
}
}) : i.isActive ? t.variables({
text: e[500],
hover: {
text: e[500],
border: e[500]
},
dark: {
text: e[500],
hover: {
text: e[500],
border: e[500]
}
}
}) : t.variables({
text: a[800],
hover: {
text: a[900],
border: a[300]
},
dark: {
text: a[300],
hover: {
text: a[200],
border: a[800]
}
}
});
}
}, x = l;
export {
x as default
};