@indielayer/ui
Version:
Indielayer UI Components with Tailwind CSS build for Vue 3
139 lines (138 loc) • 4.71 kB
JavaScript
const g = {
classes: {
wrapper({ props: e, slots: d, data: a }) {
const l = ["relative transition duration-150 inline-flex whitespace-nowrap overflow-hidden align-top appearance-none text-sm active:shadow-none border !leading-[1.28572] tracking-wide font-light"];
return a.isButtonGroup ? l.push("!rounded-none") : l.push(e.rounded ? "rounded-full" : ""), d.default ? (l.push("min-w-[8rem] px-4 py-3.5 items-start justify-between"), e.size === "xs" ? l.push("min-h-[2rem]") : e.size === "sm" ? l.push("min-h-[2.5rem]") : e.size === "lg" ? l.push("min-h-[4rem]") : e.size === "xl" ? l.push("min-h-[5rem]") : l.push("min-h-[3rem]")) : (l.push("items-center justify-center"), e.size === "xs" ? l.push("h-6 w-6") : e.size === "sm" ? l.push("h-8 w-8") : e.size === "lg" ? l.push("h-12 w-12") : e.size === "xl" ? l.push("h-16 w-16") : l.push("h-10 w-10")), e.disabled ? l.push("cursor-not-allowed") : e.loading ? l.push("cursor-default") : l.push("cursor-pointer"), l;
},
iconLeft: ({ slots: e }) => e.default ? "mr-2" : "m-0.5",
iconRight: ({ slots: e }) => e.default ? "ml-2" : "m-0.5"
},
styles({ props: e, colors: d, css: a, data: l }) {
const i = d.getPalette("gray"), t = e.color ? d.getPalette(e.color) : i, r = [], n = e.color && e.light, b = !e.color && !e.ghost;
return e.glow && r.push(a.get("glow", d.getColorOpacity(e.color ? t[500] : i[500], 0.5))), b ? e.disabled ? r.push(a.variables({
bg: i[50],
text: i[300],
border: i[200],
dark: {
bg: i[900],
text: i[600],
border: i[700]
}
})) : r.push(a.variables({
bg: "white",
text: i[800],
border: i[300],
hover: { bg: e.loading ? "" : i[100] },
active: { bg: e.loading ? "" : i[200] },
dark: {
bg: i[800],
text: "white",
border: i[700],
hover: { bg: e.loading ? "" : i[700], border: i[600] },
active: { bg: e.loading ? "" : i[600], border: i[500] }
}
})) : n ? ((!e.outlined || e.disabled) && r.push(a.get("border", "transparent")), e.disabled ? r.push(a.variables({
bg: t[50],
text: t[200],
border: "transparent",
dark: {
bg: i[800],
text: t[900],
border: "transparent"
}
})) : r.push(a.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 || r.push(a.get("border", "transparent")), e.color ? e.disabled ? r.push(a.variables({
text: t[200],
dark: {
text: t[700]
}
})) : (r.push(a.variables({
text: t[600],
dark: {
text: t[500]
}
})), e.loading || r.push(a.variables({
hover: { bg: t[50] },
active: { bg: t[100] },
dark: {
hover: { bg: i[800] },
active: { bg: i[700] }
}
}))) : e.disabled ? r.push(a.variables({
text: i[200],
dark: {
text: i[700]
}
})) : (r.push(a.variables({
text: i[800],
dark: {
text: "white"
}
})), e.loading || r.push(a.variables({
hover: { bg: i[100] },
active: { bg: i[200] },
dark: {
hover: { bg: i[800] },
active: { bg: i[700] }
}
})))) : e.outlined ? e.disabled ? r.push(a.variables({
text: t[200],
border: t[200],
dark: {
text: t[700],
border: t[700]
}
})) : (r.push(a.variables({
text: t[600],
border: t[600],
dark: {
text: t[500],
border: t[500]
}
})), e.loading || r.push(a.variables({
hover: { bg: t[100] },
active: { bg: t[200] },
dark: {
hover: { bg: i[800] },
active: { bg: i[700] }
}
}))) : (r.push(a.variables({
text: "#fff",
border: l.isButtonGroup ? t[600] : "transparent",
dark: {
text: "#fff",
border: l.isButtonGroup ? t[500] : "transparent"
}
})), e.disabled ? r.push(a.variables({
bg: t[200],
dark: {
text: t[700],
bg: t[900]
}
})) : r.push(a.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] }
}
}))), r;
}
}, h = g;
export {
h as default
};