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

Dialpad's Dialtone design system monorepo

{"version":3,"file":"input-group.cjs","names":["getUniqueString","validationMessageValidator","formatMessages","getValidationState"],"sources":["../../../common/mixins/input_group.js"],"sourcesContent":["import { warn } from 'vue';\nimport { DtValidationMessages } from '@/components/validation_messages';\nimport { validationMessageValidator } from '@/common/validators';\nimport {\n  getUniqueString,\n  formatMessages,\n  getValidationState,\n} from '@/common/utils';\n\n/**\n * This mixin provides a base provide obj and set of components, props, computed, watchers and data attributes that are\n * commonly used in our input group components.\n * @displayName Input Group Mixin\n */\nexport const InputGroupMixin = {\n  components: { DtValidationMessages },\n\n  // provide data to slotted components\n  provide () {\n    return {\n      groupContext: this.provideObj,\n      setGroupValue: this.setGroupValue,\n    };\n  },\n\n  props: {\n    /**\n     * The id of the input group\n     */\n    id: {\n      type: String,\n      default () {\n        return getUniqueString();\n      },\n    },\n\n    /**\n     * The value of the input group\n     */\n    value: {\n      type: [String, Number, Boolean, Object],\n      default: null,\n    },\n\n    /**\n     * The name of the input group\n     */\n    name: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The legend of the input group\n     */\n    legend: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Disables the input group\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Validation messages\n     */\n    messages: {\n      type: Array,\n      default: () => [],\n      validator: messages => validationMessageValidator(messages),\n    },\n\n    /**\n     * Show validation messages\n     * @values true, false\n     */\n    showMessages: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Used to customize the legend element\n     */\n    legendClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the messages container\n     */\n    messagesClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the legend element\n     */\n    legendChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * A set of props that are passed into the messages container\n     */\n    messagesChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {KeyboardEvent}\n     */\n    'input',\n  ],\n\n  data () {\n    const formattedMessages = formatMessages(this.messages);\n\n    return {\n      // wrap values in object to make reactive\n      provideObj: {\n        name: this.name,\n        disabled: this.disabled,\n        validationState: getValidationState(formattedMessages),\n      },\n    };\n  },\n\n  computed: {\n    formattedMessages () {\n      return formatMessages(this.messages);\n    },\n\n    validationState () {\n      return getValidationState(this.formattedMessages);\n    },\n  },\n\n  watch: {\n    disabled (newDisabled) {\n      this.provideObj.disabled = newDisabled;\n    },\n\n    validationState (newValidationState) {\n      this.provideObj.validationState = newValidationState;\n    },\n  },\n\n  methods: {\n    /*\n     * provided value to support 2 way binding for slotted input components.\n     * slotted input components will change this value and need to emit new value up.\n     */\n    setGroupValue (newValue) {\n      this.internalValue = newValue;\n      this.$emit('input', newValue);\n    },\n  },\n\n  mounted () {\n    if (!this.legend && !this.$slots.legend && !this.$attrs['aria-label']) {\n      warn('It is expected that an aria-label is provided when there is no legend.', this);\n    }\n  },\n};\n\nexport default {\n  InputGroupMixin,\n};\n"],"mappings":"sSAcA,IAAa,EAAkB,CAC7B,WAAY,CAAE,qBAAA,EAAA,QAAsB,CAGpC,SAAW,CACT,MAAO,CACL,aAAc,KAAK,WACnB,cAAe,KAAK,cACrB,EAGH,MAAO,CAIL,GAAI,CACF,KAAM,OACN,SAAW,CACT,OAAOA,EAAAA,iBAAiB,EAE3B,CAKD,MAAO,CACL,KAAM,CAAC,OAAQ,OAAQ,QAAS,OAAO,CACvC,QAAS,KACV,CAKD,KAAM,CACJ,KAAM,OACN,SAAU,GACX,CAKD,OAAQ,CACN,KAAM,OACN,QAAS,GACV,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAKD,SAAU,CACR,KAAM,MACN,YAAe,EAAE,CACjB,UAAW,GAAYC,EAAAA,2BAA2B,EAAS,CAC5D,CAMD,aAAc,CACZ,KAAM,QACN,QAAS,GACV,CAKD,YAAa,CACX,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,cAAe,CACb,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,iBAAkB,CAChB,KAAM,OACN,aAAgB,EAAE,EACnB,CAKD,mBAAoB,CAClB,KAAM,OACN,aAAgB,EAAE,EACnB,CACF,CAED,MAAO,CAOL,QACD,CAED,MAAQ,CACN,IAAM,EAAoBC,EAAAA,eAAe,KAAK,SAAS,CAEvD,MAAO,CAEL,WAAY,CACV,KAAM,KAAK,KACX,SAAU,KAAK,SACf,gBAAiBC,EAAAA,mBAAmB,EAAkB,CACvD,CACF,EAGH,SAAU,CACR,mBAAqB,CACnB,OAAOD,EAAAA,eAAe,KAAK,SAAS,EAGtC,iBAAmB,CACjB,OAAOC,EAAAA,mBAAmB,KAAK,kBAAkB,EAEpD,CAED,MAAO,CACL,SAAU,EAAa,CACrB,KAAK,WAAW,SAAW,GAG7B,gBAAiB,EAAoB,CACnC,KAAK,WAAW,gBAAkB,GAErC,CAED,QAAS,CAKP,cAAe,EAAU,CACvB,KAAK,cAAgB,EACrB,KAAK,MAAM,QAAS,EAAS,EAEhC,CAED,SAAW,CACL,CAAC,KAAK,QAAU,CAAC,KAAK,OAAO,QAAU,CAAC,KAAK,OAAO,gBACtD,EAAA,EAAA,MAAK,yEAA0E,KAAK,EAGzF,CAED,EAAe,CACb,kBACD"}