@dialpad/dialtone-vue 3.218.3 → 3.219.0-next.2

package/dist/lib/split-button/split-button.js

@@ -1,75 +1,157 @@
-import b from "./split-button-alpha.js";
-import O from "./split-button-omega.js";
-import { hasSlotContent as p, warnIfUnmounted as v, returnFirstEl as B } from "../../common/utils/index.js";
-import { resolveComponent as r, openBlock as d, createElementBlock as S, normalizeStyle as k, normalizeClass as I, createVNode as c, mergeProps as m, withCtx as a, renderSlot as i, createBlock as f } from "vue";
-import { _ as T } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import P from "../dropdown/dropdown.js";
-import { BUTTON_SIZE_MODIFIERS as w, BUTTON_KIND_MODIFIERS as $, BUTTON_IMPORTANCE_MODIFIERS as D, ICON_POSITION_MODIFIERS as C } from "../button/button-constants.js";
+import I from "./split-button-start.js";
+import S from "./split-button-end.js";
+import { hasSlotContent as l, warnIfUnmounted as T, returnFirstEl as C } from "../../common/utils/index.js";
+import { resolveComponent as p, openBlock as o, createElementBlock as h, normalizeStyle as $, normalizeClass as O, createVNode as y, mergeProps as u, createSlots as B, withCtx as s, renderSlot as a, Fragment as v, createBlock as g } from "vue";
+import { _ as A } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import L from "../dropdown/dropdown.js";
+import { BUTTON_SIZE_MODIFIERS as P, BUTTON_KIND_MODIFIERS as D, BUTTON_IMPORTANCE_MODIFIERS as E, ICON_POSITION_MODIFIERS as m } from "../button/button-constants.js";
 import "./split-button-constants.js";
