haex/haex-hub-mirror
1
0
Fork 0
mirror of https://github.com/haexhub/haex-hub.git synced 2025-12-17 14:30:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

zwischenstand

Browse Source
This commit is contained in:
haex
2025-05-28 11:35:02 +02:00
parent 07ff15aba0
commit 4774d3fdc1
105 changed files with 4129 additions and 1438 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/ui/accordion/index.vue Normal file
View 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
View 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>

126
src/components/ui/dialog/index.vue
View File

@ -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>

10
src/components/ui/dropdown/index.vue
View File

@ -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>

7
src/components/ui/dropdown/locale.vue
View File

@ -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',

2
src/components/ui/dropdown/theme.vue
View File

@ -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>

14
src/components/ui/input/index.vue
View File

@ -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 });

5
src/components/ui/input/password.vue
View File

@ -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'" />

56
src/components/ui/logo/itemis.vue
View File

@ -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>

28
src/components/ui/tooltip/index.vue
View File

@ -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
View 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
View 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
View 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
View 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
}