@dialpad/dialtone 9.66.0 → 9.67.0

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

@@ -3,19 +3,19 @@ import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
 import { DtButton, BUTTON_ICON_SIZES, ICON_POSITION_MODIFIERS, BUTTON_IMPORTANCE_MODIFIERS, BUTTON_KIND_MODIFIERS, BUTTON_SIZE_MODIFIERS } from "./button.js";
 import { DtIconChevronDown } from "@dialpad/dialtone-icons/vue3";
 import { getUniqueString, hasSlotContent } from "../common/utils.js";
-import { DtDropdown } from "../chunks/dropdown-6HXkh24e.js";
+import { DtDropdown } from "../chunks/dropdown-oA-_Gotg.js";
 import "../chunks/link_constants-AfTWrr-n.js";
 import "../common/constants.js";
-import "../chunks/keyboard_list_navigation-YIqTuw1W.js";
+import "../chunks/keyboard_list_navigation-ScXhrxya.js";
 import "../chunks/dropdown_constants-w1MXGC3Z.js";
-import "../chunks/sr_only_close_button-Ji3Zlts6.js";
+import "../chunks/sr_only_close_button-3EdsV-dH.js";
 import "./icon.js";
-import "../chunks/icon_constants-gIQj4mf7.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
 import "./popover.js";
-import "../chunks/popover_constants-6YkPPbnk.js";
+import "../chunks/popover_constants-WsOUIY-m.js";
 import "tippy.js";
