@ozdao/prometheus-framework 0.2.212 → 0.2.213

package/src/modules/globals/views/components/layouts/Client.vue

@@ -4,42 +4,40 @@
 			<Loader v-if="!page" class="pos-fixed"/>
 		</transition>
 
-		<!-- <transition name="moveFromTop" mode="out-in" appear> -->
-			<header 
-				id="header" 
-				v-if="route.meta.header.component"
-				class="
-					pd-thin 
-					gap-micro
-					flex-justify-between
-					flex-nowrap
-					flex
-					h-4r
-					w-100
-					z-index-2 
-					pos-relative pos-t-0
-				"
-				:class="{
-		  		't-black bg-white': headerTheme === 'light',
-		  		't-white bg-black': headerTheme === 'dark'  
-		  	}"
-			>
-	      <component
-			  	v-if="!MOBILE_APP"
-	        :is="route.meta.header.component"
-	        ref="header" 
-	        :theme="headerTheme"
-	        :logotype="route.meta.header.logotype"
-	        :location="route.meta.header.location"
-	      >
-	        <component
-	          v-if="route.meta.navigation"
-	          :is="route.meta.navigation"
-	          class="mn-l-auto desktop-only"
-	        />
-	      </component>
-		  </header>
-    <!-- </transition> -->
+		<header 
+			id="header" 
+			v-if="route.meta.header.component"
+			class="
+				pd-thin 
+				gap-micro
+				flex-justify-between
+				flex-nowrap
+				flex
+				h-4r
+				w-100
+				z-index-2 
+				pos-relative pos-t-0
+			"
+			:class="{
+	  		't-black bg-white': headerTheme === 'light',
+	  		't-white bg-black': headerTheme === 'dark'  
+	  	}"
+		>
+      <component
+		  	v-if="!MOBILE_APP"
+        :is="route.meta.header.component"
+        ref="header" 
+        :theme="headerTheme"
+        :logotype="route.meta.header.logotype"
+        :location="route.meta.header.location"
+      >
+        <component
+          v-if="route.meta.navigation"
+          :is="route.meta.navigation"
+          class="mn-l-auto desktop-only"
+        />
+      </component>
+	  </header>
 
 		<transition name="moveFromTop" mode="out-in" appear>
 			<NavigationBar
@@ -50,6 +48,7 @@
 		</transition>
 
 	  <Popup 
+	  	v-if="route.meta.header.location"
 	  	@close-popup="closeLocationPopup" 
 	  	:isPopupOpen="globals.state.isOpenLocationPopup"
 	  	class="bg-white pd-semi w-m-33r radius-big"
@@ -97,9 +96,28 @@
 		      <!-- <Footer /> -->
 				</router-view>
 			</Suspense>
+
+			<router-view  
+				name="defaultBottom"
+				v-slot="{ Component, route }" 
+			>
+				<component 
+      		:is="Component" 
+      	/>
+			</router-view>
+
+			<component
+		  	v-if="route.meta.radio?.page"
+        :is="route.meta.radio.page"
+      />
      
 		</section>
 
+		<component
+	  	v-if="route.meta.radio?.player"
+      :is="route.meta.radio.player"
+    />
+
     <BottomNavigation 
       v-if="MOBILE_APP && route.meta.title_hide"
       class="pd-small z-index-2"
@@ -163,13 +181,14 @@
 			return route.meta.header_theme || 'light'
 		}
 	})
+
 	const handleScroll = () => {
 	  scrollOffset.value = event.target.scrollTop
 
 	  if (scrollOffset.value > 50 && !isScrolled) {
 	    isScrolled = true;
 
-	    header.value.$el.classList.add('scrolled');
+	    // header.value.$el.classList.add('scrolled');
 
 	    const firstRect = header.value.$el.getBoundingClientRect();
 	    const invert = -firstRect.top;
@@ -183,7 +202,7 @@
 	    }, 0);
 	  } else if (scrollOffset.value <= 75 && isScrolled) {
 	    isScrolled = false;
-	    header.value.$el.classList.remove('scrolled');
+	    // header.value.$el.classList.remove('scrolled');
 
 	    const firstRect = header.value.$el.getBoundingClientRect();
 	    const invert = firstRect.top;
@@ -195,14 +214,6 @@
 	    }, 0);
 	  }
 	};
