summaryrefslogtreecommitdiff
path: root/packages/client/src/components/MkModalWindow.vue
diff options
context:
space:
mode:
Diffstat (limited to 'packages/client/src/components/MkModalWindow.vue')
-rw-r--r--packages/client/src/components/MkModalWindow.vue146
1 files changed, 0 insertions, 146 deletions
diff --git a/packages/client/src/components/MkModalWindow.vue b/packages/client/src/components/MkModalWindow.vue
deleted file mode 100644
index d977ca6e9c..0000000000
--- a/packages/client/src/components/MkModalWindow.vue
+++ /dev/null
@@ -1,146 +0,0 @@
-<template>
-<MkModal ref="modal" :prefer-type="'dialog'" @click="onBgClick" @closed="$emit('closed')">
- <div ref="rootEl" class="ebkgoccj _narrow_" :style="{ width: `${width}px`, height: scroll ? (height ? `${height}px` : null) : (height ? `min(${height}px, 100%)` : '100%') }" @keydown="onKeydown">
- <div ref="headerEl" class="header">
- <button v-if="withOkButton" class="_button" @click="$emit('close')"><i class="ti ti-x"></i></button>
- <span class="title">
- <slot name="header"></slot>
- </span>
- <button v-if="!withOkButton" class="_button" @click="$emit('close')"><i class="ti ti-x"></i></button>
- <button v-if="withOkButton" class="_button" :disabled="okButtonDisabled" @click="$emit('ok')"><i class="ti ti-check"></i></button>
- </div>
- <div class="body">
- <slot :width="bodyWidth" :height="bodyHeight"></slot>
- </div>
- </div>
-</MkModal>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted } from 'vue';
-import MkModal from './MkModal.vue';
-
-const props = withDefaults(defineProps<{
- withOkButton: boolean;
- okButtonDisabled: boolean;
- width: number;
- height: number | null;
- scroll: boolean;
-}>(), {
- withOkButton: false,
- okButtonDisabled: false,
- width: 400,
- height: null,
- scroll: true,
-});
-
-const emit = defineEmits<{
- (event: 'click'): void;
- (event: 'close'): void;
- (event: 'closed'): void;
- (event: 'ok'): void;
-}>();
-
-let modal = $ref<InstanceType<typeof MkModal>>();
-let rootEl = $ref<HTMLElement>();
-let headerEl = $ref<HTMLElement>();
-let bodyWidth = $ref(0);
-let bodyHeight = $ref(0);
-
-const close = () => {
- modal.close();
-};
-
-const onBgClick = () => {
- emit('click');
-};
-
-const onKeydown = (evt) => {
- if (evt.which === 27) { // Esc
- evt.preventDefault();
- evt.stopPropagation();
- close();
- }
-};
-
-const ro = new ResizeObserver((entries, observer) => {
- bodyWidth = rootEl.offsetWidth;
- bodyHeight = rootEl.offsetHeight - headerEl.offsetHeight;
-});
-
-onMounted(() => {
- bodyWidth = rootEl.offsetWidth;
- bodyHeight = rootEl.offsetHeight - headerEl.offsetHeight;
- ro.observe(rootEl);
-});
-
-onUnmounted(() => {
- ro.disconnect();
-});
-
-defineExpose({
- close,
-});
-</script>
-
-<style lang="scss" scoped>
-.ebkgoccj {
- overflow: hidden;
- display: flex;
- flex-direction: column;
- contain: content;
- border-radius: var(--radius);
-
- --root-margin: 24px;
-
- @media (max-width: 500px) {
- --root-margin: 16px;
- }
-
- > .header {
- $height: 46px;
- $height-narrow: 42px;
- display: flex;
- flex-shrink: 0;
- background: var(--windowHeader);
- -webkit-backdrop-filter: var(--blur, blur(15px));
- backdrop-filter: var(--blur, blur(15px));
-
- > button {
- height: $height;
- width: $height;
-
- @media (max-width: 500px) {
- height: $height-narrow;
- width: $height-narrow;
- }
- }
-
- > .title {
- flex: 1;
- line-height: $height;
- padding-left: 32px;
- font-weight: bold;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- pointer-events: none;
-
- @media (max-width: 500px) {
- line-height: $height-narrow;
- padding-left: 16px;
- }
- }
-
- > button + .title {
- padding-left: 0;
- }
- }
-
- > .body {
- flex: 1;
- overflow: auto;
- background: var(--panel);
- }
-}
-</style>