@indielayer/ui
Version:
Indielayer UI Components with Tailwind CSS build for Vue 3
142 lines (141 loc) • 4.81 kB
JavaScript
const g = {
classes: {
wrapper({ props: e, slots: n, data: i }) {
const d = ["relative transition duration-150 focus-visible:outline-secondary-300 outline-transparent outline outline-1 outline-offset-2 inline-flex items-center justify-center font-medium whitespace-nowrap overflow-hidden align-middle active:!shadow-none border appearance-none shrink-0"];
return i.isButtonGroup || d.push(e.rounded ? "rounded-full" : "rounded-md"), !e.flat && !e.light && !e.ghost && !e.disabled && !e.loading && d.push("shadow-sm"), e.size === "xs" ? d.push(n.default ? `py-1 text-xs ${e.icon, "px-2"}` : "leading-none p-1") : e.size === "sm" ? d.push(n.default ? `py-1.5 text-sm ${e.icon, "px-3"}` : "leading-none p-1.5") : e.size === "lg" ? d.push(n.default ? `py-3 text-lg ${e.icon ? "px-4" : "px-5"}` : "leading-none p-3") : e.size === "xl" ? d.push(n.default ? "py-4 text-xl px-6" : "leading-none p-3.5") : d.push(n.default ? "py-2 px-4" : "leading-none p-[0.532rem]"), e.disabled ? d.push("cursor-not-allowed") : e.loading ? d.push("cursor-default") : d.push("cursor-pointer"), d;
},
iconLeft: ({ slots: e }) => e.default ? "mr-2" : "m-0.5",
iconRight: ({ slots: e }) => e.default ? "ml-2" : "m-0.5"
},
styles({ props: e, colors: n, css: i, data: d }) {
const a = n.getPalette("gray"), t = e.color ? n.getPalette(e.color) : a, l = [], r = e.color && e.light, b = !e.color && !e.ghost;
return e.glow && l.push(i.get("glow", n.getColorOpacity(e.color ? t[500] : a[500], 0.5))), b ? e.disabled ? l.push(i.variables({
bg: a[50],
text: a[300],
border: a[200],
dark: {
bg: a[900],
text: a[600],
border: a[700]
}
})) : l.push(i.variables({
bg: "white",
text: a[800],
border: a[300],
hover: { bg: e.loading ? "" : a[100] },
active: { bg: e.loading ? "" : a[200] },
dark: {
bg: a[800],
text: "white",
border: a[700],
hover: { bg: e.loading ? "" : a[700], border: a[600] },
active: { bg: e.loading ? "" : a[600], border: a[500] }
}
})) : r ? ((!e.outlined || e.disabled) && l.push(i.get("border", "transparent")), e.disabled ? l.push(i.variables({
bg: t[50],
text: t[200],
border: "transparent",
dark: {
bg: a[800],
text: t[900],
border: "transparent"
}
})) : l.push(i.variables({
bg: t[50],
text: t[600],
border: e.outlined ? t[500] : "transparent",
hover: { bg: e.loading ? "" : t[100] },
active: { bg: e.loading ? "" : t[200] },
dark: {
bg: t[900],
text: t[200],
border: e.outlined ? t[500] : "transparent",
hover: { bg: e.loading ? "" : t[800] },
active: { bg: e.loading ? "" : t[700] }
}
}))) : e.ghost ? (e.outlined || l.push(i.get("border", "transparent")), e.color ? e.disabled ? l.push(i.variables({
text: t[200],
dark: {
text: t[700]
}
})) : (l.push(i.variables({
text: t[600],
dark: {
text: t[500]
}
})), e.loading || l.push(i.variables({
hover: { bg: t[50] },
active: { bg: t[100] },
dark: {
hover: { bg: a[800] },
active: { bg: a[700] }
}
}))) : e.disabled ? l.push(i.variables({
text: a[200],
dark: {
text: a[700]
}
})) : (l.push(i.variables({
text: a[800],
dark: {
text: "white"
}
})), e.loading || l.push(i.variables({
hover: { bg: a[100] },
active: { bg: a[200] },
dark: {
hover: { bg: a[800] },
active: { bg: a[700] }
}
})))) : e.outlined ? e.disabled ? l.push(i.variables({
text: t[200],
border: t[200],
dark: {
text: t[700],
border: t[700]
}
})) : (l.push(i.variables({
text: t[600],
border: t[600],
dark: {
text: t[500],
border: t[500]
}
})), e.loading || l.push(i.variables({
hover: { bg: t[100] },
active: { bg: t[200] },
dark: {
hover: { bg: a[800] },
active: { bg: a[700] }
}
}))) : (l.push(i.variables({
text: "#fff",
border: t[600],
dark: {
text: "#fff",
border: t[500]
}
})), e.disabled ? l.push(i.variables({
bg: a[100],
border: a[300],
text: a[400],
dark: {
text: a[700],
border: a[700],
bg: a[800]
}
})) : l.push(i.variables({
bg: t[500],
hover: { bg: e.loading ? "" : t[600] },
active: { bg: e.loading ? "" : t[800] },
dark: {
bg: t[600],
hover: { bg: e.loading ? "" : t[700] },
active: { bg: e.loading ? "" : t[800] }
}
}))), l;
}
}, o = g;
export {
o as default
};