-import "../chunks/modal-8X6poIZW.js";
+import "../chunks/modal-XOr4kiNZ.js";
 import "./lazy-show.js";
 import "../chunks/list_item_constants-u1xcN9Dd.js";
 const _sfc_main$2 = {
@@ -126,12 +126,18 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
     loading: $props.loading,
     size: $props.size
   }, {
-    icon: withCtx(() => [renderSlot(_ctx.$slots, "icon", {
-      size: $data.BUTTON_ICON_SIZES[$props.size]
-    })]),
-    default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+    icon: withCtx(() => [
+      renderSlot(_ctx.$slots, "icon", {
+        size: $data.BUTTON_ICON_SIZES[$props.size]
+      })
+    ]),
+    default: withCtx(() => [
+      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]]);
+  }, 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__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
 const SPLIT_BUTTON_ICON_SIZES = {
@@ -227,13 +233,19 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     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"])])]),
+    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]]);
+  }, 8, ["id", "active", "aria-label", "class", "disabled", "importance", "kind", "size"])), [
+    [_directive_dt_tooltip, $props.tooltipText]
+  ]);
 }
 const SplitButtonOmega = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
 const _sfc_main = {
@@ -477,58 +489,52 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("span", {
     "data-qa": "dt-split-button",
     class: "d-split-btn",
-    style: normalizeStyle({
-      width: $props.width
-    })
-  }, [createVNode(_component_split_button_alpha, mergeProps($options.alphaButtonProps, {
-    ref: "alphaButton",
-    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("alpha-clicked"))
-  }), {
-    icon: withCtx(({
-      size: iconSize
-    }) => [renderSlot(_ctx.$slots, "alphaIcon", {
-      size: iconSize
-    })]),
-    default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-    _: 3
-  }, 16), renderSlot(_ctx.$slots, "omega", {}, () => [_ctx.$slots.dropdownList ? (openBlock(), createBlock(_component_dt_dropdown, {
-    key: 0,
-    placement: $props.dropdownPlacement,
-    onClick: _cache[2] || (_cache[2] = ($event) => $data.isDropdownOpen = true),
-    onOpened: _cache[3] || (_cache[3] = (open) => $data.isDropdownOpen = open)
-  }, {
-    anchor: withCtx((attrs) => [createVNode(_component_split_button_omega, mergeProps({
-      ...attrs,
-      ...$options.omegaButtonProps
-    }, {
-      active: $data.isDropdownOpen,
-      onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("omega-clicked"))
+    style: normalizeStyle({ width: $props.width })
+  }, [
+    createVNode(_component_split_button_alpha, mergeProps($options.alphaButtonProps, {
+      ref: "alphaButton",
+      onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("alpha-clicked"))
     }), {
-      icon: withCtx(({
-        size: iconSize
-      }) => [renderSlot(_ctx.$slots, "omegaIcon", {
-        size: iconSize
-      })]),
-      _: 2
-    }, 1040, ["active"])]),
-    list: withCtx(({
-      close
-    }) => [renderSlot(_ctx.$slots, "dropdownList", {
-      close
-    })]),
-    _: 3
-  }, 8, ["placement"])) : (openBlock(), createBlock(_component_split_button_omega, mergeProps({
-    key: 1
-  }, $options.omegaButtonProps, {
-    onClick: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("omega-clicked"))
-  }), {
-    icon: withCtx(({
-      size: iconSize
-    }) => [renderSlot(_ctx.$slots, "omegaIcon", {
-      size: iconSize
-    })]),
-    _: 3
-  }, 16))])], 4);
+      icon: withCtx(({ size: iconSize }) => [
+        renderSlot(_ctx.$slots, "alphaIcon", { size: iconSize })
+      ]),
+      default: withCtx(() => [
+        renderSlot(_ctx.$slots, "default")
+      ]),
+      _: 3
+    }, 16),
+    renderSlot(_ctx.$slots, "omega", {}, () => [
+      _ctx.$slots.dropdownList ? (openBlock(), createBlock(_component_dt_dropdown, {
+        key: 0,
+        placement: $props.dropdownPlacement,
+        onClick: _cache[2] || (_cache[2] = ($event) => $data.isDropdownOpen = true),
+        onOpened: _cache[3] || (_cache[3] = (open) => $data.isDropdownOpen = open)
+      }, {
+        anchor: withCtx((attrs) => [
+          createVNode(_component_split_button_omega, mergeProps({ ...attrs, ...$options.omegaButtonProps }, {
+            active: $data.isDropdownOpen,
+            onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("omega-clicked"))
+          }), {
+            icon: withCtx(({ size: iconSize }) => [
+              renderSlot(_ctx.$slots, "omegaIcon", { size: iconSize })
+            ]),
+            _: 2
+          }, 1040, ["active"])
+        ]),
+        list: withCtx(({ close }) => [
+          renderSlot(_ctx.$slots, "dropdownList", { close })
+        ]),
+        _: 3
+      }, 8, ["placement"])) : (openBlock(), createBlock(_component_split_button_omega, mergeProps({ key: 1 }, $options.omegaButtonProps, {
+        onClick: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("omega-clicked"))
+      }), {
+        icon: withCtx(({ size: iconSize }) => [
+          renderSlot(_ctx.$slots, "omegaIcon", { size: iconSize })
+        ]),
+        _: 3
+      }, 16))
+    ])
+  ], 4);
 }
 const split_button = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"split-button.js","sources":["../../components/split_button/split_button-alpha.vue","../../components/split_button/split_button_constants.js","../../components/split_button/split_button-omega.vue","../../components/split_button/split_button.vue"],"sourcesContent":["<template>\n  <dt-button\n    v-dt-tooltip=\"tooltipText\"\n    data-qa=\"dt-split-button-alpha\"\n    :active=\"active\"\n    :aria-label=\"ariaLabel\"\n    :assertive-on-focus=\"assertiveOnFocus\"\n    :class=\"`d-split-btn__alpha d-split-btn__alpha--${size}`\"\n    :disabled=\"disabled\"\n    :icon-position=\"iconPosition\"\n    :importance=\"importance\"\n    :kind=\"kind\"\n    :label-class=\"labelClass\"\n    :loading=\"loading\"\n    :size=\"size\"\n  >\n    <template #icon>\n      <slot\n        name=\"icon\"\n        :size=\"BUTTON_ICON_SIZES[size]\"\n      />\n    </template>\n    <slot name=\"default\" />\n  </dt-button>\n</template>\n\n<script>\nimport { BUTTON_ICON_SIZES, DtButton } from '@/components/button';\n\nexport default {\n  name: 'SplitButtonAlpha',\n\n  components: {\n    DtButton,\n  },\n\n  props: {\n    /**\n     * Determines whether the button should have active styling\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the button\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     */\n    iconPosition: {\n      type: String,\n      default: 'left',\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the button\n     */\n    tooltipText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button is in focus.\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n    },\n\n    /**\n     * The color of the button.\n     */\n    kind: {\n      type: String,\n      default: 'default',\n    },\n\n    /**\n     * The size of the button.\n     */\n    size: {\n      type: String,\n      default: 'md',\n    },\n  },\n\n  data () {\n    return {\n      BUTTON_ICON_SIZES,\n    };\n  },\n};\n</script>\n","export const SPLIT_BUTTON_ICON_SIZES = {\n  xs: '100',\n  sm: '100',\n  md: '200',\n  lg: '200',\n  xl: '300',\n};\n\nexport default {\n  SPLIT_BUTTON_ICON_SIZES,\n};\n","<template>\n  <dt-button\n    :id=\"id\"\n    v-dt-tooltip=\"tooltipText\"\n    data-qa=\"dt-split-button-omega\"\n    :active=\"active\"\n    :aria-label=\"ariaLabel\"\n    :class=\"`d-split-btn__omega d-split-btn__omega--${size}`\"\n    :disabled=\"disabled\"\n    :importance=\"importance\"\n    :kind=\"kind\"\n    :size=\"size\"\n  >\n    <template #icon>\n      <slot\n        name=\"icon\"\n        :size=\"SPLIT_BUTTON_ICON_SIZES[size]\"\n      >\n        <dt-icon-chevron-down :size=\"SPLIT_BUTTON_ICON_SIZES[size]\" />\n      </slot>\n    </template>\n  </dt-button>\n</template>\n\n<script>\nimport { SPLIT_BUTTON_ICON_SIZES } from './split_button_constants';\nimport { DtButton } from '@/components/button';\nimport { DtIconChevronDown } from '@dialpad/dialtone-icons/vue3';\nimport { getUniqueString } from '@/common/utils';\n\nexport default {\n  name: 'SplitButtonOmega',\n  components: {\n    DtButton,\n    DtIconChevronDown,\n  },\n\n  props: {\n    /**\n     * Determines whether the button should have active styling\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the button\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * HTML button disabled attribute\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Element ID, useful in case you need to reference the button\n     * as an external anchor for popover\n     */\n    id: {\n      type: String,\n      default: getUniqueString(),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n    },\n\n    /**\n     * The color of the button.\n     */\n    kind: {\n      type: String,\n      default: 'default',\n    },\n\n    /**\n     * The size of the button.\n     */\n    size: {\n      type: String,\n      default: 'md',\n    },\n\n    /**\n     * Text shown in tooltip when you hover the button\n     */\n    tooltipText: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      SPLIT_BUTTON_ICON_SIZES,\n    };\n  },\n};\n</script>\n","<template>\n  <span\n    data-qa=\"dt-split-button\"\n    class=\"d-split-btn\"\n    :style=\"{ width }\"\n  >\n    <split-button-alpha\n      v-bind=\"alphaButtonProps\"\n      ref=\"alphaButton\"\n      @click=\"$emit('alpha-clicked')\"\n    >\n      <template #icon=\"{ size: iconSize }\">\n        <!-- @slot Alpha (left) button icon slot -->\n        <slot\n          name=\"alphaIcon\"\n          :size=\"iconSize\"\n        />\n      </template>\n      <!-- @slot Default content slot -->\n      <slot name=\"default\" />\n    </split-button-alpha>\n    <!-- @slot Omega (right) content slot, overrides omega button styling and functionality completely -->\n    <slot name=\"omega\">\n      <dt-dropdown\n        v-if=\"$slots.dropdownList\"\n        :placement=\"dropdownPlacement\"\n        @click=\"isDropdownOpen = true\"\n        @opened=\"open => isDropdownOpen = open\"\n      >\n        <template #anchor=\"attrs\">\n          <split-button-omega\n            v-bind=\"{ ...attrs, ...omegaButtonProps }\"\n            :active=\"isDropdownOpen\"\n            @click=\"$emit('omega-clicked')\"\n          >\n            <template #icon=\"{ size: iconSize }\">\n              <!-- @slot Omega (right) button icon slot -->\n              <slot\n                name=\"omegaIcon\"\n                :size=\"iconSize\"\n              />\n            </template>\n          </split-button-omega>\n        </template>\n        <template #list=\"{ close }\">\n          <!-- @slot Built-in dropdown content slot, use of dt-list-item is highly recommended here. -->\n          <slot\n            name=\"dropdownList\"\n            :close=\"close\"\n          />\n        </template>\n      </dt-dropdown>\n\n      <split-button-omega\n        v-else\n        v-bind=\"omegaButtonProps\"\n        @click=\"$emit('omega-clicked')\"\n      >\n        <template #icon=\"{ size: iconSize }\">\n          <!-- @slot Omega (right) button icon slot -->\n          <slot\n            name=\"omegaIcon\"\n            :size=\"iconSize\"\n          />\n        </template>\n      </split-button-omega>\n    </slot>\n  </span>\n</template>\n\n<script>\nimport {\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_SIZE_MODIFIERS,\n  ICON_POSITION_MODIFIERS,\n} from '@/components/button';\nimport SplitButtonAlpha from './split_button-alpha.vue';\nimport SplitButtonOmega from './split_button-omega.vue';\nimport { DtDropdown } from '@/components/dropdown';\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  name: 'DtSplitButton',\n\n  components: {\n    SplitButtonOmega,\n    DtDropdown,\n    SplitButtonAlpha,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Determines whether the alpha button should have active styling\n     * @values true, false\n     */\n    alphaActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the alpha button\n     */\n    alphaAriaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The position of the icon slot within the alpha button.\n     * @values left, right, top, bottom\n     */\n    alphaIconPosition: {\n      type: String,\n      default: 'left',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n    },\n\n    /**\n     * Used to customize the alpha label container\n     */\n    alphaLabelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the alpha button should display a loading animation or not.\n     * @values true, false\n     */\n    alphaLoading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the alpha button,\n     * required if no content is passed to default slot\n     */\n    alphaTooltipText: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\">\n     *  (Reference)\n     * </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The direction the dropdown displays relative to the anchor.\n     * @values top, top-start, top-end, right, right-start, right-end, left, left-start, left-end, bottom, bottom-start, bottom-end, auto, auto-start, auto-end\n     */\n    dropdownPlacement: {\n      type: String,\n      default: 'bottom-end',\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n      validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n    },\n\n    /**\n     * The color of the button.\n     * @values default, muted, danger, inverted\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * Determines whether the omega button should have active styling\n     * @values true, false\n     */\n    omegaActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the omega button\n     */\n    omegaAriaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Element ID, useful in case you need to reference the button\n     * as an external anchor for popover.\n     */\n    omegaId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the omega button,\n     * required as it is an icon only button\n     */\n    omegaTooltipText: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * The size of the button.\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Button width, accepts\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n     *   CSS width attribute\n     * </a>\n     * values\n     */\n    width: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Native alpha button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'alpha-clicked',\n\n    /**\n     * Native omega button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'omega-clicked',\n  ],\n\n  data () {\n    return {\n      isDropdownOpen: false,\n    };\n  },\n\n  computed: {\n    alphaButtonProps () {\n      return {\n        active: this.alphaActive,\n        ariaLabel: this.alphaAriaLabel,\n        assertiveOnFocus: this.assertiveOnFocus,\n        disabled: this.disabled,\n        iconPosition: this.alphaIconPosition,\n        labelClass: this.alphaLabelClass,\n        loading: this.alphaLoading,\n        importance: this.importance,\n        kind: this.kind,\n        size: this.size,\n        tooltipText: this.alphaTooltipText,\n        class: this.$attrs.class,\n      };\n    },\n\n    omegaButtonProps () {\n      return {\n        id: this.omegaId,\n        active: this.omegaActive,\n        ariaLabel: this.omegaAriaLabel,\n        disabled: this.disabled,\n        importance: this.importance,\n        kind: this.kind,\n        size: this.size,\n        tooltipText: this.omegaTooltipText,\n        class: this.$attrs.class,\n      };\n    },\n  },\n\n  created () {\n    this.validateProps();\n  },\n\n  updated () {\n    this.validateProps();\n  },\n\n  methods: {\n    validateProps () {\n      this.validateAlphaButtonProps();\n      this.validateOmegaButtonProps();\n    },\n\n    validateAlphaButtonProps () {\n      if (hasSlotContent(this.$slots.default)) return;\n\n      if (hasSlotContent(this.$slots.alphaIcon) && !this.alphaTooltipText) {\n        console.warn('alpha-tooltip-text prop must be set if alpha button has an icon only');\n      }\n    },\n\n    validateOmegaButtonProps () {\n      if (hasSlotContent(this.$slots.omega)) return;\n\n      if (!this.omegaTooltipText) {\n        console.warn('omega-tooltip-text prop is required as it is an icon-only button');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","name","components","DtButton","props","active","type","Boolean","default","ariaLabel","String","iconPosition","labelClass","Array","Object","loading","tooltipText","assertiveOnFocus","disabled","importance","kind","size","data","BUTTON_ICON_SIZES","_createBlock","_component_dt_button","$props","class","icon","_renderSlot","_ctx","$slots","$data","SPLIT_BUTTON_ICON_SIZES","xs","sm","md","lg","xl","DtIconChevronDown","id","getUniqueString","_createVNode","_component_dt_icon_chevron_down","SplitButtonOmega","DtDropdown","SplitButtonAlpha","inheritAttrs","alphaActive","alphaAriaLabel","alphaIconPosition","validator","position","keys","ICON_POSITION_MODIFIERS","includes","alphaLabelClass","alphaLoading","alphaTooltipText","undefined","dropdownPlacement","i","BUTTON_IMPORTANCE_MODIFIERS","k","BUTTON_KIND_MODIFIERS","omegaActive","omegaAriaLabel","omegaId","omegaTooltipText","s","BUTTON_SIZE_MODIFIERS","width","emits","isDropdownOpen","computed","alphaButtonProps","$attrs","omegaButtonProps","created","validateProps","updated","methods","validateAlphaButtonProps","validateOmegaButtonProps","hasSlotContent","alphaIcon","console","warn","omega","_createElementBlock","style","_component_split_button_alpha","_mergeProps","$options","ref","onClick","$emit","_withCtx","iconSize","dropdownList","_component_dt_dropdown","placement","onOpened","_cache","open","anchor","attrs","_component_split_button_omega","list","close","key"],"mappings":"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"}
