@analyticaph/smart-campus-ui
Version:
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
73 lines (72 loc) • 3.2 kB
JavaScript
import { defineComponent as c, computed as u, openBlock as d, createElementBlock as l, normalizeClass as f, toDisplayString as b } from "vue";
const p = [
"primary",
"muted",
"info",
"success",
"warning",
"danger"
], x = ["xs", "sm", "md", "lg", "xl"], r = {
color: p[0],
size: x[2]
}, h = ["type"], m = /* @__PURE__ */ c({
__name: "Button",
props: {
type: { default: "button" },
label: { default: "Button" },
color: { default: r.color },
size: { default: r.size },
block: { type: Boolean, default: !1 },
outlined: { type: Boolean, default: !1 },
elevated: { type: Boolean, default: !1 }
},
setup(o) {
const s = o, e = {
primary: {
solid: "bg-primary text-white hover:bg-primary-shades-100 focus:bg-primary-shades-100 focus:ring focus:ring-primary-tints-300",
outlined: "bg-transparent border border-primary text-primary hover:bg-primary-tints-100 focus:bg-primary-tints-200 focus:ring focus:ring-primary-tints-100"
},
info: {
solid: "bg-info text-white hover:bg-info-shades-100 focus:bg-info-shades-100 focus:ring focus:ring-info-tints-300",
outlined: "bg-transparent border border-info text-info hover:bg-info-tints-100 focus:bg-info-tints-200 focus:ring focus:ring-info-tints-100"
},
success: {
solid: "bg-success text-white hover:bg-success-shades-100 focus:bg-success-shades-100 focus:ring focus:ring-success-tints-300",
outlined: "bg-transparent border border-success text-success hover:bg-success-tints-100 focus:bg-success-tints-200 focus:ring focus:ring-success-tints-100"
},
warning: {
solid: "bg-warning text-white hover:bg-warning-shades-100 focus:bg-warning-shades-100 focus:ring focus:ring-warning-tints-300",
outlined: "bg-transparent border border-warning text-warning hover:bg-warning-tints-100 focus:bg-warning-tints-200 focus:ring focus:ring-warning-tints-100"
},
danger: {
solid: "bg-danger text-white hover:bg-danger-shades-100 focus:bg-danger-shades-100 focus:ring focus:ring-danger-tints-300",
outlined: "bg-transparent border border-danger text-danger hover:bg-danger-tints-100 focus:bg-danger-tints-200 focus:ring focus:ring-danger-tints-100"
},
muted: {
solid: "bg-white text-gray-shades-800 hover:bg-gray-tints-200 focus:bg-gray-tints-200 focus:ring focus:ring-gray-tints-400",
outlined: "bg-transparent border border-gray-shades-100 text-gray-shades-800 hover:bg-gray-tints-200 focus:bg-gray-tints-200 focus:ring focus:ring-gray-tints-400"
}
}, i = (t, n) => n ? e[t]?.outlined : e[t]?.solid, a = {
xs: "h-[21px] px-[9px] text-xs",
sm: "h-[30px] px-[13px] text-sm",
md: "h-[38px] px-[17px] text-base",
lg: "h-[50px] px-[22px] text-lg",
xl: "h-[58px] px-[26px] text-xl"
}, g = u(() => [
i(s.color, s.outlined) ?? "",
a[s.size] ?? ""
]);
return (t, n) => (d(), l("button", {
type: s.type,
class: f([
"rounded outline-none",
g.value,
s.block && "w-full",
s.elevated && "shadow"
])
}, b(s.label), 11, h));
}
});
export {
m as SCButton
};