@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
131 lines (130 loc) • 3.07 kB
JavaScript
import { resolveComponent as s, resolveDirective as d, withDirectives as c, createBlock as r, openBlock as f, normalizeClass as u, withCtx as a, renderSlot as i } from "vue";
import { _ as p } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import _ from "../button/button.js";
import { BUTTON_ICON_SIZES as m } from "../button/button-constants.js";
const b = {
compatConfig: { MODE: 3 },
name: "SplitButtonAlpha",
components: {
DtButton: _
},
props: {
/**
* Determines whether the button should have active styling
*/
active: {
type: Boolean,
default: !1
},
/**
* Descriptive label for the button
*/
ariaLabel: {
type: String,
default: null
},
/**
* The position of the icon slot within the button.
*/
iconPosition: {
type: String,
default: "left"
},
/**
* Used to customize the label container
*/
labelClass: {
type: [String, Array, Object],
default: ""
},
/**
* Whether the button should display a loading animation or not.
*/
loading: {
type: Boolean,
default: !1
},
/**
* Text shown in tooltip when you hover the button
*/
tooltipText: {
type: String,
default: ""
},
/**
* Determines whether a screenreader reads live updates of
* the button content to the user while the button is in focus.
*/
assertiveOnFocus: {
type: Boolean,
default: !1
},
/**
* HTML button disabled attribute
*/
disabled: {
type: Boolean,
default: !1
},
/**
* The fill and outline of the button associated with its visual importance.
*/
importance: {
type: String,
default: "primary"
},
/**
* The color of the button.
*/
kind: {
type: String,
default: "default"
},
/**
* The size of the button.
*/
size: {
type: String,
default: "md"
}
},
data() {
return {
BUTTON_ICON_SIZES: m
};
}
};
function S(e, v, t, y, l, g) {
const o = s("dt-button"), n = d("dt-tooltip");
return c((f(), r(o, {
"data-qa": "dt-split-button-alpha",
active: t.active,
"aria-label": t.ariaLabel,
"assertive-on-focus": t.assertiveOnFocus,
class: u(`d-split-btn__alpha d-split-btn__alpha--${t.size}`),
disabled: t.disabled,
"icon-position": t.iconPosition,
importance: t.importance,
kind: t.kind,
"label-class": t.labelClass,
loading: t.loading,
size: t.size
}, {
icon: a(() => [
i(e.$slots, "icon", {
size: l.BUTTON_ICON_SIZES[t.size]
})
]),
default: a(() => [
i(e.$slots, "default")
]),
_: 3
}, 8, ["active", "aria-label", "assertive-on-focus", "class", "disabled", "icon-position", "importance", "kind", "label-class", "loading", "size"])), [
[n, t.tooltipText]
]);
}
const O = /* @__PURE__ */ p(b, [["render", S]]);
export {
O as default
};
//# sourceMappingURL=split-button-alpha.js.map