@dialpad/dialtone 9.107.1 → 9.107.2

package/dist/vue3/components/scroller/modules/dynamic_scroller.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic_scroller.vue.js","sources":["../../../../components/scroller/modules/dynamic_scroller.vue"],"sourcesContent":["<template>\n  <core-scroller\n    ref=\"scroller\"\n    :items=\"itemsWithSize\"\n    :min-item-size=\"minItemSize\"\n    :direction=\"direction\"\n    :key-field=\"keyField\"\n    :list-tag=\"listTag\"\n    :item-tag=\"itemTag\"\n    v-bind=\"$attrs\"\n  >\n    <template\n      #default=\"{ item: itemWithSize, index, active }\"\n    >\n      <dt-scroller-item\n        :item=\"itemWithSize\"\n        :active=\"active\"\n        :size-dependencies=\"[\n          itemWithSize.message,\n        ]\"\n        :data-index=\"index\"\n      >\n        <slot\n          v-bind=\"{\n            item: itemWithSize.item,\n            index,\n            active,\n            itemWithSize,\n          }\"\n        />\n      </dt-scroller-item>\n    </template>\n  </core-scroller>\n</template>\n\n<!-- eslint-disable-next-line max-len -->\n<!-- This is a code from external library (https://github.com/Akryum/vue-virtual-scroller/blob/master/packages/vue-virtual-scroller/src/components/DynamicScroller.vue)\nWe have modified it for our own specific use. -->\n<script>\nimport CoreScroller from './core_scroller.vue';\nimport DtScrollerItem from './scroller_item.vue';\n\nexport default {\n  name: 'DynamicScroller',\n\n  components: {\n    CoreScroller,\n    DtScrollerItem,\n  },\n\n  provide () {\n    if (typeof ResizeObserver !== 'undefined') {\n      this.$_resizeObserver = new ResizeObserver(entries => {\n        requestAnimationFrame(() => {\n          if (!Array.isArray(entries)) {\n            return;\n          }\n          for (const entry of entries) {\n            if (entry.target && entry.target.$_vs_onResize) {\n              let width, height;\n              if (entry.borderBoxSize) {\n                const resizeObserverSize = entry.borderBoxSize[0];\n                width = resizeObserverSize.inlineSize;\n                height = resizeObserverSize.blockSize;\n              } else {\n                // @TODO remove when contentRect is deprecated\n                width = entry.contentRect.width;\n                height = entry.contentRect.height;\n              }\n              entry.target.$_vs_onResize(entry.target.$_vs_id, width, height);\n            }\n          }\n        });\n      });\n    }\n\n    return {\n      vscrollData: this.vscrollData,\n      vscrollParent: this,\n      vscrollResizeObserver: this.$_resizeObserver,\n    };\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /*\n      * The items to render.\n      * If the items are simple arrays, the index will be used as the key.\n      * If the items are objects, the keyField will be used as the key.\n     */\n    items: {\n      type: Array,\n      required: true,\n    },\n\n    /*\n      * Indicates if the items are dynamic.\n      * If true, the items will be wrapped in a DtScrollerItem component.\n      * This is required for dynamic items to be able to react to changes in their size.\n     */\n    dynamic: {\n      type: Boolean,\n      default: false,\n    },\n\n    /*\n      * The key field to use for the items.\n      * Only used if the items are objects.\n     */\n    keyField: {\n      type: String,\n      default: 'id',\n    },\n\n    /*\n      * The direction of the scroller.\n      * Can be either 'vertical' or 'horizontal'.\n     */\n    direction: {\n      type: String,\n      default: 'vertical',\n      validator: (value) => ['vertical', 'horizontal'].includes(value),\n    },\n\n    /*\n      * The tag to use for the list.\n     */\n    listTag: {\n      type: String,\n      default: 'div',\n    },\n\n    /*\n      * The tag to use for the items.\n     */\n    itemTag: {\n      type: String,\n      default: 'div',\n    },\n\n    /*\n      * Display height (or width in horizontal mode) of the items in pixels\n      * used to calculate the scroll size and position.\n      * Is required for the initial render of items in DYNAMIC size mode.\n     */\n    minItemSize: {\n      type: [Number, String],\n    },\n  },\n\n  data () {\n    return {\n      vscrollData: {\n        active: true,\n        sizes: {},\n        keyField: this.keyField,\n        simpleArray: false,\n      },\n    };\n  },\n\n  computed: {\n    simpleArray () {\n      return this.items.length && typeof this.items[0] !== 'object';\n    },\n\n    itemsWithSize () {\n      const result = [];\n      const { items, keyField, simpleArray } = this;\n      const sizes = this.vscrollData.sizes;\n      const l = items.length;\n      for (let i = 0; i < l; i++) {\n        const item = items[i];\n        const id = simpleArray ? i : item[keyField];\n        let size = sizes[id];\n        if (typeof size === 'undefined' && !this.$_undefinedMap[id]) {\n          size = 0;\n        }\n        result.push({\n          item,\n          [keyField]: id,\n          size,\n        });\n      }\n      return result;\n    },\n  },\n\n  watch: {\n    simpleArray: {\n      handler (value) {\n        this.vscrollData.simpleArray = value;\n      },\n\n      immediate: true,\n    },\n\n    itemsWithSize (next, prev) {\n      const scrollTop = this.$el.scrollTop;\n\n      // Calculate total diff between prev and next sizes\n      // over current scroll top. Then add it to scrollTop to\n      // avoid jumping the contents that the user is seeing.\n      let prevActiveTop = 0; let activeTop = 0;\n      const length = Math.min(next.length, prev.length);\n      for (let i = 0; i < length; i++) {\n        if (prevActiveTop >= scrollTop) {\n          break;\n        }\n        prevActiveTop += prev[i].size || this.minItemSize;\n        activeTop += next[i].size || this.minItemSize;\n      }\n      const offset = activeTop - prevActiveTop;\n\n      if (offset === 0) {\n        return;\n      }\n\n      this.$el.scrollTop += offset;\n    },\n  },\n\n  beforeCreate () {\n    this.$_updates = [];\n    this.$_undefinedSizes = 0;\n    this.$_undefinedMap = {};\n  },\n\n  activated () {\n    this.vscrollData.active = true;\n  },\n\n  deactivated () {\n    this.vscrollData.active = false;\n  },\n\n  methods: {\n    dynamicScrollerUpdateItems () {\n      const scroller = this.$refs.scroller;\n      if (scroller) scroller._updateVisibleItems(true);\n    },\n\n    dynamicScrollerUpdateItemsFromBottom () {\n      const scroller = this.$refs.scroller;\n      if (scroller) scroller._updateVisibleItems(false, true);\n    },\n\n    scrollToItem (index) {\n      const scroller = this.$refs.scroller;\n      if (scroller) scroller.scrollToItem(index);\n    },\n\n    scrollToBottom () {\n      if (this.$_scrollingToBottom) return;\n      this.$_scrollingToBottom = true;\n      const el = this.$el;\n      // Item is inserted to the DOM\n      this.$nextTick(() => {\n        el.scrollTop = el.scrollHeight + 5000;\n        // Item sizes are computed\n        const cb = () => {\n          el.scrollTop = el.scrollHeight + 5000;\n          requestAnimationFrame(() => {\n            el.scrollTop = el.scrollHeight + 5000;\n            if (this.$_undefinedSizes === 0) {\n              this.$_scrollingToBottom = false;\n            } else {\n              requestAnimationFrame(cb);\n            }\n          });\n        };\n        requestAnimationFrame(cb);\n      });\n    },\n  },\n};\n</script>\n"],"names":["CoreScroller","DtScrollerItem","_openBlock","_createBlock","_mergeProps","_createVNode","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps"],"mappings":"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"}
+{"version":3,"file":"dynamic_scroller.vue.js","sources":["../../../../components/scroller/modules/dynamic_scroller.vue"],"sourcesContent":["<template>\n  <core-scroller\n    ref=\"scroller\"\n    :items=\"itemsWithSize\"\n    :min-item-size=\"minItemSize\"\n    :direction=\"direction\"\n    :key-field=\"keyField\"\n    :list-tag=\"listTag\"\n    :item-tag=\"itemTag\"\n    v-bind=\"$attrs\"\n  >\n    <template\n      #default=\"{ item: itemWithSize, index, active }\"\n    >\n      <dt-scroller-item\n        :item=\"itemWithSize\"\n        :active=\"active\"\n        :size-dependencies=\"[\n          itemWithSize.message,\n        ]\"\n        :data-index=\"index\"\n      >\n        <slot\n          v-bind=\"{\n            item: itemWithSize.item,\n            index,\n            active,\n            itemWithSize,\n          }\"\n        />\n      </dt-scroller-item>\n    </template>\n  </core-scroller>\n</template>\n\n<!-- eslint-disable-next-line max-len -->\n<!-- This is a code from external library (https://github.com/Akryum/vue-virtual-scroller/blob/master/packages/vue-virtual-scroller/src/components/DynamicScroller.vue)\nWe have modified it for our own specific use. -->\n<script>\nimport CoreScroller from './core_scroller.vue';\nimport DtScrollerItem from './scroller_item.vue';\nimport { returnFirstEl } from '@/common/utils';\n\nexport default {\n  name: 'DynamicScroller',\n\n  components: {\n    CoreScroller,\n    DtScrollerItem,\n  },\n\n  provide () {\n    if (typeof ResizeObserver !== 'undefined') {\n      this.$_resizeObserver = new ResizeObserver(entries => {\n        requestAnimationFrame(() => {\n          if (!Array.isArray(entries)) {\n            return;\n          }\n          for (const entry of entries) {\n            if (entry.target && entry.target.$_vs_onResize) {\n              let width, height;\n              if (entry.borderBoxSize) {\n                const resizeObserverSize = entry.borderBoxSize[0];\n                width = resizeObserverSize.inlineSize;\n                height = resizeObserverSize.blockSize;\n              } else {\n                // @TODO remove when contentRect is deprecated\n                width = entry.contentRect.width;\n                height = entry.contentRect.height;\n              }\n              entry.target.$_vs_onResize(entry.target.$_vs_id, width, height);\n            }\n          }\n        });\n      });\n    }\n\n    return {\n      vscrollData: this.vscrollData,\n      vscrollParent: this,\n      vscrollResizeObserver: this.$_resizeObserver,\n    };\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /*\n      * The items to render.\n      * If the items are simple arrays, the index will be used as the key.\n      * If the items are objects, the keyField will be used as the key.\n     */\n    items: {\n      type: Array,\n      required: true,\n    },\n\n    /*\n      * Indicates if the items are dynamic.\n      * If true, the items will be wrapped in a DtScrollerItem component.\n      * This is required for dynamic items to be able to react to changes in their size.\n     */\n    dynamic: {\n      type: Boolean,\n      default: false,\n    },\n\n    /*\n      * The key field to use for the items.\n      * Only used if the items are objects.\n     */\n    keyField: {\n      type: String,\n      default: 'id',\n    },\n\n    /*\n      * The direction of the scroller.\n      * Can be either 'vertical' or 'horizontal'.\n     */\n    direction: {\n      type: String,\n      default: 'vertical',\n      validator: (value) => ['vertical', 'horizontal'].includes(value),\n    },\n\n    /*\n      * The tag to use for the list.\n     */\n    listTag: {\n      type: String,\n      default: 'div',\n    },\n\n    /*\n      * The tag to use for the items.\n     */\n    itemTag: {\n      type: String,\n      default: 'div',\n    },\n\n    /*\n      * Display height (or width in horizontal mode) of the items in pixels\n      * used to calculate the scroll size and position.\n      * Is required for the initial render of items in DYNAMIC size mode.\n     */\n    minItemSize: {\n      type: [Number, String],\n    },\n  },\n\n  data () {\n    return {\n      vscrollData: {\n        active: true,\n        sizes: {},\n        keyField: this.keyField,\n        simpleArray: false,\n      },\n    };\n  },\n\n  computed: {\n    simpleArray () {\n      return this.items.length && typeof this.items[0] !== 'object';\n    },\n\n    itemsWithSize () {\n      const result = [];\n      const { items, keyField, simpleArray } = this;\n      const sizes = this.vscrollData.sizes;\n      const l = items.length;\n      for (let i = 0; i < l; i++) {\n        const item = items[i];\n        const id = simpleArray ? i : item[keyField];\n        let size = sizes[id];\n        if (typeof size === 'undefined' && !this.$_undefinedMap[id]) {\n          size = 0;\n        }\n        result.push({\n          item,\n          [keyField]: id,\n          size,\n        });\n      }\n      return result;\n    },\n  },\n\n  watch: {\n    simpleArray: {\n      handler (value) {\n        this.vscrollData.simpleArray = value;\n      },\n\n      immediate: true,\n    },\n\n    itemsWithSize (next, prev) {\n      const scrollTop = returnFirstEl(this.$el).scrollTop;\n\n      // Calculate total diff between prev and next sizes\n      // over current scroll top. Then add it to scrollTop to\n      // avoid jumping the contents that the user is seeing.\n      let prevActiveTop = 0; let activeTop = 0;\n      const length = Math.min(next.length, prev.length);\n      for (let i = 0; i < length; i++) {\n        if (prevActiveTop >= scrollTop) {\n          break;\n        }\n        prevActiveTop += prev[i].size || this.minItemSize;\n        activeTop += next[i].size || this.minItemSize;\n      }\n      const offset = activeTop - prevActiveTop;\n\n      if (offset === 0) {\n        return;\n      }\n\n      returnFirstEl(this.$el).scrollTop += offset;\n    },\n  },\n\n  beforeCreate () {\n    this.$_updates = [];\n    this.$_undefinedSizes = 0;\n    this.$_undefinedMap = {};\n  },\n\n  activated () {\n    this.vscrollData.active = true;\n  },\n\n  deactivated () {\n    this.vscrollData.active = false;\n  },\n\n  methods: {\n    dynamicScrollerUpdateItems () {\n      const scroller = this.$refs.scroller;\n      if (scroller) scroller._updateVisibleItems(true);\n    },\n\n    dynamicScrollerUpdateItemsFromBottom () {\n      const scroller = this.$refs.scroller;\n      if (scroller) scroller._updateVisibleItems(false, true);\n    },\n\n    scrollToItem (index) {\n      const scroller = this.$refs.scroller;\n      if (scroller) scroller.scrollToItem(index);\n    },\n\n    scrollToBottom () {\n      if (this.$_scrollingToBottom) return;\n      this.$_scrollingToBottom = true;\n      const el = returnFirstEl(this.$el);\n      // Item is inserted to the DOM\n      this.$nextTick(() => {\n        el.scrollTop = el.scrollHeight + 5000;\n        // Item sizes are computed\n        const cb = () => {\n          el.scrollTop = el.scrollHeight + 5000;\n          requestAnimationFrame(() => {\n            el.scrollTop = el.scrollHeight + 5000;\n            if (this.$_undefinedSizes === 0) {\n              this.$_scrollingToBottom = false;\n            } else {\n              requestAnimationFrame(cb);\n            }\n          });\n        };\n        requestAnimationFrame(cb);\n      });\n    },\n  },\n};\n</script>\n"],"names":["CoreScroller","DtScrollerItem","_openBlock","_createBlock","_mergeProps","_createVNode","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps"],"mappings":"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"}

