Refactored composable
This commit is contained in:
3891
package-lock.json
generated
Normal file
3891
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@@ -5,7 +5,7 @@ import InputSwitch from 'primevue/inputswitch';
|
||||
import Sidebar from 'primevue/sidebar';
|
||||
|
||||
import { ref } from 'vue';
|
||||
import { useLayoutService } from '@/layout/composables/layoutService';
|
||||
import { useLayout } from '@/layout/composables/layout';
|
||||
|
||||
defineProps({
|
||||
simple: {
|
||||
@@ -16,7 +16,7 @@ defineProps({
|
||||
const scales = ref([12, 13, 14, 15, 16]);
|
||||
const visible = ref(false);
|
||||
|
||||
const { changeThemeSettings, setScale, layoutConfig } = useLayoutService();
|
||||
const { changeThemeSettings, setScale, layoutConfig } = useLayout();
|
||||
|
||||
const onConfigButtonClick = () => {
|
||||
visible.value = !visible.value;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script setup>
|
||||
import { useLayoutService } from '@/layout/composables/layoutService';
|
||||
import { useLayout } from '@/layout/composables/layout';
|
||||
|
||||
const { layoutConfig } = useLayoutService();
|
||||
const { layoutConfig } = useLayout();
|
||||
|
||||
const logoUrl = () => {
|
||||
return new URL(`/public/layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`, import.meta.url).href;
|
||||
|
||||
@@ -4,9 +4,9 @@ import AppTopbar from './AppTopbar.vue';
|
||||
import AppFooter from './AppFooter.vue';
|
||||
import AppSidebar from './AppSidebar.vue';
|
||||
import AppConfig from './AppConfig.vue';
|
||||
import { useLayoutService } from '@/layout/composables/layoutService';
|
||||
import { useLayout } from '@/layout/composables/layout';
|
||||
|
||||
const { layoutConfig, layoutState, isSidebarActive } = useLayoutService();
|
||||
const { layoutConfig, layoutState, isSidebarActive } = useLayout();
|
||||
|
||||
const outsideClickListener = ref(null);
|
||||
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<script setup>
|
||||
import { ref, onBeforeMount, watch } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useLayoutService } from '@/layout/composables/layoutService';
|
||||
import { useLayout } from '@/layout/composables/layout';
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
const { layoutConfig, layoutState, setActiveMenuItem, onMenuToggle } = useLayoutService();
|
||||
const { layoutConfig, layoutState, setActiveMenuItem, onMenuToggle } = useLayout();
|
||||
|
||||
const props = defineProps({
|
||||
item: {
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
|
||||
import { useLayoutService } from '@/layout/composables/layoutService';
|
||||
import { useLayout } from '@/layout/composables/layout';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const { layoutConfig, onMenuToggle } = useLayoutService();
|
||||
const { layoutConfig, onMenuToggle } = useLayout();
|
||||
|
||||
const outsideClickListener = ref(null);
|
||||
const topbarMenuActive = ref(false);
|
||||
|
||||
@@ -19,7 +19,7 @@ const layoutState = reactive({
|
||||
menuHoverActive: false
|
||||
});
|
||||
|
||||
export function useLayoutService () {
|
||||
export function useLayout () {
|
||||
const changeThemeSettings = (theme, darkTheme) => {
|
||||
layoutConfig.darkTheme = darkTheme;
|
||||
layoutConfig.theme = theme;
|
||||
@@ -1,9 +1,9 @@
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref, watch } from 'vue';
|
||||
import ProductService from '@/layout/service/ProductService';
|
||||
import { useLayoutService } from '@/layout/composables/layoutService';
|
||||
import { useLayout } from '@/layout/composables/layout';
|
||||
|
||||
const { isDarkTheme } = useLayoutService();
|
||||
const { isDarkTheme } = useLayout();
|
||||
|
||||
const products = ref(null);
|
||||
const lineData = reactive({
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script setup>
|
||||
import { useLayoutService } from '@/layout/composables/layoutService';
|
||||
import { useLayout } from '@/layout/composables/layout';
|
||||
import AppConfig from '@/layout/AppConfig.vue';
|
||||
const { isDarkTheme } = useLayoutService();
|
||||
const { isDarkTheme } = useLayout();
|
||||
|
||||
const smoothScroll = (id) => {
|
||||
document.querySelector(id).scrollIntoView({
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<script setup>
|
||||
import { useLayoutService } from '@/layout/composables/layoutService';
|
||||
import { useLayout } from '@/layout/composables/layout';
|
||||
import { ref } from 'vue';
|
||||
import AppConfig from '@/layout/AppConfig.vue';
|
||||
|
||||
const { isDarkTheme } = useLayoutService();
|
||||
const { isDarkTheme } = useLayout();
|
||||
|
||||
const email = ref('');
|
||||
const password = ref('');
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { useLayoutService } from '@/layout/composables/layoutService';
|
||||
import { useLayout } from '@/layout/composables/layout';
|
||||
|
||||
const { layoutConfig } = useLayoutService();
|
||||
const { layoutConfig } = useLayout();
|
||||
let documentStyle = getComputedStyle(document.documentElement);
|
||||
let textColor = documentStyle.getPropertyValue('--text-color');
|
||||
let textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
|
||||
|
||||
Reference in New Issue
Block a user