geolba/tethys.backend
geolba/tethys.backend
2
0
Fork 2
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

- prettier formatting
All checks were successful
CI Pipeline / japa-tests (push) Successful in 51s
Details

Browse source 
- npm updates
- new SearchMap.vue component
This commit is contained in:
Kaimbacher 2023-10-31 15:38:43 +01:00
parent 7bc9f90cca
commit a7142f694f
74 changed files with 3360 additions and 3577 deletions
Download patch file Download diff file Expand all files Collapse all files

104
resources/js/Components/AsideMenuItem.vue
View file

@ -11,14 +11,14 @@ import AsideMenuList from '@/Components/AsideMenuList.vue';
import { stardust } from '@eidellev/adonis-stardust/client';
const props = defineProps({
item: {
type: Object,
required: true,
},
isDropdownList: Boolean,
item: {
type: Object,
required: true,
},
isDropdownList: Boolean,
});
const itemRoute = computed(() => (props.item && props.item.route ? stardust.route(props.item.route): ''));
const itemRoute = computed(() => (props.item && props.item.route ? stardust.route(props.item.route) : ''));
// const isCurrentRoute = computed(() => (props.item && props.item.route ? stardust.isCurrent(props.item.route): false));
const itemHref = computed(() => (props.item && props.item.href ? props.item.href : ''));
@ -31,64 +31,74 @@ const hasColor = computed(() => props.item && props.item.color);
const isDropdownActive = ref(false);
const componentClass = computed(() => [
props.isDropdownList ? 'py-3 px-6 text-sm font-semibold' : 'py-3 px-6',
hasColor.value ? getButtonColor(props.item.color, false, true) : styleService.asideMenuItemStyle,
props.isDropdownList ? 'py-3 px-6 text-sm font-semibold' : 'py-3 px-6',
hasColor.value ? getButtonColor(props.item.color, false, true) : styleService.asideMenuItemStyle,
]);
const hasDropdown = computed(() => props.item.children);
const menuClick = (event) => {
emit('menu-click', event, props.item);
emit('menu-click', event, props.item);
if (hasDropdown.value) {
isDropdownActive.value = !isDropdownActive.value;
}
if (hasDropdown.value) {
isDropdownActive.value = !isDropdownActive.value;
}
};
const activeInactiveStyle = computed(() => {
if (props.item.route && stardust.isCurrent(props.item.route)) {
// console.log(props.item.route);
return styleService.asideMenuItemActiveStyle;
}
else {
return null;
}
if (props.item.route && stardust.isCurrent(props.item.route)) {
// console.log(props.item.route);
return styleService.asideMenuItemActiveStyle;
} else {
return null;
}
});
const is = computed(() => {
if (props.item.href) {
return 'a'
}
if (props.item.route) {
return Link
}
if (props.item.href) {
return 'a';
}
if (props.item.route) {
return Link;
}
return 'div'
})
return 'div';
});
// props.routeName && stardust.isCurrent(props.routeName) ? props.activeColor : null
</script>
<!-- :target="props.item.target ?? null" -->
<template>
<li>
<!-- <component :is="itemHref ? 'div' : Link" :href="itemHref ? itemHref : itemRoute" -->
<component :is="is" :href="itemRoute ? stardust.route(props.item.route) : props.item.href"
class="flex cursor-pointer dark:text-slate-300 dark:hover:text-white" :class="componentClass"
@click="menuClick" v-bind:target="props.item.target ?? null">
<BaseIcon v-if="item.icon" :path="item.icon" class="flex-none" :class="activeInactiveStyle" w="w-16"
:size="18" />
<span class="grow text-ellipsis line-clamp-1" :class="activeInactiveStyle">
{{ item.label }}
</span>
<!-- plus icon for expanding sub menu -->
<BaseIcon v-if="hasDropdown" :path="isDropdownActive ? mdiMinus : mdiPlus" class="flex-none"
:class="activeInactiveStyle" w="w-12" @click.prevent="menuClick"/>
</component>
<AsideMenuList v-if="hasDropdown" :menu="item.children" :class="[
styleService.asideMenuDropdownStyle,
isDropdownActive ? 'block dark:bg-slate-800/50' : 'hidden',
]" is-dropdown-list />
</li>
<li>
<!-- <component :is="itemHref ? 'div' : Link" :href="itemHref ? itemHref : itemRoute" -->
<component
:is="is"
:href="itemRoute ? stardust.route(props.item.route) : props.item.href"
class="flex cursor-pointer dark:text-slate-300 dark:hover:text-white"
:class="componentClass"
@click="menuClick"
v-bind:target="props.item.target ?? null"
>
<BaseIcon v-if="item.icon" :path="item.icon" class="flex-none" :class="activeInactiveStyle" w="w-16" :size="18" />
<span class="grow text-ellipsis line-clamp-1" :class="activeInactiveStyle">
{{ item.label }}
</span>
<!-- plus icon for expanding sub menu -->
<BaseIcon
v-if="hasDropdown"
:path="isDropdownActive ? mdiMinus : mdiPlus"
class="flex-none"
:class="activeInactiveStyle"
w="w-12"
@click.prevent="menuClick"
/>
</component>
<AsideMenuList
v-if="hasDropdown"
:menu="item.children"
:class="[styleService.asideMenuDropdownStyle, isDropdownActive ? 'block dark:bg-slate-800/50' : 'hidden']"
is-dropdown-list
/>
</li>
</template>