ranjan/new-omis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Ranjan
2024-04-03 10:16:39 +05:45
commit 3e3eac1db4
545 changed files with 841810 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

408
resources/js/Layouts/AppConfig.vue Normal file
View File

@ -0,0 +1,408 @@
<script setup>
import { ref, computed } from 'vue';
import { usePrimeVue } from 'primevue/config';
import { useLayout } from '@/Layouts/composables/layout';
defineProps({
simple: {
type: Boolean,
default: false
}
});
const $primevue = usePrimeVue();
const inputStyle = computed(() => $primevue.config.inputStyle || 'outlined');
const scales = ref([12, 13, 14, 15, 16]);
const visible = ref(false);
const inputStyles = ref([
{ label: 'Outlined', value: 'outlined' },
{ label: 'Filled', value: 'filled' }
]);
const menuModes = ref([
{ label: 'Static', value: 'static' },
{ label: 'Overlay', value: 'overlay' }
]);
const compactMaterial = ref(false);
const primaryFocusRing = ref(true);
const { setScale, layoutConfig } = useLayout();
const onConfigButtonClick = () => {
visible.value = !visible.value;
};
const onChangeTheme = (theme, mode) => {
$primevue.changeTheme(layoutConfig.theme.value, theme, 'theme-css', () => {
layoutConfig.theme.value = theme;
layoutConfig.darkTheme.value = mode;
});
};
const decrementScale = () => {
setScale(layoutConfig.scale.value - 1);
applyScale();
};
const incrementScale = () => {
setScale(layoutConfig.scale.value + 1);
applyScale();
};
const applyScale = () => {
document.documentElement.style.fontSize = layoutConfig.scale.value + 'px';
};
const onInputStyleChange = (value) => {
$primevue.config.inputStyle = value;
};
const onMenuModeChange = (value) => {
layoutConfig.menuMode.value = value;
};
const onRippleChange = (value) => {
layoutConfig.ripple.value = value;
};
const onDarkModeChange = (value) => {
const newThemeName = value ? layoutConfig.theme.value.replace('light', 'dark') : layoutConfig.theme.value.replace('dark', 'light');
layoutConfig.darkTheme.value = value;
onChangeTheme(newThemeName, value);
};
const changeTheme = (theme, color) => {
let newTheme, dark;
newTheme = theme + '-' + (layoutConfig.darkTheme.value ? 'dark' : 'light');
if (color) {
newTheme += '-' + color;
}
if (newTheme.startsWith('md-') && compactMaterial.value) {
newTheme = newTheme.replace('md-', 'mdc-');
}
dark = layoutConfig.darkTheme.value;
onChangeTheme(newTheme, dark);
};
const isThemeActive = (themeFamily, color) => {
let themeName;
let themePrefix = themeFamily === 'md' && compactMaterial.value ? 'mdc' : themeFamily;
themeName = themePrefix + (layoutConfig.darkTheme.value ? '-dark' : '-light');
if (color) {
themeName += '-' + color;
}
return layoutConfig.theme.value === themeName;
};
const onCompactMaterialChange = (value) => {
compactMaterial.value = value;
if (layoutConfig.theme.value.startsWith('md')) {
let tokens = layoutConfig.theme.value.split('-');
changeTheme(tokens[0].substring(0, 2), tokens[2]);
}
};
const onFocusRingColorChange = (value) => {
primaryFocusRing.value = value;
let root = document.documentElement;
if (value) {
if (layoutConfig.darkTheme.value) root.style.setProperty('--p-focus-ring-color', 'var(--primary-500)');
else root.style.setProperty('--p-focus-ring-color', 'var(--primary-500)');
} else {
if (layoutConfig.darkTheme.value) root.style.setProperty('--p-focus-ring-color', 'var(--surface-500)');
else root.style.setProperty('--p-focus-ring-color', 'var(--surface-900)');
}
};
</script>
<template>
<button class="layout-config-button p-link" type="button" @click="onConfigButtonClick()">
<i class="pi pi-cog"></i>
</button>
<Sidebar v-model:visible="visible" position="right" class="layout-config-sidebar w-26rem" pt:closeButton="ml-auto">
<div class="p-2">
<section class="pb-4 flex align-items-center justify-content-between border-bottom-1 surface-border">
<span class="text-xl font-semibold">Scale</span>
<div class="flex align-items-center gap-2 border-1 surface-border py-1 px-2" style="border-radius: 30px">
<Button icon="pi pi-minus" @click="decrementScale" text rounded :disabled="layoutConfig.scale.value === scales[0]" />
<i v-for="s in scales" :key="s" :class="['pi pi-circle-fill text-sm text-200', { 'text-lg text-primary': s === layoutConfig.scale.value }]" />
<Button icon="pi pi-plus" @click="incrementScale" text rounded :disabled="layoutConfig.scale.value === scales[scales.length - 1]" />
</div>
</section>
<section class="py-4 flex align-items-center justify-content-between border-bottom-1 surface-border">
<span :class="['text-xl font-semibold']">Dark Mode</span>
<InputSwitch :modelValue="layoutConfig.darkTheme.value" @update:modelValue="onDarkModeChange" />
</section>
<template v-if="!simple">
<section class="py-4 flex align-items-center justify-content-between border-bottom-1 surface-border">
<span class="text-xl font-semibold">Menu Type</span>
<SelectButton :modelValue="layoutConfig.menuMode.value" @update:modelValue="onMenuModeChange" :options="menuModes" optionLabel="label" optionValue="value" :allowEmpty="false" />
</section>
<section class="py-4 flex align-items-center justify-content-between border-bottom-1 surface-border">
<span class="text-xl font-semibold">Input Variant</span>
<SelectButton :modelValue="inputStyle" @update:modelValue="onInputStyleChange" :options="inputStyles" optionLabel="label" optionValue="value" :allowEmpty="false" />
</section>
</template>
<section class="py-4 flex align-items-center justify-content-between border-bottom-1 surface-border">
<span class="text-xl font-semibold">Ripple Effect</span>
<InputSwitch :modelValue="layoutConfig.ripple.value" @update:modelValue="onRippleChange" />
</section>
<section class="py-4 border-bottom-1 surface-border">
<div class="text-xl font-semibold mb-3">Themes</div>
<div class="flex align-items-center gap-2 mb-3">
<img src="https://primefaces.org/cdn/primevue/images/themes/aura.png" alt="Aura" style="width: 1.5rem" />
<span class="font-medium">Aura</span>
</div>
<div class="flex align-items-center justify-content-between gap-3 mb-3">
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('aura', 'green'), 'hover:border-500 surface-border': !isThemeActive('aura', 'green') }
]"
style="border-radius: 30px"
@click="changeTheme('aura', 'green')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #4dac9c 0%, rgba(77, 172, 156, 0.5) 100%)"></span>
</button>
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('aura', 'cyan'), 'hover:border-500 surface-border': !isThemeActive('aura', 'cyan') }
]"
style="border-radius: 30px"
@click="changeTheme('aura', 'cyan')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #06b6d4 0%, rgba(6, 182, 212, 0.5) 100%)"></span>
</button>
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('aura', 'blue'), 'hover:border-500 surface-border': !isThemeActive('aura', 'blue') }
]"
style="border-radius: 30px"
@click="changeTheme('aura', 'blue')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #4378e6 0%, rgba(67, 120, 230, 0.5) 100%)"></span>
</button>
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('aura', 'indigo'), 'hover:border-500 surface-border': !isThemeActive('aura', 'indigo') }
]"
style="border-radius: 30px"
@click="changeTheme('aura', 'indigo')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #585fe0 0%, rgba(88, 95, 224, 0.5) 100%)"></span>
</button>
</div>
<div class="flex align-items-center justify-content-between gap-3 mb-3">
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('aura', 'purple'), 'hover:border-500 surface-border': !isThemeActive('aura', 'purple') }
]"
style="border-radius: 30px"
@click="changeTheme('aura', 'purple')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #7758e4 0%, rgba(119, 88, 228, 0.5) 100%)"></span>
</button>
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('aura', 'amber'), 'hover:border-500 surface-border': !isThemeActive('aura', 'amber') }
]"
style="border-radius: 30px"
@click="changeTheme('aura', 'amber')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #f59e0b 0%, rgba(245, 158, 11, 0.5) 100%)"></span>
</button>
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('aura', 'teal'), 'hover:border-500 surface-border': !isThemeActive('aura', 'teal') }
]"
style="border-radius: 30px"
@click="changeTheme('aura', 'teal')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #14b8a6 0%, rgba(20, 184, 166, 0.5) 100%)"></span>
</button>
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('aura', 'pink'), 'hover:border-500 surface-border': !isThemeActive('aura', 'pink') }
]"
style="border-radius: 30px"
@click="changeTheme('aura', 'pink')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #ec4899 0%, rgba(236, 72, 153, 0.5) 100%)"></span>
</button>
</div>
<div class="flex align-items-center justify-content-between gap-3">
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('aura', 'noir'), 'hover:border-500 surface-border': !isThemeActive('aura', 'noir') }
]"
style="border-radius: 30px"
@click="changeTheme('aura', 'noir')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #0f172a 0%, rgba(0, 0, 0, 0.5) 100%)"></span>
</button>
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('aura', 'lime'), 'hover:border-500 surface-border': !isThemeActive('aura', 'lime') }
]"
style="border-radius: 30px"
@click="changeTheme('aura', 'lime')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #84cc16 0%, rgb(132, 204, 22, 0.5) 100%)"></span>
</button>
<span class="w-3"></span>
<span class="w-3"></span>
</div>
<section class="pt-4 flex align-items-center justify-content-between">
<span class="text-sm">Primary Focus Ring</span>
<InputSwitch :modelValue="primaryFocusRing" @update:modelValue="onFocusRingColorChange" />
</section>
</section>
<section class="py-4 border-bottom-1 surface-border">
<div class="flex align-items-center gap-2 mb-3">
<img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-teal.png" alt="Lara Light Teal" class="border-circle" style="width: 1.5rem" />
<span class="font-medium">Lara</span>
</div>
<div class="flex align-items-center justify-content-between gap-3 mb-3">
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('lara', 'green'), 'hover:border-500 surface-border': !isThemeActive('lara', 'green') }
]"
style="border-radius: 30px"
@click="changeTheme('lara', 'green')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #4dac9c 0%, rgba(77, 172, 156, 0.5) 100%)"></span>
</button>
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('lara', 'cyan'), 'hover:border-500 surface-border': !isThemeActive('lara', 'cyan') }
]"
style="border-radius: 30px"
@click="changeTheme('lara', 'cyan')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #06b6d4 0%, rgba(6, 182, 212, 0.5) 100%)"></span>
</button>
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('lara', 'blue'), 'hover:border-500 surface-border': !isThemeActive('lara', 'blue') }
]"
style="border-radius: 30px"
@click="changeTheme('lara', 'blue')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #4378e6 0%, rgba(67, 120, 230, 0.5) 100%)"></span>
</button>
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('lara', 'indigo'), 'hover:border-500 surface-border': !isThemeActive('lara', 'indigo') }
]"
style="border-radius: 30px"
@click="changeTheme('lara', 'indigo')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #585fe0 0%, rgba(88, 95, 224, 0.5) 100%)"></span>
</button>
</div>
<div class="flex align-items-center justify-content-between gap-3">
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('lara', 'purple'), 'hover:border-500 surface-border': !isThemeActive('lara', 'purple') }
]"
style="border-radius: 30px"
@click="changeTheme('lara', 'purple')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #7758e4 0%, rgba(119, 88, 228, 0.5) 100%)"></span>
</button>
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('lara', 'amber'), 'hover:border-500 surface-border': !isThemeActive('lara', 'amber') }
]"
style="border-radius: 30px"
@click="changeTheme('lara', 'amber')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #f59e0b 0%, rgba(245, 158, 11, 0.5) 100%)"></span>
</button>
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('lara', 'teal'), 'hover:border-500 surface-border': !isThemeActive('lara', 'teal') }
]"
style="border-radius: 30px"
@click="changeTheme('lara', 'teal')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #14b8a6 0%, rgba(20, 184, 166, 0.5) 100%)"></span>
</button>
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('lara', 'pink'), 'hover:border-500 surface-border': !isThemeActive('lara', 'pink') }
]"
style="border-radius: 30px"
@click="changeTheme('lara', 'pink')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #ec4899 0%, rgba(236, 72, 153, 0.5) 100%)"></span>
</button>
</div>
</section>
<section class="py-4 border-bottom-1 surface-border">
<div class="flex align-items-center gap-2 mb-3">
<img src="https://primefaces.org/cdn/primevue/images/themes/md-light-indigo.svg" alt="Material Design" class="border-circle" style="width: 1.5rem" />
<span class="font-medium">Material Design</span>
<div class="ml-auto flex align-items-center gap-2">
<label for="material-condensed" class="text-sm">Condensed</label>
<InputSwitch inputId="material-condensed" :modelValue="compactMaterial" @update:modelValue="onCompactMaterialChange" class="ml-auto" />
</div>
</div>
<div class="flex align-items-center justify-content-between gap-3">
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('md', 'indigo'), 'hover:border-500 surface-border': !isThemeActive('md', 'indigo') }
]"
style="border-radius: 30px"
@click="changeTheme('md', 'indigo')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #0565f2 0%, rgba(5, 101, 242, 0.5) 100%)"></span>
</button>
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('md', 'deeppurple'), 'hover:border-500 surface-border': !isThemeActive('md', 'deeppurple') }
]"
style="border-radius: 30px"
@click="changeTheme('md', 'deeppurple')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #702f92 0%, rgba(112, 47, 146, 0.5) 100%)"></span>
</button>
<div class="w-3"></div>
<div class="w-3"></div>
</div>
</section>
</div>
</Sidebar>
</template>
<style lang="scss" scoped></style>

