@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
1 lines • 4.14 kB
Source Map (JSON)
{"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=\"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"],"names":["_sfc_main","DtValidationMessages","InputGroupMixin","hasSlotContent","newValue","newInternalValue","type","index","_hoisted_1","_hoisted_2","_createElementBlock","$props","$data","_ctx","_openBlock","_mergeProps","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode","_component_dt_validation_messages"],"mappings":"oVAuCKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,eAEN,WAAY,CAAA,qBAAEC,EAAAA,SAEd,OAAQ,CAACC,EAAAA,eAAe,EAExB,MAAO,CAIL,YAAa,CACX,KAAM,OACN,QAAS,eAMX,kBAAmB,CACjB,KAAM,OACN,QAAS,sBAMX,oBAAqB,CACnB,KAAM,OACN,QAAS,yBAIb,MAAQ,CACN,MAAO,CACL,cAAe,KAAK,MACpB,eAAAC,EAAAA,eAEJ,EAEA,MAAO,CACL,MAAOC,EAAU,CACf,KAAK,cAAgBA,CACvB,EAOA,cAAe,CACb,UAAW,GACX,QAASC,EAAkB,CACzB,KAAK,WAAW,MAAQA,CAC1B,IAIJ,QAAS,CACP,cAAeC,EAAMC,EAAO,CAC1B,MAAO,uBAAuBD,CAAI,IAAIC,CAAK,IAAI,KAAK,EAAE,EACxD,EAEJ,EAvGAC,EAAA,CAAA,SAAA,EAAAC,EAAA,CAAA,SAAA,oGACEC,EAAAA,mBAwBW,WAAA,CAvBT,MAAM,0BACL,UAASC,EAAA,cAGFC,EAAA,eAAeC,EAAA,OAAO,MAAM,GAAKA,EAAA,QADzCC,EAAAA,YAAAJ,EAAAA,mBAUS,SAVTK,aAUS,CAfb,IAAA,EAOO,iBAAmBF,EAAA,WAAW,GACvBA,EAAA,iBAAgB,CACvB,UAASF,EAAA,iBAAiB,CAAA,EAAA,CAG3BK,EAAAA,WAEOH,qBAFP,IAEO,CAdbI,EAAAA,gBAAAC,EAAAA,gBAaWL,EAAA,MAAM,EAAA,CAAA,GAbjB,EAAA,GAAAJ,CAAA,GAAAU,EAAAA,mBAAA,GAAA,EAAA,EAiBIH,aAAQH,EAAA,OAAA,SAAA,EACRO,EAAAA,YAMEC,EANFN,aAME,CALC,sBAAqBF,EAAA,kBACrB,gBAAeA,EAAA,aACf,MAAOA,EAAA,cACP,UAASF,EAAA,qBACFE,EAAA,kBAAkB,EAAA,KAAA,GAAA,CAAA,sBAAA,gBAAA,QAAA,SAAA,CAAA,CAvBhC,EAAA,EAAAL,CAAA"}