switch to nuxt ui

src/components/ui/dialog/confirm.vue

@@ -1,61 +1,73 @@
 <template>
-  <UiDialog
-    :title
-    @close="onAbort"
+  <UModal
     v-model:open="open"
+    :title
+    :description
+    :fullscreen="isSmallScreen"
   >
-    <template #trigger>
-      <slot name="trigger" />
-    </template>
+    <slot>
+      <!-- <UiButton
+        color="primary"
+        variant="outline"
+        icon="mdi:menu"
+        :ui="{
+          base: '',
+        }"
+      /> -->
+    </slot>
 
     <template #title>
       <slot name="title" />
     </template>
 
-    <slot />
-
-    <template #buttons>
-      <slot name="buttons">
-        <UiButton
-          class="btn-error btn-outline w-full sm:w-auto"
-          @click="onAbort"
-        >
-          <Icon :name="abortIcon || 'mdi:close'" />
-          {{ abortLabel ?? t('abort') }}
-        </UiButton>
-        <UiButton
-          class="btn-primary w-full sm:w-auto"
-          @click="onConfirm"
-        >
-          <Icon :name="confirmIcon || 'mdi:check'" />
-          {{ confirmLabel ?? t('confirm') }}
-        </UiButton>
-      </slot>
+    <template #body>
+      <slot name="body" />
     </template>
-  </UiDialog>
+
+    <template #footer>
+      <div class="flex flex-col sm:flex-row gap-4 justify-end w-full">
+        <UiButton
+          :icon="abortIcon || 'mdi:close'"
+          :label="abortLabel || t('abort')"
+          block
+          color="error"
+          variant="outline"
+          @click="open = false"
+        />
+        <UiButton
+          :icon="confirmIcon || 'mdi:check'"
+          :label="confirmLabel || t('confirm')"
+          block
+          color="primary"
+          varaint="solid"
+          @click="$emit('confirm')"
+        />
+      </div>
+    </template>
+  </UModal>
 </template>
 
 <script setup lang="ts">
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
+
 defineProps<{
-  confirmLabel?: string
-  abortLabel?: string
-  title?: string
   abortIcon?: string
+  abortLabel?: string
   confirmIcon?: string
+  confirmLabel?: string
+  description?: string
+  title?: string
 }>()
 
 const open = defineModel<boolean>('open', { default: false })
 
 const { t } = useI18n()
-const emit = defineEmits(['confirm', 'abort'])
+defineEmits(['confirm'])
 
-const onAbort = () => {
-  emit('abort')
-}
+const breakpoints = useBreakpoints(breakpointsTailwind)
 
-const onConfirm = () => {
-  emit('confirm')
-}
+// "smAndDown" gilt für sm, xs usw.
+const isSmallScreen = breakpoints.smaller('sm')
 </script>
 
 <i18n lang="yaml">

src/components/ui/dialog/index.vue

@@ -1,116 +0,0 @@
-<template>
-  <button
-    v-if="$slots.trigger || label"
-    v-bind="$attrs"
-    type="button"
-    aria-haspopup="dialog"
-    aria-expanded="false"
-    :aria-label="label"
-    @click="$emit('open')"
-  >
-    <slot name="trigger">
-      {{ label }}
-    </slot>
-  </button>
-
-  <div class="hidden">
-    <Teleport to="body">
-      <div
-        :id
-        ref="modalRef"
-        class="overlay modal overlay-open:opacity-100 overlay-open:duration-300 hidden modal-middle p-0 xs:p-2 --prevent-on-load-init pointer-events-auto max-w-none"
-        role="dialog"
-        tabindex="-1"
-      >
-        <div
-          class="overlay-animation-target overlay-open:duration-300 overlay-open:opacity-100 transition-all ease-out modal-dialog"
-        >
-          <div class="modal-content justify-between">
-            <div class="modal-header py-0 sm:py-4">
-              <div
-                v-if="title || $slots.title"
-                class="modal-title py-4 break-all"
-              >
-                <slot name="title">
-                  {{ title }}
-                </slot>
-              </div>
-
-              <button
-                type="button"
-                class="btn btn-text btn-circle btn-sm absolute end-3 top-3"
-                :aria-label="t('close')"
-                tabindex="1"
-                @click="open = false"
-              >
-                <Icon
-                  name="mdi:close"
-                  size="18"
-                />
-              </button>
-            </div>
-
-            <div class="modal-body text-sm sm:text-base grow mt-0 pt-0">
-              <slot />
-            </div>
-
-            <div class="modal-footer flex-col sm:flex-row">
-              <slot name="buttons" />
-            </div>
-          </div>
-        </div>
-      </div>
-    </Teleport>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { HSOverlay } from 'flyonui/flyonui'
-const { currentTheme } = storeToRefs(useUiStore())
-
-defineProps<{ title?: string; label?: string }>()
-
-const emit = defineEmits(['open', 'close'])
-
-const id = useId()
-
-const open = defineModel<boolean>('open', { default: false })
-
-const { t } = useI18n()
-
-const modalRef = useTemplateRef('modalRef')
-
-defineExpose({ modalRef })
-
-const modal = ref<HSOverlay>()
-
-watch(open, async () => {
-  if (!modal.value) return
-
-  if (open.value) {
-    await modal.value.open()
-  } else {
-    await modal.value.close(true)
-    emit('close')
-  }
-})
-
-onMounted(async () => {
-  if (!modalRef.value) return
-
-  modal.value = new window.HSOverlay(modalRef.value)
-
-  modal.value.isLayoutAffect = true
-  modal.value.on('close', () => {
-    open.value = false
-  })
-})
-</script>
-
-<i18n lang="yaml">
-de:
-  close: Schließen
-
-en:
-  close: Close
-</i18n>

src/components/ui/dialog/passwordGenerator.vue

@@ -1,55 +0,0 @@
-<template>
-  <UiDialogConfirm
-    :confirm-label="t('apply')"
-    :title="t('title')"
-    @abort="open = false"
-    @click="open = true"
-    class="btn btn-square btn-accent btn-outline"
-    v-model:open="open"
-  >
-    <template #trigger>
-      <Icon name="mdi:dice" />
-    </template>
-
-    <form class="flex flex-col gap-4">
-      <UiInputPassword
-        v-model="newPassword"
-        prepend-icon="mdi:key-outline"
-        with-copy-button
-      >
-        <template #append>
-          <UiButton class="btn-square btn-accent btn-outline">
-            <Icon name="mdi:refresh" />
-          </UiButton>
-        </template>
-      </UiInputPassword>
-    </form>
-  </UiDialogConfirm>
-</template>
-
-<script setup lang="ts">
-const open = defineModel<boolean>()
-
-const { t } = useI18n()
-
-const { password } = defineProps<{
-  autofocus?: boolean
-  checkInput?: boolean
-  label?: string
-  placeholder?: string
-  withCopyButton?: boolean
-  password: string | null
-}>()
-
-const newPassword = computed(() => password)
-</script>
-
-<i18n lang="yaml">
-de:
-  title: Passwortgenerator
-  apply: Übernehmen
-
-en:
-  title: Passwordgenerator
-  apply: Apply
-</i18n>