20
resources/js/Layouts/AppFooter.vue Normal file
View File

@ -0,0 +1,20 @@
<script setup>
import { useLayout } from '@/Layouts/composables/layout';
import { computed } from 'vue';
const { layoutConfig } = useLayout();
const logoUrl = computed(() => {
return `/layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
});
</script>
<template>
<div class="layout-footer">
<img :src="logoUrl" alt="Logo" height="20" class="mr-2" />
by
<span class="font-medium ml-2">PrimeVue</span>
</div>
</template>
<style lang="scss" scoped></style>

78
resources/js/Layouts/AppLayout.vue Normal file
View File

@ -0,0 +1,78 @@
<script setup>
import { computed, watch, ref } from 'vue';
import AppTopbar from './AppTopbar.vue';
import AppFooter from './AppFooter.vue';
import AppSidebar from './AppSidebar.vue';
import AppConfig from './AppConfig.vue';
import { useLayout } from '@/Layouts/composables/layout';
import Toast from 'primevue/toast';
const { layoutConfig, layoutState, isSidebarActive } = useLayout();
const outsideClickListener = ref(null);
watch(isSidebarActive, (newVal) => {
if (newVal) {
bindOutsideClickListener();
} else {
unbindOutsideClickListener();
}
});
const containerClass = computed(() => {
return {
'layout-theme-light': layoutConfig.darkTheme.value === 'light',
'layout-theme-dark': layoutConfig.darkTheme.value === 'dark',
'layout-overlay': layoutConfig.menuMode.value === 'overlay',
'layout-static': layoutConfig.menuMode.value === 'static',
'layout-static-inactive': layoutState.staticMenuDesktopInactive.value && layoutConfig.menuMode.value === 'static',
'layout-overlay-active': layoutState.overlayMenuActive.value,
'layout-mobile-active': layoutState.staticMenuMobileActive.value,
'p-ripple-disabled': layoutConfig.ripple.value === false
};
});
const bindOutsideClickListener = () => {
if (!outsideClickListener.value) {
outsideClickListener.value = (event) => {
if (isOutsideClicked(event)) {
layoutState.overlayMenuActive.value = false;
layoutState.staticMenuMobileActive.value = false;
layoutState.menuHoverActive.value = false;
}
};
document.addEventListener('click', outsideClickListener.value);
}
};
const unbindOutsideClickListener = () => {
if (outsideClickListener.value) {
document.removeEventListener('click', outsideClickListener);
outsideClickListener.value = null;
}
};
const isOutsideClicked = (event) => {
const sidebarEl = document.querySelector('.layout-sidebar');
const topbarEl = document.querySelector('.layout-menu-button');
return !(sidebarEl.isSameNode(event.target) || sidebarEl.contains(event.target) || topbarEl.isSameNode(event.target) || topbarEl.contains(event.target));
};
</script>
<template>
<div class="layout-wrapper" :class="containerClass">
<app-topbar></app-topbar>
<div class="layout-sidebar">
<app-sidebar></app-sidebar>
</div>
<div class="layout-main-container">
<div class="layout-main">
<main><slot/></main>
</div>
<app-footer></app-footer>
</div>
<!-- <app-config></app-config> -->
<div class="layout-mask"></div>
</div>
<Toast />
</template>
<style lang="scss" scoped></style>

25
resources/js/Layouts/AppMenu.vue Normal file
View File

@ -0,0 +1,25 @@
<script setup>
import { ref } from 'vue';
import AppMenuItem from './AppMenuItem.vue';
const model = ref([
{
items: [
{ label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/' },
{ label: 'User', icon: 'pi pi-fw pi-user', to: '/user' }]
},
]);
</script>
<template>
<ul class="layout-menu">
<template v-for="(item, i) in model" :key="item">
<app-menu-item v-if="!item.separator" :item="item" :index="i"></app-menu-item>
<li v-if="item.separator" class="menu-separator"></li>
</template>
</ul>
</template>
<style lang="scss" scoped></style>

117
resources/js/Layouts/AppMenuItem.vue Normal file
View File

@ -0,0 +1,117 @@
<script setup>
import { ref, onBeforeMount, watch } from 'vue';
import { useRoute } from 'vue-router';
import { useLayout } from '@/Layouts/composables/layout';
import { Head, Link, useForm } from '@inertiajs/vue3';
// const route = useRoute();
const { layoutConfig, layoutState, setActiveMenuItem, onMenuToggle } = useLayout();
const props = defineProps({
item: {
type: Object,
default: () => ({})
},
index: {
type: Number,
default: 0
},
root: {
type: Boolean,
default: true
},
parentItemKey: {
type: String,
default: null
}
});
const isActiveMenu = ref(false);
const itemKey = ref(null);
onBeforeMount(() => {
itemKey.value = props.parentItemKey ? props.parentItemKey + '-' + props.index : String(props.index);
const activeItem = layoutState.activeMenuItem;
isActiveMenu.value = activeItem === itemKey.value || activeItem ? activeItem.startsWith(itemKey.value + '-') : false;
});
watch(
() => layoutConfig.activeMenuItem.value,
(newVal) => {
isActiveMenu.value = newVal === itemKey.value || newVal.startsWith(itemKey.value + '-');
}
);
const itemClick = (event, item) => {
if (item.disabled) {
event.preventDefault();
return;
}
const { overlayMenuActive, staticMenuMobileActive } = layoutState;
if ((item.to || item.url) && (staticMenuMobileActive.value || overlayMenuActive.value)) {
onMenuToggle();
}
if (item.command) {
item.command({ originalEvent: event, item: item });
}
const foundItemKey = item.items ? (isActiveMenu.value ? props.parentItemKey : itemKey) : itemKey.value;
setActiveMenuItem(foundItemKey);
};
const checkActiveRoute = (item) => {
console.log(route);
return route.path === item.to;
};
</script>
<template>
<li :class="{ 'layout-root-menuitem': root, 'active-menuitem': isActiveMenu }">
<div v-if="root && item.visible !== false" class="layout-menuitem-root-text">{{ item.label }}</div>
<a v-if="(!item.to || item.items) && item.visible !== false" :href="item.url" @click="itemClick($event, item, index)" :class="item.class" :target="item.target" tabindex="0">
<i :class="item.icon" class="layout-menuitem-icon"></i>
<span class="layout-menuitem-text">{{ item.label }}</span>
<i class="pi pi-fw pi-angle-down layout-submenu-toggler" v-if="item.items"></i>
</a>
<Link v-if="item.to && !item.items && item.visible !== false" @click="itemClick($event, item, index)" :class="[item.class, { 'active-route': checkActiveRoute(item) }]" tabindex="0" :to="item.to">
<i :class="item.icon" class="layout-menuitem-icon"></i>
<span class="layout-menuitem-text">{{ item.label }}</span>
<i class="pi pi-fw pi-angle-down layout-submenu-toggler" v-if="item.items"></i>
</Link>
<Transition v-if="item.items && item.visible !== false" name="layout-submenu">
<ul v-show="root ? true : isActiveMenu" class="layout-submenu">
<app-menu-item v-for="(child, i) in item.items" :key="child" :index="i" :item="child" :parentItemKey="itemKey" :root="false"></app-menu-item>
</ul>
</Transition>
</li>
<!-- <ul class="layout-menu">
<li class="layout-root-menuitem">
<div class="layout-menuitem-root-text"></div>
<ul class="layout-submenu">
<li class="">
<Link :href="route('dashboard')" class="" tabindex="0">
<i class="pi pi-fw pi-home layout-menuitem-icon"></i>
<span class="layout-menuitem-text">Dashboard</span>
</Link>
</li>
<li class="">
<Link :href="route('user.index')" class="" tabindex="0">
<i class="pi pi-fw pi-user layout-menuitem-icon"></i>
<span class="layout-menuitem-text">User</span></Link>
</li>
</ul>
</li>
</ul> -->
</template>
<style lang="scss" scoped></style>

9
resources/js/Layouts/AppSidebar.vue Normal file
View File

@ -0,0 +1,9 @@
<script setup>
import AppMenu from './AppMenu.vue';
</script>
<template>
<app-menu></app-menu>
</template>
<style lang="scss" scoped></style>

97
resources/js/Layouts/AppTopbar.vue Normal file
View File

@ -0,0 +1,97 @@
<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
import { useLayout } from '@/Layouts/composables/layout';
import { useRouter } from 'vue-router';
const { layoutConfig, onMenuToggle } = useLayout();
const outsideClickListener = ref(null);
const topbarMenuActive = ref(false);
const router = useRouter();
onMounted(() => {
bindOutsideClickListener();
});
onBeforeUnmount(() => {
unbindOutsideClickListener();
});
const logoUrl = computed(() => {
return `/layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
});
const onTopBarMenuButton = () => {
topbarMenuActive.value = !topbarMenuActive.value;
};
const onSettingsClick = () => {
topbarMenuActive.value = false;
router.push('/documentation');
};
const topbarMenuClasses = computed(() => {
return {
'layout-topbar-menu-mobile-active': topbarMenuActive.value
};
});
const bindOutsideClickListener = () => {
if (!outsideClickListener.value) {
outsideClickListener.value = (event) => {
if (isOutsideClicked(event)) {
topbarMenuActive.value = false;
}
};
document.addEventListener('click', outsideClickListener.value);
}
};
const unbindOutsideClickListener = () => {
if (outsideClickListener.value) {
document.removeEventListener('click', outsideClickListener);
outsideClickListener.value = null;
}
};
const isOutsideClicked = (event) => {
if (!topbarMenuActive.value) return;
const sidebarEl = document.querySelector('.layout-topbar-menu');
const topbarEl = document.querySelector('.layout-topbar-menu-button');
return !(sidebarEl.isSameNode(event.target) || sidebarEl.contains(event.target) || topbarEl.isSameNode(event.target) || topbarEl.contains(event.target));
};
</script>
<template>
<div class="layout-topbar">
<router-link to="/" class="layout-topbar-logo">
<img :src="logoUrl" alt="logo" />
<span>SAKAI</span>
</router-link>
<button class="p-link layout-menu-button layout-topbar-button" @click="onMenuToggle()">
<i class="pi pi-bars"></i>
</button>
<button class="p-link layout-topbar-menu-button layout-topbar-button" @click="onTopBarMenuButton()">
<i class="pi pi-ellipsis-v"></i>
</button>
<div class="layout-topbar-menu" :class="topbarMenuClasses">
<button @click="onTopBarMenuButton()" class="p-link layout-topbar-button">
<i class="pi pi-calendar"></i>
<span>Calendar</span>
</button>
<button @click="onTopBarMenuButton()" class="p-link layout-topbar-button">
<i class="pi pi-user"></i>
<span>Profile</span>
</button>
<button @click="onSettingsClick()" class="p-link layout-topbar-button">
<i class="pi pi-cog"></i>
<span>Settings</span>
</button>
</div>
</div>
</template>
<style lang="scss" scoped></style>

