@marianmeres/stuic 1.0.3 → 1.1.0

package/dist/components/ColorScheme/LocalColorScheme.svelte

@@ -0,0 +1,11 @@
+<!-- 
+    Similar to PrefersColorScheme, except that it never reads window.matchMedia and only
+    relies on the local userland setting
+-->
+<svelte:head>
+	<script>
+		const KEY = 'color-scheme';
+		const cls = window.document.documentElement.classList;
+		localStorage.getItem(KEY) === 'dark' ? cls.add('dark') : cls.remove('dark');
+	</script>
+</svelte:head>

package/dist/components/ColorScheme/LocalColorScheme.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  LocalColorSchemeProps */
+/** @typedef {typeof __propDef.events}  LocalColorSchemeEvents */
+/** @typedef {typeof __propDef.slots}  LocalColorSchemeSlots */
+export default class LocalColorScheme extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type LocalColorSchemeProps = typeof __propDef.props;
+export type LocalColorSchemeEvents = typeof __propDef.events;
+export type LocalColorSchemeSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/ColorScheme/SystemAwareColorScheme.svelte

@@ -0,0 +1,14 @@
+<!-- 
+	If you do not wish to take the system preference into account use LocalColorScheme sibling
+-->
+<svelte:head>
+	<script>
+		const KEY = 'color-scheme';
+		const cls = window.document.documentElement.classList;
+		if (KEY in localStorage) {
+			localStorage.getItem(KEY) === 'dark' ? cls.add('dark') : cls.remove('dark');
+		} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+			cls.add('dark');
+		}
+	</script>
+</svelte:head>

package/dist/components/ColorScheme/SystemAwareColorScheme.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  SystemAwareColorSchemeProps */
+/** @typedef {typeof __propDef.events}  SystemAwareColorSchemeEvents */
+/** @typedef {typeof __propDef.slots}  SystemAwareColorSchemeSlots */
+export default class SystemAwareColorScheme extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SystemAwareColorSchemeProps = typeof __propDef.props;
+export type SystemAwareColorSchemeEvents = typeof __propDef.events;
+export type SystemAwareColorSchemeSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/ColorScheme/color-scheme.d.ts

@@ -0,0 +1,10 @@
+export declare class ColorScheme {
+    static readonly KEY = "color-scheme";
+    static readonly DARK = "dark";
+    static readonly LIGHT = "light";
+    static getSystemValue: () => "dark" | "light";
+    static getLocalValue: (fallback?: string | null) => string | null;
+    static getValue: () => string | null;
+    static toggle: () => void;
+    static reset: () => void;
+}

package/dist/components/ColorScheme/color-scheme.js

@@ -0,0 +1,18 @@
+export class ColorScheme {
+    static KEY = 'color-scheme';
+    static DARK = 'dark';
+    static LIGHT = 'light';
+    static getSystemValue = () => window?.matchMedia(`(prefers-color-scheme: ${ColorScheme.DARK})`).matches
+        ? ColorScheme.DARK
+        : ColorScheme.LIGHT;
+    static getLocalValue = (fallback = null) => localStorage?.getItem(ColorScheme.KEY) || fallback;
+    static getValue = () => ColorScheme.getLocalValue(ColorScheme.getSystemValue());
+    static toggle = () => {
+        // returns bool, indicating whether token is in the list after the call or not.
+        const isDark = window?.document.documentElement.classList.toggle(ColorScheme.DARK);
+        localStorage?.setItem(ColorScheme.KEY, isDark ? ColorScheme.DARK : ColorScheme.LIGHT);
+    };
+    static reset = () => {
+        localStorage?.removeItem(ColorScheme.KEY);
+    };
+}

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 export { default as AppShell } from './components/AppShell/AppShell.svelte';
 export { default as Backdrop, BackdropConfig, } from './components/Backdrop/Backdrop.svelte';
 export { default as Button, ButtonConfig } from './components/Button/Button.svelte';