package/dist/vue3/components/scroller/modules/scroller_item.vue.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
+const common_utils = require("../../../common/utils.cjs");
 const _sfc_main = {
   name: "DtScrollerItem",
   inject: [
@@ -53,7 +54,7 @@ const _sfc_main = {
   watch: {
     watchData: "updateWatchData",
     id(value, oldValue) {
-      this.$el.$_vs_id = this.id;
+      common_utils.returnFirstEl(this.$el).$_vs_id = this.id;
       if (!this.size) {
         this.onDataUpdate();
       }
@@ -148,8 +149,8 @@ const _sfc_main = {
     computeSize(id) {
       this.$nextTick(() => {
         if (this.id === id) {
-          const width = this.$el.offsetWidth;
-          const height = this.$el.offsetHeight;
+          const width = common_utils.returnFirstEl(this.$el).offsetWidth;
+          const height = common_utils.returnFirstEl(this.$el).offsetHeight;
           this.applyWidthHeight(width, height);
         }
         this.$_pendingSizeUpdate = null;
@@ -171,7 +172,7 @@ const _sfc_main = {
     observeSize() {
       if (!this.vscrollResizeObserver) return;
       if (this.$_sizeObserved) return;
-      this.vscrollResizeObserver.observe(this.$el);
+      this.vscrollResizeObserver.observe(common_utils.returnFirstEl(this.$el));
       this.$el.$_vs_id = this.id;
       this.$el.$_vs_onResize = this.onResize;
       this.$_sizeObserved = true;
@@ -179,7 +180,7 @@ const _sfc_main = {
     unobserveSize() {
       if (!this.vscrollResizeObserver) return;
       if (!this.$_sizeObserved) return;
-      this.vscrollResizeObserver.unobserve(this.$el);
+      this.vscrollResizeObserver.unobserve(common_utils.returnFirstEl(this.$el));
       this.$el.$_vs_onResize = void 0;
       this.$_sizeObserved = false;
     },

package/dist/vue3/components/scroller/modules/scroller_item.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"scroller_item.vue.cjs","sources":["../../../../components/scroller/modules/scroller_item.vue"],"sourcesContent":["<script>\n/*\nThis is a code from external library (https://github.com/Akryum/vue-virtual-scroller/blob/master/packages/vue-virtual-scroller/src/components/DynamicScrollerItem.vue)\nWe have modified it for our own specific use.\n*/\nimport { h } from 'vue';\n\nexport default {\n  name: 'DtScrollerItem',\n\n  inject: [\n    'vscrollData',\n    'vscrollParent',\n    'vscrollResizeObserver',\n  ],\n\n  props: {\n    // eslint-disable-next-line vue/require-prop-types\n    item: {\n      required: true,\n    },\n\n    watchData: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Indicates if the view is actively used to display an item.\n     */\n    active: {\n      type: Boolean,\n      required: true,\n    },\n\n    index: {\n      type: Number,\n      default: undefined,\n    },\n\n    sizeDependencies: {\n      type: [Array, Object],\n      default: null,\n    },\n\n    tag: {\n      type: String,\n      default: 'div',\n    },\n  },\n\n  computed: {\n    id () {\n      if (this.vscrollData.simpleArray) return this.index;\n      // eslint-disable-next-line no-prototype-builtins\n      if (this.vscrollData.keyField in this.item) return this.item[this.vscrollData.keyField];\n      throw new Error(`keyField '${this.vscrollData.keyField}' not found in your item. You should set a valid keyField prop on your Scroller`);\n    },\n\n    size () {\n      return this.vscrollData.sizes[this.id] || 0;\n    },\n\n    finalActive () {\n      return this.active && this.vscrollData.active;\n    },\n  },\n\n  watch: {\n    watchData: 'updateWatchData',\n\n    id (value, oldValue) {\n      this.$el.$_vs_id = this.id;\n      if (!this.size) {\n        this.onDataUpdate();\n      }\n\n      if (this.$_sizeObserved) {\n        // In case the old item had the same size, it won't trigger the ResizeObserver\n        // since we are reusing the same DOM node\n        const oldSize = this.vscrollData.sizes[oldValue];\n        const size = this.vscrollData.sizes[value];\n        if (oldSize != null && oldSize !== size) {\n          this.applySize(oldSize);\n        }\n      }\n    },\n\n    finalActive (value) {\n      if (!this.size) {\n        if (value) {\n          if (!this.vscrollParent.$_undefinedMap[this.id]) {\n            this.vscrollParent.$_undefinedSizes++;\n            this.vscrollParent.$_undefinedMap[this.id] = true;\n          }\n        } else {\n          if (this.vscrollParent.$_undefinedMap[this.id]) {\n            this.vscrollParent.$_undefinedSizes--;\n            this.vscrollParent.$_undefinedMap[this.id] = false;\n          }\n        }\n      }\n\n      if (this.vscrollResizeObserver) {\n        if (value) {\n          this.observeSize();\n        } else {\n          this.unobserveSize();\n        }\n      } else if (value && this.$_pendingVScrollUpdate === this.id) {\n        this.updateSize();\n      }\n    },\n  },\n\n  created () {\n    if (this.$isServer) return;\n\n    this.$_forceNextVScrollUpdate = null;\n    this.updateWatchData();\n\n    if (!this.vscrollResizeObserver) {\n      for (const k in this.sizeDependencies) {\n        this.$watch(() => this.sizeDependencies[k], this.onDataUpdate);\n      }\n    }\n  },\n\n  mounted () {\n    if (this.finalActive) {\n      this.updateSize();\n      this.observeSize();\n    }\n  },\n\n  beforeUnmount () {\n    this.unobserveSize();\n  },\n\n  methods: {\n    updateSize () {\n      if (this.finalActive) {\n        if (this.$_pendingSizeUpdate !== this.id) {\n          this.$_pendingSizeUpdate = this.id;\n          this.$_forceNextVScrollUpdate = null;\n          this.$_pendingVScrollUpdate = null;\n          this.computeSize(this.id);\n        }\n      } else {\n        this.$_forceNextVScrollUpdate = this.id;\n      }\n    },\n\n    updateWatchData () {\n      if (this.watchData && !this.vscrollResizeObserver) {\n        this.$_watchData = this.$watch('item', () => {\n          this.onDataUpdate();\n        }, {\n          deep: true,\n        });\n      } else if (this.$_watchData) {\n        this.$_watchData();\n        this.$_watchData = null;\n      }\n    },\n\n    onVscrollUpdate ({ force }) {\n      // If not active, sechedule a size update when it becomes active\n      if (!this.finalActive && force) {\n        this.$_pendingVScrollUpdate = this.id;\n      }\n\n      if (this.$_forceNextVScrollUpdate === this.id || force || !this.size) {\n        this.updateSize();\n      }\n    },\n\n    onDataUpdate () {\n      this.updateSize();\n    },\n\n    computeSize (id) {\n      this.$nextTick(() => {\n        if (this.id === id) {\n          const width = this.$el.offsetWidth;\n          const height = this.$el.offsetHeight;\n          this.applyWidthHeight(width, height);\n        }\n        this.$_pendingSizeUpdate = null;\n      });\n    },\n\n    applyWidthHeight (width, height) {\n      const size = ~~(this.vscrollParent.direction === 'vertical' ? height : width);\n      if (size && this.size !== size) {\n        this.applySize(size);\n      }\n    },\n\n    applySize (size) {\n      if (this.vscrollParent.$_undefinedMap[this.id]) {\n        this.vscrollParent.$_undefinedSizes--;\n        this.vscrollParent.$_undefinedMap[this.id] = undefined;\n      }\n      this.vscrollData.sizes[this.id] = size;\n    },\n\n    observeSize () {\n      if (!this.vscrollResizeObserver) return;\n      if (this.$_sizeObserved) return;\n      this.vscrollResizeObserver.observe(this.$el);\n      this.$el.$_vs_id = this.id;\n      this.$el.$_vs_onResize = this.onResize;\n      this.$_sizeObserved = true;\n    },\n\n    unobserveSize () {\n      if (!this.vscrollResizeObserver) return;\n      if (!this.$_sizeObserved) return;\n      this.vscrollResizeObserver.unobserve(this.$el);\n      this.$el.$_vs_onResize = undefined;\n      this.$_sizeObserved = false;\n    },\n\n    onResize (id, width, height) {\n      if (this.id === id) {\n        this.applyWidthHeight(width, height);\n      }\n    },\n  },\n\n  render () {\n    return h(this.tag, this.$slots.default());\n  },\n};\n</script>\n"],"names":["h"],"mappings":"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"}
+{"version":3,"file":"scroller_item.vue.cjs","sources":["../../../../components/scroller/modules/scroller_item.vue"],"sourcesContent":["<script>\n/*\nThis is a code from external library (https://github.com/Akryum/vue-virtual-scroller/blob/master/packages/vue-virtual-scroller/src/components/DynamicScrollerItem.vue)\nWe have modified it for our own specific use.\n*/\nimport { h } from 'vue';\nimport { returnFirstEl } from '@/common/utils';\n\nexport default {\n  name: 'DtScrollerItem',\n\n  inject: [\n    'vscrollData',\n    'vscrollParent',\n    'vscrollResizeObserver',\n  ],\n\n  props: {\n    // eslint-disable-next-line vue/require-prop-types\n    item: {\n      required: true,\n    },\n\n    watchData: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Indicates if the view is actively used to display an item.\n     */\n    active: {\n      type: Boolean,\n      required: true,\n    },\n\n    index: {\n      type: Number,\n      default: undefined,\n    },\n\n    sizeDependencies: {\n      type: [Array, Object],\n      default: null,\n    },\n\n    tag: {\n      type: String,\n      default: 'div',\n    },\n  },\n\n  computed: {\n    id () {\n      if (this.vscrollData.simpleArray) return this.index;\n      // eslint-disable-next-line no-prototype-builtins\n      if (this.vscrollData.keyField in this.item) return this.item[this.vscrollData.keyField];\n      throw new Error(`keyField '${this.vscrollData.keyField}' not found in your item. You should set a valid keyField prop on your Scroller`);\n    },\n\n    size () {\n      return this.vscrollData.sizes[this.id] || 0;\n    },\n\n    finalActive () {\n      return this.active && this.vscrollData.active;\n    },\n  },\n\n  watch: {\n    watchData: 'updateWatchData',\n\n    id (value, oldValue) {\n      returnFirstEl(this.$el).$_vs_id = this.id;\n      if (!this.size) {\n        this.onDataUpdate();\n      }\n\n      if (this.$_sizeObserved) {\n        // In case the old item had the same size, it won't trigger the ResizeObserver\n        // since we are reusing the same DOM node\n        const oldSize = this.vscrollData.sizes[oldValue];\n        const size = this.vscrollData.sizes[value];\n        if (oldSize != null && oldSize !== size) {\n          this.applySize(oldSize);\n        }\n      }\n    },\n\n    finalActive (value) {\n      if (!this.size) {\n        if (value) {\n          if (!this.vscrollParent.$_undefinedMap[this.id]) {\n            this.vscrollParent.$_undefinedSizes++;\n            this.vscrollParent.$_undefinedMap[this.id] = true;\n          }\n        } else {\n          if (this.vscrollParent.$_undefinedMap[this.id]) {\n            this.vscrollParent.$_undefinedSizes--;\n            this.vscrollParent.$_undefinedMap[this.id] = false;\n          }\n        }\n      }\n\n      if (this.vscrollResizeObserver) {\n        if (value) {\n          this.observeSize();\n        } else {\n          this.unobserveSize();\n        }\n      } else if (value && this.$_pendingVScrollUpdate === this.id) {\n        this.updateSize();\n      }\n    },\n  },\n\n  created () {\n    if (this.$isServer) return;\n\n    this.$_forceNextVScrollUpdate = null;\n    this.updateWatchData();\n\n    if (!this.vscrollResizeObserver) {\n      for (const k in this.sizeDependencies) {\n        this.$watch(() => this.sizeDependencies[k], this.onDataUpdate);\n      }\n    }\n  },\n\n  mounted () {\n    if (this.finalActive) {\n      this.updateSize();\n      this.observeSize();\n    }\n  },\n\n  beforeUnmount () {\n    this.unobserveSize();\n  },\n\n  methods: {\n    updateSize () {\n      if (this.finalActive) {\n        if (this.$_pendingSizeUpdate !== this.id) {\n          this.$_pendingSizeUpdate = this.id;\n          this.$_forceNextVScrollUpdate = null;\n          this.$_pendingVScrollUpdate = null;\n          this.computeSize(this.id);\n        }\n      } else {\n        this.$_forceNextVScrollUpdate = this.id;\n      }\n    },\n\n    updateWatchData () {\n      if (this.watchData && !this.vscrollResizeObserver) {\n        this.$_watchData = this.$watch('item', () => {\n          this.onDataUpdate();\n        }, {\n          deep: true,\n        });\n      } else if (this.$_watchData) {\n        this.$_watchData();\n        this.$_watchData = null;\n      }\n    },\n\n    onVscrollUpdate ({ force }) {\n      // If not active, sechedule a size update when it becomes active\n      if (!this.finalActive && force) {\n        this.$_pendingVScrollUpdate = this.id;\n      }\n\n      if (this.$_forceNextVScrollUpdate === this.id || force || !this.size) {\n        this.updateSize();\n      }\n    },\n\n    onDataUpdate () {\n      this.updateSize();\n    },\n\n    computeSize (id) {\n      this.$nextTick(() => {\n        if (this.id === id) {\n          const width = returnFirstEl(this.$el).offsetWidth;\n          const height = returnFirstEl(this.$el).offsetHeight;\n          this.applyWidthHeight(width, height);\n        }\n        this.$_pendingSizeUpdate = null;\n      });\n    },\n\n    applyWidthHeight (width, height) {\n      const size = ~~(this.vscrollParent.direction === 'vertical' ? height : width);\n      if (size && this.size !== size) {\n        this.applySize(size);\n      }\n    },\n\n    applySize (size) {\n      if (this.vscrollParent.$_undefinedMap[this.id]) {\n        this.vscrollParent.$_undefinedSizes--;\n        this.vscrollParent.$_undefinedMap[this.id] = undefined;\n      }\n      this.vscrollData.sizes[this.id] = size;\n    },\n\n    observeSize () {\n      if (!this.vscrollResizeObserver) return;\n      if (this.$_sizeObserved) return;\n      this.vscrollResizeObserver.observe(returnFirstEl(this.$el));\n      this.$el.$_vs_id = this.id;\n      this.$el.$_vs_onResize = this.onResize;\n      this.$_sizeObserved = true;\n    },\n\n    unobserveSize () {\n      if (!this.vscrollResizeObserver) return;\n      if (!this.$_sizeObserved) return;\n      this.vscrollResizeObserver.unobserve(returnFirstEl(this.$el));\n      this.$el.$_vs_onResize = undefined;\n      this.$_sizeObserved = false;\n    },\n\n    onResize (id, width, height) {\n      if (this.id === id) {\n        this.applyWidthHeight(width, height);\n      }\n    },\n  },\n\n  render () {\n    return h(this.tag, this.$slots.default());\n  },\n};\n</script>\n"],"names":["returnFirstEl","h"],"mappings":"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"}

package/dist/vue3/components/scroller/modules/scroller_item.vue.js

@@ -1,4 +1,5 @@
 import { h } from "vue";
+import { returnFirstEl } from "../../../common/utils.js";
 const _sfc_main = {
   name: "DtScrollerItem",
   inject: [
@@ -51,7 +52,7 @@ const _sfc_main = {
   watch: {
     watchData: "updateWatchData",
     id(value, oldValue) {
-      this.$el.$_vs_id = this.id;
+      returnFirstEl(this.$el).$_vs_id = this.id;
       if (!this.size) {
         this.onDataUpdate();
       }
@@ -146,8 +147,8 @@ const _sfc_main = {
     computeSize(id) {
       this.$nextTick(() => {
         if (this.id === id) {
-          const width = this.$el.offsetWidth;
-          const height = this.$el.offsetHeight;
+          const width = returnFirstEl(this.$el).offsetWidth;
+          const height = returnFirstEl(this.$el).offsetHeight;
           this.applyWidthHeight(width, height);
         }
         this.$_pendingSizeUpdate = null;
@@ -169,7 +170,7 @@ const _sfc_main = {
     observeSize() {
       if (!this.vscrollResizeObserver) return;
       if (this.$_sizeObserved) return;
-      this.vscrollResizeObserver.observe(this.$el);
+      this.vscrollResizeObserver.observe(returnFirstEl(this.$el));
       this.$el.$_vs_id = this.id;
       this.$el.$_vs_onResize = this.onResize;
       this.$_sizeObserved = true;
@@ -177,7 +178,7 @@ const _sfc_main = {
     unobserveSize() {
       if (!this.vscrollResizeObserver) return;
       if (!this.$_sizeObserved) return;
-      this.vscrollResizeObserver.unobserve(this.$el);
+      this.vscrollResizeObserver.unobserve(returnFirstEl(this.$el));
       this.$el.$_vs_onResize = void 0;
       this.$_sizeObserved = false;
     },

package/dist/vue3/components/scroller/modules/scroller_item.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroller_item.vue.js","sources":["../../../../components/scroller/modules/scroller_item.vue"],"sourcesContent":["<script>\n/*\nThis is a code from external library (https://github.com/Akryum/vue-virtual-scroller/blob/master/packages/vue-virtual-scroller/src/components/DynamicScrollerItem.vue)\nWe have modified it for our own specific use.\n*/\nimport { h } from 'vue';\n\nexport default {\n  name: 'DtScrollerItem',\n\n  inject: [\n    'vscrollData',\n    'vscrollParent',\n    'vscrollResizeObserver',\n  ],\n\n  props: {\n    // eslint-disable-next-line vue/require-prop-types\n    item: {\n      required: true,\n    },\n\n    watchData: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Indicates if the view is actively used to display an item.\n     */\n    active: {\n      type: Boolean,\n      required: true,\n    },\n\n    index: {\n      type: Number,\n      default: undefined,\n    },\n\n    sizeDependencies: {\n      type: [Array, Object],\n      default: null,\n    },\n\n    tag: {\n      type: String,\n      default: 'div',\n    },\n  },\n\n  computed: {\n    id () {\n      if (this.vscrollData.simpleArray) return this.index;\n      // eslint-disable-next-line no-prototype-builtins\n      if (this.vscrollData.keyField in this.item) return this.item[this.vscrollData.keyField];\n      throw new Error(`keyField '${this.vscrollData.keyField}' not found in your item. You should set a valid keyField prop on your Scroller`);\n    },\n\n    size () {\n      return this.vscrollData.sizes[this.id] || 0;\n    },\n\n    finalActive () {\n      return this.active && this.vscrollData.active;\n    },\n  },\n\n  watch: {\n    watchData: 'updateWatchData',\n\n    id (value, oldValue) {\n      this.$el.$_vs_id = this.id;\n      if (!this.size) {\n        this.onDataUpdate();\n      }\n\n      if (this.$_sizeObserved) {\n        // In case the old item had the same size, it won't trigger the ResizeObserver\n        // since we are reusing the same DOM node\n        const oldSize = this.vscrollData.sizes[oldValue];\n        const size = this.vscrollData.sizes[value];\n        if (oldSize != null && oldSize !== size) {\n          this.applySize(oldSize);\n        }\n      }\n    },\n\n    finalActive (value) {\n      if (!this.size) {\n        if (value) {\n          if (!this.vscrollParent.$_undefinedMap[this.id]) {\n            this.vscrollParent.$_undefinedSizes++;\n            this.vscrollParent.$_undefinedMap[this.id] = true;\n          }\n        } else {\n          if (this.vscrollParent.$_undefinedMap[this.id]) {\n            this.vscrollParent.$_undefinedSizes--;\n            this.vscrollParent.$_undefinedMap[this.id] = false;\n          }\n        }\n      }\n\n      if (this.vscrollResizeObserver) {\n        if (value) {\n          this.observeSize();\n        } else {\n          this.unobserveSize();\n        }\n      } else if (value && this.$_pendingVScrollUpdate === this.id) {\n        this.updateSize();\n      }\n    },\n  },\n\n  created () {\n    if (this.$isServer) return;\n\n    this.$_forceNextVScrollUpdate = null;\n    this.updateWatchData();\n\n    if (!this.vscrollResizeObserver) {\n      for (const k in this.sizeDependencies) {\n        this.$watch(() => this.sizeDependencies[k], this.onDataUpdate);\n      }\n    }\n  },\n\n  mounted () {\n    if (this.finalActive) {\n      this.updateSize();\n      this.observeSize();\n    }\n  },\n\n  beforeUnmount () {\n    this.unobserveSize();\n  },\n\n  methods: {\n    updateSize () {\n      if (this.finalActive) {\n        if (this.$_pendingSizeUpdate !== this.id) {\n          this.$_pendingSizeUpdate = this.id;\n          this.$_forceNextVScrollUpdate = null;\n          this.$_pendingVScrollUpdate = null;\n          this.computeSize(this.id);\n        }\n      } else {\n        this.$_forceNextVScrollUpdate = this.id;\n      }\n    },\n\n    updateWatchData () {\n      if (this.watchData && !this.vscrollResizeObserver) {\n        this.$_watchData = this.$watch('item', () => {\n          this.onDataUpdate();\n        }, {\n          deep: true,\n        });\n      } else if (this.$_watchData) {\n        this.$_watchData();\n        this.$_watchData = null;\n      }\n    },\n\n    onVscrollUpdate ({ force }) {\n      // If not active, sechedule a size update when it becomes active\n      if (!this.finalActive && force) {\n        this.$_pendingVScrollUpdate = this.id;\n      }\n\n      if (this.$_forceNextVScrollUpdate === this.id || force || !this.size) {\n        this.updateSize();\n      }\n    },\n\n    onDataUpdate () {\n      this.updateSize();\n    },\n\n    computeSize (id) {\n      this.$nextTick(() => {\n        if (this.id === id) {\n          const width = this.$el.offsetWidth;\n          const height = this.$el.offsetHeight;\n          this.applyWidthHeight(width, height);\n        }\n        this.$_pendingSizeUpdate = null;\n      });\n    },\n\n    applyWidthHeight (width, height) {\n      const size = ~~(this.vscrollParent.direction === 'vertical' ? height : width);\n      if (size && this.size !== size) {\n        this.applySize(size);\n      }\n    },\n\n    applySize (size) {\n      if (this.vscrollParent.$_undefinedMap[this.id]) {\n        this.vscrollParent.$_undefinedSizes--;\n        this.vscrollParent.$_undefinedMap[this.id] = undefined;\n      }\n      this.vscrollData.sizes[this.id] = size;\n    },\n\n    observeSize () {\n      if (!this.vscrollResizeObserver) return;\n      if (this.$_sizeObserved) return;\n      this.vscrollResizeObserver.observe(this.$el);\n      this.$el.$_vs_id = this.id;\n      this.$el.$_vs_onResize = this.onResize;\n      this.$_sizeObserved = true;\n    },\n\n    unobserveSize () {\n      if (!this.vscrollResizeObserver) return;\n      if (!this.$_sizeObserved) return;\n      this.vscrollResizeObserver.unobserve(this.$el);\n      this.$el.$_vs_onResize = undefined;\n      this.$_sizeObserved = false;\n    },\n\n    onResize (id, width, height) {\n      if (this.id === id) {\n        this.applyWidthHeight(width, height);\n      }\n    },\n  },\n\n  render () {\n    return h(this.tag, this.$slots.default());\n  },\n};\n</script>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"scroller_item.vue.js","sources":["../../../../components/scroller/modules/scroller_item.vue"],"sourcesContent":["<script>\n/*\nThis is a code from external library (https://github.com/Akryum/vue-virtual-scroller/blob/master/packages/vue-virtual-scroller/src/components/DynamicScrollerItem.vue)\nWe have modified it for our own specific use.\n*/\nimport { h } from 'vue';\nimport { returnFirstEl } from '@/common/utils';\n\nexport default {\n  name: 'DtScrollerItem',\n\n  inject: [\n    'vscrollData',\n    'vscrollParent',\n    'vscrollResizeObserver',\n  ],\n\n  props: {\n    // eslint-disable-next-line vue/require-prop-types\n    item: {\n      required: true,\n    },\n\n    watchData: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Indicates if the view is actively used to display an item.\n     */\n    active: {\n      type: Boolean,\n      required: true,\n    },\n\n    index: {\n      type: Number,\n      default: undefined,\n    },\n\n    sizeDependencies: {\n      type: [Array, Object],\n      default: null,\n    },\n\n    tag: {\n      type: String,\n      default: 'div',\n    },\n  },\n\n  computed: {\n    id () {\n      if (this.vscrollData.simpleArray) return this.index;\n      // eslint-disable-next-line no-prototype-builtins\n      if (this.vscrollData.keyField in this.item) return this.item[this.vscrollData.keyField];\n      throw new Error(`keyField '${this.vscrollData.keyField}' not found in your item. You should set a valid keyField prop on your Scroller`);\n    },\n\n    size () {\n      return this.vscrollData.sizes[this.id] || 0;\n    },\n\n    finalActive () {\n      return this.active && this.vscrollData.active;\n    },\n  },\n\n  watch: {\n    watchData: 'updateWatchData',\n\n    id (value, oldValue) {\n      returnFirstEl(this.$el).$_vs_id = this.id;\n      if (!this.size) {\n        this.onDataUpdate();\n      }\n\n      if (this.$_sizeObserved) {\n        // In case the old item had the same size, it won't trigger the ResizeObserver\n        // since we are reusing the same DOM node\n        const oldSize = this.vscrollData.sizes[oldValue];\n        const size = this.vscrollData.sizes[value];\n        if (oldSize != null && oldSize !== size) {\n          this.applySize(oldSize);\n        }\n      }\n    },\n\n    finalActive (value) {\n      if (!this.size) {\n        if (value) {\n          if (!this.vscrollParent.$_undefinedMap[this.id]) {\n            this.vscrollParent.$_undefinedSizes++;\n            this.vscrollParent.$_undefinedMap[this.id] = true;\n          }\n        } else {\n          if (this.vscrollParent.$_undefinedMap[this.id]) {\n            this.vscrollParent.$_undefinedSizes--;\n            this.vscrollParent.$_undefinedMap[this.id] = false;\n          }\n        }\n      }\n\n      if (this.vscrollResizeObserver) {\n        if (value) {\n          this.observeSize();\n        } else {\n          this.unobserveSize();\n        }\n      } else if (value && this.$_pendingVScrollUpdate === this.id) {\n        this.updateSize();\n      }\n    },\n  },\n\n  created () {\n    if (this.$isServer) return;\n\n    this.$_forceNextVScrollUpdate = null;\n    this.updateWatchData();\n\n    if (!this.vscrollResizeObserver) {\n      for (const k in this.sizeDependencies) {\n        this.$watch(() => this.sizeDependencies[k], this.onDataUpdate);\n      }\n    }\n  },\n\n  mounted () {\n    if (this.finalActive) {\n      this.updateSize();\n      this.observeSize();\n    }\n  },\n\n  beforeUnmount () {\n    this.unobserveSize();\n  },\n\n  methods: {\n    updateSize () {\n      if (this.finalActive) {\n        if (this.$_pendingSizeUpdate !== this.id) {\n          this.$_pendingSizeUpdate = this.id;\n          this.$_forceNextVScrollUpdate = null;\n          this.$_pendingVScrollUpdate = null;\n          this.computeSize(this.id);\n        }\n      } else {\n        this.$_forceNextVScrollUpdate = this.id;\n      }\n    },\n\n    updateWatchData () {\n      if (this.watchData && !this.vscrollResizeObserver) {\n        this.$_watchData = this.$watch('item', () => {\n          this.onDataUpdate();\n        }, {\n          deep: true,\n        });\n      } else if (this.$_watchData) {\n        this.$_watchData();\n        this.$_watchData = null;\n      }\n    },\n\n    onVscrollUpdate ({ force }) {\n      // If not active, sechedule a size update when it becomes active\n      if (!this.finalActive && force) {\n        this.$_pendingVScrollUpdate = this.id;\n      }\n\n      if (this.$_forceNextVScrollUpdate === this.id || force || !this.size) {\n        this.updateSize();\n      }\n    },\n\n    onDataUpdate () {\n      this.updateSize();\n    },\n\n    computeSize (id) {\n      this.$nextTick(() => {\n        if (this.id === id) {\n          const width = returnFirstEl(this.$el).offsetWidth;\n          const height = returnFirstEl(this.$el).offsetHeight;\n          this.applyWidthHeight(width, height);\n        }\n        this.$_pendingSizeUpdate = null;\n      });\n    },\n\n    applyWidthHeight (width, height) {\n      const size = ~~(this.vscrollParent.direction === 'vertical' ? height : width);\n      if (size && this.size !== size) {\n        this.applySize(size);\n      }\n    },\n\n    applySize (size) {\n      if (this.vscrollParent.$_undefinedMap[this.id]) {\n        this.vscrollParent.$_undefinedSizes--;\n        this.vscrollParent.$_undefinedMap[this.id] = undefined;\n      }\n      this.vscrollData.sizes[this.id] = size;\n    },\n\n    observeSize () {\n      if (!this.vscrollResizeObserver) return;\n      if (this.$_sizeObserved) return;\n      this.vscrollResizeObserver.observe(returnFirstEl(this.$el));\n      this.$el.$_vs_id = this.id;\n      this.$el.$_vs_onResize = this.onResize;\n      this.$_sizeObserved = true;\n    },\n\n    unobserveSize () {\n      if (!this.vscrollResizeObserver) return;\n      if (!this.$_sizeObserved) return;\n      this.vscrollResizeObserver.unobserve(returnFirstEl(this.$el));\n      this.$el.$_vs_onResize = undefined;\n      this.$_sizeObserved = false;\n    },\n\n    onResize (id, width, height) {\n      if (this.id === id) {\n        this.applyWidthHeight(width, height);\n      }\n    },\n  },\n\n  render () {\n    return h(this.tag, this.$slots.default());\n  },\n};\n</script>\n"],"names":[],"mappings":"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"}

package/dist/vue3/components/select_menu/select_menu.vue.cjs

@@ -179,6 +179,8 @@ const _sfc_main = {
     this.validateOptionsPresence();
   },
   methods: {
+    removeClassStyleAttrs: common_utils.removeClassStyleAttrs,
+    addClassStyleAttrs: common_utils.addClassStyleAttrs,
     emitValue(value, event) {
       this.$emit("input", value, event);
       this.$emit("change", value, event);
@@ -200,7 +202,7 @@ const _hoisted_3 = ["disabled"];
 const _hoisted_4 = ["value"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_validation_messages = vue.resolveComponent("dt-validation-messages");
-  return vue.openBlock(), vue.createElementBlock("div", null, [
+  return vue.openBlock(), vue.createElementBlock("div", vue.normalizeProps(vue.guardReactiveProps($options.addClassStyleAttrs(_ctx.$attrs))), [
     vue.createElementVNode("label", null, [
       $data.hasSlotContent(_ctx.$slots.label) || $props.label ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
         key: 0,
@@ -243,7 +245,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             "d-select__input",
             $data.SELECT_STATE_MODIFIERS[$options.state]
           ]
-        }, _ctx.$attrs, {
+        }, $options.removeClassStyleAttrs(_ctx.$attrs), {
           "data-qa": "dt-select",
           disabled: $props.disabled
         }, vue.toHandlers($options.selectListeners, true)), [
@@ -264,7 +266,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       "show-messages": _ctx.showMessages,
       class: _ctx.messagesClass
     }, _ctx.messagesChildProps, { "data-qa": "dt-select-messages" }), null, 16, ["validation-messages", "show-messages", "class"])
-  ]);
+  ], 16);
 }
 const select_menu = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
 exports.default = select_menu;

package/dist/vue3/components/select_menu/select_menu.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"select_menu.vue.cjs","sources":["../../../components/select_menu/select_menu.vue"],"sourcesContent":["<template>\n  <div>\n    <label>\n      <div\n        v-if=\"hasSlotContent($slots.label) || label\"\n        :aria-details=\"labelAriaDetails\"\n        :class=\"[\n          'd-label',\n          LABEL_SIZE_MODIFIERS[size],\n          labelClass,\n        ]\"\n        v-bind=\"labelChildProps\"\n        data-qa=\"dt-select-label\"\n      >\n        <!-- @slot Slot for label, defaults to label prop -->\n        <slot name=\"label\">{{ label }}</slot>\n      </div>\n      <div\n        v-if=\"hasSlotContent($slots.description) || description\"\n        :id=\"descriptionKey\"\n        :class=\"[\n          'd-description',\n          DESCRIPTION_SIZE_MODIFIERS[size],\n          descriptionClass,\n        ]\"\n        v-bind=\"descriptionChildProps\"\n        data-qa=\"dt-select-description\"\n      >\n        <!-- @slot Slot for description, defaults to description prop -->\n        <slot name=\"description\">{{ description }}</slot>\n      </div>\n      <div\n        :class=\"[\n          'd-select',\n          SELECT_SIZE_MODIFIERS[size],\n          selectClass,\n          { 'd-select--disabled': disabled },\n        ]\"\n        data-qa=\"dt-select-wrapper\"\n      >\n        <select\n          ref=\"selectElement\"\n          :class=\"[\n            'd-select__input',\n            SELECT_STATE_MODIFIERS[state],\n          ]\"\n          v-bind=\"$attrs\"\n          data-qa=\"dt-select\"\n          :disabled=\"disabled\"\n          v-on=\"selectListeners\"\n        >\n          <!-- @slot Slot for select menu options, defaults to options prop -->\n          <slot>\n            <option\n              v-for=\"option in options\"\n              :key=\"getOptionKey(option.value)\"\n              :value=\"option.value\"\n              :class=\"optionClass\"\n              v-bind=\"optionChildProps\"\n            >\n              {{ option.label }}\n            </option>\n          </slot>\n        </select>\n      </div>\n    </label>\n    <dt-validation-messages\n      :validation-messages=\"formattedMessages\"\n      :show-messages=\"showMessages\"\n      :class=\"messagesClass\"\n      v-bind=\"messagesChildProps\"\n      data-qa=\"dt-select-messages\"\n    />\n  </div>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport {\n  LABEL_SIZE_MODIFIERS,\n  DESCRIPTION_SIZE_MODIFIERS,\n} from '@/common/constants';\nimport {\n  SELECT_SIZE_MODIFIERS,\n  SELECT_STATE_MODIFIERS,\n} from './select_menu_constants';\nimport {\n  getUniqueString,\n  getValidationState,\n  hasSlotContent,\n} from '@/common/utils';\nimport { MessagesMixin } from '@/common/mixins/input';\nimport { optionsValidator } from './select_menu_validators.js';\nimport { DtValidationMessages } from '../validation_messages';\n\n/**\n * A select menu is an input control that allows users to choose one option from a list.\n * @property {Boolean} disabled attribute\n * @property {String} name attribute\n * @property {String} value attribute\n * @see https://dialtone.dialpad.com/components/select.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSelectMenu',\n\n  components: { DtValidationMessages },\n\n  mixins: [MessagesMixin],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Label for the select\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Description for the select\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Select Menu Options, overridden by default slot. Each option has the following structure:\n     * `{ index: number (optional), value: number || string (required), label: string (required) }`\n     * @param {Object[]} options - Optional - A list that can be used to create a list of select menu options\n     * @param {number} options[].index - Optional - The index of the option\n     * @param {number|string} options[].value - Required - The option value\n     * @param {string} options[].label - Required - The option Label\n     */\n    options: {\n      type: Array,\n      default: () => [],\n      validator: options => optionsValidator(options),\n    },\n\n    /**\n     * Controls the size of the select\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(SELECT_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the description container\n     */\n    descriptionClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the select\n     */\n    selectClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize each option, should options be provided via prop\n     */\n    optionClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the label container\n     */\n    labelChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * A set of props that are passed into the description container\n     */\n    descriptionChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * A set of props that are passed into each option, should options be provided via prop\n     */\n    optionChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Disabled state of the select\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {String | Number}\n     */\n    'input',\n\n    /**\n     * Native change event\n     *\n     * @event change\n     * @type {String | Number}\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      LABEL_SIZE_MODIFIERS,\n      DESCRIPTION_SIZE_MODIFIERS,\n      SELECT_SIZE_MODIFIERS,\n      SELECT_STATE_MODIFIERS,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    selectListeners () {\n      return {\n        /*\n         * Override input listener to as no-op. Prevents parent input listeners from being passed through onto the input\n         * element which will result in the handler being called twice (once on the select element and once by the\n         * emitted input event by the change listener).\n        */\n        input: () => {},\n        change: event => this.emitValue(event.target.value, event),\n      };\n    },\n\n    state () {\n      return getValidationState(this.formattedMessages);\n    },\n\n    selectKey () {\n      return getUniqueString();\n    },\n\n    descriptionKey () {\n      return `select-${this.selectKey}-description`;\n    },\n\n    labelAriaDetails () {\n      if (this.$slots.description || this.description) {\n        return this.descriptionKey;\n      }\n\n      return this.$attrs['aria-details'];\n    },\n  },\n\n  watch: {\n    // whenever question changes, this function will run\n    options () {\n      this.$nextTick(() => {\n        this.emitValue(this.$refs.selectElement.value, null);\n      });\n    },\n  },\n\n  mounted () {\n    this.emitValue(this.$refs.selectElement.value, null);\n    this.validateOptionsPresence();\n  },\n\n  beforeUpdate () {\n    this.validateOptionsPresence();\n  },\n\n  methods: {\n    emitValue (value, event) {\n      this.$emit('input', value, event);\n      this.$emit('change', value, event);\n    },\n\n    getOptionKey (value) {\n      return `select-${this.selectKey}-option-${value}`;\n    },\n\n    validateOptionsPresence () {\n      if (this.options?.length < 1 && !this.$slots.default) {\n        warn('Options are expected to be provided via prop or slot', this);\n      }\n    },\n  },\n};\n</script>\n"],"names":["DtValidationMessages","MessagesMixin","optionsValidator","SELECT_SIZE_MODIFIERS","LABEL_SIZE_MODIFIERS","DESCRIPTION_SIZE_MODIFIERS","SELECT_STATE_MODIFIERS","hasSlotContent","getValidationState","getUniqueString","warn","_createElementBlock","_createElementVNode","_openBlock","_mergeProps","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_normalizeClass","_toHandlers","_Fragment","_renderList","_createVNode"],"mappings":"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"}
+{"version":3,"file":"select_menu.vue.cjs","sources":["../../../components/select_menu/select_menu.vue"],"sourcesContent":["<template>\n  <div\n    v-bind=\"addClassStyleAttrs($attrs)\"\n  >\n    <label>\n      <div\n        v-if=\"hasSlotContent($slots.label) || label\"\n        :aria-details=\"labelAriaDetails\"\n        :class=\"[\n          'd-label',\n          LABEL_SIZE_MODIFIERS[size],\n          labelClass,\n        ]\"\n        v-bind=\"labelChildProps\"\n        data-qa=\"dt-select-label\"\n      >\n        <!-- @slot Slot for label, defaults to label prop -->\n        <slot name=\"label\">{{ label }}</slot>\n      </div>\n      <div\n        v-if=\"hasSlotContent($slots.description) || description\"\n        :id=\"descriptionKey\"\n        :class=\"[\n          'd-description',\n          DESCRIPTION_SIZE_MODIFIERS[size],\n          descriptionClass,\n        ]\"\n        v-bind=\"descriptionChildProps\"\n        data-qa=\"dt-select-description\"\n      >\n        <!-- @slot Slot for description, defaults to description prop -->\n        <slot name=\"description\">{{ description }}</slot>\n      </div>\n      <div\n        :class=\"[\n          'd-select',\n          SELECT_SIZE_MODIFIERS[size],\n          selectClass,\n          { 'd-select--disabled': disabled },\n        ]\"\n        data-qa=\"dt-select-wrapper\"\n      >\n        <select\n          ref=\"selectElement\"\n          :class=\"[\n            'd-select__input',\n            SELECT_STATE_MODIFIERS[state],\n          ]\"\n          v-bind=\"removeClassStyleAttrs($attrs)\"\n          data-qa=\"dt-select\"\n          :disabled=\"disabled\"\n          v-on=\"selectListeners\"\n        >\n          <!-- @slot Slot for select menu options, defaults to options prop -->\n          <slot>\n            <option\n              v-for=\"option in options\"\n              :key=\"getOptionKey(option.value)\"\n              :value=\"option.value\"\n              :class=\"optionClass\"\n              v-bind=\"optionChildProps\"\n            >\n              {{ option.label }}\n            </option>\n          </slot>\n        </select>\n      </div>\n    </label>\n    <dt-validation-messages\n      :validation-messages=\"formattedMessages\"\n      :show-messages=\"showMessages\"\n      :class=\"messagesClass\"\n      v-bind=\"messagesChildProps\"\n      data-qa=\"dt-select-messages\"\n    />\n  </div>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport {\n  LABEL_SIZE_MODIFIERS,\n  DESCRIPTION_SIZE_MODIFIERS,\n} from '@/common/constants';\nimport {\n  SELECT_SIZE_MODIFIERS,\n  SELECT_STATE_MODIFIERS,\n} from './select_menu_constants';\nimport {\n  getUniqueString,\n  getValidationState,\n  hasSlotContent,\n  removeClassStyleAttrs,\n  addClassStyleAttrs,\n} from '@/common/utils';\nimport { MessagesMixin } from '@/common/mixins/input';\nimport { optionsValidator } from './select_menu_validators.js';\nimport { DtValidationMessages } from '../validation_messages';\n\n/**\n * A select menu is an input control that allows users to choose one option from a list.\n * @property {Boolean} disabled attribute\n * @property {String} name attribute\n * @property {String} value attribute\n * @see https://dialtone.dialpad.com/components/select.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSelectMenu',\n\n  components: { DtValidationMessages },\n\n  mixins: [MessagesMixin],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Label for the select\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Description for the select\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Select Menu Options, overridden by default slot. Each option has the following structure:\n     * `{ index: number (optional), value: number || string (required), label: string (required) }`\n     * @param {Object[]} options - Optional - A list that can be used to create a list of select menu options\n     * @param {number} options[].index - Optional - The index of the option\n     * @param {number|string} options[].value - Required - The option value\n     * @param {string} options[].label - Required - The option Label\n     */\n    options: {\n      type: Array,\n      default: () => [],\n      validator: options => optionsValidator(options),\n    },\n\n    /**\n     * Controls the size of the select\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(SELECT_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the description container\n     */\n    descriptionClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the select\n     */\n    selectClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize each option, should options be provided via prop\n     */\n    optionClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the label container\n     */\n    labelChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * A set of props that are passed into the description container\n     */\n    descriptionChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * A set of props that are passed into each option, should options be provided via prop\n     */\n    optionChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Disabled state of the select\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {String | Number}\n     */\n    'input',\n\n    /**\n     * Native change event\n     *\n     * @event change\n     * @type {String | Number}\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      LABEL_SIZE_MODIFIERS,\n      DESCRIPTION_SIZE_MODIFIERS,\n      SELECT_SIZE_MODIFIERS,\n      SELECT_STATE_MODIFIERS,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    selectListeners () {\n      return {\n        /*\n         * Override input listener to as no-op. Prevents parent input listeners from being passed through onto the input\n         * element which will result in the handler being called twice (once on the select element and once by the\n         * emitted input event by the change listener).\n        */\n        input: () => {},\n        change: event => this.emitValue(event.target.value, event),\n      };\n    },\n\n    state () {\n      return getValidationState(this.formattedMessages);\n    },\n\n    selectKey () {\n      return getUniqueString();\n    },\n\n    descriptionKey () {\n      return `select-${this.selectKey}-description`;\n    },\n\n    labelAriaDetails () {\n      if (this.$slots.description || this.description) {\n        return this.descriptionKey;\n      }\n\n      return this.$attrs['aria-details'];\n    },\n  },\n\n  watch: {\n    // whenever question changes, this function will run\n    options () {\n      this.$nextTick(() => {\n        this.emitValue(this.$refs.selectElement.value, null);\n      });\n    },\n  },\n\n  mounted () {\n    this.emitValue(this.$refs.selectElement.value, null);\n    this.validateOptionsPresence();\n  },\n\n  beforeUpdate () {\n    this.validateOptionsPresence();\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    addClassStyleAttrs,\n    emitValue (value, event) {\n      this.$emit('input', value, event);\n      this.$emit('change', value, event);\n    },\n\n    getOptionKey (value) {\n      return `select-${this.selectKey}-option-${value}`;\n    },\n\n    validateOptionsPresence () {\n      if (this.options?.length < 1 && !this.$slots.default) {\n        warn('Options are expected to be provided via prop or slot', this);\n      }\n    },\n  },\n};\n</script>\n"],"names":["DtValidationMessages","MessagesMixin","optionsValidator","SELECT_SIZE_MODIFIERS","LABEL_SIZE_MODIFIERS","DESCRIPTION_SIZE_MODIFIERS","SELECT_STATE_MODIFIERS","hasSlotContent","getValidationState","getUniqueString","removeClassStyleAttrs","addClassStyleAttrs","warn","_openBlock","_createElementBlock","_normalizeProps","_guardReactiveProps","_createElementVNode","_mergeProps","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_normalizeClass","_toHandlers","_Fragment","_renderList","_createVNode"],"mappings":"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"}

package/dist/vue3/components/select_menu/select_menu.vue.js

@@ -1,7 +1,7 @@
-import { warn, resolveComponent, openBlock, createElementBlock, createElementVNode, mergeProps, renderSlot, createTextVNode, toDisplayString, createCommentVNode, normalizeClass, toHandlers, Fragment, renderList, createVNode } from "vue";
+import { warn, resolveComponent, openBlock, createElementBlock, normalizeProps, guardReactiveProps, createElementVNode, mergeProps, renderSlot, createTextVNode, toDisplayString, createCommentVNode, normalizeClass, toHandlers, Fragment, renderList, createVNode } from "vue";
 import { LABEL_SIZE_MODIFIERS, DESCRIPTION_SIZE_MODIFIERS } from "../../common/constants.js";
 import { SELECT_SIZE_MODIFIERS, SELECT_STATE_MODIFIERS } from "./select_menu_constants.js";
-import { hasSlotContent, getValidationState, getUniqueString } from "../../common/utils.js";
+import { hasSlotContent, getValidationState, getUniqueString, removeClassStyleAttrs, addClassStyleAttrs } from "../../common/utils.js";
 import { MessagesMixin } from "../../common/mixins/input.js";
 import { optionsValidator } from "./select_menu_validators.js";
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
@@ -177,6 +177,8 @@ const _sfc_main = {
     this.validateOptionsPresence();
   },
   methods: {
+    removeClassStyleAttrs,
+    addClassStyleAttrs,
     emitValue(value, event) {
       this.$emit("input", value, event);
       this.$emit("change", value, event);
@@ -198,7 +200,7 @@ const _hoisted_3 = ["disabled"];
 const _hoisted_4 = ["value"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_validation_messages = resolveComponent("dt-validation-messages");
-  return openBlock(), createElementBlock("div", null, [
+  return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps($options.addClassStyleAttrs(_ctx.$attrs))), [
     createElementVNode("label", null, [
       $data.hasSlotContent(_ctx.$slots.label) || $props.label ? (openBlock(), createElementBlock("div", mergeProps({
         key: 0,
@@ -241,7 +243,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             "d-select__input",
             $data.SELECT_STATE_MODIFIERS[$options.state]
           ]
-        }, _ctx.$attrs, {
+        }, $options.removeClassStyleAttrs(_ctx.$attrs), {
           "data-qa": "dt-select",
           disabled: $props.disabled
         }, toHandlers($options.selectListeners, true)), [
@@ -262,7 +264,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       "show-messages": _ctx.showMessages,
       class: _ctx.messagesClass
     }, _ctx.messagesChildProps, { "data-qa": "dt-select-messages" }), null, 16, ["validation-messages", "show-messages", "class"])
-  ]);
+  ], 16);
 }
 const select_menu = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

package/dist/vue3/components/select_menu/select_menu.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"select_menu.vue.js","sources":["../../../components/select_menu/select_menu.vue"],"sourcesContent":["<template>\n  <div>\n    <label>\n      <div\n        v-if=\"hasSlotContent($slots.label) || label\"\n        :aria-details=\"labelAriaDetails\"\n        :class=\"[\n          'd-label',\n          LABEL_SIZE_MODIFIERS[size],\n          labelClass,\n        ]\"\n        v-bind=\"labelChildProps\"\n        data-qa=\"dt-select-label\"\n      >\n        <!-- @slot Slot for label, defaults to label prop -->\n        <slot name=\"label\">{{ label }}</slot>\n      </div>\n      <div\n        v-if=\"hasSlotContent($slots.description) || description\"\n        :id=\"descriptionKey\"\n        :class=\"[\n          'd-description',\n          DESCRIPTION_SIZE_MODIFIERS[size],\n          descriptionClass,\n        ]\"\n        v-bind=\"descriptionChildProps\"\n        data-qa=\"dt-select-description\"\n      >\n        <!-- @slot Slot for description, defaults to description prop -->\n        <slot name=\"description\">{{ description }}</slot>\n      </div>\n      <div\n        :class=\"[\n          'd-select',\n          SELECT_SIZE_MODIFIERS[size],\n          selectClass,\n          { 'd-select--disabled': disabled },\n        ]\"\n        data-qa=\"dt-select-wrapper\"\n      >\n        <select\n          ref=\"selectElement\"\n          :class=\"[\n            'd-select__input',\n            SELECT_STATE_MODIFIERS[state],\n          ]\"\n          v-bind=\"$attrs\"\n          data-qa=\"dt-select\"\n          :disabled=\"disabled\"\n          v-on=\"selectListeners\"\n        >\n          <!-- @slot Slot for select menu options, defaults to options prop -->\n          <slot>\n            <option\n              v-for=\"option in options\"\n              :key=\"getOptionKey(option.value)\"\n              :value=\"option.value\"\n              :class=\"optionClass\"\n              v-bind=\"optionChildProps\"\n            >\n              {{ option.label }}\n            </option>\n          </slot>\n        </select>\n      </div>\n    </label>\n    <dt-validation-messages\n      :validation-messages=\"formattedMessages\"\n      :show-messages=\"showMessages\"\n      :class=\"messagesClass\"\n      v-bind=\"messagesChildProps\"\n      data-qa=\"dt-select-messages\"\n    />\n  </div>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport {\n  LABEL_SIZE_MODIFIERS,\n  DESCRIPTION_SIZE_MODIFIERS,\n} from '@/common/constants';\nimport {\n  SELECT_SIZE_MODIFIERS,\n  SELECT_STATE_MODIFIERS,\n} from './select_menu_constants';\nimport {\n  getUniqueString,\n  getValidationState,\n  hasSlotContent,\n} from '@/common/utils';\nimport { MessagesMixin } from '@/common/mixins/input';\nimport { optionsValidator } from './select_menu_validators.js';\nimport { DtValidationMessages } from '../validation_messages';\n\n/**\n * A select menu is an input control that allows users to choose one option from a list.\n * @property {Boolean} disabled attribute\n * @property {String} name attribute\n * @property {String} value attribute\n * @see https://dialtone.dialpad.com/components/select.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSelectMenu',\n\n  components: { DtValidationMessages },\n\n  mixins: [MessagesMixin],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Label for the select\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Description for the select\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Select Menu Options, overridden by default slot. Each option has the following structure:\n     * `{ index: number (optional), value: number || string (required), label: string (required) }`\n     * @param {Object[]} options - Optional - A list that can be used to create a list of select menu options\n     * @param {number} options[].index - Optional - The index of the option\n     * @param {number|string} options[].value - Required - The option value\n     * @param {string} options[].label - Required - The option Label\n     */\n    options: {\n      type: Array,\n      default: () => [],\n      validator: options => optionsValidator(options),\n    },\n\n    /**\n     * Controls the size of the select\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(SELECT_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the description container\n     */\n    descriptionClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the select\n     */\n    selectClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize each option, should options be provided via prop\n     */\n    optionClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the label container\n     */\n    labelChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * A set of props that are passed into the description container\n     */\n    descriptionChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * A set of props that are passed into each option, should options be provided via prop\n     */\n    optionChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Disabled state of the select\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {String | Number}\n     */\n    'input',\n\n    /**\n     * Native change event\n     *\n     * @event change\n     * @type {String | Number}\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      LABEL_SIZE_MODIFIERS,\n      DESCRIPTION_SIZE_MODIFIERS,\n      SELECT_SIZE_MODIFIERS,\n      SELECT_STATE_MODIFIERS,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    selectListeners () {\n      return {\n        /*\n         * Override input listener to as no-op. Prevents parent input listeners from being passed through onto the input\n         * element which will result in the handler being called twice (once on the select element and once by the\n         * emitted input event by the change listener).\n        */\n        input: () => {},\n        change: event => this.emitValue(event.target.value, event),\n      };\n    },\n\n    state () {\n      return getValidationState(this.formattedMessages);\n    },\n\n    selectKey () {\n      return getUniqueString();\n    },\n\n    descriptionKey () {\n      return `select-${this.selectKey}-description`;\n    },\n\n    labelAriaDetails () {\n      if (this.$slots.description || this.description) {\n        return this.descriptionKey;\n      }\n\n      return this.$attrs['aria-details'];\n    },\n  },\n\n  watch: {\n    // whenever question changes, this function will run\n    options () {\n      this.$nextTick(() => {\n        this.emitValue(this.$refs.selectElement.value, null);\n      });\n    },\n  },\n\n  mounted () {\n    this.emitValue(this.$refs.selectElement.value, null);\n    this.validateOptionsPresence();\n  },\n\n  beforeUpdate () {\n    this.validateOptionsPresence();\n  },\n\n  methods: {\n    emitValue (value, event) {\n      this.$emit('input', value, event);\n      this.$emit('change', value, event);\n    },\n\n    getOptionKey (value) {\n      return `select-${this.selectKey}-option-${value}`;\n    },\n\n    validateOptionsPresence () {\n      if (this.options?.length < 1 && !this.$slots.default) {\n        warn('Options are expected to be provided via prop or slot', this);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_createElementVNode","_openBlock","_mergeProps","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_normalizeClass","_toHandlers","_Fragment","_renderList","_createVNode"],"mappings":"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"}
+{"version":3,"file":"select_menu.vue.js","sources":["../../../components/select_menu/select_menu.vue"],"sourcesContent":["<template>\n  <div\n    v-bind=\"addClassStyleAttrs($attrs)\"\n  >\n    <label>\n      <div\n        v-if=\"hasSlotContent($slots.label) || label\"\n        :aria-details=\"labelAriaDetails\"\n        :class=\"[\n          'd-label',\n          LABEL_SIZE_MODIFIERS[size],\n          labelClass,\n        ]\"\n        v-bind=\"labelChildProps\"\n        data-qa=\"dt-select-label\"\n      >\n        <!-- @slot Slot for label, defaults to label prop -->\n        <slot name=\"label\">{{ label }}</slot>\n      </div>\n      <div\n        v-if=\"hasSlotContent($slots.description) || description\"\n        :id=\"descriptionKey\"\n        :class=\"[\n          'd-description',\n          DESCRIPTION_SIZE_MODIFIERS[size],\n          descriptionClass,\n        ]\"\n        v-bind=\"descriptionChildProps\"\n        data-qa=\"dt-select-description\"\n      >\n        <!-- @slot Slot for description, defaults to description prop -->\n        <slot name=\"description\">{{ description }}</slot>\n      </div>\n      <div\n        :class=\"[\n          'd-select',\n          SELECT_SIZE_MODIFIERS[size],\n          selectClass,\n          { 'd-select--disabled': disabled },\n        ]\"\n        data-qa=\"dt-select-wrapper\"\n      >\n        <select\n          ref=\"selectElement\"\n          :class=\"[\n            'd-select__input',\n            SELECT_STATE_MODIFIERS[state],\n          ]\"\n          v-bind=\"removeClassStyleAttrs($attrs)\"\n          data-qa=\"dt-select\"\n          :disabled=\"disabled\"\n          v-on=\"selectListeners\"\n        >\n          <!-- @slot Slot for select menu options, defaults to options prop -->\n          <slot>\n            <option\n              v-for=\"option in options\"\n              :key=\"getOptionKey(option.value)\"\n              :value=\"option.value\"\n              :class=\"optionClass\"\n              v-bind=\"optionChildProps\"\n            >\n              {{ option.label }}\n            </option>\n          </slot>\n        </select>\n      </div>\n    </label>\n    <dt-validation-messages\n      :validation-messages=\"formattedMessages\"\n      :show-messages=\"showMessages\"\n      :class=\"messagesClass\"\n      v-bind=\"messagesChildProps\"\n      data-qa=\"dt-select-messages\"\n    />\n  </div>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport {\n  LABEL_SIZE_MODIFIERS,\n  DESCRIPTION_SIZE_MODIFIERS,\n} from '@/common/constants';\nimport {\n  SELECT_SIZE_MODIFIERS,\n  SELECT_STATE_MODIFIERS,\n} from './select_menu_constants';\nimport {\n  getUniqueString,\n  getValidationState,\n  hasSlotContent,\n  removeClassStyleAttrs,\n  addClassStyleAttrs,\n} from '@/common/utils';\nimport { MessagesMixin } from '@/common/mixins/input';\nimport { optionsValidator } from './select_menu_validators.js';\nimport { DtValidationMessages } from '../validation_messages';\n\n/**\n * A select menu is an input control that allows users to choose one option from a list.\n * @property {Boolean} disabled attribute\n * @property {String} name attribute\n * @property {String} value attribute\n * @see https://dialtone.dialpad.com/components/select.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSelectMenu',\n\n  components: { DtValidationMessages },\n\n  mixins: [MessagesMixin],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Label for the select\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Description for the select\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Select Menu Options, overridden by default slot. Each option has the following structure:\n     * `{ index: number (optional), value: number || string (required), label: string (required) }`\n     * @param {Object[]} options - Optional - A list that can be used to create a list of select menu options\n     * @param {number} options[].index - Optional - The index of the option\n     * @param {number|string} options[].value - Required - The option value\n     * @param {string} options[].label - Required - The option Label\n     */\n    options: {\n      type: Array,\n      default: () => [],\n      validator: options => optionsValidator(options),\n    },\n\n    /**\n     * Controls the size of the select\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(SELECT_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the description container\n     */\n    descriptionClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the select\n     */\n    selectClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize each option, should options be provided via prop\n     */\n    optionClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the label container\n     */\n    labelChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * A set of props that are passed into the description container\n     */\n    descriptionChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * A set of props that are passed into each option, should options be provided via prop\n     */\n    optionChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Disabled state of the select\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {String | Number}\n     */\n    'input',\n\n    /**\n     * Native change event\n     *\n     * @event change\n     * @type {String | Number}\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      LABEL_SIZE_MODIFIERS,\n      DESCRIPTION_SIZE_MODIFIERS,\n      SELECT_SIZE_MODIFIERS,\n      SELECT_STATE_MODIFIERS,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    selectListeners () {\n      return {\n        /*\n         * Override input listener to as no-op. Prevents parent input listeners from being passed through onto the input\n         * element which will result in the handler being called twice (once on the select element and once by the\n         * emitted input event by the change listener).\n        */\n        input: () => {},\n        change: event => this.emitValue(event.target.value, event),\n      };\n    },\n\n    state () {\n      return getValidationState(this.formattedMessages);\n    },\n\n    selectKey () {\n      return getUniqueString();\n    },\n\n    descriptionKey () {\n      return `select-${this.selectKey}-description`;\n    },\n\n    labelAriaDetails () {\n      if (this.$slots.description || this.description) {\n        return this.descriptionKey;\n      }\n\n      return this.$attrs['aria-details'];\n    },\n  },\n\n  watch: {\n    // whenever question changes, this function will run\n    options () {\n      this.$nextTick(() => {\n        this.emitValue(this.$refs.selectElement.value, null);\n      });\n    },\n  },\n\n  mounted () {\n    this.emitValue(this.$refs.selectElement.value, null);\n    this.validateOptionsPresence();\n  },\n\n  beforeUpdate () {\n    this.validateOptionsPresence();\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    addClassStyleAttrs,\n    emitValue (value, event) {\n      this.$emit('input', value, event);\n      this.$emit('change', value, event);\n    },\n\n    getOptionKey (value) {\n      return `select-${this.selectKey}-option-${value}`;\n    },\n\n    validateOptionsPresence () {\n      if (this.options?.length < 1 && !this.$slots.default) {\n        warn('Options are expected to be provided via prop or slot', this);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_openBlock","_createElementBlock","_normalizeProps","_guardReactiveProps","_createElementVNode","_mergeProps","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_normalizeClass","_toHandlers","_Fragment","_renderList","_createVNode"],"mappings":"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"}

package/dist/vue3/components/split_button/split_button.vue.cjs

@@ -198,7 +198,8 @@ const _sfc_main = {
         kind: this.kind,
         size: this.size,
         tooltipText: this.alphaTooltipText,
-        class: this.$attrs.class
+        class: this.$attrs.class,
+        style: this.$attrs.style
       };
     },
     omegaButtonProps() {
@@ -211,7 +212,8 @@ const _sfc_main = {
         kind: this.kind,
         size: this.size,
         tooltipText: this.omegaTooltipText,
-        class: this.$attrs.class
+        class: this.$attrs.class,
+        style: this.$attrs.style
       };
     }
   },
@@ -222,7 +224,7 @@ const _sfc_main = {
     this.validateProps();
   },
   mounted() {
-    common_utils.warnIfUnmounted(this.$el, this.$options.name);
+    common_utils.warnIfUnmounted(common_utils.returnFirstEl(this.$el), this.$options.name);
   },
   methods: {
     validateProps() {

package/dist/vue3/components/split_button/split_button.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"split_button.vue.cjs","sources":["../../../components/split_button/split_button.vue"],"sourcesContent":["<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, warnIfUnmounted } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\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  mounted () {\n    warnIfUnmounted(this.$el, this.$options.name);\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":["SplitButtonOmega","DtDropdown","SplitButtonAlpha","ICON_POSITION_MODIFIERS","BUTTON_IMPORTANCE_MODIFIERS","BUTTON_KIND_MODIFIERS","BUTTON_SIZE_MODIFIERS","warnIfUnmounted","hasSlotContent","_createElementBlock","_normalizeStyle","_createVNode","_mergeProps","_withCtx","_renderSlot","_createBlock","_openBlock"],"mappings":"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"}
+{"version":3,"file":"split_button.vue.cjs","sources":["../../../components/split_button/split_button.vue"],"sourcesContent":["<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, warnIfUnmounted, returnFirstEl } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\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        style: this.$attrs.style,\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        style: this.$attrs.style,\n      };\n    },\n  },\n\n  created () {\n    this.validateProps();\n  },\n\n  updated () {\n    this.validateProps();\n  },\n\n  mounted () {\n    warnIfUnmounted(returnFirstEl(this.$el), this.$options.name);\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":["SplitButtonOmega","DtDropdown","SplitButtonAlpha","ICON_POSITION_MODIFIERS","BUTTON_IMPORTANCE_MODIFIERS","BUTTON_KIND_MODIFIERS","BUTTON_SIZE_MODIFIERS","warnIfUnmounted","returnFirstEl","hasSlotContent","_createElementBlock","_normalizeStyle","_createVNode","_mergeProps","_withCtx","_renderSlot","_createBlock","_openBlock"],"mappings":"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"}

package/dist/vue3/components/split_button/split_button.vue.js

@@ -1,6 +1,6 @@
 import SplitButtonAlpha from "./split_button-alpha.vue.js";
 import SplitButtonOmega from "./split_button-omega.vue.js";
-import { warnIfUnmounted, hasSlotContent } from "../../common/utils.js";
+import { warnIfUnmounted, returnFirstEl, hasSlotContent } from "../../common/utils.js";
 import { resolveComponent, openBlock, createElementBlock, normalizeStyle, createVNode, mergeProps, withCtx, renderSlot, createBlock } from "vue";
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
 import DtDropdown from "../dropdown/dropdown.vue.js";
@@ -196,7 +196,8 @@ const _sfc_main = {
         kind: this.kind,
         size: this.size,
         tooltipText: this.alphaTooltipText,
-        class: this.$attrs.class
+        class: this.$attrs.class,
+        style: this.$attrs.style
       };
     },
     omegaButtonProps() {
@@ -209,7 +210,8 @@ const _sfc_main = {
         kind: this.kind,
         size: this.size,
         tooltipText: this.omegaTooltipText,
-        class: this.$attrs.class
+        class: this.$attrs.class,
+        style: this.$attrs.style
       };
     }
   },
@@ -220,7 +222,7 @@ const _sfc_main = {
     this.validateProps();
   },
   mounted() {
-    warnIfUnmounted(this.$el, this.$options.name);
+    warnIfUnmounted(returnFirstEl(this.$el), this.$options.name);
   },
   methods: {
     validateProps() {