78
resources/js/Layouts/AuthenticatedLayout.vue Normal file
View File

@ -0,0 +1,78 @@
<script setup>
import { computed, watch, ref } from 'vue';
import AppTopbar from './AppTopbar.vue';
import AppFooter from './AppFooter.vue';
import AppSidebar from './AppSidebar.vue';
import AppConfig from './AppConfig.vue';
import { useLayout } from '@/Layouts/composables/layout';
import Toast from 'primevue/toast';
const { layoutConfig, layoutState, isSidebarActive } = useLayout();
const outsideClickListener = ref(null);
watch(isSidebarActive, (newVal) => {
if (newVal) {
bindOutsideClickListener();
} else {
unbindOutsideClickListener();
}
});
const containerClass = computed(() => {
return {
'layout-theme-light': layoutConfig.darkTheme.value === 'light',
'layout-theme-dark': layoutConfig.darkTheme.value === 'dark',
'layout-overlay': layoutConfig.menuMode.value === 'overlay',
'layout-static': layoutConfig.menuMode.value === 'static',
'layout-static-inactive': layoutState.staticMenuDesktopInactive.value && layoutConfig.menuMode.value === 'static',
'layout-overlay-active': layoutState.overlayMenuActive.value,
'layout-mobile-active': layoutState.staticMenuMobileActive.value,
'p-ripple-disabled': layoutConfig.ripple.value === false
};
});
const bindOutsideClickListener = () => {
if (!outsideClickListener.value) {
outsideClickListener.value = (event) => {
if (isOutsideClicked(event)) {
layoutState.overlayMenuActive.value = false;
layoutState.staticMenuMobileActive.value = false;
layoutState.menuHoverActive.value = false;
}
};
document.addEventListener('click', outsideClickListener.value);
}
};
const unbindOutsideClickListener = () => {
if (outsideClickListener.value) {
document.removeEventListener('click', outsideClickListener);
outsideClickListener.value = null;
}
};
const isOutsideClicked = (event) => {
const sidebarEl = document.querySelector('.layout-sidebar');
const topbarEl = document.querySelector('.layout-menu-button');
return !(sidebarEl.isSameNode(event.target) || sidebarEl.contains(event.target) || topbarEl.isSameNode(event.target) || topbarEl.contains(event.target));
};
</script>
<template>
<div class="layout-wrapper" :class="containerClass">
<app-topbar></app-topbar>
<div class="layout-sidebar">
<app-sidebar></app-sidebar>
</div>
<div class="layout-main-container">
<div class="layout-main">
<main><slot/></main>
</div>
<app-footer></app-footer>
</div>
<!-- <app-config></app-config> -->
<div class="layout-mask"></div>
</div>
<Toast />
</template>
<style lang="scss" scoped></style>

