@indielayer/ui
Version:
Indielayer UI Components with Tailwind CSS build for Vue 3
65 lines (64 loc) • 2.04 kB
JavaScript
const i = {
classes: {
wrapper: ({ data: e }) => {
const r = ["inline-block relative cursor-pointer focus:outline-none group"];
return e.isInsideForm && !e.isInsideFormGroup && r.push("mb-8"), r;
},
circle: ({ props: e }) => {
const r = ["rounded-full flex justify-center items-center shrink-0 border outline-offset-2 outline-slate-300 dark:outline-slate-500 group-focus:outline-1 group-focus:outline"];
return e.size === "xs" || e.size === "sm" ? r.push("h-3 w-3") : e.size === "xl" ? r.push("h-5 w-5") : r.push("h-4 w-4"), r;
},
circleIcon: ({ props: e, data: r }) => {
const t = [];
return r.selected ? e.size === "lg" ? t.push("h-2.5") : e.size === "xl" ? t.push("h-3") : t.push("h-2") : t.push("opacity-0"), t;
},
label: "text-sm text-secondary-800 dark:text-secondary-200 pl-2",
content: "pl-2"
},
styles: ({ props: e, colors: r, css: t, data: a }) => {
const s = r.getPalette("gray"), l = r.getPalette(e.color), n = [];
return e.loading ? t.variables({
bg: "transparent",
border: "transparent",
dark: {
bg: "transparent",
border: "transparent"
}
}) : (e.disabled ? a.selected ? n.push(t.variables({
bg: "transparent",
border: s[200],
circle: s[200],
dark: {
bg: "transparent",
border: s[700],
circle: s[700]
}
})) : n.push(t.variables({
bg: s[200],
border: s[200],
dark: {
bg: s[700],
border: s[700]
}
})) : (a.selected ? n.push(t.variables({
bg: "transparent",
border: l[500],
circle: l[500],
dark: {
bg: "transparent",
border: l[500],
circle: l[500]
}
})) : n.push(t.variables({
bg: "#fff",
border: e.glow ? l[300] : s[900],
dark: {
bg: s[900],
border: e.glow ? l[300] : s[300]
}
})), e.glow && n.push(t.get("glow", r.getColorOpacity(l[500], 0.5)))), n);
}
}, o = i;
export {
o as default
};