@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
150 lines (149 loc) • 5.09 kB
JavaScript
import { defineComponent as b, useAttrs as m, ref as y, computed as l } from "vue";
import { NeonButtonSize as S } from "../../../common/enums/NeonButtonSize.es.js";
import { NeonFunctionalColor as g } from "../../../common/enums/NeonFunctionalColor.es.js";
import { NeonButtonStyle as a } from "../../../common/enums/NeonButtonStyle.es.js";
import { NeonHorizontalPosition as B } from "../../../common/enums/NeonHorizontalPosition.es.js";
import h from "../../presentation/icon/NeonIcon.vue.es.js";
import k from "../../navigation/link/NeonLink.vue.es.js";
import N from "../../presentation/expansion-indicator/NeonExpansionIndicator.vue.es.js";
import { NeonState as e } from "../../../common/enums/NeonState.es.js";
const I = b({
name: "NeonButton",
components: {
NeonExpansionIndicator: N,
NeonIcon: h,
NeonLink: k
},
props: {
/**
* Optional href for rendering a button as a link
*/
href: { type: String, default: null },
/**
* The text to display on a button
*/
label: { type: String, default: null },
/**
* The button size
*/
size: { type: String, default: S.Medium },
/**
* The button color
*/
color: { type: String, default: g.LowContrast },
/**
* Display the button as high-contrast with inverted colors. This is useful for placing a button on a colored background.
* NOTE: Supports Solid & Outline button styles only (gradient & text buttons are not supported)
*/
inverse: { type: Boolean, default: !1 },
/**
* Solid buttons ONLY. Alternate color for creating a gradient buttons. NOTE: can also be the same color as 'color'.
*/
alternateColor: { type: String, default: null },
/**
* Optional icon to display
*/
icon: { type: String, default: null },
/**
* Position of the icon if combined with text
*/
iconPosition: { type: String, default: B.Left },
/**
* The style of button
*/
buttonStyle: { type: String, default: a.Solid },
/**
* Provide button states of <em>ready, loading, success or error</em> which change the display of the button (with icons) to reflect the state.
*/
state: { type: String, default: e.Ready },
/**
* Whether the button is disabled
*/
disabled: { type: Boolean, default: !1 },
/**
* For text buttons, do not display the background. This is useful for icon buttons in headers.
*/
transparent: { type: Boolean, default: !1 },
/**
* Whether to display a button outline when the button has focus
*/
outline: { type: Boolean, default: !0 },
/**
* Make the button circular. NOTE: This is only for icon only buttons.
*/
circular: { type: Boolean, default: null },
/**
* Make a button extend to the full width of the parent container.
*/
fullWidth: { type: Boolean, default: null },
/**
* INTERNAL USE ONLY: display a NeonExpansionIndicator on the button (used for dropdown buttons)
* @ignore
*/
indicator: { type: Boolean, default: !1 },
/**
* INTERNAL USE ONLY: display the NeonExpansionIndicator on the button as <em>open</em> or <em>closed</em>.
* @ignore
*/
indicatorExpanded: { type: Boolean, default: null }
},
emits: [
/**
* Emitted when the user clicks on the button or link.
*/
"click"
],
setup(t, { emit: u }) {
const i = m(), o = y(null), c = l(() => {
switch (t.state) {
case e.Loading:
return "loading";
case e.Success:
return "check";
case e.Error:
return "times";
default:
return t.icon;
}
}), r = l(() => [
`neon-button--${t.size}`,
!t.inverse && `neon-button--${t.color}`,
`neon-button--${t.buttonStyle}`,
`neon-button--state-${t.state}`,
{
"neon-button--text-transparent": t.transparent && t.buttonStyle === a.Text,
"neon-button--disabled": t.disabled,
"neon-button--inverse": t.inverse,
"neon-button--circular": t.circular,
"neon-button--no-outline": !t.outline,
"neon-button--full-width": t.fullWidth,
"neon-button--with-icon neon-button--icon-only": !t.label && t.icon && !t.indicator,
"neon-button--with-icon neon-button--icon-left": t.label && t.icon && t.iconPosition === "left",
"neon-button--with-icon neon-button--icon-right": t.label && t.icon && t.iconPosition === "right",
[`neon-button--alternate-color-${t.alternateColor}`]: t.alternateColor
}
]), d = () => {
var n;
return (n = o.value) == null ? void 0 : n.click();
}, f = l(() => {
const { onClick: n, ...s } = i;
return s;
});
return {
iconName: c,
classes: r,
button: o,
attrs: i,
sanitizedAttributes: f,
clickLink: d,
clickButton: () => {
var n;
t.disabled || u("click"), (n = o.value) == null || n.blur();
}
};
}
});
export {
I as default
};
//# sourceMappingURL=NeonButton.es.js.map