@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
297 lines (296 loc) • 6.69 kB
JavaScript
import Vue from "vue";
import { VALIDATION_MESSAGE_TYPES } from "../constants.js";
import { validationMessageValidator } from "../validators.js";
import { formatMessages } from "../utils.js";
const InputMixin = {
inheritAttrs: false,
props: {
/**
* A provided label for the input
*/
label: {
type: String,
default: ""
},
/**
* The name of the input
*/
name: {
type: String,
default: ""
},
/**
* The value of the input
* @model value
*/
value: {
type: [String, Number, Boolean, Object],
default: null
},
/**
* Describes the input
*/
description: {
type: String,
default: ""
},
/**
* Disables the input
*/
disabled: {
type: Boolean,
default: false
},
/**
* The validation state of the input
*/
validationState: {
type: String,
default: "",
validator: (validationState) => {
if (!validationState) {
return true;
}
return Object.values(VALIDATION_MESSAGE_TYPES).includes(validationState);
}
},
/**
* Used to customize the input element
*/
inputClass: {
type: [String, Array, Object],
default: ""
},
/**
* Used to customize the label container
*/
labelClass: {
type: [String, Array, Object],
default: ""
},
/**
* Used to customize the description container
*/
descriptionClass: {
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: () => ({})
}
},
data() {
return {
internalDisabled: this.disabled,
internalValidationState: this.validationState
};
},
watch: {
disabled(newDisabled) {
this.internalDisabled = newDisabled;
},
validationState(newValidationState) {
this.internalValidationState = newValidationState;
}
},
methods: {
/**
* @param {Boolean | String} hasLabelOrLabel either a boolean indicating the label exists or the label itself
* @param {String} ariaLabel the aria-label passed (null/undefined if it's not passed)
*/
validateInputLabels(hasLabelOrLabel, ariaLabel) {
if (!hasLabelOrLabel && !ariaLabel) {
Vue.util.warn(
"You must provide an aria-label when there is no label passed",
this
);
}
}
}
};
const CheckableMixin = {
model: {
prop: "checked"
},
props: {
/**
* Used to set the state of the checkable input
* @model checked
*/
checked: {
type: Boolean,
default: false
},
/**
* Indeterminate State, toggling indeterminate checkbox will uncheck
*/
indeterminate: {
type: Boolean,
default: false
},
/**
* The value of the input
*/
value: {
type: [String, Number, Boolean],
default: null
}
},
data() {
return {
internalChecked: this.checked,
internalIndeterminate: this.indeterminate
};
},
watch: {
checked(newChecked) {
this.internalChecked = newChecked;
},
indeterminate(newValue) {
this.internalIndeterminate = newValue;
}
}
};
const GroupableMixin = {
inject: {
// Object used to pass data from the group
groupContext: {
default: {}
},
// Method used to update the group value
setGroupValue: {
default: () => {
return () => {
};
}
}
},
data() {
return {
internalValue: this.value
};
},
computed: {
hasGroup() {
return Object.prototype.hasOwnProperty.call(this.groupContext, "name");
},
groupName() {
var _a;
return ((_a = this.groupContext) == null ? void 0 : _a.name) ?? "";
},
groupValue() {
var _a;
return (_a = this.groupContext) == null ? void 0 : _a.value;
},
groupDisabled() {
var _a;
return ((_a = this.groupContext) == null ? void 0 : _a.disabled) ?? false;
},
groupValidationState() {
var _a;
return ((_a = this.groupContext) == null ? void 0 : _a.validationState) ?? null;
},
internalName() {
return this.name || this.groupName;
}
},
watch: {
value(newValue) {
this.internalValue = newValue;
},
groupValue: {
immediate: true,
handler(newGroupValue) {
if (this.hasGroup) {
this.internalValue = newGroupValue;
}
}
},
groupDisabled: {
immediate: true,
handler(newGroupDisabled) {
if (this.hasGroup) {
this.internalDisabled = this.disabled || newGroupDisabled;
}
}
},
groupValidationState: {
immediate: true,
handler(newGroupValidationState) {
if (this.hasGroup) {
this.internalValidationState = newGroupValidationState || this.validationState;
}
}
}
},
created() {
var _a;
const hasGroupName = Object.prototype.hasOwnProperty.call(this.groupContext, "name");
const reactiveGroupName = (_a = this.groupContext) == null ? void 0 : _a.name;
if (!!this.name && hasGroupName && reactiveGroupName !== this.name) {
Vue.util.warn(
`Component is being used inside a Group. Did you mean to override the name prop value (${reactiveGroupName}) with (${this.name})? It is recommended to only set name at the Group level.`,
this
);
}
}
};
const MessagesMixin = {
props: {
/**
* Used to customize the validation messages component
*/
messagesClass: {
type: [String, Array, Object],
default: ""
},
/**
* A set of props that are passed into the validation messages component
*/
messagesChildProps: {
type: Object,
default: () => ({})
},
/**
* Used to hide / show the validation messages
* @values true, false
*/
showMessages: {
type: Boolean,
default: true
},
/**
* Validation messages
*/
messages: {
type: Array,
default: () => [],
validator: (messages) => {
return validationMessageValidator(messages);
}
}
},
computed: {
formattedMessages() {
return formatMessages(this.messages);
}
}
};
export {
CheckableMixin,
GroupableMixin,
InputMixin,
MessagesMixin
};
//# sourceMappingURL=input.js.map