+{"version":3,"file":"split-button.js","sources":["../../components/split_button/split_button-alpha.vue","../../components/split_button/split_button_constants.js","../../components/split_button/split_button-omega.vue","../../components/split_button/split_button.vue"],"sourcesContent":["<template>\n  <dt-button\n    v-dt-tooltip=\"tooltipText\"\n    data-qa=\"dt-split-button-alpha\"\n    :active=\"active\"\n    :aria-label=\"ariaLabel\"\n    :assertive-on-focus=\"assertiveOnFocus\"\n    :class=\"`d-split-btn__alpha d-split-btn__alpha--${size}`\"\n    :disabled=\"disabled\"\n    :icon-position=\"iconPosition\"\n    :importance=\"importance\"\n    :kind=\"kind\"\n    :label-class=\"labelClass\"\n    :loading=\"loading\"\n    :size=\"size\"\n  >\n    <template #icon>\n      <slot\n        name=\"icon\"\n        :size=\"BUTTON_ICON_SIZES[size]\"\n      />\n    </template>\n    <slot name=\"default\" />\n  </dt-button>\n</template>\n\n<script>\nimport { BUTTON_ICON_SIZES, DtButton } from '@/components/button';\n\nexport default {\n  name: 'SplitButtonAlpha',\n\n  components: {\n    DtButton,\n  },\n\n  props: {\n    /**\n     * Determines whether the button should have active styling\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the button\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     */\n    iconPosition: {\n      type: String,\n      default: 'left',\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the button\n     */\n    tooltipText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button is in focus.\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n    },\n\n    /**\n     * The color of the button.\n     */\n    kind: {\n      type: String,\n      default: 'default',\n    },\n\n    /**\n     * The size of the button.\n     */\n    size: {\n      type: String,\n      default: 'md',\n    },\n  },\n\n  data () {\n    return {\n      BUTTON_ICON_SIZES,\n    };\n  },\n};\n</script>\n","export const SPLIT_BUTTON_ICON_SIZES = {\n  xs: '100',\n  sm: '100',\n  md: '200',\n  lg: '200',\n  xl: '300',\n};\n\nexport default {\n  SPLIT_BUTTON_ICON_SIZES,\n};\n","<template>\n  <dt-button\n    :id=\"id\"\n    v-dt-tooltip=\"tooltipText\"\n    data-qa=\"dt-split-button-omega\"\n    :active=\"active\"\n    :aria-label=\"ariaLabel\"\n    :class=\"`d-split-btn__omega d-split-btn__omega--${size}`\"\n    :disabled=\"disabled\"\n    :importance=\"importance\"\n    :kind=\"kind\"\n    :size=\"size\"\n  >\n    <template #icon>\n      <slot\n        name=\"icon\"\n        :size=\"SPLIT_BUTTON_ICON_SIZES[size]\"\n      >\n        <dt-icon-chevron-down :size=\"SPLIT_BUTTON_ICON_SIZES[size]\" />\n      </slot>\n    </template>\n  </dt-button>\n</template>\n\n<script>\nimport { SPLIT_BUTTON_ICON_SIZES } from './split_button_constants';\nimport { DtButton } from '@/components/button';\nimport { DtIconChevronDown } from '@dialpad/dialtone-icons/vue3';\nimport { getUniqueString } from '@/common/utils';\n\nexport default {\n  name: 'SplitButtonOmega',\n  components: {\n    DtButton,\n    DtIconChevronDown,\n  },\n\n  props: {\n    /**\n     * Determines whether the button should have active styling\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the button\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * HTML button disabled attribute\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Element ID, useful in case you need to reference the button\n     * as an external anchor for popover\n     */\n    id: {\n      type: String,\n      default: getUniqueString(),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n    },\n\n    /**\n     * The color of the button.\n     */\n    kind: {\n      type: String,\n      default: 'default',\n    },\n\n    /**\n     * The size of the button.\n     */\n    size: {\n      type: String,\n      default: 'md',\n    },\n\n    /**\n     * Text shown in tooltip when you hover the button\n     */\n    tooltipText: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      SPLIT_BUTTON_ICON_SIZES,\n    };\n  },\n};\n</script>\n","<template>\n  <span\n    data-qa=\"dt-split-button\"\n    class=\"d-split-btn\"\n    :style=\"{ width }\"\n  >\n    <split-button-alpha\n      v-bind=\"alphaButtonProps\"\n      ref=\"alphaButton\"\n      @click=\"$emit('alpha-clicked')\"\n    >\n      <template #icon=\"{ size: iconSize }\">\n        <!-- @slot Alpha (left) button icon slot -->\n        <slot\n          name=\"alphaIcon\"\n          :size=\"iconSize\"\n        />\n      </template>\n      <!-- @slot Default content slot -->\n      <slot name=\"default\" />\n    </split-button-alpha>\n    <!-- @slot Omega (right) content slot, overrides omega button styling and functionality completely -->\n    <slot name=\"omega\">\n      <dt-dropdown\n        v-if=\"$slots.dropdownList\"\n        :placement=\"dropdownPlacement\"\n        @click=\"isDropdownOpen = true\"\n        @opened=\"open => isDropdownOpen = open\"\n      >\n        <template #anchor=\"attrs\">\n          <split-button-omega\n            v-bind=\"{ ...attrs, ...omegaButtonProps }\"\n            :active=\"isDropdownOpen\"\n            @click=\"$emit('omega-clicked')\"\n          >\n            <template #icon=\"{ size: iconSize }\">\n              <!-- @slot Omega (right) button icon slot -->\n              <slot\n                name=\"omegaIcon\"\n                :size=\"iconSize\"\n              />\n            </template>\n          </split-button-omega>\n        </template>\n        <template #list=\"{ close }\">\n          <!-- @slot Built-in dropdown content slot, use of dt-list-item is highly recommended here. -->\n          <slot\n            name=\"dropdownList\"\n            :close=\"close\"\n          />\n        </template>\n      </dt-dropdown>\n\n      <split-button-omega\n        v-else\n        v-bind=\"omegaButtonProps\"\n        @click=\"$emit('omega-clicked')\"\n      >\n        <template #icon=\"{ size: iconSize }\">\n          <!-- @slot Omega (right) button icon slot -->\n          <slot\n            name=\"omegaIcon\"\n            :size=\"iconSize\"\n          />\n        </template>\n      </split-button-omega>\n    </slot>\n  </span>\n</template>\n\n<script>\nimport {\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_SIZE_MODIFIERS,\n  ICON_POSITION_MODIFIERS,\n} from '@/components/button';\nimport SplitButtonAlpha from './split_button-alpha.vue';\nimport SplitButtonOmega from './split_button-omega.vue';\nimport { DtDropdown } from '@/components/dropdown';\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  name: 'DtSplitButton',\n\n  components: {\n    SplitButtonOmega,\n    DtDropdown,\n    SplitButtonAlpha,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Determines whether the alpha button should have active styling\n     * @values true, false\n     */\n    alphaActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the alpha button\n     */\n    alphaAriaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The position of the icon slot within the alpha button.\n     * @values left, right, top, bottom\n     */\n    alphaIconPosition: {\n      type: String,\n      default: 'left',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n    },\n\n    /**\n     * Used to customize the alpha label container\n     */\n    alphaLabelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the alpha button should display a loading animation or not.\n     * @values true, false\n     */\n    alphaLoading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the alpha button,\n     * required if no content is passed to default slot\n     */\n    alphaTooltipText: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\">\n     *  (Reference)\n     * </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The direction the dropdown displays relative to the anchor.\n     * @values top, top-start, top-end, right, right-start, right-end, left, left-start, left-end, bottom, bottom-start, bottom-end, auto, auto-start, auto-end\n     */\n    dropdownPlacement: {\n      type: String,\n      default: 'bottom-end',\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n      validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n    },\n\n    /**\n     * The color of the button.\n     * @values default, muted, danger, inverted\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * Determines whether the omega button should have active styling\n     * @values true, false\n     */\n    omegaActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the omega button\n     */\n    omegaAriaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Element ID, useful in case you need to reference the button\n     * as an external anchor for popover.\n     */\n    omegaId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the omega button,\n     * required as it is an icon only button\n     */\n    omegaTooltipText: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * The size of the button.\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Button width, accepts\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n     *   CSS width attribute\n     * </a>\n     * values\n     */\n    width: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Native alpha button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'alpha-clicked',\n\n    /**\n     * Native omega button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'omega-clicked',\n  ],\n\n  data () {\n    return {\n      isDropdownOpen: false,\n    };\n  },\n\n  computed: {\n    alphaButtonProps () {\n      return {\n        active: this.alphaActive,\n        ariaLabel: this.alphaAriaLabel,\n        assertiveOnFocus: this.assertiveOnFocus,\n        disabled: this.disabled,\n        iconPosition: this.alphaIconPosition,\n        labelClass: this.alphaLabelClass,\n        loading: this.alphaLoading,\n        importance: this.importance,\n        kind: this.kind,\n        size: this.size,\n        tooltipText: this.alphaTooltipText,\n        class: this.$attrs.class,\n      };\n    },\n\n    omegaButtonProps () {\n      return {\n        id: this.omegaId,\n        active: this.omegaActive,\n        ariaLabel: this.omegaAriaLabel,\n        disabled: this.disabled,\n        importance: this.importance,\n        kind: this.kind,\n        size: this.size,\n        tooltipText: this.omegaTooltipText,\n        class: this.$attrs.class,\n      };\n    },\n  },\n\n  created () {\n    this.validateProps();\n  },\n\n  updated () {\n    this.validateProps();\n  },\n\n  methods: {\n    validateProps () {\n      this.validateAlphaButtonProps();\n      this.validateOmegaButtonProps();\n    },\n\n    validateAlphaButtonProps () {\n      if (hasSlotContent(this.$slots.default)) return;\n\n      if (hasSlotContent(this.$slots.alphaIcon) && !this.alphaTooltipText) {\n        console.warn('alpha-tooltip-text prop must be set if alpha button has an icon only');\n      }\n    },\n\n    validateOmegaButtonProps () {\n      if (hasSlotContent(this.$slots.omega)) return;\n\n      if (!this.omegaTooltipText) {\n        console.warn('omega-tooltip-text prop is required as it is an icon-only button');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","_createBlock","_renderSlot","_createVNode","_createElementBlock","_mergeProps","_withCtx"],"mappings":"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"}

