initial commit

resources/js/Stores/layout.js

@@ -0,0 +1,14 @@
+import { defineStore } from 'pinia';
+
+export const LayoutService = defineStore('layout', {
+	state: () => ({
+		isAsideMobileExpanded: false, // via action
+		isAsideLgActive: false,
+	}),
+
+	actions: {
+		asideMobileToggle() {
+			this.isAsideMobileExpanded = !this.isAsideMobileExpanded;
+		},
+	},
+});

resources/js/Stores/main.js

@@ -0,0 +1,62 @@
+import { defineStore } from 'pinia';
+import axios from 'axios';
+
+export const MainService = defineStore('main', {
+	state: () => ({
+		/* User */
+		userName: '',
+		userEmail: null,
+		userAvatar: null,
+
+		/* Field focus with ctrl+k (to register only once) */
+		isFieldFocusRegistered: false,
+
+		/* Sample data for starting dashboard(commonly used) */
+		clients: [],
+		history: [],
+		authors: [],
+		datasets: []
+	}),
+	actions: {
+		// payload = authenticated user
+		setUser(payload) {
+			if (payload.name) {
+				this.userName = payload.name;
+			}
+			if (payload.email) {
+				this.userEmail = payload.email;
+			}
+			if (payload.avatar) {
+				this.userAvatar = payload.avatar;
+			}
+		},
+
+		fetch(sampleDataKey) {
+			// sampleDataKey= clients or history
+			axios
+				.get(`data-sources/${sampleDataKey}.json`)
+				.then((r) => {
+					if (r.data && r.data.data) {
+						this[sampleDataKey] = r.data.data;
+					}
+				})
+				.catch((error) => {
+					alert(error.message);
+				});
+		},
+
+		fetchApi(sampleDataKey) {
+			// sampleDataKey= clients or history
+			axios
+				.get(`api/${sampleDataKey}`)
+				.then((r) => {
+					if (r.data) {
+						this[sampleDataKey] = r.data;
+					}
+				})
+				.catch((error) => {
+					alert(error.message);
+				});
+		},
+	},
+});

resources/js/Stores/style.js

@@ -0,0 +1,57 @@
+import { defineStore } from 'pinia';
+import * as styles from '@/styles';
+import { darkModeKey, styleKey } from '@/config';
+
+export const StyleService = defineStore('style', {
+	state: () => ({
+		/* Styles */
+		asideStyle: '',
+		asideScrollbarsStyle: '',
+		asideBrandStyle: '',
+		asideMenuItemStyle: '',
+		asideMenuItemActiveStyle: '',
+		asideMenuDropdownStyle: '',
+		navBarItemLabelStyle: '',
+		navBarItemLabelHoverStyle: '',
+		navBarItemLabelActiveColorStyle: '',
+		overlayStyle: '',
+
+		/* Dark mode default false */
+		darkMode: false,
+	}),
+
+	actions: {
+		// style payload = 'basic' or 'white' with blue font
+		setStyle(payload) {
+			if (!styles[payload]) {
+				return;
+			}
+
+			if (typeof localStorage !== 'undefined') {
+				localStorage.setItem(styleKey, payload);
+			}
+
+			const style = styles[payload];
+
+			for (const key in style) {
+				this[`${key}Style`] = style[key];
+			}
+		},
+		// toggle dark mode
+		setDarkMode(payload = null) {
+			this.darkMode = payload !== null ? payload : !this.darkMode;
+
+			if (typeof localStorage !== 'undefined') {
+				localStorage.setItem(darkModeKey, this.darkMode ? '1' : '0');
+			}
+
+			if (typeof document !== 'undefined') {
+				document.body.classList[this.darkMode ? 'add' : 'remove']('dark-scrollbars');
+
+				document.documentElement.classList[this.darkMode ? 'add' : 'remove'](
+					'dark-scrollbars-compat'
+				);
+			}
+		},
+	},
+});