@dialpad/dialtone-vue/dist/lib/input-group/input-group.cjs.map

Vue component library for Dialpad's design system Dialtone

{"version":3,"file":"input-group.cjs","sources":["../../../components/input_group/input_group.vue"],"sourcesContent":["<template>\n  <fieldset\n    class=\"d-input-group__fieldset\"\n    :data-qa=\"dataQaGroup\"\n  >\n    <legend\n      v-if=\"$slots.legend || legend\"\n      :class=\"['d-label', legendClass]\"\n      v-bind=\"legendChildProps\"\n      :data-qa=\"dataQaGroupLegend\"\n    >\n      <!-- @slot slot for Input Group Legend -->\n      <slot name=\"legend\">\n        {{ legend }}\n      </slot>\n    </legend>\n    <!-- @slot slot for Input Group Components -->\n    <slot />\n    <dt-validation-messages\n      :validation-messages=\"formattedMessages\"\n      :show-messages=\"showMessages\"\n      :class=\"messagesClass\"\n      :data-qa=\"dataQaGroupMessages\"\n      v-bind=\"messagesChildProps\"\n    />\n  </fieldset>\n</template>\n\n<script>\nimport { InputGroupMixin } from '@/common/mixins/input_group';\nimport { DtValidationMessages } from '../validation_messages';\n\n/**\n * Input Groups are convenience components for a grouping of related inputs.\n * While each input within the group could be independent, the `v-model` on the group\n * provides a convenient interface for determining the current state of the group.\n * @see https://dialtone.dialpad.com/components/input_group.html\n */\nexport default {\n  name: 'DtInputGroup',\n\n  components: { DtValidationMessages },\n\n  mixins: [InputGroupMixin],\n\n  props: {\n    /**\n     * A data qa tag for the input group\n     */\n    dataQaGroup: {\n      type: String,\n      default: 'input-group',\n    },\n\n    /**\n     * A data qa tag for the input group legend\n     */\n    dataQaGroupLegend: {\n      type: String,\n      default: 'input-group-legend',\n    },\n\n    /**\n     * A data qa tag for the input group messages\n     */\n    dataQaGroupMessages: {\n      type: String,\n      default: 'input-group-messages',\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     */\n    'input',\n  ],\n\n  data () {\n    return {\n      internalValue: this.value,\n      // wrap values in object to make reactive\n      provideObj: {\n        value: this.value,\n      },\n    };\n  },\n\n  watch: {\n    value (newValue) {\n      this.internalValue = newValue;\n    },\n\n    /*\n     * watching value to support 2 way binding for slotted inputs.\n     * need this to pass value to slotted inputs if modified outside\n     * input group.\n     */\n    internalValue (newInternalValue) {\n      this.provideObj.value = newInternalValue;\n    },\n  },\n\n  methods: {\n    getMessageKey (type, index) {\n      return `input-group-message-${type}-${index}-${this.id}`;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtValidationMessages","InputGroupMixin","newValue","newInternalValue","type","index"],"mappings":"uRAsCAA,EAAA,CACA,KAAA,eAEA,WAAA,CAAA,qBAAAC,EAAAA,OAAA,EAEA,OAAA,CAAAC,EAAAA,eAAA,EAEA,MAAA,CAIA,YAAA,CACA,KAAA,OACA,QAAA,aACA,EAKA,kBAAA,CACA,KAAA,OACA,QAAA,oBACA,EAKA,oBAAA,CACA,KAAA,OACA,QAAA,sBACA,CACA,EAEA,MAAA,CAMA,OACA,EAEA,MAAA,CACA,MAAA,CACA,cAAA,KAAA,MAEA,WAAA,CACA,MAAA,KAAA,KACA,CACA,CACA,EAEA,MAAA,CACA,MAAAC,EAAA,CACA,KAAA,cAAAA,CACA,EAOA,cAAAC,EAAA,CACA,KAAA,WAAA,MAAAA,CACA,CACA,EAEA,QAAA,CACA,cAAAC,EAAAC,EAAA,CACA,MAAA,uBAAAD,CAAA,IAAAC,CAAA,IAAA,KAAA,EAAA,EACA,CACA,CACA"}