@dialpad/dialtone-vue 3.120.0 → 3.120.2

package/dist/lib/select-menu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"select-menu.cjs","sources":["../../components/select_menu/select_menu_constants.js","../../components/select_menu/select_menu_validators.js","../../components/select_menu/select_menu.vue"],"sourcesContent":["export const SELECT_SIZE_MODIFIERS = {\n  xs: 'd-select--xs',\n  sm: 'd-select--sm',\n  md: '',\n  lg: 'd-select--lg',\n  xl: 'd-select--xl',\n};\n\nexport const SELECT_STATE_MODIFIERS = {\n  error: 'd-select__input--error',\n  warning: 'd-select__input--warning',\n  success: 'd-select__input--success',\n};\n\nexport default {\n  SELECT_SIZE_MODIFIERS,\n  SELECT_STATE_MODIFIERS,\n};\n","const hasValidOptionIndex = option => !option.index || typeof option.index === 'number';\n\nconst hasValidOptionValue = option => {\n  if (!option.value) {\n    return false;\n  }\n\n  return typeof option.value === 'string' || typeof option.value === 'number';\n};\n\nconst hasValidOptionLabel = option => {\n  if (!option.label) {\n    return false;\n  }\n\n  return typeof option.label === 'string';\n};\n\nexport const optionsValidator = options => {\n  if (!options) {\n    return true;\n  }\n\n  return options.every(option => {\n    if (!hasValidOptionIndex(option)) {\n      return false;\n    }\n\n    if (!hasValidOptionValue(option)) {\n      return false;\n    }\n\n    if (!hasValidOptionLabel(option)) {\n      return false;\n    }\n\n    return true;\n  });\n};\n","<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  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":["SELECT_SIZE_MODIFIERS","SELECT_STATE_MODIFIERS","hasValidOptionIndex","option","hasValidOptionValue","hasValidOptionLabel","optionsValidator","options","_sfc_main","DtValidationMessages","MessagesMixin","s","LABEL_SIZE_MODIFIERS","DESCRIPTION_SIZE_MODIFIERS","hasSlotContent","event","getValidationState","getUniqueString","value","_a","warn","_createElementBlock","_createElementVNode","$data","_ctx","$props","_openBlock","_mergeProps","$options","_renderSlot","_normalizeClass","_toHandlers","_Fragment","_renderList","_toDisplayString","_hoisted_4","_createVNode","_component_dt_validation_messages"],"mappings":"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"}
+{"version":3,"file":"select-menu.cjs","sources":["../../components/select_menu/select_menu_constants.js","../../components/select_menu/select_menu_validators.js","../../components/select_menu/select_menu.vue"],"sourcesContent":["export const SELECT_SIZE_MODIFIERS = {\n  xs: 'd-select--xs',\n  sm: 'd-select--sm',\n  md: '',\n  lg: 'd-select--lg',\n  xl: 'd-select--xl',\n};\n\nexport const SELECT_STATE_MODIFIERS = {\n  error: 'd-select__input--error',\n  warning: 'd-select__input--warning',\n  success: 'd-select__input--success',\n};\n\nexport default {\n  SELECT_SIZE_MODIFIERS,\n  SELECT_STATE_MODIFIERS,\n};\n","const hasValidOptionIndex = option => !option.index || typeof option.index === 'number';\n\nconst hasValidOptionValue = option => {\n  if (!option.value) {\n    return false;\n  }\n\n  return typeof option.value === 'string' || typeof option.value === 'number';\n};\n\nconst hasValidOptionLabel = option => {\n  if (!option.label) {\n    return false;\n  }\n\n  return typeof option.label === 'string';\n};\n\nexport const optionsValidator = options => {\n  if (!options) {\n    return true;\n  }\n\n  return options.every(option => {\n    if (!hasValidOptionIndex(option)) {\n      return false;\n    }\n\n    if (!hasValidOptionValue(option)) {\n      return false;\n    }\n\n    if (!hasValidOptionLabel(option)) {\n      return false;\n    }\n\n    return true;\n  });\n};\n","<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  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","LABEL_SIZE_MODIFIERS","DESCRIPTION_SIZE_MODIFIERS","hasSlotContent","getValidationState","getUniqueString","warn","_createElementBlock","_createElementVNode","_openBlock","_mergeProps","_renderSlot","_normalizeClass","_toHandlers","_Fragment","_renderList","_toDisplayString","_createVNode"],"mappings":"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"}