-const A = {
+const w = {
   compatConfig: { MODE: 3 },
   name: "DtSplitButton",
   components: {
-    SplitButtonOmega: O,
-    DtDropdown: P,
-    SplitButtonAlpha: b
+    SplitButtonEnd: S,
+    DtDropdown: L,
+    SplitButtonStart: I
   },
   inheritAttrs: !1,
   props: {
     /**
-     * Determines whether the alpha button should have active styling
+     * Determines whether the start button should have active styling
      * @values true, false
      */
-    alphaActive: {
+    startActive: {
       type: Boolean,
       default: !1
     },
     /**
-     * Descriptive label for the alpha button
+     * @deprecated Use startActive
+     * @values true, false
      */
-    alphaAriaLabel: {
+    alphaActive: {
+      type: Boolean,
+      default: null
+    },
+    /**
+     * Descriptive label for the start button
+     */
+    startAriaLabel: {
       type: String,
       default: null
     },
     /**
-     * The position of the icon slot within the alpha button.
-     * @values left, right, top, bottom
+     * @deprecated Use startAriaLabel
      */
-    alphaIconPosition: {
+    alphaAriaLabel: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * The position of the icon slot within the start button.
+     * @values start, end, blockStart, blockEnd, left, right, top, bottom
+     */
+    startIconPosition: {
       type: String,
       default: "left",
-      validator: (t) => Object.keys(C).includes(t)
+      validator: (t) => Object.keys(m).includes(t)
     },
     /**
-     * Used to customize the alpha label container
+     * @deprecated Use startIconPosition
+     * @values start, end, blockStart, blockEnd, left, right, top, bottom
      */
-    alphaLabelClass: {
+    alphaIconPosition: {
+      type: String,
+      default: void 0,
+      validator: (t) => t === void 0 || Object.keys(m).includes(t)
+    },
+    /**
+     * Used to customize the start label container
+     */
+    startLabelClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Used to customize the start button leading container
+     */
+    startLeadingClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * @deprecated Use startLeadingClass
+     */
+    alphaLeadingClass: {
+      type: [String, Array, Object],
+      default: void 0
+    },
+    /**
+     * Used to customize the start button trailing container
+     */
+    startTrailingClass: {
       type: [String, Array, Object],
       default: ""
     },
     /**
-     * HTML button disabled attribute for alpha button only
+     * @deprecated Use startTrailingClass
+     */
+    alphaTrailingClass: {
+      type: [String, Array, Object],
+      default: void 0
+    },
+    /**
+     * @deprecated Use startLabelClass
+     */
+    alphaLabelClass: {
+      type: [String, Array, Object],
+      default: void 0
+    },
+    /**
+     * HTML button disabled attribute for start button only
      * <a class="d-link" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled" target="_blank">
      *  (Reference)
      * </a>
      * @values true, false
      */
+    startDisabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @deprecated Use startDisabled
+     * @values true, false
+     */
     alphaDisabled: {
+      type: Boolean,
+      default: null
+    },
+    /**
+     * Whether the start button should display a loading animation or not.
+     * @values true, false
+     */
+    startLoading: {
       type: Boolean,
       default: !1
     },
     /**
-     * Whether the alpha button should display a loading animation or not.
+     * @deprecated Use startLoading
      * @values true, false
      */
     alphaLoading: {
       type: Boolean,
-      default: !1
+      default: null
     },
     /**
-     * Text shown in tooltip when you hover the alpha button,
+     * Text shown in tooltip when you hover the start button,
      * required if no content is passed to default slot
      */
+    startTooltipText: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * @deprecated Use startTooltipText
+     */
     alphaTooltipText: {
       type: String,
       default: void 0
@@ -86,7 +168,7 @@ const A = {
     },
     /**
      * HTML button disabled attribute for both buttons.
-     * Use alphaDisabled or omegaDisabled to disable buttons individually.
+     * Use startDisabled or endDisabled to disable buttons individually.
      * <a class="d-link" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled" target="_blank">
      *  (Reference)
      * </a>
@@ -111,67 +193,104 @@ const A = {
     importance: {
       type: String,
       default: "primary",
-      validator: (t) => Object.keys(D).includes(t)
+      validator: (t) => Object.keys(E).includes(t)
     },
     /**
      * The color of the button.
-     * @values default, muted, danger, inverted
+     * @values default, muted, danger
      */
     kind: {
       type: String,
       default: "default",
-      validator: (t) => Object.keys($).includes(t)
+      validator: (t) => Object.keys(D).includes(t)
     },
     /**
-     * Determines whether the omega button should have active styling
+     * Determines whether the end button should have active styling
      * @values true, false
      */
-    omegaActive: {
+    endActive: {
       type: Boolean,
       default: !1
     },
     /**
-     * Descriptive label for the omega button
+     * @deprecated Use endActive
+     * @values true, false
      */
-    omegaAriaLabel: {
+    omegaActive: {
+      type: Boolean,
+      default: null
+    },
+    /**
+     * Descriptive label for the end button
+     */
+    endAriaLabel: {
       type: String,
       default: null
     },
     /**
-     * HTML button disabled attribute for omega button only
+     * @deprecated Use endAriaLabel
+     */
+    omegaAriaLabel: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * HTML button disabled attribute for end button only
      * <a class="d-link" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled" target="_blank">
      *  (Reference)
      * </a>
      * @values true, false
      */
-    omegaDisabled: {
+    endDisabled: {
       type: Boolean,
       default: !1
     },
+    /**
+     * @deprecated Use endDisabled
+     * @values true, false
+     */
+    omegaDisabled: {
+      type: Boolean,
+      default: null
+    },
     /**
      * Element ID, useful in case you need to reference the button
      * as an external anchor for popover.
      */
+    endId: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * @deprecated Use endId
+     */
     omegaId: {
       type: String,
       default: void 0
     },
     /**
-     * Text shown in tooltip when you hover the omega button,
+     * Text shown in tooltip when you hover the end button,
      * required as it is an icon only button
      */
+    endTooltipText: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * @deprecated Use endTooltipText
+     */
     omegaTooltipText: {
       type: String,
       default: void 0
     },
     /**
      * The size of the button.
-     * @values xs, sm, md, lg, xl
+     * @values 100, 200, 300, 400, 500
      */
     size: {
-      type: String,
-      default: "md",
-      validator: (t) => Object.keys(w).includes(t)
+      type: [String, Number],
+      default: 300,
+      validator: (t) => Object.keys(P).includes(String(t))
     },
     /**
      * Button width, accepts
@@ -192,22 +311,71 @@ const A = {
     rootClass: {
       type: [String, Object, Array],
       default: ""
+    },
+    /**
+     * Vue router `to` prop for the start button.
+     * When set, renders the start button as a `<router-link>`.
+     */
+    startTo: {
+      type: [String, Object],
+      default: null
+    },
+    /**
+     * Whether to use `router.replace()` instead of `router.push()`
+     * when navigating via `startTo`.
+     * @values true, false
+     */
+    startReplace: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * HTML href for the start button.
+     * When set, renders the start button as an `<a>` element.
+     */
+    startHref: {
+      type: String,
+      default: null
+    },
+    /**
+     * HTML target attribute for the start button link.
+     * Only applies when `startHref` is set.
+     */
+    startTarget: {
+      type: String,
+      default: null
+    },
+    /**
+     * HTML rel attribute for the start button link.
+     * Only applies when `startHref` is set.
+     */
+    startRel: {
+      type: String,
+      default: null
     }
   },
   emits: [
     /**
-     * Native alpha button click event
+     * Native start button click event
      *
      * @event click
      * @type {PointerEvent | KeyboardEvent}
      */
+    "start-clicked",
+    /**
+     * @deprecated Use start-clicked
+     */
     "alpha-clicked",
     /**
-     * Native omega button click event
+     * Native end button click event
      *
      * @event click
      * @type {PointerEvent | KeyboardEvent}
      */
+    "end-clicked",
+    /**
+     * @deprecated Use end-clicked
+     */
     "omega-clicked"
   ],
   data() {
@@ -216,33 +384,40 @@ const A = {
     };
   },
   computed: {
-    alphaButtonProps() {
+    startButtonProps() {
       return {
-        active: this.alphaActive,
-        ariaLabel: this.alphaAriaLabel,
+        active: this.alphaActive ?? this.startActive,
+        ariaLabel: this.alphaAriaLabel ?? this.startAriaLabel,
         assertiveOnFocus: this.assertiveOnFocus,
-        disabled: this.disabled || this.alphaDisabled,
-        iconPosition: this.alphaIconPosition,
-        labelClass: this.alphaLabelClass,
-        loading: this.alphaLoading,
+        disabled: this.disabled || (this.alphaDisabled ?? this.startDisabled),
+        iconPosition: this.alphaIconPosition ?? this.startIconPosition,
+        labelClass: this.alphaLabelClass ?? this.startLabelClass,
+        leadingClass: this.alphaLeadingClass ?? this.startLeadingClass,
+        trailingClass: this.alphaTrailingClass ?? this.startTrailingClass,
+        loading: this.alphaLoading ?? this.startLoading,
         importance: this.importance,
         kind: this.kind,
         size: this.size,
-        tooltipText: this.alphaTooltipText,
+        tooltipText: this.alphaTooltipText ?? this.startTooltipText,
+        to: this.startTo,
+        replace: this.startReplace,
+        href: this.startHref,
+        target: this.startTarget,
+        rel: this.startRel,
         class: this.$attrs.class,
         style: this.$attrs.style
       };
     },
-    omegaButtonProps() {
+    endButtonProps() {
       return {
-        id: this.omegaId,
-        active: this.omegaActive,
-        ariaLabel: this.omegaAriaLabel,
-        disabled: this.disabled || this.omegaDisabled,
+        id: this.omegaId ?? this.endId,
+        active: this.omegaActive ?? this.endActive,
+        ariaLabel: this.omegaAriaLabel ?? this.endAriaLabel,
+        disabled: this.disabled || (this.omegaDisabled ?? this.endDisabled),
         importance: this.importance,
         kind: this.kind,
         size: this.size,
-        tooltipText: this.omegaTooltipText,
+        tooltipText: this.omegaTooltipText ?? this.endTooltipText,
         class: this.$attrs.class,
         style: this.$attrs.style
       };
@@ -255,74 +430,135 @@ const A = {
     this.validateProps();
   },
   mounted() {
-    v(B(this.$el), this.$options.name);
+    T(C(this.$el), this.$options.name);
   },
   methods: {
+    onStartClick() {
+      this.$emit("start-clicked"), this.$emit("alpha-clicked");
+    },
+    onEndClick() {
+      this.$emit("end-clicked"), this.$emit("omega-clicked");
+    },
     validateProps() {
-      this.validateAlphaButtonProps(), this.validateOmegaButtonProps();
+      this.validateStartButtonProps(), this.validateEndButtonProps();
     },
-    validateAlphaButtonProps() {
-      p(this.$slots.default) || p(this.$slots.alphaIcon) && !this.alphaTooltipText && console.warn("alpha-tooltip-text prop must be set if alpha button has an icon only");
+    validateStartButtonProps() {
+      l(this.$slots.default) || (l(this.$slots.startIcon) || l(this.$slots.alphaIcon)) && !(this.alphaTooltipText ?? this.startTooltipText) && console.warn("start-tooltip-text prop must be set if start button has an icon only");
     },
-    validateOmegaButtonProps() {
-      p(this.$slots.omega) || this.omegaTooltipText || console.warn("omega-tooltip-text prop is required as it is an icon-only button");
+    validateEndButtonProps() {
+      l(this.$slots.end) || l(this.$slots.omega) || (this.omegaTooltipText ?? this.endTooltipText) || console.warn("end-tooltip-text prop is required as it is an icon-only button");
     }
   }
 };
-function z(t, o, l, _, s, n) {
-  const g = r("split-button-alpha"), u = r("split-button-omega"), y = r("dt-dropdown");
-  return d(), S("span", {
+function z(t, n, r, j, d, i) {
+  const b = p("split-button-start"), f = p("split-button-end"), k = p("dt-dropdown");
+  return o(), h("span", {
     "data-qa": "dt-split-button",
-    class: I([l.rootClass, "d-split-btn"]),
-    style: k({ width: l.width })
+    class: O([r.rootClass, "d-split-btn"]),
+    style: $({ width: r.width })
   }, [
-    c(g, m(n.alphaButtonProps, {
-      ref: "alphaButton",
-      onClick: o[0] || (o[0] = (e) => t.$emit("alpha-clicked"))
-    }), {
-      icon: a(({ size: e }) => [
-        i(t.$slots, "alphaIcon", { size: e })
+    y(b, u(i.startButtonProps, {
+      ref: "startButton",
+      onClick: i.onStartClick
+    }), B({
+      default: s(() => [
+        a(t.$slots, "default")
       ]),
-      default: a(() => [
-        i(t.$slots, "default")
-      ]),
-      _: 3
-    }, 16),
-    i(t.$slots, "omega", {}, () => [
-      t.$slots.dropdownList ? (d(), f(y, {
+      _: 2
+    }, [
+      t.$slots.startEndIcon ? {
+        name: "startIcon",
+        fn: s(({ size: e }) => [
+          t.$slots.startIcon ? a(t.$slots, "startIcon", {
+            key: 0,
+            size: e
+          }) : a(t.$slots, "alphaIcon", {
+            key: 1,
+            size: e
+          })
+        ]),
+        key: "0"
+      } : void 0,
+      t.$slots.startEndIcon ? {
+        name: "endIcon",
+        fn: s(({ size: e }) => [
+          a(t.$slots, "startEndIcon", { size: e })
+        ]),
+        key: "1"
+      } : void 0,
+      t.$slots.startEndIcon ? void 0 : {
+        name: "icon",
+        fn: s(({ size: e }) => [
+          t.$slots.startIcon ? a(t.$slots, "startIcon", {
+            key: 0,
+            size: e
+          }) : a(t.$slots, "alphaIcon", {
+            key: 1,
+            size: e
+          })
+        ]),
+        key: "2"
+      },
+      t.$slots.leading ? {
+        name: "leading",
+        fn: s(() => [
+          a(t.$slots, "leading")
+        ]),
+        key: "3"
+      } : void 0,
+      t.$slots.trailing ? {
+        name: "trailing",
+        fn: s(() => [
+          a(t.$slots, "trailing")
+        ]),
+        key: "4"
+      } : void 0
+    ]), 1040, ["onClick"]),
+    t.$slots.end ? a(t.$slots, "end", { key: 0 }) : t.$slots.omega ? a(t.$slots, "omega", { key: 1 }) : (o(), h(v, { key: 2 }, [
+      t.$slots.dropdownList ? (o(), g(k, {
         key: 0,
-        placement: l.dropdownPlacement,
-        onClick: o[2] || (o[2] = (e) => s.isDropdownOpen = !0),
-        onOpened: o[3] || (o[3] = (e) => s.isDropdownOpen = e)
+        placement: r.dropdownPlacement,
+        onClick: n[0] || (n[0] = (e) => d.isDropdownOpen = !0),
+        onOpened: n[1] || (n[1] = (e) => d.isDropdownOpen = e)
       }, {
-        anchor: a((e) => [
-          c(u, m({ ...e, ...n.omegaButtonProps }, {
-            active: s.isDropdownOpen,
-            onClick: o[1] || (o[1] = (h) => t.$emit("omega-clicked"))
+        anchor: s((e) => [
+          y(f, u({ ...e, ...i.endButtonProps }, {
+            active: d.isDropdownOpen,
+            onClick: i.onEndClick
           }), {
-            icon: a(({ size: h }) => [
-              i(t.$slots, "omegaIcon", { size: h })
+            icon: s(({ size: c }) => [
+              t.$slots.endIcon ? a(t.$slots, "endIcon", {
+                key: 0,
+                size: c
+              }) : a(t.$slots, "omegaIcon", {
+                key: 1,
+                size: c
+              })
             ]),
             _: 3
-          }, 16, ["active"])
+          }, 16, ["active", "onClick"])
         ]),
-        list: a(({ close: e }) => [
-          i(t.$slots, "dropdownList", { close: e })
+        list: s(({ close: e }) => [
+          a(t.$slots, "dropdownList", { close: e })
         ]),
         _: 3
-      }, 8, ["placement"])) : (d(), f(u, m({ key: 1 }, n.omegaButtonProps, {
-        onClick: o[4] || (o[4] = (e) => t.$emit("omega-clicked"))
-      }), {
-        icon: a(({ size: e }) => [
-          i(t.$slots, "omegaIcon", { size: e })
+      }, 8, ["placement"])) : (o(), g(f, u({ key: 1 }, i.endButtonProps, { onClick: i.onEndClick }), {
+        icon: s(({ size: e }) => [
+          t.$slots.endIcon ? a(t.$slots, "endIcon", {
+            key: 0,
+            size: e
+          }) : a(t.$slots, "omegaIcon", {
+            key: 1,
+            size: e
+          })
         ]),
         _: 3
-      }, 16))
-    ])
+      }, 16, ["onClick"]))
+    ], 64))
   ], 6);
 }
-const U = /* @__PURE__ */ T(A, [["render", z]]);
+const K = /* @__PURE__ */ A(w, [["render", z]]);
 export {
-  U as default
+  K as default
 };
 //# sourceMappingURL=split-button.js.map