20
resources/js/Layouts/GuestLayout.vue Normal file
View File

@ -0,0 +1,20 @@
<script setup>
import ApplicationLogo from '@/Components/ApplicationLogo.vue';
import { Link } from '@inertiajs/vue3';
</script>
<template>
<div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
<div>
<Link href="/">
<ApplicationLogo class="w-20 h-20 fill-current text-gray-500" />
</Link>
</div>
<div
class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg"
>
<slot />
</div>
</div>
</template>

48
resources/js/Layouts/composables/layout.js Normal file
View File

@ -0,0 +1,48 @@
import { toRefs, reactive, computed } from 'vue';
const layoutConfig = reactive({
ripple: true,
darkTheme: false,
inputStyle: 'outlined',
menuMode: 'static',
theme: 'aura-light-green',
scale: 14,
activeMenuItem: null
});
const layoutState = reactive({
staticMenuDesktopInactive: false,
overlayMenuActive: false,
profileSidebarVisible: false,
configSidebarVisible: false,
staticMenuMobileActive: false,
menuHoverActive: false
});
export function useLayout() {
const setScale = (scale) => {
layoutConfig.scale = scale;
};
const setActiveMenuItem = (item) => {
layoutConfig.activeMenuItem = item.value || item;
};
const onMenuToggle = () => {
if (layoutConfig.menuMode === 'overlay') {
layoutState.overlayMenuActive = !layoutState.overlayMenuActive;
}
if (window.innerWidth > 991) {
layoutState.staticMenuDesktopInactive = !layoutState.staticMenuDesktopInactive;
} else {
layoutState.staticMenuMobileActive = !layoutState.staticMenuMobileActive;
}
};
const isSidebarActive = computed(() => layoutState.overlayMenuActive || layoutState.staticMenuMobileActive);
const isDarkTheme = computed(() => layoutConfig.darkTheme);
return { layoutConfig: toRefs(layoutConfig), layoutState: toRefs(layoutState), setScale, onMenuToggle, isSidebarActive, isDarkTheme, setActiveMenuItem };
}