@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
1 lines • 3.77 kB
Source Map (JSON)
{"version":3,"file":"input-group.cjs","names":[],"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=\"hasSlotContent($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';\nimport { hasSlotContent } from '@/common/utils';\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 compatConfig: { MODE: 3 },\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 data () {\n return {\n internalValue: this.value,\n hasSlotContent,\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: {\n immediate: true,\n handler (newInternalValue) {\n this.provideObj.value = newInternalValue;\n },\n },\n },\n\n methods: {\n getMessageKey (type, index) {\n return `input-group-message-${type}-${index}-${this.id}`;\n },\n },\n};\n</script>\n"],"mappings":"+WAuCA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,eAEN,WAAY,CAAE,qBAAA,EAAA,QAAsB,CAEpC,OAAQ,CAAC,EAAA,gBAAgB,CAEzB,MAAO,CAIL,YAAa,CACX,KAAM,OACN,QAAS,cACV,CAKD,kBAAmB,CACjB,KAAM,OACN,QAAS,qBACV,CAKD,oBAAqB,CACnB,KAAM,OACN,QAAS,uBACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,cAAe,KAAK,MACpB,eAAA,EAAA,eACD,EAGH,MAAO,CACL,MAAO,EAAU,CACf,KAAK,cAAgB,GAQvB,cAAe,CACb,UAAW,GACX,QAAS,EAAkB,CACzB,KAAK,WAAW,MAAQ,GAE3B,CACF,CAED,QAAS,CACP,cAAe,EAAM,EAAO,CAC1B,MAAO,uBAAuB,EAAK,GAAG,EAAM,GAAG,KAAK,MAEvD,CACF,6JA9EY,WAAA,CAvBT,MAAM,0BACL,UAAS,EAAA,cAGF,EAAA,eAAe,EAAA,OAAO,OAAM,EAAK,EAAA,SAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAShC,UAAA,EAAA,EAAA,YAAA,OARN,MAAK,CAAA,UAAc,EAAA,YAAW,EACvB,EAAA,iBAAgB,CACvB,UAAS,EAAA,kBAAiB,CAAA,CAAA,EAAA,EAAA,EAAA,YAKpB,EAAA,OAAA,SAAA,EAAA,KAAA,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBADF,EAAA,OAAM,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,GAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,kBAIL,EAAA,OAAA,UAAA,mBAON,GAAA,EAAA,EAAA,YAAA,CALC,sBAAqB,EAAA,kBACrB,gBAAe,EAAA,aACf,MAAO,EAAA,cACP,UAAS,EAAA,qBACF,EAAA,mBAAkB,CAAA,KAAA,GAAA,CAAA,sBAAA,gBAAA,QAAA,UAAA,CAAA"}