package/dist/vue3/lib/stack.cjs

@@ -10,9 +10,7 @@ function _getValidDirection(direction) {
   if (directionPropType(direction) === "string") {
     return !_isDefaultDirection(direction) ? stack_constants.DT_STACK_DIRECTION[direction] : null;
   } else if (directionPropType(direction) === "object") {
-    const {
-      default: defaultStyle
-    } = direction;
+    const { default: defaultStyle } = direction;
     return !_isDefaultDirection(defaultStyle) ? stack_constants.DT_STACK_DIRECTION[defaultStyle] : null;
   } else {
     return null;
@@ -35,24 +33,31 @@ function getDefaultDirectionClass(direction) {
 }
 function getResposiveDirectionClasses(direction) {
   if (directionPropType(direction) === "object") {
-    return [...stack_constants.DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {
-      return direction[breakpoint] ? `d-stack--${breakpoint}-${direction[breakpoint]}` : null;
-    })];
+    return [
+      ...stack_constants.DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {
+        return direction[breakpoint] ? `d-stack--${breakpoint}-${direction[breakpoint]}` : null;
+      })
+    ];
   } else {
     return [];
   }
 }
 function getResposiveGapClasses(gap) {
   if (typeof gap === "object") {
-    return [...stack_constants.DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {
-      return stack_constants.DT_STACK_GAP.includes(gap[breakpoint]) ? `d-stack--${breakpoint}-gap-${gap[breakpoint]}` : null;
-    })];
+    return [
+      ...stack_constants.DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {
+        return stack_constants.DT_STACK_GAP.includes(gap[breakpoint]) ? `d-stack--${breakpoint}-gap-${gap[breakpoint]}` : null;
+      })
+    ];
   } else {
     return [];
   }
 }
 function getResponsiveClasses(direction, gap) {
-  return [...getResposiveDirectionClasses(direction), ...getResposiveGapClasses(gap)];
+  return [
+    ...getResposiveDirectionClasses(direction),
+    ...getResposiveGapClasses(gap)
+  ];
 }
 function getDefaultGapClass(gap) {
   const validGap = _getValidGap(gap);
@@ -62,9 +67,7 @@ function directionValidator(direction) {
   if (directionPropType(direction) === "string") {
     return Object.keys(stack_constants.DT_STACK_DIRECTION).includes(direction);
   } else if (directionPropType(direction) === "object") {
-    const {
-      default: defaultStyle
-    } = direction;
+    const { default: defaultStyle } = direction;
     return Object.keys(stack_constants.DT_STACK_DIRECTION).includes(defaultStyle);
   } else {
     return null;
@@ -75,9 +78,7 @@ function gapValidator(gap) {
     return stack_constants.DT_STACK_GAP.includes(gap);
   }
   if (typeof gap === "object") {
-    const {
-      default: defaultStyle
-    } = gap;
+    const { default: defaultStyle } = gap;
     return stack_constants.DT_STACK_GAP.includes(defaultStyle);
   }
 }
@@ -139,9 +140,16 @@ const _sfc_main = {
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.as), {
-    class: vue.normalizeClass(["d-stack", $options.defaultDirection, $options.defaultGap, $options.stackResponsive])
+    class: vue.normalizeClass([
+      "d-stack",
+      $options.defaultDirection,
+      $options.defaultGap,
+      $options.stackResponsive
+    ])
   }, {
-    default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default")]),
+    default: vue.withCtx(() => [
+      vue.renderSlot(_ctx.$slots, "default")
+    ]),
     _: 3
   }, 8, ["class"]);
 }

