@dialpad/dialtone-vue 3.191.1 → 3.192.0

package/README.md

@@ -68,6 +68,41 @@ import { getEmojiData } from '@dialpad/dialtone-vue'
 const emojiData = getEmojiData();
 ```
 
+## Localization (i18n)
+
+Dialtone Vue has localization capabilities built-in. 
+It is implemented using [goblin-client-tools/i18n](https://github.com/dialpad/goblin-client-tools/tree/main/packages/i18n)
+We use [SmartLing](https://dashboard.smartling.com/) for our translation process.
+
+All the localization related files are located at [localization](./localization) folder.
+
+The original translation strings are located on `packages/dialtone-vue2/localization/*.ftl`, and symlinked to
+`packages/dialtone-vue3/localization/*.ftl` to avoid having to translate all the strings twice.
+
+Important folder contents:
+- `index.js`: Contains the main logic of the Localization. 
+- `sync-icons.js`: Syncs the icons list to the `en-US.ftl` localization strings (currently unused due to large 
+  number of icons).
+- `en-US.ftl`: List of strings to translate, written with [FTL syntax](https://projectfluent.org/fluent/guide/).
+- `*.ftl`: The rest of the FTL files are the translations for the strings in `en-US.ftl`, they got updated once the 
+  translation is ready in Smartling. 
+
+### Translation process
+
+[//]: # (TODO: Send the translations to Smartling on PR approval maybe?)
+
+The translation process is as follows:
+
+1. Add the new string(s) to `en-US.ftl`.
+2. If the component doesn't already use i18n, create an instance with `i18n = new DialtoneLocalization()`
+3. Use the string to get the translation like so `i18n.$t('STRING_NAME')`
+4. Create a PR with your changes.
+5. Once merged to staging, the new strings are sent to Smartling for translation using 
+[push translations workflow](/.github/workflows/push-translations.yml)
+6. A [translation request job](https://dashboard.smartling.com/app/accounts/3a311a57/account-jobs-automation/edit-rule/2701e7c80:eaf59e9b-aaf1-45c3-834d-c9a6d4a2eee4) is run daily on Smartling.
+7. [pull translations workflow](/.github/workflows/pull-translations.yml) runs on a daily basis.
+8. Once it detects translations that are ready, it creates a PR containing the translations.
+
 ## Contributing
 
 If you would like to contribute to Dialtone Vue the first step is to get the project running locally. Follow the below quickstart to do so.

package/dist/common/mixins/input.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("vue"),o=require("../constants/index.cjs"),u=require("../validators/index.cjs"),d=require("../utils/index.cjs"),n={inheritAttrs:!1,props:{label:{type:String,default:""},name:{type:String,default:""},value:{type:[String,Number,Boolean,Object],default:null},description:{type:String,default:""},disabled:{type:Boolean,default:!1},validationState:{type:String,default:"",validator:e=>e?Object.values(o.VALIDATION_MESSAGE_TYPES).includes(e):!0},inputClass:{type:[String,Array,Object],default:""},labelClass:{type:[String,Array,Object],default:""},descriptionClass:{type:[String,Array,Object],default:""},labelChildProps:{type:Object,default:()=>({})},descriptionChildProps:{type:Object,default:()=>({})}},data(){return{internalDisabled:this.disabled,internalValidationState:this.validationState}},watch:{disabled(e){this.internalDisabled=e},validationState(e){this.internalValidationState=e}},methods:{validateInputLabels(e,t){!e&&!t&&i.warn("You must provide an aria-label when there is no label passed",this)}}},r={props:{modelValue:{type:Boolean,default:!1},indeterminate:{type:Boolean,default:!1},value:{type:[String,Number,Boolean],default:null}},data(){return{internalChecked:this.modelValue,internalIndeterminate:this.indeterminate}},watch:{modelValue(e){this.internalChecked=e},indeterminate(e){this.internalIndeterminate=e}}},s={inject:{groupContext:{default:{}},setGroupValue:{default:()=>()=>{}}},data(){return{internalValue:this.value}},computed:{hasGroup(){return Object.prototype.hasOwnProperty.call(this.groupContext,"name")},groupName(){var e;return((e=this.groupContext)==null?void 0:e.name)??""},groupValue(){var e;return(e=this.groupContext)==null?void 0:e.value},groupDisabled(){var e;return((e=this.groupContext)==null?void 0:e.disabled)??!1},groupValidationState(){var e;return((e=this.groupContext)==null?void 0:e.validationState)??null},internalName(){return this.name||this.groupName}},watch:{value(e){this.internalValue=e},groupValue:{immediate:!0,handler(e){this.hasGroup&&(this.internalValue=e)}},groupDisabled:{immediate:!0,handler(e){this.hasGroup&&(this.internalDisabled=this.disabled||e)}},groupValidationState:{immediate:!0,handler(e){this.hasGroup&&(this.internalValidationState=e||this.validationState)}}},created(){var a;const e=Object.prototype.hasOwnProperty.call(this.groupContext,"name"),t=(a=this.groupContext)==null?void 0:a.name;this.name&&e&&t!==this.name&&i.warn(`Component is being used inside a Group. Did you mean to override the name prop value (${t}) with (${this.name})? It is recommended to only set name at the Group level.`,this)}},l={props:{messagesClass:{type:[String,Array,Object],default:""},messagesChildProps:{type:Object,default:()=>({})},showMessages:{type:Boolean,default:!0},messages:{type:Array,default:()=>[],validator:e=>u.validationMessageValidator(e)}},computed:{formattedMessages(){return d.formatMessages(this.messages)}}},p={InputMixin:n,CheckableMixin:r,GroupableMixin:s,MessagesMixin:l};exports.CheckableMixin=r;exports.GroupableMixin=s;exports.InputMixin=n;exports.MessagesMixin=l;exports.default=p;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("vue"),o=require("../constants/index.cjs"),u=require("../validators/index.cjs"),d=require("../utils/index.cjs"),n={inheritAttrs:!1,props:{label:{type:String,default:""},name:{type:String,default:""},value:{type:[String,Number,Boolean,Object],default:null},description:{type:String,default:""},disabled:{type:Boolean,default:!1},validationState:{type:String,default:"",validator:e=>e?Object.values(o.VALIDATION_MESSAGE_TYPES).includes(e):!0},inputClass:{type:[String,Array,Object],default:""},labelClass:{type:[String,Array,Object],default:""},descriptionClass:{type:[String,Array,Object],default:""},labelChildProps:{type:Object,default:()=>({})},descriptionChildProps:{type:Object,default:()=>({})},rootClass:{type:[String,Object,Array],default:""}},data(){return{internalDisabled:this.disabled,internalValidationState:this.validationState}},watch:{disabled(e){this.internalDisabled=e},validationState(e){this.internalValidationState=e}},methods:{validateInputLabels(e,t){!e&&!t&&i.warn("You must provide an aria-label when there is no label passed",this)}}},r={props:{modelValue:{type:Boolean,default:!1},indeterminate:{type:Boolean,default:!1},value:{type:[String,Number,Boolean],default:null}},data(){return{internalChecked:this.modelValue,internalIndeterminate:this.indeterminate}},watch:{modelValue(e){this.internalChecked=e},indeterminate(e){this.internalIndeterminate=e}}},s={inject:{groupContext:{default:{}},setGroupValue:{default:()=>()=>{}}},data(){return{internalValue:this.value}},computed:{hasGroup(){return Object.prototype.hasOwnProperty.call(this.groupContext,"name")},groupName(){var e;return((e=this.groupContext)==null?void 0:e.name)??""},groupValue(){var e;return(e=this.groupContext)==null?void 0:e.value},groupDisabled(){var e;return((e=this.groupContext)==null?void 0:e.disabled)??!1},groupValidationState(){var e;return((e=this.groupContext)==null?void 0:e.validationState)??null},internalName(){return this.name||this.groupName}},watch:{value(e){this.internalValue=e},groupValue:{immediate:!0,handler(e){this.hasGroup&&(this.internalValue=e)}},groupDisabled:{immediate:!0,handler(e){this.hasGroup&&(this.internalDisabled=this.disabled||e)}},groupValidationState:{immediate:!0,handler(e){this.hasGroup&&(this.internalValidationState=e||this.validationState)}}},created(){var a;const e=Object.prototype.hasOwnProperty.call(this.groupContext,"name"),t=(a=this.groupContext)==null?void 0:a.name;this.name&&e&&t!==this.name&&i.warn(`Component is being used inside a Group. Did you mean to override the name prop value (${t}) with (${this.name})? It is recommended to only set name at the Group level.`,this)}},l={props:{messagesClass:{type:[String,Array,Object],default:""},messagesChildProps:{type:Object,default:()=>({})},showMessages:{type:Boolean,default:!0},messages:{type:Array,default:()=>[],validator:e=>u.validationMessageValidator(e)}},computed:{formattedMessages(){return d.formatMessages(this.messages)}}},p={InputMixin:n,CheckableMixin:r,GroupableMixin:s,MessagesMixin:l};exports.CheckableMixin=r;exports.GroupableMixin=s;exports.InputMixin=n;exports.MessagesMixin=l;exports.default=p;
 //# sourceMappingURL=input.cjs.map

package/dist/common/mixins/input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"input.cjs","sources":["../../../common/mixins/input.js"],"sourcesContent":["import { warn } from 'vue';\nimport { VALIDATION_MESSAGE_TYPES } from '@/common/constants';\nimport { validationMessageValidator } from '@/common/validators';\nimport { formatMessages } from '@/common/utils';\n\n/**\n * This mixin provides a base set of props, watchers and data attributes that are commonly used in our input components.\n * @displayName Input Mixin\n */\nexport const InputMixin = {\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * A provided label for the input\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The name of the input\n     */\n    name: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The value of the input\n     */\n    value: {\n      type: [String, Number, Boolean, Object],\n      default: null,\n    },\n\n    /**\n     * Describes the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Disables the input\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The validation state of the input\n     */\n    validationState: {\n      type: String,\n      default: '',\n      validator: validationState => {\n        if (!validationState) {\n          return true;\n        }\n\n        return Object.values(VALIDATION_MESSAGE_TYPES).includes(validationState);\n      },\n    },\n\n    /**\n     * Used to customize the input element\n     */\n    inputClass: {\n      type: [String, Array, Object],\n      default: '',\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     * 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  data () {\n    return {\n      internalDisabled: this.disabled,\n      internalValidationState: this.validationState,\n    };\n  },\n\n  watch: {\n    disabled (newDisabled) {\n      // update internal disabled when the prop changes\n      this.internalDisabled = newDisabled;\n    },\n\n    validationState (newValidationState) {\n      // update internal validation state when the prop changes\n      this.internalValidationState = newValidationState;\n    },\n  },\n\n  methods: {\n    /**\n     * @param {Boolean | String} hasLabelOrLabel either a boolean indicating the label exists or the label itself\n     * @param {String} ariaLabel the aria-label passed (null/undefined if it's not passed)\n     */\n    validateInputLabels (hasLabelOrLabel, ariaLabel) {\n      if (!hasLabelOrLabel && !ariaLabel) {\n        warn(\n          'You must provide an aria-label when there is no label passed',\n          this,\n        );\n      }\n    },\n  },\n};\n\n/**\n * This mixin provides common logic shared amongst our checkable inputs.\n *\n * This includes the group context, checked model & prop, internal data attributes as well as a set common computed\n * properties and watchers. It also includes the group name warning logic.\n * @displayName Checkable Mixin\n */\nexport const CheckableMixin = {\n  props: {\n    /**\n     * Used to set the checked state of the checkable input\n     * @model modelValue\n     */\n    modelValue: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * Indeterminate State, toggling indeterminate checkbox will uncheck\n     */\n    indeterminate: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * The value of the input\n     */\n    value: {\n      type: [String, Number, Boolean],\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      internalChecked: this.modelValue,\n      internalIndeterminate: this.indeterminate,\n    };\n  },\n\n  watch: {\n    modelValue (newChecked) {\n      // update internal checked when the prop changes\n      this.internalChecked = newChecked;\n    },\n\n    indeterminate (newValue) {\n      this.internalIndeterminate = newValue;\n    },\n  },\n};\n\n/**\n * This mixin provides common logic shared amongst our groupable inputs.\n *\n * This includes the group context and internal data attributes as well as a set common computed\n * properties and watchers. It also includes the group name warning logic.\n * @displayName Groupable Mixin\n */\nexport const GroupableMixin = {\n  inject: {\n    // Object used to pass data from the group\n    groupContext: {\n      default: {},\n    },\n\n    // Method used to update the group value\n    setGroupValue: {\n      default: () => { return () => {}; },\n    },\n  },\n\n  data () {\n    return {\n      internalValue: this.value,\n    };\n  },\n\n  computed: {\n    hasGroup () {\n      return Object.prototype.hasOwnProperty.call(this.groupContext, 'name');\n    },\n\n    groupName () {\n      return this.groupContext?.name ?? '';\n    },\n\n    groupValue () {\n      return this.groupContext?.value;\n    },\n\n    groupDisabled () {\n      return this.groupContext?.disabled ?? false;\n    },\n\n    groupValidationState () {\n      return this.groupContext?.validationState ?? null;\n    },\n\n    internalName () {\n      return this.name || this.groupName;\n    },\n  },\n\n  watch: {\n    value (newValue) {\n      // update internal value when the prop changes\n      this.internalValue = newValue;\n    },\n\n    groupValue: {\n      immediate: true,\n      handler (newGroupValue) {\n        if (this.hasGroup) {\n          // update internal value when the group disabled changes\n          this.internalValue = newGroupValue;\n        }\n      },\n    },\n\n    groupDisabled: {\n      immediate: true,\n      handler (newGroupDisabled) {\n        if (this.hasGroup) {\n          // update internal disabled when the group disabled changes\n          this.internalDisabled = this.disabled || newGroupDisabled;\n        }\n      },\n    },\n\n    groupValidationState: {\n      immediate: true,\n      handler (newGroupValidationState) {\n        if (this.hasGroup) {\n          // update internal validation state when the group validation state changes\n          this.internalValidationState = newGroupValidationState || this.validationState;\n        }\n      },\n    },\n  },\n\n  created () {\n    const hasGroupName = Object.prototype.hasOwnProperty.call(this.groupContext, 'name');\n    const reactiveGroupName = this.groupContext?.name;\n\n    if (!!this.name && hasGroupName && reactiveGroupName !== this.name) {\n      warn(\n        'Component is being used inside a Group. Did you mean to override the name prop value ' +\n        `(${reactiveGroupName}) with (${this.name})? It is recommended to only set name at the Group level.`,\n        this,\n      );\n    }\n  },\n};\n\n/**\n * This mixin provides common logic shared amongst our validation messages inputs.\n * @displayName Messages Mixin\n */\nexport const MessagesMixin = {\n  props: {\n    /**\n     * Used to customize the validation messages component\n     */\n    messagesClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the validation messages component\n     */\n    messagesChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Used to hide / show the validation messages\n     * @values true, false\n     */\n    showMessages: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Validation messages\n     */\n    messages: {\n      type: Array,\n      default: () => [],\n      validator: messages => {\n        return validationMessageValidator(messages);\n      },\n    },\n  },\n\n  computed: {\n    formattedMessages () {\n      return formatMessages(this.messages);\n    },\n  },\n};\n\nexport default {\n  InputMixin,\n  CheckableMixin,\n  GroupableMixin,\n  MessagesMixin,\n};\n"],"names":["InputMixin","validationState","VALIDATION_MESSAGE_TYPES","newDisabled","newValidationState","hasLabelOrLabel","ariaLabel","warn","CheckableMixin","newChecked","newValue","GroupableMixin","_a","newGroupValue","newGroupDisabled","newGroupValidationState","hasGroupName","reactiveGroupName","MessagesMixin","messages","validationMessageValidator","formatMessages","input"],"mappings":"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"}
+{"version":3,"file":"input.cjs","sources":["../../../common/mixins/input.js"],"sourcesContent":["import { warn } from 'vue';\nimport { VALIDATION_MESSAGE_TYPES } from '@/common/constants';\nimport { validationMessageValidator } from '@/common/validators';\nimport { formatMessages } from '@/common/utils';\n\n/**\n * This mixin provides a base set of props, watchers and data attributes that are commonly used in our input components.\n * @displayName Input Mixin\n */\nexport const InputMixin = {\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * A provided label for the input\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The name of the input\n     */\n    name: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The value of the input\n     */\n    value: {\n      type: [String, Number, Boolean, Object],\n      default: null,\n    },\n\n    /**\n     * Describes the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Disables the input\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The validation state of the input\n     */\n    validationState: {\n      type: String,\n      default: '',\n      validator: validationState => {\n        if (!validationState) {\n          return true;\n        }\n\n        return Object.values(VALIDATION_MESSAGE_TYPES).includes(validationState);\n      },\n    },\n\n    /**\n     * Used to customize the input element\n     */\n    inputClass: {\n      type: [String, Array, Object],\n      default: '',\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     * 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     * Additional class name for the root element.\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    rootClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      internalDisabled: this.disabled,\n      internalValidationState: this.validationState,\n    };\n  },\n\n  watch: {\n    disabled (newDisabled) {\n      // update internal disabled when the prop changes\n      this.internalDisabled = newDisabled;\n    },\n\n    validationState (newValidationState) {\n      // update internal validation state when the prop changes\n      this.internalValidationState = newValidationState;\n    },\n  },\n\n  methods: {\n    /**\n     * @param {Boolean | String} hasLabelOrLabel either a boolean indicating the label exists or the label itself\n     * @param {String} ariaLabel the aria-label passed (null/undefined if it's not passed)\n     */\n    validateInputLabels (hasLabelOrLabel, ariaLabel) {\n      if (!hasLabelOrLabel && !ariaLabel) {\n        warn(\n          'You must provide an aria-label when there is no label passed',\n          this,\n        );\n      }\n    },\n  },\n};\n\n/**\n * This mixin provides common logic shared amongst our checkable inputs.\n *\n * This includes the group context, checked model & prop, internal data attributes as well as a set common computed\n * properties and watchers. It also includes the group name warning logic.\n * @displayName Checkable Mixin\n */\nexport const CheckableMixin = {\n  props: {\n    /**\n     * Used to set the checked state of the checkable input\n     * @model modelValue\n     */\n    modelValue: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * Indeterminate State, toggling indeterminate checkbox will uncheck\n     */\n    indeterminate: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * The value of the input\n     */\n    value: {\n      type: [String, Number, Boolean],\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      internalChecked: this.modelValue,\n      internalIndeterminate: this.indeterminate,\n    };\n  },\n\n  watch: {\n    modelValue (newChecked) {\n      // update internal checked when the prop changes\n      this.internalChecked = newChecked;\n    },\n\n    indeterminate (newValue) {\n      this.internalIndeterminate = newValue;\n    },\n  },\n};\n\n/**\n * This mixin provides common logic shared amongst our groupable inputs.\n *\n * This includes the group context and internal data attributes as well as a set common computed\n * properties and watchers. It also includes the group name warning logic.\n * @displayName Groupable Mixin\n */\nexport const GroupableMixin = {\n  inject: {\n    // Object used to pass data from the group\n    groupContext: {\n      default: {},\n    },\n\n    // Method used to update the group value\n    setGroupValue: {\n      default: () => { return () => {}; },\n    },\n  },\n\n  data () {\n    return {\n      internalValue: this.value,\n    };\n  },\n\n  computed: {\n    hasGroup () {\n      return Object.prototype.hasOwnProperty.call(this.groupContext, 'name');\n    },\n\n    groupName () {\n      return this.groupContext?.name ?? '';\n    },\n\n    groupValue () {\n      return this.groupContext?.value;\n    },\n\n    groupDisabled () {\n      return this.groupContext?.disabled ?? false;\n    },\n\n    groupValidationState () {\n      return this.groupContext?.validationState ?? null;\n    },\n\n    internalName () {\n      return this.name || this.groupName;\n    },\n  },\n\n  watch: {\n    value (newValue) {\n      // update internal value when the prop changes\n      this.internalValue = newValue;\n    },\n\n    groupValue: {\n      immediate: true,\n      handler (newGroupValue) {\n        if (this.hasGroup) {\n          // update internal value when the group disabled changes\n          this.internalValue = newGroupValue;\n        }\n      },\n    },\n\n    groupDisabled: {\n      immediate: true,\n      handler (newGroupDisabled) {\n        if (this.hasGroup) {\n          // update internal disabled when the group disabled changes\n          this.internalDisabled = this.disabled || newGroupDisabled;\n        }\n      },\n    },\n\n    groupValidationState: {\n      immediate: true,\n      handler (newGroupValidationState) {\n        if (this.hasGroup) {\n          // update internal validation state when the group validation state changes\n          this.internalValidationState = newGroupValidationState || this.validationState;\n        }\n      },\n    },\n  },\n\n  created () {\n    const hasGroupName = Object.prototype.hasOwnProperty.call(this.groupContext, 'name');\n    const reactiveGroupName = this.groupContext?.name;\n\n    if (!!this.name && hasGroupName && reactiveGroupName !== this.name) {\n      warn(\n        'Component is being used inside a Group. Did you mean to override the name prop value ' +\n        `(${reactiveGroupName}) with (${this.name})? It is recommended to only set name at the Group level.`,\n        this,\n      );\n    }\n  },\n};\n\n/**\n * This mixin provides common logic shared amongst our validation messages inputs.\n * @displayName Messages Mixin\n */\nexport const MessagesMixin = {\n  props: {\n    /**\n     * Used to customize the validation messages component\n     */\n    messagesClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the validation messages component\n     */\n    messagesChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Used to hide / show the validation messages\n     * @values true, false\n     */\n    showMessages: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Validation messages\n     */\n    messages: {\n      type: Array,\n      default: () => [],\n      validator: messages => {\n        return validationMessageValidator(messages);\n      },\n    },\n  },\n\n  computed: {\n    formattedMessages () {\n      return formatMessages(this.messages);\n    },\n  },\n};\n\nexport default {\n  InputMixin,\n  CheckableMixin,\n  GroupableMixin,\n  MessagesMixin,\n};\n"],"names":["InputMixin","validationState","VALIDATION_MESSAGE_TYPES","newDisabled","newValidationState","hasLabelOrLabel","ariaLabel","warn","CheckableMixin","newChecked","newValue","GroupableMixin","_a","newGroupValue","newGroupDisabled","newGroupValidationState","hasGroupName","reactiveGroupName","MessagesMixin","messages","validationMessageValidator","formatMessages","input"],"mappings":"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"}

package/dist/common/mixins/input.js

@@ -82,6 +82,15 @@ const s = {
     descriptionChildProps: {
       type: Object,
       default: () => ({})
+    },
+    /**
+     * Additional class name for the root element.
+     * Can accept all of: String, Object, and Array, i.e. has the
+     * same api as Vue's built-in handling of the class attribute.
+     */
+    rootClass: {
+      type: [String, Object, Array],
+      default: ""
     }
   },
   data() {

package/dist/common/mixins/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sources":["../../../common/mixins/input.js"],"sourcesContent":["import { warn } from 'vue';\nimport { VALIDATION_MESSAGE_TYPES } from '@/common/constants';\nimport { validationMessageValidator } from '@/common/validators';\nimport { formatMessages } from '@/common/utils';\n\n/**\n * This mixin provides a base set of props, watchers and data attributes that are commonly used in our input components.\n * @displayName Input Mixin\n */\nexport const InputMixin = {\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * A provided label for the input\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The name of the input\n     */\n    name: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The value of the input\n     */\n    value: {\n      type: [String, Number, Boolean, Object],\n      default: null,\n    },\n\n    /**\n     * Describes the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Disables the input\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The validation state of the input\n     */\n    validationState: {\n      type: String,\n      default: '',\n      validator: validationState => {\n        if (!validationState) {\n          return true;\n        }\n\n        return Object.values(VALIDATION_MESSAGE_TYPES).includes(validationState);\n      },\n    },\n\n    /**\n     * Used to customize the input element\n     */\n    inputClass: {\n      type: [String, Array, Object],\n      default: '',\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     * 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  data () {\n    return {\n      internalDisabled: this.disabled,\n      internalValidationState: this.validationState,\n    };\n  },\n\n  watch: {\n    disabled (newDisabled) {\n      // update internal disabled when the prop changes\n      this.internalDisabled = newDisabled;\n    },\n\n    validationState (newValidationState) {\n      // update internal validation state when the prop changes\n      this.internalValidationState = newValidationState;\n    },\n  },\n\n  methods: {\n    /**\n     * @param {Boolean | String} hasLabelOrLabel either a boolean indicating the label exists or the label itself\n     * @param {String} ariaLabel the aria-label passed (null/undefined if it's not passed)\n     */\n    validateInputLabels (hasLabelOrLabel, ariaLabel) {\n      if (!hasLabelOrLabel && !ariaLabel) {\n        warn(\n          'You must provide an aria-label when there is no label passed',\n          this,\n        );\n      }\n    },\n  },\n};\n\n/**\n * This mixin provides common logic shared amongst our checkable inputs.\n *\n * This includes the group context, checked model & prop, internal data attributes as well as a set common computed\n * properties and watchers. It also includes the group name warning logic.\n * @displayName Checkable Mixin\n */\nexport const CheckableMixin = {\n  props: {\n    /**\n     * Used to set the checked state of the checkable input\n     * @model modelValue\n     */\n    modelValue: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * Indeterminate State, toggling indeterminate checkbox will uncheck\n     */\n    indeterminate: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * The value of the input\n     */\n    value: {\n      type: [String, Number, Boolean],\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      internalChecked: this.modelValue,\n      internalIndeterminate: this.indeterminate,\n    };\n  },\n\n  watch: {\n    modelValue (newChecked) {\n      // update internal checked when the prop changes\n      this.internalChecked = newChecked;\n    },\n\n    indeterminate (newValue) {\n      this.internalIndeterminate = newValue;\n    },\n  },\n};\n\n/**\n * This mixin provides common logic shared amongst our groupable inputs.\n *\n * This includes the group context and internal data attributes as well as a set common computed\n * properties and watchers. It also includes the group name warning logic.\n * @displayName Groupable Mixin\n */\nexport const GroupableMixin = {\n  inject: {\n    // Object used to pass data from the group\n    groupContext: {\n      default: {},\n    },\n\n    // Method used to update the group value\n    setGroupValue: {\n      default: () => { return () => {}; },\n    },\n  },\n\n  data () {\n    return {\n      internalValue: this.value,\n    };\n  },\n\n  computed: {\n    hasGroup () {\n      return Object.prototype.hasOwnProperty.call(this.groupContext, 'name');\n    },\n\n    groupName () {\n      return this.groupContext?.name ?? '';\n    },\n\n    groupValue () {\n      return this.groupContext?.value;\n    },\n\n    groupDisabled () {\n      return this.groupContext?.disabled ?? false;\n    },\n\n    groupValidationState () {\n      return this.groupContext?.validationState ?? null;\n    },\n\n    internalName () {\n      return this.name || this.groupName;\n    },\n  },\n\n  watch: {\n    value (newValue) {\n      // update internal value when the prop changes\n      this.internalValue = newValue;\n    },\n\n    groupValue: {\n      immediate: true,\n      handler (newGroupValue) {\n        if (this.hasGroup) {\n          // update internal value when the group disabled changes\n          this.internalValue = newGroupValue;\n        }\n      },\n    },\n\n    groupDisabled: {\n      immediate: true,\n      handler (newGroupDisabled) {\n        if (this.hasGroup) {\n          // update internal disabled when the group disabled changes\n          this.internalDisabled = this.disabled || newGroupDisabled;\n        }\n      },\n    },\n\n    groupValidationState: {\n      immediate: true,\n      handler (newGroupValidationState) {\n        if (this.hasGroup) {\n          // update internal validation state when the group validation state changes\n          this.internalValidationState = newGroupValidationState || this.validationState;\n        }\n      },\n    },\n  },\n\n  created () {\n    const hasGroupName = Object.prototype.hasOwnProperty.call(this.groupContext, 'name');\n    const reactiveGroupName = this.groupContext?.name;\n\n    if (!!this.name && hasGroupName && reactiveGroupName !== this.name) {\n      warn(\n        'Component is being used inside a Group. Did you mean to override the name prop value ' +\n        `(${reactiveGroupName}) with (${this.name})? It is recommended to only set name at the Group level.`,\n        this,\n      );\n    }\n  },\n};\n\n/**\n * This mixin provides common logic shared amongst our validation messages inputs.\n * @displayName Messages Mixin\n */\nexport const MessagesMixin = {\n  props: {\n    /**\n     * Used to customize the validation messages component\n     */\n    messagesClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the validation messages component\n     */\n    messagesChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Used to hide / show the validation messages\n     * @values true, false\n     */\n    showMessages: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Validation messages\n     */\n    messages: {\n      type: Array,\n      default: () => [],\n      validator: messages => {\n        return validationMessageValidator(messages);\n      },\n    },\n  },\n\n  computed: {\n    formattedMessages () {\n      return formatMessages(this.messages);\n    },\n  },\n};\n\nexport default {\n  InputMixin,\n  CheckableMixin,\n  GroupableMixin,\n  MessagesMixin,\n};\n"],"names":["InputMixin","validationState","VALIDATION_MESSAGE_TYPES","newDisabled","newValidationState","hasLabelOrLabel","ariaLabel","warn","CheckableMixin","newChecked","newValue","GroupableMixin","_a","newGroupValue","newGroupDisabled","newGroupValidationState","hasGroupName","reactiveGroupName","MessagesMixin","messages","validationMessageValidator","formatMessages","input"],"mappings":"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"}
+{"version":3,"file":"input.js","sources":["../../../common/mixins/input.js"],"sourcesContent":["import { warn } from 'vue';\nimport { VALIDATION_MESSAGE_TYPES } from '@/common/constants';\nimport { validationMessageValidator } from '@/common/validators';\nimport { formatMessages } from '@/common/utils';\n\n/**\n * This mixin provides a base set of props, watchers and data attributes that are commonly used in our input components.\n * @displayName Input Mixin\n */\nexport const InputMixin = {\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * A provided label for the input\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The name of the input\n     */\n    name: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The value of the input\n     */\n    value: {\n      type: [String, Number, Boolean, Object],\n      default: null,\n    },\n\n    /**\n     * Describes the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Disables the input\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The validation state of the input\n     */\n    validationState: {\n      type: String,\n      default: '',\n      validator: validationState => {\n        if (!validationState) {\n          return true;\n        }\n\n        return Object.values(VALIDATION_MESSAGE_TYPES).includes(validationState);\n      },\n    },\n\n    /**\n     * Used to customize the input element\n     */\n    inputClass: {\n      type: [String, Array, Object],\n      default: '',\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     * 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     * Additional class name for the root element.\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    rootClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      internalDisabled: this.disabled,\n      internalValidationState: this.validationState,\n    };\n  },\n\n  watch: {\n    disabled (newDisabled) {\n      // update internal disabled when the prop changes\n      this.internalDisabled = newDisabled;\n    },\n\n    validationState (newValidationState) {\n      // update internal validation state when the prop changes\n      this.internalValidationState = newValidationState;\n    },\n  },\n\n  methods: {\n    /**\n     * @param {Boolean | String} hasLabelOrLabel either a boolean indicating the label exists or the label itself\n     * @param {String} ariaLabel the aria-label passed (null/undefined if it's not passed)\n     */\n    validateInputLabels (hasLabelOrLabel, ariaLabel) {\n      if (!hasLabelOrLabel && !ariaLabel) {\n        warn(\n          'You must provide an aria-label when there is no label passed',\n          this,\n        );\n      }\n    },\n  },\n};\n\n/**\n * This mixin provides common logic shared amongst our checkable inputs.\n *\n * This includes the group context, checked model & prop, internal data attributes as well as a set common computed\n * properties and watchers. It also includes the group name warning logic.\n * @displayName Checkable Mixin\n */\nexport const CheckableMixin = {\n  props: {\n    /**\n     * Used to set the checked state of the checkable input\n     * @model modelValue\n     */\n    modelValue: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * Indeterminate State, toggling indeterminate checkbox will uncheck\n     */\n    indeterminate: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * The value of the input\n     */\n    value: {\n      type: [String, Number, Boolean],\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      internalChecked: this.modelValue,\n      internalIndeterminate: this.indeterminate,\n    };\n  },\n\n  watch: {\n    modelValue (newChecked) {\n      // update internal checked when the prop changes\n      this.internalChecked = newChecked;\n    },\n\n    indeterminate (newValue) {\n      this.internalIndeterminate = newValue;\n    },\n  },\n};\n\n/**\n * This mixin provides common logic shared amongst our groupable inputs.\n *\n * This includes the group context and internal data attributes as well as a set common computed\n * properties and watchers. It also includes the group name warning logic.\n * @displayName Groupable Mixin\n */\nexport const GroupableMixin = {\n  inject: {\n    // Object used to pass data from the group\n    groupContext: {\n      default: {},\n    },\n\n    // Method used to update the group value\n    setGroupValue: {\n      default: () => { return () => {}; },\n    },\n  },\n\n  data () {\n    return {\n      internalValue: this.value,\n    };\n  },\n\n  computed: {\n    hasGroup () {\n      return Object.prototype.hasOwnProperty.call(this.groupContext, 'name');\n    },\n\n    groupName () {\n      return this.groupContext?.name ?? '';\n    },\n\n    groupValue () {\n      return this.groupContext?.value;\n    },\n\n    groupDisabled () {\n      return this.groupContext?.disabled ?? false;\n    },\n\n    groupValidationState () {\n      return this.groupContext?.validationState ?? null;\n    },\n\n    internalName () {\n      return this.name || this.groupName;\n    },\n  },\n\n  watch: {\n    value (newValue) {\n      // update internal value when the prop changes\n      this.internalValue = newValue;\n    },\n\n    groupValue: {\n      immediate: true,\n      handler (newGroupValue) {\n        if (this.hasGroup) {\n          // update internal value when the group disabled changes\n          this.internalValue = newGroupValue;\n        }\n      },\n    },\n\n    groupDisabled: {\n      immediate: true,\n      handler (newGroupDisabled) {\n        if (this.hasGroup) {\n          // update internal disabled when the group disabled changes\n          this.internalDisabled = this.disabled || newGroupDisabled;\n        }\n      },\n    },\n\n    groupValidationState: {\n      immediate: true,\n      handler (newGroupValidationState) {\n        if (this.hasGroup) {\n          // update internal validation state when the group validation state changes\n          this.internalValidationState = newGroupValidationState || this.validationState;\n        }\n      },\n    },\n  },\n\n  created () {\n    const hasGroupName = Object.prototype.hasOwnProperty.call(this.groupContext, 'name');\n    const reactiveGroupName = this.groupContext?.name;\n\n    if (!!this.name && hasGroupName && reactiveGroupName !== this.name) {\n      warn(\n        'Component is being used inside a Group. Did you mean to override the name prop value ' +\n        `(${reactiveGroupName}) with (${this.name})? It is recommended to only set name at the Group level.`,\n        this,\n      );\n    }\n  },\n};\n\n/**\n * This mixin provides common logic shared amongst our validation messages inputs.\n * @displayName Messages Mixin\n */\nexport const MessagesMixin = {\n  props: {\n    /**\n     * Used to customize the validation messages component\n     */\n    messagesClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the validation messages component\n     */\n    messagesChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Used to hide / show the validation messages\n     * @values true, false\n     */\n    showMessages: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Validation messages\n     */\n    messages: {\n      type: Array,\n      default: () => [],\n      validator: messages => {\n        return validationMessageValidator(messages);\n      },\n    },\n  },\n\n  computed: {\n    formattedMessages () {\n      return formatMessages(this.messages);\n    },\n  },\n};\n\nexport default {\n  InputMixin,\n  CheckableMixin,\n  GroupableMixin,\n  MessagesMixin,\n};\n"],"names":["InputMixin","validationState","VALIDATION_MESSAGE_TYPES","newDisabled","newValidationState","hasLabelOrLabel","ariaLabel","warn","CheckableMixin","newChecked","newValue","GroupableMixin","_a","newGroupValue","newGroupDisabled","newGroupValidationState","hasGroupName","reactiveGroupName","MessagesMixin","messages","validationMessageValidator","formatMessages","input"],"mappings":"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"}