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

Merge branch 'master' of https://github.com/primefaces/sakai-vue

Browse Source
This commit is contained in:
Cagatay Civici
2024-07-29 16:48:52 +03:00
parent 7c7cc7ce70 3efe7ae222
commit bbf6f86814
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 { layoutConfig, setPrimary, setSurface, setPreset, isDarkTheme } = useLayout();
const preset = ref(layoutConfig.preset);
const presets = { const presets = {
Aura, Aura,
Lara, Lara,
@@ -72,7 +74,7 @@ const surfaces = ref([
]); ]);
function getPresetExt() { 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') { if (color.name === 'noir') {
return { return {
@@ -123,7 +125,7 @@ function getPresetExt() {
} }
}; };
} else { } else {
if (layoutConfig.preset.value === 'Nora') { if (layoutConfig.preset === 'Nora') {
return { return {
semantic: { semantic: {
primary: color.palette, primary: color.palette,
@@ -215,14 +217,12 @@ function applyTheme(type, color) {
} else if (type === 'surface') { } else if (type === 'surface') {
updateSurfacePalette(color.palette); updateSurfacePalette(color.palette);
} }
/*EventBus.emit('theme-palette-change');*/
} }
function onPresetChange(value) { function onPresetChange(value) {
setPreset(value); setPreset(value);
const presetValue = presets[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 }); $t().preset(presetValue).preset(getPresetExt()).surfacePalette(surfacePalette).use({ useDefaultOptions: true });
} }
@@ -240,7 +240,7 @@ function onPresetChange(value) {
type="button" type="button"
:title="primaryColor.name" :title="primaryColor.name"
@click="updateColors('primary', primaryColor)" @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']}` }" :style="{ backgroundColor: `${primaryColor.name === 'noir' ? 'var(--text-color)' : primaryColor.palette['500']}` }"
></button> ></button>
</div> </div>
@@ -254,14 +254,14 @@ function onPresetChange(value) {
type="button" type="button"
:title="surface.name" :title="surface.name"
@click="updateColors('surface', surface)" @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']}` }" :style="{ backgroundColor: `${surface.palette['500']}` }"
></button> ></button>
</div> </div>
</div> </div>
<div class="config-panel-settings"> <div class="config-panel-settings">
<span class="config-panel-label">Presets</span> <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> </div>
</div> </div>

4
src/layout/AppFooter.vue
View File

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

20
src/layout/AppLayout.vue
View File

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

10
src/layout/AppMenuItem.vue
View File

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

6
src/layout/AppTopbar.vue
View File

@@ -1,10 +1,10 @@
<script setup> <script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
import { useLayout } from '@/layout/composables/layout'; import { useLayout } from '@/layout/composables/layout';
import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import AppConfigurator from './AppConfigurator.vue'; import AppConfigurator from './AppConfigurator.vue';
const { layoutConfig, onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout(); const { onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout();
const outsideClickListener = ref(null); const outsideClickListener = ref(null);
const topbarMenuActive = ref(false); const topbarMenuActive = ref(false);
@@ -19,7 +19,7 @@ onBeforeUnmount(() => {
}); });
const logoUrl = computed(() => { 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 = () => { 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({ const layoutConfig = reactive({
preset: 'Aura', preset: 'Aura',
@@ -52,11 +52,17 @@ export function useLayout() {
} }
}; };
const resetMenu = () => {
layoutState.overlayMenuActive = false;
layoutState.staticMenuMobileActive = false;
layoutState.menuHoverActive = false;
};
const isSidebarActive = computed(() => layoutState.overlayMenuActive || layoutState.staticMenuMobileActive); const isSidebarActive = computed(() => layoutState.overlayMenuActive || layoutState.staticMenuMobileActive);
const isDarkTheme = computed(() => layoutConfig.darkTheme); const isDarkTheme = computed(() => layoutConfig.darkTheme);
const getPrimary = computed(() => layoutConfig.primary); const getPrimary = computed(() => layoutConfig.primary);
return { layoutConfig: toRefs(layoutConfig), layoutState: toRefs(layoutState), onMenuToggle, isSidebarActive, isDarkTheme, getPrimary, setActiveMenuItem, toggleDarkMode, setPrimary, setSurface, setPreset }; return { layoutConfig: readonly(layoutConfig), layoutState: readonly(layoutState), onMenuToggle, isSidebarActive, isDarkTheme, getPrimary, 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 { useLayout } from '@/layout/composables/layout';
import { computed } from 'vue'; import { computed } from 'vue';
const { layoutConfig } = useLayout(); const { isDarkTheme } = useLayout();
const smoothScroll = (id) => { const smoothScroll = (id) => {
document.querySelector(id).scrollIntoView({ document.querySelector(id).scrollIntoView({
@@ -11,7 +11,7 @@ const smoothScroll = (id) => {
}; };
const logoUrl = computed(() => { const logoUrl = computed(() => {
return `layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`; return `layout/images/${isDarkTheme ? 'logo-white' : 'logo-dark'}.svg`;
}); });
</script> </script>

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

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