zwischenstand

src/components/test/dialog.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const onClick = () => {
+  console.log("click")
+}
+</script>
+
+<template>
+  <Dialog>
+    <DialogTrigger as-child>
+      <Button variant="outline" @click="onClick">
+        Edit Profile
+      </Button>
+    </DialogTrigger>
+    <DialogContent class="sm:max-w-[425px]">
+      <DialogHeader>
+        <DialogTitle>Edit profile</DialogTitle>
+        <DialogDescription>
+          Make changes to your profile here. Click save when you're done.
+        </DialogDescription>
+      </DialogHeader>
+      <div class="grid gap-4 py-4">
+        <div class="grid grid-cols-4 items-center gap-4">
+          <Label for="name" class="text-right">
+            Name
+          </Label>
+          <Input id="name" default-value="Pedro Duarte" class="col-span-3" />
+        </div>
+        <div class="grid grid-cols-4 items-center gap-4">
+          <Label for="username" class="text-right">
+            Username
+          </Label>
+          <Input id="username" default-value="@peduarte" class="col-span-3" />
+        </div>
+      </div>
+      <DialogFooter>
+        <Button type="submit">
+          Save changes
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>

src/components/vault/button/create.vue

@@ -1,42 +1,41 @@
 <template>
-  <UiDialog
-    :title="t('title')"
-    class="btn btn-primary btn-outline shadow-md md:btn-lg shrink-0 flex-1 whitespace-nowrap flex-nowrap"
-  >
-    <template #trigger>
-      <Icon name="mdi:plus" />
-      {{ t('database.create') }}
-    </template>
+  <Dialog>
+    <!-- class="btn btn-primary btn-outline shadow-md md:btn-lg shrink-0 flex-1 whitespace-nowrap flex-nowrap" -->
+    <DialogTrigger as-child>
+      <Button>
 
-    <form class="flex flex-col gap-4" @submit="onCreateAsync">
-      <UiInput
-        :check-input="check"
-        :label="t('database.label')"
-        :placeholder="t('database.placeholder')"
-        :rules="vaultDatabaseSchema.name"
-        autofocus
-        prepend-icon="mdi:safe"
-        v-model="database.name"
-      />
+        <Icon name="mdi:plus" />
+        {{ t('database.create') }}
+      </Button>
+    </DialogTrigger>
 
-      <UiInputPassword
-        :check-input="check"
-        :rules="vaultDatabaseSchema.password"
-        prepend-icon="mdi:key-outline"
-        v-model="database.password"
-      />
-    </form>
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>Edit profile</DialogTitle>
+        <DialogDescription>
+          Make changes to your profile here. Click save when you're done.
+        </DialogDescription>
+      </DialogHeader>
 
-    <template #buttons>
-      <UiButton class="btn-error" @click="onClose">
-        {{ t('abort') }}
-      </UiButton>
+      <form class="flex flex-col gap-4" @submit="onCreateAsync">
+        <Input :check-input="check" :label="t('database.label')" :placeholder="t('database.placeholder')"
+          :rules="vaultDatabaseSchema.name" autofocus prepend-icon="mdi:safe" v-model="database.name" />
 
-      <UiButton class="btn-primary" @click="onCreateAsync">
-        {{ t('create') }}
-      </UiButton>
-    </template>
-  </UiDialog>
+        <!-- <UiInputPassword :check-input="check" :rules="vaultDatabaseSchema.password" prepend-icon="mdi:key-outline"
+          v-model="database.password" /> -->
+      </form>
+
+      <DialogFooter>
+        <Button class="btn-error" @click="onClose">
+          {{ t('abort') }}
+        </Button>
+
+        <Button class="btn-primary" @click="onCreateAsync">
+          {{ t('create') }}
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
 </template>
 
 <script setup lang="ts">
@@ -44,6 +43,7 @@ import { save } from '@tauri-apps/plugin-dialog'
 import { onKeyStroke } from '@vueuse/core'
 import { useVaultStore } from '~/stores/vault'
 import { vaultDatabaseSchema } from './schema'
+import { toast } from 'vue-sonner'
 
 onKeyStroke('Enter', (e) => {
   e.preventDefault()
@@ -76,7 +76,7 @@ const initDatabase = () => {
 
 initDatabase()
 
-const { add } = useSnackbar()
+
 const { createAsync } = useVaultStore()
 
 const onCreateAsync = async () => {
@@ -121,7 +121,7 @@ const onCreateAsync = async () => {
     }
   } catch (error) {
     console.error(error)
-    add({ type: 'error', text: JSON.stringify(error) })
+    toast({ type: 'error', text: JSON.stringify(error) })
   }
 }
 
@@ -131,8 +131,7 @@ const onClose = () => {
 }
 </script>
 
-<i18n lang="json">
-{
+<i18n lang="json">{
   "de": {
     "database": {
       "label": "Vaultname",
@@ -145,7 +144,6 @@ const onClose = () => {
     "abort": "Abbrechen",
     "description": "Haex Vault für deine geheimsten Geheimnisse"
   },
-
   "en": {
     "database": {
       "label": "Vaultname",
@@ -158,5 +156,4 @@ const onClose = () => {
     "abort": "Abort",
     "description": "Haex Vault for your most secret secrets"
   }
-}
-</i18n>
+}</i18n>