@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
263 lines (262 loc) • 6.56 kB
JavaScript
import { hasSlotContent as e } from "../../common/utils/index.js";
import { t } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import n from "../loader/loader.js";
import { BUTTON_ICON_SIZES as r, BUTTON_IMPORTANCE_MODIFIERS as i, BUTTON_KIND_MODIFIERS as a, BUTTON_SIZE_MODIFIERS as o, BUTTON_TYPES as s, ICON_POSITION_MODIFIERS as c, INVALID_COMBINATION as l } from "./button-constants.js";
import { LINK_KIND_MODIFIERS as u, getLinkKindModifier as d } from "../link/link-constants.js";
import { DialtoneLocalization as f } from "../../localization/index.js";
import { createBlock as p, createCommentVNode as m, createElementBlock as h, mergeProps as g, normalizeClass as _, openBlock as v, renderSlot as y, resolveComponent as b, resolveDynamicComponent as x, toHandlers as S, warn as C, withCtx as w } from "vue";
//#region components/button/button.vue
var T = {
compatConfig: { MODE: 3 },
name: "DtButton",
components: { DtLoader: n },
props: {
circle: {
type: Boolean,
default: !1
},
iconPosition: {
type: String,
default: "left",
validator: (e) => Object.keys(c).includes(e)
},
importance: {
type: String,
default: "primary",
validator: (e) => Object.keys(i).includes(e)
},
link: {
type: Boolean,
default: !1
},
linkKind: {
type: String,
default: "default",
validator: (e) => Object.keys(u).includes(e)
},
linkInverted: {
type: Boolean,
default: !1
},
disabled: {
type: Boolean,
default: !1
},
type: {
type: String,
default: "button",
validator: (e) => s.includes(e)
},
width: {
type: String,
default: null
},
size: {
type: String,
default: "md",
validator: (e) => Object.keys(o).includes(e)
},
labelClass: {
type: [
String,
Array,
Object
],
default: ""
},
loading: {
type: Boolean,
default: !1
},
kind: {
type: String,
default: "default",
validator: (e) => Object.keys(a).includes(e)
},
assertiveOnFocus: {
type: Boolean,
default: !1
},
active: {
type: Boolean,
default: !1
},
to: {
type: [String, Object],
default: null
},
href: {
type: String,
default: null
},
target: {
type: String,
default: null
},
rel: {
type: String,
default: null
},
replace: {
type: Boolean,
default: !1
}
},
emits: ["focusin", "focusout"],
data() {
return {
ICON_POSITION_MODIFIERS: c,
isInFocus: !1,
hasSlotContent: e,
i18n: new f()
};
},
computed: {
computedTag() {
return this.to ? this.resolveRouterLink() : this.href ? "a" : "button";
},
isNativeButton() {
return !this.to && !this.href;
},
computedAttrs() {
return this.to ? {
to: this.to,
replace: this.replace,
...this.disabled && {
"aria-disabled": "true",
tabindex: "-1"
}
} : this.href ? {
href: this.disabled ? null : this.href,
target: this.target,
rel: this.rel,
...this.disabled && {
"aria-disabled": "true",
tabindex: "-1"
}
} : {
type: this.type,
disabled: this.disabled
};
},
computedListeners() {
let e = {
focusin: (e) => {
this.isInFocus = this.assertiveOnFocus, this.$emit("focusin", e);
},
focusout: (e) => {
this.isInFocus = !1, this.$emit("focusout", e);
}
};
return this.isNativeButton || (this.disabled && (e.click = (e) => {
e.preventDefault(), e.stopImmediatePropagation();
}), e.keydown = (e) => {
(e.key === " " || e.code === "Space") && (e.preventDefault(), this.disabled || e.target.click());
}), e;
},
computedAriaLive() {
return this.assertiveOnFocus && this.isInFocus ? "assertive" : this.$attrs.ariaLive;
},
iconSize() {
return r[this.size];
},
loaderSize() {
return r[this.size];
}
},
watch: { $props: {
deep: !0,
immediate: !0,
handler() {
process.env.NODE_ENV !== "production" && (this.circle && this.link && C("You cannot enable circle and link at the same time", this), this.isInvalidPropCombination(this.circle, this.kind, this.importance));
}
} },
methods: {
resolveRouterLink() {
try {
return b("RouterLink");
} catch {
return C("DtButton: \"to\" prop requires vue-router. Falling back to <a>."), "a";
}
},
buttonClasses() {
return this.link ? [
"d-link",
d(this.linkKind, this.linkInverted),
o[this.size]
] : this.kind === "unstyled" ? ["d-btn--unstyled"] : [
"d-btn",
i[this.importance],
a[this.kind],
o[this.size],
{
"d-btn--circle": this.circle,
"d-btn--loading": this.loading,
"d-btn--icon-only": this.isIconOnly(),
"d-btn--vertical": this.isVerticalIconLayout(),
"d-btn--active": this.active
}
];
},
isInvalidPropCombination(e, t, n) {
if (this.kind === "unstyled") return !0;
for (let r of l) if (e === r.circle && t === r.kind && n === r.importance) return C(r.message), !1;
return !0;
},
shouldRenderIcon() {
return e(this.$slots.icon) && !this.link;
},
isIconOnly() {
return this.shouldRenderIcon() && !e(this.$slots.default);
},
isVerticalIconLayout() {
return !this.isIconOnly() && ["top", "bottom"].includes(this.iconPosition);
}
}
};
function E(e, t, n, r, i, a) {
let o = b("dt-loader");
return v(), p(x(a.computedTag), g({
class: ["base-button__button", a.buttonClasses()],
"data-qa": "dt-button",
style: { width: n.width },
"aria-live": a.computedAriaLive,
"aria-label": n.loading ? i.i18n.$t("DIALTONE_LOADING") : e.$attrs["aria-label"]
}, a.computedAttrs, S(a.computedListeners)), {
default: w(() => [
n.loading && n.kind !== "unstyled" ? (v(), p(o, {
key: 0,
class: "d-btn__loader",
size: a.loaderSize,
"aria-hidden": "true"
}, null, 8, ["size"])) : m("", !0),
a.shouldRenderIcon() ? (v(), h("span", {
key: 1,
"data-qa": "dt-button-icon",
class: _(["base-button__icon", {
"d-btn__icon": n.kind !== "unstyled",
[i.ICON_POSITION_MODIFIERS[n.iconPosition]]: n.kind !== "unstyled"
}])
}, [y(e.$slots, "icon", { iconSize: a.iconSize })], 2)) : m("", !0),
i.hasSlotContent(e.$slots.default) ? (v(), h("span", {
key: 2,
"data-qa": "dt-button-label",
class: _([
"base-button__label",
{ "d-btn__label": n.kind !== "unstyled" },
n.labelClass
])
}, [y(e.$slots, "default")], 2)) : m("", !0)
]),
_: 3
}, 16, [
"class",
"style",
"aria-live",
"aria-label"
]);
}
var D = /* @__PURE__ */ t(T, [["render", E]]);
//#endregion
export { D as default };
//# sourceMappingURL=button.js.map