@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
111 lines (110 loc) • 2.7 kB
JavaScript
import { SPLIT_BUTTON_ICON_SIZES as d } from "./split-button-constants.js";
import { DtIconChevronDown as r } from "@dialpad/dialtone-icons/vue3";
import { getUniqueString as c } from "../../common/utils/index.js";
import { resolveComponent as i, resolveDirective as s, withDirectives as _, createBlock as m, openBlock as f, normalizeClass as u, withCtx as p, renderSlot as S, createVNode as g } from "vue";
import { _ as b } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import v from "../button/button.js";
const z = {
compatConfig: { MODE: 3 },
name: "SplitButtonOmega",
components: {
DtButton: v,
DtIconChevronDown: r
},
props: {
/**
* Determines whether the button should have active styling
*/
active: {
type: Boolean,
default: !1
},
/**
* Descriptive label for the button
*/
ariaLabel: {
type: String,
default: null
},
/**
* HTML button disabled attribute
*/
disabled: {
type: Boolean,
default: !1
},
/**
* Element ID, useful in case you need to reference the button
* as an external anchor for popover
*/
id: {
type: String,
default: c()
},
/**
* 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: d
};
}
};
function T(o, B, t, I, e, y) {
const n = i("dt-icon-chevron-down"), a = i("dt-button"), l = s("dt-tooltip");
return _((f(), m(a, {
id: t.id,
"data-qa": "dt-split-button-omega",
active: t.active,
"aria-label": t.ariaLabel,
class: u(`d-split-btn__omega d-split-btn__omega--${t.size}`),
disabled: t.disabled,
importance: t.importance,
kind: t.kind,
size: t.size
}, {
icon: p(() => [
S(o.$slots, "icon", {
size: e.SPLIT_BUTTON_ICON_SIZES[t.size]
}, () => [
g(n, {
size: e.SPLIT_BUTTON_ICON_SIZES[t.size]
}, null, 8, ["size"])
])
]),
_: 3
}, 8, ["id", "active", "aria-label", "class", "disabled", "importance", "kind", "size"])), [
[l, t.tooltipText]
]);
}
const w = /* @__PURE__ */ b(z, [["render", T]]);
export {
w as default
};
//# sourceMappingURL=split-button-omega.js.map