package/dist/vue3/lib/stack.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"stack.cjs","sources":["../../components/stack/utils.js","../../components/stack/validators.js","../../components/stack/stack.vue"],"sourcesContent":["import { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from '@/components/stack/stack_constants';\n\nfunction _isDefaultDirection (direction) {\n  return direction === DT_STACK_DIRECTION.default;\n}\n\nfunction _getValidDirection (direction) {\n  if (directionPropType(direction) === 'string') {\n    return !_isDefaultDirection(direction) ? DT_STACK_DIRECTION[direction] : null;\n  } else if (directionPropType(direction) === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return !_isDefaultDirection(defaultStyle) ? DT_STACK_DIRECTION[defaultStyle] : null;\n  } else { return null; }\n}\n\nfunction _getValidGap (gap) {\n  if (typeof gap === 'string') {\n    return gap;\n  } else if (typeof gap === 'object') {\n    return gap.default;\n  } else { return null; }\n}\n\nexport function directionPropType (value) {\n  return typeof value;\n}\n\nexport function getDefaultDirectionClass (direction) {\n  return _getValidDirection(direction)\n    ? `d-stack--${DT_STACK_DIRECTION[_getValidDirection(direction)]}`\n    : null;\n}\n\nfunction getResposiveDirectionClasses (direction) {\n  if (directionPropType(direction) === 'object') {\n    return [\n      ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n        return direction[breakpoint]\n          ? `d-stack--${breakpoint}-${direction[breakpoint]}`\n          : null;\n      })];\n  } else { return []; }\n}\n\nfunction getResposiveGapClasses (gap) {\n  if (typeof gap === 'object') {\n    return [\n      ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n        return DT_STACK_GAP.includes(gap[breakpoint])\n          ? `d-stack--${breakpoint}-gap-${gap[breakpoint]}`\n          : null;\n      })];\n  } else { return []; }\n}\n\nexport function getResponsiveClasses (direction, gap) {\n  return [\n    ...getResposiveDirectionClasses(direction),\n    ...getResposiveGapClasses(gap),\n  ];\n}\n\nexport function getDefaultGapClass (gap) {\n  const validGap = _getValidGap(gap);\n  return DT_STACK_GAP.includes(validGap) ? `d-stack--gap-${validGap}` : null;\n}\n","import { DT_STACK_DIRECTION, DT_STACK_GAP } from '@/components/stack/stack_constants';\nimport { directionPropType } from './utils';\n\nexport function directionValidator (direction) {\n  if (directionPropType(direction) === 'string') {\n    return Object.keys(DT_STACK_DIRECTION).includes(direction);\n  } else if (directionPropType(direction) === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return Object.keys(DT_STACK_DIRECTION).includes(defaultStyle);\n  } else { return null; }\n}\n\nexport function gapValidator (gap) {\n  if (typeof gap === 'string') {\n    return DT_STACK_GAP.includes(gap);\n  }\n  if (typeof gap === 'object') {\n    const { default: defaultStyle } = gap;\n\n    return DT_STACK_GAP.includes(defaultStyle);\n  }\n}\n","<template>\n  <component\n    :is=\"as\"\n    :class=\"[\n      'd-stack',\n      defaultDirection,\n      defaultGap,\n      stackResponsive,\n    ]\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from './stack_constants';\nimport { directionValidator, gapValidator } from './validators';\nimport { getDefaultDirectionClass, getResponsiveClasses, getDefaultGapClass } from './utils';\n\nexport default {\n  name: 'DtStack',\n\n  props: {\n    /**\n     * Set this prop to the direction to stack the items.\n     * You can override the default direction with 'default' key.\n     * All the undefined breakpoints will have 'default' value.\n     * By default, for the column direction it will have `justify-content: flex-start`\n     * and for the row direction `align-items: center`. This can be overriden\n     * by utility classes.\n     */\n    direction: {\n      type: [String, Object],\n      default: 'column',\n      validator: (direction) => directionValidator(direction),\n    },\n\n    /**\n     * Set this prop to render stack as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The gap property controls the spacing between items in the stack.\n     * The gap can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default gap with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are '0', '100', '200', '300', '400', '450', '500', '600'.\n     */\n    gap: {\n      type: [String, Object],\n      default: '0',\n      validator: (gap) => gapValidator(gap),\n    },\n  },\n\n  data () {\n    return {\n      DT_STACK_DIRECTION,\n      DT_STACK_GAP,\n      DT_STACK_RESPONSIVE_BREAKPOINTS,\n    };\n  },\n\n  computed: {\n    defaultGap () {\n      return getDefaultGapClass(this.gap);\n    },\n\n    defaultDirection () {\n      return getDefaultDirectionClass(this.direction);\n    },\n\n    stackResponsive () {\n      return getResponsiveClasses(this.direction, this.gap);\n    },\n  },\n};\n</script>\n"],"names":["_isDefaultDirection","direction","DT_STACK_DIRECTION","default","_getValidDirection","directionPropType","defaultStyle","_getValidGap","gap","value","getDefaultDirectionClass","getResposiveDirectionClasses","DT_STACK_RESPONSIVE_BREAKPOINTS","map","breakpoint","getResposiveGapClasses","DT_STACK_GAP","includes","getResponsiveClasses","getDefaultGapClass","validGap","directionValidator","Object","keys","gapValidator","_sfc_main","name","props","type","String","validator","as","data","computed","defaultGap","defaultDirection","stackResponsive","_openBlock","_createBlock","_resolveDynamicComponent","$props","class","_normalizeClass","$options","_renderSlot","_ctx","$slots"],"mappings":"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"}
+{"version":3,"file":"stack.cjs","sources":["../../components/stack/utils.js","../../components/stack/validators.js","../../components/stack/stack.vue"],"sourcesContent":["import { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from '@/components/stack/stack_constants';\n\nfunction _isDefaultDirection (direction) {\n  return direction === DT_STACK_DIRECTION.default;\n}\n\nfunction _getValidDirection (direction) {\n  if (directionPropType(direction) === 'string') {\n    return !_isDefaultDirection(direction) ? DT_STACK_DIRECTION[direction] : null;\n  } else if (directionPropType(direction) === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return !_isDefaultDirection(defaultStyle) ? DT_STACK_DIRECTION[defaultStyle] : null;\n  } else { return null; }\n}\n\nfunction _getValidGap (gap) {\n  if (typeof gap === 'string') {\n    return gap;\n  } else if (typeof gap === 'object') {\n    return gap.default;\n  } else { return null; }\n}\n\nexport function directionPropType (value) {\n  return typeof value;\n}\n\nexport function getDefaultDirectionClass (direction) {\n  return _getValidDirection(direction)\n    ? `d-stack--${DT_STACK_DIRECTION[_getValidDirection(direction)]}`\n    : null;\n}\n\nfunction getResposiveDirectionClasses (direction) {\n  if (directionPropType(direction) === 'object') {\n    return [\n      ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n        return direction[breakpoint]\n          ? `d-stack--${breakpoint}-${direction[breakpoint]}`\n          : null;\n      })];\n  } else { return []; }\n}\n\nfunction getResposiveGapClasses (gap) {\n  if (typeof gap === 'object') {\n    return [\n      ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n        return DT_STACK_GAP.includes(gap[breakpoint])\n          ? `d-stack--${breakpoint}-gap-${gap[breakpoint]}`\n          : null;\n      })];\n  } else { return []; }\n}\n\nexport function getResponsiveClasses (direction, gap) {\n  return [\n    ...getResposiveDirectionClasses(direction),\n    ...getResposiveGapClasses(gap),\n  ];\n}\n\nexport function getDefaultGapClass (gap) {\n  const validGap = _getValidGap(gap);\n  return DT_STACK_GAP.includes(validGap) ? `d-stack--gap-${validGap}` : null;\n}\n","import { DT_STACK_DIRECTION, DT_STACK_GAP } from '@/components/stack/stack_constants';\nimport { directionPropType } from './utils';\n\nexport function directionValidator (direction) {\n  if (directionPropType(direction) === 'string') {\n    return Object.keys(DT_STACK_DIRECTION).includes(direction);\n  } else if (directionPropType(direction) === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return Object.keys(DT_STACK_DIRECTION).includes(defaultStyle);\n  } else { return null; }\n}\n\nexport function gapValidator (gap) {\n  if (typeof gap === 'string') {\n    return DT_STACK_GAP.includes(gap);\n  }\n  if (typeof gap === 'object') {\n    const { default: defaultStyle } = gap;\n\n    return DT_STACK_GAP.includes(defaultStyle);\n  }\n}\n","<template>\n  <component\n    :is=\"as\"\n    :class=\"[\n      'd-stack',\n      defaultDirection,\n      defaultGap,\n      stackResponsive,\n    ]\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from './stack_constants';\nimport { directionValidator, gapValidator } from './validators';\nimport { getDefaultDirectionClass, getResponsiveClasses, getDefaultGapClass } from './utils';\n\nexport default {\n  name: 'DtStack',\n\n  props: {\n    /**\n     * Set this prop to the direction to stack the items.\n     * You can override the default direction with 'default' key.\n     * All the undefined breakpoints will have 'default' value.\n     * By default, for the column direction it will have `justify-content: flex-start`\n     * and for the row direction `align-items: center`. This can be overriden\n     * by utility classes.\n     */\n    direction: {\n      type: [String, Object],\n      default: 'column',\n      validator: (direction) => directionValidator(direction),\n    },\n\n    /**\n     * Set this prop to render stack as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The gap property controls the spacing between items in the stack.\n     * The gap can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default gap with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are '0', '100', '200', '300', '400', '450', '500', '600'.\n     */\n    gap: {\n      type: [String, Object],\n      default: '0',\n      validator: (gap) => gapValidator(gap),\n    },\n  },\n\n  data () {\n    return {\n      DT_STACK_DIRECTION,\n      DT_STACK_GAP,\n      DT_STACK_RESPONSIVE_BREAKPOINTS,\n    };\n  },\n\n  computed: {\n    defaultGap () {\n      return getDefaultGapClass(this.gap);\n    },\n\n    defaultDirection () {\n      return getDefaultDirectionClass(this.direction);\n    },\n\n    stackResponsive () {\n      return getResponsiveClasses(this.direction, this.gap);\n    },\n  },\n};\n</script>\n"],"names":["DT_STACK_DIRECTION","DT_STACK_RESPONSIVE_BREAKPOINTS","DT_STACK_GAP","_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_renderSlot"],"mappings":"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"}

