mirror of
https://github.com/haexhub/haex-hub.git
synced 2025-12-17 06:30:50 +01:00
back to flyonui
This commit is contained in:
14
src/components/haex/button/index.vue
Normal file
14
src/components/haex/button/index.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<button class="btn join-item" :type>
|
||||
<slot />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps({
|
||||
type: {
|
||||
type: String as PropType<"reset" | "submit" | "button">,
|
||||
default: "button",
|
||||
},
|
||||
});
|
||||
</script>
|
||||
15
src/components/haex/button/outline.vue
Normal file
15
src/components/haex/button/outline.vue
Normal file
@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<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
|
||||
)
|
||||
">
|
||||
<span class="btn-content inline-flex size-full items-center justify-center px-4 py-2 gap-2">
|
||||
<slot />
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { cn } from "@/lib/utils";
|
||||
const { className = "primary" } = defineProps<{ className?: string }>()
|
||||
</script>
|
||||
102
src/components/haex/input/index.vue
Normal file
102
src/components/haex/input/index.vue
Normal file
@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<div>
|
||||
<fieldset class="join w-full">
|
||||
<slot name="prepend" />
|
||||
|
||||
|
||||
<!-- <div class="">
|
||||
-->
|
||||
<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>
|
||||
|
||||
<!-- <div class="">
|
||||
<input :id :name="name ?? id" :placeholder="placeholder || label" :type :autofocus class="" v-bind="$attrs"
|
||||
v-model="input" ref="inputRef" :readonly="read_only" />
|
||||
<label class="floating-label" :for="id">{{ label }}</label>
|
||||
</div> -->
|
||||
<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 " />
|
||||
<Icon v-if="iconAppend" :name="iconAppend" class="my-auto shrink-0" />
|
||||
</label>
|
||||
|
||||
<!-- <Icon v-if="iconAppend" :name="iconAppend" class="my-auto shrink-0" />
|
||||
</div> -->
|
||||
|
||||
<slot name="append" class="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-for="error in errors" class="label-text-alt text-error">
|
||||
{{ error }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<!-- <div class="relative w-full max-w-sm items-center">
|
||||
<span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
|
||||
<Icon v-if="iconPrepend" :name="iconPrepend" class="size-6" />
|
||||
<button>aa</button>
|
||||
</span>
|
||||
|
||||
<Input id="search" type="text" placeholder="Search..." :class="{ 'pl-10': iconPrepend, 'pr-10': iconAppend }" />
|
||||
|
||||
<span class="absolute end-0 inset-y-0 flex items-center justify-center px-2">
|
||||
<Icon v-if="iconAppend" :name="iconAppend" class="size-6" />
|
||||
</span>
|
||||
</div> -->
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { HaexButton } from '#components';
|
||||
import type { ZodSchema } from 'zod';
|
||||
|
||||
const id = useId()
|
||||
|
||||
const props = defineProps<{ iconAppend?: string, iconPrepend?: string, placeholder?: string, type?: string, label?: string, withCopyButton?: boolean, rules?: ZodSchema, read_only?: boolean, autofocus?: boolean, checkInput?: boolean, name?: string }>()
|
||||
|
||||
const inputRef = useTemplateRef('inputRef')
|
||||
|
||||
const input = defineModel<string | number | undefined | null>({
|
||||
default: '',
|
||||
required: true,
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (props.autofocus && inputRef.value) inputRef.value.focus()
|
||||
})
|
||||
|
||||
watch(input, () => checkInput())
|
||||
|
||||
watch(
|
||||
() => props.checkInput,
|
||||
() => {
|
||||
checkInput()
|
||||
}
|
||||
)
|
||||
|
||||
const emit = defineEmits(['error'])
|
||||
|
||||
const errors = defineModel<string[] | undefined>('errors')
|
||||
const checkInput = () => {
|
||||
if (props.rules) {
|
||||
const result = props.rules.safeParse(input.value)
|
||||
//console.log('check result', result.error, props.rules);
|
||||
if (!result.success) {
|
||||
errors.value = result.error.errors.map((error) => error.message)
|
||||
emit('error', errors.value)
|
||||
} else {
|
||||
errors.value = []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const { copy, copied } = useClipboard()
|
||||
</script>
|
||||
@ -1,41 +1,36 @@
|
||||
<template>
|
||||
<UiDropdown
|
||||
activator-class="btn btn-text btn-circle "
|
||||
dropdown-class="[--offset:20]"
|
||||
>
|
||||
<UiDropdown activator-class="btn btn-text btn-circle " dropdown-class="[--offset:20]">
|
||||
<template #activator>
|
||||
<div
|
||||
class="size-9.5 rounded-full items-center justify-center text-base-content text-base"
|
||||
>
|
||||
<div class="size-9.5 rounded-full items-center justify-center text-base-content text-base">
|
||||
<Icon name="mdi:format-list-bulleted" class="size-full p-2" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #items>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-open:opacity-100 hidden min-w-60"
|
||||
role="menu"
|
||||
aria-orientation="vertical"
|
||||
aria-labelledby="dropdown-avatar"
|
||||
>
|
||||
<li>
|
||||
<NuxtLinkLocale class="dropdown-item" :to="{ name: 'haexSettings' }">
|
||||
<span class="icon-[tabler--settings]"></span>
|
||||
{{ t('settings') }}
|
||||
</NuxtLinkLocale>
|
||||
</li>
|
||||
|
||||
<li class="dropdown-footer gap-2">
|
||||
<button
|
||||
class="btn btn-error btn-soft btn-block"
|
||||
@click="onVaultCloseAsync"
|
||||
>
|
||||
<span class="icon-[tabler--logout]"></span>
|
||||
{{ t('vault.close') }}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- <ul class="dropdown-menu dropdown-open:opacity-100 hidden min-w-60" role="menu" aria-orientation="vertical"
|
||||
aria-labelledby="dropdown-avatar"> -->
|
||||
|
||||
<template #items>
|
||||
|
||||
<li>
|
||||
<NuxtLinkLocale class="dropdown-item" :to="{ name: 'haexSettings' }">
|
||||
<span class="icon-[tabler--settings]"></span>
|
||||
{{ t('settings') }}
|
||||
</NuxtLinkLocale>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li class="dropdown-footer gap-2">
|
||||
<button class="btn btn-error btn-soft btn-block" @click="onVaultCloseAsync">
|
||||
<span class="icon-[tabler--logout]"></span>
|
||||
{{ t('vault.close') }}
|
||||
</button>
|
||||
</li>
|
||||
</template>
|
||||
<!--
|
||||
</ul> -->
|
||||
|
||||
</UiDropdown>
|
||||
</template>
|
||||
|
||||
|
||||
14
src/components/ui/button/index.vue
Normal file
14
src/components/ui/button/index.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<button class="btn join-item" :type>
|
||||
<slot />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps({
|
||||
type: {
|
||||
type: String as PropType<"reset" | "submit" | "button">,
|
||||
default: "button",
|
||||
},
|
||||
});
|
||||
</script>
|
||||
97
src/components/ui/dialog/index.vue
Normal file
97
src/components/ui/dialog/index.vue
Normal file
@ -0,0 +1,97 @@
|
||||
<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>
|
||||
|
||||
<div :id class="overlay modal overlay-open:opacity-100 hidden overlay-open:duration-300" role="dialog" ref="modalRef"
|
||||
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">
|
||||
<div class="modal-header">
|
||||
<slot name="title">
|
||||
<h3 v-if="title" class="modal-title text-base sm:text-lg">
|
||||
{{ title }}
|
||||
</h3>
|
||||
</slot>
|
||||
|
||||
<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">
|
||||
<slot />
|
||||
</div>
|
||||
<div class="modal-footer flex-wrap">
|
||||
<slot name="buttons" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { HSOverlay } from "flyonui/flyonui";
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
});
|
||||
|
||||
defineProps<{ title?: string; label?: string }>();
|
||||
|
||||
defineEmits(["open", "close"]);
|
||||
|
||||
const id = useId();
|
||||
|
||||
const open = defineModel<boolean>("open", { default: false });
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const modalRef = useTemplateRef("modalRef");
|
||||
|
||||
defineExpose({ modalRef });
|
||||
|
||||
const modal = ref<HSOverlay>();
|
||||
|
||||
watch(open, async () => {
|
||||
console.log("watch open modal", open.value, modal.value);
|
||||
if (open.value) {
|
||||
await modal.value?.open();
|
||||
} else {
|
||||
await modal.value?.close(true);
|
||||
//HSOverlay.close(`#${id}`);
|
||||
//console.log("close dialog");
|
||||
}
|
||||
});
|
||||
|
||||
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");
|
||||
|
||||
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;
|
||||
}); */
|
||||
});
|
||||
</script>
|
||||
|
||||
<i18n lang="json">{
|
||||
"de": {
|
||||
"close": "Schließen"
|
||||
},
|
||||
"en": {
|
||||
"close": "Close"
|
||||
}
|
||||
}</i18n>
|
||||
44
src/components/ui/dropdown/index.vue
Normal file
44
src/components/ui/dropdown/index.vue
Normal file
@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div class="dropdown relative inline-flex">
|
||||
<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>
|
||||
</slot>
|
||||
</button>
|
||||
|
||||
<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)">
|
||||
<slot name="item" :item>
|
||||
{{ item }}
|
||||
</slot>
|
||||
</li>
|
||||
</slot>
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" generic="T">
|
||||
const { itemIs = "li" } = defineProps<{
|
||||
label?: string;
|
||||
items?: T[];
|
||||
itemIs?: string;
|
||||
activatorClass?: string;
|
||||
}>();
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
});
|
||||
|
||||
defineEmits<{ select: [T] }>();
|
||||
|
||||
const id = useId();
|
||||
</script>
|
||||
33
src/components/ui/dropdown/locale.vue
Normal file
33
src/components/ui/dropdown/locale.vue
Normal file
@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<UiDropdown :items="availableLocales" @select="(locale) => $emit('select', locale)"
|
||||
class="btn btn-primary btn-outline">
|
||||
<template #activator>
|
||||
|
||||
<Icon :name="flags[locale]" />
|
||||
<Icon name="tabler:chevron-down" class="dropdown-open:rotate-180 size-4" />
|
||||
|
||||
</template>
|
||||
|
||||
<template #item="{ item }">
|
||||
<div class="flex gap-2 justify-center">
|
||||
<Icon :name="flags[item]" class="my-auto" />
|
||||
<p>
|
||||
{{ item }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</UiDropdown>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { type Locale } from 'vue-i18n'
|
||||
|
||||
const flags = {
|
||||
de: 'emojione:flag-for-germany',
|
||||
en: 'emojione:flag-for-united-kingdom',
|
||||
}
|
||||
|
||||
const { availableLocales, locale } = useI18n()
|
||||
|
||||
defineEmits<{ select: [Locale] }>()
|
||||
</script>
|
||||
22
src/components/ui/dropdown/theme.vue
Normal file
22
src/components/ui/dropdown/theme.vue
Normal file
@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<UiDropdown :items="availableThemes" @select="(theme) => $emit('select', theme)" class="btn btn-primary btn-outline">
|
||||
<template #activator>
|
||||
<Icon :name="currentTheme.icon" />
|
||||
</template>
|
||||
|
||||
<template #item="{ item }">
|
||||
<div class="flex gap-2 justify-center">
|
||||
<Icon :name="item.icon" class="my-auto" />
|
||||
<p>
|
||||
{{ item.name }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</UiDropdown>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { availableThemes, currentTheme } = storeToRefs(useUiStore())
|
||||
|
||||
defineEmits<{ select: [ITheme] }>()
|
||||
</script>
|
||||
133
src/components/ui/input/index.vue
Normal file
133
src/components/ui/input/index.vue
Normal file
@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<div>
|
||||
<fieldset class="join w-full pt-0.5">
|
||||
<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" />
|
||||
<label class="input-floating-label" :for="id">{{ label }}</label>
|
||||
</div>
|
||||
|
||||
<Icon v-if="appendIcon" :name="appendIcon" class="my-auto shrink-0" />
|
||||
</div>
|
||||
|
||||
<slot name="append" class="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-for="error in errors" class="label-text-alt text-error">
|
||||
{{ error }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { type ZodSchema } from "zod";
|
||||
|
||||
const inputRef = useTemplateRef("inputRef");
|
||||
defineExpose({ inputRef });
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
type: {
|
||||
type: String as PropType<
|
||||
| "button"
|
||||
| "checkbox"
|
||||
| "color"
|
||||
| "date"
|
||||
| "datetime-local"
|
||||
| "email"
|
||||
| "file"
|
||||
| "hidden"
|
||||
| "image"
|
||||
| "month"
|
||||
| "number"
|
||||
| "password"
|
||||
| "radio"
|
||||
| "range"
|
||||
| "reset"
|
||||
| "search"
|
||||
| "submit"
|
||||
| "tel"
|
||||
| "text"
|
||||
| "time"
|
||||
| "url"
|
||||
| "week"
|
||||
>,
|
||||
default: "text",
|
||||
},
|
||||
label: String,
|
||||
name: String,
|
||||
prependIcon: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
prependLabel: String,
|
||||
appendIcon: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
appendLabel: String,
|
||||
rules: Object as PropType<ZodSchema>,
|
||||
checkInput: Boolean,
|
||||
withCopyButton: Boolean,
|
||||
autofocus: Boolean,
|
||||
read_only: Boolean,
|
||||
});
|
||||
|
||||
const input = defineModel<string | number | undefined | null>({
|
||||
default: "",
|
||||
required: true,
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (props.autofocus && inputRef.value) inputRef.value.focus();
|
||||
});
|
||||
|
||||
const errors = defineModel<string[] | undefined>("errors");
|
||||
|
||||
const id = useId();
|
||||
|
||||
watch(input, () => checkInput());
|
||||
|
||||
watch(
|
||||
() => props.checkInput,
|
||||
() => {
|
||||
checkInput();
|
||||
}
|
||||
);
|
||||
|
||||
const emit = defineEmits(["error"]);
|
||||
|
||||
const checkInput = () => {
|
||||
if (props.rules) {
|
||||
const result = props.rules.safeParse(input.value);
|
||||
//console.log('check result', result.error, props.rules);
|
||||
if (!result.success) {
|
||||
errors.value = result.error.errors.map((error) => error.message);
|
||||
emit("error", errors.value);
|
||||
} else {
|
||||
errors.value = [];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const { copy, copied } = useClipboard();
|
||||
</script>
|
||||
42
src/components/ui/input/password.vue
Normal file
42
src/components/ui/input/password.vue
Normal file
@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<UiInput :check-input :label="label || t('password')" :placeholder="placeholder || t('password')" :rules :type="type"
|
||||
:autofocus v-model="value">
|
||||
<template #append>
|
||||
<UiButton class="btn-outline btn-accent btn-square h-auto" @click="tooglePasswordType">
|
||||
<Icon :name="type === 'password' ? 'mdi:eye-off' : 'mdi:eye'" />
|
||||
</UiButton>
|
||||
</template>
|
||||
</UiInput>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { ZodSchema } from "zod";
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const value = defineModel<string | number | null | undefined>();
|
||||
|
||||
defineProps({
|
||||
label: String,
|
||||
placeholder: String,
|
||||
checkInput: Boolean,
|
||||
rules: Object as PropType<ZodSchema>,
|
||||
autofocus: Boolean,
|
||||
});
|
||||
|
||||
const type = ref<"password" | "text">("password");
|
||||
|
||||
const tooglePasswordType = () => {
|
||||
type.value = type.value === "password" ? "text" : "password";
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<i18n lang="json">{
|
||||
"de": {
|
||||
"password": "Passwort"
|
||||
},
|
||||
"en": {
|
||||
"password": "Password"
|
||||
}
|
||||
}</i18n>
|
||||
53
src/components/ui/logo/itemis.vue
Normal file
53
src/components/ui/logo/itemis.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<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
|
||||
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>
|
||||
</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>
|
||||
</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
|
||||
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
|
||||
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>
|
||||
<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>
|
||||
</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>
|
||||
</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
|
||||
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>
|
||||
</g>
|
||||
</g>
|
||||
</switch>
|
||||
</svg>
|
||||
</template>
|
||||
5
src/components/ui/text/gradient.vue
Normal file
5
src/components/ui/text/gradient.vue
Normal file
@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<p class="bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent font-black">
|
||||
<slot />
|
||||
</p>
|
||||
</template>
|
||||
52
src/components/ui/tooltip/index.vue
Normal file
52
src/components/ui/tooltip/index.vue
Normal file
@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<div class="tooltip [--prevent-popper:false]">
|
||||
<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">
|
||||
{{ tooltip }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { PropType } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
direction: {
|
||||
type: String as PropType<
|
||||
| 'top'
|
||||
| 'top-start'
|
||||
| 'top-end'
|
||||
| 'bottom'
|
||||
| 'bottom-start'
|
||||
| 'bottom-end'
|
||||
| 'right'
|
||||
| 'right-start'
|
||||
| 'right-end'
|
||||
| 'left'
|
||||
| 'left-start'
|
||||
| 'left-end'
|
||||
>,
|
||||
default: 'top',
|
||||
},
|
||||
|
||||
tooltip: String,
|
||||
|
||||
trigger: {
|
||||
type: String as PropType<'focus' | 'hover' | 'click'>,
|
||||
default: 'hover',
|
||||
},
|
||||
});
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
});
|
||||
</script>
|
||||
@ -1,41 +1,32 @@
|
||||
<template>
|
||||
<Dialog>
|
||||
<!-- class="btn btn-primary btn-outline shadow-md md:btn-lg shrink-0 flex-1 whitespace-nowrap flex-nowrap" -->
|
||||
<DialogTrigger as-child>
|
||||
<Button>
|
||||
<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">
|
||||
<template #trigger>
|
||||
|
||||
<Icon name="mdi:plus" />
|
||||
{{ t('database.create') }}
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit profile</DialogTitle>
|
||||
<DialogDescription>
|
||||
Make changes to your profile here. Click save when you're done.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<Icon name="mdi:plus" />
|
||||
{{ t('database.create') }}
|
||||
|
||||
<form class="flex flex-col gap-4" @submit="onCreateAsync">
|
||||
<Input :check-input="check" :label="t('database.label')" :placeholder="t('database.placeholder')"
|
||||
:rules="vaultDatabaseSchema.name" autofocus prepend-icon="mdi:safe" v-model="database.name" />
|
||||
</template>
|
||||
|
||||
<!-- <UiInputPassword :check-input="check" :rules="vaultDatabaseSchema.password" prepend-icon="mdi:key-outline"
|
||||
v-model="database.password" /> -->
|
||||
</form>
|
||||
<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" />
|
||||
|
||||
<DialogFooter>
|
||||
<Button class="btn-error" @click="onClose">
|
||||
{{ t('abort') }}
|
||||
</Button>
|
||||
<UiInputPassword :check-input="check" :rules="vaultDatabaseSchema.password" prepend-icon="mdi:key-outline"
|
||||
v-model="database.password" />
|
||||
</form>
|
||||
|
||||
<Button class="btn-primary" @click="onCreateAsync">
|
||||
{{ t('create') }}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<template #buttons>
|
||||
<UiButton class="btn-error" @click="onClose">
|
||||
{{ t('abort') }}
|
||||
</UiButton>
|
||||
|
||||
<UiButton class="btn-primary" @click="onCreateAsync">
|
||||
{{ t('create') }}
|
||||
</UiButton>
|
||||
</template>
|
||||
</UiDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -43,7 +34,6 @@ 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 +66,7 @@ const initDatabase = () => {
|
||||
|
||||
initDatabase()
|
||||
|
||||
|
||||
const { add } = useSnackbar()
|
||||
const { createAsync } = useVaultStore()
|
||||
|
||||
const onCreateAsync = async () => {
|
||||
@ -121,7 +111,7 @@ const onCreateAsync = async () => {
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
toast({ type: 'error', text: JSON.stringify(error) })
|
||||
add({ type: 'error', text: JSON.stringify(error) })
|
||||
}
|
||||
}
|
||||
|
||||
@ -156,4 +146,4 @@ const onClose = () => {
|
||||
"abort": "Abort",
|
||||
"description": "Haex Vault for your most secret secrets"
|
||||
}
|
||||
}</i18n>
|
||||
}</i18n>
|
||||
@ -1,29 +1,16 @@
|
||||
<template>
|
||||
<UiDialog
|
||||
class="btn btn-primary btn-outline shadow-md md:btn-lg shrink-0 flex-1"
|
||||
v-model:open="isOpen"
|
||||
@click="onLoadDatabase"
|
||||
>
|
||||
<!-- @close="initDatabase" -->
|
||||
<UiDialog v-model:open="isOpen" class="btn btn-primary btn-outline shadow-md md:btn-lg shrink-0 flex-1 "
|
||||
@open="onLoadDatabase">
|
||||
|
||||
<template #trigger>
|
||||
<!-- <button
|
||||
class="btn btn-primary btn-outline shadow-md md:btn-lg shrink-0 flex-1"
|
||||
@click="onLoadDatabase"
|
||||
> -->
|
||||
|
||||
<Icon name="mdi:folder-open-outline" />
|
||||
{{ t('database.open') }}
|
||||
<!-- </button> -->
|
||||
|
||||
</template>
|
||||
|
||||
<UiInputPassword
|
||||
:check-input="check"
|
||||
:rules="vaultDatabaseSchema.password"
|
||||
@keyup.enter="onOpenDatabase"
|
||||
autofocus
|
||||
prepend-icon="mdi:key-outline"
|
||||
v-model="database.password"
|
||||
/>
|
||||
<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">
|
||||
@ -95,6 +82,7 @@ const onLoadDatabase = async () => {
|
||||
],
|
||||
})
|
||||
|
||||
console.log("database.path", database.path)
|
||||
if (!database.path) return
|
||||
|
||||
isOpen.value = true
|
||||
@ -162,8 +150,7 @@ const onClose = () => {
|
||||
}
|
||||
</script>
|
||||
|
||||
<i18n lang="json">
|
||||
{
|
||||
<i18n lang="json">{
|
||||
"de": {
|
||||
"open": "Öffnen",
|
||||
"abort": "Abbrechen",
|
||||
@ -171,7 +158,6 @@ const onClose = () => {
|
||||
"open": "Vault öffnen"
|
||||
}
|
||||
},
|
||||
|
||||
"en": {
|
||||
"open": "Open",
|
||||
"abort": "Abort",
|
||||
@ -179,5 +165,4 @@ const onClose = () => {
|
||||
"open": "Open Vault"
|
||||
}
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
}</i18n>
|
||||
Reference in New Issue
Block a user