@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
1 lines • 4.3 kB
Source Map (JSON)
{"version":3,"file":"popover-header-footer.cjs","sources":["../../../components/popover/popover_header_footer.vue"],"sourcesContent":["<template>\n <div\n data-qa=\"dt-popover-header-footer\"\n :class=\"{\n 'd-popover__header': type === 'header',\n 'd-popover__footer': type === 'footer',\n }\"\n >\n <div\n v-if=\"hasSlotContent($slots.content)\"\n data-qa=\"dt-popover-header-footer-content\"\n :class=\"[{\n 'd-popover__header__content': type === 'header',\n 'd-popover__footer__content': type === 'footer',\n }, contentClass]\"\n >\n <!-- @slot Slot for main content -->\n <slot name=\"content\" />\n </div>\n <dt-button\n v-if=\"showCloseButton\"\n ref=\"popover__close-button\"\n data-qa=\"dt-popover-close\"\n :class=\"{\n 'd-popover__header__close-button': type === 'header',\n 'd-popover__footer__close-button': type === 'footer',\n }\"\n importance=\"outlined\"\n kind=\"muted\"\n circle\n :aria-label=\"closeButtonTitle\"\n :title=\"closeButtonTitle\"\n @click=\"$emit('close')\"\n >\n <template #icon>\n <dt-icon-close\n size=\"300\"\n />\n </template>\n </dt-button>\n </div>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport { hasSlotContent, returnFirstEl } from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'PopoverHeaderFooter',\n components: {\n DtButton,\n DtIconClose,\n },\n\n props: {\n // eslint-disable-next-line vue/require-default-prop\n type: {\n type: String,\n validator: function (value) {\n return ['header', 'footer'].includes(value);\n },\n },\n\n /**\n * Additional class name for the content wrapper element.\n */\n contentClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Determines visibility for close button\n * @values true, false\n */\n showCloseButton: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Emitted when popover is closed\n *\n * @event close\n * @type { Boolean }\n */\n 'close',\n ],\n\n data () {\n return {\n hasSlotContent,\n i18n: new DialtoneLocalization(),\n };\n },\n\n computed: {\n closeButtonTitle () {\n return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n },\n },\n\n methods: {\n focusCloseButton () {\n const closeButton = returnFirstEl(this.$refs['popover__close-button']?.$el);\n closeButton?.focus();\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIconClose","value","hasSlotContent","DialtoneLocalization","closeButton","returnFirstEl","_a","_createElementBlock","_normalizeClass","$props","$data","_ctx","_renderSlot","_createCommentVNode","_createBlock","_component_dt_button","$options","_createVNode","_component_dt_icon_close"],"mappings":"6VAiDKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,sBACN,WAAY,CACV,SAAAC,EAAAA,oBACAC,EAAAA,aAGF,MAAO,CAEL,KAAM,CACJ,KAAM,OACN,UAAW,SAAUC,EAAO,CAC1B,MAAO,CAAC,SAAU,QAAQ,EAAE,SAASA,CAAK,CAC5C,GAMF,aAAc,CACZ,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,IAOX,gBAAiB,CACf,KAAM,QACN,QAAS,KAIb,MAAO,CAOL,SAGF,MAAQ,CACN,MAAO,CACL,eAAAC,EAAAA,eACA,KAAM,IAAIC,EAAAA,qBAEd,EAEA,SAAU,CACR,kBAAoB,CAClB,OAAO,KAAK,KAAK,GAAG,uBAAuB,CAC7C,GAGF,QAAS,CACP,kBAAoB,OAClB,MAAMC,EAAcC,EAAAA,eAAcC,EAAA,KAAK,MAAM,uBAAuB,IAAlC,YAAAA,EAAqC,GAAG,EAC1EF,GAAA,MAAAA,EAAa,OACf,EAEJ,6HAhHEG,EAAAA,mBAuCM,MAAA,CAtCJ,UAAQ,2BACP,MAHLC,EAAAA,eAAA,qBAGyCC,EAAA,OAAI,6BAA0CA,EAAA,OAAI,aAM/EC,EAAA,eAAeC,EAAA,OAAO,OAAO,iBADrCJ,EAAAA,mBAUM,MAAA,CAlBV,IAAA,EAUM,UAAQ,mCACP,MAXPC,EAAAA,eAAA,CAAA,8BAWuDC,EAAA,OAAI,sCAAqDA,EAAA,OAAI,UAAwBA,EAAA,YAAY,CAAA,IAMlJG,aAAuBD,EAAA,OAAA,SAAA,OAjB7BE,EAAAA,mBAAA,GAAA,EAAA,EAoBYJ,EAAA,+BADRK,EAAAA,YAoBYC,EAAA,CAvChB,IAAA,EAqBM,IAAI,wBACJ,UAAQ,mBACP,MAvBPP,EAAAA,eAAA,mCAuB2DC,EAAA,OAAI,2CAA0DA,EAAA,OAAI,WAIvH,WAAW,WACX,KAAK,QACL,OAAA,GACC,aAAYO,EAAA,iBACZ,MAAOA,EAAA,iBACP,uBAAOL,EAAA,MAAK,OAAA,KAEF,eACT,IAEE,CAFFM,EAAAA,YAEEC,EAAA,CADA,KAAK,KAAK,CAAA,IApCpB,EAAA,sCAAAL,EAAAA,mBAAA,GAAA,EAAA"}