@todovue/tv-button
Version:
A customizable button component for TODOvue, supporting multiple variants, sizes, and icon modes.
179 lines (178 loc) • 10.4 kB
JavaScript
import { ref as L, computed as a, defineAsyncComponent as x, createBlock as v, openBlock as i, resolveDynamicComponent as N, unref as l, normalizeStyle as V, normalizeClass as D, withCtx as m, createElementVNode as H, createElementBlock as y, Suspense as k, createVNode as S, Fragment as T, createCommentVNode as C, renderSlot as I, createTextVNode as M, toDisplayString as E } from "vue";
const A = (e, d) => {
const n = L(!1), c = () => {
d("clickButton"), d("click");
}, f = (s) => {
n.value = s;
}, r = (s) => !s || s[0] !== "#" ? s : `#${s.match(/\w\w/g).map((u) => parseInt(u, 16) * 0.9).map((u) => Math.floor(u).toString(16).padStart(2, "0")).join("")}`, g = a(() => ({
"tv-btn-rounded": e.rounded,
"tv-btn-full": e.full,
"tv-btn-outlined": e.outlined,
"tv-btn-text": e.text,
"tv-btn-disabled": e.disabled || e.loading,
"tv-btn-icon": e.type === "icon",
"tv-btn-icon-only": e.type === "icon" && e.iconOnly,
[`tv-btn-${e.size}`]: e.size && e.size !== "md",
[`tv-btn-${e.variant}`]: e.variant && e.variant !== "default"
})), h = a(() => {
if (!e.customStyle) return {};
const s = {
backgroundColor: e.customStyle.backgroundColor || "transparent",
color: e.customStyle.color || "inherit",
boxShadow: `0 0 5px ${e.customStyle.backgroundColor || "transparent"}`
};
return e.outlined ? {
backgroundColor: "transparent",
border: `1px solid ${e.customStyle.backgroundColor}`,
color: e.customStyle.backgroundColor,
boxShadow: s.boxShadow
} : s;
}), b = a(() => e.customStyle ? e.outlined ? {
backgroundColor: e.customStyle.backgroundColor,
color: e.customStyle.color
} : {
backgroundColor: r(e.customStyle.backgroundColor),
boxShadow: "none"
} : {});
return {
isHover: n,
handleClick: c,
manageHover: f,
buttonClasses: g,
buttonStyleCustom: h,
buttonStyleHover: b
};
}, F = { class: "tv-btn-content" }, R = {
key: 1,
class: "tv-btn-text"
}, q = {
__name: "TvButton",
props: {
buttonText: String,
customStyle: Object,
icon: String,
iconColor: {
type: String,
default: "white"
},
iconPosition: {
type: String,
default: "right"
},
variant: {
type: String,
default: "primary",
validator: (e) => ["primary", "secondary", "success", "error", "warning", "info"].includes(e)
},
size: {
type: String,
default: "md",
validator: (e) => ["sm", "md", "lg"].includes(e)
},
rounded: Boolean,
disabled: Boolean,
outlined: Boolean,
loading: Boolean,
iconOnly: Boolean,
full: Boolean,
text: Boolean,
type: {
type: String,
default: "button"
},
ariaLabel: String,
to: [String, Object],
href: String,
target: String,
rel: String
},
emits: ["clickButton", "click"],
setup(e, { emit: d }) {
const n = e, c = /* @__PURE__ */ Object.assign({ "../assets/icons/account.svg": () => import("./account-DyiQlBHc.js").then((t) => t.default), "../assets/icons/add-user.svg": () => import("./add-user-BvUFOy2Z.js").then((t) => t.default), "../assets/icons/alert.svg": () => import("./alert-CndWT2hZ.js").then((t) => t.default), "../assets/icons/arrow-down.svg": () => import("./arrow-down-DRv_Ncph.js").then((t) => t.default), "../assets/icons/arrow-left.svg": () => import("./arrow-left-BwqSONwZ.js").then((t) => t.default), "../assets/icons/arrow-right.svg": () => import("./arrow-right-BLuhP7HD.js").then((t) => t.default), "../assets/icons/arrow-up.svg": () => import("./arrow-up-BqNEHZta.js").then((t) => t.default), "../assets/icons/block.svg": () => import("./block-4xXi6OZR.js").then((t) => t.default), "../assets/icons/calendar.svg": () => import("./calendar-C5auGI6N.js").then((t) => t.default), "../assets/icons/cancel.svg": () => import("./cancel-BttiOYA4.js").then((t) => t.default), "../assets/icons/check.svg": () => import("./check-Bawc7er2.js").then((t) => t.default), "../assets/icons/clone.svg": () => import("./clone-BHa5KZ6r.js").then((t) => t.default), "../assets/icons/dark.svg": () => import("./dark-UalslZhb.js").then((t) => t.default), "../assets/icons/dashboard.svg": () => import("./dashboard-D_hSarq5.js").then((t) => t.default), "../assets/icons/dots-vertical.svg": () => import("./dots-vertical-C7wq0F9p.js").then((t) => t.default), "../assets/icons/double-arrow-left.svg": () => import("./double-arrow-left-BHhdg5UF.js").then((t) => t.default), "../assets/icons/double-arrow-right.svg": () => import("./double-arrow-right-DAwsi_Ou.js").then((t) => t.default), "../assets/icons/download.svg": () => import("./download-C7VpGAAR.js").then((t) => t.default), "../assets/icons/edit.svg": () => import("./edit-Ch5G4kUc.js").then((t) => t.default), "../assets/icons/external-link.svg": () => import("./external-link-BNPmA56H.js").then((t) => t.default), "../assets/icons/eye-off.svg": () => import("./eye-off-CWuuB6LT.js").then((t) => t.default), "../assets/icons/favorite.svg": () => import("./favorite-B9HKXWUY.js").then((t) => t.default), "../assets/icons/filter.svg": () => import("./filter-CNBIPSzM.js").then((t) => t.default), "../assets/icons/folder.svg": () => import("./folder-CWQ6jFZj.js").then((t) => t.default), "../assets/icons/help.svg": () => import("./help-BcT9q0io.js").then((t) => t.default), "../assets/icons/home.svg": () => import("./home-D4w6BiEv.js").then((t) => t.default), "../assets/icons/image.svg": () => import("./image-DbRIiCeN.js").then((t) => t.default), "../assets/icons/info.svg": () => import("./info-ttC86X1y.js").then((t) => t.default), "../assets/icons/light.svg": () => import("./light-BCdXxNIL.js").then((t) => t.default), "../assets/icons/link.svg": () => import("./link-DYU-Mqrp.js").then((t) => t.default), "../assets/icons/loading.svg": () => import("./loading-I0KpeuUG.js").then((t) => t.default), "../assets/icons/lock.svg": () => import("./lock-BsH7dZET.js").then((t) => t.default), "../assets/icons/login.svg": () => import("./login-CkW2DCOu.js").then((t) => t.default), "../assets/icons/logout.svg": () => import("./logout-DJnqUAh8.js").then((t) => t.default), "../assets/icons/mail.svg": () => import("./mail-fvXjMtP9.js").then((t) => t.default), "../assets/icons/menu.svg": () => import("./menu-DNmSrlrK.js").then((t) => t.default), "../assets/icons/minus.svg": () => import("./minus-BBygFN8a.js").then((t) => t.default), "../assets/icons/notification.svg": () => import("./notification-D8VmF-h5.js").then((t) => t.default), "../assets/icons/plus.svg": () => import("./plus-2SE4FmmD.js").then((t) => t.default), "../assets/icons/remove.svg": () => import("./remove-3_UuNLtK.js").then((t) => t.default), "../assets/icons/save.svg": () => import("./save-BTgi0UjD.js").then((t) => t.default), "../assets/icons/search.svg": () => import("./search-DODSuytL.js").then((t) => t.default), "../assets/icons/settings.svg": () => import("./settings-lLfTnnju.js").then((t) => t.default), "../assets/icons/share.svg": () => import("./share-Cm8nrPtG.js").then((t) => t.default), "../assets/icons/star.svg": () => import("./star-C_hRL2BS.js").then((t) => t.default), "../assets/icons/todovue.svg": () => import("./todovue-DN71rrWZ.js").then((t) => t.default), "../assets/icons/trash.svg": () => import("./trash-ABahH0ye.js").then((t) => t.default), "../assets/icons/unlock.svg": () => import("./unlock-BHbvu0v4.js").then((t) => t.default), "../assets/icons/update.svg": () => import("./update-C6udr9Sh.js").then((t) => t.default), "../assets/icons/upload.svg": () => import("./upload-3-LmJH9j.js").then((t) => t.default), "../assets/icons/view.svg": () => import("./view-AqHIJowI.js").then((t) => t.default) }), f = d, r = a(() => n.icon ? n.icon : n.target === "_blank" ? "external-link" : null), g = a(() => {
if (!r.value) return null;
const t = `../assets/icons/${r.value}.svg`;
return c[t] ? x(async () => {
const o = await c[t]();
return {
template: '<span class="tv-icon-svg" v-html="content"></span>',
setup() {
return { content: o };
}
};
}) : null;
}), h = x(async () => {
const o = await c["../assets/icons/loading.svg"]();
return {
template: '<span class="tv-spinner" v-html="content"></span>',
setup() {
return { content: o };
}
};
}), {
buttonClasses: b,
buttonStyleCustom: s,
buttonStyleHover: w,
isHover: u,
handleClick: $,
manageHover: B
} = A(n, f), P = a(() => ({
...s.value,
...u.value ? w.value : {}
})), z = a(() => !!(n.href || n.to)), O = a(() => n.to ? "RouterLink" : n.href ? "a" : "button");
return (t, o) => (i(), v(N(O.value), {
href: e.href,
to: e.to,
target: e.target,
rel: e.rel,
"aria-label": e.ariaLabel,
class: D([l(b), "tv-btn"]),
disabled: e.disabled || e.loading,
style: V(P.value),
type: z.value ? void 0 : e.type,
onClick: l($),
onMouseleave: o[0] || (o[0] = (j) => l(B)(!1)),
onMouseover: o[1] || (o[1] = (j) => l(B)(!0))
}, {
default: m(() => [
H("span", F, [
e.loading ? (i(), v(k, { key: 0 }, {
default: m(() => [
S(l(h))
]),
_: 1
})) : (i(), y(T, { key: 1 }, [
r.value && e.iconPosition === "left" ? (i(), v(k, { key: 0 }, {
default: m(() => [
S(l(g), { class: "tv-icon icon-left" })
]),
_: 1
})) : C("", !0),
e.iconOnly ? C("", !0) : (i(), y("span", R, [
e.buttonText ? (i(), y(T, { key: 0 }, [
M(E(e.buttonText), 1)
], 64)) : I(t.$slots, "default", { key: 1 })
])),
r.value && e.iconPosition === "right" ? (i(), v(k, { key: 2 }, {
default: m(() => [
S(l(g), { class: "tv-icon icon-right" })
]),
_: 1
})) : C("", !0)
], 64))
])
]),
_: 3
}, 40, ["href", "to", "target", "rel", "aria-label", "class", "disabled", "style", "type", "onClick"]));
}
}, p = q;
p.install = (e) => {
e.component("TvButton", p);
};
const J = {
install: p.install
};
export {
p as TvButton,
J as TvButtonPlugin,
p as default
};