@witchcraft/ui 0.3.4 → 0.3.5

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "witchcraftUi",
   "configKey": "witchcraftUi",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/composables/useDarkMode.d.ts

@@ -10,13 +10,56 @@ import { type Ref } from "vue";
  *
  * Note that this should only be called once at the root of the app.
  */
-export declare const useDarkMode: ({ useLocalStorage, darkModeOrder, isClientSide }?: DarkModeOptions) => DarkModeState & DarkModeCommands;
+export declare const useDarkMode: ({ useLocalStorage, darkModeOrder, isClientSide, useViewTransition }?: DarkModeOptions) => DarkModeState & DarkModeCommands;
 export declare const defaultDarkModeOrder: readonly ["system", "dark", "light"];
 export type DarkModeOptions = {
     useLocalStorage?: boolean | string;
     darkModeOrder?: readonly ("system" | "dark" | "light")[];
     /** True by default, should be passed import.meta.client if using nuxt, or false when running server side. */
     isClientSide?: boolean;
+    /**
+     * Whether to use the view transition to animate the dark mode switch (you just need to add the css).
+     *
+     * Note that the transitition is NOT triggered if visually the mode does not change (e.g. system mode is dark and the user switches from system to dark, visually nothing changes so transitioning is skipped).
+     *
+     * There is an example in storybook. But basically:
+     *
+     * ```css
+     *
+     * #root { // the dark mode switcher works on the WRoot component not the html root
+     *		view-transition-name: wroot;
+     *		height: 100dvh;
+     *		padding: 0;
+     *	}
+     *
+     * ::view-transition-new(wroot) {
+     * 	animation: grow var(--story-anim-length) ease-in-out;
+     * 	animation-fill-mode: both;
+     * 	z-index: 2;
+     * 	mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle cx="20" cy="20" r="20" fill="white"/></svg>') center / 0 no-repeat;
+     * }
+     *
+     * ::view-transition-old(wroot) {
+     * 	animation: none;
+     * 	animation-fill-mode: both;
+     * 	z-index: 1;
+     * }
+     *
+     * @keyframes grow {
+     * 	from {
+     * 		mask-size: 0dvw;
+     * 	}
+     * 	to {
+     * 		mask-size: 300dvw;
+     * 	}
+     * }
+     * ```
+     *
+     * See https://theme-toggle.rdsx.dev/ for more ideas.
+     *
+     * @default true
+     */
+    useViewTransition?: boolean;
 };
 export interface DarkModeCommands {
     setDarkMode: (value: "dark" | "light" | "system") => void;

package/dist/runtime/composables/useDarkMode.js

@@ -1,12 +1,12 @@
-import { computed, onMounted, provide, ref, watch } from "vue";
+import { computed, nextTick, onMounted, provide, ref, watch } from "vue";
 import { darkModeCommandsInjectionKey, darkModeStateInjectionKey, isDarkModeInjectionKey, manualDarkModeInjectionKey } from "../injectionKeys.js";
 const defaultLocalStorageKey = "prefersColorSchemeDark";
 const defaultOrder = ["system", "dark", "light"];
 export const useDarkMode = ({
   useLocalStorage = true,
   darkModeOrder = defaultOrder,
-  /** True by default, should be passed import.meta.client if using nuxt, or false when running server side. */
-  isClientSide = true
+  isClientSide = true,
+  useViewTransition = true
 } = {}) => {
   const systemDarkMode = ref(false);
   const manualDarkMode = ref(void 0);
@@ -22,13 +22,30 @@ export const useDarkMode = ({
   function setDarkMode(value) {
     manualDarkMode.value = value === "dark" ? true : value === "light" ? false : void 0;
   }
+  function getNextValue() {
+    const index = darkModeOrder.indexOf(darkModeState.value);
+    return index === 2 ? darkModeOrder[0] : darkModeOrder[index + 1];
+  }
+  function _cycleDarkMode() {
+    setDarkMode(getNextValue());
+  }
   function cycleDarkMode() {
+    if (!useViewTransition) {
+      _cycleDarkMode();
+      return;
+    }
+    const nextValue = getNextValue();
     const index = darkModeOrder.indexOf(darkModeState.value);
-    if (index === 2) {
-      setDarkMode(darkModeOrder[0]);
-    } else {
-      setDarkMode(darkModeOrder[index + 1]);
+    const systemDarkModeName = systemDarkMode.value ? "dark" : "light";
+    if (nextValue === "system" && systemDarkModeName === darkModeOrder[index]) {
+      _cycleDarkMode();
+      return;
     }
+    if (!document.startViewTransition) _cycleDarkMode();
+    document.startViewTransition(async () => {
+      _cycleDarkMode();
+      await nextTick();
+    });
   }
   onMounted(() => {
     window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", ({ matches }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@witchcraft/ui",
-	"version": "0.3.4",
+	"version": "0.3.5",
 	"description": "Vue component library.",
 	"type": "module",
 	"main": "./dist/runtime/main.lib.js",

package/src/runtime/components/LibDarkModeSwitcher/LibDarkModeSwitcher.stories.ts

@@ -19,6 +19,7 @@ const meta: Meta<typeof LibDarkModeSwitcher> = {
 export default meta
 type Story = StoryObj<typeof LibDarkModeSwitcher>
 
+
 export const Primary: Story = {
 	render: args => ({
 		components,
@@ -35,10 +36,15 @@ export const Primary: Story = {
 				@update:darkMode="darkMode = $event"
 				v-bind="{...args}"
 			></LibDarkModeSwitcher>
+			<!-- workaround for style tag not being allowed -->
+			<component is="style">
+				{{args.css}}
+			</component>
 			
 		`
 	})
 }
+
 export const WithoutLabel: Story = {
 	...Primary,
 	args: {
@@ -46,3 +52,46 @@ export const WithoutLabel: Story = {
 		showLabel: false
 	}
 }
+
+export const WithViewTransitionApi: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		css: `
+			:root {
+				--story-anim-length: 1s; /* Shorter for testing */
+			}
+
+			#root {
+				view-transition-name: wroot;
+				height: 100dvh;
+				padding: 0;
+
+			}
+
+			::view-transition-new(wroot) {
+				animation: grow var(--story-anim-length) ease-in-out;
+				animation-fill-mode: both;
+				z-index: 2;
+				mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle cx="20" cy="20" r="20" fill="white"/></svg>') center / 0 no-repeat;
+				mask-size: 50dvw;
+			}
+
+			::view-transition-old(wroot) {
+				animation: none;
+				animation-fill-mode: both;
+				z-index: 1;
+			}
+
+			@keyframes grow {
+					from {
+						mask-size: 0dvw;
+					}
+					to {
+						mask-size: 300dvw;
+					}
+			}
+		`
+	}
+}
+

package/src/runtime/composables/useDarkMode.ts

@@ -1,4 +1,4 @@
-import { computed, onMounted, provide, type Ref, ref, watch } from "vue"
+import { computed, nextTick, onMounted, provide, type Ref, ref, watch } from "vue"
 
 import { darkModeCommandsInjectionKey, darkModeStateInjectionKey, isDarkModeInjectionKey, manualDarkModeInjectionKey } from "../injectionKeys.js"
 
@@ -19,8 +19,9 @@ const defaultOrder = ["system", "dark", "light"] as const
 export const useDarkMode = ({
 	useLocalStorage = true,
 	darkModeOrder = defaultOrder,
-	/** True by default, should be passed import.meta.client if using nuxt, or false when running server side. */
-	isClientSide = true
+
+	isClientSide = true,
+	useViewTransition = true
 }: DarkModeOptions = {}): DarkModeState & DarkModeCommands => {
 	const systemDarkMode = ref(false)
 	const manualDarkMode = ref<boolean | undefined>(undefined)
@@ -48,14 +49,38 @@ export const useDarkMode = ({
 					? false
 					: undefined
 	}
+
+	function getNextValue(): "dark" | "light" | "system" {
+		const index = darkModeOrder.indexOf(darkModeState.value)
+
+		return index === 2
+			? darkModeOrder[0]!
+			: darkModeOrder[index + 1]!
+	}
+
+	function _cycleDarkMode(): void {
+		setDarkMode(getNextValue())
+	}
+
 	function cycleDarkMode(): void {
+		if (!useViewTransition) {
+			_cycleDarkMode()
+			return
+		}
+		const nextValue = getNextValue()
 		const index = darkModeOrder.indexOf(darkModeState.value)
+		const systemDarkModeName = systemDarkMode.value ? "dark" : "light"
 
-		if (index === 2) {
-			setDarkMode(darkModeOrder[0]!)
-		} else {
-			setDarkMode(darkModeOrder[index + 1]!)
+		if (nextValue === "system" && systemDarkModeName === darkModeOrder[index]) {
+			// don't do view transitions if we're not really transitioning
+			_cycleDarkMode()
+			return
 		}
+		if (!document.startViewTransition) _cycleDarkMode()
+		document.startViewTransition(async () => {
+			_cycleDarkMode()
+			await nextTick()
+		})
 	}
 
 	onMounted(() => {
@@ -111,6 +136,49 @@ export type DarkModeOptions = {
 	darkModeOrder?: readonly ("system" | "dark" | "light")[]
 	/** True by default, should be passed import.meta.client if using nuxt, or false when running server side. */
 	isClientSide?: boolean
+	/**
+	 * Whether to use the view transition to animate the dark mode switch (you just need to add the css).
+	 *
+	 * Note that the transitition is NOT triggered if visually the mode does not change (e.g. system mode is dark and the user switches from system to dark, visually nothing changes so transitioning is skipped).
+	 *
+	 * There is an example in storybook. But basically:
+	 *
+	 * ```css
+	 *
+	 * #root { // the dark mode switcher works on the WRoot component not the html root
+	 *		view-transition-name: wroot;
+	 *		height: 100dvh;
+	 *		padding: 0;
+	 *	}
+	 *
+	 * ::view-transition-new(wroot) {
+	 * 	animation: grow var(--story-anim-length) ease-in-out;
+	 * 	animation-fill-mode: both;
+	 * 	z-index: 2;
+	 * 	mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle cx="20" cy="20" r="20" fill="white"/></svg>') center / 0 no-repeat;
+	 * }
+	 *
+	 * ::view-transition-old(wroot) {
+	 * 	animation: none;
+	 * 	animation-fill-mode: both;
+	 * 	z-index: 1;
+	 * }
+	 *
+	 * @keyframes grow {
+	 * 	from {
+	 * 		mask-size: 0dvw;
+	 * 	}
+	 * 	to {
+	 * 		mask-size: 300dvw;
+	 * 	}
+	 * }
+	 * ```
+	 *
+	 * See https://theme-toggle.rdsx.dev/ for more ideas.
+	 *
+	 * @default true
+	 */
+	useViewTransition?: boolean
 }
 
 export interface DarkModeCommands {