@neatui/vue 2.9.1 → 2.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/vue",
-  "version": "2.9.1",
+  "version": "2.10.0",
   "description": "basic component ui",
   "main": "./src/index.ts",
   "license": "MIT",

package/src/components/loader/LayerLoader/LayerLoader.vue

@@ -75,13 +75,13 @@
 <script setup lang="ts">
   import { nextTick, reactive, ref, watch, onMounted } from 'vue';
   import LayerLoader from './LayerLoader.vue';
-  import { useBaseStore, useWorksStore, storeToRefs } from '@/store';
+  import { useBasicStore, useWorksStore, storeToRefs } from '@/store';
   import { deepcopy } from '@fekit/utils';
   import scrollto from '@fekit/scrollto';
 
   // 事件定义
   const store: any = useWorksStore();
-  const base: any = useBaseStore();
+  const base: any = useBasicStore();
   const { word } = base;
 
   // 类型定义

package/src/index.ts

@@ -1,5 +1,6 @@
 // 数据
-export * from './store/myui';
+export * from './store/frame';
+export * from './utils/theme';
 
 // 组件
 export * from './components/basic';

package/src/store/{myui.ts → frame.ts}

@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia';
 
 // 基础数据
-export const useMyuiStore = defineStore('myui', {
+export const useFrameStore = defineStore('frame', {
   state: () => {
     return {
       full: localStorage.getItem('neatui_full') || 0,
@@ -10,7 +10,7 @@ export const useMyuiStore = defineStore('myui', {
       // 主题
       theme: localStorage.getItem('neatui_theme') || document?.documentElement?.getAttribute('theme') || 'auto',
       // 侧边
-      side: 1
+      side: 1,
     };
   },
   getters: {},
@@ -45,6 +45,6 @@ export const useMyuiStore = defineStore('myui', {
         document.documentElement.setAttribute('size', this.size);
         then(this.size);
       }
-    }
-  }
+    },
+  },
 });

package/src/utils/theme.ts

@@ -0,0 +1,14 @@
+// 主题
+export const theme = (then = (_theme: any) => {}) => {
+  // 自动设置主题
+  const auto = (scheme: any) => {
+    const _theme = window.localStorage.getItem('theme') || (scheme.matches ? 'dark' : 'light');
+    document.documentElement.setAttribute('theme', _theme);
+    then(_theme);
+  };
+  // 监听系统主题
+  const scheme: any = window.matchMedia('(prefers-color-scheme: dark)');
+  auto(scheme);
+  // 监控主题事件
+  scheme.addListener(auto);
+};