{"version":3,"file":"my-dialog.vue2.mjs","sources":["../../../../../../src/components/my/dialog/my-dialog.vue"],"sourcesContent":["<template>\n    <teleport to=\"body\">\n        <div class=\"my-dialog\"\n             :class=\"props.class\"\n             v-if=\"data.rendered\"\n             role=\"dialog\" aria-modal=\"true\" v-show=\"modelValue\">\n            <div class=\"my-dialog_wrapper display-flex-column\"\n                 ref=\"dialogRef\"\n                 tabindex=\"-1\"\n                 @keyup.esc=\"onClose\">\n                \n                <div class=\"my-dialog_content\"\n                     v-bind=\"$attrs\"\n                     :class=\"{\n                    'is-fullscreen': fullscreen\n                     }\"\n                     :style=\"style\">\n                    \n                    <div class=\"my-dialog_header display-flex\" v-if=\"showHeader\">\n                        <div v-if=\"title != null\" class=\"my-dialog_head_title\">\n                            {{ title }}\n                        </div>\n                        <div v-else class=\"my-dialog_head_slot\">\n                            <slot name=\"head\"></slot>\n                        </div>\n                        \n                        <div class=\"my-dialog_head_close display-flex\">\n                            <my-icon color=\"#666666\" size=\"20\" class=\"cursor-pointer\" @click=\"onClose\">\n                                <CloseBold />\n                            </my-icon>\n                        </div>\n                    </div>\n                    <slot></slot>\n                </div>\n            \n            </div>\n        </div>\n    </teleport>\n</template>\n\n<script setup lang=\"ts\">\n\nimport { computed, nextTick, reactive, ref, watch } from 'vue-demi';\nimport CloseBold from '@myprint/design/components/my/icon/icons/CloseBold.vue';\nimport MyIcon from '@myprint/design/components/my/icon/my-icon.vue';\n\nconst emit = defineEmits(['update:modelValue', 'close']);\n\nconst props = withDefaults(defineProps<{\n    modelValue?: boolean,\n    fullscreen?: boolean,\n    showHeader?: boolean,\n    class?: any,\n    title?: string,\n    width?: string,\n}>(), {\n    modelValue: false,\n    fullscreen: false,\n    showHeader: true,\n    class: '',\n    width: '500px'\n});\n\nconst data = reactive({\n    rendered: false\n});\nconst dialogRef = ref();\n\nconst style = computed(() => {\n    return {\n        width: props.width\n    };\n});\n\nwatch(() => props.modelValue, (_n, _o) => {\n    if (props.modelValue) {\n        data.rendered = true;\n        nextTick(() => {\n            dialogRef.value.focus();\n        });\n        document.body.classList.add('my-popup-parent--hidden');\n    } else {\n        onClose();\n        document.body.classList.remove('my-popup-parent--hidden');\n    }\n});\n\nfunction onClose() {\n    emit('update:modelValue', false);\n    emit('close');\n}\n\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,IAAA,MAAM,IAAO,GAAA,MAAA,CAAA;AAEb,IAAA,MAAM,KAAQ,GAAA,OAAA,CAAA;AAed,IAAA,MAAM,OAAO,QAAS,CAAA;AAAA,MAClB,QAAU,EAAA,KAAA;AAAA,KACb,CAAA,CAAA;AACD,IAAA,MAAM,YAAY,GAAI,EAAA,CAAA;AAEtB,IAAM,MAAA,KAAA,GAAQ,SAAS,MAAM;AACzB,MAAO,OAAA;AAAA,QACH,OAAO,KAAM,CAAA,KAAA;AAAA,OACjB,CAAA;AAAA,KACH,CAAA,CAAA;AAED,IAAA,KAAA,CAAM,MAAM,KAAA,CAAM,UAAY,EAAA,CAAC,IAAI,EAAO,KAAA;AACtC,MAAA,IAAI,MAAM,UAAY,EAAA;AAClB,QAAA,IAAA,CAAK,QAAW,GAAA,IAAA,CAAA;AAChB,QAAA,QAAA,CAAS,MAAM;AACX,UAAA,SAAA,CAAU,MAAM,KAAM,EAAA,CAAA;AAAA,SACzB,CAAA,CAAA;AACD,QAAS,QAAA,CAAA,IAAA,CAAK,SAAU,CAAA,GAAA,CAAI,yBAAyB,CAAA,CAAA;AAAA,OAClD,MAAA;AACH,QAAQ,OAAA,EAAA,CAAA;AACR,QAAS,QAAA,CAAA,IAAA,CAAK,SAAU,CAAA,MAAA,CAAO,yBAAyB,CAAA,CAAA;AAAA,OAC5D;AAAA,KACH,CAAA,CAAA;AAED,IAAA,SAAS,OAAU,GAAA;AACf,MAAA,IAAA,CAAK,qBAAqB,KAAK,CAAA,CAAA;AAC/B,MAAA,IAAA,CAAK,OAAO,CAAA,CAAA;AAAA,KAChB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}