package/dist/vue3/lib/stack.js

@@ -8,9 +8,7 @@ function _getValidDirection(direction) {
   if (directionPropType(direction) === "string") {
     return !_isDefaultDirection(direction) ? DT_STACK_DIRECTION[direction] : null;
   } else if (directionPropType(direction) === "object") {
-    const {
-      default: defaultStyle
-    } = direction;
+    const { default: defaultStyle } = direction;
     return !_isDefaultDirection(defaultStyle) ? DT_STACK_DIRECTION[defaultStyle] : null;
   } else {
     return null;
@@ -33,24 +31,31 @@ function getDefaultDirectionClass(direction) {
 }
 function getResposiveDirectionClasses(direction) {
   if (directionPropType(direction) === "object") {
-    return [...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {
-      return direction[breakpoint] ? `d-stack--${breakpoint}-${direction[breakpoint]}` : null;
-    })];
+    return [
+      ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {
+        return direction[breakpoint] ? `d-stack--${breakpoint}-${direction[breakpoint]}` : null;
+      })
+    ];
   } else {
     return [];
   }
 }
 function getResposiveGapClasses(gap) {
   if (typeof gap === "object") {
-    return [...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {
-      return DT_STACK_GAP.includes(gap[breakpoint]) ? `d-stack--${breakpoint}-gap-${gap[breakpoint]}` : null;
-    })];
+    return [
+      ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {
+        return DT_STACK_GAP.includes(gap[breakpoint]) ? `d-stack--${breakpoint}-gap-${gap[breakpoint]}` : null;
+      })
+    ];
   } else {
     return [];
   }
 }
 function getResponsiveClasses(direction, gap) {
-  return [...getResposiveDirectionClasses(direction), ...getResposiveGapClasses(gap)];
+  return [
+    ...getResposiveDirectionClasses(direction),
+    ...getResposiveGapClasses(gap)
+  ];
 }
 function getDefaultGapClass(gap) {
   const validGap = _getValidGap(gap);
@@ -60,9 +65,7 @@ function directionValidator(direction) {
   if (directionPropType(direction) === "string") {
     return Object.keys(DT_STACK_DIRECTION).includes(direction);
   } else if (directionPropType(direction) === "object") {
-    const {
-      default: defaultStyle
-    } = direction;
+    const { default: defaultStyle } = direction;
     return Object.keys(DT_STACK_DIRECTION).includes(defaultStyle);
   } else {
     return null;
@@ -73,9 +76,7 @@ function gapValidator(gap) {
     return DT_STACK_GAP.includes(gap);
   }
   if (typeof gap === "object") {
-    const {
-      default: defaultStyle
-    } = gap;
+    const { default: defaultStyle } = gap;
     return DT_STACK_GAP.includes(defaultStyle);
   }
 }
@@ -137,9 +138,16 @@ const _sfc_main = {
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(resolveDynamicComponent($props.as), {
-    class: normalizeClass(["d-stack", $options.defaultDirection, $options.defaultGap, $options.stackResponsive])
+    class: normalizeClass([
+      "d-stack",
+      $options.defaultDirection,
+      $options.defaultGap,
+      $options.stackResponsive
+    ])
   }, {
-    default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+    default: withCtx(() => [
+      renderSlot(_ctx.$slots, "default")
+    ]),
     _: 3
   }, 8, ["class"]);
 }

package/dist/vue3/lib/stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"stack.js","sources":["../../components/stack/utils.js","../../components/stack/validators.js","../../components/stack/stack.vue"],"sourcesContent":["import { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from '@/components/stack/stack_constants';\n\nfunction _isDefaultDirection (direction) {\n  return direction === DT_STACK_DIRECTION.default;\n}\n\nfunction _getValidDirection (direction) {\n  if (directionPropType(direction) === 'string') {\n    return !_isDefaultDirection(direction) ? DT_STACK_DIRECTION[direction] : null;\n  } else if (directionPropType(direction) === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return !_isDefaultDirection(defaultStyle) ? DT_STACK_DIRECTION[defaultStyle] : null;\n  } else { return null; }\n}\n\nfunction _getValidGap (gap) {\n  if (typeof gap === 'string') {\n    return gap;\n  } else if (typeof gap === 'object') {\n    return gap.default;\n  } else { return null; }\n}\n\nexport function directionPropType (value) {\n  return typeof value;\n}\n\nexport function getDefaultDirectionClass (direction) {\n  return _getValidDirection(direction)\n    ? `d-stack--${DT_STACK_DIRECTION[_getValidDirection(direction)]}`\n    : null;\n}\n\nfunction getResposiveDirectionClasses (direction) {\n  if (directionPropType(direction) === 'object') {\n    return [\n      ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n        return direction[breakpoint]\n          ? `d-stack--${breakpoint}-${direction[breakpoint]}`\n          : null;\n      })];\n  } else { return []; }\n}\n\nfunction getResposiveGapClasses (gap) {\n  if (typeof gap === 'object') {\n    return [\n      ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n        return DT_STACK_GAP.includes(gap[breakpoint])\n          ? `d-stack--${breakpoint}-gap-${gap[breakpoint]}`\n          : null;\n      })];\n  } else { return []; }\n}\n\nexport function getResponsiveClasses (direction, gap) {\n  return [\n    ...getResposiveDirectionClasses(direction),\n    ...getResposiveGapClasses(gap),\n  ];\n}\n\nexport function getDefaultGapClass (gap) {\n  const validGap = _getValidGap(gap);\n  return DT_STACK_GAP.includes(validGap) ? `d-stack--gap-${validGap}` : null;\n}\n","import { DT_STACK_DIRECTION, DT_STACK_GAP } from '@/components/stack/stack_constants';\nimport { directionPropType } from './utils';\n\nexport function directionValidator (direction) {\n  if (directionPropType(direction) === 'string') {\n    return Object.keys(DT_STACK_DIRECTION).includes(direction);\n  } else if (directionPropType(direction) === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return Object.keys(DT_STACK_DIRECTION).includes(defaultStyle);\n  } else { return null; }\n}\n\nexport function gapValidator (gap) {\n  if (typeof gap === 'string') {\n    return DT_STACK_GAP.includes(gap);\n  }\n  if (typeof gap === 'object') {\n    const { default: defaultStyle } = gap;\n\n    return DT_STACK_GAP.includes(defaultStyle);\n  }\n}\n","<template>\n  <component\n    :is=\"as\"\n    :class=\"[\n      'd-stack',\n      defaultDirection,\n      defaultGap,\n      stackResponsive,\n    ]\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from './stack_constants';\nimport { directionValidator, gapValidator } from './validators';\nimport { getDefaultDirectionClass, getResponsiveClasses, getDefaultGapClass } from './utils';\n\nexport default {\n  name: 'DtStack',\n\n  props: {\n    /**\n     * Set this prop to the direction to stack the items.\n     * You can override the default direction with 'default' key.\n     * All the undefined breakpoints will have 'default' value.\n     * By default, for the column direction it will have `justify-content: flex-start`\n     * and for the row direction `align-items: center`. This can be overriden\n     * by utility classes.\n     */\n    direction: {\n      type: [String, Object],\n      default: 'column',\n      validator: (direction) => directionValidator(direction),\n    },\n\n    /**\n     * Set this prop to render stack as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The gap property controls the spacing between items in the stack.\n     * The gap can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default gap with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are '0', '100', '200', '300', '400', '450', '500', '600'.\n     */\n    gap: {\n      type: [String, Object],\n      default: '0',\n      validator: (gap) => gapValidator(gap),\n    },\n  },\n\n  data () {\n    return {\n      DT_STACK_DIRECTION,\n      DT_STACK_GAP,\n      DT_STACK_RESPONSIVE_BREAKPOINTS,\n    };\n  },\n\n  computed: {\n    defaultGap () {\n      return getDefaultGapClass(this.gap);\n    },\n\n    defaultDirection () {\n      return getDefaultDirectionClass(this.direction);\n    },\n\n    stackResponsive () {\n      return getResponsiveClasses(this.direction, this.gap);\n    },\n  },\n};\n</script>\n"],"names":["_isDefaultDirection","direction","DT_STACK_DIRECTION","default","_getValidDirection","directionPropType","defaultStyle","_getValidGap","gap","value","getDefaultDirectionClass","getResposiveDirectionClasses","DT_STACK_RESPONSIVE_BREAKPOINTS","map","breakpoint","getResposiveGapClasses","DT_STACK_GAP","includes","getResponsiveClasses","getDefaultGapClass","validGap","directionValidator","Object","keys","gapValidator","_sfc_main","name","props","type","String","validator","as","data","computed","defaultGap","defaultDirection","stackResponsive","_openBlock","_createBlock","_resolveDynamicComponent","$props","class","_normalizeClass","$options","_renderSlot","_ctx","$slots"],"mappings":"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"}
+{"version":3,"file":"stack.js","sources":["../../components/stack/utils.js","../../components/stack/validators.js","../../components/stack/stack.vue"],"sourcesContent":["import { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from '@/components/stack/stack_constants';\n\nfunction _isDefaultDirection (direction) {\n  return direction === DT_STACK_DIRECTION.default;\n}\n\nfunction _getValidDirection (direction) {\n  if (directionPropType(direction) === 'string') {\n    return !_isDefaultDirection(direction) ? DT_STACK_DIRECTION[direction] : null;\n  } else if (directionPropType(direction) === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return !_isDefaultDirection(defaultStyle) ? DT_STACK_DIRECTION[defaultStyle] : null;\n  } else { return null; }\n}\n\nfunction _getValidGap (gap) {\n  if (typeof gap === 'string') {\n    return gap;\n  } else if (typeof gap === 'object') {\n    return gap.default;\n  } else { return null; }\n}\n\nexport function directionPropType (value) {\n  return typeof value;\n}\n\nexport function getDefaultDirectionClass (direction) {\n  return _getValidDirection(direction)\n    ? `d-stack--${DT_STACK_DIRECTION[_getValidDirection(direction)]}`\n    : null;\n}\n\nfunction getResposiveDirectionClasses (direction) {\n  if (directionPropType(direction) === 'object') {\n    return [\n      ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n        return direction[breakpoint]\n          ? `d-stack--${breakpoint}-${direction[breakpoint]}`\n          : null;\n      })];\n  } else { return []; }\n}\n\nfunction getResposiveGapClasses (gap) {\n  if (typeof gap === 'object') {\n    return [\n      ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n        return DT_STACK_GAP.includes(gap[breakpoint])\n          ? `d-stack--${breakpoint}-gap-${gap[breakpoint]}`\n          : null;\n      })];\n  } else { return []; }\n}\n\nexport function getResponsiveClasses (direction, gap) {\n  return [\n    ...getResposiveDirectionClasses(direction),\n    ...getResposiveGapClasses(gap),\n  ];\n}\n\nexport function getDefaultGapClass (gap) {\n  const validGap = _getValidGap(gap);\n  return DT_STACK_GAP.includes(validGap) ? `d-stack--gap-${validGap}` : null;\n}\n","import { DT_STACK_DIRECTION, DT_STACK_GAP } from '@/components/stack/stack_constants';\nimport { directionPropType } from './utils';\n\nexport function directionValidator (direction) {\n  if (directionPropType(direction) === 'string') {\n    return Object.keys(DT_STACK_DIRECTION).includes(direction);\n  } else if (directionPropType(direction) === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return Object.keys(DT_STACK_DIRECTION).includes(defaultStyle);\n  } else { return null; }\n}\n\nexport function gapValidator (gap) {\n  if (typeof gap === 'string') {\n    return DT_STACK_GAP.includes(gap);\n  }\n  if (typeof gap === 'object') {\n    const { default: defaultStyle } = gap;\n\n    return DT_STACK_GAP.includes(defaultStyle);\n  }\n}\n","<template>\n  <component\n    :is=\"as\"\n    :class=\"[\n      'd-stack',\n      defaultDirection,\n      defaultGap,\n      stackResponsive,\n    ]\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from './stack_constants';\nimport { directionValidator, gapValidator } from './validators';\nimport { getDefaultDirectionClass, getResponsiveClasses, getDefaultGapClass } from './utils';\n\nexport default {\n  name: 'DtStack',\n\n  props: {\n    /**\n     * Set this prop to the direction to stack the items.\n     * You can override the default direction with 'default' key.\n     * All the undefined breakpoints will have 'default' value.\n     * By default, for the column direction it will have `justify-content: flex-start`\n     * and for the row direction `align-items: center`. This can be overriden\n     * by utility classes.\n     */\n    direction: {\n      type: [String, Object],\n      default: 'column',\n      validator: (direction) => directionValidator(direction),\n    },\n\n    /**\n     * Set this prop to render stack as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The gap property controls the spacing between items in the stack.\n     * The gap can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default gap with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are '0', '100', '200', '300', '400', '450', '500', '600'.\n     */\n    gap: {\n      type: [String, Object],\n      default: '0',\n      validator: (gap) => gapValidator(gap),\n    },\n  },\n\n  data () {\n    return {\n      DT_STACK_DIRECTION,\n      DT_STACK_GAP,\n      DT_STACK_RESPONSIVE_BREAKPOINTS,\n    };\n  },\n\n  computed: {\n    defaultGap () {\n      return getDefaultGapClass(this.gap);\n    },\n\n    defaultDirection () {\n      return getDefaultDirectionClass(this.direction);\n    },\n\n    stackResponsive () {\n      return getResponsiveClasses(this.direction, this.gap);\n    },\n  },\n};\n</script>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_renderSlot"],"mappings":"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"}

package/dist/vue3/lib/tabs.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const tab = require("../chunks/tab-X7IvNGTl.js");
-const modal = require("../chunks/modal-OaWxzqNt.js");
+const tab = require("../chunks/tab-qc3f42Yp.js");
+const modal = require("../chunks/modal-VgxXAQFP.js");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
 require("./button.cjs");
@@ -86,7 +86,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-hidden": `${$options.hidePanel}`,
     class: vue.normalizeClass($props.tabPanelClass),
     "data-qa": "dt-tab-panel"
-  }, [vue.renderSlot(_ctx.$slots, "default")], 10, _hoisted_1)), [[vue.vShow, !$options.hidePanel]]);
+  }, [
+    vue.renderSlot(_ctx.$slots, "default")
+  ], 10, _hoisted_1)), [
+    [vue.vShow, !$options.hidePanel]
+  ]);
 }
 const tab_panel = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
 exports.DtTab = tab.DtTab;