{"version":3,"file":"DEEJXk5p.js","sources":["../../../../node_modules/@smenaspace/ui-layer/components/dialog/Dialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { DialogSize } from './types'\n\ntype Props = {\n  modelValue: boolean\n  maxWidth?: number | null\n  padding?: string | null\n  size?: DialogSize\n  class?: string\n  persistent?: boolean\n  fixed?: boolean\n  autofocus?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  maxWidth: 620,\n  padding: null,\n  size: 'sm',\n  class: '',\n  autofocus: true,\n})\n\nconst emit = defineEmits(['update:modelValue'])\n\nconst dialogContainerElement = ref<HTMLDivElement | null>(null)\n\nconst componentClasses = computed(() => {\n  const classes = ['app-dialog', `app-dialog--size-${props.size}`]\n\n  if (props.class) classes.push(props.class)\n\n  if (props.fixed) classes.push('app-dialog--fixed')\n\n  return classes\n})\n\nconst componentStyles = computed(() => {\n  return props.maxWidth ? { maxWidth: `${props.maxWidth}px` } : {}\n})\n\nconst contentStyles = computed(() => {\n  return props.padding ? { padding: `${props.padding}px` } : {}\n})\n\nconst onClose = () => {\n  if (props.persistent) return\n\n  emit('update:modelValue', false)\n}\n\nconst onEscapeKeyUp = (event: KeyboardEvent) => {\n  if (event?.key !== 'Escape') return\n\n  onClose()\n}\n\nconst setActiveState = () => {\n  scrollLock()\n\n  if (!props.autofocus) return\n\n  setTimeout(() => {\n    dialogContainerElement.value?.focus()\n  }, 300)\n}\n\nwatch(\n  () => props.modelValue,\n  (isActive) => {\n    if (isActive) return setActiveState()\n\n    scrollUnlock()\n  },\n)\n\nonMounted(() => {\n  window.addEventListener('keyup', onEscapeKeyUp)\n})\n\nonBeforeUnmount(() => {\n  window.removeEventListener('keyup', onEscapeKeyUp)\n\n  if (props.modelValue) scrollUnlock()\n})\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <transition name=\"ui-fade\">\n      <div\n        v-if=\"modelValue\"\n        class=\"app-dialog-overlay ui-dialog-overlay\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n      >\n        <div\n          ref=\"dialogContainerElement\"\n          class=\"app-dialog-overlay__container\"\n          tabindex=\"0\"\n          @mousedown.self=\"onClose\"\n        >\n          <div :class=\"componentClasses\" :style=\"componentStyles\">\n            <the-button\n              v-if=\"!persistent\"\n              variant=\"transparent\"\n              icon=\"close-bigger\"\n              size=\"sm\"\n              radius=\"lg\"\n              class=\"app-dialog__close\"\n              aria-label=\"Закрыть диалоговое окно\"\n              @click=\"onClose\"\n            />\n\n            <div class=\"app-dialog__content\" :style=\"contentStyles\">\n              <slot />\n            </div>\n          </div>\n        </div>\n      </div>\n    </transition>\n  </Teleport>\n</template>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/ui-layer/styles/mixins';\n\n.app-dialog-overlay {\n  &__container {\n    display: flex;\n    align-items: flex-start;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    padding: 20px 0;\n    overflow: auto;\n    @include invisible-scroll-bar();\n    outline: none;\n\n    @include media('>=tablet') {\n      padding: 20px;\n    }\n  }\n}\n\n.app-dialog {\n  position: relative;\n  width: calc(100% - 25px);\n  margin: auto;\n  background-color: var(--ui-white);\n  border-radius: var(--dialog-radius);\n  outline: none;\n\n  @include media('>=desktop-mini') {\n    width: 100%;\n  }\n\n  &__close {\n    position: absolute !important;\n    top: 8px;\n    right: 8px;\n    z-index: 10;\n    color: var(--ui-text-primary);\n\n    @include media('>=desktop-mini') {\n      top: 12px;\n      right: 12px;\n    }\n  }\n\n  &__content {\n    padding: var(--dialog-padding);\n  }\n\n  &--size-sm {\n    --dialog-radius: 16px;\n    --dialog-padding: 32px 24px 24px;\n\n    @include media('>=desktop-mini') {\n      --dialog-radius: 10px;\n      --dialog-padding: 52px 30px 32px;\n    }\n  }\n\n  &--size-md {\n    --dialog-radius: 10px;\n    --dialog-padding: 56px 16px 40px;\n\n    @include media('>=desktop-mini') {\n      --dialog-padding: 52px 30px 40px;\n    }\n  }\n\n  &--fixed {\n    height: 100%;\n    overflow: hidden;\n\n    .app-dialog__content {\n      height: 100%;\n      overflow-y: auto;\n    }\n  }\n}\n</style>\n"],"names":["props","__props","emit","__emit","dialogContainerElement","ref","componentClasses","computed","classes","componentStyles","contentStyles","onClose","onEscapeKeyUp","event","setActiveState","scrollLock","_a","watch","isActive","scrollUnlock","onMounted","onBeforeUnmount"],"mappings":";;04BAcA,MAAMA,EAAQC,EAQRC,EAAOC,EAEPC,EAAyBC,EAA2B,IAAI,EAExDC,EAAmBC,EAAS,IAAM,CACtC,MAAMC,EAAU,CAAC,aAAc,oBAAoBR,EAAM,IAAI,EAAE,EAE/D,OAAIA,EAAM,OAAeQ,EAAA,KAAKR,EAAM,KAAK,EAErCA,EAAM,OAAeQ,EAAA,KAAK,mBAAmB,EAE1CA,CAAA,CACR,EAEKC,EAAkBF,EAAS,IACxBP,EAAM,SAAW,CAAE,SAAU,GAAGA,EAAM,QAAQ,IAAK,EAAI,EAC/D,EAEKU,EAAgBH,EAAS,IACtBP,EAAM,QAAU,CAAE,QAAS,GAAGA,EAAM,OAAO,IAAK,EAAI,EAC5D,EAEKW,EAAU,IAAM,CAChBX,EAAM,YAEVE,EAAK,oBAAqB,EAAK,CAAA,EAG3BU,EAAiBC,GAAyB,EAC1CA,GAAA,YAAAA,EAAO,OAAQ,UAEXF,GAAA,EAGJG,EAAiB,IAAM,CAChBC,IAENf,EAAM,WAEX,WAAW,IAAM,QACfgB,EAAAZ,EAAuB,QAAvB,MAAAY,EAA8B,SAC7B,GAAG,CAAA,EAGR,OAAAC,EACE,IAAMjB,EAAM,WACXkB,GAAa,CACR,GAAAA,SAAiBJ,IAERK,GACf,CAAA,EAGFC,EAAU,IAAM,CACP,OAAA,iBAAiB,QAASR,CAAa,CAAA,CAC/C,EAEDS,EAAgB,IAAM,CACb,OAAA,oBAAoB,QAAST,CAAa,EAE7CZ,EAAM,YAAyBmB,GAAA,CACpC","debug_id":"5b29234a-3399-5d47-b65e-0061f91667f8"}