switch to a fresh vue/vite project and appy just the basic sakai theme
This commit is contained in:
@@ -1,78 +1,115 @@
|
||||
<script setup>
|
||||
import RadioButton from 'primevue/radiobutton';
|
||||
import Button from 'primevue/button';
|
||||
import InputSwitch from 'primevue/inputswitch';
|
||||
import Sidebar from 'primevue/sidebar';
|
||||
import RadioButton from 'primevue/radiobutton';
|
||||
import Button from 'primevue/button';
|
||||
import InputSwitch from 'primevue/inputswitch';
|
||||
import Sidebar from 'primevue/sidebar';
|
||||
|
||||
import { ref } from 'vue';
|
||||
import { useLayout } from '@/layout/composables/layout';
|
||||
import { ref } from 'vue';
|
||||
import { useLayout } from '@/layout/composables/layout';
|
||||
|
||||
defineProps({
|
||||
simple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
const scales = ref([12, 13, 14, 15, 16]);
|
||||
const visible = ref(false);
|
||||
|
||||
const { changeThemeSettings, setScale, layoutConfig } = useLayout();
|
||||
|
||||
const onConfigButtonClick = () => {
|
||||
visible.value = !visible.value;
|
||||
};
|
||||
const onChangeTheme = (theme, mode) => {
|
||||
const elementId = 'theme-css';
|
||||
const linkElement = document.getElementById(elementId);
|
||||
const cloneLinkElement = linkElement.cloneNode(true);
|
||||
const newThemeUrl = linkElement.getAttribute('href').replace(layoutConfig.theme.value, theme);
|
||||
cloneLinkElement.setAttribute('id', elementId + '-clone');
|
||||
cloneLinkElement.setAttribute('href', newThemeUrl);
|
||||
cloneLinkElement.addEventListener('load', () => {
|
||||
linkElement.remove();
|
||||
cloneLinkElement.setAttribute('id', elementId);
|
||||
changeThemeSettings(theme, mode === 'dark');
|
||||
defineProps({
|
||||
simple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
|
||||
};
|
||||
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 scales = ref([12, 13, 14, 15, 16]);
|
||||
const visible = ref(false);
|
||||
|
||||
const { changeThemeSettings, setScale, layoutConfig } = useLayout();
|
||||
|
||||
const onConfigButtonClick = () => {
|
||||
visible.value = !visible.value;
|
||||
};
|
||||
const onChangeTheme = (theme, mode) => {
|
||||
const elementId = 'theme-css';
|
||||
const linkElement = document.getElementById(elementId);
|
||||
const cloneLinkElement = linkElement.cloneNode(true);
|
||||
const newThemeUrl = linkElement.getAttribute('href').replace(layoutConfig.theme.value, theme);
|
||||
cloneLinkElement.setAttribute('id', elementId + '-clone');
|
||||
cloneLinkElement.setAttribute('href', newThemeUrl);
|
||||
cloneLinkElement.addEventListener('load', () => {
|
||||
linkElement.remove();
|
||||
cloneLinkElement.setAttribute('id', elementId);
|
||||
changeThemeSettings(theme, mode === 'dark');
|
||||
});
|
||||
linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
|
||||
};
|
||||
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';
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button class="layout-config-button p-link" type="button" @click="onConfigButtonClick()">
|
||||
<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" :transitionOptions="'.3s cubic-bezier(0, 0, 0.2, 1)'" class="layout-config-sidebar w-20rem">
|
||||
<Sidebar
|
||||
v-model:visible="visible"
|
||||
position="right"
|
||||
:transitionOptions="'.3s cubic-bezier(0, 0, 0.2, 1)'"
|
||||
class="layout-config-sidebar w-20rem"
|
||||
>
|
||||
<h5>Scale</h5>
|
||||
<div class="flex align-items-center">
|
||||
<Button icon="pi pi-minus" type="button" @click="decrementScale()" class="p-button-text p-button-rounded w-2rem h-2rem mr-2" :disabled="layoutConfig.scale.value === scales[0]"></Button>
|
||||
<Button
|
||||
icon="pi pi-minus"
|
||||
type="button"
|
||||
@click="decrementScale()"
|
||||
class="p-button-text p-button-rounded w-2rem h-2rem mr-2"
|
||||
:disabled="layoutConfig.scale.value === scales[0]"
|
||||
></Button>
|
||||
<div class="flex gap-2 align-items-center">
|
||||
<i class="pi pi-circle-fill text-300" v-for="s in scales" :key="s" :class="{ 'text-primary-500': s === layoutConfig.scale.value }"></i>
|
||||
<i
|
||||
class="pi pi-circle-fill text-300"
|
||||
v-for="s in scales"
|
||||
:key="s"
|
||||
:class="{ 'text-primary-500': s === layoutConfig.scale.value }"
|
||||
></i>
|
||||
</div>
|
||||
<Button icon="pi pi-plus" type="button" pButton @click="incrementScale()" class="p-button-text p-button-rounded w-2rem h-2rem ml-2" :disabled="layoutConfig.scale.value === scales[scales.length - 1]"></Button>
|
||||
<Button
|
||||
icon="pi pi-plus"
|
||||
type="button"
|
||||
pButton
|
||||
@click="incrementScale()"
|
||||
class="p-button-text p-button-rounded w-2rem h-2rem ml-2"
|
||||
:disabled="layoutConfig.scale.value === scales[scales.length - 1]"
|
||||
></Button>
|
||||
</div>
|
||||
|
||||
<template v-if="!simple">
|
||||
<h5>Menu Type</h5>
|
||||
<div class="flex">
|
||||
<div class="field-radiobutton flex-1">
|
||||
<RadioButton name="menuMode" value="static" v-model="layoutConfig.menuMode.value" inputId="mode1"></RadioButton>
|
||||
<RadioButton
|
||||
name="menuMode"
|
||||
value="static"
|
||||
v-model="layoutConfig.menuMode.value"
|
||||
inputId="mode1"
|
||||
></RadioButton>
|
||||
<label for="mode1">Static</label>
|
||||
</div>
|
||||
|
||||
<div class="field-radiobutton flex-1">
|
||||
<RadioButton name="menuMode" value="overlay" v-model="layoutConfig.menuMode.value" inputId="mode2"></RadioButton>
|
||||
<RadioButton
|
||||
name="menuMode"
|
||||
value="overlay"
|
||||
v-model="layoutConfig.menuMode.value"
|
||||
inputId="mode2"
|
||||
></RadioButton>
|
||||
<label for="mode2">Overlay</label>
|
||||
</div>
|
||||
</div>
|
||||
@@ -82,11 +119,21 @@ const applyScale = () => {
|
||||
<h5>Input Style</h5>
|
||||
<div class="flex">
|
||||
<div class="field-radiobutton flex-1">
|
||||
<RadioButton name="inputStyle" value="outlined" v-model="layoutConfig.inputStyle.value" inputId="outlined_input"></RadioButton>
|
||||
<RadioButton
|
||||
name="inputStyle"
|
||||
value="outlined"
|
||||
v-model="layoutConfig.inputStyle.value"
|
||||
inputId="outlined_input"
|
||||
></RadioButton>
|
||||
<label for="outlined_input">Outlined</label>
|
||||
</div>
|
||||
<div class="field-radiobutton flex-1">
|
||||
<RadioButton name="inputStyle" value="filled" v-model="layoutConfig.inputStyle.value" inputId="filled_input"></RadioButton>
|
||||
<RadioButton
|
||||
name="inputStyle"
|
||||
value="filled"
|
||||
v-model="layoutConfig.inputStyle.value"
|
||||
inputId="filled_input"
|
||||
></RadioButton>
|
||||
<label for="filled_input">Filled</label>
|
||||
</div>
|
||||
</div>
|
||||
@@ -95,200 +142,150 @@ const applyScale = () => {
|
||||
<InputSwitch v-model="layoutConfig.ripple.value"></InputSwitch>
|
||||
</template>
|
||||
|
||||
<h5>Bootstrap</h5>
|
||||
<div class="grid">
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('bootstrap4-light-blue', 'light')">
|
||||
<img src="/layout/images/themes/bootstrap4-light-blue.svg" class="w-2rem h-2rem" alt="Bootstrap Light Blue" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('bootstrap4-light-purple', 'light')">
|
||||
<img src="/layout/images/themes/bootstrap4-light-purple.svg" class="w-2rem h-2rem" alt="Bootstrap Light Purple" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('bootstrap4-dark-blue', 'dark')">
|
||||
<img src="/layout/images/themes/bootstrap4-dark-blue.svg" class="w-2rem h-2rem" alt="Bootstrap Dark Blue" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('bootstrap4-dark-purple', 'dark')">
|
||||
<img src="/layout/images/themes/bootstrap4-dark-purple.svg" class="w-2rem h-2rem" alt="Bootstrap Dark Purple" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Material Design</h5>
|
||||
<div class="grid">
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('md-light-indigo', 'light')">
|
||||
<img src="/layout/images/themes/md-light-indigo.svg" class="w-2rem h-2rem" alt="Material Light Indigo" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('md-light-deeppurple', 'light')">
|
||||
<img src="/layout/images/themes/md-light-deeppurple.svg" class="w-2rem h-2rem" alt="Material Light DeepPurple" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('md-dark-indigo', 'dark')">
|
||||
<img src="/layout/images/themes/md-dark-indigo.svg" class="w-2rem h-2rem" alt="Material Dark Indigo" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('md-dark-deeppurple', 'dark')">
|
||||
<img src="/layout/images/themes/md-dark-deeppurple.svg" class="w-2rem h-2rem" alt="Material Dark DeepPurple" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Material Design Compact</h5>
|
||||
<div class="grid">
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('mdc-light-indigo', 'light')">
|
||||
<img src="/layout/images/themes/md-light-indigo.svg" class="w-2rem h-2rem" alt="Material Light Indigo" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('mdc-light-deeppurple', 'light')">
|
||||
<img src="/layout/images/themes/md-light-deeppurple.svg" class="w-2rem h-2rem" alt="Material Light Deep Purple" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('mdc-dark-indigo', 'dark')">
|
||||
<img src="/layout/images/themes/md-dark-indigo.svg" class="w-2rem h-2rem" alt="Material Dark Indigo" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('mdc-dark-deeppurple', 'dark')">
|
||||
<img src="/layout/images/themes/md-dark-deeppurple.svg" class="w-2rem h-2rem" alt="Material Dark Deep Purple" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Tailwind</h5>
|
||||
<div class="grid">
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('tailwind-light', 'light')">
|
||||
<img src="/layout/images/themes/tailwind-light.png" class="w-2rem h-2rem" alt="Tailwind Light" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Fluent UI</h5>
|
||||
<div class="grid">
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('fluent-light', 'light')">
|
||||
<img src="/layout/images/themes/fluent-light.png" class="w-2rem h-2rem" alt="Fluent Light" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>PrimeOne Design - 2022</h5>
|
||||
<div class="grid">
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-light-indigo', 'light')">
|
||||
<img src="/layout/images/themes/lara-light-indigo.png" class="w-2rem h-2rem" alt="Lara Light Indigo" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-light-blue', 'light')">
|
||||
<img src="/layout/images/themes/lara-light-blue.png" class="w-2rem h-2rem" alt="Lara Light Blue" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-light-purple', 'light')">
|
||||
<img src="/layout/images/themes/lara-light-purple.png" class="w-2rem h-2rem" alt="Lara Light Purple" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-light-teal', 'light')">
|
||||
<img src="/layout/images/themes/lara-light-teal.png" class="w-2rem h-2rem" alt="Lara Light Teal" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-dark-indigo', 'dark')">
|
||||
<img src="/layout/images/themes/lara-dark-indigo.png" class="w-2rem h-2rem" alt="Lara Dark Indigo" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-dark-blue', 'dark')">
|
||||
<img src="/layout/images/themes/lara-dark-blue.png" class="w-2rem h-2rem" alt="Lara Dark Blue" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-dark-purple', 'dark')">
|
||||
<img src="/layout/images/themes/lara-dark-purple.png" class="w-2rem h-2rem" alt="Lara Dark Purple" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-dark-teal', 'dark')">
|
||||
<img src="/layout/images/themes/lara-dark-teal.png" class="w-2rem h-2rem" alt="Lara Dark Teal" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>PrimeOne Design - 2021</h5>
|
||||
<div class="grid">
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('saga-blue', 'light')">
|
||||
<img src="/layout/images/themes/saga-blue.png" class="w-2rem h-2rem" alt="Saga Blue" />
|
||||
<button
|
||||
class="p-link w-2rem h-2rem"
|
||||
@click="onChangeTheme('saga-blue', 'light')"
|
||||
>
|
||||
<img
|
||||
src="/layout/images/themes/saga-blue.png"
|
||||
class="w-2rem h-2rem"
|
||||
alt="Saga Blue"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('saga-green', 'light')">
|
||||
<img src="/layout/images/themes/saga-green.png" class="w-2rem h-2rem" alt="Saga Green" />
|
||||
<button
|
||||
class="p-link w-2rem h-2rem"
|
||||
@click="onChangeTheme('saga-green', 'light')"
|
||||
>
|
||||
<img
|
||||
src="/layout/images/themes/saga-green.png"
|
||||
class="w-2rem h-2rem"
|
||||
alt="Saga Green"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('saga-orange', 'light')">
|
||||
<img src="/layout/images/themes/saga-orange.png" class="w-2rem h-2rem" alt="Saga Orange" />
|
||||
<button
|
||||
class="p-link w-2rem h-2rem"
|
||||
@click="onChangeTheme('saga-orange', 'light')"
|
||||
>
|
||||
<img
|
||||
src="/layout/images/themes/saga-orange.png"
|
||||
class="w-2rem h-2rem"
|
||||
alt="Saga Orange"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('saga-purple', 'light')">
|
||||
<img src="/layout/images/themes/saga-purple.png" class="w-2rem h-2rem" alt="Saga Purple" />
|
||||
<button
|
||||
class="p-link w-2rem h-2rem"
|
||||
@click="onChangeTheme('saga-purple', 'light')"
|
||||
>
|
||||
<img
|
||||
src="/layout/images/themes/saga-purple.png"
|
||||
class="w-2rem h-2rem"
|
||||
alt="Saga Purple"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('vela-blue', 'dark')">
|
||||
<img src="/layout/images/themes/vela-blue.png" class="w-2rem h-2rem" alt="Vela Blue" />
|
||||
<button
|
||||
class="p-link w-2rem h-2rem"
|
||||
@click="onChangeTheme('vela-blue', 'dark')"
|
||||
>
|
||||
<img
|
||||
src="/layout/images/themes/vela-blue.png"
|
||||
class="w-2rem h-2rem"
|
||||
alt="Vela Blue"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('vela-green', 'dark')">
|
||||
<img src="/layout/images/themes/vela-green.png" class="w-2rem h-2rem" alt="Vela Green" />
|
||||
<button
|
||||
class="p-link w-2rem h-2rem"
|
||||
@click="onChangeTheme('vela-green', 'dark')"
|
||||
>
|
||||
<img
|
||||
src="/layout/images/themes/vela-green.png"
|
||||
class="w-2rem h-2rem"
|
||||
alt="Vela Green"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('vela-orange', 'dark')">
|
||||
<img src="/layout/images/themes/vela-orange.png" class="w-2rem h-2rem" alt="Vela Orange" />
|
||||
<button
|
||||
class="p-link w-2rem h-2rem"
|
||||
@click="onChangeTheme('vela-orange', 'dark')"
|
||||
>
|
||||
<img
|
||||
src="/layout/images/themes/vela-orange.png"
|
||||
class="w-2rem h-2rem"
|
||||
alt="Vela Orange"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('vela-purple', 'dark')">
|
||||
<img src="/layout/images/themes/vela-purple.png" class="w-2rem h-2rem" alt="Vela Purple" />
|
||||
<button
|
||||
class="p-link w-2rem h-2rem"
|
||||
@click="onChangeTheme('vela-purple', 'dark')"
|
||||
>
|
||||
<img
|
||||
src="/layout/images/themes/vela-purple.png"
|
||||
class="w-2rem h-2rem"
|
||||
alt="Vela Purple"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('arya-blue', 'dark')">
|
||||
<img src="/layout/images/themes/arya-blue.png" class="w-2rem h-2rem" alt="Arya Blue" />
|
||||
<button
|
||||
class="p-link w-2rem h-2rem"
|
||||
@click="onChangeTheme('arya-blue', 'dark')"
|
||||
>
|
||||
<img
|
||||
src="/layout/images/themes/arya-blue.png"
|
||||
class="w-2rem h-2rem"
|
||||
alt="Arya Blue"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('arya-green', 'dark')">
|
||||
<img src="/layout/images/themes/arya-green.png" class="w-2rem h-2rem" alt="Arya Green" />
|
||||
<button
|
||||
class="p-link w-2rem h-2rem"
|
||||
@click="onChangeTheme('arya-green', 'dark')"
|
||||
>
|
||||
<img
|
||||
src="/layout/images/themes/arya-green.png"
|
||||
class="w-2rem h-2rem"
|
||||
alt="Arya Green"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('arya-orange', 'dark')">
|
||||
<img src="/layout/images/themes/arya-orange.png" class="w-2rem h-2rem" alt="Arya Orange" />
|
||||
<button
|
||||
class="p-link w-2rem h-2rem"
|
||||
@click="onChangeTheme('arya-orange', 'dark')"
|
||||
>
|
||||
<img
|
||||
src="/layout/images/themes/arya-orange.png"
|
||||
class="w-2rem h-2rem"
|
||||
alt="Arya Orange"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="onChangeTheme('arya-purple', 'dark')">
|
||||
<img src="/layout/images/themes/arya-purple.png" class="w-2rem h-2rem" alt="Arya Purple" />
|
||||
<button
|
||||
class="p-link w-2rem h-2rem"
|
||||
@click="onChangeTheme('arya-purple', 'dark')"
|
||||
>
|
||||
<img
|
||||
src="/layout/images/themes/arya-purple.png"
|
||||
class="w-2rem h-2rem"
|
||||
alt="Arya Purple"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,17 +1,22 @@
|
||||
<script setup>
|
||||
import { useLayout } from '@/layout/composables/layout';
|
||||
import { computed } from 'vue';
|
||||
import { useLayout } from '@/layout/composables/layout';
|
||||
import { computed } from 'vue';
|
||||
|
||||
const { layoutConfig, contextPath } = useLayout();
|
||||
const { layoutConfig, contextPath } = useLayout();
|
||||
|
||||
const logoUrl = computed(() => {
|
||||
return `${contextPath}layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
|
||||
});
|
||||
const logoUrl = computed(() => {
|
||||
return `${contextPath}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" />
|
||||
<img
|
||||
:src="logoUrl"
|
||||
alt="Logo"
|
||||
height="20"
|
||||
class="mr-2"
|
||||
/>
|
||||
by
|
||||
<span class="font-medium ml-2">PrimeVue</span>
|
||||
</div>
|
||||
|
||||
@@ -1,64 +1,67 @@
|
||||
<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 '@/layout/composables/layout';
|
||||
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 '@/layout/composables/layout';
|
||||
|
||||
const { layoutConfig, layoutState, isSidebarActive } = useLayout();
|
||||
const { layoutConfig, layoutState, isSidebarActive } = useLayout();
|
||||
|
||||
const outsideClickListener = ref(null);
|
||||
const outsideClickListener = ref(null);
|
||||
|
||||
watch(isSidebarActive, (newVal) => {
|
||||
if (newVal) {
|
||||
bindOutsideClickListener();
|
||||
} else {
|
||||
unbindOutsideClickListener();
|
||||
}
|
||||
});
|
||||
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-input-filled': layoutConfig.inputStyle.value === 'filled',
|
||||
'p-ripple-disabled': !layoutConfig.ripple.value
|
||||
};
|
||||
});
|
||||
const bindOutsideClickListener = () => {
|
||||
if (!outsideClickListener.value) {
|
||||
outsideClickListener.value = (event) => {
|
||||
if (isOutsideClicked(event)) {
|
||||
layoutState.overlayMenuActive.value = false;
|
||||
layoutState.staticMenuMobileActive.value = false;
|
||||
layoutState.menuHoverActive.value = false;
|
||||
}
|
||||
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-input-filled': layoutConfig.inputStyle.value === 'filled',
|
||||
'p-ripple-disabled': !layoutConfig.ripple.value
|
||||
};
|
||||
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');
|
||||
});
|
||||
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));
|
||||
};
|
||||
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">
|
||||
<div
|
||||
class="layout-wrapper"
|
||||
:class="containerClass"
|
||||
>
|
||||
<app-topbar></app-topbar>
|
||||
<div class="layout-sidebar">
|
||||
<app-sidebar></app-sidebar>
|
||||
|
||||
@@ -1,175 +1,32 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
import AppMenuItem from './AppMenuItem.vue';
|
||||
import AppMenuItem from './AppMenuItem.vue';
|
||||
|
||||
const model = ref([
|
||||
{
|
||||
label: 'Home',
|
||||
items: [{ label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/' }]
|
||||
},
|
||||
{
|
||||
label: 'UI Components',
|
||||
items: [
|
||||
{ label: 'Form Layout', icon: 'pi pi-fw pi-id-card', to: '/uikit/formlayout' },
|
||||
{ label: 'Input', icon: 'pi pi-fw pi-check-square', to: '/uikit/input' },
|
||||
{ label: 'Float Label', icon: 'pi pi-fw pi-bookmark', to: '/uikit/floatlabel' },
|
||||
{ label: 'Invalid State', icon: 'pi pi-fw pi-exclamation-circle', to: '/uikit/invalidstate' },
|
||||
{ label: 'Button', icon: 'pi pi-fw pi-mobile', to: '/uikit/button', class: 'rotated-icon' },
|
||||
{ label: 'Table', icon: 'pi pi-fw pi-table', to: '/uikit/table' },
|
||||
{ label: 'List', icon: 'pi pi-fw pi-list', to: '/uikit/list' },
|
||||
{ label: 'Tree', icon: 'pi pi-fw pi-share-alt', to: '/uikit/tree' },
|
||||
{ label: 'Panel', icon: 'pi pi-fw pi-tablet', to: '/uikit/panel' },
|
||||
{ label: 'Overlay', icon: 'pi pi-fw pi-clone', to: '/uikit/overlay' },
|
||||
{ label: 'Media', icon: 'pi pi-fw pi-image', to: '/uikit/media' },
|
||||
{ label: 'Menu', icon: 'pi pi-fw pi-bars', to: '/uikit/menu', preventExact: true },
|
||||
{ label: 'Message', icon: 'pi pi-fw pi-comment', to: '/uikit/message' },
|
||||
{ label: 'File', icon: 'pi pi-fw pi-file', to: '/uikit/file' },
|
||||
{ label: 'Chart', icon: 'pi pi-fw pi-chart-bar', to: '/uikit/charts' },
|
||||
{ label: 'Misc', icon: 'pi pi-fw pi-circle', to: '/uikit/misc' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Prime Blocks',
|
||||
items: [
|
||||
{ label: 'Free Blocks', icon: 'pi pi-fw pi-eye', to: '/blocks', badge: 'NEW' },
|
||||
{ label: 'All Blocks', icon: 'pi pi-fw pi-globe', url: 'https://www.primefaces.org/primeblocks-vue', target: '_blank' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Utilities',
|
||||
items: [
|
||||
{ label: 'PrimeIcons', icon: 'pi pi-fw pi-prime', to: '/utilities/icons' },
|
||||
{ label: 'PrimeFlex', icon: 'pi pi-fw pi-desktop', url: 'https://www.primefaces.org/primeflex/', target: '_blank' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Pages',
|
||||
icon: 'pi pi-fw pi-briefcase',
|
||||
to: '/pages',
|
||||
items: [
|
||||
{
|
||||
label: 'Landing',
|
||||
icon: 'pi pi-fw pi-globe',
|
||||
to: '/landing'
|
||||
},
|
||||
{
|
||||
label: 'Auth',
|
||||
icon: 'pi pi-fw pi-user',
|
||||
items: [
|
||||
{
|
||||
label: 'Login',
|
||||
icon: 'pi pi-fw pi-sign-in',
|
||||
to: '/auth/login'
|
||||
},
|
||||
{
|
||||
label: 'Error',
|
||||
icon: 'pi pi-fw pi-times-circle',
|
||||
to: '/auth/error'
|
||||
},
|
||||
{
|
||||
label: 'Access Denied',
|
||||
icon: 'pi pi-fw pi-lock',
|
||||
to: '/auth/access'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Crud',
|
||||
icon: 'pi pi-fw pi-pencil',
|
||||
to: '/pages/crud'
|
||||
},
|
||||
{
|
||||
label: 'Timeline',
|
||||
icon: 'pi pi-fw pi-calendar',
|
||||
to: '/pages/timeline'
|
||||
},
|
||||
{
|
||||
label: 'Not Found',
|
||||
icon: 'pi pi-fw pi-exclamation-circle',
|
||||
to: '/pages/notfound'
|
||||
},
|
||||
{
|
||||
label: 'Empty',
|
||||
icon: 'pi pi-fw pi-circle-off',
|
||||
to: '/pages/empty'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Hierarchy',
|
||||
items: [
|
||||
{
|
||||
label: 'Submenu 1',
|
||||
icon: 'pi pi-fw pi-bookmark',
|
||||
items: [
|
||||
{
|
||||
label: 'Submenu 1.1',
|
||||
icon: 'pi pi-fw pi-bookmark',
|
||||
items: [
|
||||
{ label: 'Submenu 1.1.1', icon: 'pi pi-fw pi-bookmark' },
|
||||
{ label: 'Submenu 1.1.2', icon: 'pi pi-fw pi-bookmark' },
|
||||
{ label: 'Submenu 1.1.3', icon: 'pi pi-fw pi-bookmark' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Submenu 1.2',
|
||||
icon: 'pi pi-fw pi-bookmark',
|
||||
items: [{ label: 'Submenu 1.2.1', icon: 'pi pi-fw pi-bookmark' }]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Submenu 2',
|
||||
icon: 'pi pi-fw pi-bookmark',
|
||||
items: [
|
||||
{
|
||||
label: 'Submenu 2.1',
|
||||
icon: 'pi pi-fw pi-bookmark',
|
||||
items: [
|
||||
{ label: 'Submenu 2.1.1', icon: 'pi pi-fw pi-bookmark' },
|
||||
{ label: 'Submenu 2.1.2', icon: 'pi pi-fw pi-bookmark' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Submenu 2.2',
|
||||
icon: 'pi pi-fw pi-bookmark',
|
||||
items: [{ label: 'Submenu 2.2.1', icon: 'pi pi-fw pi-bookmark' }]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Get Started',
|
||||
items: [
|
||||
{
|
||||
label: 'Documentation',
|
||||
icon: 'pi pi-fw pi-question',
|
||||
to: '/documentation'
|
||||
},
|
||||
{
|
||||
label: 'View Source',
|
||||
icon: 'pi pi-fw pi-search',
|
||||
url: 'https://github.com/primefaces/sakai-vue',
|
||||
target: '_blank'
|
||||
}
|
||||
]
|
||||
}
|
||||
]);
|
||||
const model = ref([
|
||||
{
|
||||
label: 'Home',
|
||||
items: [{ label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/' }]
|
||||
}
|
||||
]);
|
||||
</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
|
||||
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>
|
||||
<li>
|
||||
<a href="https://www.primefaces.org/primeblocks-vue/#/" target="_blank">
|
||||
<img src="/layout/images/banner-primeblocks.png" alt="Prime Blocks" class="w-full mt-3" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,176 +0,0 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
import AppMenuItem from './AppMenuItem.vue';
|
||||
|
||||
const model = ref([
|
||||
{
|
||||
label: 'Home',
|
||||
items: [{ label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/' }]
|
||||
},
|
||||
{
|
||||
label: 'UI Components',
|
||||
items: [
|
||||
{ label: 'Form Layout', icon: 'pi pi-fw pi-id-card', to: '/uikit/formlayout' },
|
||||
{ label: 'Input', icon: 'pi pi-fw pi-check-square', to: '/uikit/input' },
|
||||
{ label: 'Float Label', icon: 'pi pi-fw pi-bookmark', to: '/uikit/floatlabel' },
|
||||
{ label: 'Invalid State', icon: 'pi pi-fw pi-exclamation-circle', to: '/uikit/invalidstate' },
|
||||
{ label: 'Button', icon: 'pi pi-fw pi-mobile', to: '/uikit/button', class: 'rotated-icon' },
|
||||
{ label: 'Table', icon: 'pi pi-fw pi-table', to: '/uikit/table' },
|
||||
{ label: 'List', icon: 'pi pi-fw pi-list', to: '/uikit/list' },
|
||||
{ label: 'Tree', icon: 'pi pi-fw pi-share-alt', to: '/uikit/tree' },
|
||||
{ label: 'Panel', icon: 'pi pi-fw pi-tablet', to: '/uikit/panel' },
|
||||
{ label: 'Overlay', icon: 'pi pi-fw pi-clone', to: '/uikit/overlay' },
|
||||
{ label: 'Media', icon: 'pi pi-fw pi-image', to: '/uikit/media' },
|
||||
{ label: 'Menu', icon: 'pi pi-fw pi-bars', to: '/uikit/menu', preventExact: true },
|
||||
{ label: 'Message', icon: 'pi pi-fw pi-comment', to: '/uikit/message' },
|
||||
{ label: 'File', icon: 'pi pi-fw pi-file', to: '/uikit/file' },
|
||||
{ label: 'Chart', icon: 'pi pi-fw pi-chart-bar', to: '/uikit/charts' },
|
||||
{ label: 'Misc', icon: 'pi pi-fw pi-circle', to: '/uikit/misc' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Prime Blocks',
|
||||
items: [
|
||||
{ label: 'Free Blocks', icon: 'pi pi-fw pi-eye', to: '/blocks', badge: 'NEW' },
|
||||
{ label: 'All Blocks', icon: 'pi pi-fw pi-globe', url: 'https://www.primefaces.org/primeblocks-vue', target: '_blank' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Utilities',
|
||||
items: [
|
||||
{ label: 'PrimeIcons', icon: 'pi pi-fw pi-prime', to: '/utilities/icons' },
|
||||
{ label: 'PrimeFlex', icon: 'pi pi-fw pi-desktop', url: 'https://www.primefaces.org/primeflex/', target: '_blank' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Pages',
|
||||
icon: 'pi pi-fw pi-briefcase',
|
||||
to: '/pages',
|
||||
items: [
|
||||
{
|
||||
label: 'Landing',
|
||||
icon: 'pi pi-fw pi-globe',
|
||||
to: '/landing'
|
||||
},
|
||||
{
|
||||
label: 'Auth',
|
||||
icon: 'pi pi-fw pi-user',
|
||||
items: [
|
||||
{
|
||||
label: 'Login',
|
||||
icon: 'pi pi-fw pi-sign-in',
|
||||
to: '/auth/login'
|
||||
},
|
||||
{
|
||||
label: 'Error',
|
||||
icon: 'pi pi-fw pi-times-circle',
|
||||
to: '/auth/error'
|
||||
},
|
||||
{
|
||||
label: 'Access Denied',
|
||||
icon: 'pi pi-fw pi-lock',
|
||||
to: '/auth/access'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Crud',
|
||||
icon: 'pi pi-fw pi-pencil',
|
||||
to: '/pages/crud'
|
||||
},
|
||||
{
|
||||
label: 'Timeline',
|
||||
icon: 'pi pi-fw pi-calendar',
|
||||
to: '/pages/timeline'
|
||||
},
|
||||
{
|
||||
label: 'Not Found',
|
||||
icon: 'pi pi-fw pi-exclamation-circle',
|
||||
to: '/pages/notfound'
|
||||
},
|
||||
{
|
||||
label: 'Empty',
|
||||
icon: 'pi pi-fw pi-circle-off',
|
||||
to: '/pages/empty'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Hierarchy',
|
||||
items: [
|
||||
{
|
||||
label: 'Submenu 1',
|
||||
icon: 'pi pi-fw pi-bookmark',
|
||||
items: [
|
||||
{
|
||||
label: 'Submenu 1.1',
|
||||
icon: 'pi pi-fw pi-bookmark',
|
||||
items: [
|
||||
{ label: 'Submenu 1.1.1', icon: 'pi pi-fw pi-bookmark' },
|
||||
{ label: 'Submenu 1.1.2', icon: 'pi pi-fw pi-bookmark' },
|
||||
{ label: 'Submenu 1.1.3', icon: 'pi pi-fw pi-bookmark' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Submenu 1.2',
|
||||
icon: 'pi pi-fw pi-bookmark',
|
||||
items: [{ label: 'Submenu 1.2.1', icon: 'pi pi-fw pi-bookmark' }]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Submenu 2',
|
||||
icon: 'pi pi-fw pi-bookmark',
|
||||
items: [
|
||||
{
|
||||
label: 'Submenu 2.1',
|
||||
icon: 'pi pi-fw pi-bookmark',
|
||||
items: [
|
||||
{ label: 'Submenu 2.1.1', icon: 'pi pi-fw pi-bookmark' },
|
||||
{ label: 'Submenu 2.1.2', icon: 'pi pi-fw pi-bookmark' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Submenu 2.2',
|
||||
icon: 'pi pi-fw pi-bookmark',
|
||||
items: [{ label: 'Submenu 2.2.1', icon: 'pi pi-fw pi-bookmark' }]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Get Started',
|
||||
items: [
|
||||
{
|
||||
label: 'Documentation',
|
||||
icon: 'pi pi-fw pi-question',
|
||||
to: '/documentation'
|
||||
},
|
||||
{
|
||||
label: 'View Source',
|
||||
icon: 'pi pi-fw pi-search',
|
||||
url: 'https://github.com/primefaces/sakai-vue',
|
||||
target: '_blank'
|
||||
}
|
||||
]
|
||||
}
|
||||
]);
|
||||
</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>
|
||||
<li>
|
||||
<a href="https://www.primefaces.org/primeblocks-vue/#/" target="_blank">
|
||||
<img src="/layout/images/banner-primeblocks.png" alt="Prime Blocks" class="w-full mt-3" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -1,90 +1,133 @@
|
||||
<script setup>
|
||||
import { ref, onBeforeMount, watch } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useLayout } from '@/layout/composables/layout';
|
||||
import { ref, onBeforeMount, watch } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useLayout } from '@/layout/composables/layout';
|
||||
|
||||
const route = useRoute();
|
||||
const route = useRoute();
|
||||
|
||||
const { layoutConfig, layoutState, setActiveMenuItem, onMenuToggle } = useLayout();
|
||||
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 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);
|
||||
const isActiveMenu = ref(false);
|
||||
const itemKey = ref(null);
|
||||
|
||||
onBeforeMount(() => {
|
||||
itemKey.value = props.parentItemKey ? props.parentItemKey + '-' + props.index : String(props.index);
|
||||
onBeforeMount(() => {
|
||||
itemKey.value = props.parentItemKey ? props.parentItemKey + '-' + props.index : String(props.index);
|
||||
|
||||
const activeItem = layoutState.activeMenuItem;
|
||||
const activeItem = layoutState.activeMenuItem;
|
||||
|
||||
isActiveMenu.value = activeItem === itemKey.value || activeItem ? activeItem.startsWith(itemKey.value + '-') : false;
|
||||
});
|
||||
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;
|
||||
}
|
||||
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;
|
||||
const { overlayMenuActive, staticMenuMobileActive } = layoutState;
|
||||
|
||||
if ((item.to || item.url) && (staticMenuMobileActive.value || overlayMenuActive.value)) {
|
||||
onMenuToggle();
|
||||
}
|
||||
if ((item.to || item.url) && (staticMenuMobileActive.value || overlayMenuActive.value)) {
|
||||
onMenuToggle();
|
||||
}
|
||||
|
||||
if (item.command) {
|
||||
item.command({ originalEvent: event, item: item });
|
||||
}
|
||||
if (item.command) {
|
||||
item.command({ originalEvent: event, item: item });
|
||||
}
|
||||
|
||||
const foundItemKey = item.items ? (isActiveMenu.value ? props.parentItemKey : itemKey) : itemKey.value;
|
||||
const foundItemKey = item.items ? (isActiveMenu.value ? props.parentItemKey : itemKey) : itemKey.value;
|
||||
|
||||
setActiveMenuItem(foundItemKey);
|
||||
};
|
||||
setActiveMenuItem(foundItemKey);
|
||||
};
|
||||
|
||||
const checkActiveRoute = (item) => {
|
||||
return route.path === item.to;
|
||||
};
|
||||
const checkActiveRoute = (item) => {
|
||||
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>
|
||||
<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>
|
||||
<i
|
||||
class="pi pi-fw pi-angle-down layout-submenu-toggler"
|
||||
v-if="item.items"
|
||||
></i>
|
||||
</a>
|
||||
<router-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>
|
||||
<router-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>
|
||||
<i
|
||||
class="pi pi-fw pi-angle-down layout-submenu-toggler"
|
||||
v-if="item.items"
|
||||
></i>
|
||||
</router-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>
|
||||
<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>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import AppMenu from './AppMenu.vue';
|
||||
import AppMenu from './AppMenu.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@@ -1,90 +1,99 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
|
||||
import { useLayout } from '@/layout/composables/layout';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
|
||||
import { useLayout } from '@/layout/composables/layout';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const { layoutConfig, onMenuToggle, contextPath } = useLayout();
|
||||
const { onMenuToggle } = useLayout();
|
||||
|
||||
const outsideClickListener = ref(null);
|
||||
const topbarMenuActive = ref(false);
|
||||
const router = useRouter();
|
||||
const outsideClickListener = ref(null);
|
||||
const topbarMenuActive = ref(false);
|
||||
const router = useRouter();
|
||||
|
||||
onMounted(() => {
|
||||
bindOutsideClickListener();
|
||||
});
|
||||
onMounted(() => {
|
||||
bindOutsideClickListener();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
unbindOutsideClickListener();
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
unbindOutsideClickListener();
|
||||
});
|
||||
|
||||
const logoUrl = computed(() => {
|
||||
return `${contextPath}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 onTopBarMenuButton = () => {
|
||||
topbarMenuActive.value = !topbarMenuActive.value;
|
||||
};
|
||||
});
|
||||
|
||||
const bindOutsideClickListener = () => {
|
||||
if (!outsideClickListener.value) {
|
||||
outsideClickListener.value = (event) => {
|
||||
if (isOutsideClicked(event)) {
|
||||
topbarMenuActive.value = false;
|
||||
}
|
||||
const onSettingsClick = () => {
|
||||
topbarMenuActive.value = false;
|
||||
router.push('/documentation');
|
||||
};
|
||||
const topbarMenuClasses = computed(() => {
|
||||
return {
|
||||
'layout-topbar-menu-mobile-active': topbarMenuActive.value
|
||||
};
|
||||
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');
|
||||
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;
|
||||
|
||||
return !(sidebarEl.isSameNode(event.target) || sidebarEl.contains(event.target) || topbarEl.isSameNode(event.target) || topbarEl.contains(event.target));
|
||||
};
|
||||
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()">
|
||||
<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()">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<button
|
||||
@click="onSettingsClick()"
|
||||
class="p-link layout-topbar-button"
|
||||
>
|
||||
<i class="pi pi-cog"></i>
|
||||
<span>Settings</span>
|
||||
</button>
|
||||
|
||||
@@ -7,7 +7,7 @@ const layoutConfig = reactive({
|
||||
darkTheme: true,
|
||||
inputStyle: 'outlined',
|
||||
menuMode: 'static',
|
||||
theme: 'lara-dark-blue',
|
||||
theme: 'vela-blue',
|
||||
scale: 14,
|
||||
activeMenuItem: null
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user