@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
132 lines (131 loc) • 3.56 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
const button = require("../button/button.vue.cjs");
const button_constants = require("../button/button_constants.cjs");
const _sfc_main = {
compatConfig: { MODE: 3 },
name: "SplitButtonAlpha",
components: {
DtButton: button.default
},
props: {
/**
* Determines whether the button should have active styling
*/
active: {
type: Boolean,
default: false
},
/**
* 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: false
},
/**
* 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: false
},
/**
* HTML button disabled attribute
*/
disabled: {
type: Boolean,
default: false
},
/**
* 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: button_constants.BUTTON_ICON_SIZES
};
}
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_dt_button = vue.resolveComponent("dt-button");
const _directive_dt_tooltip = vue.resolveDirective("dt-tooltip");
return vue.withDirectives((vue.openBlock(), vue.createBlock(_component_dt_button, {
"data-qa": "dt-split-button-alpha",
active: $props.active,
"aria-label": $props.ariaLabel,
"assertive-on-focus": $props.assertiveOnFocus,
class: vue.normalizeClass(`d-split-btn__alpha d-split-btn__alpha--${$props.size}`),
disabled: $props.disabled,
"icon-position": $props.iconPosition,
importance: $props.importance,
kind: $props.kind,
"label-class": $props.labelClass,
loading: $props.loading,
size: $props.size
}, {
icon: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "icon", {
size: $data.BUTTON_ICON_SIZES[$props.size]
})
]),
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["active", "aria-label", "assertive-on-focus", "class", "disabled", "icon-position", "importance", "kind", "label-class", "loading", "size"])), [
[_directive_dt_tooltip, $props.tooltipText]
]);
}
const SplitButtonAlpha = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
exports.default = SplitButtonAlpha;
//# sourceMappingURL=split_button-alpha.vue.cjs.map