Merge branch 'main' of github.com:beclab/ui

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytetrade/ui",
-  "version": "0.1.30",
+  "version": "0.1.37",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

packages/Menu/src/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="bt-menu-container q-pa-md">
-		<Theme :show-theme-toggle="props.showThemeToggle"></Theme>
+		<Theme v-if="props.showThemeToggle" :follow-system="props.followSystem"/>
 		<div class="q-pb-lg" v-if="$slots.header">
 			<slot name="header"></slot>
 		</div>
@@ -143,10 +143,12 @@ interface Props {
 
 	sameActiveable: boolean;
 	showThemeToggle: boolean;
+	followSystem?:boolean;
 }
 const props = withDefaults(defineProps<Props>(), {
 	sameActiveable: false,
-	showThemeToggle: false
+	showThemeToggle: true,
+	followSystem: true
 });
 
 const link = ref(props.defaultActive || props.modelValue);

packages/global.ts

@@ -0,0 +1,7 @@
+try {
+	if (navigator.platform.indexOf('Win') !== -1) {
+		document.body.classList.add('olares-windows');
+	}
+} catch (error) {
+	//
+}

packages/theme/src/IndexPage.vue

@@ -7,16 +7,18 @@
 </template>
 
 <script setup lang="ts">
-import { ref, defineProps, onMounted } from 'vue';
+import { ref, defineProps, onMounted, watch } from 'vue';
 import { useQuasar } from 'quasar';
 import { themeModeName, ThemeDefinedMode } from '../types';
 
 interface Props {
-	showThemeToggle: boolean;
+	showThemeToggle?: boolean;
+	followSystem?:boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
-	showToggle: false
+	showThemeToggle: false,
+	followSystem: true
 });
 
 const $q = useQuasar();
@@ -46,24 +48,26 @@ function getCookie(name: string) {
 	return '';
 }
 
-let themeValue = '';
-if ($q.cookies) {
-	themeValue = $q.cookies.get(themeModeName);
-} else {
-	themeValue = getCookie(themeModeName);
-}
-
-if (themeValue) {
-	const theme = Number(themeValue);
-	if (theme == ThemeDefinedMode.AUTO) {
-		$q.dark.set('auto');
+function setTheme() {
+	let themeValue = '';
+	if ($q.cookies) {
+		themeValue = $q.cookies.get(themeModeName);
 	} else {
-		$q.dark.set(theme == ThemeDefinedMode.DARK);
+		themeValue = getCookie(themeModeName);
+	}
+
+	if (themeValue) {
+		const theme = Number(themeValue);
+		if (theme == ThemeDefinedMode.AUTO) {
+			$q.dark.set('auto');
+		} else {
+			$q.dark.set(theme == ThemeDefinedMode.DARK);
+		}
 	}
 }
 
 const message = (event: any) => {
-	if (event.data.message === 'theme_apps_update') {
+	if (props.followSystem && event.data.message === 'theme_apps_update') {
 		if (event.data.info.theme.toString() === '1') {
 			$q.dark.set(false);
 		} else {
@@ -72,9 +76,17 @@ const message = (event: any) => {
 	}
 };
 
+setTheme();
+
 onMounted(() => {
 	window && window.addEventListener('message', message);
 });
+
+watch(()=> props.followSystem, (newValue) => {
+	if(newValue) {
+		setTheme();
+	}
+})
 </script>
 <script lang="ts">
 import { defineComponent } from 'vue';

packages/utils/useColor.ts

@@ -1,20 +1,22 @@
-import { useQuasar, colors, Dark } from "quasar";
-import { ref, watchEffect } from "vue";
+import { useQuasar, colors, Dark } from 'quasar';
+import { ref, watchEffect } from 'vue';
 
 const { getPaletteColor } = colors;
 
 function useColor(variable: string) {
-	const $q = useQuasar();
-	const dark = $q?.dark || Dark;
-	const color = ref(getPaletteColor(variable));
+  const $q = useQuasar();
+  const dark = $q?.dark || Dark;
+  const color = ref();
+  try {
+    color.value = getPaletteColor(variable);
 
-	watchEffect(() => {
-		color.value = dark.isActive
-			? getPaletteColor(variable)
-			: getPaletteColor(variable);
-	});
-
-	return { color };
+    watchEffect(() => {
+      color.value = dark.isActive ? getPaletteColor(variable) : getPaletteColor(variable);
+    });
+    return { color };
+  } catch (error) {
+    return { color };
+  }
 }
 
 export default useColor;

src/styles/global.scss

@@ -0,0 +1,17 @@
+body.olares-windows {
+    ::-webkit-scrollbar {
+        width: 6px;
+        height: 8px;
+        background-color: rgba(255, 255, 255, 0);
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background-color: #bcbdbe;
+        border-radius: 999px;
+    }
+    ::-webkit-scrollbar-track {
+        background: rgba(255, 255, 255, 0);
+    }
+}
+
+

src/styles/quasar.scss

@@ -4,6 +4,7 @@
 @import "./variables-text.sass";
 @import "./variables-bg.sass";
 @import "./mobile-font-text.sass";
+@import "./global.scss";
 
 .material-symbols-rounded {
 	font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 20;