mirror of
https://github.com/haexhub/haex-hub.git
synced 2025-12-16 22:20:51 +01:00
zwischenstand
This commit is contained in:
@ -1,32 +1,38 @@
|
||||
import tailwindcss from "@tailwindcss/vite";
|
||||
|
||||
import tailwindcss from '@tailwindcss/vite'
|
||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
export default defineNuxtConfig({
|
||||
extends: [
|
||||
"github:haexhub/haex-base-ui"
|
||||
],
|
||||
|
||||
compatibilityDate: "2024-11-01",
|
||||
extends: ['github:haexhub/haex-base-ui', { install: true }],
|
||||
|
||||
compatibilityDate: '2024-11-01',
|
||||
|
||||
imports: {
|
||||
dirs: ["composables/**", "stores/**", "components/**", "pages/**", "types/**"],
|
||||
dirs: [
|
||||
'composables/**',
|
||||
'stores/**',
|
||||
'components/**',
|
||||
'pages/**',
|
||||
'types/**',
|
||||
],
|
||||
},
|
||||
|
||||
css: ['./assets/css/tailwind.css'],
|
||||
|
||||
icon: {
|
||||
provider: 'server',
|
||||
mode: "svg",
|
||||
mode: 'svg',
|
||||
clientBundle: {
|
||||
icons: ["solar:global-outline", "gg:extension", "hugeicons:corporate"],
|
||||
icons: ['solar:global-outline', 'gg:extension', 'hugeicons:corporate'],
|
||||
scan: true,
|
||||
includeCustomCollections: true,
|
||||
},
|
||||
serverBundle: { collections: ["mdi", "line-md", "solar", "gg", "emojione"] },
|
||||
serverBundle: {
|
||||
collections: ['mdi', 'line-md', 'solar', 'gg', 'emojione'],
|
||||
},
|
||||
|
||||
customCollections: [
|
||||
{
|
||||
prefix: 'my-icon',
|
||||
dir: './src/assets/icons/'
|
||||
dir: './src/assets/icons/',
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -52,12 +58,10 @@ export default defineNuxtConfig({
|
||||
},
|
||||
}, */
|
||||
|
||||
|
||||
|
||||
runtimeConfig: {
|
||||
public: {
|
||||
haexVault: {
|
||||
lastVaultFileName: "lastVaults.json",
|
||||
lastVaultFileName: 'lastVaults.json',
|
||||
//defaultDatabase: 'src/database/default.db',
|
||||
},
|
||||
},
|
||||
@ -65,11 +69,11 @@ export default defineNuxtConfig({
|
||||
|
||||
devtools: { enabled: true },
|
||||
|
||||
srcDir: "./src",
|
||||
srcDir: './src',
|
||||
// Enable SSG
|
||||
ssr: false,
|
||||
// Enables the development server to be discoverable by other devices when running on iOS physical devices
|
||||
devServer: { host: process.env.TAURI_DEV_HOST || "localhost", port: 3003 },
|
||||
devServer: { host: process.env.TAURI_DEV_HOST || 'localhost', port: 3003 },
|
||||
|
||||
vite: {
|
||||
plugins: [tailwindcss()],
|
||||
@ -78,7 +82,7 @@ export default defineNuxtConfig({
|
||||
// Enable environment variables
|
||||
// Additional environment variables can be found at
|
||||
// https://v2.tauri.app/reference/environment-variables/
|
||||
envPrefix: ["VITE_", "TAURI_"],
|
||||
envPrefix: ['VITE_', 'TAURI_'],
|
||||
server: {
|
||||
// Tauri requires a consistent port
|
||||
strictPort: true,
|
||||
|
||||
28
package.json
28
package.json
@ -16,8 +16,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@libsql/client": "^0.15.6",
|
||||
"@nuxt/icon": "1.11.0",
|
||||
"@nuxt/image": "1.10.0",
|
||||
"@nuxt/icon": "^1.13.0",
|
||||
"@nuxtjs/i18n": "^9.5.4",
|
||||
"@pinia/nuxt": "^0.11.0",
|
||||
"@tailwindcss/vite": "^4.1.7",
|
||||
@ -31,29 +30,28 @@
|
||||
"@tauri-apps/plugin-store": "^2.2.0",
|
||||
"@vueuse/core": "^13.2.0",
|
||||
"@vueuse/nuxt": "^13.2.0",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"drizzle-orm": "^0.43.1",
|
||||
"flyonui": "^2.1.0",
|
||||
"lucide-vue-next": "^0.511.0",
|
||||
"nuxt": "^3.17.3",
|
||||
"nuxt-icons": "3.2.1",
|
||||
"nuxt-snackbar": "1.3.0",
|
||||
"nuxt-svgo": "4.1.2",
|
||||
"nuxt-svgo-loader": "0.5.0",
|
||||
"nuxt-zod-i18n": "^1.11.5",
|
||||
"reka-ui": "^2.2.1",
|
||||
"shadcn-nuxt": "^2.1.0",
|
||||
"tailwind-merge": "^3.3.0",
|
||||
"tailwindcss": "^4.1.7",
|
||||
"tw-animate-css": "^1.3.0",
|
||||
"vue": "^3.5.14",
|
||||
"vue-router": "^4.5.1",
|
||||
"zod": "^3.25.4"
|
||||
"vue-sonner": "^2.0.0",
|
||||
"zod": "^3.25.20"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@egoist/tailwindcss-icons": "^1.9.0",
|
||||
"@iconify/json": "^2.2.339",
|
||||
"@iconify/json": "^2.2.340",
|
||||
"@iconify/tailwind4": "^1.0.6",
|
||||
"@nuxtjs/color-mode": "^3.5.2",
|
||||
"@tauri-apps/cli": "^2.5.0",
|
||||
"@vitejs/plugin-vue": "^5.2.4",
|
||||
"drizzle-kit": "^0.31.1",
|
||||
"typescript": "~5.8.3",
|
||||
"vite": "^6.3.5",
|
||||
"vue-tsc": "^2.2.10"
|
||||
"drizzle-kit": "^0.31.1"
|
||||
},
|
||||
"packageManager": "pnpm@10.10.0+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39",
|
||||
"pnpm": {
|
||||
|
||||
1370
pnpm-lock.yaml
generated
1370
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
12
src/app.vue
12
src/app.vue
@ -1,14 +1,16 @@
|
||||
<template>
|
||||
<div>
|
||||
<NuxtLayout :data-theme="currentTheme.value">
|
||||
<div class=" ">
|
||||
<BaseDialog />
|
||||
<!-- <NuxtLayout>
|
||||
<NuxtPage />
|
||||
<NuxtSnackbar />
|
||||
</NuxtLayout>
|
||||
<Toaster />
|
||||
</NuxtLayout> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { currentTheme } = storeToRefs(useUiStore())
|
||||
//import 'vue-sonner/style.css'
|
||||
//const { currentTheme } = storeToRefs(useUiStore())
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
228
src/assets/css/tailwind.css
Normal file
228
src/assets/css/tailwind.css
Normal file
@ -0,0 +1,228 @@
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@plugin "@iconify/tailwind4";
|
||||
|
||||
@theme inline {
|
||||
|
||||
--color-background: var(--background);
|
||||
|
||||
--color-foreground: var(--foreground);
|
||||
|
||||
--color-card: var(--card);
|
||||
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
|
||||
--color-popover: var(--popover);
|
||||
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
|
||||
--color-primary: var(--primary);
|
||||
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
|
||||
--color-secondary: var(--secondary);
|
||||
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
|
||||
--color-muted: var(--muted);
|
||||
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
|
||||
--color-accent: var(--accent);
|
||||
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
|
||||
--color-destructive: var(--destructive);
|
||||
|
||||
--color-destructive-foreground: var(--destructive-foreground);
|
||||
|
||||
--color-border: var(--border);
|
||||
|
||||
--color-input: var(--input);
|
||||
|
||||
--color-ring: var(--ring);
|
||||
|
||||
--color-chart-1: var(--chart-1);
|
||||
|
||||
--color-chart-2: var(--chart-2);
|
||||
|
||||
--color-chart-3: var(--chart-3);
|
||||
|
||||
--color-chart-4: var(--chart-4);
|
||||
|
||||
--color-chart-5: var(--chart-5);
|
||||
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
|
||||
--radius-lg: var(--radius);
|
||||
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
|
||||
--color-sidebar: var(--sidebar);
|
||||
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
}
|
||||
|
||||
:root {
|
||||
|
||||
--background: oklch(1 0 0);
|
||||
|
||||
--foreground: oklch(0.129 0.042 264.695);
|
||||
|
||||
--card: oklch(1 0 0);
|
||||
|
||||
--card-foreground: oklch(0.129 0.042 264.695);
|
||||
|
||||
--popover: oklch(1 0 0);
|
||||
|
||||
--popover-foreground: oklch(0.129 0.042 264.695);
|
||||
|
||||
--primary: oklch(0.208 0.042 265.755);
|
||||
|
||||
--primary-foreground: oklch(0.984 0.003 247.858);
|
||||
|
||||
--secondary: oklch(0.968 0.007 247.896);
|
||||
|
||||
--secondary-foreground: oklch(0.208 0.042 265.755);
|
||||
|
||||
--muted: oklch(0.968 0.007 247.896);
|
||||
|
||||
--muted-foreground: oklch(0.554 0.046 257.417);
|
||||
|
||||
--accent: oklch(0.968 0.007 247.896);
|
||||
|
||||
--accent-foreground: oklch(0.208 0.042 265.755);
|
||||
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
|
||||
--destructive-foreground: oklch(0.577 0.245 27.325);
|
||||
|
||||
--border: oklch(0.929 0.013 255.508);
|
||||
|
||||
--input: oklch(0.929 0.013 255.508);
|
||||
|
||||
--ring: oklch(0.704 0.04 256.788);
|
||||
|
||||
--chart-1: oklch(0.646 0.222 41.116);
|
||||
|
||||
--chart-2: oklch(0.6 0.118 184.704);
|
||||
|
||||
--chart-3: oklch(0.398 0.07 227.392);
|
||||
|
||||
--chart-4: oklch(0.828 0.189 84.429);
|
||||
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
|
||||
--radius: 0.625rem;
|
||||
|
||||
--sidebar: oklch(0.984 0.003 247.858);
|
||||
|
||||
--sidebar-foreground: oklch(0.129 0.042 264.695);
|
||||
|
||||
--sidebar-primary: oklch(0.208 0.042 265.755);
|
||||
|
||||
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
|
||||
|
||||
--sidebar-accent: oklch(0.968 0.007 247.896);
|
||||
|
||||
--sidebar-accent-foreground: oklch(0.208 0.042 265.755);
|
||||
|
||||
--sidebar-border: oklch(0.929 0.013 255.508);
|
||||
|
||||
--sidebar-ring: oklch(0.704 0.04 256.788);
|
||||
}
|
||||
|
||||
.dark {
|
||||
|
||||
--background: oklch(0.129 0.042 264.695);
|
||||
|
||||
--foreground: oklch(0.984 0.003 247.858);
|
||||
|
||||
--card: oklch(0.129 0.042 264.695);
|
||||
|
||||
--card-foreground: oklch(0.984 0.003 247.858);
|
||||
|
||||
--popover: oklch(0.129 0.042 264.695);
|
||||
|
||||
--popover-foreground: oklch(0.984 0.003 247.858);
|
||||
|
||||
--primary: oklch(0.984 0.003 247.858);
|
||||
|
||||
--primary-foreground: oklch(0.208 0.042 265.755);
|
||||
|
||||
--secondary: oklch(0.279 0.041 260.031);
|
||||
|
||||
--secondary-foreground: oklch(0.984 0.003 247.858);
|
||||
|
||||
--muted: oklch(0.279 0.041 260.031);
|
||||
|
||||
--muted-foreground: oklch(0.704 0.04 256.788);
|
||||
|
||||
--accent: oklch(0.279 0.041 260.031);
|
||||
|
||||
--accent-foreground: oklch(0.984 0.003 247.858);
|
||||
|
||||
--destructive: oklch(0.396 0.141 25.723);
|
||||
|
||||
--destructive-foreground: oklch(0.637 0.237 25.331);
|
||||
|
||||
--border: oklch(0.279 0.041 260.031);
|
||||
|
||||
--input: oklch(0.279 0.041 260.031);
|
||||
|
||||
--ring: oklch(0.446 0.043 257.281);
|
||||
|
||||
--chart-1: oklch(0.488 0.243 264.376);
|
||||
|
||||
--chart-2: oklch(0.696 0.17 162.48);
|
||||
|
||||
--chart-3: oklch(0.769 0.188 70.08);
|
||||
|
||||
--chart-4: oklch(0.627 0.265 303.9);
|
||||
|
||||
--chart-5: oklch(0.645 0.246 16.439);
|
||||
|
||||
--sidebar: oklch(0.208 0.042 265.755);
|
||||
|
||||
--sidebar-foreground: oklch(0.984 0.003 247.858);
|
||||
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
|
||||
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
|
||||
|
||||
--sidebar-accent: oklch(0.279 0.041 260.031);
|
||||
|
||||
--sidebar-accent-foreground: oklch(0.984 0.003 247.858);
|
||||
|
||||
--sidebar-border: oklch(0.279 0.041 260.031);
|
||||
|
||||
--sidebar-ring: oklch(0.446 0.043 257.281);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
42
src/components/test/dialog.vue
Normal file
42
src/components/test/dialog.vue
Normal file
@ -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>
|
||||
@ -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>
|
||||
<Dialog>
|
||||
<!-- class="btn btn-primary btn-outline shadow-md md:btn-lg shrink-0 flex-1 whitespace-nowrap flex-nowrap" -->
|
||||
<DialogTrigger as-child>
|
||||
<Button>
|
||||
|
||||
<Icon name="mdi:plus" />
|
||||
{{ t('database.create') }}
|
||||
</template>
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit profile</DialogTitle>
|
||||
<DialogDescription>
|
||||
Make changes to your profile here. Click save when you're done.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<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"
|
||||
/>
|
||||
<Input :check-input="check" :label="t('database.label')" :placeholder="t('database.placeholder')"
|
||||
:rules="vaultDatabaseSchema.name" autofocus prepend-icon="mdi:safe" v-model="database.name" />
|
||||
|
||||
<UiInputPassword
|
||||
:check-input="check"
|
||||
:rules="vaultDatabaseSchema.password"
|
||||
prepend-icon="mdi:key-outline"
|
||||
v-model="database.password"
|
||||
/>
|
||||
<!-- <UiInputPassword :check-input="check" :rules="vaultDatabaseSchema.password" prepend-icon="mdi:key-outline"
|
||||
v-model="database.password" /> -->
|
||||
</form>
|
||||
|
||||
<template #buttons>
|
||||
<UiButton class="btn-error" @click="onClose">
|
||||
<DialogFooter>
|
||||
<Button class="btn-error" @click="onClose">
|
||||
{{ t('abort') }}
|
||||
</UiButton>
|
||||
</Button>
|
||||
|
||||
<UiButton class="btn-primary" @click="onCreateAsync">
|
||||
<Button class="btn-primary" @click="onCreateAsync">
|
||||
{{ t('create') }}
|
||||
</UiButton>
|
||||
</template>
|
||||
</UiDialog>
|
||||
</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>
|
||||
|
||||
@ -1,34 +1,19 @@
|
||||
<template>
|
||||
<div class="w-full h-full flex flex-col min-w-min relative overflow-hidden">
|
||||
<nav
|
||||
class="navbar bg-base-100 rounded-b max-sm:shadow border-b border-base-content/25 sm:z-20 relative px-2"
|
||||
>
|
||||
<div class="w-full h-full flex flex-col min-w-min ">
|
||||
<nav class="navbar bg-base-100 rounded-b max-sm:shadow border-b border-base-content/25 sm:z-20 relative px-2">
|
||||
<UiTooltip :tooltip="isVisible ? t('sidebar.close') : t('sidebar.show')">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-text btn-square me-2 z-50"
|
||||
aria-haspopup="dialog"
|
||||
aria-expanded="false"
|
||||
aria-controls="sidebar"
|
||||
@click="toogleSidebar"
|
||||
ref="sidebarToogleRef"
|
||||
>
|
||||
<Icon
|
||||
:name="
|
||||
isVisible
|
||||
<button type="button" class="btn btn-text btn-square me-2 z-50" aria-haspopup="dialog" aria-expanded="false"
|
||||
aria-controls="sidebar" @click="toogleSidebar" ref="sidebarToogleRef">
|
||||
<Icon :name="isVisible
|
||||
? 'tabler:layout-sidebar-filled'
|
||||
: 'tabler:layout-sidebar'
|
||||
"
|
||||
size="28"
|
||||
/>
|
||||
" size="28" />
|
||||
</button>
|
||||
</UiTooltip>
|
||||
|
||||
<div class="flex flex-1 items-center">
|
||||
<NuxtLinkLocale
|
||||
class="link text-base-content link-neutral text-xl font-semibold no-underline"
|
||||
:to="{ name: 'vaultOverview' }"
|
||||
>
|
||||
<NuxtLinkLocale class="link text-base-content link-neutral text-xl font-semibold no-underline"
|
||||
:to="{ name: 'vaultOverview' }">
|
||||
<UiTextGradient class="text-nowrap">{{
|
||||
currentVaultName
|
||||
}}</UiTextGradient>
|
||||
@ -36,53 +21,30 @@
|
||||
</div>
|
||||
|
||||
<div class="navbar-end flex items-center gap-4 me-4">
|
||||
<div
|
||||
class="dropdown relative inline-flex [--auto-close:inside] [--offset:8] [--placement:bottom-end]"
|
||||
>
|
||||
<button
|
||||
id="dropdown-scrollable"
|
||||
type="button"
|
||||
<div class="dropdown relative inline-flex [--auto-close:inside] [--offset:8] [--placement:bottom-end]">
|
||||
<button id="dropdown-scrollable" type="button"
|
||||
class="dropdown-toggle btn btn-text btn-circle dropdown-open:bg-base-content/10 size-10"
|
||||
aria-haspopup="menu"
|
||||
aria-expanded="false"
|
||||
aria-label="Dropdown"
|
||||
>
|
||||
aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
|
||||
<div class="indicator">
|
||||
<span
|
||||
v-show="notifications.length"
|
||||
class="indicator-item bg-error size-2 rounded-full text-sm"
|
||||
></span>
|
||||
<span
|
||||
class="icon-[tabler--bell] text-base-content size-[1.375rem]"
|
||||
></span>
|
||||
<span v-show="notifications.length" class="indicator-item bg-error size-2 rounded-full text-sm"></span>
|
||||
<span class="icon-[tabler--bell] text-base-content size-[1.375rem]"></span>
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
class="dropdown-menu dropdown-open:opacity-100 hidden"
|
||||
role="menu"
|
||||
aria-orientation="vertical"
|
||||
aria-labelledby="dropdown-scrollable"
|
||||
>
|
||||
<div class="dropdown-menu dropdown-open:opacity-100 hidden" role="menu" aria-orientation="vertical"
|
||||
aria-labelledby="dropdown-scrollable">
|
||||
<div class="dropdown-header justify-center">
|
||||
<h6 class="text-base-content text-base">
|
||||
{{ t('notifications.label') }}
|
||||
</h6>
|
||||
</div>
|
||||
<div
|
||||
class="vertical-scrollbar horizontal-scrollbar rounded-scrollbar text-base-content/80 max-h-56 overflow-auto max-md:max-w-60"
|
||||
>
|
||||
class="vertical-scrollbar horizontal-scrollbar rounded-scrollbar text-base-content/80 max-h-56 overflow-auto max-md:max-w-60">
|
||||
<div class="dropdown-item" v-for="notification in notifications">
|
||||
<div class="avatar">
|
||||
<div class="w-10 rounded-full">
|
||||
<img
|
||||
v-if="notification.image"
|
||||
:src="notification.image"
|
||||
:alt="notification.alt ?? 'notification avatar'"
|
||||
/>
|
||||
<Icon
|
||||
v-else-if="notification.icon"
|
||||
:name="notification.icon"
|
||||
/>
|
||||
<img v-if="notification.image" :src="notification.image"
|
||||
:alt="notification.alt ?? 'notification avatar'" />
|
||||
<Icon v-else-if="notification.icon" :name="notification.icon" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-60">
|
||||
@ -107,26 +69,12 @@
|
||||
</nav>
|
||||
|
||||
<div class="flex h-full overflow-hidden">
|
||||
<aside
|
||||
id="sidebar"
|
||||
class="sm:shadow-none transition-all h-full overflow-hidden border-r border-base-300"
|
||||
:class="[!isVisible ? 'w-0' : 'w-16']"
|
||||
role="dialog"
|
||||
tabindex="-1"
|
||||
>
|
||||
<aside id="sidebar" class="sm:shadow-none transition-all h-full overflow-hidden border-r border-base-300"
|
||||
:class="[!isVisible ? 'w-0' : 'w-16']" role="dialog" tabindex="-1">
|
||||
<div class="drawer-body h-full">
|
||||
<ul class="menu p-0 h-full rounded-none">
|
||||
<HaexSidebarLink
|
||||
v-bind="item"
|
||||
v-for="item in menu"
|
||||
:key="item.id"
|
||||
/>
|
||||
<HaexSidebarLink
|
||||
v-for="item in extensionLinks"
|
||||
:key="item.id"
|
||||
v-bind="item"
|
||||
icon-type="svg"
|
||||
/>
|
||||
<HaexSidebarLink v-bind="item" v-for="item in menu" :key="item.id" />
|
||||
<HaexSidebarLink v-for="item in extensionLinks" :key="item.id" v-bind="item" icon-type="svg" />
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@ -1,89 +1,33 @@
|
||||
<template>
|
||||
<div class="items-center justify-center min-h-full flex w-full relative">
|
||||
<div class="fixed top-2 right-2">
|
||||
<UiDropdownLocale @select="setLocale" />
|
||||
<!-- <UiDropdownLocale @select="setLocale" /> -->
|
||||
<ThemeSwitcher />
|
||||
|
||||
</div>
|
||||
<div class="flex flex-col justify-center items-center gap-5 max-w-3xl">
|
||||
<img
|
||||
src="/logo.svg"
|
||||
class="bg-primary p-3 size-16 rounded-full"
|
||||
alt="HaexVault Logo"
|
||||
/>
|
||||
<img src="/logo.svg" class="bg-primary p-3 size-16 rounded-full" alt="HaexVault Logo" />
|
||||
|
||||
<span
|
||||
class="flex flex-wrap font-bold text-pretty text-xl gap-2 justify-center"
|
||||
>
|
||||
<span class="flex flex-wrap font-bold text-pretty text-xl gap-2 justify-center">
|
||||
<p class="whitespace-nowrap">
|
||||
{{ t('welcome') }}
|
||||
</p>
|
||||
<UiTextGradient>Haex Hub</UiTextGradient>
|
||||
<!-- <UiTextGradient>Haex Hub</UiTextGradient> -->
|
||||
</span>
|
||||
|
||||
<div class="flex flex-col md:flex-row gap-4 w-full h-24 md:h-auto">
|
||||
<VaultButtonCreate />
|
||||
<TestDialog />
|
||||
<BaseDialog />
|
||||
<!--
|
||||
|
||||
<VaultButtonOpen
|
||||
v-model:isOpen="passwordPromptOpen"
|
||||
:path="vaultPath"
|
||||
/>
|
||||
<UiDialogTest />
|
||||
/> -->
|
||||
|
||||
|
||||
<UiDialog> aaaaaa </UiDialog>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
aria-haspopup="dialog"
|
||||
aria-expanded="false"
|
||||
aria-controls="basic-modal"
|
||||
data-overlay="#basic-modal1"
|
||||
>
|
||||
Open modal
|
||||
</button>
|
||||
|
||||
<div
|
||||
id="basic-modal1"
|
||||
class="overlay modal overlay-open:opacity-100 hidden overlay-open:duration-300"
|
||||
role="dialog"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="modal-dialog overlay-open:opacity-100 overlay-open:duration-300"
|
||||
>
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title">Dialog Title</h3>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-text btn-circle btn-sm absolute end-3 top-3"
|
||||
aria-label="Close"
|
||||
data-overlay="#basic-modal1"
|
||||
>
|
||||
<span class="icon-[tabler--x] size-4"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This is some placeholder content to show the scrolling behavior
|
||||
for modals. Instead of repeating the text in the modal, we use
|
||||
an inline style to set a minimum height, thereby extending the
|
||||
length of the overall modal and demonstrating the overflow
|
||||
scrolling. When content becomes longer than the height of the
|
||||
viewport, scrolling will move the modal as needed.
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-soft btn-secondary"
|
||||
data-overlay="#basic-modal1"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary">
|
||||
Save changes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="lastVaults.length" class="w-full">
|
||||
@ -92,17 +36,12 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="relative border-base-content/25 divide-base-content/25 flex w-full flex-col divide-y rounded-md border first:*:rounded-t-md last:*:rounded-b-md overflow-scroll"
|
||||
>
|
||||
<div
|
||||
class="flex items-center justify-between group h-12 overflow-x-scroll"
|
||||
v-for="vault in lastVaults"
|
||||
:key="vault.path"
|
||||
>
|
||||
class="relative border-base-content/25 divide-base-content/25 flex w-full flex-col divide-y rounded-md border first:*:rounded-t-md last:*:rounded-b-md overflow-scroll">
|
||||
<div class="flex items-center justify-between group h-12 overflow-x-scroll" v-for="vault in lastVaults"
|
||||
:key="vault.path">
|
||||
<button
|
||||
class="link link-accent flex items-center no-underline justify-between text-nowrap text-sm md:text-base shrink w-full py-2 px-4"
|
||||
@click=";(passwordPromptOpen = true), (vaultPath = vault.path)"
|
||||
>
|
||||
@click="; (passwordPromptOpen = true), (vaultPath = vault.path)">
|
||||
<span class="block md:hidden">
|
||||
{{ vault.name }}
|
||||
</span>
|
||||
@ -110,13 +49,8 @@
|
||||
{{ vault.path }}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="absolute right-2 btn btn-square btn-error btn-xs hidden group-hover:flex min-w-6"
|
||||
>
|
||||
<Icon
|
||||
name="mdi:trash-can-outline"
|
||||
@click="removeVaultAsync(vault.path)"
|
||||
/>
|
||||
<button class="absolute right-2 btn btn-square btn-error btn-xs hidden group-hover:flex min-w-6">
|
||||
<Icon name="mdi:trash-can-outline" @click="removeVaultAsync(vault.path)" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -126,7 +60,7 @@
|
||||
<h4>{{ t('sponsors') }}</h4>
|
||||
<div>
|
||||
<button @click="openUrl('https://itemis.com')">
|
||||
<UiLogoItemis class="text-[#00457C]" />
|
||||
<!-- <UiLogoItemis class="text-[#00457C]" /> -->
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -152,8 +86,7 @@ const { lastVaults } = storeToRefs(useLastVaultStore())
|
||||
await syncLastVaultsAsync()
|
||||
</script>
|
||||
|
||||
<i18n lang="json">
|
||||
{
|
||||
<i18n lang="json">{
|
||||
"de": {
|
||||
"welcome": "Viel Spass mit",
|
||||
"lastUsed": "Zuletzt verwendete Vaults",
|
||||
@ -164,5 +97,4 @@ await syncLastVaultsAsync()
|
||||
"lastUsed": "Last used Vaults",
|
||||
"sponsors": "Powered by"
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
}</i18n>
|
||||
|
||||
Reference in New Issue
Block a user