basic chart menu finished
This commit is contained in:
@@ -1,295 +0,0 @@
|
||||
<script setup>
|
||||
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';
|
||||
|
||||
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');
|
||||
});
|
||||
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()"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
<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>
|
||||
<label for="mode2">Overlay</label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-if="!simple">
|
||||
<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>
|
||||
<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>
|
||||
<label for="filled_input">Filled</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Ripple Effect</h5>
|
||||
<InputSwitch v-model="layoutConfig.ripple.value"></InputSwitch>
|
||||
</template>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</Sidebar>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -1,67 +1,63 @@
|
||||
<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 { 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 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 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');
|
||||
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>
|
||||
@@ -77,4 +73,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,33 +1,28 @@
|
||||
<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: '/' }]
|
||||
}
|
||||
]);
|
||||
const model = ref([
|
||||
{
|
||||
label: 'Home',
|
||||
items: [
|
||||
{ label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/home' },
|
||||
{ label: 'Chart', icon: 'pi pi-fw pi-chart-bar', to: '/charts' }]
|
||||
|
||||
}
|
||||
]);
|
||||
</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>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user