Gava/agenciapsilmno
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use readonly for layout composable

Browse Source
This commit is contained in:
tugcekucukoglu
2024-07-29 16:01:14 +03:00
parent 0e3130d2a6
commit 3efe7ae222
8 changed files with 39 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/layout/AppConfigurator.vue
View File

@@ -8,6 +8,8 @@ import { ref } from 'vue';
const { layoutConfig, setPrimary, setSurface, setPreset, isDarkTheme } = useLayout();
const preset = ref(layoutConfig.preset);
const presets = {
Aura,
Lara,
@@ -72,7 +74,7 @@ const surfaces = ref([
]);
function getPresetExt() {
const color = primaryColors.value.find((c) => c.name === layoutConfig.primary.value);
const color = primaryColors.value.find((c) => c.name === layoutConfig.primary);
if (color.name === 'noir') {
return {
@@ -123,7 +125,7 @@ function getPresetExt() {
}
};
} else {
if (layoutConfig.preset.value === 'Nora') {
if (layoutConfig.preset === 'Nora') {
return {
semantic: {
primary: color.palette,
@@ -215,14 +217,12 @@ function applyTheme(type, color) {
} else if (type === 'surface') {
updateSurfacePalette(color.palette);
}
/*EventBus.emit('theme-palette-change');*/
}
function onPresetChange(value) {
setPreset(value);
const presetValue = presets[value];
const surfacePalette = surfaces.value.find((s) => s.name === layoutConfig.surface.value)?.palette;
const surfacePalette = surfaces.value.find((s) => s.name === layoutConfig.surface)?.palette;
$t().preset(presetValue).preset(getPresetExt()).surfacePalette(surfacePalette).use({ useDefaultOptions: true });
}
@@ -240,7 +240,7 @@ function onPresetChange(value) {
type="button"
:title="primaryColor.name"
@click="updateColors('primary', primaryColor)"
:class="{ 'active-color': layoutConfig.primary.value === primaryColor.name }"
:class="{ 'active-color': layoutConfig.primary === primaryColor.name }"
:style="{ backgroundColor: `${primaryColor.name === 'noir' ? 'var(--text-color)' : primaryColor.palette['500']}` }"
></button>
</div>
@@ -254,14 +254,14 @@ function onPresetChange(value) {
type="button"
:title="surface.name"
@click="updateColors('surface', surface)"
:class="{ 'active-color': layoutConfig.surface.value ? layoutConfig.surface.value === surface.name : isDarkTheme ? surface.name === 'zinc' : surface.name === 'slate' }"
:class="{ 'active-color': layoutConfig.surface ? layoutConfig.surface === surface.name : isDarkTheme ? surface.name === 'zinc' : surface.name === 'slate' }"
:style="{ backgroundColor: `${surface.palette['500']}` }"
></button>
</div>
</div>
<div class="config-panel-settings">
<span class="config-panel-label">Presets</span>
<SelectButton v-model="layoutConfig.preset.value" @update:modelValue="onPresetChange" :options="presetOptions" :allowEmpty="false" />
<SelectButton v-model="preset" @update:modelValue="onPresetChange" :options="presetOptions" :allowEmpty="false" />
</div>
</div>
</div>

4
src/layout/AppFooter.vue
View File

@@ -2,10 +2,10 @@
import { useLayout } from '@/layout/composables/layout';
import { computed } from 'vue';
const { layoutConfig } = useLayout();
const { isDarkTheme } = useLayout();
const logoUrl = computed(() => {
return `/layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
return `/layout/images/${isDarkTheme ? 'logo-white' : 'logo-dark'}.svg`;
});
</script>

20
src/layout/AppLayout.vue
View File

@@ -5,7 +5,7 @@ import AppFooter from './AppFooter.vue';
import AppSidebar from './AppSidebar.vue';
import AppTopbar from './AppTopbar.vue';
const { layoutConfig, layoutState, isSidebarActive } = useLayout();
const { layoutConfig, layoutState, isSidebarActive, resetMenu } = useLayout();
const outsideClickListener = ref(null);
@@ -19,22 +19,20 @@ watch(isSidebarActive, (newVal) => {
const containerClass = computed(() => {
return {
'layout-theme-light': !layoutConfig.darkTheme.value,
'layout-theme-dark': layoutConfig.darkTheme.value,
'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
'layout-theme-light': !layoutConfig.darkTheme,
'layout-theme-dark': layoutConfig.darkTheme,
'layout-overlay': layoutConfig.menuMode === 'overlay',
'layout-static': layoutConfig.menuMode === 'static',
'layout-static-inactive': layoutState.staticMenuDesktopInactive && layoutConfig.menuMode === 'static',
'layout-overlay-active': layoutState.overlayMenuActive,
'layout-mobile-active': layoutState.staticMenuMobileActive
};
});
const bindOutsideClickListener = () => {
if (!outsideClickListener.value) {
outsideClickListener.value = (event) => {
if (isOutsideClicked(event)) {
layoutState.overlayMenuActive.value = false;
layoutState.staticMenuMobileActive.value = false;
layoutState.menuHoverActive.value = false;
resetMenu();
}
};
document.addEventListener('click', outsideClickListener.value);

10
src/layout/AppMenuItem.vue
View File

@@ -1,7 +1,7 @@
<script setup>
import { ref, onBeforeMount, watch } from 'vue';
import { useRoute } from 'vue-router';
import { useLayout } from '@/layout/composables/layout';
import { onBeforeMount, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
@@ -38,7 +38,7 @@ onBeforeMount(() => {
});
watch(
() => layoutConfig.activeMenuItem.value,
() => layoutConfig.activeMenuItem,
(newVal) => {
isActiveMenu.value = newVal === itemKey.value || newVal.startsWith(itemKey.value + '-');
}
@@ -49,9 +49,7 @@ const itemClick = (event, item) => {
return;
}
const { overlayMenuActive, staticMenuMobileActive } = layoutState;
if ((item.to || item.url) && (staticMenuMobileActive.value || overlayMenuActive.value)) {
if ((item.to || item.url) && (layoutState.staticMenuMobileActive || layoutState.overlayMenuActive)) {
onMenuToggle();
}

6
src/layout/AppTopbar.vue
View File

@@ -1,10 +1,10 @@
<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
import { useLayout } from '@/layout/composables/layout';
import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import AppConfigurator from './AppConfigurator.vue';
const { layoutConfig, onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout();
const { onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout();
const outsideClickListener = ref(null);
const topbarMenuActive = ref(false);
@@ -19,7 +19,7 @@ onBeforeUnmount(() => {
});
const logoUrl = computed(() => {
return `/layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
return `/layout/images/${isDarkTheme ? 'logo-white' : 'logo-dark'}.svg`;
});
const onTopBarMenuButton = () => {

10
src/layout/composables/layout.js
View File

@@ -1,4 +1,4 @@
import { computed, reactive, toRefs } from 'vue';
import { computed, reactive, readonly } from 'vue';
const layoutConfig = reactive({
preset: 'Aura',
@@ -52,9 +52,15 @@ export function useLayout() {
}
};
const resetMenu = () => {
layoutState.overlayMenuActive = false;
layoutState.staticMenuMobileActive = false;
layoutState.menuHoverActive = false;
};
const isSidebarActive = computed(() => layoutState.overlayMenuActive || layoutState.staticMenuMobileActive);
const isDarkTheme = computed(() => layoutConfig.darkTheme);
return { layoutConfig: toRefs(layoutConfig), layoutState: toRefs(layoutState), onMenuToggle, isSidebarActive, isDarkTheme, setActiveMenuItem, toggleDarkMode, setPrimary, setSurface, setPreset };
return { layoutConfig: readonly(layoutConfig), layoutState: readonly(layoutState), onMenuToggle, isSidebarActive, isDarkTheme, setActiveMenuItem, toggleDarkMode, setPrimary, setSurface, setPreset, resetMenu };
}

4
src/views/pages/Landing.vue
View File

@@ -2,7 +2,7 @@
import { useLayout } from '@/layout/composables/layout';
import { computed } from 'vue';
const { layoutConfig } = useLayout();
const { isDarkTheme } = useLayout();
const smoothScroll = (id) => {
document.querySelector(id).scrollIntoView({
@@ -11,7 +11,7 @@ const smoothScroll = (id) => {
};
const logoUrl = computed(() => {
return `layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
return `layout/images/${isDarkTheme ? 'logo-white' : 'logo-dark'}.svg`;
});
</script>

6
src/views/pages/auth/Login.vue
View File

@@ -1,14 +1,14 @@
<script setup>
import { useLayout } from '@/layout/composables/layout';
import { ref, computed } from 'vue';
import { computed, ref } from 'vue';
const { layoutConfig } = useLayout();
const { isDarkTheme } = useLayout();
const email = ref('');
const password = ref('');
const checked = ref(false);
const logoUrl = computed(() => {
return `/layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
return `/layout/images/${isDarkTheme ? 'logo-white' : 'logo-dark'}.svg`;
});
</script>