initial commit
This commit is contained in:
Arno Kaimbacher
commit
4fc3bb0a01
202 changed files with 41729 additions and 0 deletions
52
resources/js/Components/Admin/MenuItemList.vue
Normal file
52
resources/js/Components/Admin/MenuItemList.vue
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<script setup>
|
||||
import { Link } from "@inertiajs/vue3"
|
||||
import BaseButton from "@/Components/BaseButton.vue"
|
||||
import BaseButtons from "@/Components/BaseButtons.vue"
|
||||
import {
|
||||
mdiSquareEditOutline,
|
||||
mdiTrashCan,
|
||||
} from "@mdi/js"
|
||||
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
menu: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
can: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
level: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<tr :key="item.id">
|
||||
<td data-label="Name">
|
||||
<div :style="{ 'margin-left': level * 20 + 'px' }">{{ item.name }}</div>
|
||||
</td>
|
||||
<td data-label="Description">
|
||||
{{ item.description }}
|
||||
</td>
|
||||
<td data-label="Enabled">
|
||||
{{ item.enabled }}
|
||||
</td>
|
||||
<td v-if="can.edit || can.delete" class="before:hidden lg:w-1 whitespace-nowrap">
|
||||
<BaseButtons type="justify-start lg:justify-end" no-wrap>
|
||||
<BaseButton v-if="can.edit" :route-name="route('menu.item.edit', { menu: menu.id, item: item.id })"
|
||||
color="info" :icon="mdiSquareEditOutline" small />
|
||||
<BaseButton v-if="can.delete" color="danger" :icon="mdiTrashCan" small @click="destroy(item.id)" />
|
||||
</BaseButtons>
|
||||
</td>
|
||||
</tr>
|
||||
<template v-for="item in item.children">
|
||||
<MenuItemList :item="item" :menu="menu" :can="can" :level="level + 1" />
|
||||
</template>
|
||||
</template>
|
||||
161
resources/js/Components/Admin/Pagination.vue
Normal file
161
resources/js/Components/Admin/Pagination.vue
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
<script setup>
|
||||
import { Link } from '@inertiajs/vue3';
|
||||
import { stardust } from '@eidellev/adonis-stardust/client';
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
const nextPageLink = computed(() => {
|
||||
let url = new URL(document.location);
|
||||
url.searchParams.set('page', props.data.current_page + 1);
|
||||
return url.href;
|
||||
// return url + '&page=' + (Number(props.data.current_page) + 1);
|
||||
});
|
||||
const prevPageLink = computed(() => {
|
||||
let url = new URL(document.location);
|
||||
url.searchParams.set('page', props.data.current_page - 1);
|
||||
return url.href;
|
||||
// return url + '&page=' + (props.data.current_page - 1);
|
||||
});
|
||||
const toPage = computed(() => {
|
||||
let currentPage = props.data.current_page;
|
||||
let perPage = props.data.per_page;
|
||||
|
||||
if (props.data.current_page == props.data.last_page) {
|
||||
return props.data.total;
|
||||
} else {
|
||||
return currentPage * perPage;
|
||||
}
|
||||
});
|
||||
const fromPage = computed(() => {
|
||||
let currentPage = props.data.current_page;
|
||||
let perPage = props.data.per_page;
|
||||
return currentPage * perPage - (perPage - 1);
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- current_page:
|
||||
1
|
||||
first_page:
|
||||
1
|
||||
first_page_url:
|
||||
'/?page=1'
|
||||
last_page:
|
||||
3
|
||||
last_page_url:
|
||||
'/?page=3'
|
||||
next_page_url:
|
||||
'/?page=2'
|
||||
per_page:
|
||||
5
|
||||
previous_page_url:
|
||||
null
|
||||
total:
|
||||
15 -->
|
||||
|
||||
<template>
|
||||
<!-- <nav v-if="data.links.length > 3" -->
|
||||
<nav v-if="data.total > 3" role="navigation" aria-label="Pagination Navigation"
|
||||
class="flex items-center justify-between">
|
||||
<div class="flex justify-between flex-1 sm:hidden">
|
||||
<span v-if="data.current_page <= 1"
|
||||
class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
|
||||
Previous
|
||||
</span>
|
||||
<Link v-else :href="data.previous_page_url"
|
||||
class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
|
||||
Previous
|
||||
</Link>
|
||||
|
||||
<Link v-if="data.current_page < data.last_page" :href="data.next_page_url"
|
||||
class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
|
||||
Next
|
||||
</Link>
|
||||
<span v-else
|
||||
class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
|
||||
Next
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-700 leading-5">
|
||||
Showing
|
||||
<span class="font-medium">{{ fromPage }}</span>
|
||||
to
|
||||
<span class="font-medium">{{ toPage }}</span>
|
||||
of
|
||||
<span class="font-medium">{{ data.total }}</span>
|
||||
results
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="relative z-0 inline-flex shadow-sm rounded-md">
|
||||
<span v-if="props.data.current_page <= 1" aria-disabled="true" aria-label="Previous">
|
||||
<span
|
||||
class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-l-md leading-5"
|
||||
aria-hidden="true">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<!-- <Link v-else :href="data.previous_page_url" rel="prev" -->
|
||||
<Link v-else :href="prevPageLink" rel="prev"
|
||||
class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150"
|
||||
aria-label="Previous">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</Link>
|
||||
|
||||
<!-- <template v-for="(link, key) in data.links">
|
||||
<template v-if="key > 0 && key < data.last_page + 1">
|
||||
<span v-if="!link.active && link.url === null" :key="key" aria-disabled="true">
|
||||
<span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 cursor-default leading-5">{{ link.label }}</span>
|
||||
</span>
|
||||
|
||||
<span v-else-if="link.active" :key="`current-${key}`" aria-current="page">
|
||||
<span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5">{{ link.label }}</span>
|
||||
</span>
|
||||
|
||||
<Link v-else :key="`link-${key}`" :href="link.url" v-html="link.label" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150" aria-label="`Go to page ${link.label}`" />
|
||||
</template>
|
||||
</template> -->
|
||||
|
||||
<Link v-if="props.data.current_page < props.data.last_page" :href="nextPageLink" rel="next"
|
||||
class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150"
|
||||
aria-label="Next">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</Link>
|
||||
<!-- else disabled link -->
|
||||
<span v-else aria-disabled="true" aria-label="Next">
|
||||
<span
|
||||
class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-r-md leading-5"
|
||||
aria-hidden="true">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
76
resources/js/Components/Admin/Sort.vue
Normal file
76
resources/js/Components/Admin/Sort.vue
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { Link } from '@inertiajs/vue3';
|
||||
import { stardust } from '@eidellev/adonis-stardust/client';
|
||||
|
||||
const props = defineProps({
|
||||
label: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
attribute: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
search: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
|
||||
const downFill = ref('lightgray');
|
||||
const upFill = ref('lightgray');
|
||||
|
||||
const sortLink = computed(() => {
|
||||
let url = new URL(document.location);
|
||||
let sortValue = url.searchParams.get('sort');
|
||||
|
||||
if (sortValue == props.attribute) {
|
||||
url.searchParams.set('sort', '-' + props.attribute);
|
||||
upFill.value = 'black';
|
||||
} else if (sortValue === '-' + props.attribute) {
|
||||
url.searchParams.set('sort', props.attribute);
|
||||
downFill.value = 'black';
|
||||
} else {
|
||||
url.searchParams.set('sort', props.attribute);
|
||||
}
|
||||
|
||||
if (props.search == '') {
|
||||
url.searchParams.delete('search');
|
||||
} else {
|
||||
url.searchParams.set('search', props.search);
|
||||
}
|
||||
|
||||
return url.href;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center gap-4">
|
||||
<Link :href="sortLink" class="no-underline hover:underline text-cyan-600 dark:text-cyan-400">
|
||||
{{ label }}
|
||||
</Link>
|
||||
<div class="flex flex-col">
|
||||
<svg
|
||||
class="inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="15px"
|
||||
height="15px"
|
||||
viewBox="0 0 15 15"
|
||||
fill="none"
|
||||
>
|
||||
<path d="M7.5 3L15 11H0L7.5 3Z" :fill="upFill" />
|
||||
</svg>
|
||||
<svg
|
||||
class="inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="15px"
|
||||
height="15px"
|
||||
viewBox="0 0 15 15"
|
||||
fill="none"
|
||||
>
|
||||
<path d="M7.49988 12L-0.00012207 4L14.9999 4L7.49988 12Z" :fill="downFill" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
30
resources/js/Components/AsideMenu.vue
Normal file
30
resources/js/Components/AsideMenu.vue
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<script setup>
|
||||
// import { reactive, computed } from 'vue';
|
||||
// import { usePage } from '@inertiajs/vue3'
|
||||
// import { usePage } from '@inertiajs/inertia-vue3';
|
||||
import { LayoutService } from '@/Stores/layout.js';
|
||||
import menu from '@/menu.js'
|
||||
import AsideMenuLayer from '@/Components/AsideMenuLayer.vue';
|
||||
import OverlayLayer from '@/Components/OverlayLayer.vue';
|
||||
|
||||
// let menu = reactive({});
|
||||
// menu = computed(() => usePage().props.navigation?.menu);
|
||||
|
||||
const layoutService = LayoutService();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AsideMenuLayer
|
||||
v-if="menu && Object.keys(menu).length"
|
||||
:menu="menu"
|
||||
:class="[
|
||||
layoutService.isAsideMobileExpanded ? 'left-0' : '-left-60 lg:left-0',
|
||||
{ 'lg:hidden xl:flex': !layoutService.isAsideLgActive },
|
||||
]"
|
||||
/>
|
||||
<!-- <OverlayLayer
|
||||
v-show="layoutService.isAsideLgActive"
|
||||
z-index="z-30"
|
||||
@overlay-click="layoutService.isAsideLgActive = false"
|
||||
/> -->
|
||||
</template>
|
||||
93
resources/js/Components/AsideMenuItem.vue
Normal file
93
resources/js/Components/AsideMenuItem.vue
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { Link } from '@inertiajs/vue3';
|
||||
// import { Link } from '@inertiajs/inertia-vue3';
|
||||
|
||||
import { StyleService } from '@/Stores/style.js';
|
||||
import { mdiMinus, mdiPlus } from '@mdi/js';
|
||||
import { getButtonColor } from '@/colors.js';
|
||||
import BaseIcon from '@/Components/BaseIcon.vue';
|
||||
import AsideMenuList from '@/Components/AsideMenuList.vue';
|
||||
import { stardust } from '@eidellev/adonis-stardust/client';
|
||||
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
isDropdownList: Boolean,
|
||||
});
|
||||
|
||||
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 : ''));
|
||||
|
||||
const emit = defineEmits(['menu-click']);
|
||||
|
||||
const styleService = StyleService();
|
||||
|
||||
const hasColor = computed(() => props.item && props.item.color);
|
||||
|
||||
const isDropdownActive = ref(false);
|
||||
|
||||
const componentClass = computed(() => [
|
||||
props.isDropdownList ? 'py-3 px-6 text-sm' : '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);
|
||||
|
||||
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;
|
||||
}
|
||||
});
|
||||
|
||||
const is = computed(() => {
|
||||
if (props.item.href) {
|
||||
return 'a'
|
||||
}
|
||||
if (props.item.route) {
|
||||
return Link
|
||||
}
|
||||
|
||||
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>
|
||||
<!-- <BaseIcon v-if="hasDropdown" :path="isDropdownActive ? mdiMinus : mdiPlus" class="flex-none"
|
||||
:class="activeInactiveStyle" w="w-12" /> -->
|
||||
</component>
|
||||
<!-- <AsideMenuList v-if="hasDropdown" :menu="item.children" :class="[
|
||||
styleService.asideMenuDropdownStyle,
|
||||
isDropdownActive ? 'block dark:bg-slate-800/50' : 'hidden',
|
||||
]" is-dropdown-list /> -->
|
||||
</li>
|
||||
</template>
|
||||
66
resources/js/Components/AsideMenuLayer.vue
Normal file
66
resources/js/Components/AsideMenuLayer.vue
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
<script setup>
|
||||
import { router } from '@inertiajs/vue3'
|
||||
// import { Inertia } from '@inertiajs/inertia';
|
||||
import { stardust } from '@eidellev/adonis-stardust/client';
|
||||
import { mdiLogout, mdiClose } from '@mdi/js';
|
||||
import { computed } from 'vue';
|
||||
import { LayoutService } from '@/Stores/layout.js';
|
||||
import { StyleService } from '@/Stores/style.js';
|
||||
import AsideMenuList from '@/Components/AsideMenuList.vue';
|
||||
import AsideMenuItem from '@/Components/AsideMenuItem.vue';
|
||||
import BaseIcon from '@/Components/BaseIcon.vue';
|
||||
|
||||
defineProps({
|
||||
menu: {
|
||||
type: Object,
|
||||
default: () => { },
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['menu-click']);
|
||||
|
||||
const layoutStore = LayoutService();
|
||||
|
||||
const styleStore = StyleService();
|
||||
|
||||
const logoutItem = computed(() => ({
|
||||
name: 'Logout',
|
||||
label: 'Logout',
|
||||
icon: mdiLogout,
|
||||
color: 'info',
|
||||
link: '#',
|
||||
}));
|
||||
|
||||
const logoutItemClick = async () => {
|
||||
// router.post(route('logout'));
|
||||
await router.post(stardust.route('logout'));
|
||||
};
|
||||
|
||||
const menuClick = (event, item) => {
|
||||
emit('menu-click', event, item);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside id="aside" class="lg:py-2 lg:pl-2 w-60 fixed flex z-40 top-0 h-screen transition-position overflow-hidden">
|
||||
<div :class="styleStore.asideStyle" class="lg:rounded-xl flex-1 flex flex-col overflow-hidden dark:bg-slate-900">
|
||||
<div :class="styleStore.asideBrandStyle"
|
||||
class="flex flex-row h-14 items-center justify-between dark:bg-slate-900">
|
||||
<div class="text-center flex-1 lg:text-left lg:pl-6 xl:text-center xl:pl-0">
|
||||
<b class="font-black">Menu</b>
|
||||
</div>
|
||||
<button class="hidden lg:inline-block xl:hidden p-3" @click.prevent="layoutStore.isAsideLgActive = false">
|
||||
<BaseIcon :path="mdiClose" />
|
||||
</button>
|
||||
</div>
|
||||
<div :class="styleStore.darkMode ? 'aside-scrollbars-[slate]' : styleStore.asideScrollbarsStyle"
|
||||
class="flex-1 overflow-y-auto overflow-x-hidden">
|
||||
<AsideMenuList v-bind:menu="menu" @menu-click="menuClick" />
|
||||
</div>
|
||||
<!-- <p class="menu-label">About</p>> -->
|
||||
<ul class="menu-list">
|
||||
<AsideMenuItem :item="logoutItem" @menu-click="logoutItemClick" />
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
29
resources/js/Components/AsideMenuList.vue
Normal file
29
resources/js/Components/AsideMenuList.vue
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<script setup>
|
||||
import AsideMenuItem from '@/Components/AsideMenuItem.vue';
|
||||
|
||||
defineProps({
|
||||
isDropdownList: Boolean,
|
||||
menu: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['menu-click'])
|
||||
|
||||
const menuClick = (event, item) => {
|
||||
emit('menu-click', event, item)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ul>
|
||||
<AsideMenuItem
|
||||
v-for="(item, index) in menu"
|
||||
:key="index"
|
||||
v-bind:item="item"
|
||||
:is-dropdown-list="isDropdownList"
|
||||
@menu-click="menuClick"
|
||||
/>
|
||||
</ul>
|
||||
</template>
|
||||
117
resources/js/Components/BaseButton.vue
Normal file
117
resources/js/Components/BaseButton.vue
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { Link } from '@inertiajs/vue3';
|
||||
// import { Link } from '@inertiajs/inertia-vue3';
|
||||
import { getButtonColor } from '@/colors.js';
|
||||
import BaseIcon from '@/Components/BaseIcon.vue';
|
||||
|
||||
const props = defineProps({
|
||||
label: {
|
||||
type: [String, Number],
|
||||
default: null,
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
href: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
target: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
routeName: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: 'white',
|
||||
},
|
||||
as: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
small: Boolean,
|
||||
outline: Boolean,
|
||||
active: Boolean,
|
||||
disabled: Boolean,
|
||||
roundedFull: Boolean,
|
||||
});
|
||||
|
||||
const is = computed(() => {
|
||||
if (props.as) {
|
||||
return props.as;
|
||||
}
|
||||
|
||||
if (props.routeName) {
|
||||
return Link;
|
||||
}
|
||||
|
||||
if (props.href) {
|
||||
return 'a';
|
||||
}
|
||||
|
||||
return 'button';
|
||||
});
|
||||
|
||||
const computedType = computed(() => {
|
||||
if (is.value === 'button') {
|
||||
return props.type ?? 'button';
|
||||
}
|
||||
|
||||
return null;
|
||||
});
|
||||
|
||||
const labelClass = computed(() => (props.small && props.icon ? 'px-1' : 'px-2'));
|
||||
|
||||
const componentClass = computed(() => {
|
||||
const base = [
|
||||
'inline-flex',
|
||||
'cursor-pointer',
|
||||
'justify-center',
|
||||
'items-center',
|
||||
'whitespace-nowrap',
|
||||
'focus:outline-none',
|
||||
'transition-colors',
|
||||
'focus:ring',
|
||||
'duration-150',
|
||||
'border',
|
||||
props.roundedFull ? 'rounded-full' : 'rounded',
|
||||
props.active ? 'ring ring-black dark:ring-white' : 'ring-blue-700',
|
||||
getButtonColor(props.color, props.outline, !props.disabled),
|
||||
];
|
||||
|
||||
if (props.small) {
|
||||
base.push('text-sm', props.roundedFull ? 'px-3 py-1' : 'p-1');
|
||||
} else {
|
||||
base.push('py-2', props.roundedFull ? 'px-6' : 'px-3');
|
||||
}
|
||||
|
||||
if (props.disabled) {
|
||||
base.push('cursor-not-allowed', props.outline ? 'opacity-50' : 'opacity-70');
|
||||
}
|
||||
|
||||
return base;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component
|
||||
:is="is"
|
||||
:class="componentClass"
|
||||
:href="routeName ? routeName : href"
|
||||
:type="computedType"
|
||||
:target="target"
|
||||
:disabled="disabled"
|
||||
>
|
||||
<BaseIcon v-if="icon" :path="icon" />
|
||||
<span v-if="label" :class="labelClass">{{ label }}</span>
|
||||
</component>
|
||||
</template>
|
||||
55
resources/js/Components/BaseButtons.vue
Normal file
55
resources/js/Components/BaseButtons.vue
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
<script>
|
||||
import { h, defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'BaseButtons',
|
||||
props: {
|
||||
noWrap: Boolean,
|
||||
type: {
|
||||
type: String,
|
||||
default: 'justify-start'
|
||||
},
|
||||
classAddon: {
|
||||
type: String,
|
||||
default: 'mr-3 last:mr-0 mb-3'
|
||||
},
|
||||
mb: {
|
||||
type: String,
|
||||
default: '-mb-3'
|
||||
}
|
||||
},
|
||||
render () {
|
||||
const hasSlot = this.$slots && this.$slots.default
|
||||
|
||||
const parentClass = [
|
||||
'flex',
|
||||
'items-center',
|
||||
this.type,
|
||||
this.noWrap ? 'flex-nowrap' : 'flex-wrap'
|
||||
]
|
||||
|
||||
if (this.mb) {
|
||||
parentClass.push(this.mb)
|
||||
}
|
||||
|
||||
return h(
|
||||
'div',
|
||||
{ class: parentClass },
|
||||
hasSlot
|
||||
? this.$slots.default().map(element => {
|
||||
if (element && element.children && typeof element.children === 'object') {
|
||||
return h(
|
||||
element,
|
||||
{},
|
||||
element.children.map(child => {
|
||||
return h(child, { class: [this.classAddon] })
|
||||
}))
|
||||
}
|
||||
|
||||
return h(element, { class: [this.classAddon] })
|
||||
})
|
||||
: null
|
||||
)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
12
resources/js/Components/BaseDivider.vue
Normal file
12
resources/js/Components/BaseDivider.vue
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<script setup>
|
||||
const props = defineProps({
|
||||
navBar: Boolean
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<hr
|
||||
:class="props.navBar ? 'hidden lg:block lg:my-0.5 dark:border-slate-700' : 'my-6 -mx-6 dark:border-slate-800'"
|
||||
class="border-t border-gray-100"
|
||||
>
|
||||
</template>
|
||||
40
resources/js/Components/BaseIcon.vue
Normal file
40
resources/js/Components/BaseIcon.vue
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
path: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
w: {
|
||||
type: String,
|
||||
default: 'w-6'
|
||||
},
|
||||
h: {
|
||||
type: String,
|
||||
default: 'h-6'
|
||||
},
|
||||
size: {
|
||||
type: [String, Number],
|
||||
default: 16
|
||||
}
|
||||
})
|
||||
|
||||
const spanClass = computed(() => `inline-flex justify-center items-center ${props.w} ${props.h}`)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span :class="spanClass">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
:width="size"
|
||||
:height="size"
|
||||
class="inline-block"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
:d="path"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</template>
|
||||
37
resources/js/Components/BaseLevel.vue
Normal file
37
resources/js/Components/BaseLevel.vue
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<script>
|
||||
import { h, defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'BaseLevel',
|
||||
props: {
|
||||
mobile: Boolean,
|
||||
type: {
|
||||
type: String,
|
||||
default: 'justify-between'
|
||||
}
|
||||
},
|
||||
render () {
|
||||
const parentClass = [this.type, 'items-center']
|
||||
|
||||
const parentMobileClass = ['flex']
|
||||
|
||||
const parentBaseClass = ['block', 'md:flex']
|
||||
|
||||
const childBaseClass = ['flex', 'shrink-0', 'grow-0', 'items-center', 'justify-center']
|
||||
|
||||
return h(
|
||||
'div',
|
||||
{ class: parentClass.concat(this.mobile ? parentMobileClass : parentBaseClass) },
|
||||
this.$slots.default().map((element, index) => {
|
||||
const childClass = (!this.mobile && this.$slots.default().length > index + 1)
|
||||
? childBaseClass.concat(['mb-6', 'md:mb-0'])
|
||||
: childBaseClass
|
||||
|
||||
return h('div', { class: childClass }, [
|
||||
element
|
||||
])
|
||||
})
|
||||
)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
111
resources/js/Components/CardBox.vue
Normal file
111
resources/js/Components/CardBox.vue
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
<script setup>
|
||||
import { mdiCog } from '@mdi/js'
|
||||
import { computed, useSlots } from 'vue'
|
||||
import BaseIcon from '@/Components/BaseIcon.vue'
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
headerIcon: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
rounded: {
|
||||
type: String,
|
||||
default: 'rounded-xl'
|
||||
},
|
||||
hasTable: Boolean,
|
||||
empty: Boolean,
|
||||
form: Boolean,
|
||||
hoverable: Boolean,
|
||||
modal: Boolean
|
||||
})
|
||||
|
||||
const emit = defineEmits(['header-icon-click', 'submit'])
|
||||
|
||||
const is = computed(() => props.form ? 'form' : 'div')
|
||||
|
||||
const slots = useSlots()
|
||||
|
||||
const footer = computed(() => slots.footer && !!slots.footer())
|
||||
|
||||
const componentClass = computed(() => {
|
||||
const base = [
|
||||
props.rounded,
|
||||
props.modal ? 'dark:bg-slate-900' : 'dark:bg-slate-900/70'
|
||||
]
|
||||
|
||||
if (props.hoverable) {
|
||||
base.push('hover:shadow-lg transition-shadow duration-500')
|
||||
}
|
||||
|
||||
return base
|
||||
})
|
||||
|
||||
const computedHeaderIcon = computed(() => props.headerIcon ?? mdiCog)
|
||||
|
||||
const headerIconClick = () => {
|
||||
emit('header-icon-click')
|
||||
}
|
||||
|
||||
const submit = e => {
|
||||
emit('submit', e)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component
|
||||
:is="is"
|
||||
:class="componentClass"
|
||||
class="bg-white flex flex-col"
|
||||
@submit="submit"
|
||||
>
|
||||
<header
|
||||
v-if="title"
|
||||
class="flex items-stretch border-b border-gray-100 dark:border-slate-800"
|
||||
>
|
||||
<div
|
||||
class="flex items-center py-3 grow font-bold"
|
||||
:class="[ icon ? 'px-4' : 'px-6' ]"
|
||||
>
|
||||
<BaseIcon
|
||||
v-if="icon"
|
||||
:path="icon"
|
||||
class="mr-3"
|
||||
/>
|
||||
{{ title }}
|
||||
</div>
|
||||
<button
|
||||
class="flex items-center py-3 px-4 justify-center ring-blue-700 focus:ring"
|
||||
@click="headerIconClick"
|
||||
>
|
||||
<BaseIcon :path="computedHeaderIcon" />
|
||||
</button>
|
||||
</header>
|
||||
<div
|
||||
v-if="empty"
|
||||
class="text-center py-24 text-gray-500 dark:text-slate-400"
|
||||
>
|
||||
<p>Nothing's here…</p>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="flex-1"
|
||||
:class="{'p-6':!hasTable}"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
<div
|
||||
v-if="footer"
|
||||
class="p-6 border-t border-gray-100 dark:border-slate-800"
|
||||
>
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
</component>
|
||||
</template>
|
||||
101
resources/js/Components/CardBoxClient.vue
Normal file
101
resources/js/Components/CardBoxClient.vue
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { mdiTrendingDown, mdiTrendingUp, mdiTrendingNeutral } from '@mdi/js'
|
||||
import CardBox from '@/Components/CardBox.vue'
|
||||
import BaseLevel from '@/Components/BaseLevel.vue'
|
||||
import PillTag from '@/Components/PillTag.vue'
|
||||
import UserAvatar from '@/Components/UserAvatar.vue'
|
||||
|
||||
const props = defineProps({
|
||||
name: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
login: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
email: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
date: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
progress: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
const pillType = computed(() => {
|
||||
if (props.type) {
|
||||
return props.type
|
||||
}
|
||||
|
||||
if (props.progress) {
|
||||
if (props.progress >= 60) {
|
||||
return 'success'
|
||||
}
|
||||
if (props.progress >= 40) {
|
||||
return 'warning'
|
||||
}
|
||||
|
||||
return 'danger'
|
||||
}
|
||||
|
||||
return 'info'
|
||||
})
|
||||
|
||||
const pillIcon = computed(() => {
|
||||
return {
|
||||
success: mdiTrendingUp,
|
||||
warning: mdiTrendingNeutral,
|
||||
danger: mdiTrendingDown,
|
||||
info: mdiTrendingNeutral,
|
||||
}[pillType.value]
|
||||
})
|
||||
|
||||
const pillText = computed(() => props.text ?? `${props.progress}%`)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CardBox
|
||||
class="mb-6 last:mb-0"
|
||||
hoverable
|
||||
>
|
||||
<BaseLevel>
|
||||
<BaseLevel type="justify-start">
|
||||
<UserAvatar
|
||||
class="w-12 h-12 mr-6"
|
||||
:username="props.name"
|
||||
/>
|
||||
<div class="text-center md:text-left overflow-hidden">
|
||||
<h4 class="text-xl text-ellipsis ">
|
||||
{{ name }}
|
||||
</h4>
|
||||
<p class="text-gray-500 dark:text-slate-400">
|
||||
<!-- {{ date }} @ {{ login }} -->
|
||||
{{ email }}
|
||||
</p>
|
||||
</div>
|
||||
</BaseLevel>
|
||||
<PillTag
|
||||
:type="pillType"
|
||||
:text="pillText"
|
||||
small
|
||||
:icon="pillIcon"
|
||||
/>
|
||||
</BaseLevel>
|
||||
</CardBox>
|
||||
</template>
|
||||
69
resources/js/Components/CardBoxModal.vue
Normal file
69
resources/js/Components/CardBoxModal.vue
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { mdiClose } from '@mdi/js'
|
||||
import BaseButton from '@/Components/BaseButton.vue'
|
||||
import BaseButtons from '@/Components/BaseButtons.vue'
|
||||
import CardBox from '@/Components/CardBox.vue'
|
||||
import OverlayLayer from '@/Components/OverlayLayer.vue'
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
largeTitle: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
button: {
|
||||
type: String,
|
||||
default: 'info'
|
||||
},
|
||||
buttonLabel: {
|
||||
type: String,
|
||||
default: 'Done'
|
||||
},
|
||||
hasCancel: Boolean,
|
||||
modelValue: {
|
||||
type: [String, Number, Boolean],
|
||||
default: null
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'cancel', 'confirm'])
|
||||
|
||||
const value = computed({
|
||||
get: () => props.modelValue,
|
||||
set: value => emit('update:modelValue', value)
|
||||
})
|
||||
|
||||
const confirmCancel = (mode) => {
|
||||
value.value = false;
|
||||
emit(mode);
|
||||
}
|
||||
|
||||
const confirm = () => confirmCancel('confirm')
|
||||
|
||||
const cancel = () => confirmCancel('cancel')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<OverlayLayer v-show="value" @overlay-click="cancel">
|
||||
<CardBox v-show="value" :title="title" class="shadow-lg max-h-modal w-11/12 md:w-3/5 lg:w-2/5 xl:w-4/12 z-50"
|
||||
:header-icon="mdiClose" modal @header-icon-click="cancel">
|
||||
<div class="space-y-3">
|
||||
<h1 v-if="largeTitle" class="text-2xl">
|
||||
{{ largeTitle }}
|
||||
</h1>
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<BaseButtons>
|
||||
<BaseButton :label="buttonLabel" :color="button" @click="confirm" />
|
||||
<BaseButton v-if="hasCancel" label="Cancel" :color="button" outline @click="cancel" />
|
||||
</BaseButtons>
|
||||
</template>
|
||||
</CardBox>
|
||||
</OverlayLayer>
|
||||
</template>
|
||||
96
resources/js/Components/CardBoxTransaction.vue
Normal file
96
resources/js/Components/CardBoxTransaction.vue
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { mdiCashMinus, mdiCashPlus, mdiReceipt, mdiCreditCardOutline } from '@mdi/js'
|
||||
import CardBox from '@/Components/CardBox.vue'
|
||||
import BaseLevel from '@/Components/BaseLevel.vue'
|
||||
import PillTag from '@/Components/PillTag.vue'
|
||||
import IconRounded from '@/Components/IconRounded.vue'
|
||||
|
||||
const props = defineProps({
|
||||
amount: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
date: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
business: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
account: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const icon = computed(() => {
|
||||
if (props.type === 'withdrawal') {
|
||||
return {
|
||||
icon: mdiCashMinus,
|
||||
type: 'danger'
|
||||
}
|
||||
} else if (props.type === 'deposit') {
|
||||
return {
|
||||
icon: mdiCashPlus,
|
||||
type: 'success'
|
||||
}
|
||||
} else if (props.type === 'invoice') {
|
||||
return {
|
||||
icon: mdiReceipt,
|
||||
type: 'warning'
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
icon: mdiCreditCardOutline,
|
||||
type: 'info'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CardBox
|
||||
class="mb-6 last:mb-0"
|
||||
hoverable
|
||||
>
|
||||
<BaseLevel>
|
||||
<BaseLevel type="justify-start">
|
||||
<IconRounded
|
||||
:icon="icon.icon"
|
||||
:type="icon.type"
|
||||
class="md:mr-6"
|
||||
/>
|
||||
<div class="text-center space-y-1 md:text-left md:mr-6">
|
||||
<h4 class="text-xl">
|
||||
${{ amount }}
|
||||
</h4>
|
||||
<p class="text-gray-500 dark:text-slate-400">
|
||||
<b>{{ date }}</b> via {{ business }}
|
||||
</p>
|
||||
</div>
|
||||
</BaseLevel>
|
||||
<div class="text-center md:text-right space-y-2">
|
||||
<p class="text-sm text-gray-500">
|
||||
{{ name }}
|
||||
</p>
|
||||
<div>
|
||||
<PillTag
|
||||
:type="icon.type"
|
||||
:text="type"
|
||||
small
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</BaseLevel>
|
||||
</CardBox>
|
||||
</template>
|
||||
64
resources/js/Components/CardBoxWidget.vue
Normal file
64
resources/js/Components/CardBoxWidget.vue
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
<script setup>
|
||||
import { mdiCog } from '@mdi/js'
|
||||
import CardBox from '@/Components/CardBox.vue'
|
||||
import NumberDynamic from '@/Components/NumberDynamic.vue'
|
||||
import BaseIcon from '@/Components/BaseIcon.vue'
|
||||
import BaseLevel from '@/Components/BaseLevel.vue'
|
||||
import PillTagTrend from '@/Components/PillTagTrend.vue'
|
||||
import BaseButton from '@/Components/BaseButton.vue'
|
||||
|
||||
defineProps({
|
||||
number: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
prefix: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
suffix: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
trend: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
trendType: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CardBox>
|
||||
<BaseLevel v-if="trend" class="mb-3" mobile>
|
||||
<PillTagTrend :trend="trend" :trend-type="trendType" small />
|
||||
<BaseButton :icon="mdiCog" icon-w="w-4" icon-h="h-4" color="white" small />
|
||||
</BaseLevel>
|
||||
<BaseLevel mobile>
|
||||
<div>
|
||||
<h3 class="text-lg leading-tight text-gray-500 dark:text-slate-400">
|
||||
{{ label }}
|
||||
</h3>
|
||||
<h1 class="text-3xl leading-tight font-semibold">
|
||||
<NumberDynamic :value="number" :prefix="prefix" :suffix="suffix" />
|
||||
</h1>
|
||||
</div>
|
||||
<BaseIcon v-if="icon" :path="icon" size="48" w="" h="h-16" :class="color" />
|
||||
</BaseLevel>
|
||||
</CardBox>
|
||||
</template>
|
||||
62
resources/js/Components/Charts/LineChart.vue
Normal file
62
resources/js/Components/Charts/LineChart.vue
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
<script setup>
|
||||
import { ref, watch, computed, onMounted } from 'vue'
|
||||
import {
|
||||
Chart,
|
||||
LineElement,
|
||||
PointElement,
|
||||
LineController,
|
||||
LinearScale,
|
||||
CategoryScale,
|
||||
Tooltip
|
||||
} from 'chart.js'
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const root = ref(null)
|
||||
|
||||
let chart
|
||||
|
||||
Chart.register(LineElement, PointElement, LineController, LinearScale, CategoryScale, Tooltip)
|
||||
|
||||
onMounted(() => {
|
||||
chart = new Chart(root.value, {
|
||||
type: 'line',
|
||||
data: props.data,
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
y: {
|
||||
display: false
|
||||
},
|
||||
x: {
|
||||
display: true
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
const chartData = computed(() => props.data)
|
||||
|
||||
watch(chartData, data => {
|
||||
if (chart) {
|
||||
chart.data = data
|
||||
chart.update()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<canvas ref="root" />
|
||||
</template>
|
||||
54
resources/js/Components/Charts/chart.config.js
Normal file
54
resources/js/Components/Charts/chart.config.js
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
export const chartColors = {
|
||||
default: {
|
||||
primary: '#00D1B2',
|
||||
info: '#209CEE',
|
||||
danger: '#FF3860'
|
||||
}
|
||||
}
|
||||
|
||||
const randomChartData = n => {
|
||||
const data = []
|
||||
|
||||
for (let i = 0; i < n; i++) {
|
||||
data.push(Math.round(Math.random() * 200))
|
||||
}
|
||||
|
||||
return data
|
||||
}
|
||||
|
||||
const datasetObject = (color, points) => {
|
||||
return {
|
||||
fill: false,
|
||||
borderColor: chartColors.default[color],
|
||||
borderWidth: 2,
|
||||
borderDash: [],
|
||||
borderDashOffset: 0.0,
|
||||
pointBackgroundColor: chartColors.default[color],
|
||||
pointBorderColor: 'rgba(255,255,255,0)',
|
||||
pointHoverBackgroundColor: chartColors.default[color],
|
||||
pointBorderWidth: 20,
|
||||
pointHoverRadius: 4,
|
||||
pointHoverBorderWidth: 15,
|
||||
pointRadius: 4,
|
||||
data: randomChartData(points),
|
||||
tension: 0.5,
|
||||
cubicInterpolationMode: 'default'
|
||||
}
|
||||
}
|
||||
|
||||
export const sampleChartData = (points = 9) => {
|
||||
const labels = []
|
||||
|
||||
for (let i = 1; i <= points; i++) {
|
||||
labels.push(`0${i}`)
|
||||
}
|
||||
|
||||
return {
|
||||
labels,
|
||||
datasets: [
|
||||
datasetObject('primary', points),
|
||||
datasetObject('info', points),
|
||||
datasetObject('danger', points)
|
||||
]
|
||||
}
|
||||
}
|
||||
26
resources/js/Components/FooterBar.vue
Normal file
26
resources/js/Components/FooterBar.vue
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { containerMaxW } from '@/config.js';
|
||||
import BaseLevel from '@/Components/BaseLevel.vue'
|
||||
import JustboilLogo from '@/Components/JustboilLogo.vue'
|
||||
|
||||
const year = computed(() => new Date().getFullYear())
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<footer class="py-2 px-6">
|
||||
<BaseLevel :class="containerMaxW">
|
||||
<div class="text-center md:text-left">
|
||||
<b>©{{ year }}, <a href="https://tethys.at/" target="_blank">
|
||||
Tethys.at</a>.</b>
|
||||
<!-- Get more with <a href="https://tailwind-vue.justboil.me/" target="_blank" class="text-blue-600">Premium
|
||||
version</a> -->
|
||||
</div>
|
||||
<div class="md:py-3">
|
||||
<a href="https://www.tethys.at" target="_blank">
|
||||
<JustboilLogo class="w-auto h-8 md:h-6" />
|
||||
</a>
|
||||
</div>
|
||||
</BaseLevel>
|
||||
</footer>
|
||||
</template>
|
||||
51
resources/js/Components/FormCheckRadio.vue
Normal file
51
resources/js/Components/FormCheckRadio.vue
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
name: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'checkbox',
|
||||
validator: value => ['checkbox', 'radio', 'switch'].includes(value)
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
modelValue: {
|
||||
type: [Array, String, Number, Boolean],
|
||||
default: null
|
||||
},
|
||||
inputValue: {
|
||||
type: [String, Number, Boolean],
|
||||
required: true
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const computedValue = computed({
|
||||
get: () => props.modelValue,
|
||||
set: value => {
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
})
|
||||
const inputType = computed(() => props.type === 'radio' ? 'radio' : 'checkbox')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<label
|
||||
:class="type"
|
||||
class="mr-6 mb-3 last:mr-0"
|
||||
>
|
||||
<input
|
||||
v-model="computedValue"
|
||||
:type="inputType"
|
||||
:name="name"
|
||||
:value="inputValue"
|
||||
>
|
||||
<span class="check" />
|
||||
<span class="pl-2">{{ label }}</span>
|
||||
</label>
|
||||
</template>
|
||||
57
resources/js/Components/FormCheckRadioGroup.vue
Normal file
57
resources/js/Components/FormCheckRadioGroup.vue
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import FormCheckRadio from '@/Components/FormCheckRadio.vue'
|
||||
const props = defineProps({
|
||||
options: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'checkbox',
|
||||
validator: value => ['checkbox', 'radio', 'switch'].includes(value)
|
||||
},
|
||||
componentClass: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
isColumn: Boolean,
|
||||
modelValue: {
|
||||
type: [Array, String, Number, Boolean, Object],
|
||||
default: null
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const computedValue = computed({
|
||||
get: () => props.modelValue,
|
||||
set: value => {
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex justify-start flex-wrap -mb-3"
|
||||
:class="{ 'flex-col': isColumn }"
|
||||
>
|
||||
<!-- :input-value="key" -->
|
||||
<!-- :label="value" -->
|
||||
<!-- :input-value="value.id"
|
||||
:label="value.name" -->
|
||||
<FormCheckRadio
|
||||
v-for="(value, key) in options"
|
||||
:key="key"
|
||||
v-model="computedValue"
|
||||
:type="type"
|
||||
:name="name"
|
||||
:input-value="key"
|
||||
:label="value"
|
||||
:class="componentClass"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
144
resources/js/Components/FormControl.vue
Normal file
144
resources/js/Components/FormControl.vue
Normal file
|
|
@ -0,0 +1,144 @@
|
|||
<script setup>
|
||||
import { computed, ref, onMounted, onBeforeUnmount } from 'vue';
|
||||
import { MainService } from '@/Stores/main';
|
||||
import FormControlIcon from '@/Components/FormControlIcon.vue';
|
||||
const props = defineProps({
|
||||
name: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
autocomplete: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
inputmode: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
options: {
|
||||
type: Array,
|
||||
default: null,
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'text',
|
||||
},
|
||||
modelValue: {
|
||||
type: [String, Number, Boolean, Array, Object],
|
||||
default: '',
|
||||
},
|
||||
required: Boolean,
|
||||
borderless: Boolean,
|
||||
transparent: Boolean,
|
||||
ctrlKFocus: Boolean,
|
||||
});
|
||||
const emit = defineEmits(['update:modelValue', 'setRef']);
|
||||
const computedValue = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (value) => {
|
||||
emit('update:modelValue', value);
|
||||
},
|
||||
});
|
||||
const inputElClass = computed(() => {
|
||||
const base = [
|
||||
'px-3 py-2 max-w-full focus:ring focus:outline-none border-gray-700 rounded w-full',
|
||||
'dark:placeholder-gray-400',
|
||||
computedType.value === 'textarea' ? 'h-24' : 'h-12',
|
||||
props.borderless ? 'border-0' : 'border',
|
||||
props.transparent ? 'bg-transparent' : 'bg-white dark:bg-slate-800',
|
||||
];
|
||||
if (props.icon) {
|
||||
base.push('pl-10');
|
||||
}
|
||||
return base;
|
||||
});
|
||||
const computedType = computed(() => (props.options ? 'select' : props.type));
|
||||
const controlIconH = computed(() => (props.type === 'textarea' ? 'h-full' : 'h-12'));
|
||||
const mainService = MainService();
|
||||
const selectEl = ref(null);
|
||||
const textareaEl = ref(null);
|
||||
const inputEl = ref(null);
|
||||
onMounted(() => {
|
||||
if (selectEl.value) {
|
||||
emit('setRef', selectEl.value);
|
||||
} else if (textareaEl.value) {
|
||||
emit('setRef', textareaEl.value);
|
||||
} else {
|
||||
emit('setRef', inputEl.value);
|
||||
}
|
||||
});
|
||||
if (props.ctrlKFocus) {
|
||||
const fieldFocusHook = (e) => {
|
||||
if (e.ctrlKey && e.key === 'k') {
|
||||
e.preventDefault();
|
||||
inputEl.value.focus();
|
||||
} else if (e.key === 'Escape') {
|
||||
inputEl.value.blur();
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
if (!mainService.isFieldFocusRegistered) {
|
||||
window.addEventListener('keydown', fieldFocusHook);
|
||||
mainService.isFieldFocusRegistered = true;
|
||||
} else {
|
||||
// console.error('Duplicate field focus event')
|
||||
}
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('keydown', fieldFocusHook);
|
||||
mainService.isFieldFocusRegistered = false;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative">
|
||||
<select
|
||||
v-if="computedType === 'select'"
|
||||
:id="id"
|
||||
v-model="computedValue"
|
||||
:name="name"
|
||||
:class="inputElClass"
|
||||
>
|
||||
<option v-for="option in options" :key="option.id ?? option" :value="option">
|
||||
{{ option.label ?? option }}
|
||||
</option>
|
||||
</select>
|
||||
<textarea
|
||||
v-else-if="computedType === 'textarea'"
|
||||
:id="id"
|
||||
v-model="computedValue"
|
||||
:class="inputElClass"
|
||||
:name="name"
|
||||
:placeholder="placeholder"
|
||||
:required="required"
|
||||
/>
|
||||
<input
|
||||
v-else
|
||||
:id="id"
|
||||
ref="inputEl"
|
||||
v-model="computedValue"
|
||||
:name="name"
|
||||
:inputmode="inputmode"
|
||||
:autocomplete="autocomplete"
|
||||
:required="required"
|
||||
:placeholder="placeholder"
|
||||
:type="computedType"
|
||||
:class="inputElClass"
|
||||
/>
|
||||
<FormControlIcon v-if="icon" :icon="icon" :h="controlIconH" />
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
23
resources/js/Components/FormControlIcon.vue
Normal file
23
resources/js/Components/FormControlIcon.vue
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<script setup>
|
||||
import BaseIcon from '@/Components/BaseIcon.vue';
|
||||
|
||||
defineProps({
|
||||
icon: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
h: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BaseIcon
|
||||
:path="icon"
|
||||
w="w-10"
|
||||
:h="h"
|
||||
class="absolute top-0 left-0 z-10 pointer-events-none text-gray-500 dark:text-slate-400"
|
||||
/>
|
||||
</template>
|
||||
47
resources/js/Components/FormField.vue
Normal file
47
resources/js/Components/FormField.vue
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<script setup>
|
||||
import { computed, useSlots } from 'vue';
|
||||
|
||||
defineProps({
|
||||
label: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
labelFor: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
help: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
const slots = useSlots();
|
||||
|
||||
const wrapperClass = computed(() => {
|
||||
const base = [];
|
||||
const slotsLength = slots.default().length;
|
||||
|
||||
if (slotsLength > 1) {
|
||||
base.push('grid grid-cols-1 gap-3');
|
||||
}
|
||||
|
||||
if (slotsLength === 2) {
|
||||
base.push('md:grid-cols-2');
|
||||
}
|
||||
|
||||
return base;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mb-6 last:mb-0">
|
||||
<label v-if="label" :for="labelFor" class="block font-bold mb-2">{{ label }}</label>
|
||||
<div v-bind:class="wrapperClass">
|
||||
<slot />
|
||||
</div>
|
||||
<div v-if="help" class="text-xs text-gray-500 dark:text-slate-400 mt-1">
|
||||
{{ help }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
108
resources/js/Components/FormFilePicker.vue
Normal file
108
resources/js/Components/FormFilePicker.vue
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
<script setup>
|
||||
import { mdiUpload } from '@mdi/js'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import BaseButton from '@/Components/BaseButton.vue'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: [Object, File, Array],
|
||||
default: null
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: 'Upload'
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: mdiUpload
|
||||
},
|
||||
accept: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: 'info'
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const root = ref(null)
|
||||
|
||||
const file = ref(props.modelValue)
|
||||
|
||||
const modelValueProp = computed(() => props.modelValue)
|
||||
|
||||
watch(modelValueProp, value => {
|
||||
file.value = value
|
||||
|
||||
if (!value) {
|
||||
root.value.input.value = null
|
||||
}
|
||||
})
|
||||
|
||||
const upload = event => {
|
||||
const value = event.target.files || event.dataTransfer.files
|
||||
|
||||
file.value = value[0]
|
||||
|
||||
emit('update:modelValue', file.value)
|
||||
|
||||
// Use this as an example for handling file uploads
|
||||
// let formData = new FormData()
|
||||
// formData.append('file', file.value)
|
||||
|
||||
// const mediaStoreRoute = `/your-route/`
|
||||
|
||||
// axios
|
||||
// .post(mediaStoreRoute, formData, {
|
||||
// headers: {
|
||||
// 'Content-Type': 'multipart/form-data'
|
||||
// },
|
||||
// onUploadProgress: progressEvent
|
||||
// })
|
||||
// .then(r => {
|
||||
//
|
||||
// })
|
||||
// .catch(err => {
|
||||
//
|
||||
// })
|
||||
}
|
||||
|
||||
// const uploadPercent = ref(0)
|
||||
//
|
||||
// const progressEvent = progressEvent => {
|
||||
// uploadPercent.value = Math.round(
|
||||
// (progressEvent.loaded * 100) / progressEvent.total
|
||||
// )
|
||||
// }
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-stretch justify-start relative">
|
||||
<label class="inline-flex">
|
||||
<BaseButton
|
||||
as="a"
|
||||
:label="label"
|
||||
:icon="icon"
|
||||
:color="color"
|
||||
:class="{ 'rounded-r-none': file }"
|
||||
/>
|
||||
<input
|
||||
ref="root"
|
||||
type="file"
|
||||
class="absolute top-0 left-0 w-full h-full opacity-0 outline-none cursor-pointer -z-1"
|
||||
:accept="accept"
|
||||
@input="upload"
|
||||
>
|
||||
</label>
|
||||
<div v-if="file">
|
||||
<span
|
||||
class="inline-flex px-4 py-2 justify-center bg-gray-100 dark:bg-slate-800 border-gray-200 dark:border-slate-700 border rounded-r"
|
||||
>
|
||||
{{ file.name }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
42
resources/js/Components/FormInput.vue
Normal file
42
resources/js/Components/FormInput.vue
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<template>
|
||||
<div class="mb-3">
|
||||
<label>
|
||||
<span v-if="label" class="block font-semibold">{{ label }}</span>
|
||||
<n-input v-bind:type="type" v-model:value="internalValue" v-bind:placeholder="placeholder"/>
|
||||
</label>
|
||||
<div v-if="Array.isArray(errors)" class="text-xs text-red-500">
|
||||
{{ errors.join(', ') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { NInput } from 'naive-ui';
|
||||
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: String,
|
||||
default: 'text',
|
||||
},
|
||||
label: String,
|
||||
placeholder: String,
|
||||
modelValue: String,
|
||||
errors: Array,
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
|
||||
const internalValue = computed({
|
||||
// get() {
|
||||
// return props.modelValue;
|
||||
// },
|
||||
// set(value) {
|
||||
// emit('update:modelValue', value);
|
||||
// },
|
||||
get: () => props.modelValue,
|
||||
set: (value) => {
|
||||
emit('update:modelValue', value);
|
||||
},
|
||||
});
|
||||
</script>
|
||||
22
resources/js/Components/FormValidationErrors.vue
Normal file
22
resources/js/Components/FormValidationErrors.vue
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<script setup>
|
||||
import { computed, defineProps } from 'vue';
|
||||
import { usePage } from '@inertiajs/vue3';
|
||||
import NotificationBarInCard from '@/Components/NotificationBarInCard.vue';
|
||||
|
||||
// const errors = computed(() => usePage().props.errors);
|
||||
// const hasErrors = computed(() => Object.keys(props.errors.value).length > 0);
|
||||
|
||||
const props = defineProps({
|
||||
errors: Object,
|
||||
});
|
||||
const hasErrors = computed(() =>{
|
||||
return props.errors != null && Object.keys(props.errors).length > 0;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NotificationBarInCard v-if="hasErrors" color="danger">
|
||||
<b>Whoops! Something went wrong.</b>
|
||||
<span v-for="(error, key) in errors" :key="key">{{ error }}</span>
|
||||
</NotificationBarInCard>
|
||||
</template>
|
||||
32
resources/js/Components/Header.vue
Normal file
32
resources/js/Components/Header.vue
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<template>
|
||||
<div class="bg-slate-100 py-3 px-6 flex justify-between items-center mb-6">
|
||||
|
||||
<div class="flex items-center space-x-6">
|
||||
<h3 class="font-bold">AdonisJS InertiaJS Example</h3>
|
||||
<nav class="flex items-center text-sm">
|
||||
<Link href="/app">Home</Link>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-6 text-sm">
|
||||
<Link href="/app/login">Login</Link>
|
||||
<Link href="/app/register">Register</Link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="js">
|
||||
import { Link } from '@inertiajs/vue3';
|
||||
// import DefaultLayout from '../Layouts/Default.vue';
|
||||
|
||||
export default {
|
||||
// layout: DefaultLayout,
|
||||
props: {
|
||||
testing: String,
|
||||
},
|
||||
|
||||
components: {
|
||||
Link
|
||||
}
|
||||
}
|
||||
</script>
|
||||
35
resources/js/Components/IconRounded.vue
Normal file
35
resources/js/Components/IconRounded.vue
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<script setup>
|
||||
import { colorsText, colorsBgLight } from '@/colors.js';
|
||||
import BaseIcon from '@/Components/BaseIcon.vue';
|
||||
|
||||
defineProps({
|
||||
icon: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
w: {
|
||||
type: String,
|
||||
default: 'w-12',
|
||||
},
|
||||
h: {
|
||||
type: String,
|
||||
default: 'h-12',
|
||||
},
|
||||
bg: Boolean,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BaseIcon
|
||||
:path="icon"
|
||||
:w="w"
|
||||
:h="h"
|
||||
size="24"
|
||||
class="rounded-full"
|
||||
:class="bg ? colorsBgLight[type] : [colorsText[type], 'bg-gray-50 dark:bg-slate-800']"
|
||||
/>
|
||||
</template>
|
||||
145
resources/js/Components/JustboilLogo.vue
Normal file
145
resources/js/Components/JustboilLogo.vue
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
<template>
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
||||
y="0px" viewBox="0 0 626.4 224.7" style="enable-background:new 0 0 626.4 224.7;" xml:space="preserve" fill="currentColor">
|
||||
<g>
|
||||
<g>
|
||||
<path class="st0"
|
||||
d="M215.3,69.1l-4.4,19.2h-47.1l-4.2,18h43.7l-4.5,19.2h-43.6l-5.9,25.4h47L192,170h-73.1l23.3-100.9H215.3z" />
|
||||
<path class="st0" d="M311.6,88.6h-31.4L261.4,170h-26.1L254,88.6h-31.5l4.5-19.5h89L311.6,88.6z" />
|
||||
<path class="st0" d="M422.1,69.1L398.9,170h-26.1l10.3-44.6h-38.3L334.4,170h-26.1l23.3-100.9h26.1l-8.6,37.1h38.3l8.6-37.1H422.1
|
||||
z" />
|
||||
<path class="st0" d="M536.7,69.1l-51.4,61.9l-9.1,39h-26.2l8.8-37.8l-23.2-63.1h27.9l13,39.6l30.2-39.6H536.7z" />
|
||||
<path class="st0" d="M563.8,171.8c-8.6,0-16.3-0.7-23.1-2.2c-6.8-1.5-12.6-3.3-17.5-5.6l5.2-24.2h2.8c4.7,4.2,10.1,7.5,16.4,9.9
|
||||
c6.3,2.3,13,3.5,20.3,3.5c7.4,0,12.9-1,16.3-3c3.5-2,5.2-4.9,5.2-8.6c0-1.4-0.3-2.6-0.8-3.6c-0.6-1-1.7-2-3.3-3
|
||||
c-1.6-1-3.9-2-6.7-2.9c-2.8-1-6.5-2.1-10.9-3.4c-4.9-1.4-9.3-2.8-13.2-4.4c-3.9-1.6-7.2-3.5-10-5.6c-2.8-2.2-4.8-4.8-6.3-7.7
|
||||
c-1.4-2.9-2.1-6.3-2.1-10.4c0-10.1,4.5-18.2,13.4-24.2c8.9-6,21.1-9,36.6-9c7.5,0,14.5,0.6,21.1,1.8c6.6,1.2,12.2,2.9,16.8,4.9
|
||||
l-4.9,23.2h-2.8c-3.5-3.2-8.2-5.9-13.9-8.1c-5.8-2.2-12.1-3.3-18.9-3.3c-6.7,0-11.9,1-15.5,2.9c-3.7,1.9-5.5,4.6-5.5,8
|
||||
c0,1.6,0.3,2.9,0.8,3.9c0.5,1,1.6,2.1,3.3,3c1.4,0.9,3.7,1.9,6.8,2.9c3.1,1.1,6.8,2.2,11,3.3c11.3,3,19.4,6.6,24.2,10.6
|
||||
s7.2,9.6,7.2,16.5c0,5.8-1.3,11-3.9,15.4c-2.6,4.4-6.2,8-10.8,10.8c-4.8,2.9-10.3,5.1-16.5,6.4
|
||||
C578.5,171.1,571.6,171.8,563.8,171.8z" />
|
||||
</g>
|
||||
<path class="st1" d="M539.2,37.1" />
|
||||
<path class="st1" d="M539.2,37.1" />
|
||||
<polygon class="st2" points="24,213.8 57.7,213.8 98.2,44.6 12.5,45.1 3.7,81 56.7,80.6 " />
|
||||
<polygon class="st0" points="72.1,170.5 112.4,2.8 199.8,2.8 192.4,39.2 137.1,39.2 105.8,170.1 " />
|
||||
<polygon class="st0" points="207,2.6 225.9,2.6 218.6,39 199.9,39 " />
|
||||
<polygon class="st3" points="233.2,2.9 252.1,2.9 244.7,39.4 226.1,39.4 " />
|
||||
<polygon class="st4" points="259.2,2.9 278.1,2.9 270.8,39.4 252.1,39.4 " />
|
||||
<g>
|
||||
<path class="st5" d="M97.4,213.7h-4.7l-8-12.1h-5.8l-2.8,12.1H72l7-30.2h8.3c1.9,0,3.4,0.1,4.5,0.4c1.2,0.2,2.2,0.7,3,1.3
|
||||
c0.8,0.6,1.4,1.2,1.8,2c0.4,0.8,0.7,1.8,0.7,2.9c0,2.5-0.8,4.7-2.4,6.6c-1.6,1.9-3.7,3.2-6.2,4L97.4,213.7z M92.9,191
|
||||
c0-0.7-0.1-1.3-0.3-1.8c-0.2-0.5-0.6-0.9-1-1.3c-0.5-0.4-1.2-0.7-1.9-0.9c-0.7-0.2-1.7-0.2-2.8-0.2h-4.6l-2.7,11.6h4.3
|
||||
c1.3,0,2.5-0.1,3.5-0.4c1-0.2,1.9-0.7,2.7-1.3c0.9-0.7,1.6-1.5,2.1-2.5C92.6,193.2,92.9,192.1,92.9,191z" />
|
||||
<path class="st5" d="M111.5,214.2c-3.2,0-5.6-0.7-7.4-2.2c-1.8-1.5-2.7-3.6-2.7-6.5c0-4.2,1.3-7.7,4-10.7c2.6-3,5.9-4.5,9.8-4.5
|
||||
c2.6,0,4.6,0.6,5.9,1.9c1.4,1.3,2.1,3.1,2.1,5.4c0,0.4-0.1,1-0.2,1.9c-0.1,0.9-0.3,1.9-0.6,3.1h-16.8c-0.1,0.4-0.1,0.8-0.2,1.2
|
||||
c0,0.4-0.1,0.7-0.1,1.1c0,1.9,0.6,3.4,1.8,4.5c1.2,1.1,2.8,1.6,5,1.6c1.5,0,3-0.3,4.6-0.9s2.9-1.2,4-2h0.2l-0.8,4.1
|
||||
c-0.7,0.2-1.3,0.5-1.8,0.7c-0.5,0.2-1.2,0.4-2.1,0.6c-0.8,0.2-1.6,0.4-2.2,0.5C113.3,214.2,112.5,214.2,111.5,214.2z M119.2,199.9
|
||||
c0.1-0.4,0.1-0.7,0.1-1c0-0.3,0-0.6,0-0.9c0-1.4-0.4-2.6-1.2-3.4c-0.8-0.8-2.1-1.2-3.8-1.2c-1.9,0-3.6,0.6-5.1,1.8
|
||||
c-1.5,1.2-2.5,2.8-3,4.7H119.2z" />
|
||||
<path class="st5" d="M132.8,214.3c-1.7,0-3.2-0.2-4.6-0.6s-2.5-0.9-3.4-1.4l0.9-4.1h0.2c0.3,0.2,0.7,0.5,1.1,0.9
|
||||
c0.5,0.3,1,0.7,1.7,1c0.6,0.3,1.4,0.6,2.2,0.8c0.8,0.2,1.7,0.3,2.6,0.3c1.9,0,3.4-0.4,4.5-1.1c1.1-0.7,1.6-1.7,1.6-3.1
|
||||
c0-0.7-0.3-1.3-0.8-1.7c-0.6-0.4-1.4-0.7-2.4-0.9c-0.5-0.1-1.2-0.3-1.9-0.4c-0.7-0.1-1.5-0.3-2.3-0.5c-1.6-0.4-2.8-1.1-3.5-1.9
|
||||
c-0.8-0.8-1.1-1.9-1.1-3.1c0-1.1,0.2-2,0.7-3c0.5-0.9,1.1-1.8,2.1-2.5c0.9-0.7,2-1.3,3.3-1.8c1.3-0.5,2.8-0.7,4.5-0.7
|
||||
c1.4,0,2.7,0.2,4.1,0.5c1.4,0.3,2.5,0.8,3.3,1.3l-0.8,3.9h-0.2c-0.2-0.2-0.5-0.4-1-0.7c-0.4-0.3-1-0.6-1.7-0.9
|
||||
c-0.6-0.3-1.3-0.5-2.1-0.7c-0.8-0.2-1.6-0.3-2.4-0.3c-1.7,0-3.1,0.4-4.1,1.1s-1.6,1.7-1.6,2.9c0,0.7,0.3,1.2,0.8,1.7
|
||||
c0.5,0.5,1.3,0.8,2.4,1.1c0.7,0.2,1.4,0.3,2.1,0.5c0.7,0.1,1.4,0.3,2.1,0.5c1.6,0.4,2.8,1,3.6,1.8s1.2,1.9,1.2,3.1
|
||||
c0,1-0.2,2.1-0.7,3.1c-0.5,1-1.2,1.9-2.2,2.6c-1,0.8-2.1,1.4-3.5,1.8C136,214,134.5,214.3,132.8,214.3z" />
|
||||
<path class="st5" d="M158.2,214.2c-3.2,0-5.6-0.7-7.4-2.2c-1.8-1.5-2.7-3.6-2.7-6.5c0-4.2,1.3-7.7,4-10.7c2.6-3,5.9-4.5,9.8-4.5
|
||||
c2.6,0,4.6,0.6,5.9,1.9c1.4,1.3,2.1,3.1,2.1,5.4c0,0.4-0.1,1-0.2,1.9c-0.1,0.9-0.3,1.9-0.6,3.1h-16.8c-0.1,0.4-0.1,0.8-0.2,1.2
|
||||
c0,0.4-0.1,0.7-0.1,1.1c0,1.9,0.6,3.4,1.8,4.5c1.2,1.1,2.8,1.6,5,1.6c1.5,0,3-0.3,4.6-0.9c1.6-0.6,2.9-1.2,4-2h0.2l-0.8,4.1
|
||||
c-0.7,0.2-1.3,0.5-1.8,0.7c-0.5,0.2-1.2,0.4-2.1,0.6c-0.8,0.2-1.6,0.4-2.2,0.5C160,214.2,159.2,214.2,158.2,214.2z M165.9,199.9
|
||||
c0.1-0.4,0.1-0.7,0.1-1c0-0.3,0-0.6,0-0.9c0-1.4-0.4-2.6-1.2-3.4c-0.8-0.8-2.1-1.2-3.8-1.2c-1.9,0-3.6,0.6-5.1,1.8
|
||||
c-1.5,1.2-2.5,2.8-3,4.7H165.9z" />
|
||||
<path class="st5"
|
||||
d="M186.8,211.3c-0.4,0.2-0.9,0.5-1.5,0.9c-0.6,0.4-1.3,0.7-1.9,1c-0.7,0.3-1.5,0.6-2.3,0.8
|
||||
c-0.9,0.2-1.8,0.3-3,0.3c-1.8,0-3.3-0.5-4.4-1.6c-1.1-1-1.7-2.4-1.7-4.1c0-1.8,0.4-3.3,1.2-4.6c0.8-1.2,2-2.2,3.5-3
|
||||
c1.5-0.8,3.4-1.3,5.6-1.7c2.2-0.3,4.6-0.6,7.4-0.6c0.1-0.4,0.2-0.7,0.2-1c0.1-0.3,0.1-0.6,0.1-0.9c0-0.6-0.1-1.2-0.4-1.6
|
||||
c-0.3-0.4-0.6-0.7-1.1-1c-0.5-0.2-1-0.4-1.7-0.5c-0.6-0.1-1.3-0.1-2.1-0.1c-1.2,0-2.5,0.2-4,0.6c-1.5,0.4-2.7,0.7-3.6,1.1H177
|
||||
l0.8-3.8c0.8-0.2,1.9-0.4,3.4-0.7c1.5-0.3,2.9-0.4,4.3-0.4c2.8,0,5,0.4,6.4,1.3c1.4,0.9,2.1,2.3,2.1,4.2c0,0.4,0,0.8-0.1,1.2
|
||||
s-0.1,0.8-0.2,1.2l-3.6,15.4h-3.8L186.8,211.3z M189.1,201.8c-2.1,0.1-4,0.2-5.6,0.5c-1.6,0.2-3,0.6-4,1c-1.1,0.4-1.9,1.1-2.5,1.8
|
||||
c-0.6,0.8-0.9,1.7-0.9,2.9c0,1,0.3,1.7,1,2.2c0.7,0.5,1.7,0.8,3.1,0.8c1.2,0,2.5-0.3,3.8-0.8c1.3-0.5,2.5-1.2,3.6-2L189.1,201.8z" />
|
||||
<path class="st5" d="M215.9,195.1h-0.2c-0.5-0.1-1-0.2-1.5-0.3c-0.5-0.1-1-0.1-1.7-0.1c-1.3,0-2.5,0.3-3.8,0.9
|
||||
c-1.3,0.6-2.5,1.3-3.6,2.1l-3.7,16.1h-3.9l5.2-22.7h3.9l-0.8,3.3c1.8-1.3,3.3-2.1,4.6-2.6c1.3-0.5,2.5-0.7,3.6-0.7
|
||||
c0.7,0,1.2,0,1.4,0.1c0.3,0,0.7,0.1,1.3,0.2L215.9,195.1z" />
|
||||
<path class="st5" d="M225.2,214.2c-1.4,0-2.7-0.2-3.8-0.5c-1.1-0.3-2.1-0.9-2.9-1.6c-0.8-0.7-1.4-1.6-1.9-2.7
|
||||
c-0.4-1.1-0.7-2.3-0.7-3.7c0-2.1,0.3-4.1,1-5.9c0.7-1.8,1.6-3.5,2.8-4.9c1.2-1.4,2.6-2.4,4.4-3.2c1.7-0.8,3.6-1.2,5.6-1.2
|
||||
c1.3,0,2.6,0.2,3.8,0.5c1.2,0.4,2.2,0.8,3.1,1.3l-0.8,4.1h-0.2c-0.3-0.2-0.6-0.5-1-0.8c-0.4-0.3-0.9-0.6-1.4-0.9
|
||||
c-0.6-0.3-1.2-0.5-1.9-0.7c-0.7-0.2-1.5-0.3-2.3-0.3c-2.6,0-4.8,1.1-6.5,3.3c-1.7,2.2-2.5,4.9-2.5,8.1c0,1.9,0.5,3.4,1.5,4.4
|
||||
c1,1,2.4,1.5,4.2,1.5c0.9,0,1.7-0.1,2.6-0.4c0.9-0.2,1.6-0.5,2.2-0.8c0.7-0.3,1.3-0.6,1.9-1c0.6-0.3,1-0.6,1.2-0.8h0.2l-0.8,4.2
|
||||
c-1.2,0.5-2.4,1-3.8,1.4C227.9,214,226.5,214.2,225.2,214.2z" />
|
||||
<path class="st5" d="M259.9,196.2c0,0.3,0,0.8-0.1,1.3c-0.1,0.6-0.1,1-0.3,1.5l-3.4,14.7h-3.8l3-12.9c0.2-0.7,0.3-1.3,0.4-1.9
|
||||
c0.1-0.5,0.1-1.1,0.1-1.6c0-1.1-0.3-2-0.9-2.6c-0.6-0.6-1.6-0.9-3.1-0.9c-1,0-2.2,0.3-3.4,0.9c-1.2,0.6-2.5,1.2-3.7,2l-3.9,16.9
|
||||
h-3.8l7.3-31.6h3.8l-2.7,11.4c1.5-1,2.8-1.8,4.1-2.3c1.3-0.5,2.6-0.8,3.9-0.8c2,0,3.5,0.5,4.6,1.5
|
||||
C259.4,192.9,259.9,194.3,259.9,196.2z" />
|
||||
<path class="st5" d="M308.1,195.1c0,3.3-0.8,6.4-2.5,9.4c-1.7,3-4,5.2-6.9,6.8c-1.8,1-3.6,1.6-5.5,1.9c-1.9,0.3-4,0.5-6.4,0.5
|
||||
h-8.2l7-30.2h7.1c2.2,0,4.2,0.2,6,0.5c1.8,0.3,3.5,1,5,2c1.4,1,2.5,2.2,3.3,3.8C307.7,191.2,308.1,193,308.1,195.1z M303.8,195.4
|
||||
c0-1.5-0.3-2.9-0.8-4c-0.6-1.1-1.4-2-2.5-2.8c-1.1-0.7-2.3-1.2-3.5-1.5c-1.3-0.2-2.8-0.4-4.8-0.4h-3.4l-5.5,23.6h4.2
|
||||
c1.9,0,3.7-0.2,5.2-0.5c1.5-0.3,3-0.9,4.3-1.6c2.2-1.2,3.9-3,5-5.4C303.3,200.6,303.8,198.1,303.8,195.4z" />
|
||||
<path class="st5"
|
||||
d="M324.7,211.3c-0.4,0.2-0.9,0.5-1.5,0.9c-0.6,0.4-1.3,0.7-1.9,1c-0.7,0.3-1.5,0.6-2.3,0.8
|
||||
c-0.9,0.2-1.8,0.3-3,0.3c-1.8,0-3.3-0.5-4.4-1.6c-1.1-1-1.7-2.4-1.7-4.1c0-1.8,0.4-3.3,1.2-4.6c0.8-1.2,2-2.2,3.5-3
|
||||
c1.5-0.8,3.4-1.3,5.6-1.7c2.2-0.3,4.6-0.6,7.4-0.6c0.1-0.4,0.2-0.7,0.2-1c0.1-0.3,0.1-0.6,0.1-0.9c0-0.6-0.1-1.2-0.4-1.6
|
||||
c-0.3-0.4-0.6-0.7-1.1-1c-0.5-0.2-1-0.4-1.7-0.5c-0.6-0.1-1.3-0.1-2.1-0.1c-1.2,0-2.5,0.2-4,0.6c-1.5,0.4-2.7,0.7-3.6,1.1h-0.2
|
||||
l0.8-3.8c0.8-0.2,1.9-0.4,3.4-0.7c1.5-0.3,2.9-0.4,4.3-0.4c2.8,0,5,0.4,6.4,1.3c1.4,0.9,2.1,2.3,2.1,4.2c0,0.4,0,0.8-0.1,1.2
|
||||
s-0.1,0.8-0.2,1.2l-3.6,15.4h-3.8L324.7,211.3z M327,201.8c-2.1,0.1-4,0.2-5.6,0.5c-1.6,0.2-3,0.6-4,1c-1.1,0.4-1.9,1.1-2.5,1.8
|
||||
c-0.6,0.8-0.9,1.7-0.9,2.9c0,1,0.3,1.7,1,2.2c0.7,0.5,1.7,0.8,3.1,0.8c1.2,0,2.5-0.3,3.8-0.8c1.3-0.5,2.5-1.2,3.6-2L327,201.8z" />
|
||||
<path class="st5" d="M352.5,191l-0.7,3.1h-7.9l-2.4,10.5c-0.1,0.5-0.3,1.1-0.4,1.8c-0.1,0.7-0.2,1.2-0.2,1.6c0,1,0.3,1.7,0.8,2.2
|
||||
c0.5,0.5,1.4,0.7,2.8,0.7c0.6,0,1.2-0.1,2-0.3c0.8-0.2,1.3-0.3,1.6-0.4h0.2l-0.7,3.3c-0.8,0.2-1.6,0.3-2.4,0.5
|
||||
c-0.9,0.1-1.6,0.2-2.3,0.2c-1.9,0-3.3-0.4-4.4-1.2c-1-0.8-1.5-2.1-1.5-3.9c0-0.4,0-0.9,0.1-1.3c0.1-0.4,0.1-0.9,0.3-1.5l2.8-12.2
|
||||
h-2.6l0.7-3.1h2.6l1.5-6.5h3.9l-1.5,6.5H352.5z" />
|
||||
<path class="st5"
|
||||
d="M366.3,211.3c-0.4,0.2-0.9,0.5-1.5,0.9c-0.6,0.4-1.3,0.7-1.9,1c-0.7,0.3-1.5,0.6-2.3,0.8
|
||||
c-0.9,0.2-1.8,0.3-3,0.3c-1.8,0-3.3-0.5-4.4-1.6c-1.1-1-1.7-2.4-1.7-4.1c0-1.8,0.4-3.3,1.2-4.6c0.8-1.2,2-2.2,3.5-3
|
||||
c1.5-0.8,3.4-1.3,5.6-1.7c2.2-0.3,4.6-0.6,7.4-0.6c0.1-0.4,0.2-0.7,0.2-1c0.1-0.3,0.1-0.6,0.1-0.9c0-0.6-0.1-1.2-0.4-1.6
|
||||
c-0.3-0.4-0.6-0.7-1.1-1c-0.5-0.2-1-0.4-1.7-0.5c-0.6-0.1-1.3-0.1-2.1-0.1c-1.2,0-2.5,0.2-4,0.6c-1.5,0.4-2.7,0.7-3.6,1.1h-0.2
|
||||
l0.8-3.8c0.8-0.2,1.9-0.4,3.4-0.7c1.5-0.3,2.9-0.4,4.3-0.4c2.8,0,5,0.4,6.4,1.3c1.4,0.9,2.1,2.3,2.1,4.2c0,0.4,0,0.8-0.1,1.2
|
||||
s-0.1,0.8-0.2,1.2l-3.6,15.4h-3.8L366.3,211.3z M368.5,201.8c-2.1,0.1-4,0.2-5.6,0.5c-1.6,0.2-3,0.6-4,1c-1.1,0.4-1.9,1.1-2.5,1.8
|
||||
c-0.6,0.8-0.9,1.7-0.9,2.9c0,1,0.3,1.7,1,2.2c0.7,0.5,1.7,0.8,3.1,0.8c1.2,0,2.5-0.3,3.8-0.8c1.3-0.5,2.5-1.2,3.6-2L368.5,201.8z" />
|
||||
<path class="st5" d="M417.4,213.7h-4.7l-8-12.1h-5.8l-2.8,12.1H392l7-30.2h8.3c1.9,0,3.4,0.1,4.5,0.4c1.2,0.2,2.2,0.7,3,1.3
|
||||
c0.8,0.6,1.4,1.2,1.8,2c0.4,0.8,0.7,1.8,0.7,2.9c0,2.5-0.8,4.7-2.4,6.6c-1.6,1.9-3.7,3.2-6.2,4L417.4,213.7z M412.8,191
|
||||
c0-0.7-0.1-1.3-0.3-1.8c-0.2-0.5-0.6-0.9-1-1.3c-0.5-0.4-1.2-0.7-1.9-0.9c-0.7-0.2-1.7-0.2-2.8-0.2h-4.6l-2.7,11.6h4.3
|
||||
c1.3,0,2.5-0.1,3.5-0.4c1-0.2,1.9-0.7,2.7-1.3c0.9-0.7,1.6-1.5,2.1-2.5C412.6,193.2,412.8,192.1,412.8,191z" />
|
||||
<path class="st5" d="M431.5,214.2c-3.2,0-5.6-0.7-7.4-2.2c-1.8-1.5-2.7-3.6-2.7-6.5c0-4.2,1.3-7.7,4-10.7s5.9-4.5,9.8-4.5
|
||||
c2.6,0,4.6,0.6,5.9,1.9c1.4,1.3,2.1,3.1,2.1,5.4c0,0.4-0.1,1-0.2,1.9c-0.1,0.9-0.3,1.9-0.6,3.1h-16.8c-0.1,0.4-0.1,0.8-0.2,1.2
|
||||
c0,0.4-0.1,0.7-0.1,1.1c0,1.9,0.6,3.4,1.8,4.5c1.2,1.1,2.8,1.6,5,1.6c1.5,0,3-0.3,4.6-0.9c1.6-0.6,2.9-1.2,4-2h0.2l-0.8,4.1
|
||||
c-0.7,0.2-1.3,0.5-1.8,0.7s-1.2,0.4-2.1,0.6c-0.8,0.2-1.6,0.4-2.2,0.5C433.3,214.2,432.5,214.2,431.5,214.2z M439.2,199.9
|
||||
c0.1-0.4,0.1-0.7,0.1-1c0-0.3,0-0.6,0-0.9c0-1.4-0.4-2.6-1.2-3.4c-0.8-0.8-2.1-1.2-3.8-1.2c-1.9,0-3.6,0.6-5.1,1.8
|
||||
c-1.5,1.2-2.5,2.8-3,4.7H439.2z" />
|
||||
<path class="st5" d="M468.8,198.2c0,2.2-0.4,4.4-1.1,6.3c-0.7,2-1.6,3.7-2.8,5c-1.2,1.4-2.5,2.5-4.1,3.4c-1.6,0.8-3.2,1.2-5,1.2
|
||||
c-1.2,0-2.4-0.1-3.4-0.4s-2-0.7-2.8-1.2l-2.2,9.5h-3.8l7.2-31h3.8l-0.6,2.4c1.3-0.9,2.5-1.6,3.7-2.2c1.2-0.6,2.6-0.8,4.1-0.8
|
||||
c2.2,0,3.9,0.7,5.1,2.1C468.2,193.8,468.8,195.7,468.8,198.2z M464.8,198.9c0-1.6-0.4-2.9-1.1-3.7c-0.7-0.9-1.8-1.3-3.4-1.3
|
||||
c-1.1,0-2.3,0.3-3.5,0.8c-1.2,0.6-2.3,1.2-3.4,1.9l-3,12.9c0.9,0.5,1.7,0.8,2.5,1.1c0.8,0.2,1.8,0.3,2.9,0.3c1.4,0,2.7-0.3,3.8-1
|
||||
s2.1-1.6,2.8-2.6c0.8-1.1,1.4-2.4,1.7-3.8C464.6,202,464.8,200.5,464.8,198.9z" />
|
||||
<path class="st5" d="M494.1,199.1c0,2-0.3,4-0.9,5.8c-0.6,1.9-1.5,3.5-2.7,4.9c-1.2,1.4-2.6,2.6-4.1,3.4c-1.6,0.8-3.4,1.2-5.4,1.2
|
||||
c-2.7,0-4.8-0.8-6.3-2.3c-1.5-1.5-2.3-3.7-2.3-6.4c0-2,0.3-4,0.9-5.8c0.6-1.8,1.5-3.5,2.7-4.9c1.1-1.4,2.5-2.5,4.2-3.3
|
||||
c1.6-0.8,3.4-1.2,5.4-1.2c2.6,0,4.7,0.7,6.3,2.2S494.1,196.3,494.1,199.1z M487.8,207.6c0.7-1.1,1.3-2.3,1.7-3.8s0.6-2.9,0.6-4.5
|
||||
c0-1.9-0.5-3.3-1.4-4.3c-0.9-1-2.2-1.5-3.9-1.5c-1.3,0-2.5,0.3-3.6,0.9c-1,0.6-2,1.5-2.7,2.6c-0.7,1.1-1.3,2.3-1.7,3.8
|
||||
c-0.4,1.4-0.6,2.9-0.6,4.5c0,1.9,0.5,3.3,1.4,4.3c0.9,1,2.2,1.5,3.9,1.5c1.3,0,2.5-0.3,3.6-0.9
|
||||
C486.2,209.6,487.1,208.7,487.8,207.6z" />
|
||||
<path class="st5" d="M504.2,214.3c-1.7,0-3.2-0.2-4.6-0.6c-1.3-0.4-2.5-0.9-3.4-1.4l0.9-4.1h0.2c0.3,0.2,0.7,0.5,1.1,0.9
|
||||
c0.5,0.3,1,0.7,1.7,1c0.6,0.3,1.4,0.6,2.2,0.8c0.8,0.2,1.7,0.3,2.6,0.3c1.9,0,3.4-0.4,4.5-1.1s1.6-1.7,1.6-3.1
|
||||
c0-0.7-0.3-1.3-0.8-1.7c-0.6-0.4-1.4-0.7-2.4-0.9c-0.5-0.1-1.2-0.3-1.9-0.4c-0.7-0.1-1.5-0.3-2.3-0.5c-1.6-0.4-2.8-1.1-3.5-1.9
|
||||
c-0.8-0.8-1.1-1.9-1.1-3.1c0-1.1,0.2-2,0.7-3c0.5-0.9,1.1-1.8,2.1-2.5c0.9-0.7,2-1.3,3.3-1.8c1.3-0.5,2.8-0.7,4.5-0.7
|
||||
c1.4,0,2.7,0.2,4.1,0.5c1.4,0.3,2.5,0.8,3.3,1.3l-0.8,3.9H516c-0.2-0.2-0.5-0.4-1-0.7c-0.4-0.3-1-0.6-1.7-0.9
|
||||
c-0.6-0.3-1.3-0.5-2.1-0.7c-0.8-0.2-1.6-0.3-2.4-0.3c-1.7,0-3.1,0.4-4.1,1.1c-1.1,0.7-1.6,1.7-1.6,2.9c0,0.7,0.3,1.2,0.8,1.7
|
||||
c0.5,0.5,1.3,0.8,2.4,1.1c0.7,0.2,1.4,0.3,2.1,0.5c0.7,0.1,1.4,0.3,2.1,0.5c1.6,0.4,2.8,1,3.6,1.8s1.2,1.9,1.2,3.1
|
||||
c0,1-0.2,2.1-0.7,3.1c-0.5,1-1.2,1.9-2.2,2.6c-1,0.8-2.1,1.4-3.5,1.8C507.4,214,505.9,214.3,504.2,214.3z" />
|
||||
<path class="st5" d="M528,191l-5.3,22.7h-3.8l5.3-22.7H528z M530.1,183.3l-0.9,4h-4.3l0.9-4H530.1z" />
|
||||
<path class="st5" d="M547.4,191l-0.7,3.1h-7.9l-2.4,10.5c-0.1,0.5-0.3,1.1-0.4,1.8c-0.1,0.7-0.2,1.2-0.2,1.6c0,1,0.3,1.7,0.8,2.2
|
||||
c0.5,0.5,1.4,0.7,2.8,0.7c0.6,0,1.2-0.1,2-0.3c0.8-0.2,1.3-0.3,1.6-0.4h0.2l-0.7,3.3c-0.8,0.2-1.6,0.3-2.4,0.5
|
||||
c-0.9,0.1-1.6,0.2-2.3,0.2c-1.9,0-3.3-0.4-4.4-1.2c-1-0.8-1.5-2.1-1.5-3.9c0-0.4,0-0.9,0.1-1.3c0.1-0.4,0.1-0.9,0.3-1.5l2.8-12.2
|
||||
h-2.6l0.7-3.1h2.6l1.5-6.5h3.9l-1.5,6.5H547.4z" />
|
||||
<path class="st5" d="M569.2,199.1c0,2-0.3,4-0.9,5.8c-0.6,1.9-1.5,3.5-2.7,4.9c-1.2,1.4-2.6,2.6-4.1,3.4c-1.5,0.8-3.4,1.2-5.4,1.2
|
||||
c-2.7,0-4.8-0.8-6.3-2.3c-1.5-1.5-2.3-3.7-2.3-6.4c0-2,0.3-4,0.9-5.8c0.6-1.8,1.5-3.5,2.7-4.9c1.1-1.4,2.5-2.5,4.2-3.3
|
||||
c1.6-0.8,3.4-1.2,5.4-1.2c2.6,0,4.7,0.7,6.3,2.2C568.4,194.1,569.2,196.3,569.2,199.1z M563,207.6c0.7-1.1,1.3-2.3,1.7-3.8
|
||||
c0.4-1.4,0.6-2.9,0.6-4.5c0-1.9-0.5-3.3-1.4-4.3c-0.9-1-2.2-1.5-3.9-1.5c-1.3,0-2.5,0.3-3.6,0.9c-1,0.6-2,1.5-2.7,2.6
|
||||
c-0.7,1.1-1.3,2.3-1.7,3.8c-0.4,1.4-0.6,2.9-0.6,4.5c0,1.9,0.5,3.3,1.4,4.3c0.9,1,2.2,1.5,3.9,1.5c1.3,0,2.5-0.3,3.6-0.9
|
||||
C561.3,209.6,562.2,208.7,563,207.6z" />
|
||||
<path class="st5" d="M590.6,195.1h-0.2c-0.5-0.1-1.1-0.2-1.5-0.3c-0.5-0.1-1-0.1-1.7-0.1c-1.3,0-2.5,0.3-3.8,0.9
|
||||
c-1.3,0.6-2.5,1.3-3.6,2.1l-3.7,16.1h-3.9l5.2-22.7h3.9l-0.8,3.3c1.8-1.3,3.3-2.1,4.6-2.6c1.3-0.5,2.5-0.7,3.6-0.7
|
||||
c0.7,0,1.2,0,1.4,0.1c0.3,0,0.7,0.1,1.3,0.2L590.6,195.1z" />
|
||||
<path class="st5" d="M594.1,222.1h-4.2l6.6-9.7l-4.1-21.3h4l3.2,16.9l10.9-16.9h4.2L594.1,222.1z" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
171
resources/js/Components/NavBar.vue
Normal file
171
resources/js/Components/NavBar.vue
Normal file
|
|
@ -0,0 +1,171 @@
|
|||
<script lang="ts" setup>
|
||||
import { usePage, router } from '@inertiajs/vue3'
|
||||
// import { usePage } from '@inertiajs/inertia-vue3';
|
||||
// import { Inertia } from '@inertiajs/inertia';
|
||||
import {ComputedRef} from "vue";
|
||||
|
||||
import { computed, ref } from 'vue';
|
||||
import { containerMaxW } from '@/config.js';
|
||||
// import { MainService } from '@/Stores/main.js';
|
||||
import { StyleService } from '@/Stores/style.js';
|
||||
import { LayoutService } from '@/Stores/layout.js';
|
||||
import {
|
||||
mdiForwardburger,
|
||||
mdiBackburger,
|
||||
mdiClose,
|
||||
mdiDotsVertical,
|
||||
mdiMenu,
|
||||
// mdiClockOutline,
|
||||
mdiCloudDownloadOutline,
|
||||
mdiCloud,
|
||||
mdiCrop,
|
||||
mdiAccount,
|
||||
mdiCogOutline,
|
||||
mdiEmail,
|
||||
mdiLogout,
|
||||
mdiGithub,
|
||||
mdiThemeLightDark,
|
||||
} from '@mdi/js';
|
||||
import NavBarItem from '@/Components/NavBarItem.vue';
|
||||
import NavBarItemLabel from '@/Components/NavBarItemLabel.vue';
|
||||
import NavBarMenu from '@/Components/NavBarMenu.vue';
|
||||
import BaseDivider from '@/Components/BaseDivider.vue';
|
||||
import UserAvatarCurrentUser from '@/Components/UserAvatarCurrentUser.vue';
|
||||
import BaseIcon from '@/Components/BaseIcon.vue';
|
||||
import NavBarSearch from '@/Components/NavBarSearch.vue';
|
||||
import { stardust } from '@eidellev/adonis-stardust/client';
|
||||
import IUser from "App/Models/User";
|
||||
|
||||
// const mainStore = MainService();
|
||||
// const userName = computed(() =>mainStore.userName);
|
||||
|
||||
|
||||
|
||||
const styleService = StyleService();
|
||||
// const props = defineProps({
|
||||
// user: {
|
||||
// type: Object,
|
||||
// default: () => ({}),
|
||||
// }
|
||||
// });
|
||||
// const userName = computed(() => usePage().props.user.login)
|
||||
|
||||
const user: ComputedRef<IUser>= computed(() => {
|
||||
return usePage().props.authUser as IUser;
|
||||
});
|
||||
// const userName = computed(() => props.user.login)
|
||||
|
||||
const toggleLightDark = () => {
|
||||
styleService.setDarkMode();
|
||||
};
|
||||
|
||||
const layoutStore = LayoutService();
|
||||
|
||||
const isMenuNavBarActive = ref(false);
|
||||
|
||||
const menuNavBarToggle = () => {
|
||||
isMenuNavBarActive.value = !isMenuNavBarActive.value;
|
||||
};
|
||||
|
||||
const menuOpenLg = () => {
|
||||
layoutStore.isAsideLgActive = true;
|
||||
};
|
||||
|
||||
// const logout = () => {
|
||||
// // router.post(route('logout'))
|
||||
// Inertia.get(stardust.route('app.index'));
|
||||
// };
|
||||
const logout = async() => {
|
||||
// router.post(route('logout'));
|
||||
await router.post(stardust.route('logout'));
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav
|
||||
class="top-0 left-0 right-0 fixed bg-gray-50 h-14 z-30 w-screen transition-position xl:pl-60 lg:w-auto dark:bg-slate-800"
|
||||
>
|
||||
<div class="flex lg:items-stretch" :class="containerMaxW">
|
||||
<div class="flex-1 items-stretch flex h-14">
|
||||
<NavBarItem type="flex lg:hidden" @click.prevent="layoutStore.asideMobileToggle()">
|
||||
<BaseIcon
|
||||
:path="layoutStore.isAsideMobileExpanded ? mdiBackburger : mdiForwardburger"
|
||||
size="24"
|
||||
/>
|
||||
</NavBarItem>
|
||||
<NavBarItem type="hidden lg:flex xl:hidden" @click.prevent="menuOpenLg">
|
||||
<BaseIcon :path="mdiMenu" size="24" />
|
||||
</NavBarItem>
|
||||
<NavBarItem>
|
||||
<NavBarSearch />
|
||||
</NavBarItem>
|
||||
</div>
|
||||
<div class="flex-none items-stretch flex h-14 lg:hidden">
|
||||
<NavBarItem @click.prevent="menuNavBarToggle">
|
||||
<BaseIcon :path="isMenuNavBarActive ? mdiClose : mdiDotsVertical" size="24" />
|
||||
</NavBarItem>
|
||||
</div>
|
||||
<div
|
||||
class="absolute w-screen top-14 left-0 bg-gray-50 shadow lg:w-auto lg:items-stretch lg:flex lg:grow lg:static lg:border-b-0 lg:overflow-visible lg:shadow-none dark:bg-slate-800"
|
||||
:class="[isMenuNavBarActive ? 'block' : 'hidden']"
|
||||
>
|
||||
<div
|
||||
class="max-h-screen-menu overflow-y-auto lg:overflow-visible lg:flex lg:items-stretch lg:justify-end lg:ml-auto"
|
||||
>
|
||||
<NavBarMenu>
|
||||
<NavBarItemLabel :icon="mdiMenu" label="Help menu" />
|
||||
<template #dropdown>
|
||||
<!-- <NavBarItem>
|
||||
<NavBarItemLabel :icon="mdiClockOutline" label="Item One" />
|
||||
</NavBarItem> -->
|
||||
<NavBarItem href="/docs/HandbuchTethys.pdf" target="_blank">
|
||||
<NavBarItemLabel :icon="mdiCloudDownloadOutline" label="Tethys Manual" />
|
||||
</NavBarItem>
|
||||
<NavBarItem href="/docs/geopackage_v01.pdf" target="_blank">
|
||||
<NavBarItemLabel :icon="mdiCloud" label="GeoPackage Help" />
|
||||
</NavBarItem>
|
||||
<BaseDivider nav-bar />
|
||||
<NavBarItem>
|
||||
<NavBarItemLabel :icon="mdiCrop" label="Item Last" />
|
||||
</NavBarItem>
|
||||
</template>
|
||||
</NavBarMenu>
|
||||
|
||||
<NavBarMenu>
|
||||
<NavBarItemLabel v-bind:label="user.login">
|
||||
<UserAvatarCurrentUser class="w-6 h-6 mr-3 inline-flex" />
|
||||
</NavBarItemLabel>
|
||||
|
||||
<template #dropdown>
|
||||
<!-- <NavBarItem> -->
|
||||
<!-- <NavBarItem route-name="admin.account.info"> -->
|
||||
<NavBarItem :route-name="'admin.account.info'" >
|
||||
<NavBarItemLabel :icon="mdiAccount" label="My Profile" />
|
||||
</NavBarItem>
|
||||
<NavBarItem :route-name="'settings'">
|
||||
<NavBarItemLabel :icon="mdiCogOutline" label="Settings" />
|
||||
</NavBarItem>
|
||||
<NavBarItem>
|
||||
<NavBarItemLabel :icon="mdiEmail" label="Messages" />
|
||||
</NavBarItem>
|
||||
<BaseDivider nav-bar />
|
||||
<NavBarItem @click="logout">
|
||||
<NavBarItemLabel :icon="mdiLogout" label="Log Out" />
|
||||
</NavBarItem>
|
||||
</template>
|
||||
</NavBarMenu>
|
||||
|
||||
<NavBarItem is-desktop-icon-only @click.prevent="toggleLightDark">
|
||||
<NavBarItemLabel v-bind:icon="mdiThemeLightDark" label="Light/Dark" is-desktop-icon-only />
|
||||
</NavBarItem>
|
||||
<NavBarItem href="https://gitea.geologie.ac.at/geolba/tethys" target="_blank" is-desktop-icon-only>
|
||||
<NavBarItemLabel v-bind:icon="mdiGithub" label="GitHub" is-desktop-icon-only />
|
||||
</NavBarItem>
|
||||
<NavBarItem is-desktop-icon-only @click="logout">
|
||||
<NavBarItemLabel v-bind:icon="mdiLogout" label="Log out" is-desktop-icon-only />
|
||||
</NavBarItem>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
90
resources/js/Components/NavBarItem.vue
Normal file
90
resources/js/Components/NavBarItem.vue
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
<script setup>
|
||||
import { StyleService } from '@/Stores/style.js'
|
||||
// import { Link } from '@inertiajs/vue3'
|
||||
import { Link } from '@inertiajs/vue3'
|
||||
import { computed } from 'vue'
|
||||
import { stardust } from '@eidellev/adonis-stardust/client';
|
||||
|
||||
const props = defineProps({
|
||||
href: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
routeName: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
param:{
|
||||
type:Number
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'flex'
|
||||
},
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
isDesktopIconOnly: Boolean,
|
||||
dropdown: Boolean,
|
||||
active: Boolean
|
||||
})
|
||||
|
||||
const is = computed(() => {
|
||||
if (props.href) {
|
||||
return 'a'
|
||||
}
|
||||
|
||||
if (props.routeName) {
|
||||
return Link
|
||||
}
|
||||
|
||||
return 'div'
|
||||
})
|
||||
|
||||
const styleStore = StyleService()
|
||||
|
||||
const activeColor = props.activeColor ?? `${styleStore.navBarItemLabelActiveColorStyle} dark:text-slate-400`
|
||||
|
||||
const activeClass = computed(
|
||||
// () => props.routeName && route().current(props.routeName) == true ? props.activeColor : null
|
||||
() => props.routeName && stardust.isCurrent(props.routeName) ? props.activeColor : null
|
||||
)
|
||||
// const itemRoute = computed(() => (props.routeName ? stardust.route(props.routeName): ''));
|
||||
|
||||
const componentClass = computed(() => {
|
||||
const base = [
|
||||
props.type,
|
||||
props.active
|
||||
? activeColor
|
||||
: `${styleStore.navBarItemLabelStyle} dark:text-white dark:hover:text-slate-400 ${styleStore.navBarItemLabelHoverStyle}`
|
||||
]
|
||||
|
||||
if (props.type === 'block') {
|
||||
base.push('lg:flex')
|
||||
}
|
||||
|
||||
if (!props.dropdown) {
|
||||
base.push('py-2', 'px-3')
|
||||
} else {
|
||||
base.push('p-0', 'lg:py-2', 'lg:px-3')
|
||||
}
|
||||
|
||||
if (props.isDesktopIconOnly) {
|
||||
base.push('lg:w-16', 'lg:justify-center')
|
||||
}
|
||||
|
||||
return base
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component
|
||||
:is="is"
|
||||
class="items-center grow-0 shrink-0 relative cursor-pointer"
|
||||
:class="[componentClass, activeClass]"
|
||||
:href="routeName ? stardust.route(props.routeName, [props.param]) : href"
|
||||
>
|
||||
<slot />
|
||||
</component>
|
||||
</template>
|
||||
28
resources/js/Components/NavBarItemLabel.vue
Normal file
28
resources/js/Components/NavBarItemLabel.vue
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<script setup>
|
||||
import BaseIcon from '@/Components/BaseIcon.vue'
|
||||
|
||||
defineProps({
|
||||
icon: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
isDesktopIconOnly: Boolean
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<slot />
|
||||
<BaseIcon
|
||||
v-if="icon"
|
||||
:path="icon"
|
||||
class="transition-colors"
|
||||
/>
|
||||
<span
|
||||
class="px-2 transition-colors"
|
||||
:class="{ 'lg:hidden':isDesktopIconOnly && icon }"
|
||||
>{{ label }}</span>
|
||||
</template>
|
||||
62
resources/js/Components/NavBarMenu.vue
Normal file
62
resources/js/Components/NavBarMenu.vue
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
<script setup>
|
||||
import { StyleService } from '@/Stores/style.js'
|
||||
import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
|
||||
import NavBarItem from '@/Components/NavBarItem.vue'
|
||||
import BaseIcon from '@/Components/BaseIcon.vue'
|
||||
|
||||
const styleStore = StyleService()
|
||||
|
||||
const isDropdownActive = ref(false)
|
||||
|
||||
const toggleDropdownIcon = computed(() => isDropdownActive.value ? mdiChevronUp : mdiChevronDown)
|
||||
|
||||
const toggle = () => {
|
||||
isDropdownActive.value = !isDropdownActive.value
|
||||
}
|
||||
|
||||
const root = ref(null)
|
||||
|
||||
const forceClose = event => {
|
||||
if (!root.value.$el.contains(event.target)) {
|
||||
isDropdownActive.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('click', forceClose)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('click', forceClose)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NavBarItem
|
||||
ref="root"
|
||||
type="block"
|
||||
:active="isDropdownActive"
|
||||
dropdown
|
||||
@click="toggle"
|
||||
>
|
||||
<a
|
||||
class="flex items-center py-2 px-3 dark:bg-slate-800 lg:bg-transparent lg:dark:bg-transparent"
|
||||
:class="styleStore.navBarMenuListUpperLabelStyle"
|
||||
>
|
||||
<slot />
|
||||
<BaseIcon
|
||||
:path="toggleDropdownIcon"
|
||||
class="hidden lg:inline-flex transition-colors"
|
||||
/>
|
||||
</a>
|
||||
<div
|
||||
class="-mx-px text-sm border-b border-gray-100 lg:border lg:bg-white lg:absolute
|
||||
lg:top-full lg:left-0 lg:min-w-full lg:z-20 lg:rounded-b lg:dark:bg-slate-800
|
||||
dark:border-slate-700"
|
||||
:class="{'lg:hidden':!isDropdownActive}"
|
||||
>
|
||||
<slot name="dropdown" />
|
||||
</div>
|
||||
</NavBarItem>
|
||||
</template>
|
||||
13
resources/js/Components/NavBarSearch.vue
Normal file
13
resources/js/Components/NavBarSearch.vue
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<script setup>
|
||||
import FormControl from '@/Components/FormControl.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FormControl
|
||||
ref="root"
|
||||
placeholder="Search (ctrl+k)"
|
||||
ctrl-k-focus
|
||||
transparent
|
||||
borderless
|
||||
/>
|
||||
</template>
|
||||
68
resources/js/Components/NotificationBar.vue
Normal file
68
resources/js/Components/NotificationBar.vue
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
<script setup>
|
||||
import { ref, computed, useSlots } from 'vue'
|
||||
import { mdiClose } from '@mdi/js'
|
||||
import { colorsBgLight, colorsOutline } from '@/colors.js'
|
||||
import BaseLevel from '@/Components/BaseLevel.vue'
|
||||
import BaseIcon from '@/Components/BaseIcon.vue'
|
||||
import BaseButton from '@/Components/BaseButton.vue'
|
||||
|
||||
const props = defineProps({
|
||||
icon: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
outline: Boolean,
|
||||
color: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const componentClass = computed(() => props.outline
|
||||
? colorsOutline[props.color]
|
||||
: colorsBgLight[props.color]
|
||||
)
|
||||
|
||||
const isDismissed = ref(false)
|
||||
|
||||
const dismiss = () => {
|
||||
isDismissed.value = true
|
||||
}
|
||||
|
||||
const slots = useSlots()
|
||||
|
||||
const hasRightSlot = computed(() => slots.right)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="!isDismissed"
|
||||
:class="componentClass"
|
||||
class="px-3 py-6 md:py-3 mb-6 last:mb-0 border rounded transition-colors duration-150"
|
||||
>
|
||||
<BaseLevel>
|
||||
<div class="flex flex-col md:flex-row items-center">
|
||||
<BaseIcon
|
||||
v-if="icon"
|
||||
:path="icon"
|
||||
w="w-10 md:w-5"
|
||||
h="h-10 md:h-5"
|
||||
size="24"
|
||||
class="md:mr-2"
|
||||
/>
|
||||
<span class="text-center md:text-left"><slot /></span>
|
||||
</div>
|
||||
<slot
|
||||
v-if="hasRightSlot"
|
||||
name="right"
|
||||
/>
|
||||
<BaseButton
|
||||
v-else
|
||||
:icon="mdiClose"
|
||||
:outline="outline"
|
||||
small
|
||||
@click="dismiss"
|
||||
/>
|
||||
</BaseLevel>
|
||||
</div>
|
||||
</template>
|
||||
24
resources/js/Components/NotificationBarInCard.vue
Normal file
24
resources/js/Components/NotificationBarInCard.vue
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<script setup>
|
||||
import { colorsBgLight } from '@/colors.js';
|
||||
|
||||
defineProps({
|
||||
color: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
isPlacedWithHeader: {
|
||||
type: Boolean,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col mb-6 -mt-6 -mr-6 -ml-6 animate-fade-in">
|
||||
<div
|
||||
:class="[colorsBgLight[color], { 'rounded-t-xl': !isPlacedWithHeader }]"
|
||||
class="flex flex-col p-6 transition-colors"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
63
resources/js/Components/NumberDynamic.vue
Normal file
63
resources/js/Components/NumberDynamic.vue
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
<script setup>
|
||||
import { computed, ref, watch, onMounted } from 'vue'
|
||||
import numeral from 'numeral'
|
||||
|
||||
const props = defineProps({
|
||||
prefix: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
suffix: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
value: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 500
|
||||
}
|
||||
})
|
||||
|
||||
const newValue = ref(0)
|
||||
|
||||
const newValueFormatted = computed(
|
||||
() => newValue.value < 1000 ? newValue.value : numeral(newValue.value).format('0,0')
|
||||
)
|
||||
|
||||
const value = computed(() => props.value)
|
||||
|
||||
const grow = m => {
|
||||
const v = Math.ceil(newValue.value + m)
|
||||
|
||||
if (v > value.value) {
|
||||
newValue.value = value.value
|
||||
return false
|
||||
}
|
||||
|
||||
newValue.value = v
|
||||
|
||||
setTimeout(() => {
|
||||
grow(m)
|
||||
}, 25)
|
||||
}
|
||||
|
||||
const growInit = () => {
|
||||
newValue.value = 0
|
||||
grow(props.value / (props.duration / 25))
|
||||
}
|
||||
|
||||
watch(value, () => {
|
||||
growInit()
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
growInit()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>{{ prefix }}{{ newValueFormatted }}{{ suffix }}</div>
|
||||
</template>
|
||||
33
resources/js/Components/OverlayLayer.vue
Normal file
33
resources/js/Components/OverlayLayer.vue
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<script setup>
|
||||
import { StyleService } from '@/Stores/style.js';
|
||||
|
||||
defineProps({
|
||||
zIndex: {
|
||||
type: String,
|
||||
default: 'z-50'
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['overlay-click'])
|
||||
|
||||
const overlayClick = event => {
|
||||
emit('overlay-click', event)
|
||||
}
|
||||
|
||||
const styleStore = StyleService()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center flex-col justify-center overflow-hidden fixed inset-0" :class="zIndex">
|
||||
<transition enter-active-class="transition duration-150 ease-in" enter-from-class="opacity-0"
|
||||
enter-to-class="opacity-100" leave-active-class="transition duration-150 ease-in" leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0">
|
||||
<div class="absolute inset-0 bg-gradient-to-tr opacity-90 dark:from-gray-700 dark:via-gray-900 dark:to-gray-700"
|
||||
:class="styleStore.overlayStyle" @click="overlayClick" />
|
||||
</transition>
|
||||
<transition enter-active-class="transition duration-100 ease-out" enter-from-class="transform scale-95 opacity-0"
|
||||
enter-to-class="transform scale-100 opacity-100" leave-active-class="animate-fade-out">
|
||||
<slot />
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
56
resources/js/Components/PillTag.vue
Normal file
56
resources/js/Components/PillTag.vue
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { colorsBgLight, colorsOutline } from '@/colors.js'
|
||||
import BaseIcon from '@/Components/BaseIcon.vue'
|
||||
|
||||
const props = defineProps({
|
||||
text: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
small: Boolean,
|
||||
outline: Boolean,
|
||||
wrapped: Boolean
|
||||
})
|
||||
|
||||
const componentClass = computed(() => {
|
||||
const baseColor = props.outline ? colorsOutline[props.type] : colorsBgLight[props.type]
|
||||
|
||||
const base = [
|
||||
'border',
|
||||
props.small ? 'py-1 px-4 text-xs rounded-full' : 'py-2 px-6 rounded-full',
|
||||
baseColor
|
||||
]
|
||||
|
||||
if (!props.wrapped) {
|
||||
base.push(props.small ? 'mr-1.5' : 'mr-3', 'last:mr-0')
|
||||
}
|
||||
|
||||
return base
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="inline-flex items-center capitalize"
|
||||
:class="componentClass"
|
||||
>
|
||||
<BaseIcon
|
||||
v-if="icon"
|
||||
:path="icon"
|
||||
h="h-4"
|
||||
w="w-4"
|
||||
:class="small ? 'mr-1' : 'mr-2'"
|
||||
:size="small ? 14 : 16"
|
||||
/>
|
||||
<span>{{ text }}</span>
|
||||
</div>
|
||||
</template>
|
||||
53
resources/js/Components/PillTagTrend.vue
Normal file
53
resources/js/Components/PillTagTrend.vue
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { mdiChevronUp, mdiChevronDown, mdiAlertCircleOutline } from '@mdi/js'
|
||||
import PillTag from '@/Components/PillTag.vue'
|
||||
|
||||
const props = defineProps({
|
||||
trend: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
trendType: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
small: Boolean
|
||||
})
|
||||
|
||||
const trendStyle = computed(() => {
|
||||
if (props.trendType === 'up') {
|
||||
return {
|
||||
icon: mdiChevronUp,
|
||||
style: 'success'
|
||||
}
|
||||
}
|
||||
|
||||
if (props.trendType === 'down') {
|
||||
return {
|
||||
icon: mdiChevronDown,
|
||||
style: 'danger'
|
||||
}
|
||||
}
|
||||
|
||||
if (props.trendType === 'alert') {
|
||||
return {
|
||||
icon: mdiAlertCircleOutline,
|
||||
style: 'warning'
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
style: 'info'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PillTag
|
||||
:text="trend"
|
||||
:type="trendStyle.style"
|
||||
:icon="trendStyle.icon"
|
||||
:small="small"
|
||||
/>
|
||||
</template>
|
||||
17
resources/js/Components/ResponsiveNavLink.vue
Normal file
17
resources/js/Components/ResponsiveNavLink.vue
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { Link } from '@inertiajs/vue3';
|
||||
|
||||
const props = defineProps(['href', 'active']);
|
||||
|
||||
const classes = computed(() => props.active
|
||||
? 'block pl-3 pr-4 py-2 border-l-4 border-indigo-400 text-base font-medium text-indigo-700 bg-indigo-50 focus:outline-none focus:text-indigo-800 focus:bg-indigo-100 focus:border-indigo-700 transition duration-150 ease-in-out'
|
||||
: 'block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out'
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Link :href="href" :class="classes">
|
||||
<slot />
|
||||
</Link>
|
||||
</template>
|
||||
30
resources/js/Components/SectionBanner.vue
Normal file
30
resources/js/Components/SectionBanner.vue
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { gradientBgPurplePink, gradientBgPinkRed, gradientBgGreenBlue } from '@/colors';
|
||||
|
||||
const props = defineProps({
|
||||
bg: {
|
||||
type: String,
|
||||
required: true,
|
||||
validator: (value) => ['purplePink', 'pinkRed', 'greenBlue'].includes(value),
|
||||
},
|
||||
});
|
||||
|
||||
const colorClass = computed(() => {
|
||||
switch (props.bg) {
|
||||
case 'purplePink':
|
||||
return gradientBgPurplePink;
|
||||
case 'pinkRed':
|
||||
return gradientBgPinkRed;
|
||||
case 'greenBlue':
|
||||
return gradientBgGreenBlue;
|
||||
}
|
||||
|
||||
return '';
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div :class="colorClass" class="mt-6 mb-6 rounded-2xl py-12 px-6 text-center">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
19
resources/js/Components/SectionBannerStarOnGitea.vue
Normal file
19
resources/js/Components/SectionBannerStarOnGitea.vue
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<script setup>
|
||||
import { mdiGithub } from '@mdi/js';
|
||||
import BaseButton from '@/Components/BaseButton.vue';
|
||||
import SectionBanner from '@/Components/SectionBanner.vue';
|
||||
</script>
|
||||
<template>
|
||||
<SectionBanner bg="greenBlue">
|
||||
<h1 class="text-3xl text-white mb-6">Like the project? Please star on <b>Gitea</b>!</h1>
|
||||
<div>
|
||||
<BaseButton
|
||||
href="https://gitea.geologie.ac.at/geolba/tethys"
|
||||
:icon="mdiGithub"
|
||||
label="Gitea"
|
||||
target="_blank"
|
||||
rounded-full
|
||||
/>
|
||||
</div>
|
||||
</SectionBanner>
|
||||
</template>
|
||||
39
resources/js/Components/SectionFullScreen.vue
Normal file
39
resources/js/Components/SectionFullScreen.vue
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { StyleService } from '@/Stores/style'
|
||||
import { gradientBgPurplePink, gradientBgDark, gradientBgPinkRed, gradientBgGreenBlue } from '@/colors'
|
||||
|
||||
const props = defineProps({
|
||||
bg: {
|
||||
type: String,
|
||||
required: true,
|
||||
validator: value => ['purplePink', 'pinkRed', 'greenBlue'].includes(value)
|
||||
}
|
||||
})
|
||||
|
||||
const colorClass = computed(() => {
|
||||
if (StyleService().darkMode) {
|
||||
return gradientBgDark
|
||||
}
|
||||
|
||||
switch (props.bg) {
|
||||
case 'purplePink':
|
||||
return gradientBgPurplePink
|
||||
case 'pinkRed':
|
||||
return gradientBgPinkRed
|
||||
case 'greenBlue':
|
||||
return gradientBgGreenBlue
|
||||
}
|
||||
|
||||
return ''
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex min-h-screen items-center justify-center"
|
||||
:class="colorClass"
|
||||
>
|
||||
<slot card-class="w-11/12 md:w-7/12 lg:w-6/12 xl:w-4/12 shadow-2xl" />
|
||||
</div>
|
||||
</template>
|
||||
9
resources/js/Components/SectionMain.vue
Normal file
9
resources/js/Components/SectionMain.vue
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<script setup>
|
||||
import { containerMaxW } from '@/config.js'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="p-6" v-bind:class="containerMaxW">
|
||||
<slot />
|
||||
</section>
|
||||
</template>
|
||||
22
resources/js/Components/SectionTitle.vue
Normal file
22
resources/js/Components/SectionTitle.vue
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<script setup>
|
||||
defineProps({
|
||||
custom: Boolean,
|
||||
first: Boolean,
|
||||
last: Boolean
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section
|
||||
class="py-24 px-6 lg:px-0 lg:max-w-2xl lg:mx-auto text-center"
|
||||
:class="{ '-mb-6':first, '-mt-6':last, '-my-6':!first && !last }"
|
||||
>
|
||||
<slot v-if="custom" />
|
||||
<h1
|
||||
v-else
|
||||
class="text-2xl text-gray-500 dark:text-slate-400"
|
||||
>
|
||||
<slot />
|
||||
</h1>
|
||||
</section>
|
||||
</template>
|
||||
56
resources/js/Components/SectionTitleLineWithButton.vue
Normal file
56
resources/js/Components/SectionTitleLineWithButton.vue
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
<script setup>
|
||||
import { mdiCog } from '@mdi/js'
|
||||
import { useSlots, computed } from 'vue'
|
||||
import BaseIcon from '@/Components/BaseIcon.vue'
|
||||
import BaseButton from '@/Components/BaseButton.vue'
|
||||
import IconRounded from '@/Components/IconRounded.vue'
|
||||
|
||||
defineProps({
|
||||
icon: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
main: Boolean
|
||||
})
|
||||
|
||||
const hasSlot = computed(() => useSlots().default)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section
|
||||
:class="{'pt-6':!main}"
|
||||
class="mb-6 flex items-center justify-between"
|
||||
>
|
||||
<div class="flex items-center justify-start">
|
||||
<IconRounded
|
||||
v-if="icon && main"
|
||||
:icon="icon"
|
||||
type="light"
|
||||
class="mr-3"
|
||||
bg
|
||||
/>
|
||||
<BaseIcon
|
||||
v-else-if="icon"
|
||||
:path="icon"
|
||||
class="mr-2"
|
||||
size="20"
|
||||
/>
|
||||
<h1
|
||||
:class="main ? 'text-3xl' : 'text-2xl'"
|
||||
class="leading-tight"
|
||||
>
|
||||
{{ title }}
|
||||
</h1>
|
||||
</div>
|
||||
<slot v-if="hasSlot" />
|
||||
<BaseButton
|
||||
v-else
|
||||
:icon="mdiCog"
|
||||
small
|
||||
/>
|
||||
</section>
|
||||
</template>
|
||||
33
resources/js/Components/TableCheckboxCell.vue
Normal file
33
resources/js/Components/TableCheckboxCell.vue
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
defineProps({
|
||||
type: {
|
||||
type: String,
|
||||
default: 'td'
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['checked'])
|
||||
|
||||
const checked = ref(false)
|
||||
|
||||
watch(checked, newVal => {
|
||||
emit('checked', newVal)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component
|
||||
:is="type"
|
||||
class="lg:w-1"
|
||||
>
|
||||
<label class="checkbox">
|
||||
<input
|
||||
v-model="checked"
|
||||
type="checkbox"
|
||||
>
|
||||
<span class="check" />
|
||||
</label>
|
||||
</component>
|
||||
</template>
|
||||
140
resources/js/Components/TableSampleClients.vue
Normal file
140
resources/js/Components/TableSampleClients.vue
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
<script setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import { MainService } from '@/Stores/main';
|
||||
import { StyleService } from '@/Stores/style';
|
||||
import { mdiEye, mdiTrashCan } from '@mdi/js';
|
||||
import CardBoxModal from '@/Components/CardBoxModal.vue';
|
||||
import TableCheckboxCell from '@/Components/TableCheckboxCell.vue';
|
||||
import BaseLevel from '@/Components/BaseLevel.vue';
|
||||
import BaseButtons from '@/Components/BaseButtons.vue';
|
||||
import BaseButton from '@/Components/BaseButton.vue';
|
||||
import UserAvatar from '@/Components/UserAvatar.vue';
|
||||
|
||||
defineProps({
|
||||
checkable: Boolean,
|
||||
});
|
||||
|
||||
const styleService = StyleService();
|
||||
const mainService = MainService();
|
||||
const items = computed(() => mainService.clients);
|
||||
|
||||
const isModalActive = ref(false);
|
||||
const isModalDangerActive = ref(false);
|
||||
const perPage = ref(5);
|
||||
const currentPage = ref(0);
|
||||
const checkedRows = ref([]);
|
||||
|
||||
const itemsPaginated = computed(() =>
|
||||
items.value.slice(perPage.value * currentPage.value, perPage.value * (currentPage.value + 1))
|
||||
);
|
||||
|
||||
const numPages = computed(() => Math.ceil(items.value.length / perPage.value));
|
||||
|
||||
const currentPageHuman = computed(() => currentPage.value + 1);
|
||||
|
||||
const pagesList = computed(() => {
|
||||
const pagesList = [];
|
||||
|
||||
for (let i = 0; i < numPages.value; i++) {
|
||||
pagesList.push(i);
|
||||
}
|
||||
|
||||
return pagesList;
|
||||
});
|
||||
|
||||
const remove = (arr, cb) => {
|
||||
const newArr = [];
|
||||
|
||||
arr.forEach((item) => {
|
||||
if (!cb(item)) {
|
||||
newArr.push(item);
|
||||
}
|
||||
});
|
||||
|
||||
return newArr;
|
||||
};
|
||||
|
||||
const checked = (isChecked, client) => {
|
||||
if (isChecked) {
|
||||
checkedRows.value.push(client);
|
||||
} else {
|
||||
checkedRows.value = remove(checkedRows.value, (row) => row.id === client.id);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CardBoxModal v-model="isModalActive" title="Sample modal">
|
||||
<p>Lorem ipsum dolor sit amet <b>adipiscing elit</b></p>
|
||||
<p>This is sample modal</p>
|
||||
</CardBoxModal>
|
||||
|
||||
<CardBoxModal v-model="isModalDangerActive" large-title="Please confirm" button="danger" has-cancel>
|
||||
<p>Lorem ipsum dolor sit amet <b>adipiscing elit</b></p>
|
||||
<p>This is sample modal</p>
|
||||
</CardBoxModal>
|
||||
|
||||
<div v-if="checkedRows.length" class="p-3 bg-gray-100/50 dark:bg-slate-800">
|
||||
<span v-for="checkedRow in checkedRows" :key="checkedRow.id"
|
||||
class="inline-block px-2 py-1 rounded-sm mr-2 text-sm bg-gray-100 dark:bg-slate-700">
|
||||
{{ checkedRow.name }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-if="checkable" />
|
||||
<th />
|
||||
<th>Name</th>
|
||||
<th>Email</th>
|
||||
<th>City</th>
|
||||
<th>Progress</th>
|
||||
<th>Created</th>
|
||||
<th />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="client in itemsPaginated" :key="client.id">
|
||||
<TableCheckboxCell v-if="checkable" @checked="checked($event, client)" />
|
||||
<td class="border-b-0 lg:w-6 before:hidden">
|
||||
<UserAvatar :username="client.name" class="w-24 h-24 mx-auto lg:w-6 lg:h-6" />
|
||||
</td>
|
||||
<td data-label="Name">
|
||||
{{ client.name }}
|
||||
</td>
|
||||
<td data-label="Email">
|
||||
{{ client.email }}
|
||||
</td>
|
||||
<td data-label="City">
|
||||
{{ client.city }}
|
||||
</td>
|
||||
<td data-label="Progress" class="lg:w-32">
|
||||
<progress class="flex w-2/5 self-center lg:w-full" max="100" v-bind:value="client.progress">
|
||||
{{ client.progress }}
|
||||
</progress>
|
||||
</td>
|
||||
<td data-label="Created" class="lg:w-1 whitespace-nowrap">
|
||||
<small class="text-gray-500 dark:text-slate-400" :title="client.created">{{
|
||||
client.created
|
||||
}}</small>
|
||||
</td>
|
||||
<td class="before:hidden lg:w-1 whitespace-nowrap">
|
||||
<BaseButtons type="justify-start lg:justify-end" no-wrap>
|
||||
<BaseButton color="info" :icon="mdiEye" small @click="isModalActive = true" />
|
||||
<BaseButton color="danger" :icon="mdiTrashCan" small @click="isModalDangerActive = true" />
|
||||
</BaseButtons>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="p-3 lg:px-6 border-t border-gray-100 dark:border-slate-800">
|
||||
<BaseLevel>
|
||||
<BaseButtons>
|
||||
<BaseButton v-for="page in pagesList" :key="page" :active="page === currentPage" :label="page + 1" small
|
||||
:outline="styleService.darkMode" @click="currentPage = page" />
|
||||
</BaseButtons>
|
||||
<small>Page {{ currentPageHuman }} of {{ numPages }}</small>
|
||||
</BaseLevel>
|
||||
</div>
|
||||
</template>
|
||||
41
resources/js/Components/UserAvatar.vue
Normal file
41
resources/js/Components/UserAvatar.vue
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
username: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
avatar: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
api: {
|
||||
type: String,
|
||||
default: 'avataaars',
|
||||
},
|
||||
});
|
||||
|
||||
const avatar = computed(
|
||||
// () => props.avatar ?? `https://avatars.dicebear.com/api/${props.api}/${props.username?.replace(/[^a-z0-9]+/i, '-')}.svg`
|
||||
|
||||
() => props.avatar ?? `https://avatars.dicebear.com/api/initials/${props.username}.svg`
|
||||
|
||||
// () => {
|
||||
|
||||
// return props.avatar ?? `https://www.gravatar.com/avatar/${props.username}?s=50`;
|
||||
// }
|
||||
);
|
||||
|
||||
const username = computed(() => props.username);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<img
|
||||
:src="avatar"
|
||||
:alt="username"
|
||||
class="rounded-full block h-auto w-full max-w-full bg-gray-100 dark:bg-slate-800"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
15
resources/js/Components/UserAvatarCurrentUser.vue
Normal file
15
resources/js/Components/UserAvatarCurrentUser.vue
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
// import { usePage } from '@inertiajs/vue3'
|
||||
import { usePage } from '@inertiajs/vue3'
|
||||
import UserAvatar from '@/Components/UserAvatar.vue'
|
||||
|
||||
const userName = computed(() => usePage().props.auth?.user.name)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UserAvatar
|
||||
v-bind:username="'userName'"
|
||||
api="initials"
|
||||
/>
|
||||
</template>
|
||||
7
resources/js/Components/unused/ApplicationLogo.vue
Normal file
7
resources/js/Components/unused/ApplicationLogo.vue
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<template>
|
||||
<svg viewBox="0 0 316 316" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M305.8 81.125C305.77 80.995 305.69 80.885 305.65 80.755C305.56 80.525 305.49 80.285 305.37 80.075C305.29 79.935 305.17 79.815 305.07 79.685C304.94 79.515 304.83 79.325 304.68 79.175C304.55 79.045 304.39 78.955 304.25 78.845C304.09 78.715 303.95 78.575 303.77 78.475L251.32 48.275C249.97 47.495 248.31 47.495 246.96 48.275L194.51 78.475C194.33 78.575 194.19 78.725 194.03 78.845C193.89 78.955 193.73 79.045 193.6 79.175C193.45 79.325 193.34 79.515 193.21 79.685C193.11 79.815 192.99 79.935 192.91 80.075C192.79 80.285 192.71 80.525 192.63 80.755C192.58 80.875 192.51 80.995 192.48 81.125C192.38 81.495 192.33 81.875 192.33 82.265V139.625L148.62 164.795V52.575C148.62 52.185 148.57 51.805 148.47 51.435C148.44 51.305 148.36 51.195 148.32 51.065C148.23 50.835 148.16 50.595 148.04 50.385C147.96 50.245 147.84 50.125 147.74 49.995C147.61 49.825 147.5 49.635 147.35 49.485C147.22 49.355 147.06 49.265 146.92 49.155C146.76 49.025 146.62 48.885 146.44 48.785L93.99 18.585C92.64 17.805 90.98 17.805 89.63 18.585L37.18 48.785C37 48.885 36.86 49.035 36.7 49.155C36.56 49.265 36.4 49.355 36.27 49.485C36.12 49.635 36.01 49.825 35.88 49.995C35.78 50.125 35.66 50.245 35.58 50.385C35.46 50.595 35.38 50.835 35.3 51.065C35.25 51.185 35.18 51.305 35.15 51.435C35.05 51.805 35 52.185 35 52.575V232.235C35 233.795 35.84 235.245 37.19 236.025L142.1 296.425C142.33 296.555 142.58 296.635 142.82 296.725C142.93 296.765 143.04 296.835 143.16 296.865C143.53 296.965 143.9 297.015 144.28 297.015C144.66 297.015 145.03 296.965 145.4 296.865C145.5 296.835 145.59 296.775 145.69 296.745C145.95 296.655 146.21 296.565 146.45 296.435L251.36 236.035C252.72 235.255 253.55 233.815 253.55 232.245V174.885L303.81 145.945C305.17 145.165 306 143.725 306 142.155V82.265C305.95 81.875 305.89 81.495 305.8 81.125ZM144.2 227.205L100.57 202.515L146.39 176.135L196.66 147.195L240.33 172.335L208.29 190.625L144.2 227.205ZM244.75 114.995V164.795L226.39 154.225L201.03 139.625V89.825L219.39 100.395L244.75 114.995ZM249.12 57.105L292.81 82.265L249.12 107.425L205.43 82.265L249.12 57.105ZM114.49 184.425L96.13 194.995V85.305L121.49 70.705L139.85 60.135V169.815L114.49 184.425ZM91.76 27.425L135.45 52.585L91.76 77.745L48.07 52.585L91.76 27.425ZM43.67 60.135L62.03 70.705L87.39 85.305V202.545V202.555V202.565C87.39 202.735 87.44 202.895 87.46 203.055C87.49 203.265 87.49 203.485 87.55 203.695V203.705C87.6 203.875 87.69 204.035 87.76 204.195C87.84 204.375 87.89 204.575 87.99 204.745C87.99 204.745 87.99 204.755 88 204.755C88.09 204.905 88.22 205.035 88.33 205.175C88.45 205.335 88.55 205.495 88.69 205.635L88.7 205.645C88.82 205.765 88.98 205.855 89.12 205.965C89.28 206.085 89.42 206.225 89.59 206.325C89.6 206.325 89.6 206.325 89.61 206.335C89.62 206.335 89.62 206.345 89.63 206.345L139.87 234.775V285.065L43.67 229.705V60.135ZM244.75 229.705L148.58 285.075V234.775L219.8 194.115L244.75 179.875V229.705ZM297.2 139.625L253.49 164.795V114.995L278.85 100.395L297.21 89.825V139.625H297.2Z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
14
resources/js/Components/unused/Button.vue
Normal file
14
resources/js/Components/unused/Button.vue
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<script setup>
|
||||
defineProps({
|
||||
type: {
|
||||
type: String,
|
||||
default: 'submit',
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button :type="type" class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:shadow-outline-gray transition ease-in-out duration-150">
|
||||
<slot />
|
||||
</button>
|
||||
</template>
|
||||
30
resources/js/Components/unused/Checkbox.vue
Normal file
30
resources/js/Components/unused/Checkbox.vue
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
const emit = defineEmits(['update:checked']);
|
||||
|
||||
const props = defineProps({
|
||||
checked: {
|
||||
type: [Array, Boolean],
|
||||
default: false,
|
||||
},
|
||||
value: {
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
const proxyChecked = computed({
|
||||
get() {
|
||||
return props.checked;
|
||||
},
|
||||
|
||||
set(val) {
|
||||
emit("update:checked", val);
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<input type="checkbox" :value="value" v-model="proxyChecked"
|
||||
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
|
||||
</template>
|
||||
71
resources/js/Components/unused/Dropdown.vue
Normal file
71
resources/js/Components/unused/Dropdown.vue
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
<script setup>
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
align: {
|
||||
default: 'right'
|
||||
},
|
||||
width: {
|
||||
default: '48'
|
||||
},
|
||||
contentClasses: {
|
||||
default: () => ['py-1', 'bg-white']
|
||||
}
|
||||
});
|
||||
|
||||
const closeOnEscape = (e) => {
|
||||
if (open.value && e.key === 'Escape') {
|
||||
open.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => document.addEventListener('keydown', closeOnEscape));
|
||||
onUnmounted(() => document.removeEventListener('keydown', closeOnEscape));
|
||||
|
||||
const widthClass = computed(() => {
|
||||
return {
|
||||
'48': 'w-48',
|
||||
}[props.width.toString()];
|
||||
});
|
||||
|
||||
const alignmentClasses = computed(() => {
|
||||
if (props.align === 'left') {
|
||||
return 'origin-top-left left-0';
|
||||
} else if (props.align === 'right') {
|
||||
return 'origin-top-right right-0';
|
||||
} else {
|
||||
return 'origin-top';
|
||||
}
|
||||
});
|
||||
|
||||
const open = ref(false);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative">
|
||||
<div @click="open = ! open">
|
||||
<slot name="trigger" />
|
||||
</div>
|
||||
|
||||
<!-- Full Screen Dropdown Overlay -->
|
||||
<div v-show="open" class="fixed inset-0 z-40" @click="open = false"></div>
|
||||
|
||||
<transition
|
||||
enter-active-class="transition ease-out duration-200"
|
||||
enter-from-class="transform opacity-0 scale-95"
|
||||
enter-to-class="transform opacity-100 scale-100"
|
||||
leave-active-class="transition ease-in duration-75"
|
||||
leave-from-class="transform opacity-100 scale-100"
|
||||
leave-to-class="transform opacity-0 scale-95">
|
||||
<div v-show="open"
|
||||
class="absolute z-50 mt-2 rounded-md shadow-lg"
|
||||
:class="[widthClass, alignmentClasses]"
|
||||
style="display: none;"
|
||||
@click="open = false">
|
||||
<div class="rounded-md ring-1 ring-black ring-opacity-5" :class="contentClasses">
|
||||
<slot name="content" />
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
9
resources/js/Components/unused/DropdownLink.vue
Normal file
9
resources/js/Components/unused/DropdownLink.vue
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<script setup>
|
||||
import { Link } from '@inertiajs/vue3';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Link class="block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out">
|
||||
<slot />
|
||||
</Link>
|
||||
</template>
|
||||
19
resources/js/Components/unused/Input.vue
Normal file
19
resources/js/Components/unused/Input.vue
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
defineProps(['modelValue']);
|
||||
|
||||
defineEmits(['update:modelValue']);
|
||||
|
||||
const input = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
if (input.value.hasAttribute('autofocus')) {
|
||||
input.value.focus();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<input class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" ref="input">
|
||||
</template>
|
||||
11
resources/js/Components/unused/InputError.vue
Normal file
11
resources/js/Components/unused/InputError.vue
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<script setup>
|
||||
defineProps(['message']);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-show="message">
|
||||
<p class="text-sm text-red-600">
|
||||
{{ message }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
10
resources/js/Components/unused/Label.vue
Normal file
10
resources/js/Components/unused/Label.vue
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<script setup>
|
||||
defineProps(['value']);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<label class="block font-medium text-sm text-gray-700">
|
||||
<span v-if="value">{{ value }}</span>
|
||||
<span v-else><slot /></span>
|
||||
</label>
|
||||
</template>
|
||||
17
resources/js/Components/unused/NavLink.vue
Normal file
17
resources/js/Components/unused/NavLink.vue
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { Link } from '@inertiajs/vue3';
|
||||
|
||||
const props = defineProps(['href', 'active']);
|
||||
|
||||
const classes = computed(() => props.active
|
||||
? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 text-sm font-medium leading-5 text-gray-900 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out'
|
||||
: 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out'
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Link :href="href" :class="classes">
|
||||
<slot />
|
||||
</Link>
|
||||
</template>
|
||||
45
resources/js/Components/unused/UserCard.vue
Normal file
45
resources/js/Components/unused/UserCard.vue
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import { MainService } from '@/Stores/main'
|
||||
import { mdiCheckDecagram } from '@mdi/js'
|
||||
import BaseLevel from '@/Components/BaseLevel.vue'
|
||||
import UserAvatarCurrentUser from '@/Components/UserAvatarCurrentUser.vue'
|
||||
import CardBox from '@/Components/CardBox.vue'
|
||||
import FormCheckRadioGroup from '@/Components/FormCheckRadioGroup.vue'
|
||||
import PillTag from '@/Components/PillTag.vue'
|
||||
|
||||
const mainService = MainService()
|
||||
|
||||
const userName = computed(() => mainService.userName)
|
||||
|
||||
const userSwitchVal = ref([])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CardBox>
|
||||
<BaseLevel type="justify-around lg:justify-center">
|
||||
<UserAvatarCurrentUser class="lg:mx-12" />
|
||||
<div class="space-y-3 text-center md:text-left lg:mx-12">
|
||||
<div class="flex justify-center md:block">
|
||||
<FormCheckRadioGroup
|
||||
v-model="userSwitchVal"
|
||||
name="sample-switch"
|
||||
type="switch"
|
||||
:options="{ one: 'Notifications' }"
|
||||
/>
|
||||
</div>
|
||||
<h1 class="text-2xl">
|
||||
Howdy, <b>{{ userName }}</b>!
|
||||
</h1>
|
||||
<p>Last login <b>12 mins ago</b> from <b>127.0.0.1</b></p>
|
||||
<div class="flex justify-center md:block">
|
||||
<PillTag
|
||||
text="Verified"
|
||||
type="info"
|
||||
:icon="mdiCheckDecagram"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</BaseLevel>
|
||||
</CardBox>
|
||||
</template>
|
||||
18
resources/js/Components/unused/ValidationErrors.vue
Normal file
18
resources/js/Components/unused/ValidationErrors.vue
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { usePage } from '@inertiajs/vue3';
|
||||
|
||||
const errors = computed(() => usePage().props.errors);
|
||||
|
||||
const hasErrors = computed(() => Object.keys(errors.value).length > 0);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="hasErrors">
|
||||
<div class="font-medium text-red-600">Whoops! Something went wrong.</div>
|
||||
|
||||
<ul class="mt-3 list-disc list-inside text-sm text-red-600">
|
||||
<li v-for="(error, key) in errors" :key="key">{{ error }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
Loading…
Add table
editor.link_modal.header
Reference in a new issue