-	/////////////////////////////
-	// MOUNTED
-	/////////////////////////////
-	// if (typeof window === 'undefined') {
-	//   show.value = true
-	// } else {
-	// 	show.value = false
-	// }
 
 	onMounted(async () => {
 		 

package/src/modules/globals/views/store/globals.js

@@ -1,5 +1,6 @@
 // Vue modules
 import { reactive, computed } from "vue";
+import { Preferences } from '@capacitor/preferences';
 
 // import i18n from "@/localization";
 
@@ -34,12 +35,63 @@ const actions = {
   },
 
   // Black/White Theme
-  toggleTheme() {
+  async setTheme(isDarkMode) {
     let root = document.querySelector(":root");
+    
+    state.theme.darkmode = isDarkMode;
+    await Preferences.set({
+      key: 'darkmode',
+      value: JSON.stringify(state.theme.darkmode),
+    });
+    
+    if (isDarkMode) {
+      root.classList.add('dark-theme');
+    } else {
+      root.classList.remove('dark-theme');
+    }
+
+    const variableNames = [
+      '--white',
+      '--light',
+      '--grey',
+      '--dark',
+      '--black'
+    ];
+
+    // Проверяем, сохранены ли оригинальные цвета
+    if (!state.theme.originalColors) {
+      // Сохраняем оригинальные цвета
+      state.theme.originalColors = {};
+      variableNames.forEach(variableName => {
+        const currentColor = getComputedStyle(document.documentElement).getPropertyValue(variableName).trim();
+        state.theme.originalColors[variableName] = currentColor;
+      });
+    }
 
-    state.theme.darkmode = !state.theme.darkmode
+    if (isDarkMode) {
+      invertColors(variableNames, state.theme.originalColors);
+    } else {
+      // Восстанавливаем оригинальные цвета
+      variableNames.forEach(variableName => {
+        document.documentElement.style.setProperty(variableName, state.theme.originalColors[variableName]);
+      });
+    }
+  },
 
-    root.classList.toggle('dark-theme');
+  setTheme(isDarkMode) {
+    let root = document.querySelector(":root");
+    state.theme.darkmode = isDarkMode;
+    
+    Preferences.set({
+      key: 'darkmode',
+      value: JSON.stringify(state.theme.darkmode),
+    });
+    
+    if (isDarkMode) {
+      root.classList.add('dark-theme');
+    } else {
+      root.classList.remove('dark-theme');
+    }
 
     const variableNames = [
       '--white',
@@ -53,14 +105,24 @@ const actions = {
     if (!state.theme.originalColors) {
       // Сохраняем оригинальные цвета
       state.theme.originalColors = {};
-
       variableNames.forEach(variableName => {
         const currentColor = getComputedStyle(document.documentElement).getPropertyValue(variableName).trim();
         state.theme.originalColors[variableName] = currentColor;
       });
     }
 
-    invertColors(variableNames, state.theme.originalColors);
+    if (isDarkMode) {
+      invertColors(variableNames, state.theme.originalColors);
+    } else {
+      // Возвращаем оригинальные цвета
+      variableNames.forEach(variableName => {
+        document.documentElement.style.setProperty(variableName, state.theme.originalColors[variableName]);
+      });
+    }
+  },
+
+  toggleTheme() {
+    this.setTheme(!state.theme.darkmode);
   },
 
   add(array, item) {
@@ -72,6 +134,7 @@ const actions = {
       array[existingItemIndex] = item
     }
   },
+
   update(array, item) {
     const existingItemIndex = array.findIndex(i => i._id === item._id);
     if (existingItemIndex === -1) {
@@ -82,6 +145,7 @@ const actions = {
       Object.assign(array[existingItemIndex], item);
     }
   },
+
   delete(array, item) {
     const existingItemIndex = array.findIndex(c => c._id === item._id);
 
@@ -90,7 +154,6 @@ const actions = {
     }
   }, 
 
-
   increment(array, item) {
     console.log(array)
     console.log(item)

package/src/modules/icons/logos/Logotype.vue

@@ -6,10 +6,6 @@
 <path d="M963.646 122.589C960.717 122.589 958.013 122.082 955.534 121.068C953.056 120.016 950.878 118.57 949 116.73C947.16 114.852 945.714 112.674 944.663 110.196C943.649 107.68 943.142 104.976 943.142 102.084C943.142 99.1925 943.649 96.5074 944.663 94.0289C945.714 91.5128 947.16 89.3347 949 87.4945C950.878 85.6544 953.056 84.2273 955.534 83.2134C958.013 82.1619 960.717 81.6361 963.646 81.6361C966.538 81.6361 969.223 82.1619 971.701 83.2134C974.217 84.2273 976.395 85.6544 978.236 87.4945C980.076 89.3347 981.503 91.5128 982.517 94.0289C983.568 96.5074 984.094 99.1925 984.094 102.084C984.094 104.976 983.568 107.68 982.517 110.196C981.503 112.674 980.076 114.852 978.236 116.73C976.395 118.57 974.217 120.016 971.701 121.068C969.223 122.082 966.538 122.589 963.646 122.589ZM963.646 118.983C966.049 118.983 968.265 118.57 970.293 117.744C972.321 116.88 974.086 115.679 975.588 114.139C977.09 112.599 978.236 110.815 979.024 108.788C979.85 106.722 980.264 104.488 980.264 102.084C980.264 99.6807 979.85 97.465 979.024 95.4371C978.236 93.3717 977.09 91.5879 975.588 90.0857C974.086 88.546 972.321 87.3631 970.293 86.5369C968.265 85.6732 966.049 85.2413 963.646 85.2413C961.205 85.2413 958.971 85.6732 956.943 86.5369C954.915 87.3631 953.15 88.546 951.648 90.0857C950.145 91.5879 948.981 93.3717 948.155 95.4371C947.366 97.465 946.972 99.6807 946.972 102.084C946.972 104.488 947.366 106.722 948.155 108.788C948.981 110.815 950.145 112.599 951.648 114.139C953.15 115.679 954.915 116.88 956.943 117.744C958.971 118.57 961.205 118.983 963.646 118.983ZM957.844 114.308C955.403 114.308 954.182 113.05 954.182 110.534V94.4795C954.182 93.09 954.539 92.0198 955.253 91.2687C956.004 90.48 957.093 90.0857 958.52 90.0857H965.28C968.021 90.0857 970.143 90.7805 971.645 92.17C973.147 93.5595 973.898 95.2682 973.898 97.2961C973.898 99.4742 973.166 101.145 971.701 102.309C970.274 103.474 968.284 104.056 965.73 104.056L967.645 103.38C968.922 103.38 969.936 103.68 970.687 104.281C971.438 104.844 972.058 106.065 972.546 107.943L973.11 109.97C973.485 111.473 973.279 112.58 972.49 113.294C971.739 113.97 970.706 114.308 969.392 114.308C968.49 114.308 967.739 114.045 967.138 113.519C966.575 112.994 966.2 112.28 966.012 111.379L964.998 107.267C964.848 106.591 964.566 106.14 964.153 105.915C963.777 105.652 963.346 105.52 962.857 105.52H960.491L961.562 104.844V110.534C961.562 113.05 960.322 114.308 957.844 114.308ZM961.505 100.225H964.209C965.111 100.225 965.787 100.037 966.237 99.6619C966.688 99.2864 966.913 98.6668 966.913 97.803C966.913 96.9393 966.669 96.3197 966.181 95.9441C965.73 95.5686 965.073 95.3808 964.209 95.3808H961.505V100.225Z" :fill="theme === 'light' ? 'rgb(var(--black))' : 'rgb(var(--white))'"/>
 </svg>
 
-
-
-
-
 </template>
 
 <script setup>

package/src/modules/icons/skeletons/SkeletonBlogpost.vue

@@ -14,7 +14,7 @@
     <rect x="15" y="130" rx="3" ry="3" width="70%" height="6" fill="rgba(var(--black),0.05)"></rect>
     
     <!-- Блик с анимацией движения -->
-    <rect x="-25%" y="0" width="25%" height="100%" fill="#fff" mask="url(#myMask)" opacity="0.3">
+    <rect x="-25%" y="0" width="25%" height="100%" fill="rgb(var(--white))" mask="url(#myMask)" opacity="0.3">
       <animate attributeName="x" from="-25%" to="100%" dur="2s" repeatCount="indefinite"></animate>
     </rect>
   </svg>

package/src/modules/icons/skeletons/SkeletonEvent.vue

@@ -1,7 +1,7 @@
 <template>
-  <svg width="100%" height="20rem" xmlns="http://www.w3.org/2000/svg">
+  <svg width="100%" height="16rem" xmlns="http://www.w3.org/2000/svg">
     <!-- Фоновый прямоугольник для всей карточки -->
-    <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" fill="rgb(var(--light))"/>
+    <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" fill="rgb(var(--light))" />
     
     <!-- Имитация шапки карточки -->
     <rect x="15" y="15" rx="4" ry="4" width="40%" height="20" fill="rgba(var(--black),0.05)"></rect>
@@ -14,7 +14,7 @@
     <rect x="15" y="130" rx="3" ry="3" width="70%" height="6" fill="rgba(var(--black),0.05)"></rect>
     
     <!-- Блик с анимацией движения -->
-    <rect x="-25%" y="0" width="25%" height="100%" fill="#fff" mask="url(#myMask)" opacity="0.3">
+    <rect x="-25%" y="0" width="25%" height="100%" fill="rgb(var(--white))" mask="url(#myMask)" opacity="0.3">
       <animate attributeName="x" from="-25%" to="100%" dur="2s" repeatCount="indefinite"></animate>
     </rect>
   </svg>

package/src/modules/icons/skeletons/SkeletonEventShort.vue

@@ -14,7 +14,7 @@
     <circle cx="280" cy="25" r="10" fill="rgba(var(--black),0.025)"></circle>
 
     <!-- Блик с анимацией движения -->
-    <rect x="-25%" y="0" width="25%" height="100%" fill="#fff" opacity="0.3">
+    <rect x="-25%" y="0" width="25%" height="100%" fill="rgb(var(--white))" opacity="0.3">
       <animate attributeName="x" from="-25%" to="100%" dur="2s" repeatCount="indefinite"></animate>
     </rect>
   </svg>

package/src/modules/icons/skeletons/SkeletonOrganization.vue

@@ -14,7 +14,7 @@
     <rect x="15" y="130" rx="3" ry="3" width="70%" height="6" fill="rgba(var(--black),0.05)"></rect>
     
     <!-- Блик с анимацией движения -->
-    <rect x="-25%" y="0" width="25%" height="100%" fill="#fff" mask="url(#myMask)" opacity="0.3">
+    <rect x="-25%" y="0" width="25%" height="100%" fill="rgb(var(--white))" mask="url(#myMask)" opacity="0.3">
       <animate attributeName="x" from="-25%" to="100%" dur="2s" repeatCount="indefinite"></animate>
     </rect>
   </svg>

package/src/modules/users/components/pages/ProfileEdit.vue

@@ -85,6 +85,14 @@
       placeholder="" 
       class="mn-b-semi bg-light pd-medium radius-small" 
     />
+    <h3 class="mn-b-small">Settings</h3>
+    <Checkbox 
+      :label="'Darkmode'"
+      :radio="globals.state.theme.darkmode"
+      @update:radio="event => globals.actions.toggleTheme()"
+      class="mn-b-semi w-100 bg-light t-black pd-medium radius-small"
+    />
+
     <!--  -->
     <h3 class="mn-b-small">Account</h3>
       
@@ -128,8 +136,10 @@
   // Import components
   import Tab           from '@pf/src/components/Tab/Tab.vue'
   import Field         from '@pf/src/components/Field/Field.vue'
+  import Checkbox from '@pf/src/components/Checkbox/Checkbox.vue'
   import Button        from '@pf/src/components/Button/Button.vue'
   import UploadImage   from '@pf/src/components/UploadImage/UploadImage.vue';
+
   import ProfileCompletion from '@pf/src/modules/users/components/sections/ProfileCompletion.vue'
   // Import libs
   import { computed, onMounted, ref, onBeforeMount } from 'vue'
@@ -137,6 +147,7 @@
   // Import state
   import * as auth from '@pf/src/modules/auth/views/store/auth'
   import * as users from '@pf/src/modules/users/store/users'
+  import * as globals from '@pf/src/modules/globals/views/store/globals'
   // Import validation
   import * as inputsValidation from '@pf/src/modules/auth/views/validations/inputs.validation'
   const passswordValidation = ref(null)