-export { default as PrefersColorScheme, ColorScheme, } from './components/PrefersColorScheme/PrefersColorScheme.svelte';
+export { default as SystemAwareColorScheme } from './components/ColorScheme/SystemAwareColorScheme.svelte';
+export { default as LocalColorScheme } from './components/ColorScheme/LocalColorScheme.svelte';
+export { ColorScheme } from './components/ColorScheme/color-scheme.js';
 export { default as Drawer, createDrawerStore } from './components/Drawer/Drawer.svelte';
 export { default as X } from './components/X/X.svelte';

package/dist/index.js

@@ -3,11 +3,12 @@
 export { default as AppShell } from './components/AppShell/AppShell.svelte';
 //
 export { default as Backdrop, BackdropConfig, } from './components/Backdrop/Backdrop.svelte';
-// export { BackdropConfig } from './components/Backdrop/backdrop.js';
 //
 export { default as Button, ButtonConfig } from './components/Button/Button.svelte';
 //
-export { default as PrefersColorScheme, ColorScheme, } from './components/PrefersColorScheme/PrefersColorScheme.svelte';
+export { default as SystemAwareColorScheme } from './components/ColorScheme/SystemAwareColorScheme.svelte';
+export { default as LocalColorScheme } from './components/ColorScheme/LocalColorScheme.svelte';
+export { ColorScheme } from './components/ColorScheme/color-scheme.js';
 //
 export { default as Drawer, createDrawerStore } from './components/Drawer/Drawer.svelte';
 //

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "1.0.3",
+	"version": "1.1.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",
@@ -13,8 +13,8 @@
 		"lint": "prettier --check .",
 		"format": "prettier --write .",
 		"prettier": "npm run format",
-		"release:minor": "release -v minor",
-		"release": "release -v patch"
+		"release:patch": "release -v patch",
+		"release": "release -v minor"
 	},
 	"exports": {
 		".": {

package/dist/components/PrefersColorScheme/PrefersColorScheme.svelte

@@ -1,28 +0,0 @@
-<script context="module">export class ColorScheme {
-  static KEY = "color-scheme";
-  static getSystemValue = () => window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  static getLocalValue = () => localStorage.getItem(ColorScheme.KEY);
-  static getValue = () => {
-    return ColorScheme.KEY in localStorage ? localStorage.getItem(ColorScheme.KEY) : ColorScheme.getSystemValue();
-  };
-  static toggle = () => {
-    const isDark = window.document.documentElement.classList.toggle("dark");
-    localStorage.setItem(ColorScheme.KEY, isDark ? "dark" : "light");
-  };
-  static reset = () => {
-    localStorage.removeItem(ColorScheme.KEY);
-  };
-}
-</script>
-
-<svelte:head>
-	<script>
-		const KEY = 'color-scheme';
-		const cls = window.document.documentElement.classList;
-		if (KEY in localStorage) {
-			localStorage.getItem(KEY) === 'dark' ? cls.add('dark') : cls.remove('dark');
-		} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-			cls.add('dark');
-		}
-	</script>
-</svelte:head>

package/dist/components/PrefersColorScheme/PrefersColorScheme.svelte.d.ts

@@ -1,22 +0,0 @@
-import { SvelteComponent } from "svelte";
-export declare class ColorScheme {
-    static readonly KEY = "color-scheme";
-    static getSystemValue: () => "dark" | "light";
-    static getLocalValue: () => string | null;
-    static getValue: () => string | null;
-    static toggle: () => void;
-    static reset: () => void;
-}
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type PrefersColorSchemeProps = typeof __propDef.props;
-export type PrefersColorSchemeEvents = typeof __propDef.events;
-export type PrefersColorSchemeSlots = typeof __propDef.slots;
-export default class PrefersColorScheme extends SvelteComponent<PrefersColorSchemeProps, PrefersColorSchemeEvents, PrefersColorSchemeSlots> {
-}
-export {};