@scalar/use-hooks 0.3.3 → 0.3.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -51,7 +51,7 @@ function useColorMode(opts = {}) {
|
|
|
51
51
|
const savedColorMode = colorModeSchema.parse(
|
|
52
52
|
typeof window !== "undefined" ? window?.localStorage?.getItem("colorMode") : "system"
|
|
53
53
|
);
|
|
54
|
-
colorMode.value = savedColorMode ?? initialColorMode;
|
|
54
|
+
colorMode.value = overrideColorMode ?? savedColorMode ?? initialColorMode;
|
|
55
55
|
watch(colorMode, applyColorMode, { immediate: true });
|
|
56
56
|
const handleChange = () => colorMode.value === "system" && applyColorMode("system");
|
|
57
57
|
const mediaQuery = ref(null);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/useColorMode/useColorMode.ts"],
|
|
4
|
-
"sourcesContent": ["import { computed, onMounted, onUnmounted, ref, watch } from 'vue'\nimport { z } from 'zod'\n\nconst colorMode = ref<ColorMode>('dark')\n\nconst colorModeSchema = z.enum(['dark', 'light', 'system']).optional().catch(undefined)\n\n/** Possible color modes */\ntype ColorMode = 'light' | 'dark' | 'system'\n\n/** Specific dark/light mode */\ntype DarkLightMode = 'light' | 'dark'\n\n/**\n * A composable hook that provides color mode (dark/light) functionality.\n */\nexport function useColorMode(\n opts: {\n /** The initial color mode to use */\n initialColorMode?: ColorMode\n /** Override the color mode */\n overrideColorMode?: ColorMode\n } = {},\n) {\n const { initialColorMode = 'system', overrideColorMode } = opts\n\n /** Toggles the color mode between light and dark. */\n function toggleColorMode() {\n // Update state\n colorMode.value = darkLightMode.value === 'dark' ? 'light' : 'dark'\n\n // Store in local storage\n if (typeof window === 'undefined') {\n return\n }\n window?.localStorage?.setItem('colorMode', colorMode.value)\n }\n\n /** Sets the color mode to the specified value. */\n function setColorMode(value: ColorMode) {\n colorMode.value = value\n if (typeof window === 'undefined') {\n return\n }\n window?.localStorage?.setItem('colorMode', colorMode.value)\n }\n\n /** Gets the system mode preference. */\n function getSystemModePreference(): DarkLightMode {\n if (typeof window === 'undefined') {\n return 'light'\n }\n if (typeof window?.matchMedia !== 'function') {\n return 'dark'\n }\n\n return window?.matchMedia('(prefers-color-scheme: dark)')?.matches ? 'dark' : 'light'\n }\n\n /** Writable computed ref for dark/light mode with system preference applied */\n const darkLightMode = computed<DarkLightMode>({\n get: () => (colorMode.value === 'system' ? getSystemModePreference() : colorMode.value),\n set: setColorMode,\n })\n\n /** Writable computed ref for whether the current color mode is dark */\n const isDarkMode = computed<boolean>({\n get: () => darkLightMode.value === 'dark',\n set: (value) => setColorMode(value ? 'dark' : 'light'),\n })\n\n /** Applies the appropriate color mode class to the body. */\n function applyColorMode(mode: ColorMode): void {\n if (typeof document === 'undefined' || typeof window === 'undefined') {\n return\n }\n\n const classMode = overrideColorMode ?? (mode === 'system' ? getSystemModePreference() : mode)\n\n if (classMode === 'dark') {\n document.body.classList.add('dark-mode')\n document.body.classList.remove('light-mode')\n } else {\n document.body.classList.add('light-mode')\n document.body.classList.remove('dark-mode')\n }\n }\n\n // Priority of initial values is: LocalStorage -> App Config -> initial / Fallback\n const savedColorMode = colorModeSchema.parse(\n typeof window !== 'undefined' ? window?.localStorage?.getItem('colorMode') : 'system',\n )\n colorMode.value = savedColorMode ?? initialColorMode\n\n // Watch for colorMode changes and update the body class\n watch(colorMode, applyColorMode, { immediate: true })\n\n const handleChange = () => colorMode.value === 'system' && applyColorMode('system')\n\n const mediaQuery = ref<MediaQueryList | null>(null)\n // Listen to system preference changes\n onMounted(() => {\n if (typeof window !== 'undefined' && typeof window?.matchMedia === 'function') {\n mediaQuery.value = window.matchMedia('(prefers-color-scheme: dark)')\n mediaQuery.value?.addEventListener('change', handleChange)\n }\n })\n\n onUnmounted(() => {\n mediaQuery.value?.removeEventListener('change', handleChange)\n })\n\n return {\n /** The current color mode (writable). */\n colorMode: computed({\n get: () => colorMode.value,\n set: setColorMode,\n }),\n /** The computed dark/light mode (writable). */\n darkLightMode,\n /** Whether the current color mode is dark (writable). */\n isDarkMode,\n /** Toggles the color mode between light and dark. */\n toggleColorMode,\n /** Sets the color mode to the specified value. */\n setColorMode,\n /** Gets the system mode preference. */\n getSystemModePreference,\n }\n}\n"],
|
|
5
|
-
"mappings": "AAAA,SAAS,UAAU,WAAW,aAAa,KAAK,aAAa;AAC7D,SAAS,SAAS;AAElB,MAAM,YAAY,IAAe,MAAM;AAEvC,MAAM,kBAAkB,EAAE,KAAK,CAAC,QAAQ,SAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,MAAM,MAAS;AAW/E,SAAS,aACd,OAKI,CAAC,GACL;AACA,QAAM,EAAE,mBAAmB,UAAU,kBAAkB,IAAI;AAG3D,WAAS,kBAAkB;AAEzB,cAAU,QAAQ,cAAc,UAAU,SAAS,UAAU;AAG7D,QAAI,OAAO,WAAW,aAAa;AACjC;AAAA,IACF;AACA,YAAQ,cAAc,QAAQ,aAAa,UAAU,KAAK;AAAA,EAC5D;AAGA,WAAS,aAAa,OAAkB;AACtC,cAAU,QAAQ;AAClB,QAAI,OAAO,WAAW,aAAa;AACjC;AAAA,IACF;AACA,YAAQ,cAAc,QAAQ,aAAa,UAAU,KAAK;AAAA,EAC5D;AAGA,WAAS,0BAAyC;AAChD,QAAI,OAAO,WAAW,aAAa;AACjC,aAAO;AAAA,IACT;AACA,QAAI,OAAO,QAAQ,eAAe,YAAY;AAC5C,aAAO;AAAA,IACT;AAEA,WAAO,QAAQ,WAAW,8BAA8B,GAAG,UAAU,SAAS;AAAA,EAChF;AAGA,QAAM,gBAAgB,SAAwB;AAAA,IAC5C,KAAK,MAAO,UAAU,UAAU,WAAW,wBAAwB,IAAI,UAAU;AAAA,IACjF,KAAK;AAAA,EACP,CAAC;AAGD,QAAM,aAAa,SAAkB;AAAA,IACnC,KAAK,MAAM,cAAc,UAAU;AAAA,IACnC,KAAK,CAAC,UAAU,aAAa,QAAQ,SAAS,OAAO;AAAA,EACvD,CAAC;AAGD,WAAS,eAAe,MAAuB;AAC7C,QAAI,OAAO,aAAa,eAAe,OAAO,WAAW,aAAa;AACpE;AAAA,IACF;AAEA,UAAM,YAAY,sBAAsB,SAAS,WAAW,wBAAwB,IAAI;AAExF,QAAI,cAAc,QAAQ;AACxB,eAAS,KAAK,UAAU,IAAI,WAAW;AACvC,eAAS,KAAK,UAAU,OAAO,YAAY;AAAA,IAC7C,OAAO;AACL,eAAS,KAAK,UAAU,IAAI,YAAY;AACxC,eAAS,KAAK,UAAU,OAAO,WAAW;AAAA,IAC5C;AAAA,EACF;AAGA,QAAM,iBAAiB,gBAAgB;AAAA,IACrC,OAAO,WAAW,cAAc,QAAQ,cAAc,QAAQ,WAAW,IAAI;AAAA,EAC/E;AACA,YAAU,QAAQ,kBAAkB;
|
|
4
|
+
"sourcesContent": ["import { computed, onMounted, onUnmounted, ref, watch } from 'vue'\nimport { z } from 'zod'\n\nconst colorMode = ref<ColorMode>('dark')\n\nconst colorModeSchema = z.enum(['dark', 'light', 'system']).optional().catch(undefined)\n\n/** Possible color modes */\ntype ColorMode = 'light' | 'dark' | 'system'\n\n/** Specific dark/light mode */\ntype DarkLightMode = 'light' | 'dark'\n\n/**\n * A composable hook that provides color mode (dark/light) functionality.\n */\nexport function useColorMode(\n opts: {\n /** The initial color mode to use */\n initialColorMode?: ColorMode\n /** Override the color mode */\n overrideColorMode?: ColorMode\n } = {},\n) {\n const { initialColorMode = 'system', overrideColorMode } = opts\n\n /** Toggles the color mode between light and dark. */\n function toggleColorMode() {\n // Update state\n colorMode.value = darkLightMode.value === 'dark' ? 'light' : 'dark'\n\n // Store in local storage\n if (typeof window === 'undefined') {\n return\n }\n window?.localStorage?.setItem('colorMode', colorMode.value)\n }\n\n /** Sets the color mode to the specified value. */\n function setColorMode(value: ColorMode) {\n colorMode.value = value\n if (typeof window === 'undefined') {\n return\n }\n window?.localStorage?.setItem('colorMode', colorMode.value)\n }\n\n /** Gets the system mode preference. */\n function getSystemModePreference(): DarkLightMode {\n if (typeof window === 'undefined') {\n return 'light'\n }\n if (typeof window?.matchMedia !== 'function') {\n return 'dark'\n }\n\n return window?.matchMedia('(prefers-color-scheme: dark)')?.matches ? 'dark' : 'light'\n }\n\n /** Writable computed ref for dark/light mode with system preference applied */\n const darkLightMode = computed<DarkLightMode>({\n get: () => (colorMode.value === 'system' ? getSystemModePreference() : colorMode.value),\n set: setColorMode,\n })\n\n /** Writable computed ref for whether the current color mode is dark */\n const isDarkMode = computed<boolean>({\n get: () => darkLightMode.value === 'dark',\n set: (value) => setColorMode(value ? 'dark' : 'light'),\n })\n\n /** Applies the appropriate color mode class to the body. */\n function applyColorMode(mode: ColorMode): void {\n if (typeof document === 'undefined' || typeof window === 'undefined') {\n return\n }\n\n const classMode = overrideColorMode ?? (mode === 'system' ? getSystemModePreference() : mode)\n\n if (classMode === 'dark') {\n document.body.classList.add('dark-mode')\n document.body.classList.remove('light-mode')\n } else {\n document.body.classList.add('light-mode')\n document.body.classList.remove('dark-mode')\n }\n }\n\n // Priority of initial values is: forceDarkModeState -> LocalStorage -> App Config -> initial / Fallback\n const savedColorMode = colorModeSchema.parse(\n typeof window !== 'undefined' ? window?.localStorage?.getItem('colorMode') : 'system',\n )\n colorMode.value = overrideColorMode ?? savedColorMode ?? initialColorMode\n\n // Watch for colorMode changes and update the body class\n watch(colorMode, applyColorMode, { immediate: true })\n\n const handleChange = () => colorMode.value === 'system' && applyColorMode('system')\n\n const mediaQuery = ref<MediaQueryList | null>(null)\n // Listen to system preference changes\n onMounted(() => {\n if (typeof window !== 'undefined' && typeof window?.matchMedia === 'function') {\n mediaQuery.value = window.matchMedia('(prefers-color-scheme: dark)')\n mediaQuery.value?.addEventListener('change', handleChange)\n }\n })\n\n onUnmounted(() => {\n mediaQuery.value?.removeEventListener('change', handleChange)\n })\n\n return {\n /** The current color mode (writable). */\n colorMode: computed({\n get: () => colorMode.value,\n set: setColorMode,\n }),\n /** The computed dark/light mode (writable). */\n darkLightMode,\n /** Whether the current color mode is dark (writable). */\n isDarkMode,\n /** Toggles the color mode between light and dark. */\n toggleColorMode,\n /** Sets the color mode to the specified value. */\n setColorMode,\n /** Gets the system mode preference. */\n getSystemModePreference,\n }\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,UAAU,WAAW,aAAa,KAAK,aAAa;AAC7D,SAAS,SAAS;AAElB,MAAM,YAAY,IAAe,MAAM;AAEvC,MAAM,kBAAkB,EAAE,KAAK,CAAC,QAAQ,SAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,MAAM,MAAS;AAW/E,SAAS,aACd,OAKI,CAAC,GACL;AACA,QAAM,EAAE,mBAAmB,UAAU,kBAAkB,IAAI;AAG3D,WAAS,kBAAkB;AAEzB,cAAU,QAAQ,cAAc,UAAU,SAAS,UAAU;AAG7D,QAAI,OAAO,WAAW,aAAa;AACjC;AAAA,IACF;AACA,YAAQ,cAAc,QAAQ,aAAa,UAAU,KAAK;AAAA,EAC5D;AAGA,WAAS,aAAa,OAAkB;AACtC,cAAU,QAAQ;AAClB,QAAI,OAAO,WAAW,aAAa;AACjC;AAAA,IACF;AACA,YAAQ,cAAc,QAAQ,aAAa,UAAU,KAAK;AAAA,EAC5D;AAGA,WAAS,0BAAyC;AAChD,QAAI,OAAO,WAAW,aAAa;AACjC,aAAO;AAAA,IACT;AACA,QAAI,OAAO,QAAQ,eAAe,YAAY;AAC5C,aAAO;AAAA,IACT;AAEA,WAAO,QAAQ,WAAW,8BAA8B,GAAG,UAAU,SAAS;AAAA,EAChF;AAGA,QAAM,gBAAgB,SAAwB;AAAA,IAC5C,KAAK,MAAO,UAAU,UAAU,WAAW,wBAAwB,IAAI,UAAU;AAAA,IACjF,KAAK;AAAA,EACP,CAAC;AAGD,QAAM,aAAa,SAAkB;AAAA,IACnC,KAAK,MAAM,cAAc,UAAU;AAAA,IACnC,KAAK,CAAC,UAAU,aAAa,QAAQ,SAAS,OAAO;AAAA,EACvD,CAAC;AAGD,WAAS,eAAe,MAAuB;AAC7C,QAAI,OAAO,aAAa,eAAe,OAAO,WAAW,aAAa;AACpE;AAAA,IACF;AAEA,UAAM,YAAY,sBAAsB,SAAS,WAAW,wBAAwB,IAAI;AAExF,QAAI,cAAc,QAAQ;AACxB,eAAS,KAAK,UAAU,IAAI,WAAW;AACvC,eAAS,KAAK,UAAU,OAAO,YAAY;AAAA,IAC7C,OAAO;AACL,eAAS,KAAK,UAAU,IAAI,YAAY;AACxC,eAAS,KAAK,UAAU,OAAO,WAAW;AAAA,IAC5C;AAAA,EACF;AAGA,QAAM,iBAAiB,gBAAgB;AAAA,IACrC,OAAO,WAAW,cAAc,QAAQ,cAAc,QAAQ,WAAW,IAAI;AAAA,EAC/E;AACA,YAAU,QAAQ,qBAAqB,kBAAkB;AAGzD,QAAM,WAAW,gBAAgB,EAAE,WAAW,KAAK,CAAC;AAEpD,QAAM,eAAe,MAAM,UAAU,UAAU,YAAY,eAAe,QAAQ;AAElF,QAAM,aAAa,IAA2B,IAAI;AAElD,YAAU,MAAM;AACd,QAAI,OAAO,WAAW,eAAe,OAAO,QAAQ,eAAe,YAAY;AAC7E,iBAAW,QAAQ,OAAO,WAAW,8BAA8B;AACnE,iBAAW,OAAO,iBAAiB,UAAU,YAAY;AAAA,IAC3D;AAAA,EACF,CAAC;AAED,cAAY,MAAM;AAChB,eAAW,OAAO,oBAAoB,UAAU,YAAY;AAAA,EAC9D,CAAC;AAED,SAAO;AAAA;AAAA,IAEL,WAAW,SAAS;AAAA,MAClB,KAAK,MAAM,UAAU;AAAA,MACrB,KAAK;AAAA,IACP,CAAC;AAAA;AAAA,IAED;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
"url": "git+https://github.com/scalar/scalar.git",
|
|
11
11
|
"directory": "packages/use-hooks"
|
|
12
12
|
},
|
|
13
|
-
"version": "0.3.
|
|
13
|
+
"version": "0.3.4",
|
|
14
14
|
"engines": {
|
|
15
15
|
"node": ">=20"
|
|
16
16
|
},
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"@vue/test-utils": "2.4.6",
|
|
54
54
|
"jsdom": "26.1.0",
|
|
55
55
|
"vite": "7.1.11",
|
|
56
|
-
"@scalar/build-tooling": "0.
|
|
56
|
+
"@scalar/build-tooling": "0.4.1"
|
|
57
57
|
},
|
|
58
58
|
"scripts": {
|
|
59
59
|
"build": "scalar-build-esbuild",
|