@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
227 lines (226 loc) • 6.96 kB
JavaScript
import l from "vue";
import { DESCRIPTION_SIZE_MODIFIERS as r, LABEL_SIZE_MODIFIERS as o } from "../../common/constants/index.js";
import { SELECT_STATE_MODIFIERS as n, SELECT_SIZE_MODIFIERS as i } from "./select-menu-constants.js";
import { getUniqueString as d, getValidationState as p } from "../../common/utils/index.js";
import { MessagesMixin as c } from "../../common/mixins/input.js";
import { optionsValidator as u } from "./select-menu-validators.js";
import { n as _ } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import f from "../validation-messages/validation-messages.js";
const m = {
name: "DtSelectMenu",
components: { DtValidationMessages: f },
mixins: [c],
inheritAttrs: !1,
props: {
/**
* Label for the select
*/
label: {
type: String,
default: ""
},
/**
* Description for the select
*/
description: {
type: String,
default: ""
},
/**
* Select Menu Options, overridden by default slot. Each option has the following structure:
* `{ value: number || string (required), label: string (required) }`
* @param {Object[]} options - Optional - A list that can be used to create a list of select menu options
* @param {number|string} options[].value - Required - The option value
* @param {string} options[].label - Required - The option Label
*/
options: {
type: Array,
default: () => [],
validator: (t) => u(t)
},
/**
* Sets the selected value of the select menu. If it does not match a value in the options array, then it will be
* 'unselected'.
*/
value: {
type: String,
default: null
},
/**
* Controls the size of the select
* @values xs, sm, md, lg, xl
*/
size: {
type: String,
default: "md",
validator: (t) => Object.keys(i).includes(t)
},
/**
* Used to customize the label container
*/
labelClass: {
type: [String, Array, Object],
default: ""
},
/**
* Used to customize the description container
*/
descriptionClass: {
type: [String, Array, Object],
default: ""
},
/**
* Used to customize the select
*/
selectClass: {
type: [String, Array, Object],
default: ""
},
/**
* Used to customize each option, should options be provided via prop
*/
optionClass: {
type: [String, Array, Object],
default: ""
},
/**
* A set of props that are passed into the label container
*/
labelChildProps: {
type: Object,
default: () => ({})
},
/**
* A set of props that are passed into the description container
*/
descriptionChildProps: {
type: Object,
default: () => ({})
},
/**
* A set of props that are passed into each option, should options be provided via prop
*/
optionChildProps: {
type: Object,
default: () => ({})
},
/**
* Disabled state of the select
* @values true, false
*/
disabled: {
type: Boolean,
default: !1
}
},
emits: [
/**
* Native input event
*
* @event input
* @type {String | Number}
*/
"input",
/**
* Native change event
*
* @event change
* @type {String | Number}
*/
"change"
],
data() {
return {
LABEL_SIZE_MODIFIERS: o,
DESCRIPTION_SIZE_MODIFIERS: r,
SELECT_SIZE_MODIFIERS: i,
SELECT_STATE_MODIFIERS: n
};
},
computed: {
selectListeners() {
return {
/* TODO
Check if any usages of this component leverage $listeners and either remove if unused or scope the removal
and migration prior to upgrading to Vue 3.x
*/
...this.$listeners,
/*
* Override input listener to as no-op. Prevents parent input listeners from being passed through onto the input
* element which will result in the hander being called twice (once on the select element and once by the
* emitted input event by the change listener).
*/
input: () => {
},
change: (t) => this.emitValue(t.target.value, t)
};
},
state() {
return p(this.formattedMessages);
},
selectKey() {
return d();
},
descriptionKey() {
return `select-${this.selectKey}-description`;
},
labelAriaDetails() {
return this.$slots.description || this.description ? this.descriptionKey : this.$attrs["aria-details"];
}
},
mounted() {
this.validateOptionsPresence();
},
beforeUpdate() {
this.validateOptionsPresence();
},
methods: {
emitValue(t, e) {
this.$emit("input", t, e), this.$emit("change", t, e);
},
getOptionKey(t) {
return `select-${this.selectKey}-option-${t}`;
},
validateOptionsPresence() {
var t;
((t = this.options) == null ? void 0 : t.length) < 1 && !this.$slots.default && l.util.warn("Options are expected to be provided via prop or slot", this);
}
}
};
var b = function() {
var e = this, s = e._self._c;
return s("div", [s("label", [e.$slots.label || e.label ? s("div", e._b({ class: [
"d-label",
e.LABEL_SIZE_MODIFIERS[e.size],
e.labelClass
], attrs: { "aria-details": e.labelAriaDetails, "data-qa": "dt-select-label" } }, "div", e.labelChildProps, !1), [e._t("label", function() {
return [e._v(e._s(e.label))];
})], 2) : e._e(), e.$slots.description || e.description ? s("div", e._b({ class: [
"d-description",
e.DESCRIPTION_SIZE_MODIFIERS[e.size],
e.descriptionClass
], attrs: { id: e.descriptionKey, "data-qa": "dt-select-description" } }, "div", e.descriptionChildProps, !1), [e._t("description", function() {
return [e._v(e._s(e.description))];
})], 2) : e._e(), s("div", { class: [
"d-select",
e.SELECT_SIZE_MODIFIERS[e.size],
e.selectClass,
{ "d-select--disabled": e.disabled }
], attrs: { "data-qa": "dt-select-wrapper" } }, [s("select", e._g(e._b({ ref: "selectElement", class: [
"d-select__input",
e.SELECT_STATE_MODIFIERS[e.state]
], attrs: { "data-qa": "dt-select", disabled: e.disabled }, domProps: { value: e.value } }, "select", e.$attrs, !1), e.selectListeners), [e._t("default", function() {
return e._l(e.options, function(a) {
return s("option", e._b({ key: e.getOptionKey(a.value), class: e.optionClass, domProps: { value: a.value } }, "option", e.optionChildProps, !1), [e._v(" " + e._s(a.label) + " ")]);
});
})], 2)])]), s("dt-validation-messages", e._b({ class: e.messagesClass, attrs: { "validation-messages": e.formattedMessages, "show-messages": e.showMessages, "data-qa": "dt-select-messages" } }, "dt-validation-messages", e.messagesChildProps, !1))], 1);
}, S = [], h = /* @__PURE__ */ _(
m,
b,
S
);
const D = h.exports;
export {
D as default
};
//# sourceMappingURL=select-menu.js.map