@kuankuan/assist-2026 0.1.7 → 0.1.9

package/dist/init.d.ts

@@ -0,0 +1,2 @@
+import "./motion";
+import "./theme";

package/dist/init.js

@@ -0,0 +1,2 @@
+import "./motion";
+import "./theme";

package/dist/motion.d.ts

@@ -0,0 +1,8 @@
+export declare enum Motions {
+    Reduce = "reduce",
+    NoPreference = "no-preference",
+    Auto = "auto"
+}
+export declare const motionValueList: readonly [Motions.Auto, Motions.NoPreference, Motions.Reduce];
+export declare const motionValue: import("vue").Ref<Motions, Motions>;
+export declare const motion: import("vue").ComputedRef<Motions.Reduce | Motions.NoPreference>;

package/dist/motion.js

@@ -0,0 +1,26 @@
+import storageRef from './ref/storageRef';
+import mediaRef from './ref/mediaRef';
+import { computed, watch } from 'vue';
+export var Motions;
+(function (Motions) {
+    Motions["Reduce"] = "reduce";
+    Motions["NoPreference"] = "no-preference";
+    Motions["Auto"] = "auto";
+})(Motions || (Motions = {}));
+export const motionValueList = [Motions.Auto, Motions.NoPreference, Motions.Reduce];
+export const motionValue = storageRef('_k_motion', Motions.Auto, localStorage);
+const matcherRef = mediaRef(window.matchMedia('(prefers-reduced-motion: reduce)'));
+export const motion = computed(() => {
+    const systemMotion = matcherRef.value ? Motions.Reduce : Motions.NoPreference;
+    if (!motionValueList.includes(motionValue.value)) {
+        motionValue.value = Motions.Auto;
+    }
+    if (motionValue.value === Motions.Auto) {
+        return systemMotion;
+    }
+    return motionValue.value;
+});
+function updateDomMotion() {
+    document.documentElement.dataset.motion = motion.value;
+}
+watch(motion, updateDomMotion, { immediate: true });

package/dist/ref/mediaRef.d.ts

@@ -0,0 +1 @@
+export default function mediaRef(mediaQuery: MediaQueryList): import("vue").Ref<boolean, boolean>;

package/dist/ref/mediaRef.js

@@ -0,0 +1,8 @@
+import { ref } from "vue";
+export default function mediaRef(mediaQuery) {
+    const result = ref(mediaQuery.matches);
+    mediaQuery.addEventListener('change', (e) => {
+        result.value = e.matches;
+    });
+    return result;
+}

package/dist/ref/storageRef.d.ts

@@ -1,2 +1,2 @@
 import { type Ref } from 'vue';
-export default function storageRef(key: string, defaultValue: string, storage?: Storage): Ref<string, string>;
+export default function storageRef<T extends string = string>(key: string, defaultValue: string, storage?: Storage): Ref<T>;

package/dist/theme.d.ts

@@ -1,3 +1,8 @@
-export declare const themeValue: import("vue").Ref<string, string>;
-export declare const themeValueList: string[];
-export declare const theme: import("vue").ComputedRef<string>;
+export declare enum Theme {
+    Light = "light",
+    Dark = "dark",
+    Auto = "auto"
+}
+export declare const themeValueList: readonly [Theme.Auto, Theme.Light, Theme.Dark];
+export declare const themeValue: import("vue").Ref<Theme, Theme>;
+export declare const theme: import("vue").ComputedRef<Theme.Light | Theme.Dark>;

package/dist/theme.js

@@ -1,11 +1,22 @@
 import storageRef from './ref/storageRef';
+import mediaRef from './ref/mediaRef';
 import { computed, watch } from 'vue';
+export var Theme;
+(function (Theme) {
+    Theme["Light"] = "light";
+    Theme["Dark"] = "dark";
+    Theme["Auto"] = "auto";
+})(Theme || (Theme = {}));
+export const themeValueList = [Theme.Auto, Theme.Light, Theme.Dark];
 export const themeValue = storageRef('theme', 'auto', localStorage);
