mirror of
https://github.com/haexhub/haex-hub.git
synced 2025-12-17 06:30:50 +01:00
zwischenstand
This commit is contained in:
@ -1,29 +1,29 @@
|
||||
<template>
|
||||
<div class="browser">
|
||||
<div class="browser-controls">
|
||||
<button @click="$emit('goBack', activeTabId)" :disabled="!activeTabId">
|
||||
<button :disabled="!activeTabId" @click="$emit('goBack', activeTabId)">
|
||||
←
|
||||
</button>
|
||||
<button @click="$emit('goForward', activeTabId)" :disabled="!activeTabId">
|
||||
<button :disabled="!activeTabId" @click="$emit('goForward', activeTabId)">
|
||||
→
|
||||
</button>
|
||||
<button @click="$emit('createTab')">+</button>
|
||||
|
||||
<HaexBrowserUrlBar
|
||||
:url="activeTab?.url || ''"
|
||||
:isLoading="activeTab?.isLoading || false"
|
||||
:is-loading="activeTab?.isLoading || false"
|
||||
@submit="handleUrlSubmit"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<HaexBrowserTabBar
|
||||
:tabs="tabs"
|
||||
:activeTabId="activeTabId"
|
||||
@closeTab="$emit('closeTab', $event)"
|
||||
@activateTab="$emit('activateTab', $event)"
|
||||
:active-tab-id="activeTabId"
|
||||
@close-tab="$emit('closeTab', $event)"
|
||||
@activate-tab="$emit('activateTab', $event)"
|
||||
/>
|
||||
|
||||
<div class="browser-content" ref="contentRef">
|
||||
<div ref="contentRef" class="browser-content">
|
||||
<!-- Die eigentlichen Webview-Inhalte werden von Tauri verwaltet -->
|
||||
<div v-if="!activeTabId" class="empty-state">
|
||||
<p>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<form class="url-bar" @submit.prevent="handleSubmit">
|
||||
<input type="text" v-model="inputValue" placeholder="URL eingeben" />
|
||||
<input v-model="inputValue" type="text" placeholder="URL eingeben" >
|
||||
<span v-if="isLoading" class="loading-indicator">Laden...</span>
|
||||
<button v-else type="submit">Go</button>
|
||||
</form>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<button :class="cn(
|
||||
<button
|
||||
:class="cn(
|
||||
`relative flex items-center justify-center min-w-28 min-h-10 overflow-hidden outline-2 outline-offset-2 rounded cursor-pointer`, className
|
||||
)
|
||||
">
|
||||
|
||||
@ -1,39 +1,50 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<slot name="image" />
|
||||
|
||||
<div
|
||||
class="card border-4 shadow-md shadow-accent h-48 w-48 overflow-hidden hover:shadow-xl transition-shadow "
|
||||
v-bind="$attrs">
|
||||
<div class="absolute top-2 right-2">
|
||||
<UiButton class="btn-error btn-outline btn-sm btn-square" @click="$emit('remove')">
|
||||
<Icon name="mdi:trash" />
|
||||
</UiButton>
|
||||
<UiDropdown class="btn btn-sm btn-text btn-circle">
|
||||
<template #activator>
|
||||
<Icon name="mdi:dots-vertical" />
|
||||
</template>
|
||||
|
||||
<template #items>
|
||||
<UiButton class="btn-error btn-outline btn-sm " @click="showRemoveDialog = true">
|
||||
<Icon name="mdi:trash" /> {{ t("remove") }}
|
||||
</UiButton>
|
||||
</template>
|
||||
</UiDropdown>
|
||||
</div>
|
||||
|
||||
<div class="card-header">
|
||||
<div v-if="$slots.title || name">
|
||||
<div class="flex justify-start gap-4">
|
||||
<div v-html="icon" class="shrink-0 size-10" />
|
||||
<h5 v-if="name" class="card-title m-0 my-auto">
|
||||
{{ name }}
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-base-content/50">{{ manifest }}</div>
|
||||
<h5 v-if="name" class="card-title">
|
||||
{{ name }}
|
||||
</h5>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<slot />
|
||||
<div
|
||||
class="card-body relative cursor-pointer"
|
||||
@click="navigateTo(useLocalePath()({ name: 'haexExtension', params: { extensionId: id } }))">
|
||||
<!-- <slot />
|
||||
<div class="card-actions" v-if="$slots.action">
|
||||
<slot name="action" />
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="size-20 absolute bottom-2 right-2" v-html="icon" />
|
||||
</div>
|
||||
|
||||
<!-- <div class="card-footer">
|
||||
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<HaexExtensionDialogRemove v-model:open="showRemoveDialog" :extension @confirm="removeExtensionAsync" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { IHaexHubExtension } from "~/types/haexhub";
|
||||
const emit = defineEmits(["close", "submit", "remove"]);
|
||||
|
||||
defineProps<IHaexHubExtension>();
|
||||
const extension = defineProps<IHaexHubExtension>();
|
||||
|
||||
const { escape, enter } = useMagicKeys();
|
||||
|
||||
@ -50,4 +61,67 @@ watchEffect(async () => {
|
||||
emit("submit");
|
||||
}
|
||||
});
|
||||
|
||||
const showRemoveDialog = ref(false)
|
||||
const { add } = useSnackbar()
|
||||
const { t } = useI18n()
|
||||
const extensionStore = useExtensionsStore()
|
||||
|
||||
const removeExtensionAsync = async () => {
|
||||
if (!extension?.id || !extension?.version) {
|
||||
add({ type: 'error', text: 'Erweiterung kann nicht gelöscht werden' })
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await extensionStore.removeExtensionAsync(
|
||||
extension.id,
|
||||
extension.version
|
||||
)
|
||||
await extensionStore.loadExtensionsAsync()
|
||||
|
||||
add({
|
||||
type: 'success',
|
||||
title: t('extension.remove.success.title', {
|
||||
extensionName: extension.name,
|
||||
}),
|
||||
text: t('extension.remove.success.text', {
|
||||
extensionName: extension.name,
|
||||
}),
|
||||
})
|
||||
} catch (error) {
|
||||
add({
|
||||
type: 'error',
|
||||
title: t('extension.remove.error.title'),
|
||||
text: t('extension.remove.error.text', { error: JSON.stringify(error) }),
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<i18n lang="yaml">
|
||||
de:
|
||||
remove: Löschen
|
||||
extension:
|
||||
remove:
|
||||
success:
|
||||
text: 'Erweiterung {extensionName} wurde erfolgreich entfernt'
|
||||
title: '{extensionName} entfernt'
|
||||
error:
|
||||
text: "Erweiterung {extensionName} konnte nicht entfernt werden. \n {error}"
|
||||
title: 'Fehler beim Entfernen von {extensionName}'
|
||||
|
||||
|
||||
en:
|
||||
remove: Remove
|
||||
extension:
|
||||
remove:
|
||||
success:
|
||||
text: 'Extension {extensionName} was removed'
|
||||
title: '{extensionName} removed'
|
||||
error:
|
||||
text: "Extension {extensionName} couldn't be removed. \n {error}"
|
||||
title: 'Exception during uninstall {extensionName}'
|
||||
|
||||
|
||||
</i18n>
|
||||
|
||||
118
src/components/haex/extension/dialog/install.vue
Normal file
118
src/components/haex/extension/dialog/install.vue
Normal file
@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<UiDialogConfirm v-model:open="open" @abort="onDeny" @confirm="onConfirm">
|
||||
<template #title>
|
||||
<i18n-t keypath="question" tag="p">
|
||||
<template #extension>
|
||||
<span class="font-bold text-primary">{{ manifest?.name }}</span>
|
||||
</template>
|
||||
</i18n-t>
|
||||
</template>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<nav class="tabs tabs-bordered" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
|
||||
<button
|
||||
v-show="manifest?.permissions?.database" id="tabs-basic-item-1" type="button"
|
||||
class="tab active-tab:tab-active active" data-tab="#tabs-basic-1" aria-controls="tabs-basic-1" role="tab" aria-selected="true">
|
||||
{{ t("database") }}
|
||||
</button>
|
||||
<button
|
||||
v-show="manifest?.permissions?.filesystem" id="tabs-basic-item-2" type="button"
|
||||
class="tab active-tab:tab-active" data-tab="#tabs-basic-2" aria-controls="tabs-basic-2" role="tab" aria-selected="false">
|
||||
{{ t("filesystem") }}
|
||||
</button>
|
||||
<button
|
||||
v-show="manifest?.permissions?.http" id="tabs-basic-item-3" type="button"
|
||||
class="tab active-tab:tab-active" data-tab="#tabs-basic-3" aria-controls="tabs-basic-3" role="tab" aria-selected="false">
|
||||
{{ t("http") }}
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<div class="mt-3 min-h-40">
|
||||
<div id="tabs-basic-1" role="tabpanel" aria-labelledby="tabs-basic-item-1">
|
||||
<HaexExtensionManifestPermissionsDatabase :database="permissions?.database" />
|
||||
</div>
|
||||
<div id="tabs-basic-2" class="hidden" role="tabpanel" aria-labelledby="tabs-basic-item-2">
|
||||
<HaexExtensionManifestPermissionsFilesystem :filesystem="permissions?.filesystem" />
|
||||
</div>
|
||||
<div id="tabs-basic-3" class="hidden" role="tabpanel" aria-labelledby="tabs-basic-item-3">
|
||||
<HaexExtensionManifestPermissionsHttp :http="permissions?.http" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</UiDialogConfirm>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { IHaexHubExtensionManifest } from "~/types/haexhub";
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const open = defineModel<boolean>("open", { default: false });
|
||||
const { manifest } = defineProps<{ manifest?: IHaexHubExtensionManifest | null }>();
|
||||
|
||||
const permissions = computed(() => ({
|
||||
|
||||
database: {
|
||||
read: manifest?.permissions.database?.read?.map(read => ({
|
||||
[read]: true
|
||||
})),
|
||||
write: manifest?.permissions.database?.read?.map(write => ({
|
||||
[write]: true
|
||||
})),
|
||||
create: manifest?.permissions.database?.read?.map(create => ({
|
||||
[create]: true
|
||||
})),
|
||||
},
|
||||
|
||||
filesystem: {
|
||||
read: manifest?.permissions.filesystem?.read?.map(read => ({
|
||||
[read]: true
|
||||
})),
|
||||
write: manifest?.permissions.filesystem?.write?.map(write => ({
|
||||
[write]: true
|
||||
})),
|
||||
},
|
||||
|
||||
http: manifest?.permissions.http?.map(http => ({
|
||||
[http]: true
|
||||
})),
|
||||
}))
|
||||
|
||||
watch(permissions, () => console.log("permissions", permissions.value))
|
||||
const emit = defineEmits(["deny", "confirm"]);
|
||||
|
||||
const onDeny = () => {
|
||||
open.value = false;
|
||||
console.log("onDeny open", open.value);
|
||||
emit("deny");
|
||||
};
|
||||
|
||||
const onConfirm = () => {
|
||||
open.value = false;
|
||||
console.log("onConfirm open", open.value);
|
||||
emit("confirm");
|
||||
};
|
||||
</script>
|
||||
|
||||
<i18n lang="json">{
|
||||
"de": {
|
||||
"title": "Erweiterung hinzufügen",
|
||||
"question": "Erweiterung {extension} hinzufügen?",
|
||||
"confirm": "Bestätigen",
|
||||
"deny": "Ablehnen",
|
||||
"database": "Datenbank",
|
||||
"http": "Internet",
|
||||
"filesystem": "Dateisystem"
|
||||
},
|
||||
"en": {
|
||||
"title": "Confirm Permission",
|
||||
"question": "Add Extension {extension}?",
|
||||
"confirm": "Confirm",
|
||||
"deny": "Deny",
|
||||
"database": "Database",
|
||||
"http": "Internet",
|
||||
"filesystem": "Filesystem"
|
||||
}
|
||||
}</i18n>
|
||||
33
src/components/haex/extension/dialog/reinstall.vue
Normal file
33
src/components/haex/extension/dialog/reinstall.vue
Normal file
@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<UiDialogConfirm v-model:open="open">
|
||||
<template #title>
|
||||
<i18n-t keypath="title" tag="p">
|
||||
<template #extensionName>
|
||||
<span class="font-bold text-primary">{{ manifest?.name }}</span>
|
||||
</template>
|
||||
</i18n-t>
|
||||
</template>
|
||||
|
||||
<p>{{ t("question", { extensionName: manifest?.name }) }}</p>
|
||||
</UiDialogConfirm>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { IHaexHubExtensionManifest } from "~/types/haexhub";
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const open = defineModel<boolean>("open", { default: false });
|
||||
const { manifest } = defineProps<{ manifest?: IHaexHubExtensionManifest | null }>();
|
||||
|
||||
</script>
|
||||
|
||||
<i18n lang="yaml">
|
||||
de:
|
||||
title: "{extensionName} bereits installiert"
|
||||
question: Soll die Erweiterung {extensionName} erneut installiert werden?
|
||||
|
||||
en:
|
||||
title: "{extensionName} is already installed"
|
||||
question: Do you want to reinstall {extensionName}?
|
||||
</i18n>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<UiDialog :title="t('title')" v-model:open="open">
|
||||
<UiDialogConfirm v-model:open="open" :title="t('title')" @confirm="onConfirm">
|
||||
<div>
|
||||
<i18n-t keypath="question" tag="p">
|
||||
<template #name>
|
||||
@ -7,16 +7,7 @@
|
||||
</template>
|
||||
</i18n-t>
|
||||
</div>
|
||||
<template #buttons>
|
||||
<UiButton class="btn-outline btn-error" @click="open = false">
|
||||
<Icon name="mdi:cancel" /> {{ t("abort") }}
|
||||
</UiButton>
|
||||
|
||||
<UiButton class="btn-error" @click="onConfirm">
|
||||
<Icon name="mdi:trash" /> {{ t("remove") }}
|
||||
</UiButton>
|
||||
</template>
|
||||
</UiDialog>
|
||||
</UiDialogConfirm>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -36,8 +27,7 @@ const onConfirm = () => {
|
||||
};
|
||||
</script>
|
||||
|
||||
<i18n lang="json">
|
||||
{
|
||||
<i18n lang="json">{
|
||||
"de": {
|
||||
"title": "Erweiterung löschen",
|
||||
"question": "Soll {name} wirklich gelöscht werden?",
|
||||
@ -46,9 +36,8 @@ const onConfirm = () => {
|
||||
},
|
||||
"en": {
|
||||
"title": "Remove Extension",
|
||||
"question": "Soll {name} wirklich gelöscht werden?",
|
||||
"question": "Should {name} really be deleted?",
|
||||
"abort": "Abort",
|
||||
"remove": "Remove"
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
}</i18n>
|
||||
|
||||
@ -1,104 +0,0 @@
|
||||
<template>
|
||||
<UiDialog :title="t('title')" v-model:open="open">
|
||||
<div>
|
||||
<i18n-t keypath="question" tag="p">
|
||||
<template #extension>
|
||||
<span class="font-bold text-primary">{{ manifest?.name }}</span>
|
||||
</template>
|
||||
</i18n-t>
|
||||
|
||||
<!-- {{ t("question", { extension: manifest?.name }) }}
|
||||
<span class="font-bold text-primary">{{ manifest?.name }}</span> zu HaexHub hinzufügen? -->
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<HaexExtensionManifestPermissionsFilesystem
|
||||
v-if="manifest?.permissions?.filesystem"
|
||||
:filesystem="manifest?.permissions?.filesystem"
|
||||
/>
|
||||
|
||||
<HaexExtensionManifestPermissionsDatabase
|
||||
v-if="manifest?.permissions?.database"
|
||||
:database="manifest?.permissions?.database"
|
||||
/>
|
||||
|
||||
<HaexExtensionManifestPermissionsHttp
|
||||
v-if="manifest?.permissions?.http"
|
||||
:http="manifest?.permissions?.http"
|
||||
/>
|
||||
<!-- <VaultCard>
|
||||
<template #header>
|
||||
<h3>{{ t("filesystem.title") }}</h3>
|
||||
</template>
|
||||
|
||||
<div>
|
||||
{{ manifest?.permissions.filesystem }}
|
||||
</div>
|
||||
</VaultCard>
|
||||
|
||||
<VaultCard>
|
||||
<template #header>
|
||||
<h3>{{ t("http.title") }}</h3>
|
||||
</template>
|
||||
|
||||
<div>
|
||||
{{ manifest?.permissions.http }}
|
||||
</div>
|
||||
</VaultCard> -->
|
||||
</div>
|
||||
|
||||
<template #buttons>
|
||||
<UiButton @click="onDeny" class="btn-error btn-outline">{{ t("deny") }} </UiButton>
|
||||
<UiButton @click="onConfirm" class="btn-success btn-outline">{{ t("confirm") }}</UiButton>
|
||||
</template>
|
||||
</UiDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { IHaexHubExtensionManifest } from "~/types/haexhub";
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const open = defineModel<boolean>("open", { default: false });
|
||||
defineProps<{ manifest?: IHaexHubExtensionManifest | null }>();
|
||||
|
||||
const emit = defineEmits(["deny", "confirm"]);
|
||||
|
||||
const onDeny = () => {
|
||||
open.value = false;
|
||||
console.log("onDeny open", open.value);
|
||||
emit("deny");
|
||||
};
|
||||
|
||||
const onConfirm = () => {
|
||||
open.value = false;
|
||||
console.log("onConfirm open", open.value);
|
||||
emit("confirm");
|
||||
};
|
||||
</script>
|
||||
|
||||
<i18n lang="json">
|
||||
{
|
||||
"de": {
|
||||
"title": "Erweiterung hinzufügen",
|
||||
"question": "Möchtest du die Erweiterung {extension} hinzufügen?",
|
||||
"confirm": "Bestätigen",
|
||||
"deny": "Ablehnen",
|
||||
|
||||
"permission": {
|
||||
"read": "Lesen",
|
||||
"write": "Schreiben"
|
||||
},
|
||||
|
||||
"database": {
|
||||
"title": "Datenbank Berechtigungen"
|
||||
},
|
||||
"http": {
|
||||
"title": "Internet Berechtigungen"
|
||||
},
|
||||
"filesystem": {
|
||||
"title": "Dateisystem Berechtigungen"
|
||||
}
|
||||
},
|
||||
"en": { "title": "Confirm Permission" }
|
||||
}
|
||||
</i18n>
|
||||
@ -1,63 +1,71 @@
|
||||
<template>
|
||||
<div>
|
||||
<HaexExtensionManifestPermissionsTitle>
|
||||
{{ t("database.title") }}
|
||||
</HaexExtensionManifestPermissionsTitle>
|
||||
<UiAccordion v-if="database?.read?.length">
|
||||
<template #title>
|
||||
<h3>{{ t("permission.read") }}</h3>
|
||||
</template>
|
||||
|
||||
<div v-if="database?.read?.length">
|
||||
<UiAccordion>
|
||||
<template #title>
|
||||
<h3>{{ t("permission.read") }}</h3>
|
||||
</template>
|
||||
<ul class="space-y-0.5">
|
||||
<li v-for="read in database?.read" class="flex items-center justify-between px-4 py-1">
|
||||
<div class="flex items-center gap-1">
|
||||
<input :id="Object.keys(read).at(0)" type="checkbox" class="checkbox" :checked="Object.values(read).at(0)" >
|
||||
<label class="label-text text-base" :for="Object.keys(read).at(0)">{{ Object.keys(read).at(0) }}</label>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</UiAccordion>
|
||||
|
||||
<ul class="space-y-0.5">
|
||||
<li class="flex items-center justify-between px-4 py-0.5" v-for="read in database?.read">
|
||||
<div class="flex items-center gap-2">
|
||||
<span>{{ read }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</UiAccordion>
|
||||
</div>
|
||||
<UiAccordion v-if="database?.write?.length">
|
||||
<template #title>
|
||||
<h3>{{ t("permission.write") }}</h3>
|
||||
</template>
|
||||
|
||||
<div v-if="database?.write?.length">
|
||||
<UiAccordion>
|
||||
<template #title>
|
||||
<h3>{{ t("permission.write") }}</h3>
|
||||
</template>
|
||||
<ul class="space-y-0.5">
|
||||
<li v-for="write in database?.write" class="flex items-center justify-between px-4 py-0.5">
|
||||
<div class="flex items-center gap-1">
|
||||
<input
|
||||
:id="Object.keys(write).at(0)" type="checkbox" class="checkbox"
|
||||
:checked="Object.values(write).at(0)" >
|
||||
<label class="label-text text-base" :for="Object.keys(write).at(0)">{{ Object.keys(write).at(0) }}</label>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</UiAccordion>
|
||||
|
||||
<ul class="space-y-0.5">
|
||||
<li
|
||||
class="flex items-center justify-between px-4 py-0.5"
|
||||
v-for="write in database?.write"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<span>{{ write }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</UiAccordion>
|
||||
</div>
|
||||
</div>
|
||||
<UiAccordion v-if="database?.create?.length">
|
||||
<template #title>
|
||||
<h3>{{ t("permission.create") }}</h3>
|
||||
</template>
|
||||
|
||||
<ul class="space-y-0.5">
|
||||
<li v-for="create in database?.create" class="flex items-center justify-between px-4 py-0.5">
|
||||
<div class="flex items-center gap-1">
|
||||
<input
|
||||
:id="Object.keys(create).at(0)" type="checkbox" class="checkbox"
|
||||
:checked="Object.values(create).at(0)" >
|
||||
<label class="label-text text-base" :for="Object.keys(create).at(0)">{{ Object.keys(create).at(0) }}</label>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</UiAccordion>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps<{ database: IHaexHubExtensionManifest["permissions"]["database"] }>();
|
||||
|
||||
|
||||
defineProps<{ database?: { read?: Record<string, boolean>[], write?: Record<string, boolean>[], create?: Record<string, boolean>[] } }>();
|
||||
const { t } = useI18n();
|
||||
</script>
|
||||
|
||||
<i18n lang="json">
|
||||
{
|
||||
"de": {
|
||||
"permission": {
|
||||
"read": "Lesen",
|
||||
"write": "Schreiben"
|
||||
},
|
||||
<i18n lang="yaml">
|
||||
de:
|
||||
permission:
|
||||
read: Lesen
|
||||
write: Schreiben
|
||||
create: Erstellen
|
||||
|
||||
"database": {
|
||||
"title": "Datenbank Berechtigungen"
|
||||
}
|
||||
},
|
||||
"en": { "title": "Confirm Permission" }
|
||||
}
|
||||
en:
|
||||
permission:
|
||||
read: Read
|
||||
write: Write
|
||||
create: Create
|
||||
</i18n>
|
||||
|
||||
@ -1,65 +1,58 @@
|
||||
<template>
|
||||
<div>
|
||||
<HaexExtensionManifestPermissionsTitle>
|
||||
{{ t("filesystem.title") }}
|
||||
</HaexExtensionManifestPermissionsTitle>
|
||||
<UiAccordion v-if="filesystem?.read?.length">
|
||||
<template #title>
|
||||
<h3>{{ t('permission.read') }}</h3>
|
||||
</template>
|
||||
<ul class="space-y-0.5">
|
||||
<li v-for="read in filesystem?.read" class="flex items-center justify-between px-4 py-0.5">
|
||||
<div class="flex items-center gap-1">
|
||||
<input :id="Object.keys(read).at(0)" type="checkbox" class="checkbox" :checked="Object.values(read).at(0)" >
|
||||
<label class="label-text text-base" :for="Object.keys(read).at(0)">{{
|
||||
Object.keys(read).at(0)
|
||||
}}</label>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</UiAccordion>
|
||||
|
||||
<div v-if="filesystem?.read?.length">
|
||||
<UiAccordion>
|
||||
<template #title>
|
||||
<h3>{{ t("permission.read") }}</h3>
|
||||
</template>
|
||||
<ul class="space-y-0.5">
|
||||
<li
|
||||
class="flex items-center justify-between px-4 py-0.5"
|
||||
v-for="read in filesystem?.read"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<span>{{ read }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</UiAccordion>
|
||||
</div>
|
||||
<UiAccordion v-if="filesystem?.write?.length">
|
||||
<template #title>
|
||||
<h3>{{ t('permission.write') }}</h3>
|
||||
</template>
|
||||
|
||||
<div v-if="filesystem?.write?.length">
|
||||
<UiAccordion>
|
||||
<template #title>
|
||||
<h3>{{ t("permission.write") }}</h3>
|
||||
</template>
|
||||
|
||||
<ul class="space-y-0.5">
|
||||
<li
|
||||
class="flex items-center justify-between px-4 py-0.5"
|
||||
v-for="write in filesystem?.write"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<span>{{ write }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</UiAccordion>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="space-y-0.5">
|
||||
<li v-for="write in filesystem?.write" class="flex items-center justify-between px-4 py-0.5">
|
||||
<div class="flex items-center gap-1">
|
||||
<input
|
||||
:id="Object.keys(write).at(0)" type="checkbox" class="checkbox"
|
||||
:checked="Object.values(write).at(0)" >
|
||||
<label class="label-text text-base" :for="Object.keys(write).at(0)">{{
|
||||
Object.keys(write).at(0)
|
||||
}}</label>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</UiAccordion>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps<{ filesystem: IHaexHubExtensionManifest["permissions"]["filesystem"] }>();
|
||||
const { t } = useI18n();
|
||||
defineProps<{
|
||||
filesystem?: {
|
||||
read?: Record<string, boolean>[]
|
||||
write?: Record<string, boolean>[]
|
||||
}
|
||||
}>()
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
|
||||
<i18n lang="json">
|
||||
{
|
||||
"de": {
|
||||
"permission": {
|
||||
"read": "Lesen",
|
||||
"write": "Schreiben"
|
||||
},
|
||||
<i18n lang="yaml">
|
||||
de:
|
||||
permission:
|
||||
read: Lesen
|
||||
write: Schreiben
|
||||
|
||||
"filesystem": {
|
||||
"title": "Dateisystem Berechtigungen"
|
||||
}
|
||||
},
|
||||
"en": { "title": "Confirm Permission" }
|
||||
}
|
||||
en:
|
||||
permission:
|
||||
read: Read
|
||||
write: Write
|
||||
</i18n>
|
||||
|
||||
@ -1,43 +1,33 @@
|
||||
<template>
|
||||
<div>
|
||||
<HaexExtensionManifestPermissionsTitle>
|
||||
{{ t("http.title") }}
|
||||
</HaexExtensionManifestPermissionsTitle>
|
||||
<UiAccordion>
|
||||
<template #title>
|
||||
<h3>{{ t("http.access") }}</h3>
|
||||
</template>
|
||||
|
||||
<div v-if="http?.length">
|
||||
<UiAccordion>
|
||||
<template #title>
|
||||
<h3>{{ t("permission.access") }}</h3>
|
||||
</template>
|
||||
|
||||
<ul class="space-y-0.5">
|
||||
<li class="flex items-center justify-between px-4 py-0.5" v-for="access in http">
|
||||
<div class="flex items-center gap-2">
|
||||
<span>{{ access }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</UiAccordion>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="space-y-0.5">
|
||||
<li v-for="access in http" class="flex items-center justify-between px-4 py-0.5">
|
||||
<div class="flex items-center gap-1">
|
||||
<input
|
||||
:id="Object.keys(access).at(0)" type="checkbox" class="checkbox"
|
||||
:checked="Object.values(access).at(0)" >
|
||||
<label class="label-text text-base" :for="Object.keys(access).at(0)">{{ Object.keys(access).at(0) }}</label>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</UiAccordion>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps<{ http: IHaexHubExtensionManifest["permissions"]["http"] }>();
|
||||
defineProps<{ http?: Record<string, boolean>[] }>();
|
||||
const { t } = useI18n();
|
||||
</script>
|
||||
|
||||
<i18n lang="json">
|
||||
{
|
||||
"de": {
|
||||
"permission": {
|
||||
"access": "Zugriff"
|
||||
},
|
||||
<i18n lang="yaml">
|
||||
de:
|
||||
http:
|
||||
access: Internet Zugriff
|
||||
|
||||
"http": {
|
||||
"title": "Internet Berechtigungen"
|
||||
}
|
||||
},
|
||||
"en": { "title": "Confirm Permission" }
|
||||
}
|
||||
en:
|
||||
http:
|
||||
access: Internet Access
|
||||
</i18n>
|
||||
|
||||
@ -6,7 +6,8 @@
|
||||
|
||||
<!-- <div class="">
|
||||
-->
|
||||
<HaexButton v-if="withCopyButton" class="btn-outline btn-accent btn-square join-item h-auto"
|
||||
<HaexButton
|
||||
v-if="withCopyButton" class="btn-outline btn-accent btn-square join-item h-auto"
|
||||
@click="copy(`${input}`)">
|
||||
<Icon :name="copied ? 'mdi:check' : 'mdi:content-copy'" />
|
||||
</Haexbutton>
|
||||
@ -19,7 +20,7 @@
|
||||
<label class="floating-label input join-item">
|
||||
<Icon v-if="iconPrepend" :name="iconPrepend" class="my-auto size-6" />
|
||||
<span>Your Email</span>
|
||||
<input type="text" placeholder="mail@site.com" class=" join-item " />
|
||||
<input type="text" placeholder="mail@site.com" class=" join-item " >
|
||||
<Icon v-if="iconAppend" :name="iconAppend" class="my-auto shrink-0" />
|
||||
</label>
|
||||
|
||||
@ -28,13 +29,14 @@
|
||||
|
||||
<slot name="append" class="h-auto" />
|
||||
|
||||
<HaexButton v-if="withCopyButton" class="btn-outline btn-accent btn-square join-item h-auto"
|
||||
<HaexButton
|
||||
v-if="withCopyButton" class="btn-outline btn-accent btn-square join-item h-auto"
|
||||
@click="copy(`${input}`)">
|
||||
<Icon :name="copied ? 'mdi:check' : 'mdi:content-copy'" />
|
||||
</Haexbutton>
|
||||
</fieldset>
|
||||
|
||||
<span class="flex flex-col px-2 pt-0.5" v-show="errors">
|
||||
<span v-show="errors" class="flex flex-col px-2 pt-0.5">
|
||||
<span v-for="error in errors" class="label-text-alt text-error">
|
||||
{{ error }}
|
||||
</span>
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
|
||||
<li>
|
||||
<NuxtLinkLocale class="dropdown-item" :to="{ name: 'haexSettings' }">
|
||||
<span class="icon-[tabler--settings]"></span>
|
||||
<span class="icon-[tabler--settings]"/>
|
||||
{{ t('settings') }}
|
||||
</NuxtLinkLocale>
|
||||
</li>
|
||||
@ -23,7 +23,7 @@
|
||||
|
||||
<li class="dropdown-footer gap-2">
|
||||
<button class="btn btn-error btn-soft btn-block" @click="onVaultCloseAsync">
|
||||
<span class="icon-[tabler--logout]"></span>
|
||||
<span class="icon-[tabler--logout]"/>
|
||||
{{ t('vault.close') }}
|
||||
</button>
|
||||
</li>
|
||||
|
||||
190
src/components/haex/pass/entry/index.vue
Normal file
190
src/components/haex/pass/entry/index.vue
Normal file
@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<VaultCardEdit
|
||||
v-if="vaultEntry.details" v-model:read_only="read_only" :color="currentGroup?.color || 'text-base-content'"
|
||||
:has-changes="hasChanges" :icon="vaultEntry.details?.icon || icon || 'mdi:key-outline'"
|
||||
:title="vaultEntry.details?.title ?? ''" @back="$emit('back')" @close="$emit('close')"
|
||||
@reject="(to) => $emit('reject', to)" @submit="(to) => $emit('submit', to)">
|
||||
<div class="h-full relative overflow-hidden">
|
||||
<nav
|
||||
aria-label="Tabs Vault Entry" aria-orientation="horizontal"
|
||||
class="tabs tabs-bordered w-full transition-all duration-700 sticky top-0 z-10 bg-base-200" role="tablist">
|
||||
<button
|
||||
:id="id.details" aria-controls="vaultDetailsId" aria-selected="true"
|
||||
class="tab active-tab:tab-active active w-full" data-tab="#vaultDetailsId" role="tab" type="button">
|
||||
<Icon name="material-symbols:key-outline" class="me-2" />
|
||||
<span class="hidden sm:block">
|
||||
{{ t('tab.details') }}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
:id="id.keyValue" aria-controls="tabs-basic-2" aria-selected="false"
|
||||
class="tab active-tab:tab-active w-full" data-tab="#tabs-basic-2" role="tab" type="button">
|
||||
<Icon name="fluent:group-list-20-filled" class="me-2" />
|
||||
<span class="hidden sm:block">
|
||||
{{ t('tab.keyValue') }}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
:id="id.history" aria-controls="tabs-basic-3" aria-selected="false"
|
||||
class="tab active-tab:tab-active w-full" data-tab="#tabs-basic-3" role="tab" type="button">
|
||||
<Icon name="material-symbols:history" class="me-2" />
|
||||
<span class="hidden sm:block">
|
||||
{{ t('tab.history') }}
|
||||
</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<div class="h-full pb-8">
|
||||
<div id="vaultDetailsId" role="tabpanel" :aria-labelledby="id.details" class="h-full">
|
||||
<VaultEntryDetails v-if="vaultEntry.details" v-model="vaultEntry.details" :with-copy-button :read_only/>
|
||||
</div>
|
||||
|
||||
<div id="tabs-basic-2" class="hidden" role="tabpanel" :aria-labelledby="id.keyValue">
|
||||
{{ originally }}
|
||||
</div>
|
||||
|
||||
<div id="tabs-basic-3" class="hidden h-full" role="tabpanel" :aria-labelledby="id.history">
|
||||
<VaultEntryHistory v-if="vaultEntry.history" :history="vaultEntry.history" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VaultCardEdit>
|
||||
<!-- <VaultModalSaveChanges
|
||||
v-model="showConfirmation"
|
||||
@reject="onReject"
|
||||
@submit="onSubmit"
|
||||
/> -->
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
import type { RouteLocationNormalizedLoadedGeneric } from 'vue-router';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const vaultEntry = defineModel<IVaultEntryComplete>({ required: true });
|
||||
|
||||
|
||||
const { currentGroup } = storeToRefs(useVaultGroupStore());
|
||||
|
||||
/* watch(
|
||||
() => vaultEntry.value.details,
|
||||
() => {
|
||||
header.value.text = vaultEntry.value.details?.title;
|
||||
header.value.icon =
|
||||
vaultEntry.value.details?.icon || currentGroup.value?.icon;
|
||||
},
|
||||
{ immediate: true }
|
||||
); */
|
||||
|
||||
const id = reactive({
|
||||
details: useId(),
|
||||
keyValue: useId(),
|
||||
history: useId(),
|
||||
content: {},
|
||||
});
|
||||
|
||||
const read_only = defineModel<boolean>('read_only', { default: false });
|
||||
|
||||
const props = defineProps({
|
||||
icon: String,
|
||||
originally: Object as PropType<IVaultEntryComplete>,
|
||||
title: String,
|
||||
withCopyButton: Boolean,
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
submit: [to?: RouteLocationNormalizedLoadedGeneric];
|
||||
close: [void];
|
||||
back: [void];
|
||||
reject: [to?: RouteLocationNormalizedLoadedGeneric];
|
||||
}>();
|
||||
|
||||
const showConfirmation = ref(false);
|
||||
|
||||
const hasChanges = computed(() => {
|
||||
if (!props.originally?.details) {
|
||||
if (
|
||||
vaultEntry.value.details?.note?.length ||
|
||||
vaultEntry.value.details?.password?.length ||
|
||||
vaultEntry.value.details?.tags?.length ||
|
||||
vaultEntry.value.details?.title?.length ||
|
||||
vaultEntry.value.details?.url?.length ||
|
||||
vaultEntry.value.details?.urlAliases?.length ||
|
||||
vaultEntry.value.details?.username?.length
|
||||
) {
|
||||
console.log('has changes', props.originally, vaultEntry.value);
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return (
|
||||
JSON.stringify(props.originally.details) !==
|
||||
JSON.stringify(vaultEntry.value.details)
|
||||
);
|
||||
});
|
||||
|
||||
const to = ref<RouteLocationNormalizedLoadedGeneric>();
|
||||
|
||||
const isSaved = ref(false);
|
||||
const isRejected = ref(false);
|
||||
|
||||
const onSubmit = () => {
|
||||
console.log('entry onSubmit');
|
||||
showConfirmation.value = false;
|
||||
isSaved.value = true;
|
||||
emit('submit', to.value);
|
||||
};
|
||||
|
||||
const onReject = () => {
|
||||
console.log('entry onReject');
|
||||
showConfirmation.value = false;
|
||||
isRejected.value = true;
|
||||
emit('reject', to.value);
|
||||
};
|
||||
|
||||
const onBack = () => {
|
||||
console.log('entry onBack', read_only.value);
|
||||
if (hasChanges.value) {
|
||||
showConfirmation.value = true;
|
||||
} else {
|
||||
emit('back');
|
||||
}
|
||||
};
|
||||
|
||||
/* onBeforeRouteLeave((_to, _from, next) => {
|
||||
console.log('check before leave', _to, _from);
|
||||
to.value = _to;
|
||||
if (isSaved.value || isRejected.value) {
|
||||
isSaved.value = false;
|
||||
isRejected.value = false;
|
||||
next();
|
||||
} else if (hasChanges.value) {
|
||||
showConfirmation.value = true;
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
}); */
|
||||
</script>
|
||||
|
||||
<i18n lang="json">{
|
||||
"de": {
|
||||
"create": "Anlegen",
|
||||
"abort": "Abbrechen",
|
||||
"tab": {
|
||||
"details": "Details",
|
||||
"keyValue": "Extra",
|
||||
"history": "Verlauf"
|
||||
}
|
||||
},
|
||||
"en": {
|
||||
"create": "Create",
|
||||
"abort": "Abort",
|
||||
"tab": {
|
||||
"details": "Details",
|
||||
"keyValue": "Extra",
|
||||
"history": "History"
|
||||
}
|
||||
}
|
||||
}</i18n>
|
||||
165
src/components/haex/pass/sidebar/index.vue
Normal file
165
src/components/haex/pass/sidebar/index.vue
Normal file
@ -0,0 +1,165 @@
|
||||
<template>
|
||||
|
||||
|
||||
<aside :id ref="sidebarRef" class=" flex sm:shadow-none w-full md:max-w-64 bg-red-200" tabindex="-1">
|
||||
<div class="drawer-body w-full ">
|
||||
<ul class="menu space-y-0.5 p-0 rounded-none md:rounded">
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="icon-[tabler--home] size-5"/>
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li class="space-y-0.5">
|
||||
<a id="menu-app" class="collapse-toggle collapse-open:bg-base-content/10" data-collapse="#menu-app-collapse">
|
||||
<span class="icon-[tabler--apps] size-5"/>
|
||||
Apps
|
||||
<span
|
||||
class="icon-[tabler--chevron-down] collapse-open:rotate-180 size-4 transition-all duration-300"/>
|
||||
</a>
|
||||
<ul
|
||||
id="menu-app-collapse"
|
||||
class="collapse hidden w-auto space-y-0.5 overflow-hidden transition-[height] duration-300"
|
||||
aria-labelledby="menu-app">
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="icon-[tabler--message] size-5"/>
|
||||
Chat
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="icon-[tabler--calendar] size-5"/>
|
||||
Calendar
|
||||
</a>
|
||||
</li>
|
||||
<li class="space-y-0.5">
|
||||
<a
|
||||
id="sub-menu-academy" class="collapse-toggle collapse-open:bg-base-content/10"
|
||||
data-collapse="#sub-menu-academy-collapse">
|
||||
<span class="icon-[tabler--book] size-5"/>
|
||||
Academy
|
||||
<span class="icon-[tabler--chevron-down] collapse-open:rotate-180 size-4"/>
|
||||
</a>
|
||||
<ul
|
||||
id="sub-menu-academy-collapse"
|
||||
class="collapse hidden w-auto space-y-0.5 overflow-hidden transition-[height] duration-300"
|
||||
aria-labelledby="sub-menu-academy">
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="icon-[tabler--books] size-5"/>
|
||||
Courses
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="icon-[tabler--list-details] size-5"/>
|
||||
Course details
|
||||
</a>
|
||||
</li>
|
||||
<li class="space-y-0.5">
|
||||
<a
|
||||
id="sub-menu-academy-stats" class="collapse-toggle collapse-open:bg-base-content/10"
|
||||
data-collapse="#sub-menu-academy-stats-collapse">
|
||||
<span class="icon-[tabler--chart-bar] size-5"/>
|
||||
Stats
|
||||
<span class="icon-[tabler--chevron-down] collapse-open:rotate-180 size-4"/>
|
||||
</a>
|
||||
<ul
|
||||
id="sub-menu-academy-stats-collapse"
|
||||
class="collapse hidden w-auto space-y-0.5 overflow-hidden transition-[height] duration-300"
|
||||
aria-labelledby="sub-menu-academy-stats">
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="icon-[tabler--chart-donut] size-5"/>
|
||||
Goals
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="icon-[tabler--settings] size-5"/>
|
||||
Settings
|
||||
</a>
|
||||
</li>
|
||||
<div class="divider text-base-content/50 py-6 after:border-0">Account</div>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="icon-[tabler--login] size-5"/>
|
||||
Sign In
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="icon-[tabler--logout-2] size-5"/>
|
||||
Sign Out
|
||||
</a>
|
||||
</li>
|
||||
<div class="divider text-base-content/50 py-6 after:border-0">Miscellaneous</div>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="icon-[tabler--users-group] size-5"/>
|
||||
Support
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="icon-[tabler--files] size-5"/>
|
||||
Documentation
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { HSOverlay } from "flyonui/flyonui";
|
||||
|
||||
defineProps<{ title?: string; label?: string }>();
|
||||
|
||||
defineEmits(["open", "close"]);
|
||||
|
||||
const id = useId();
|
||||
|
||||
const open = defineModel<boolean>("open", { default: true });
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const sidebarRef = useTemplateRef("sidebarRef");
|
||||
|
||||
const modal = ref<HSOverlay>();
|
||||
|
||||
watch(open, async () => {
|
||||
if (open.value) {
|
||||
await modal.value?.open();
|
||||
} else {
|
||||
await modal.value?.close(true);
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
if (!sidebarRef.value) return;
|
||||
|
||||
modal.value = new window.HSOverlay(sidebarRef.value, {
|
||||
isClosePrev: true,
|
||||
});
|
||||
|
||||
modal.value.on("close", () => {
|
||||
open.value = false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<i18n lang="yaml">
|
||||
de:
|
||||
close: Schließen
|
||||
|
||||
en:
|
||||
close: Close
|
||||
</i18n>
|
||||
@ -1,16 +1,10 @@
|
||||
<template>
|
||||
<li
|
||||
@click="triggerNavigate"
|
||||
class="hover:text-primary rounded"
|
||||
:class="{ ['bg-base-200 text-base-content']: isActive }"
|
||||
>
|
||||
class="hover:text-primary rounded" :class="{ ['bg-base-200 text-base-content']: isActive }"
|
||||
@click="triggerNavigate">
|
||||
<UiTooltip :tooltip="tooltip ?? name" direction="right-start">
|
||||
<NuxtLinkLocale
|
||||
:to
|
||||
class="flex items-center justify-center cursor-pointer tooltip-toogle"
|
||||
ref="linkRef"
|
||||
>
|
||||
<div v-if="iconType === 'svg'" v-html="icon" class="shrink-0 size-5" />
|
||||
<NuxtLinkLocale ref="linkRef" :to class="flex items-center justify-center cursor-pointer tooltip-toogle">
|
||||
<div v-if="iconType === 'svg'" class="shrink-0 size-5" v-html="icon" />
|
||||
<Icon v-else :name="icon" size="1.5em" />
|
||||
</NuxtLinkLocale>
|
||||
</UiTooltip>
|
||||
@ -18,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { type ISidebarItem } from '#imports'
|
||||
import type { ISidebarItem } from '#imports'
|
||||
|
||||
const props = defineProps<ISidebarItem>()
|
||||
|
||||
|
||||
37
src/components/ui/accordion/index.vue
Normal file
37
src/components/ui/accordion/index.vue
Normal file
@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div class="accordion divide-neutral/20 divide-y accordion-shadow *:accordion-item-active:shadow-md">
|
||||
<div :id="itemId" ref="accordionRef" class="accordion-item active">
|
||||
<button
|
||||
class="accordion-toggle inline-flex items-center gap-x-4 text-start" :aria-controls="collapseId"
|
||||
aria-expanded="true" type="button">
|
||||
<span
|
||||
class="icon-[tabler--chevron-right] accordion-item-active:rotate-90 size-5 shrink-0 transition-transform duration-300 rtl:rotate-180"/>
|
||||
<slot name="title" />
|
||||
</button>
|
||||
<div
|
||||
:id="collapseId" class="accordion-content w-full overflow-hidden transition-[height] duration-300"
|
||||
:aria-labelledby="itemId" role="region">
|
||||
|
||||
<slot />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { HSAccordion } from "flyonui/flyonui";
|
||||
|
||||
const itemId = useId();
|
||||
const collapseId = useId();
|
||||
|
||||
const accordionRef = useTemplateRef("accordionRef");
|
||||
const accordion = ref<HSAccordion>();
|
||||
|
||||
onMounted(() => {
|
||||
if (accordionRef.value) {
|
||||
accordion.value = new window.HSAccordion(accordionRef.value);
|
||||
accordion.value.hide()
|
||||
}
|
||||
});
|
||||
</script>
|
||||
52
src/components/ui/dialog/confirm.vue
Normal file
52
src/components/ui/dialog/confirm.vue
Normal file
@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<UiDialog v-model:open="open" @close="onAbort">
|
||||
<template #trigger>
|
||||
<slot name="trigger" />
|
||||
</template>
|
||||
|
||||
<template #title>
|
||||
<slot name="title" />
|
||||
</template>
|
||||
|
||||
<slot />
|
||||
|
||||
<template #buttons>
|
||||
<slot name="buttons">
|
||||
<UiButton class="btn-error btn-outline" @click="onAbort">
|
||||
<Icon name="mdi:close" /> {{ abortLabel ?? t("abort") }}
|
||||
</UiButton>
|
||||
<UiButton class="btn-primary " @click="onConfirm">
|
||||
<Icon name="mdi:check" /> {{ confirmLabel ?? t("confirm") }}
|
||||
</UiButton>
|
||||
</slot>
|
||||
|
||||
</template>
|
||||
</UiDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps<{ confirmLabel?: string, abortLabel?: string }>()
|
||||
const open = defineModel<boolean>("open", { default: false })
|
||||
const { t } = useI18n()
|
||||
const emit = defineEmits(["confirm", "abort"])
|
||||
|
||||
const onAbort = () => {
|
||||
open.value = false
|
||||
emit("abort")
|
||||
}
|
||||
|
||||
const onConfirm = () => {
|
||||
open.value = false
|
||||
emit("confirm")
|
||||
}
|
||||
</script>
|
||||
|
||||
<i18n lang="yaml">
|
||||
de:
|
||||
abort: Abbrechen
|
||||
confirm: Bestätigen
|
||||
|
||||
en:
|
||||
abort: Abort
|
||||
confirm: Confirm
|
||||
</i18n>
|
||||
@ -1,29 +1,58 @@
|
||||
<template>
|
||||
<button v-bind="$attrs" type="button" aria-haspopup="dialog" aria-expanded="false" :aria-label="label"
|
||||
class="--prevent-on-load-init " @click="$emit('open')">
|
||||
<slot name="trigger">open</slot>
|
||||
<button
|
||||
v-if="$slots.trigger || label"
|
||||
v-bind="$attrs"
|
||||
type="button"
|
||||
aria-haspopup="dialog"
|
||||
aria-expanded="false"
|
||||
:aria-label="label"
|
||||
class="--prevent-on-load-init"
|
||||
@click="$emit('open')"
|
||||
>
|
||||
<slot name="trigger">
|
||||
{{ label }}
|
||||
</slot>
|
||||
</button>
|
||||
|
||||
<div :id class="overlay modal overlay-open:opacity-100 hidden overlay-open:duration-300" role="dialog" ref="modalRef"
|
||||
tabindex="-1">
|
||||
<div
|
||||
:id
|
||||
ref="modalRef"
|
||||
class="overlay modal overlay-open:opacity-100 hidden overlay-open:duration-300 modal-middle"
|
||||
role="dialog"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="overlay-animation-target overlay-open:mt-4 overlay-open:duration-500 mt-12 transition-all ease-out modal-dialog overlay-open:opacity-100">
|
||||
<div class="modal-content">
|
||||
class="overlay-animation-target overlay-open:mt-4 overlay-open:duration-500 mt-12 transition-all ease-out modal-dialog overlay-open:opacity-100"
|
||||
>
|
||||
<div class="modal-content gap-2">
|
||||
<div class="modal-header">
|
||||
<slot name="title">
|
||||
<h3 v-if="title" class="modal-title text-base sm:text-lg">
|
||||
<div
|
||||
v-if="title || $slots.title"
|
||||
class="modal-title"
|
||||
>
|
||||
<slot name="title">
|
||||
{{ title }}
|
||||
</h3>
|
||||
</slot>
|
||||
</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
|
||||
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 py-1">
|
||||
|
||||
<div class="modal-body text-sm sm:text-base">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<div class="modal-footer flex-wrap">
|
||||
<slot name="buttons" />
|
||||
</div>
|
||||
@ -33,65 +62,50 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { HSOverlay } from "flyonui/flyonui";
|
||||
import type { HSOverlay } from 'flyonui/flyonui'
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
});
|
||||
defineProps<{ title?: string; label?: string }>()
|
||||
|
||||
defineProps<{ title?: string; label?: string }>();
|
||||
const emit = defineEmits(['open', 'close'])
|
||||
|
||||
defineEmits(["open", "close"]);
|
||||
const id = useId()
|
||||
|
||||
const id = useId();
|
||||
const open = defineModel<boolean>('open', { default: false })
|
||||
|
||||
const open = defineModel<boolean>("open", { default: false });
|
||||
const { t } = useI18n()
|
||||
|
||||
const { t } = useI18n();
|
||||
const modalRef = useTemplateRef('modalRef')
|
||||
|
||||
const modalRef = useTemplateRef("modalRef");
|
||||
defineExpose({ modalRef })
|
||||
|
||||
defineExpose({ modalRef });
|
||||
|
||||
const modal = ref<HSOverlay>();
|
||||
const modal = ref<HSOverlay>()
|
||||
|
||||
watch(open, async () => {
|
||||
console.log("watch open modal", open.value, modal.value);
|
||||
if (open.value) {
|
||||
await modal.value?.open();
|
||||
await modal.value?.open()
|
||||
} else {
|
||||
await modal.value?.close(true);
|
||||
//HSOverlay.close(`#${id}`);
|
||||
//console.log("close dialog");
|
||||
await modal.value?.close(true)
|
||||
emit('close')
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
if (!modalRef.value) return;
|
||||
// flyonui has a problem importing HSOverlay at component level due to ssr
|
||||
// that's the workaround I found
|
||||
//const flyonui = await import("flyonui/flyonui");
|
||||
if (!modalRef.value) return
|
||||
|
||||
modal.value = new window.HSOverlay(modalRef.value, {
|
||||
isClosePrev: true,
|
||||
});
|
||||
})
|
||||
|
||||
modal.value.on("close", () => {
|
||||
console.log("on close", open.value);
|
||||
open.value = false;
|
||||
});
|
||||
/* modal.value.on("open", () => {
|
||||
console.log("on open", open.value);
|
||||
open.value = true;
|
||||
}); */
|
||||
});
|
||||
modal.value.on('close', () => {
|
||||
open.value = false
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<i18n lang="json">{
|
||||
"de": {
|
||||
"close": "Schließen"
|
||||
},
|
||||
"en": {
|
||||
"close": "Close"
|
||||
}
|
||||
}</i18n>
|
||||
<i18n lang="yaml">
|
||||
de:
|
||||
close: Schließen
|
||||
|
||||
en:
|
||||
close: Close
|
||||
</i18n>
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
<template>
|
||||
<div class="dropdown relative inline-flex">
|
||||
<button :id class="dropdown-toggle " v-bind="$attrs" aria-haspopup="menu" aria-expanded="false" :aria-label="label">
|
||||
<button :id class="dropdown-toggle" v-bind="$attrs" aria-haspopup="menu" aria-expanded="false" :aria-label="label">
|
||||
<slot name="activator">
|
||||
{{ label }}
|
||||
<span class="icon-[tabler--chevron-down] dropdown-open:rotate-180 size-4">
|
||||
</span>
|
||||
<span class="icon-[tabler--chevron-down] dropdown-open:rotate-180 size-4"/>
|
||||
</slot>
|
||||
</button>
|
||||
|
||||
<ul class="dropdown-menu dropdown-open:opacity-100 hidden min-w-28" role="menu" aria-orientation="vertical"
|
||||
<ul
|
||||
class="dropdown-menu dropdown-open:opacity-100 hidden min-w-28" role="menu" aria-orientation="vertical"
|
||||
:aria-labelledby="id">
|
||||
|
||||
<slot name="items">
|
||||
|
||||
|
||||
<li v-for="item in items" :is="itemIs" class="dropdown-item" @click="$emit('select', item)">
|
||||
<li :is="itemIs" v-for="item in items" class="dropdown-item" @click="$emit('select', item)">
|
||||
<slot name="item" :item>
|
||||
{{ item }}
|
||||
</slot>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<UiDropdown :items="availableLocales" @select="(locale) => $emit('select', locale)"
|
||||
class="btn btn-primary btn-outline">
|
||||
<UiDropdown
|
||||
:items="availableLocales" class="btn btn-primary btn-outline"
|
||||
@select="(locale) => $emit('select', locale)">
|
||||
<template #activator>
|
||||
|
||||
<Icon :name="flags[locale]" />
|
||||
@ -20,7 +21,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { type Locale } from 'vue-i18n'
|
||||
import type { Locale } from 'vue-i18n'
|
||||
|
||||
const flags = {
|
||||
de: 'emojione:flag-for-germany',
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<UiDropdown :items="availableThemes" @select="(theme) => $emit('select', theme)" class="btn btn-primary btn-outline">
|
||||
<UiDropdown :items="availableThemes" class="btn btn-primary btn-outline" @select="(theme) => $emit('select', theme)">
|
||||
<template #activator>
|
||||
<Icon :name="currentTheme.icon" />
|
||||
</template>
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
<template>
|
||||
<div>
|
||||
<fieldset class="join w-full pt-0.5">
|
||||
<fieldset class="join w-full pt-1.5 " v-bind="$attrs">
|
||||
<slot name="prepend" />
|
||||
|
||||
<div class="input join-item">
|
||||
<Icon v-if="prependIcon" :name="prependIcon" class="my-auto shrink-0" />
|
||||
|
||||
<div class="input-floating grow">
|
||||
<input :id :name="name ?? id" :placeholder="placeholder || label" :type :autofocus class="ps-3"
|
||||
v-bind="$attrs" v-model="input" ref="inputRef" :readonly="read_only" />
|
||||
<input
|
||||
:id ref="inputRef" v-model="input" :name="name ?? id" :placeholder="placeholder || label" :type
|
||||
:autofocus class="ps-3" :readonly="read_only" >
|
||||
<label class="input-floating-label" :for="id">{{ label }}</label>
|
||||
</div>
|
||||
|
||||
@ -17,13 +18,14 @@
|
||||
|
||||
<slot name="append" class="h-auto" />
|
||||
|
||||
<UiButton v-if="withCopyButton" class="btn-outline btn-accent btn-square join-item h-auto"
|
||||
<UiButton
|
||||
v-if="withCopyButton" class="btn-outline btn-accent btn-square join-item h-auto"
|
||||
@click="copy(`${input}`)">
|
||||
<Icon :name="copied ? 'mdi:check' : 'mdi:content-copy'" />
|
||||
</UiButton>
|
||||
</fieldset>
|
||||
|
||||
<span class="flex flex-col px-2 pt-0.5" v-show="errors">
|
||||
<span v-show="errors" class="flex flex-col px-2 pt-0.5">
|
||||
<span v-for="error in errors" class="label-text-alt text-error">
|
||||
{{ error }}
|
||||
</span>
|
||||
@ -32,7 +34,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { type ZodSchema } from "zod";
|
||||
import type { ZodSchema } from "zod";
|
||||
|
||||
const inputRef = useTemplateRef("inputRef");
|
||||
defineExpose({ inputRef });
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<UiInput :check-input :label="label || t('password')" :placeholder="placeholder || t('password')" :rules :type="type"
|
||||
:autofocus v-model="value">
|
||||
<UiInput
|
||||
v-model="value" :check-input :label="label || t('password')" :placeholder="placeholder || t('password')" :rules
|
||||
:type="type" :autofocus>
|
||||
<template #append>
|
||||
<UiButton class="btn-outline btn-accent btn-square h-auto" @click="tooglePasswordType">
|
||||
<Icon :name="type === 'password' ? 'mdi:eye-off' : 'mdi:eye'" />
|
||||
|
||||
@ -1,51 +1,59 @@
|
||||
<template>
|
||||
<svg id="logo" class="fill-current stroke-current w-[160px]" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
<svg
|
||||
id="logo" class="fill-current stroke-current w-[160px]" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 286.3 85" xml:space="preserve">
|
||||
<switch>
|
||||
<g>
|
||||
<g class="logo-imagesss">
|
||||
<circle fill="white" cx="42.5" cy="42.5" r="40"></circle>
|
||||
<path d="M42.3,83.4c-22.6,0-40.9-18.4-40.9-40.9c0-22.6,18.4-40.9,40.9-40.9c22.6,0,40.9,18.4,40.9,40.9
|
||||
<circle fill="white" cx="42.5" cy="42.5" r="40"/>
|
||||
<path
|
||||
d="M42.3,83.4c-22.6,0-40.9-18.4-40.9-40.9c0-22.6,18.4-40.9,40.9-40.9c22.6,0,40.9,18.4,40.9,40.9
|
||||
C83.3,65.1,64.9,83.4,42.3,83.4z M42.3,5.8C22.1,5.8,5.7,22.3,5.7,42.5s16.5,36.7,36.7,36.7S79,62.7,79,42.5S62.6,5.8,42.3,5.8z
|
||||
"></path>
|
||||
"/>
|
||||
<g>
|
||||
<g>
|
||||
<polygon points="38.8,69.8 38.8,31.7 22.3,31.7 22.3,38.5 29.8,38.5 29.8,69.8 "></polygon>
|
||||
<path d="M34.1,13.2c-3.3,0-6,2.6-6,5.9c0,3.3,2.6,6,5.9,6c3.3,0,6-2.6,6-6
|
||||
C39.9,15.9,37.3,13.2,34.1,13.2z"></path>
|
||||
<polygon points="38.8,69.8 38.8,31.7 22.3,31.7 22.3,38.5 29.8,38.5 29.8,69.8 "/>
|
||||
<path
|
||||
d="M34.1,13.2c-3.3,0-6,2.6-6,5.9c0,3.3,2.6,6,5.9,6c3.3,0,6-2.6,6-6
|
||||
C39.9,15.9,37.3,13.2,34.1,13.2z"/>
|
||||
</g>
|
||||
<g>
|
||||
<polygon points="45.9,69.8 45.9,31.7 62.4,31.7 62.4,38.5 54.9,38.5 54.9,69.8 "></polygon>
|
||||
<path d="M50.6,13.2c3.3,0,6,2.6,6,5.9c0,3.3-2.6,6-5.9,6c-3.3,0-6-2.6-6-6
|
||||
C44.8,15.9,47.4,13.2,50.6,13.2z"></path>
|
||||
<polygon points="45.9,69.8 45.9,31.7 62.4,31.7 62.4,38.5 54.9,38.5 54.9,69.8 "/>
|
||||
<path
|
||||
d="M50.6,13.2c3.3,0,6,2.6,6,5.9c0,3.3-2.6,6-5.9,6c-3.3,0-6-2.6-6-6
|
||||
C44.8,15.9,47.4,13.2,50.6,13.2z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g class="logo-textsss">
|
||||
<path
|
||||
d="M136.1,63.6c-4,0-5.3-2.6-5.3-6V38.5h10.6v-6.7h-10.6v-6.7h-9c0,7,0,29.1,0,32.7
|
||||
c0,4.2,1.6,7.5,3.8,9.7c2.3,2.2,5.6,3.3,9.8,3.3c5.1,0,8.4-1.8,10.6-4.2l-4.7-6C140.2,62.1,138.5,63.6,136.1,63.6z">
|
||||
</path>
|
||||
<path d="M217.7,30.7c-4.9,0-8.2,1.6-10.4,3.8c-2.2-2.2-5.5-3.8-10.4-3.8c-15,0-14.9,12.1-14.9,15
|
||||
c0,4.2,1.6,7.5,3.8,9.7c2.3,2.2,5.6,3.3,9.8,3.3c5.1,0,8.4-1.8,10.6-4.2l-4.7-6C140.2,62.1,138.5,63.6,136.1,63.6z"/>
|
||||
<path
|
||||
d="M217.7,30.7c-4.9,0-8.2,1.6-10.4,3.8c-2.2-2.2-5.5-3.8-10.4-3.8c-15,0-14.9,12.1-14.9,15
|
||||
s0,24.1,0,24.1h9V45.7c0-8.5,4.9-8.3,5.9-8.3c1,0,5.9-0.3,5.9,8.3v24.1h0h9h0V45.7c0-8.5,4.9-8.3,5.9-8.3c1,0,5.9-0.3,5.9,8.3
|
||||
v24.1h9c0,0,0-21.2,0-24.1C232.6,42.8,232.7,30.7,217.7,30.7z"></path>
|
||||
<path d="M273.2,46.4c-4.3-1.4-6-2.5-6-5.2c0-2,1.1-3.8,4.3-3.8c3.2,0,4.5,3.3,5.1,4.8
|
||||
v24.1h9c0,0,0-21.2,0-24.1C232.6,42.8,232.7,30.7,217.7,30.7z"/>
|
||||
<path
|
||||
d="M273.2,46.4c-4.3-1.4-6-2.5-6-5.2c0-2,1.1-3.8,4.3-3.8c3.2,0,4.5,3.3,5.1,4.8
|
||||
c2.7-1.5,5.3-2.9,6.6-3.6c-2.5-6-6.3-7.9-12-7.9c-8,0-11.7,5.5-11.7,10.6c0,6.5,2.9,9.8,11.2,12.2c6,1.8,6.5,4.7,6.2,6.2
|
||||
c-0.3,1.7-1.6,3.6-5.3,3.6c-3.6,0-5.8-3.8-6.8-5.4c-1.8,1.1-3.4,2.1-6.4,3.8c2.1,5,6.8,9.1,13.5,9.1c7.9,0,12.9-5.1,12.9-12.1
|
||||
C284.9,51,279.6,48.5,273.2,46.4z"></path>
|
||||
C284.9,51,279.6,48.5,273.2,46.4z"/>
|
||||
<g>
|
||||
<polygon points="239.7,69.8 239.7,31.7 256.2,31.7 256.2,38.5 248.7,38.5 248.7,69.8 "></polygon>
|
||||
<path d="M244.4,13.2c3.3,0,6,2.6,6,5.9c0,3.3-2.6,6-5.9,6c-3.3,0-6-2.6-6-6
|
||||
C238.6,15.9,241.2,13.2,244.4,13.2z"></path>
|
||||
<polygon points="239.7,69.8 239.7,31.7 256.2,31.7 256.2,38.5 248.7,38.5 248.7,69.8 "/>
|
||||
<path
|
||||
d="M244.4,13.2c3.3,0,6,2.6,6,5.9c0,3.3-2.6,6-5.9,6c-3.3,0-6-2.6-6-6
|
||||
C238.6,15.9,241.2,13.2,244.4,13.2z"/>
|
||||
</g>
|
||||
<g>
|
||||
<polygon points="114.7,69.8 114.7,31.7 98.1,31.7 98.1,38.5 105.7,38.5 105.7,69.8 "></polygon>
|
||||
<path d="M110,13.2c-3.3,0-6,2.6-6,5.9c0,3.3,2.6,6,5.9,6c3.3,0,6-2.6,6-6C115.8,15.9,113.2,13.2,110,13.2
|
||||
z"></path>
|
||||
<polygon points="114.7,69.8 114.7,31.7 98.1,31.7 98.1,38.5 105.7,38.5 105.7,69.8 "/>
|
||||
<path
|
||||
d="M110,13.2c-3.3,0-6,2.6-6,5.9c0,3.3,2.6,6,5.9,6c3.3,0,6-2.6,6-6C115.8,15.9,113.2,13.2,110,13.2
|
||||
z"/>
|
||||
</g>
|
||||
<path d="M176.4,52.4v-3.7c0-12.3-4.7-18-14.8-18c-9.3,0-14.7,6.6-14.7,18v4c0,11.5,5.8,18.2,15.8,18.2
|
||||
<path
|
||||
d="M176.4,52.4v-3.7c0-12.3-4.7-18-14.8-18c-9.3,0-14.7,6.6-14.7,18v4c0,11.5,5.8,18.2,15.8,18.2
|
||||
c6.6,0,10.8-3.7,12.7-7.9c-2.2-1.4-4.6-2.8-6.1-3.8c-1,1.7-2.9,4.4-6.7,4.4c-5.8,0-7-5.9-7-10.9v-0.2H176.4z M155.7,45.7
|
||||
c0.2-7.1,3.3-8.2,6-8.2c2.6,0,5.9,1,6,8.2H155.7z"></path>
|
||||
c0.2-7.1,3.3-8.2,6-8.2c2.6,0,5.9,1,6,8.2H155.7z"/>
|
||||
</g>
|
||||
</g>
|
||||
</switch>
|
||||
|
||||
@ -1,14 +1,23 @@
|
||||
<template>
|
||||
<div class="tooltip [--prevent-popper:false]">
|
||||
<div class="tooltip-toggle" aria-label="Tooltip">
|
||||
<div
|
||||
class="tooltip-toggle"
|
||||
aria-label="Tooltip"
|
||||
>
|
||||
<slot>
|
||||
<button class="btn btn-square">
|
||||
<Icon name="mdi:chevron-up-box-outline" />
|
||||
</button>
|
||||
</slot>
|
||||
|
||||
<span class="tooltip-content tooltip-shown:opacity-100 tooltip-shown:visible z-40" role="tooltip">
|
||||
<span class="tooltip-body" v-bind="$attrs">
|
||||
<span
|
||||
class="tooltip-content tooltip-shown:opacity-100 tooltip-shown:visible z-40"
|
||||
role="tooltip"
|
||||
>
|
||||
<span
|
||||
class="tooltip-body"
|
||||
v-bind="$attrs"
|
||||
>
|
||||
{{ tooltip }}
|
||||
</span>
|
||||
</span>
|
||||
@ -17,7 +26,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { PropType } from 'vue';
|
||||
import type { PropType } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
direction: {
|
||||
@ -38,15 +47,18 @@ const props = defineProps({
|
||||
default: 'top',
|
||||
},
|
||||
|
||||
tooltip: String,
|
||||
tooltip: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
|
||||
trigger: {
|
||||
type: String as PropType<'focus' | 'hover' | 'click'>,
|
||||
default: 'hover',
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
});
|
||||
</script>
|
||||
})
|
||||
</script>
|
||||
|
||||
26
src/components/ui/tree/file.vue
Normal file
26
src/components/ui/tree/file.vue
Normal file
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div
|
||||
class="tree-view-selected:bg-base-200/60 dragged:bg-primary/20 dragged:rounded nested-4 cursor-pointer rounded-md px-2"
|
||||
role="treeitem" :data-tree-view-item="JSON.stringify({
|
||||
value,
|
||||
isDir: false,
|
||||
})
|
||||
">
|
||||
<div class="flex items-center gap-x-3">
|
||||
<span class="icon-[tabler--file] text-base-content size-4 flex-shrink-0"/>
|
||||
<div class="grow">
|
||||
<span class="text-base-content">{{ value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps({
|
||||
value: String,
|
||||
});
|
||||
|
||||
const id = useId();
|
||||
const controlId = useId();
|
||||
const isActive = ref(false);
|
||||
</script>
|
||||
204
src/components/ui/tree/folder.vue
Normal file
204
src/components/ui/tree/folder.vue
Normal file
@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<div :id ref="folderRef" data-nested-draggable="" :value class="">
|
||||
<div
|
||||
isDir :data-tree-view-item="JSON.stringify({ value })"
|
||||
class="accordion-item active motion-preset-slide-left motion-ease-spring-bouncier" :class="{
|
||||
'selected': isActive?.value,
|
||||
'text-base-content': !color,
|
||||
}" role="treeitem" :style="{ color: color || '' }">
|
||||
<div
|
||||
class="accordion-heading tree-view-selected:bg-primary/80 flex items-center gap-x-0.5 rounded-md hover:bg-primary/20 group">
|
||||
<button class="accordion-toggle btn btn-sm btn-circle btn-text shrink-0" :aria-controls="controlId">
|
||||
<Icon name="tabler:plus" class="accordion-item-active:rotate-45 size-4 transition-all duration-300" />
|
||||
</button>
|
||||
<button class="cursor-pointer rounded-md px-1.5 w-full" @click.stop="$emit('click', value)">
|
||||
<div class="flex items-center gap-x-3">
|
||||
<Icon v-if="icon" :name="icon || 'mdi:folder-outline'" class="shrink-0" />
|
||||
|
||||
<div class="flex whitespace-nowrap">
|
||||
{{ value }}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
class="sticky right-2 btn btn-sm btn-circle btn-text shrink-0 group-hover:flex hidden ml-auto"
|
||||
@click.stop="$emit('edit', value)">
|
||||
<Icon name="mdi:pencil-outline" class="size-4 transition-all duration-300" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
:id="controlId" class="accordion-content w-full transition-[height] duration-300" role="group"
|
||||
:aria-labelledby="id">
|
||||
<div ref="childRef" class="tree-view-space min-h-1" data-nested-draggable="">
|
||||
<slot>
|
||||
<template
|
||||
v-for="(item, index) in children?.sort(
|
||||
(a, b) => a.order ?? 0 - (b.order ?? 0)
|
||||
)" :key="item.id!" :data-tree-view-item="JSON.stringify({ value: item.value })">
|
||||
<UiTreeFolder
|
||||
v-if="item.type === 'folder'" :icon="item.icon || 'tabler:folder'"
|
||||
v-bind="item" @click="(value) => $emit('click', value)" @edit="(value) => $emit('edit', value)" />
|
||||
|
||||
<UiTreeFile v-if="item.type === 'file'" v-bind="item" />
|
||||
</template>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { HSAccordion } from 'flyonui/flyonui';
|
||||
import Sortable from 'sortablejs';
|
||||
|
||||
const props = defineProps({
|
||||
value: String,
|
||||
icon: {
|
||||
type: [String, null],
|
||||
default: 'tabler:folder',
|
||||
},
|
||||
children: {
|
||||
type: Array as PropType<ITreeItem[] | null>,
|
||||
default: () => [],
|
||||
},
|
||||
name: String,
|
||||
color: [String, null],
|
||||
isActive: Object as PropType<ComputedRef<boolean>>,
|
||||
});
|
||||
|
||||
const id = useId();
|
||||
const controlId = useId();
|
||||
const folderRef = ref<HTMLElement>();
|
||||
const childRef = ref<HTMLElement>();
|
||||
|
||||
defineEmits<{
|
||||
click: [value: string | undefined];
|
||||
edit: [value: string | undefined];
|
||||
}>();
|
||||
|
||||
const { groups } = storeToRefs(useVaultGroupStore());
|
||||
const sorty = ref([]);
|
||||
onMounted(() => {
|
||||
if (folderRef.value && childRef.value)
|
||||
[folderRef.value, childRef.value].forEach((element) => {
|
||||
const create = Sortable.create(element, {
|
||||
animation: 150,
|
||||
ghostClass: 'bg-opacity-20',
|
||||
group: 'vault',
|
||||
swapThreshold: 0.65,
|
||||
fallbackOnBody: true,
|
||||
fallbackTolerance: 3,
|
||||
|
||||
onEnd: (evt) => {
|
||||
const { item } = evt;
|
||||
|
||||
/* if (item.classList.contains('accordion')) {
|
||||
let existingInstance = HSAccordion.getInstance(item, true);
|
||||
let updatedInstance;
|
||||
|
||||
existingInstance.element.update();
|
||||
updatedInstance = HSAccordion.getInstance(item, true);
|
||||
window.$hsAccordionCollection.map((el) => {
|
||||
if (
|
||||
el.element.el !== existingInstance.element.el &&
|
||||
el.element.group === existingInstance.element.group &&
|
||||
el.element.el.closest('.accordion') &&
|
||||
el.element.el.classList.contains('active') &&
|
||||
existingInstance.element.el.classList.contains('active')
|
||||
)
|
||||
el.element.hide();
|
||||
|
||||
return el;
|
||||
});
|
||||
}
|
||||
|
||||
if (!!item.hasAttribute('data-tree-view-item')) {
|
||||
const treeViewItem = HSTreeView.getInstance(
|
||||
item.closest('[data-tree-view]'),
|
||||
true
|
||||
);
|
||||
|
||||
treeViewItem.element.update();
|
||||
} */
|
||||
},
|
||||
onUpdate: (evt) => {
|
||||
console.log('update', evt.item, props.value, sorty.value);
|
||||
},
|
||||
});
|
||||
/* const sortable = new Sortable(element, {
|
||||
animation: 150,
|
||||
ghostClass: 'bg-opacity-20',
|
||||
group: 'vault',
|
||||
swapThreshold: 0.65,
|
||||
fallbackOnBody: true,
|
||||
fallbackTolerance: 3,
|
||||
|
||||
onEnd: (evt) => {
|
||||
console.log(
|
||||
'end',
|
||||
evt.item,
|
||||
props.value,
|
||||
sorty.value.at(0).toArray(),
|
||||
sorty.value.at(1).toArray()
|
||||
);
|
||||
},
|
||||
onUpdate: (evt) => {
|
||||
console.log('update', evt.item, props.value, sorty.value);
|
||||
},
|
||||
});
|
||||
sorty.value.push(sortable); */
|
||||
});
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
const draggable = document.querySelectorAll('[data-nested-draggable]');
|
||||
|
||||
draggable.forEach((el) => {
|
||||
const options = {
|
||||
group: 'nested',
|
||||
animation: 150,
|
||||
fallbackOnBody: true,
|
||||
swapThreshold: 0.65,
|
||||
ghostClass: 'dragged',
|
||||
onEnd: (evt) => {
|
||||
const { item, items } = evt;
|
||||
console.log('standard', item, evt);
|
||||
if (item.classList.contains('accordion')) {
|
||||
const existingInstance = HSAccordion.getInstance(item, true);
|
||||
let updatedInstance;
|
||||
|
||||
existingInstance.element.update();
|
||||
updatedInstance = HSAccordion.getInstance(item, true);
|
||||
window.$hsAccordionCollection.map((el) => {
|
||||
if (
|
||||
el.element.el !== existingInstance.element.el &&
|
||||
el.element.group === existingInstance.element.group &&
|
||||
el.element.el.closest('.accordion') &&
|
||||
el.element.el.classList.contains('active') &&
|
||||
existingInstance.element.el.classList.contains('active')
|
||||
)
|
||||
el.element.hide();
|
||||
|
||||
return el;
|
||||
});
|
||||
}
|
||||
|
||||
if (item.hasAttribute('data-tree-view-item')) {
|
||||
const treeViewItem = HSTreeView.getInstance(
|
||||
item.closest('[data-tree-view]'),
|
||||
true
|
||||
);
|
||||
|
||||
treeViewItem.element.update();
|
||||
}
|
||||
},
|
||||
};
|
||||
const data = el.getAttribute('data-nested-draggable');
|
||||
const dataOptions = data ? JSON.parse(data) : {};
|
||||
const sortable = new Sortable(el, options);
|
||||
console.log('stand', sortable.toArray());
|
||||
});
|
||||
});
|
||||
</script>
|
||||
5
src/components/ui/tree/index.vue
Normal file
5
src/components/ui/tree/index.vue
Normal file
@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div data-tree-view role="tree" aria-orientation="vertical" class="rounded min-w-fit w-full">
|
||||
<slot/>
|
||||
</div>
|
||||
</template>
|
||||
19
src/components/ui/tree/types.d.ts
vendored
Normal file
19
src/components/ui/tree/types.d.ts
vendored
Normal file
@ -0,0 +1,19 @@
|
||||
interface ITreeItem {
|
||||
id: string | null
|
||||
value: string
|
||||
name: string | null
|
||||
icon?: string | null
|
||||
children?: ITreeItem[] | null
|
||||
type: 'folder' | 'file'
|
||||
color?: string | null
|
||||
order?: number | null
|
||||
parentId?: string | null
|
||||
}
|
||||
|
||||
interface IVaultGroupTreeItem {
|
||||
id?: string | null
|
||||
name: string
|
||||
icon?: string | null
|
||||
children?: IVaultGroupTreeItem[] | null
|
||||
desciption?: string | null
|
||||
}
|
||||
@ -1,28 +1,48 @@
|
||||
<template>
|
||||
<UiDialog :title="t('title')" v-model:open="open"
|
||||
class="btn btn-primary btn-outline shadow-md md:btn-lg shrink-0 flex-1 whitespace-nowrap flex-nowrap">
|
||||
<UiDialog
|
||||
v-model:open="open"
|
||||
: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>
|
||||
|
||||
<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" />
|
||||
<form
|
||||
class="flex flex-col gap-4"
|
||||
@submit="onCreateAsync"
|
||||
>
|
||||
<UiInput
|
||||
v-model="database.name"
|
||||
:check-input="check"
|
||||
:label="t('database.label')"
|
||||
:placeholder="t('database.placeholder')"
|
||||
:rules="vaultDatabaseSchema.name"
|
||||
autofocus
|
||||
prepend-icon="mdi:safe"
|
||||
/>
|
||||
|
||||
<UiInputPassword :check-input="check" :rules="vaultDatabaseSchema.password" prepend-icon="mdi:key-outline"
|
||||
v-model="database.password" />
|
||||
<UiInputPassword
|
||||
v-model="database.password"
|
||||
:check-input="check"
|
||||
:rules="vaultDatabaseSchema.password"
|
||||
prepend-icon="mdi:key-outline"
|
||||
/>
|
||||
</form>
|
||||
|
||||
<template #buttons>
|
||||
<UiButton class="btn-error" @click="onClose">
|
||||
<UiButton
|
||||
class="btn-error"
|
||||
@click="onClose"
|
||||
>
|
||||
{{ t('abort') }}
|
||||
</UiButton>
|
||||
|
||||
<UiButton class="btn-primary" @click="onCreateAsync">
|
||||
<UiButton
|
||||
class="btn-primary"
|
||||
@click="onCreateAsync"
|
||||
>
|
||||
{{ t('create') }}
|
||||
</UiButton>
|
||||
</template>
|
||||
@ -74,7 +94,7 @@ const onCreateAsync = async () => {
|
||||
|
||||
const nameCheck = vaultDatabaseSchema.name.safeParse(database.name)
|
||||
const passwordCheck = vaultDatabaseSchema.password.safeParse(
|
||||
database.password
|
||||
database.password,
|
||||
)
|
||||
|
||||
console.log(
|
||||
@ -82,7 +102,7 @@ const onCreateAsync = async () => {
|
||||
database.name,
|
||||
nameCheck,
|
||||
database.password,
|
||||
passwordCheck
|
||||
passwordCheck,
|
||||
)
|
||||
if (!nameCheck.success || !passwordCheck.success) return
|
||||
|
||||
@ -105,7 +125,7 @@ const onCreateAsync = async () => {
|
||||
console.log('vaultId', vaultId)
|
||||
if (vaultId) {
|
||||
await navigateTo(
|
||||
useLocaleRoute()({ name: 'vaultOverview', params: { vaultId } })
|
||||
useLocaleRoute()({ name: 'vaultOverview', params: { vaultId } }),
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -121,7 +141,8 @@ const onClose = () => {
|
||||
}
|
||||
</script>
|
||||
|
||||
<i18n lang="json">{
|
||||
<i18n lang="json">
|
||||
{
|
||||
"de": {
|
||||
"database": {
|
||||
"label": "Vaultname",
|
||||
@ -146,4 +167,5 @@ const onClose = () => {
|
||||
"abort": "Abort",
|
||||
"description": "Haex Vault for your most secret secrets"
|
||||
}
|
||||
}</i18n>
|
||||
}
|
||||
</i18n>
|
||||
|
||||
@ -1,40 +1,52 @@
|
||||
<template>
|
||||
<UiDialog v-model:open="isOpen" class="btn btn-primary btn-outline shadow-md md:btn-lg shrink-0 flex-1 "
|
||||
@open="onLoadDatabase">
|
||||
<UiDialogConfirm
|
||||
v-model:open="open"
|
||||
class="btn btn-primary btn-outline shadow-md md:btn-lg shrink-0 flex-1"
|
||||
:confirm-label="t('open')"
|
||||
:abort-label="t('abort')"
|
||||
@open="onLoadDatabase"
|
||||
@abort="onAbort"
|
||||
>
|
||||
<template #title>
|
||||
<i18n-t
|
||||
keypath="title"
|
||||
tag="p"
|
||||
class="flex gap-2"
|
||||
>
|
||||
<template #haexvault>
|
||||
<UiTextGradient>HaexVault</UiTextGradient>
|
||||
</template>
|
||||
</i18n-t>
|
||||
<p class="text-sm">{{ path }}</p>
|
||||
</template>
|
||||
|
||||
<template #trigger>
|
||||
|
||||
<Icon name="mdi:folder-open-outline" />
|
||||
{{ t('database.open') }}
|
||||
|
||||
</template>
|
||||
|
||||
<UiInputPassword :check-input="check" :rules="vaultDatabaseSchema.password" @keyup.enter="onOpenDatabase" autofocus
|
||||
prepend-icon="mdi:key-outline" v-model="database.password" />
|
||||
|
||||
<template #buttons>
|
||||
<UiButton class="btn-error" @click="onClose">
|
||||
{{ t('abort') }}
|
||||
</UiButton>
|
||||
|
||||
<UiButton type="submit" class="btn-primary" @click="onOpenDatabase">
|
||||
{{ t('open') }}
|
||||
</UiButton>
|
||||
</template>
|
||||
</UiDialog>
|
||||
<UiInputPassword
|
||||
v-model="database.password"
|
||||
:check-input="check"
|
||||
:rules="vaultDatabaseSchema.password"
|
||||
autofocus
|
||||
prepend-icon="mdi:key-outline"
|
||||
@keyup.enter="onOpenDatabase"
|
||||
/>
|
||||
</UiDialogConfirm>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { open } from '@tauri-apps/plugin-dialog'
|
||||
import { open as openVault } from '@tauri-apps/plugin-dialog'
|
||||
import { vaultDatabaseSchema } from './schema'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const isOpen = defineModel('isOpen', { type: Boolean })
|
||||
const open = defineModel('open', { type: Boolean })
|
||||
|
||||
const props = defineProps({
|
||||
path: String,
|
||||
})
|
||||
const props = defineProps<{
|
||||
path: string
|
||||
}>()
|
||||
|
||||
const check = ref(false)
|
||||
|
||||
@ -62,7 +74,7 @@ initDatabase()
|
||||
const { add } = useSnackbar()
|
||||
|
||||
const handleError = (error: unknown) => {
|
||||
isOpen.value = false
|
||||
open.value = false
|
||||
console.error('handleError', error, typeof error)
|
||||
add({ type: 'error', text: 'Passwort falsch' })
|
||||
}
|
||||
@ -71,7 +83,7 @@ const { openAsync } = useVaultStore()
|
||||
|
||||
const onLoadDatabase = async () => {
|
||||
try {
|
||||
database.path = await open({
|
||||
database.path = await openVault({
|
||||
multiple: false,
|
||||
directory: false,
|
||||
filters: [
|
||||
@ -82,10 +94,9 @@ const onLoadDatabase = async () => {
|
||||
],
|
||||
})
|
||||
|
||||
console.log("database.path", database.path)
|
||||
if (!database.path) return
|
||||
|
||||
isOpen.value = true
|
||||
open.value = true
|
||||
} catch (error) {
|
||||
handleError(error)
|
||||
}
|
||||
@ -100,7 +111,7 @@ const onOpenDatabase = async () => {
|
||||
const path = database.path || props.path
|
||||
const pathCheck = vaultDatabaseSchema.path.safeParse(path)
|
||||
const passwordCheck = vaultDatabaseSchema.password.safeParse(
|
||||
database.password
|
||||
database.password,
|
||||
)
|
||||
|
||||
if (!pathCheck.success || !passwordCheck.success || !path) {
|
||||
@ -124,7 +135,7 @@ const onOpenDatabase = async () => {
|
||||
return
|
||||
}
|
||||
|
||||
onClose()
|
||||
onAbort()
|
||||
|
||||
await navigateTo(
|
||||
localePath({
|
||||
@ -132,7 +143,7 @@ const onOpenDatabase = async () => {
|
||||
params: {
|
||||
vaultId,
|
||||
},
|
||||
})
|
||||
}),
|
||||
)
|
||||
await Promise.allSettled([
|
||||
syncLocaleAsync(),
|
||||
@ -144,25 +155,24 @@ const onOpenDatabase = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
const onClose = () => {
|
||||
const onAbort = () => {
|
||||
initDatabase()
|
||||
isOpen.value = false
|
||||
open.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<i18n lang="json">{
|
||||
"de": {
|
||||
"open": "Öffnen",
|
||||
"abort": "Abbrechen",
|
||||
"database": {
|
||||
"open": "Vault öffnen"
|
||||
}
|
||||
},
|
||||
"en": {
|
||||
"open": "Open",
|
||||
"abort": "Abort",
|
||||
"database": {
|
||||
"open": "Open Vault"
|
||||
}
|
||||
}
|
||||
}</i18n>
|
||||
<i18n lang="yaml">
|
||||
de:
|
||||
open: Öffnen
|
||||
abort: Abbrechen
|
||||
title: '{haexvault} entsperren'
|
||||
database:
|
||||
open: Vault öffnen
|
||||
|
||||
en:
|
||||
open: Open
|
||||
abort: Abort
|
||||
title: Unlock {haexvault}
|
||||
database:
|
||||
open: Open Vault
|
||||
</i18n>
|
||||
|
||||
@ -66,7 +66,6 @@
|
||||
|
||||
<div
|
||||
class="flex flex-col items-center w-full min-h-14 gap-2 py-1"
|
||||
:class="{ '-ml-6': !show }"
|
||||
:style="{ color }"
|
||||
>
|
||||
<Icon
|
||||
@ -91,10 +90,7 @@
|
||||
v-show="!read_only"
|
||||
class="fixed bottom-2 left-0 w-full flex items-center justify-between px-4 md:hidden"
|
||||
>
|
||||
<div
|
||||
class="transition-all duration-500"
|
||||
:class="{ 'pl-96': show }"
|
||||
>
|
||||
<div class="transition-all duration-500">
|
||||
<button
|
||||
class="btn btn-square btn-error btn-outline"
|
||||
@click="onClose"
|
||||
@ -112,7 +108,7 @@
|
||||
<span class="hidden"> {{ t('create') }} </span>
|
||||
</button>
|
||||
</div>
|
||||
<div></div>
|
||||
<div />
|
||||
</div>
|
||||
<!-- <UiButtonAction
|
||||
class=""
|
||||
@ -129,89 +125,86 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { RouteLocationNormalizedLoadedGeneric } from 'vue-router';
|
||||
import type { RouteLocationNormalizedLoadedGeneric } from 'vue-router'
|
||||
|
||||
const { t } = useI18n();
|
||||
const { t } = useI18n()
|
||||
|
||||
const { show } = storeToRefs(useSidebarStore());
|
||||
const read_only = defineModel<boolean>('read_only', { default: false })
|
||||
|
||||
const read_only = defineModel<boolean>('read_only', { default: false });
|
||||
|
||||
const props = defineProps({
|
||||
color: String,
|
||||
hasChanges: Boolean,
|
||||
icon: String,
|
||||
title: String,
|
||||
});
|
||||
const props = defineProps<{
|
||||
color: string
|
||||
hasChanges: boolean
|
||||
icon: string
|
||||
title: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
back: [void];
|
||||
close: [void];
|
||||
reject: [to?: RouteLocationNormalizedLoadedGeneric];
|
||||
submit: [to?: RouteLocationNormalizedLoadedGeneric];
|
||||
}>();
|
||||
back: [void]
|
||||
close: [void]
|
||||
reject: [to?: RouteLocationNormalizedLoadedGeneric]
|
||||
submit: [to?: RouteLocationNormalizedLoadedGeneric]
|
||||
}>()
|
||||
|
||||
const showConfirmation = ref(false);
|
||||
const showConfirmation = ref(false)
|
||||
|
||||
const to = ref<RouteLocationNormalizedLoadedGeneric>();
|
||||
const to = ref<RouteLocationNormalizedLoadedGeneric>()
|
||||
|
||||
const isApprovedForLeave = ref(false);
|
||||
const isApprovedForLeave = ref(false)
|
||||
|
||||
const wantToGoBack = ref(false);
|
||||
const wantToGoBack = ref(false)
|
||||
|
||||
const onSubmit = () => {
|
||||
showConfirmation.value = false;
|
||||
isApprovedForLeave.value = true;
|
||||
showConfirmation.value = false
|
||||
isApprovedForLeave.value = true
|
||||
if (wantToGoBack.value) {
|
||||
wantToGoBack.value = false;
|
||||
read_only.value = true;
|
||||
emit('submit');
|
||||
wantToGoBack.value = false
|
||||
read_only.value = true
|
||||
emit('submit')
|
||||
} else {
|
||||
emit('submit', to.value);
|
||||
emit('submit', to.value)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const onReject = () => {
|
||||
showConfirmation.value = false;
|
||||
isApprovedForLeave.value = true;
|
||||
read_only.value = true;
|
||||
showConfirmation.value = false
|
||||
isApprovedForLeave.value = true
|
||||
read_only.value = true
|
||||
|
||||
if (wantToGoBack.value) {
|
||||
wantToGoBack.value = false;
|
||||
emit('back');
|
||||
} else emit('reject', to.value);
|
||||
};
|
||||
wantToGoBack.value = false
|
||||
emit('back')
|
||||
} else emit('reject', to.value)
|
||||
}
|
||||
|
||||
const onBack = () => {
|
||||
if (props.hasChanges) {
|
||||
wantToGoBack.value = true;
|
||||
showConfirmation.value = true;
|
||||
wantToGoBack.value = true
|
||||
showConfirmation.value = true
|
||||
} else {
|
||||
emit('back');
|
||||
emit('back')
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const onClose = () => {
|
||||
if (props.hasChanges) {
|
||||
showConfirmation.value = true;
|
||||
showConfirmation.value = true
|
||||
} else {
|
||||
emit('close'); //read_only.value = true;
|
||||
emit('close') //read_only.value = true;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const onDelete = () => {};
|
||||
onBeforeRouteLeave((_to, _from, next) => {
|
||||
//console.log('check before leave', _to, _from);
|
||||
to.value = _to;
|
||||
to.value = _to
|
||||
if (isApprovedForLeave.value) {
|
||||
isApprovedForLeave.value = false;
|
||||
next();
|
||||
isApprovedForLeave.value = false
|
||||
next()
|
||||
} else if (props.hasChanges) {
|
||||
showConfirmation.value = true;
|
||||
showConfirmation.value = true
|
||||
} else {
|
||||
next();
|
||||
next()
|
||||
}
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<i18n lang="json">
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
<div class="card-header">
|
||||
<div v-if="$slots.title || title">
|
||||
<Icon :name="icon" />
|
||||
<Icon v-if="icon" :name="icon" />
|
||||
<h5 v-if="title" class="card-title mb-0">
|
||||
{{ title }}
|
||||
</h5>
|
||||
@ -16,7 +16,7 @@
|
||||
<div class="card-body">
|
||||
<slot />
|
||||
aaaaaaaaa
|
||||
<div class="card-actions" v-if="$slots.action">
|
||||
<div v-if="$slots.action" class="card-actions">
|
||||
<slot name="action" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<VaultCardEdit
|
||||
v-if="vaultGroup"
|
||||
v-model:read_only="read_only"
|
||||
:color="vaultGroup.color ?? 'text-base-content'"
|
||||
:has-changes="hasChanges"
|
||||
:icon="vaultGroup.icon ?? 'mdi:folder-outline'"
|
||||
@ -9,42 +10,41 @@
|
||||
@close="$emit('close')"
|
||||
@reject="(to) => $emit('reject', to)"
|
||||
@submit="(to) => $emit('submit', to)"
|
||||
v-model:read_only="read_only"
|
||||
>
|
||||
<div class="flex flex-col gap-4 w-full p-4">
|
||||
<UiInput
|
||||
v-show="!read_only"
|
||||
v-model.trim="vaultGroup.name"
|
||||
:label="t('vaultGroup.name')"
|
||||
:placeholder="t('vaultGroup.name')"
|
||||
:rules="vaultGroupSchema.name"
|
||||
:with-copy-button="read_only"
|
||||
:read_only
|
||||
autofocus
|
||||
v-model.trim="vaultGroup.name"
|
||||
/>
|
||||
|
||||
<UiInput
|
||||
v-show="!read_only || vaultGroup.description?.length"
|
||||
v-model.trim="vaultGroup.description"
|
||||
:read_only
|
||||
:label="t('vaultGroup.description')"
|
||||
:placeholder="t('vaultGroup.description')"
|
||||
:rules="vaultGroupSchema.description"
|
||||
:with-copy-button="read_only"
|
||||
v-model.trim="vaultGroup.description"
|
||||
/>
|
||||
|
||||
<UiColorPicker
|
||||
v-model="vaultGroup.color"
|
||||
:read_only
|
||||
:label="t('vaultGroup.color')"
|
||||
:placeholder="t('vaultGroup.color')"
|
||||
v-model="vaultGroup.color"
|
||||
/>
|
||||
|
||||
<UiIconPicker
|
||||
v-model="vaultGroup.icon"
|
||||
:read_only
|
||||
:label="t('vaultGroup.icon')"
|
||||
:placeholder="t('vaultGroup.icon')"
|
||||
v-model="vaultGroup.icon"
|
||||
/>
|
||||
</div>
|
||||
</VaultCardEdit>
|
||||
|
||||
@ -1,42 +0,0 @@
|
||||
<template>
|
||||
<UiListButton
|
||||
v-if="entry"
|
||||
:key="entry.id"
|
||||
@click="navigateToEntryAsync(entry.id)"
|
||||
class="text-base-content"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8">
|
||||
<Icon
|
||||
v-if="entry.icon || groupIcon"
|
||||
:name="entry.icon || groupIcon!"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col items-start">
|
||||
<div v-if="!entry.title && !entry.username && !entry.url">
|
||||
{{ entry.id }}
|
||||
</div>
|
||||
<div class="font-semibold">
|
||||
{{ entry.title }}
|
||||
</div>
|
||||
<span class="text-sm">
|
||||
{{ entry.username }}
|
||||
</span>
|
||||
<span class="text-sm">
|
||||
{{ entry.url }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</UiListButton>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { SelectVaultEntry } from '~/database/schemas/vault';
|
||||
|
||||
defineProps({
|
||||
entry: Object as PropType<SelectVaultEntry>,
|
||||
groupIcon: [String, null],
|
||||
});
|
||||
|
||||
const { navigateToEntryAsync } = useVaultEntryStore();
|
||||
</script>
|
||||
@ -16,9 +16,9 @@
|
||||
</span>
|
||||
</UiButton>
|
||||
<UiButton
|
||||
ref="abortButtonRef"
|
||||
class="btn-outline focus:bg-primary"
|
||||
tabindex="11"
|
||||
ref="abortButtonRef"
|
||||
@click="showConfirmation = false"
|
||||
>
|
||||
<Icon name="mdi:close" />
|
||||
@ -41,17 +41,16 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const showConfirmation = defineModel<boolean>();
|
||||
const abortButtonRef = useTemplateRef('abortButtonRef');
|
||||
const showConfirmation = defineModel<boolean>()
|
||||
const abortButtonRef = useTemplateRef('abortButtonRef')
|
||||
|
||||
const { t } = useI18n();
|
||||
const { currentScreenSize } = storeToRefs(useUiStore());
|
||||
const { t } = useI18n()
|
||||
|
||||
onUpdated(() => {
|
||||
abortButtonRef.value?.$el.focus();
|
||||
});
|
||||
abortButtonRef.value?.$el.focus()
|
||||
})
|
||||
|
||||
defineEmits(['submit', 'reject']);
|
||||
defineEmits(['submit', 'reject'])
|
||||
</script>
|
||||
|
||||
<i18n lang="json">
|
||||
|
||||
Reference in New Issue
Block a user