@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
113 lines (112 loc) • 3.1 kB
JavaScript
import { SPLIT_BUTTON_ICON_SIZES } from "./split_button_constants.js";
import { DtIconChevronDown } from "@dialpad/dialtone-icons/vue3";
import { getUniqueString } from "../../common/utils.js";
import { resolveComponent, resolveDirective, withDirectives, openBlock, createBlock, normalizeClass, withCtx, renderSlot, createVNode } from "vue";
import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
import DtButton from "../button/button.vue.js";
const _sfc_main = {
compatConfig: { MODE: 3 },
name: "SplitButtonOmega",
components: {
DtButton,
DtIconChevronDown
},
props: {
/**
* Determines whether the button should have active styling
*/
active: {
type: Boolean,
default: false
},
/**
* Descriptive label for the button
*/
ariaLabel: {
type: String,
default: null
},
/**
* HTML button disabled attribute
*/
disabled: {
type: Boolean,
default: false
},
/**
* Element ID, useful in case you need to reference the button
* as an external anchor for popover
*/
id: {
type: String,
default: getUniqueString()
},
/**
* 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"
},
/**
* Text shown in tooltip when you hover the button
*/
tooltipText: {
type: String,
default: ""
}
},
data() {
return {
SPLIT_BUTTON_ICON_SIZES
};
}
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_dt_icon_chevron_down = resolveComponent("dt-icon-chevron-down");
const _component_dt_button = resolveComponent("dt-button");
const _directive_dt_tooltip = resolveDirective("dt-tooltip");
return withDirectives((openBlock(), createBlock(_component_dt_button, {
id: $props.id,
"data-qa": "dt-split-button-omega",
active: $props.active,
"aria-label": $props.ariaLabel,
class: normalizeClass(`d-split-btn__omega d-split-btn__omega--${$props.size}`),
disabled: $props.disabled,
importance: $props.importance,
kind: $props.kind,
size: $props.size
}, {
icon: withCtx(() => [
renderSlot(_ctx.$slots, "icon", {
size: $data.SPLIT_BUTTON_ICON_SIZES[$props.size]
}, () => [
createVNode(_component_dt_icon_chevron_down, {
size: $data.SPLIT_BUTTON_ICON_SIZES[$props.size]
}, null, 8, ["size"])
])
]),
_: 3
}, 8, ["id", "active", "aria-label", "class", "disabled", "importance", "kind", "size"])), [
[_directive_dt_tooltip, $props.tooltipText]
]);
}
const SplitButtonOmega = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
SplitButtonOmega as default
};
//# sourceMappingURL=split_button-omega.vue.js.map