@dialpad/dialtone/dist/vue3/common/mixins/input.cjs.map

Dialpad's Dialtone design system monorepo

{"version":3,"file":"input.cjs","names":["VALIDATION_MESSAGE_TYPES","validationMessageValidator","formatMessages"],"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"],"mappings":"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"}