Refactored composable

This commit is contained in:
Cagatay Civici
2022-11-29 08:49:09 +03:00
parent c6ff257662
commit c80bbf8f70
11 changed files with 3910 additions and 19 deletions

3891
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@@ -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;

View File

@@ -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;

View File

@@ -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);

View File

@@ -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: {

View File

@@ -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);

View File

@@ -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;

View File

@@ -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({

View File

@@ -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({

View File

@@ -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('');

View File

@@ -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');