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

package/dist/lib/button/button.js

@@ -1,482 +1,263 @@
-import { warn as h, resolveComponent as m, openBlock as s, createBlock as f, resolveDynamicComponent as g, mergeProps as p, toHandlers as O, withCtx as v, createCommentVNode as a, createElementBlock as o, normalizeClass as r, renderSlot as d } from "vue";
-import { hasSlotContent as c } from "../../common/utils/index.js";
-import B from "../loader/loader.js";
-import { INVALID_COMBINATION as C, BUTTON_SIZE_MODIFIERS as b, BUTTON_IMPORTANCE_MODIFIERS as y, BUTTON_KIND_MODIFIERS as I, BUTTON_ICON_SIZES as k, ICON_POSITION_MODIFIERS as S, BUTTON_TYPES as N } from "./button-constants.js";
-import { DialtoneLocalization as E } from "../../localization/index.js";
-import { _ as z } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import { getLinkKindModifier as D, LINK_KIND_MODIFIERS as L } from "../link/link-constants.js";
-const T = {
-  compatConfig: { MODE: 3 },
-  name: "DtButton",
-  components: { DtLoader: B },
-  props: {
-    /**
-     * Whether the button is a circle or not. Use only with icon-only buttons.
-     * @values true, false
-     */
-    circle: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * The position of the icon slot within the button.
-     * @deprecated Use startIcon / endIcon / blockStartIcon / blockEndIcon slots instead.
-     * @values start, end, blockStart, blockEnd, left, right, top, bottom
-     */
-    iconPosition: {
-      type: String,
-      default: "start",
-      validator: (t) => Object.keys(S).includes(t)
-    },
-    /**
-     * The fill and outline of the button associated with its visual importance.
-     * @values clear, outlined, primary
-     */
-    importance: {
-      type: String,
-      default: "primary",
-      validator: (t) => Object.keys(y).includes(t)
-    },
-    /**
-     * Whether the button should be styled as a link or not.
-     * @values true, false
-     * @see DtLink
-     */
-    link: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * The color of the link and button if the button is styled as a link.
-     * @values default, warning, danger, success, muted
-     * @see DtLink
-     */
-    linkKind: {
-      type: String,
-      default: "default",
-      validator: (t) => Object.keys(L).includes(t)
-    },
-    /**
-     * Determines whether the link should have inverted styling if the button is styled as a link.
-     * @values true, false
-     * @see DtLink
-     * @deprecated Use v-dt-mode instead.
-     */
-    linkInverted: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Determines whether the link-styled button should display an underline.
-     * Only applies when the link prop is true.
-     * @values true, false
-     */
-    linkUnderline: {
-      type: Boolean,
-      default: !0
-    },
-    /**
-     * @deprecated Use linkUnderline instead.
-     * @values true, false
-     */
-    underline: {
-      type: Boolean,
-      default: null
-    },
-    /**
-     * HTML button disabled attribute
-     * <a class="d-link" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled" target="_blank"> (Reference) </a>
-     * @values true, false
-     */
-    disabled: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * HTML button type attribute
-     * <a class="d-link" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type" target="_blank">(Reference)</a>
-     * @values button, submit, reset
-     */
-    type: {
-      type: String,
-      default: "button",
-      validator: (t) => N.includes(t)
-    },
-    /**
-     * Button width, accepts
-     * <a class="d-link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/width" target="_blank">CSS width attribute</a> values
-     */
-    width: {
-      type: String,
-      default: null
-    },
-    /**
-     * The size of the button.
-     * @values 100, 200, 300, 400, 500
-     */
-    size: {
-      type: [String, Number],
-      default: 300,
-      validator: (t) => Object.keys(b).includes(String(t))
-    },
-    /**
-     * Used to customize the label container
-     */
-    labelClass: {
-      type: [String, Array, Object],
-      default: ""
-    },
-    /**
-     * Used to customize the leading container
-     */
-    leadingClass: {
-      type: [String, Array, Object],
-      default: ""
-    },
-    /**
-     * Used to customize the trailing container
-     */
-    trailingClass: {
-      type: [String, Array, Object],
-      default: ""
-    },
-    /**
-     * Whether the button should display a loading animation or not.
-     * @values true, false
-     */
-    loading: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * The color of the button.
-     * The inverted value is deprecated — use v-dt-mode directive instead.
-     * @values default, unstyled, muted, danger, positive
-     */
-    kind: {
-      type: String,
-      default: "default",
-      validator: (t) => Object.keys(I).includes(t)
-    },
-    /**
-     * Determines whether a screenreader reads live updates of
-     * the button content to the user while the button
-     * is in focus. default is to not.
-     * @values true, false
-     */
-    assertiveOnFocus: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Determines whether the button should have active styling
-     * default is false.
-     * @values true, false
-     */
-    active: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * vue-router `to` prop. When provided, renders a `<router-link>`
-     * for client-side SPA navigation.
-     * @see https://router.vuejs.org/api/interfaces/RouterLinkProps.html#to
-     */
-    to: {
-      type: [String, Object],
-      default: null
-    },
-    /**
-     * When provided, renders an `<a>` element for standard browser navigation.
-     */
-    href: {
-      type: String,
-      default: null
-    },
-    /**
-     * HTML anchor target attribute. Only applied when using the `href` prop.
-     * @values _self, _blank, _parent, _top
-     */
-    target: {
-      type: String,
-      default: null
-    },
-    /**
-     * HTML anchor rel attribute. Only applied when using the `href` prop.
-     */
-    rel: {
-      type: String,
-      default: null
-    },
-    /**
-     * vue-router `replace` prop. When true, navigation will not leave a
-     * history entry. Only applied when using the `to` prop.
-     * @values true, false
-     */
-    replace: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  emits: [
-    /**
-     * Native button focus in event
-     *
-     * @event focusin
-     * @type {FocusEvent}
-     */
-    "focusin",
-    /**
-     * Native button focus out event
-     *
-     * @event focusout
-     * @type {FocusEvent}
-     */
-    "focusout"
-  ],
-  data() {
-    return {
-      ICON_POSITION_MODIFIERS: S,
-      // whether the button is currently in focus
-      isInFocus: !1,
-      hasSlotContent: c,
-      i18n: new E()
-    };
-  },
-  computed: {
-    resolvedUnderline() {
-      return this.underline ?? this.linkUnderline;
-    },
-    computedTag() {
-      return this.to ? this.resolveRouterLink() : this.href ? "a" : "button";
-    },
-    isNativeButton() {
-      return !this.to && !this.href;
-    },
-    computedAttrs() {
-      return this.to ? {
-        to: this.to,
-        replace: this.replace,
-        ...this.disabled && { "aria-disabled": "true", tabindex: "-1" }
-      } : this.href ? {
-        href: this.disabled ? null : this.href,
-        target: this.target,
-        rel: this.rel,
-        ...this.disabled && { "aria-disabled": "true", tabindex: "-1" }
-      } : {
-        type: this.type,
-        disabled: this.disabled
-      };
-    },
-    computedListeners() {
-      const t = {
-        focusin: (n) => {
-          this.isInFocus = this.assertiveOnFocus, this.$emit("focusin", n);
-        },
-        focusout: (n) => {
-          this.isInFocus = !1, this.$emit("focusout", n);
-        }
-      };
-      return this.isNativeButton || (this.disabled && (t.click = (n) => {
-        n.preventDefault(), n.stopImmediatePropagation();
-      }), t.keydown = (n) => {
-        (n.key === " " || n.code === "Space") && (n.preventDefault(), this.disabled || n.target.click());
-      }), t;
-    },
-    computedAriaLive() {
-      return this.assertiveOnFocus && this.isInFocus ? "assertive" : this.$attrs.ariaLive;
-    },
-    iconSize() {
-      return k[String(this.size)];
-    },
-    loaderSize() {
-      return k[String(this.size)];
-    }
-  },
-  watch: {
-    $props: {
-      deep: !0,
-      immediate: !0,
-      handler() {
-        process.env.NODE_ENV !== "production" && (this.circle && this.link && h("You cannot enable circle and link at the same time", this), this.isInvalidPropCombination(this.circle, this.kind, this.importance));
-      }
-    }
-  },
-  methods: {
-    resolveRouterLink() {
-      try {
-        return m("RouterLink");
-      } catch {
-        return h('DtButton: "to" prop requires vue-router. Falling back to <a>.'), "a";
-      }
-    },
-    buttonClasses() {
-      return this.link ? [
-        "d-link",
-        D(this.linkKind, this.linkInverted),
-        b[String(this.size)],
-        { "d-link--no-underline": !this.resolvedUnderline }
-      ] : this.kind === "unstyled" ? ["d-btn--unstyled"] : [
-        "d-btn",
-        y[this.importance],
-        I[this.kind],
-        b[String(this.size)],
-        {
-          "d-btn--circle": this.circle,
-          "d-btn--loading": this.loading,
-          "d-btn--icon-only": this.isIconOnly(),
-          "d-btn--vertical": this.isVerticalIconLayout(),
-          "d-btn--active": this.active
-        }
-      ];
-    },
-    isInvalidPropCombination(t, n, e) {
-      if (this.kind === "unstyled")
-        return !0;
-      for (const u of C)
-        if (t === u.circle && n === u.kind && e === u.importance)
-          return h(u.message), !1;
-      return !0;
-    },
-    hasStartIcon() {
-      return c(this.$slots.startIcon);
-    },
-    hasEndIcon() {
-      return c(this.$slots.endIcon);
-    },
-    hasBlockStartIcon() {
-      return c(this.$slots.blockStartIcon);
-    },
-    hasBlockEndIcon() {
-      return c(this.$slots.blockEndIcon);
-    },
-    hasNewIconSlots() {
-      return this.hasStartIcon() || this.hasEndIcon() || this.hasBlockStartIcon() || this.hasBlockEndIcon();
-    },
-    shouldRenderLegacyIcon() {
-      return c(this.$slots.icon) && !this.hasNewIconSlots() && !this.link;
-    },
-    isIconOnly() {
-      return (this.hasNewIconSlots() || this.shouldRenderLegacyIcon()) && !c(this.$slots.default);
-    },
-    isVerticalIconLayout() {
-      return this.isIconOnly() ? !1 : this.hasBlockStartIcon() || this.hasBlockEndIcon() ? !0 : !this.hasNewIconSlots() && ["top", "bottom"].includes(this.iconPosition);
-    }
-  }
+import { hasSlotContent as e } from "../../common/utils/index.js";
+import { t } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
+import n from "../loader/loader.js";
+import { BUTTON_ICON_SIZES as r, BUTTON_IMPORTANCE_MODIFIERS as i, BUTTON_KIND_MODIFIERS as a, BUTTON_SIZE_MODIFIERS as o, BUTTON_TYPES as s, ICON_POSITION_MODIFIERS as c, INVALID_COMBINATION as l } from "./button-constants.js";
+import { LINK_KIND_MODIFIERS as u, getLinkKindModifier as d } from "../link/link-constants.js";
+import { DialtoneLocalization as f } from "../../localization/index.js";
+import { createBlock as p, createCommentVNode as m, createElementBlock as h, mergeProps as g, normalizeClass as _, openBlock as v, renderSlot as y, resolveComponent as b, resolveDynamicComponent as x, toHandlers as S, warn as C, withCtx as w } from "vue";
+//#region components/button/button.vue
+var T = {
+	compatConfig: { MODE: 3 },
+	name: "DtButton",
+	components: { DtLoader: n },
+	props: {
+		circle: {
+			type: Boolean,
+			default: !1
+		},
+		iconPosition: {
+			type: String,
+			default: "left",
+			validator: (e) => Object.keys(c).includes(e)
+		},
+		importance: {
+			type: String,
+			default: "primary",
+			validator: (e) => Object.keys(i).includes(e)
+		},
+		link: {
+			type: Boolean,
+			default: !1
+		},
+		linkKind: {
+			type: String,
+			default: "default",
+			validator: (e) => Object.keys(u).includes(e)
+		},
+		linkInverted: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		type: {
+			type: String,
+			default: "button",
+			validator: (e) => s.includes(e)
+		},
+		width: {
+			type: String,
+			default: null
+		},
+		size: {
+			type: String,
+			default: "md",
+			validator: (e) => Object.keys(o).includes(e)
+		},
+		labelClass: {
+			type: [
+				String,
+				Array,
+				Object
+			],
+			default: ""
+		},
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		kind: {
+			type: String,
+			default: "default",
+			validator: (e) => Object.keys(a).includes(e)
+		},
+		assertiveOnFocus: {
+			type: Boolean,
+			default: !1
+		},
+		active: {
+			type: Boolean,
+			default: !1
+		},
+		to: {
+			type: [String, Object],
+			default: null
+		},
+		href: {
+			type: String,
+			default: null
+		},
+		target: {
+			type: String,
+			default: null
+		},
+		rel: {
+			type: String,
+			default: null
+		},
+		replace: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["focusin", "focusout"],
+	data() {
+		return {
+			ICON_POSITION_MODIFIERS: c,
+			isInFocus: !1,
+			hasSlotContent: e,
+			i18n: new f()
+		};
+	},
+	computed: {
+		computedTag() {
+			return this.to ? this.resolveRouterLink() : this.href ? "a" : "button";
+		},
+		isNativeButton() {
+			return !this.to && !this.href;
+		},
+		computedAttrs() {
+			return this.to ? {
+				to: this.to,
+				replace: this.replace,
+				...this.disabled && {
+					"aria-disabled": "true",
+					tabindex: "-1"
+				}
+			} : this.href ? {
+				href: this.disabled ? null : this.href,
+				target: this.target,
+				rel: this.rel,
+				...this.disabled && {
+					"aria-disabled": "true",
+					tabindex: "-1"
+				}
+			} : {
+				type: this.type,
+				disabled: this.disabled
+			};
+		},
+		computedListeners() {
+			let e = {
+				focusin: (e) => {
+					this.isInFocus = this.assertiveOnFocus, this.$emit("focusin", e);
+				},
+				focusout: (e) => {
+					this.isInFocus = !1, this.$emit("focusout", e);
+				}
+			};
+			return this.isNativeButton || (this.disabled && (e.click = (e) => {
+				e.preventDefault(), e.stopImmediatePropagation();
+			}), e.keydown = (e) => {
+				(e.key === " " || e.code === "Space") && (e.preventDefault(), this.disabled || e.target.click());
+			}), e;
+		},
+		computedAriaLive() {
+			return this.assertiveOnFocus && this.isInFocus ? "assertive" : this.$attrs.ariaLive;
+		},
+		iconSize() {
+			return r[this.size];
+		},
+		loaderSize() {
+			return r[this.size];
+		}
+	},
+	watch: { $props: {
+		deep: !0,
+		immediate: !0,
+		handler() {
+			process.env.NODE_ENV !== "production" && (this.circle && this.link && C("You cannot enable circle and link at the same time", this), this.isInvalidPropCombination(this.circle, this.kind, this.importance));
+		}
+	} },
+	methods: {
+		resolveRouterLink() {
+			try {
+				return b("RouterLink");
+			} catch {
+				return C("DtButton: \"to\" prop requires vue-router. Falling back to <a>."), "a";
+			}
+		},
+		buttonClasses() {
+			return this.link ? [
+				"d-link",
+				d(this.linkKind, this.linkInverted),
+				o[this.size]
+			] : this.kind === "unstyled" ? ["d-btn--unstyled"] : [
+				"d-btn",
+				i[this.importance],
+				a[this.kind],
+				o[this.size],
+				{
+					"d-btn--circle": this.circle,
+					"d-btn--loading": this.loading,
+					"d-btn--icon-only": this.isIconOnly(),
+					"d-btn--vertical": this.isVerticalIconLayout(),
+					"d-btn--active": this.active
+				}
+			];
+		},
+		isInvalidPropCombination(e, t, n) {
+			if (this.kind === "unstyled") return !0;
+			for (let r of l) if (e === r.circle && t === r.kind && n === r.importance) return C(r.message), !1;
+			return !0;
+		},
+		shouldRenderIcon() {
+			return e(this.$slots.icon) && !this.link;
+		},
+		isIconOnly() {
+			return this.shouldRenderIcon() && !e(this.$slots.default);
+		},
+		isVerticalIconLayout() {
+			return !this.isIconOnly() && ["top", "bottom"].includes(this.iconPosition);
+		}
+	}
 };
-function F(t, n, e, u, l, i) {
-  const _ = m("dt-loader");
-  return s(), f(g(i.computedTag), p({
-    class: [
-      "base-button__button",
-      i.buttonClasses()
-    ],
-    "data-qa": "dt-button",
-    style: { width: e.width },
-    "aria-live": i.computedAriaLive,
-    "aria-label": e.loading ? l.i18n.$t("DIALTONE_LOADING") : t.$attrs["aria-label"]
-  }, i.computedAttrs, O(i.computedListeners)), {
-    default: v(() => [
-      e.loading && e.kind !== "unstyled" ? (s(), f(_, {
-        key: 0,
-        class: "d-btn__loader",
-        size: i.loaderSize,
-        "aria-hidden": "true"
-      }, null, 8, ["size"])) : a("", !0),
-      l.hasSlotContent(t.$slots.leading) ? (s(), o("span", {
-        key: 1,
-        class: r(["d-btn__leading", e.leadingClass])
-      }, [
-        d(t.$slots, "leading")
-      ], 2)) : a("", !0),
-      l.hasSlotContent(t.$slots.blockStartIcon) ? (s(), o("span", {
-        key: 2,
-        "data-qa": "dt-button-block-start-icon",
-        class: r([
-          "base-button__icon",
-          {
-            "d-btn__icon": e.kind !== "unstyled",
-            "d-btn__icon--top": e.kind !== "unstyled"
-          }
-        ])
-      }, [
-        d(t.$slots, "blockStartIcon", { iconSize: i.iconSize })
-      ], 2)) : a("", !0),
-      l.hasSlotContent(t.$slots.startIcon) ? (s(), o("span", {
-        key: 3,
-        "data-qa": "dt-button-start-icon",
-        class: r([
-          "base-button__icon",
-          {
-            "d-btn__icon": e.kind !== "unstyled",
-            "d-btn__icon--left": e.kind !== "unstyled"
-          }
-        ])
-      }, [
-        d(t.$slots, "startIcon", { iconSize: i.iconSize })
-      ], 2)) : a("", !0),
-      i.shouldRenderLegacyIcon() ? (s(), o("span", {
-        key: 4,
-        "data-qa": "dt-button-icon",
-        class: r([
-          "base-button__icon",
-          {
-            "d-btn__icon": e.kind !== "unstyled",
-            [l.ICON_POSITION_MODIFIERS[e.iconPosition]]: e.kind !== "unstyled"
-          }
-        ])
-      }, [
-        d(t.$slots, "icon", { iconSize: i.iconSize })
-      ], 2)) : a("", !0),
-      l.hasSlotContent(t.$slots.default) ? (s(), o("span", {
-        key: 5,
-        "data-qa": "dt-button-label",
-        class: r([
-          "base-button__label",
-          { "d-btn__label": e.kind !== "unstyled" },
-          e.labelClass
-        ])
-      }, [
-        d(t.$slots, "default")
-      ], 2)) : a("", !0),
-      l.hasSlotContent(t.$slots.endIcon) ? (s(), o("span", {
-        key: 6,
-        "data-qa": "dt-button-end-icon",
-        class: r([
-          "base-button__icon",
-          {
-            "d-btn__icon": e.kind !== "unstyled",
-            "d-btn__icon--right": e.kind !== "unstyled"
-          }
-        ])
-      }, [
-        d(t.$slots, "endIcon", { iconSize: i.iconSize })
-      ], 2)) : a("", !0),
-      l.hasSlotContent(t.$slots.blockEndIcon) ? (s(), o("span", {
-        key: 7,
-        "data-qa": "dt-button-block-end-icon",
-        class: r([
-          "base-button__icon",
-          {
-            "d-btn__icon": e.kind !== "unstyled",
-            "d-btn__icon--bottom": e.kind !== "unstyled"
-          }
-        ])
-      }, [
-        d(t.$slots, "blockEndIcon", { iconSize: i.iconSize })
-      ], 2)) : a("", !0),
-      l.hasSlotContent(t.$slots.trailing) ? (s(), o("span", {
-        key: 8,
-        class: r(["d-btn__trailing", e.trailingClass])
-      }, [
-        d(t.$slots, "trailing")
-      ], 2)) : a("", !0)
-    ]),
-    _: 3
-  }, 16, ["class", "style", "aria-live", "aria-label"]);
+function E(e, t, n, r, i, a) {
+	let o = b("dt-loader");
+	return v(), p(x(a.computedTag), g({
+		class: ["base-button__button", a.buttonClasses()],
+		"data-qa": "dt-button",
+		style: { width: n.width },
+		"aria-live": a.computedAriaLive,
+		"aria-label": n.loading ? i.i18n.$t("DIALTONE_LOADING") : e.$attrs["aria-label"]
+	}, a.computedAttrs, S(a.computedListeners)), {
+		default: w(() => [
+			n.loading && n.kind !== "unstyled" ? (v(), p(o, {
+				key: 0,
+				class: "d-btn__loader",
+				size: a.loaderSize,
+				"aria-hidden": "true"
+			}, null, 8, ["size"])) : m("", !0),
+			a.shouldRenderIcon() ? (v(), h("span", {
+				key: 1,
+				"data-qa": "dt-button-icon",
+				class: _(["base-button__icon", {
+					"d-btn__icon": n.kind !== "unstyled",
+					[i.ICON_POSITION_MODIFIERS[n.iconPosition]]: n.kind !== "unstyled"
+				}])
+			}, [y(e.$slots, "icon", { iconSize: a.iconSize })], 2)) : m("", !0),
+			i.hasSlotContent(e.$slots.default) ? (v(), h("span", {
+				key: 2,
+				"data-qa": "dt-button-label",
+				class: _([
+					"base-button__label",
+					{ "d-btn__label": n.kind !== "unstyled" },
+					n.labelClass
+				])
+			}, [y(e.$slots, "default")], 2)) : m("", !0)
+		]),
+		_: 3
+	}, 16, [
+		"class",
+		"style",
+		"aria-live",
+		"aria-label"
+	]);
 }
-const q = /* @__PURE__ */ z(T, [["render", F]]);
-export {
-  q as default
-};
-//# sourceMappingURL=button.js.map
+var D = /* @__PURE__ */ t(T, [["render", E]]);
+//#endregion
+export { D as default };
+
+//# sourceMappingURL=button.js.map