package/dist/lib/select-menu.js

@@ -1,25 +1,57 @@
-import { warn as g, resolveComponent as S, openBlock as i, createElementBlock as r, createElementVNode as o, mergeProps as n, renderSlot as c, createTextVNode as m, toDisplayString as u, createCommentVNode as f, normalizeClass as b, toHandlers as _, Fragment as y, renderList as E, createVNode as C } from "vue";
-import { LABEL_SIZE_MODIFIERS as I, DESCRIPTION_SIZE_MODIFIERS as O } from "./constants.js";
-import { hasSlotContent as v, getValidationState as M, getUniqueString as D } from "./utils.js";
-import { M as V } from "../chunks/input-4UQWegUk.js";
-import { _ as P } from "../chunks/_plugin-vue_export-helper-hUChTQA_.js";
-import { DtValidationMessages as A } from "./validation-messages.js";
-import "./validators.js";
-const h = {
+import { warn, resolveComponent, openBlock, createElementBlock, 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 { hasSlotContent, getValidationState, getUniqueString } from "../common/utils.js";
+import { MessagesMixin } from "../chunks/input-NmYDD5bn.js";
+import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
+import { DtValidationMessages } from "./validation-messages.js";
+import "../common/validators.js";
+const SELECT_SIZE_MODIFIERS = {
   xs: "d-select--xs",
   sm: "d-select--sm",
   md: "",
   lg: "d-select--lg",
   xl: "d-select--xl"
-}, L = {
+};
+const SELECT_STATE_MODIFIERS = {
   error: "d-select__input--error",
   warning: "d-select__input--warning",
   success: "d-select__input--success"
-}, T = (e) => !e.index || typeof e.index == "number", R = (e) => e.value ? typeof e.value == "string" || typeof e.value == "number" : !1, F = (e) => e.label ? typeof e.label == "string" : !1, j = (e) => e ? e.every((s) => !(!T(s) || !R(s) || !F(s))) : !0, w = {
+};
+const hasValidOptionIndex = (option) => !option.index || typeof option.index === "number";
+const hasValidOptionValue = (option) => {
+  if (!option.value) {
+    return false;
+  }
+  return typeof option.value === "string" || typeof option.value === "number";
+};
+const hasValidOptionLabel = (option) => {
+  if (!option.label) {
+    return false;
+  }
+  return typeof option.label === "string";
+};
+const optionsValidator = (options) => {
+  if (!options) {
+    return true;
+  }
+  return options.every((option) => {
+    if (!hasValidOptionIndex(option)) {
+      return false;
+    }
+    if (!hasValidOptionValue(option)) {
+      return false;
+    }
+    if (!hasValidOptionLabel(option)) {
+      return false;
+    }
+    return true;
+  });
+};
+const _sfc_main = {
   name: "DtSelectMenu",
-  components: { DtValidationMessages: A },
-  mixins: [V],
-  inheritAttrs: !1,
+  components: { DtValidationMessages },
+  mixins: [MessagesMixin],
+  inheritAttrs: false,
   props: {
     /**
      * Label for the select
@@ -46,7 +78,7 @@ const h = {
     options: {
       type: Array,
       default: () => [],
-      validator: (e) => j(e)
+      validator: (options) => optionsValidator(options)
     },
     /**
      * Controls the size of the select
@@ -55,7 +87,7 @@ const h = {
     size: {
       type: String,
       default: "md",
-      validator: (e) => Object.keys(h).includes(e)
+      validator: (s) => Object.keys(SELECT_SIZE_MODIFIERS).includes(s)
     },
     /**
      * Used to customize the label container
@@ -112,7 +144,7 @@ const h = {
      */
     disabled: {
       type: Boolean,
-      default: !1
+      default: false
     }
   },
   emits: [
@@ -133,11 +165,11 @@ const h = {
   ],
   data() {
     return {
-      LABEL_SIZE_MODIFIERS: I,
-      DESCRIPTION_SIZE_MODIFIERS: O,
-      SELECT_SIZE_MODIFIERS: h,
-      SELECT_STATE_MODIFIERS: L,
-      hasSlotContent: v
+      LABEL_SIZE_MODIFIERS,
+      DESCRIPTION_SIZE_MODIFIERS,
+      SELECT_SIZE_MODIFIERS,
+      SELECT_STATE_MODIFIERS,
+      hasSlotContent
     };
   },
   computed: {
@@ -150,20 +182,23 @@ const h = {
         */
         input: () => {
         },
-        change: (e) => this.emitValue(e.target.value, e)
+        change: (event) => this.emitValue(event.target.value, event)
       };
     },
     state() {
-      return M(this.formattedMessages);
+      return getValidationState(this.formattedMessages);
     },
     selectKey() {
-      return D();
+      return getUniqueString();
     },
     descriptionKey() {
       return `select-${this.selectKey}-description`;
     },
     labelAriaDetails() {
-      return this.$slots.description || this.description ? this.descriptionKey : this.$attrs["aria-details"];
+      if (this.$slots.description || this.description) {
+        return this.descriptionKey;
+      }
+      return this.$attrs["aria-details"];
     }
   },
   watch: {
@@ -175,94 +210,104 @@ const h = {
     }
   },
   mounted() {
-    this.emitValue(this.$refs.selectElement.value, null), this.validateOptionsPresence();
+    this.emitValue(this.$refs.selectElement.value, null);
+    this.validateOptionsPresence();
   },
   beforeUpdate() {
     this.validateOptionsPresence();
   },
   methods: {
-    emitValue(e, s) {
-      this.$emit("input", e, s), this.$emit("change", e, s);
+    emitValue(value, event) {
+      this.$emit("input", value, event);
+      this.$emit("change", value, event);
     },
-    getOptionKey(e) {
-      return `select-${this.selectKey}-option-${e}`;
+    getOptionKey(value) {
+      return `select-${this.selectKey}-option-${value}`;
     },
     validateOptionsPresence() {
-      var e;
-      ((e = this.options) == null ? void 0 : e.length) < 1 && !this.$slots.default && g("Options are expected to be provided via prop or slot", this);
+      var _a;
+      if (((_a = this.options) == null ? void 0 : _a.length) < 1 && !this.$slots.default) {
+        warn("Options are expected to be provided via prop or slot", this);
+      }
     }
   }
-}, K = ["aria-details"], k = ["id"], q = ["disabled"], N = ["value"];
-function Z(e, s, t, x, l, a) {
-  const p = S("dt-validation-messages");
-  return i(), r("div", null, [
-    o("label", null, [
-      l.hasSlotContent(e.$slots.label) || t.label ? (i(), r("div", n({
+};
+const _hoisted_1 = ["aria-details"];
+const _hoisted_2 = ["id"];
+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, [
+    createElementVNode("label", null, [
+      $data.hasSlotContent(_ctx.$slots.label) || $props.label ? (openBlock(), createElementBlock("div", mergeProps({
         key: 0,
-        "aria-details": a.labelAriaDetails,
+        "aria-details": $options.labelAriaDetails,
         class: [
           "d-label",
-          l.LABEL_SIZE_MODIFIERS[t.size],
-          t.labelClass
+          $data.LABEL_SIZE_MODIFIERS[$props.size],
+          $props.labelClass
         ]
-      }, t.labelChildProps, { "data-qa": "dt-select-label" }), [
-        c(e.$slots, "label", {}, () => [
-          m(u(t.label), 1)
+      }, $props.labelChildProps, { "data-qa": "dt-select-label" }), [
+        renderSlot(_ctx.$slots, "label", {}, () => [
+          createTextVNode(toDisplayString($props.label), 1)
         ])
-      ], 16, K)) : f("", !0),
-      l.hasSlotContent(e.$slots.description) || t.description ? (i(), r("div", n({
+      ], 16, _hoisted_1)) : createCommentVNode("", true),
+      $data.hasSlotContent(_ctx.$slots.description) || $props.description ? (openBlock(), createElementBlock("div", mergeProps({
         key: 1,
-        id: a.descriptionKey,
+        id: $options.descriptionKey,
         class: [
           "d-description",
-          l.DESCRIPTION_SIZE_MODIFIERS[t.size],
-          t.descriptionClass
+          $data.DESCRIPTION_SIZE_MODIFIERS[$props.size],
+          $props.descriptionClass
         ]
-      }, t.descriptionChildProps, { "data-qa": "dt-select-description" }), [
-        c(e.$slots, "description", {}, () => [
-          m(u(t.description), 1)
+      }, $props.descriptionChildProps, { "data-qa": "dt-select-description" }), [
+        renderSlot(_ctx.$slots, "description", {}, () => [
+          createTextVNode(toDisplayString($props.description), 1)
         ])
-      ], 16, k)) : f("", !0),
-      o("div", {
-        class: b([
+      ], 16, _hoisted_2)) : createCommentVNode("", true),
+      createElementVNode("div", {
+        class: normalizeClass([
           "d-select",
-          l.SELECT_SIZE_MODIFIERS[t.size],
-          t.selectClass,
-          { "d-select--disabled": t.disabled }
+          $data.SELECT_SIZE_MODIFIERS[$props.size],
+          $props.selectClass,
+          { "d-select--disabled": $props.disabled }
         ]),
         "data-qa": "dt-select-wrapper"
       }, [
-        o("select", n({
+        createElementVNode("select", mergeProps({
           ref: "selectElement",
           class: [
             "d-select__input",
-            l.SELECT_STATE_MODIFIERS[a.state]
+            $data.SELECT_STATE_MODIFIERS[$options.state]
           ]
-        }, e.$attrs, {
+        }, _ctx.$attrs, {
           "data-qa": "dt-select",
-          disabled: t.disabled
-        }, _(a.selectListeners, !0)), [
-          c(e.$slots, "default", {}, () => [
-            (i(!0), r(y, null, E(t.options, (d) => (i(), r("option", n({
-              key: a.getOptionKey(d.value),
-              value: d.value,
-              class: t.optionClass
-            }, t.optionChildProps), u(d.label), 17, N))), 128))
+          disabled: $props.disabled
+        }, toHandlers($options.selectListeners, true)), [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList($props.options, (option) => {
+              return openBlock(), createElementBlock("option", mergeProps({
+                key: $options.getOptionKey(option.value),
+                value: option.value,
+                class: $props.optionClass
+              }, $props.optionChildProps), toDisplayString(option.label), 17, _hoisted_4);
+            }), 128))
           ])
-        ], 16, q)
+        ], 16, _hoisted_3)
       ], 2)
     ]),
-    C(p, n({
-      "validation-messages": e.formattedMessages,
-      "show-messages": e.showMessages,
-      class: e.messagesClass
-    }, e.messagesChildProps, { "data-qa": "dt-select-messages" }), null, 16, ["validation-messages", "show-messages", "class"])
+    createVNode(_component_dt_validation_messages, mergeProps({
+      "validation-messages": _ctx.formattedMessages,
+      "show-messages": _ctx.showMessages,
+      class: _ctx.messagesClass
+    }, _ctx.messagesChildProps, { "data-qa": "dt-select-messages" }), null, 16, ["validation-messages", "show-messages", "class"])
   ]);
 }
-const W = /* @__PURE__ */ P(w, [["render", Z]]);
+const select_menu = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  W as DtSelectMenu,
-  h as SELECT_SIZE_MODIFIERS,
-  L as SELECT_STATE_MODIFIERS
+  select_menu as DtSelectMenu,
+  SELECT_SIZE_MODIFIERS,
+  SELECT_STATE_MODIFIERS
 };
 //# sourceMappingURL=select-menu.js.map

package/dist/lib/select-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-menu.js","sources":["../../components/select_menu/select_menu_constants.js","../../components/select_menu/select_menu_validators.js","../../components/select_menu/select_menu.vue"],"sourcesContent":["export const SELECT_SIZE_MODIFIERS = {\n  xs: 'd-select--xs',\n  sm: 'd-select--sm',\n  md: '',\n  lg: 'd-select--lg',\n  xl: 'd-select--xl',\n};\n\nexport const SELECT_STATE_MODIFIERS = {\n  error: 'd-select__input--error',\n  warning: 'd-select__input--warning',\n  success: 'd-select__input--success',\n};\n\nexport default {\n  SELECT_SIZE_MODIFIERS,\n  SELECT_STATE_MODIFIERS,\n};\n","const hasValidOptionIndex = option => !option.index || typeof option.index === 'number';\n\nconst hasValidOptionValue = option => {\n  if (!option.value) {\n    return false;\n  }\n\n  return typeof option.value === 'string' || typeof option.value === 'number';\n};\n\nconst hasValidOptionLabel = option => {\n  if (!option.label) {\n    return false;\n  }\n\n  return typeof option.label === 'string';\n};\n\nexport const optionsValidator = options => {\n  if (!options) {\n    return true;\n  }\n\n  return options.every(option => {\n    if (!hasValidOptionIndex(option)) {\n      return false;\n    }\n\n    if (!hasValidOptionValue(option)) {\n      return false;\n    }\n\n    if (!hasValidOptionLabel(option)) {\n      return false;\n    }\n\n    return true;\n  });\n};\n","<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  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":["SELECT_SIZE_MODIFIERS","SELECT_STATE_MODIFIERS","hasValidOptionIndex","option","hasValidOptionValue","hasValidOptionLabel","optionsValidator","options","_sfc_main","DtValidationMessages","MessagesMixin","s","LABEL_SIZE_MODIFIERS","DESCRIPTION_SIZE_MODIFIERS","hasSlotContent","event","getValidationState","getUniqueString","value","_a","warn","_createElementBlock","_createElementVNode","$data","_ctx","$props","_openBlock","_mergeProps","$options","_renderSlot","_normalizeClass","_toHandlers","_Fragment","_renderList","_toDisplayString","_hoisted_4","_createVNode","_component_dt_validation_messages"],"mappings":"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"}
+{"version":3,"file":"select-menu.js","sources":["../../components/select_menu/select_menu_constants.js","../../components/select_menu/select_menu_validators.js","../../components/select_menu/select_menu.vue"],"sourcesContent":["export const SELECT_SIZE_MODIFIERS = {\n  xs: 'd-select--xs',\n  sm: 'd-select--sm',\n  md: '',\n  lg: 'd-select--lg',\n  xl: 'd-select--xl',\n};\n\nexport const SELECT_STATE_MODIFIERS = {\n  error: 'd-select__input--error',\n  warning: 'd-select__input--warning',\n  success: 'd-select__input--success',\n};\n\nexport default {\n  SELECT_SIZE_MODIFIERS,\n  SELECT_STATE_MODIFIERS,\n};\n","const hasValidOptionIndex = option => !option.index || typeof option.index === 'number';\n\nconst hasValidOptionValue = option => {\n  if (!option.value) {\n    return false;\n  }\n\n  return typeof option.value === 'string' || typeof option.value === 'number';\n};\n\nconst hasValidOptionLabel = option => {\n  if (!option.label) {\n    return false;\n  }\n\n  return typeof option.label === 'string';\n};\n\nexport const optionsValidator = options => {\n  if (!options) {\n    return true;\n  }\n\n  return options.every(option => {\n    if (!hasValidOptionIndex(option)) {\n      return false;\n    }\n\n    if (!hasValidOptionValue(option)) {\n      return false;\n    }\n\n    if (!hasValidOptionLabel(option)) {\n      return false;\n    }\n\n    return true;\n  });\n};\n","<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  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","_normalizeClass","_toHandlers","_Fragment","_renderList","_toDisplayString","_createVNode"],"mappings":"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"}

package/dist/lib/settings-menu-button.cjs

@@ -1,2 +1,78 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./button.cjs"),e=require("vue"),a=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),u=require("./icon.cjs");require("./utils.cjs");require("./constants.cjs");require("../chunks/link_constants-Kn6kP4i1.js");require("@dialpad/dialtone-icons/vue3");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");const s={name:"DtRecipeSettingsMenuButton",components:{DtButton:i.DtButton,DtIcon:u.DtIcon},inheritAttrs:!1,props:{updateAvailable:{type:Boolean,default:!1},ariaLabel:{type:String,required:!0}}};function c(t,d,n,p,b,_){const r=e.resolveComponent("dt-icon"),o=e.resolveComponent("dt-button");return n.updateAvailable?(e.openBlock(),e.createBlock(o,e.mergeProps({key:0,importance:"outlined",size:"xs","icon-position":"right",class:"settings-menu-button-update","aria-label":n.ariaLabel},t.$attrs),{icon:e.withCtx(()=>[e.createVNode(r,{name:"more-vertical",size:"300"})]),default:e.withCtx(()=>[e.renderSlot(t.$slots,"default",{},void 0,!0)]),_:3},16,["aria-label"])):(e.openBlock(),e.createBlock(o,e.mergeProps({key:1,importance:"clear",kind:"inverted",class:"settings-menu-button","aria-label":n.ariaLabel},t.$attrs),{icon:e.withCtx(()=>[e.createVNode(r,{name:"more-vertical",size:"300"})]),_:1},16,["aria-label"]))}const l=a._(s,[["render",c],["__scopeId","data-v-b0dfa8b3"]]);exports.DtRecipeSettingsMenuButton=l;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lib_button = require("./button.cjs");
+const vue = require("vue");
+const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
+const lib_icon = require("./icon.cjs");
+require("../common/utils.cjs");
+require("../common/constants.cjs");
+require("../chunks/link_constants-Huj7D_hm.js");
+require("@dialpad/dialtone-icons/vue3");
+require("../chunks/icon_constants-QYpmdE0R.js");
+require("@dialpad/dialtone-icons/icons.json");
+const _sfc_main = {
+  name: "DtRecipeSettingsMenuButton",
+  components: {
+    DtButton: lib_button.DtButton,
+    DtIcon: lib_icon.DtIcon
+  },
+  inheritAttrs: false,
+  props: {
+    /**
+     * Determines whether the button should display the update state
+     * default is false
+     * @values true, false
+     */
+    updateAvailable: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Aria label
+     */
+    ariaLabel: {
+      type: String,
+      required: true
+    }
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon = vue.resolveComponent("dt-icon");
+  const _component_dt_button = vue.resolveComponent("dt-button");
+  return $props.updateAvailable ? (vue.openBlock(), vue.createBlock(_component_dt_button, vue.mergeProps({
+    key: 0,
+    importance: "outlined",
+    size: "xs",
+    "icon-position": "right",
+    class: "settings-menu-button-update",
+    "aria-label": $props.ariaLabel
+  }, _ctx.$attrs), {
+    icon: vue.withCtx(() => [
+      vue.createVNode(_component_dt_icon, {
+        name: "more-vertical",
+        size: "300"
+      })
+    ]),
+    default: vue.withCtx(() => [
+      vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
+    ]),
+    _: 3
+  }, 16, ["aria-label"])) : (vue.openBlock(), vue.createBlock(_component_dt_button, vue.mergeProps({
+    key: 1,
+    importance: "clear",
+    kind: "inverted",
+    class: "settings-menu-button",
+    "aria-label": $props.ariaLabel
+  }, _ctx.$attrs), {
+    icon: vue.withCtx(() => [
+      vue.createVNode(_component_dt_icon, {
+        name: "more-vertical",
+        size: "300"
+      })
+    ]),
+    _: 1
+  }, 16, ["aria-label"]));
+}
+const settings_menu_button = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-b0dfa8b3"]]);
+exports.DtRecipeSettingsMenuButton = settings_menu_button;
 //# sourceMappingURL=settings-menu-button.cjs.map

package/dist/lib/settings-menu-button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"settings-menu-button.cjs","sources":["../../recipes/header/settings_menu_button/settings_menu_button.vue"],"sourcesContent":["<template>\n  <dt-button\n    v-if=\"updateAvailable\"\n    importance=\"outlined\"\n    size=\"xs\"\n    icon-position=\"right\"\n    class=\"settings-menu-button-update\"\n    :aria-label=\"ariaLabel\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n    <template #icon>\n      <dt-icon\n        name=\"more-vertical\"\n        size=\"300\"\n      />\n    </template>\n  </dt-button>\n  <dt-button\n    v-else\n    importance=\"clear\"\n    kind=\"inverted\"\n    class=\"settings-menu-button\"\n    :aria-label=\"ariaLabel\"\n    v-bind=\"$attrs\"\n  >\n    <template #icon>\n      <dt-icon\n        name=\"more-vertical\"\n        size=\"300\"\n      />\n    </template>\n  </dt-button>\n</template>\n\n<script>\nimport DtButton from '@/components/button/button.vue';\nimport { DtIcon } from '@/components/icon';\n\nexport default {\n  name: 'DtRecipeSettingsMenuButton',\n\n  components: {\n    DtButton,\n    DtIcon,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Determines whether the button should display the update state\n     * default is false\n     * @values true, false\n     */\n    updateAvailable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Aria label\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n};\n</script>\n\n<style scoped lang=\"less\">\n.settings-menu-button {\n  padding: var(--dt-space-0);\n  border-radius: var(--dt-size-550);\n  height: var(--dt-size-600);\n  width: var(--dt-size-550);\n  color: var(--dt-theme-topbar-button-color-foreground);\n  background-color: var(--dt-theme-topbar-button-color-background);\n\n  &:hover {\n    background-color: var(--dt-theme-topbar-button-color-background-hover);\n    color: var(--dt-theme-topbar-button-color-foreground-hover);\n  }\n\n  &:active {\n    background-color: var(--dt-theme-topbar-button-color-background-active);\n  }\n}\n\n.settings-menu-button-update {\n  background-color: hsla(var(--dt-color-blue-200-hsl) / 25%);\n  color: var(--dt-color-blue-500);\n  border-color: hsla(var(--dt-color-blue-200-hsl) / 25%);\n  border-radius: var(--dt-size-radius-pill);\n  height: var(--dt-size-600);\n\n  &:hover {\n    background-color: hsla(var(--dt-color-blue-200-hsl) / 50%);\n    color: var(--dt-theme-topbar-button-color-foreground-hover);\n  }\n}\n</style>\n"],"names":["_sfc_main","DtButton","DtIcon","$props","_openBlock","_createBlock","_component_dt_button","_mergeProps","_ctx","_createVNode","_component_dt_icon","_renderSlot"],"mappings":"8bAuCA,MAAKA,EAAU,CACb,KAAM,6BAEN,WAAY,CACV,SAAAC,EAAQ,SACR,OAAAC,EAAM,MACP,EAED,aAAc,GAEd,MAAO,CAML,gBAAiB,CACf,KAAM,QACN,QAAS,EACV,EAKD,UAAW,CACT,KAAM,OACN,SAAU,EACX,CACF,CAEH,yGAnEUC,EAAe,iBADvBC,EAAAA,YAAAC,EAAAA,YAgBYC,EAhBZC,aAgBY,OAdV,WAAW,WACX,KAAK,KACL,gBAAc,QACd,MAAM,8BACL,aAAYJ,EAAS,WACdK,EAAM,MAAA,EAAA,CAGH,eACT,IAGE,CAHFC,EAAAA,YAGEC,EAAA,CAFA,KAAK,gBACL,KAAK,4BAJT,IAAQ,CAARC,EAAQ,WAAAH,EAAA,OAAA,UAAA,CAAA,EAAA,OAAA,EAAA,8BAQVJ,EAAAA,YAAAC,EAAAA,YAcYC,EAdZC,aAcY,OAZV,WAAW,QACX,KAAK,WACL,MAAM,uBACL,aAAYJ,EAAS,WACdK,EAAM,MAAA,EAAA,CAEH,eACT,IAGE,CAHFC,EAAAA,YAGEC,EAAA,CAFA,KAAK,gBACL,KAAK"}
+{"version":3,"file":"settings-menu-button.cjs","sources":["../../recipes/header/settings_menu_button/settings_menu_button.vue"],"sourcesContent":["<template>\n  <dt-button\n    v-if=\"updateAvailable\"\n    importance=\"outlined\"\n    size=\"xs\"\n    icon-position=\"right\"\n    class=\"settings-menu-button-update\"\n    :aria-label=\"ariaLabel\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n    <template #icon>\n      <dt-icon\n        name=\"more-vertical\"\n        size=\"300\"\n      />\n    </template>\n  </dt-button>\n  <dt-button\n    v-else\n    importance=\"clear\"\n    kind=\"inverted\"\n    class=\"settings-menu-button\"\n    :aria-label=\"ariaLabel\"\n    v-bind=\"$attrs\"\n  >\n    <template #icon>\n      <dt-icon\n        name=\"more-vertical\"\n        size=\"300\"\n      />\n    </template>\n  </dt-button>\n</template>\n\n<script>\nimport DtButton from '@/components/button/button.vue';\nimport { DtIcon } from '@/components/icon';\n\nexport default {\n  name: 'DtRecipeSettingsMenuButton',\n\n  components: {\n    DtButton,\n    DtIcon,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Determines whether the button should display the update state\n     * default is false\n     * @values true, false\n     */\n    updateAvailable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Aria label\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n};\n</script>\n\n<style scoped lang=\"less\">\n.settings-menu-button {\n  padding: var(--dt-space-0);\n  border-radius: var(--dt-size-550);\n  height: var(--dt-size-600);\n  width: var(--dt-size-550);\n  color: var(--dt-theme-topbar-button-color-foreground);\n  background-color: var(--dt-theme-topbar-button-color-background);\n\n  &:hover {\n    background-color: var(--dt-theme-topbar-button-color-background-hover);\n    color: var(--dt-theme-topbar-button-color-foreground-hover);\n  }\n\n  &:active {\n    background-color: var(--dt-theme-topbar-button-color-background-active);\n  }\n}\n\n.settings-menu-button-update {\n  background-color: hsla(var(--dt-color-blue-200-hsl) / 25%);\n  color: var(--dt-color-blue-500);\n  border-color: hsla(var(--dt-color-blue-200-hsl) / 25%);\n  border-radius: var(--dt-size-radius-pill);\n  height: var(--dt-size-600);\n\n  &:hover {\n    background-color: hsla(var(--dt-color-blue-200-hsl) / 50%);\n    color: var(--dt-theme-topbar-button-color-foreground-hover);\n  }\n}\n</style>\n"],"names":["DtButton","DtIcon","_openBlock","_createBlock","_mergeProps","_createVNode","_renderSlot"],"mappings":";;;;;;;;;;;;AAuCA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,UAAAA,WAAQ;AAAA,IACR,QAAAC,SAAM;AAAA,EACP;AAAA,EAED,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAML,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,EACF;AAEH;;;;SAnEU,OAAe,mBADvBC,IAAAA,aAAAC,IAAAA,YAgBY,sBAhBZC,eAgBY;AAAA;IAdV,YAAW;AAAA,IACX,MAAK;AAAA,IACL,iBAAc;AAAA,IACd,OAAM;AAAA,IACL,cAAY,OAAS;AAAA,KACd,KAAM,MAAA,GAAA;AAAA,IAGH,kBACT,MAGE;AAAA,MAHFC,IAAAA,YAGE,oBAAA;AAAA,QAFA,MAAK;AAAA,QACL,MAAK;AAAA;;yBAJT,MAAQ;AAAA,MAARC,IAAQ,WAAA,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA;;6BAQVJ,IAAAA,aAAAC,IAAAA,YAcY,sBAdZC,eAcY;AAAA;IAZV,YAAW;AAAA,IACX,MAAK;AAAA,IACL,OAAM;AAAA,IACL,cAAY,OAAS;AAAA,KACd,KAAM,MAAA,GAAA;AAAA,IAEH,kBACT,MAGE;AAAA,MAHFC,IAAAA,YAGE,oBAAA;AAAA,QAFA,MAAK;AAAA,QACL,MAAK;AAAA;;;;;;;"}