@cloudron/pankow 3.1.8

package/components/Dialog.vue

@@ -0,0 +1,178 @@
+<script setup>
+
+import { ref, useTemplateRef } from 'vue';
+import Button from './Button.vue';
+import Icon from './Icon.vue';
+
+const emit = defineEmits([ 'confirm', 'reject', 'close', 'alternate' ]);
+
+const props = defineProps({
+  title: String,
+  confirmStyle: String, // success, danger, ''
+  rejectStyle: String, // success, danger, ''
+  alternateStyle: String, // success, danger, ''
+  zIndex: {
+    type: Number,
+    default: 2000
+  },
+  modal: {
+    type: Boolean,
+    default: false
+  },
+  showX: {
+    type: Boolean,
+    default: false
+  },
+  confirmBusy: {
+    type: Boolean,
+    default: false
+  },
+  confirmActive: {
+    type: Boolean,
+    default: true
+  },
+  alternateBusy: {
+    type: Boolean,
+    default: false
+  },
+  alternateActive: {
+    type: Boolean,
+    default: true
+  },
+  confirmLabel: String,
+  rejectLabel: String,
+  alternateLabel: String,
+});
+
+const visible = ref(false);
+const dialog = useTemplateRef('dialog');
+const dialogBody = useTemplateRef('dialogBody');
+
+function open() {
+  visible.value = true;
+
+  // try to focus some form elements else just the dialog
+  setTimeout(() => {
+    const focusElement = dialogBody.value.querySelector('input:not([disabled]):not([style*="display:none"]):not([style*="display: none"])') || dialog.value;
+    focusElement.focus();
+  }, 100);
+}
+
+function close() {
+  visible.value = false;
+}
+
+function onConfirm() {
+  emit('confirm');
+}
+
+function onDismiss() {
+  if (props.modal) return;
+  onReject();
+}
+
+function onReject() {
+  emit('reject');
+  onClose();
+}
+
+function onClose() {
+  visible.value = false;
+  emit('close');
+}
+
+function onAlternateAction() {
+  emit('alternate');
+}
+
+defineExpose({ open, close });
+
+</script>
+
+<template>
+  <teleport to="#app">
+    <div>
+      <Transition name="pankow-fade">
+        <div class="pankow-dialog-backdrop" @click="onDismiss" v-show="visible" :style="{ 'z-index': zIndex }"></div>
+      </Transition>
+      <Transition name="pankow-bounce-center">
+        <div ref="dialog" class="pankow-dialog" @click.stop v-show="visible" @keydown.esc="onDismiss" tabindex="0" :style="{ 'z-index': zIndex+1 }">
+          <div class="pankow-dialog-header" v-show="title">
+            {{ title }}
+            <Icon v-show="showX" icon="fa-solid fa-xmark" style="cursor: pointer;" @click="onReject"/>
+          </div>
+          <div class="pankow-dialog-body" ref="dialogBody" :class="{ 'pankow-dialog-body-no-header': !title, 'pankow-dialog-body-no-buttons': !(rejectLabel || confirmLabel) }">
+            <slot></slot>
+          </div>
+          <div class="pankow-dialog-buttons" v-if="rejectLabel || confirmLabel || alternateLabel">
+            <Button :[alternateStyle]="!!alternateStyle" @click="onAlternateAction" v-show="alternateLabel" :loading="alternateBusy" :disabled="alternateBusy || !alternateActive">{{ alternateLabel }}</Button>
+            <div style="flex-grow: 1;"></div>
+            <Button :[rejectStyle]="!!rejectStyle" @click="onReject" v-show="rejectLabel">{{ rejectLabel }}</Button>
+            <Button :[confirmStyle]="!!confirmStyle" @click="onConfirm" v-show="confirmLabel" :loading="confirmBusy" :disabled="confirmBusy || !confirmActive">{{ confirmLabel }}</Button>
+          </div>
+        </div>
+      </Transition>
+    </div>
+  </teleport>
+</template>
+
+<style>
+
+.pankow-dialog-backdrop {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  left: 0px;
+  top: 0px;
+  z-index: 2001;
+  background-color: var(--pankow-dialog-backdrop-color);
+  backdrop-filter: blur(2px);
+}
+
+.pankow-dialog {
+  position: absolute;
+  background-color: var(--pankow-dialog-background-color);
+  min-width: min(95%, 450px);
+  max-height: calc(100% - 20px);
+  max-width: calc(100% - 20px);
+  box-shadow: 0 2px 5px rgba(0,0,0,.1);
+  z-index: 2002;
+  border-radius: var(--pankow-border-radius);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  outline: none;
+}
+
+.pankow-dialog-header {
+  font-size: 20px;
+  padding: 15px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.pankow-dialog-body {
+  padding: 0 15px;
+  overflow: auto;
+}
+
+.pankow-dialog-body-no-header {
+  padding: 15px;
+  padding-bottom: 0;
+}
+
+.pankow-dialog-body-no-buttons {
+  padding-bottom: 15px;
+}
+
+.pankow-dialog-buttons {
+  display: flex;
+  gap: 6px;
+  padding: 15px;
+  text-align: right;
+}
+
+</style>