-export const themeValueList = ['auto', 'light', 'dark'];
-const matcher = window.matchMedia('(prefers-color-scheme: dark)');
+const matcherRef = mediaRef(window.matchMedia('(prefers-color-scheme: dark)'));
 export const theme = computed(() => {
-    if (themeValue.value === 'auto') {
-        return matcher.matches ? 'dark' : 'light';
+    const systemTheme = matcherRef.value ? Theme.Dark : Theme.Light;
+    if (!themeValueList.includes(themeValue.value)) {
+        themeValue.value = Theme.Auto;
+    }
+    if (themeValue.value === Theme.Auto) {
+        return systemTheme;
     }
     return themeValue.value;
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kuankuan/assist-2026",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "A toolset from kuankuan",
   "main": "dist/index.js",
   "scripts": {

package/src/init.ts

@@ -0,0 +1,2 @@
+import "./motion"
+import "./theme"

package/src/motion.ts

@@ -0,0 +1,29 @@
+import storageRef from './ref/storageRef';
+import mediaRef from './ref/mediaRef';
+import { computed, watch } from 'vue';
+
+export enum Motions {
+  Reduce = 'reduce',
+  NoPreference = 'no-preference',
+  Auto = 'auto',
+}
+
+export const motionValueList = [Motions.Auto, Motions.NoPreference, Motions.Reduce] as const;
+
+export const motionValue = storageRef<Motions>('_k_motion', Motions.Auto, localStorage);
+const matcherRef = mediaRef(window.matchMedia('(prefers-reduced-motion: reduce)'));
+
+export const motion = computed(() => {
+  const systemMotion = matcherRef.value ? Motions.Reduce : Motions.NoPreference;
+    if (!motionValueList.includes(motionValue.value)) {
+      motionValue.value = Motions.Auto;
+    }
+  if (motionValue.value === Motions.Auto) {
+    return systemMotion;
+  }
+  return motionValue.value;
+});
+function updateDomMotion() {
+  document.documentElement.dataset.motion = motion.value;
+}
+watch(motion, updateDomMotion, { immediate: true });

package/src/ref/mediaRef.ts

@@ -0,0 +1,9 @@
+import { ref } from "vue";
+
+export default function mediaRef(mediaQuery: MediaQueryList) {
+  const result = ref<boolean>(mediaQuery.matches);
+  mediaQuery.addEventListener('change', (e) => {
+    result.value = e.matches;
+  });
+  return result;
+}

package/src/ref/storageRef.ts

@@ -31,7 +31,7 @@ function defineRef(storage: Storage, key: string, refValue: Ref<string>) {
   return refValue;
 }
 
-export default function storageRef(
+export default function storageRef<T extends string=string>(
   key: string,
   defaultValue: string,
   storage: Storage = localStorage
@@ -39,7 +39,7 @@ export default function storageRef(
   return (
     getDefined(storage, key) ??
     defineRef(storage, key, ref<string>(storage.getItem(key) ?? defaultValue))
-  );
+  ) as Ref<T>;
 }
 window.addEventListener('storage', (e) => {
   if (e.key === null || e.newValue === null || e.storageArea === null) return;

package/src/theme.ts

@@ -1,13 +1,25 @@
 import storageRef from './ref/storageRef';
+import mediaRef from './ref/mediaRef';
 import { computed, watch } from 'vue';
 
-export const themeValue = storageRef('theme', 'auto', localStorage);
-export const themeValueList = ['auto', 'light', 'dark'];
-const matcher = window.matchMedia('(prefers-color-scheme: dark)');
+export enum Theme {
+  Light = 'light',
+  Dark = 'dark',
+  Auto = 'auto',
+}
+
+export const themeValueList = [Theme.Auto, Theme.Light, Theme.Dark] as const;
+
+export const themeValue = storageRef<Theme>('theme', 'auto', localStorage);
+const matcherRef = mediaRef(window.matchMedia('(prefers-color-scheme: dark)'));
 
 export const theme = computed(() => {
-  if (themeValue.value === 'auto') {
-    return matcher.matches ? 'dark' : 'light';
+  const systemTheme = matcherRef.value ? Theme.Dark : Theme.Light;
+  if (!themeValueList.includes(themeValue.value)) {
+    themeValue.value = Theme.Auto;
+  }
+  if (themeValue.value === Theme.Auto) {
+    return systemTheme;
   }
   return themeValue.value;
 });

package/styles/motion.scss

@@ -0,0 +1,20 @@
+@mixin use($anythingElse: '') {
+  @include select('no-preference', $anythingElse) {
+    @content;
+  }
+}
+
+@mixin transition($transition...) {
+  @include use {
+    transition: $transition;
+    @content;
+  }
+}
+@function selecter($motion){
+  @return "[data-motion='#{$motion}']";
+}
+@mixin select($motion, $anythingElse: '') {
+  html#{selecter($motion)}#{$anythingElse} & {
+    @content;
+  }
+}

package/styles/theme.scss

@@ -22,15 +22,23 @@ $defaultTheme: (
 );
 
 $curTheme: 'light';
-@mixin use($themeConfig: $defaultTheme) {
+@mixin use($anythingElse: '', $themeConfig: $defaultTheme) {
   @each $key, $value in $themeConfig {
     $curTheme: $key !global;
 
-    html[data-theme='#{$key}'] & {
+    @include select($key, $anythingElse) {
       @content;
     }
   }
 }
+@function selecter($theme){
+  @return "[data-theme='#{$theme}']";
+}
+@mixin select($theme, $anythingElse: '') {
+  html#{selecter($theme)}#{$anythingElse} & {
+    @content;
+  }
+}
 @function get($paramName, $curTheme: $curTheme, $themeConfig: $defaultTheme) {
   @if map.has-key($map: map.get($themeConfig, $curTheme), $key: $paramName) == false {
     @error "Theme `#{$curTheme}` param `#{$paramName}` not found.";