@marianmeres/stuic 1.0.3 → 1.2.0

package/dist/components/AppShell/AppShell.svelte

@@ -1,3 +1,13 @@
+<script context="module">export const appShellSetHtmlBodyHeight = () => {
+  const _set = (flag) => {
+    document.body.style.height = flag ? "100vh" : "auto";
+    document.body.style.overflow = flag ? "hidden" : "visible";
+  };
+  _set(true);
+  return () => _set(false);
+};
+</script>
+
 <script>import { createEventDispatcher } from "svelte";
 import { twMerge } from "tailwind-merge";
 const dispatch = createEventDispatcher();
@@ -193,9 +203,4 @@ Then update your global stylesheet with the following. This will disable overflo
 html and body tags to prevent duplicate scroll bars.
 
 html, body { @apply h-full overflow-hidden; }
-*/
-:global(html),
-:global(body) {
-  height: 100vh !important;
-  overflow: hidden !important;
-}</style>
+*/</style>

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

@@ -1,4 +1,5 @@
 import { SvelteComponent } from "svelte";
+export declare const appShellSetHtmlBodyHeight: () => (() => any);
 declare const __propDef: {
     props: {
         class?: string | undefined;

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/components/Drawer/Drawer.svelte

@@ -1,11 +1,11 @@
 <script context="module">import { createClog } from "@marianmeres/clog";
 import { createSwitchStore } from "@marianmeres/switch-store";
 import { createEventDispatcher } from "svelte";
-import { slide, fly } from "svelte/transition";
+import { fly } from "svelte/transition";
 import { twMerge } from "tailwind-merge";
+import { clickOutside } from "../../actions/click-outside.js";
 import { prefersReducedMotionStore } from "../../utils/prefers-reduced-motion.js";
 import Backdrop from "../Backdrop/Backdrop.svelte";
-import { clickOutside } from "../../actions/click-outside.js";
 export const createDrawerStore = (open = false) => createSwitchStore(open);
 </script>
 
@@ -36,8 +36,8 @@ const _presetsClsBackdrop = {
 const _presetsCls = {
   left: `w-full sm:w-[66vw] h-full`,
   right: `w-full sm:w-[66vw] h-full`,
-  top: `w-full h-full sm:h-[66vh]`,
-  bottom: `w-full h-full sm:h-[66vh]`
+  top: `w-full             h-full sm:h-[66vh]`,
+  bottom: `w-full             h-full sm:h-[66vh]`
 };
 $:
   _presetsAnim = {
@@ -52,12 +52,9 @@ $:
     dispatch("element", { drawer: el });
 </script>
 
-<!-- prettier-ignore -->
 {#if $drawer.isOpen}
 	<Backdrop
-		class={twMerge(`
-			${_presetsClsBackdrop[position] || ''}  ${backdropClass}
-		`.trim())}
+		class={twMerge(`${_presetsClsBackdrop[position] || ''} ${backdropClass}`)}
 		on:escape
 		on:click={(e) => dispatch('click_backdrop')}
 		{fadeInDuration}
@@ -72,7 +69,7 @@ $:
 		<div
 			bind:this={el}
 			on:click|stopPropagation
-			aria-modal="true" 
+			aria-modal="true"
 			role="dialog"
 			aria-labelledby={labelledby}
 			aria-describedby={describedby}
@@ -80,7 +77,7 @@ $:
 				duration: transitionEnabled ? transitionDuration : 0,
 				...(_presetsAnim[position] || {}),
 			}}
-			class={twMerge(`overflow-y-auto ${_presetsCls[position] || ''} ${_class}`.trim())}
+			class={twMerge(`overflow-y-auto ${_presetsCls[position] || ''} ${_class}`)}
 			use:clickOutside={() => dispatch('click_outside')}
 		>
 			<slot />

package/dist/components/Expandable/Expandable.svelte

@@ -0,0 +1,54 @@
+<script>import { createEventDispatcher } from "svelte";
+import { twMerge } from "tailwind-merge";
+import { prefersReducedMotionStore } from "../../utils/prefers-reduced-motion.js";
+const dispatch = createEventDispatcher();
+export let position = "left";
+export let expandsOn = "hover";
+export let force = false;
+let _class = "";
+export { _class as class };
+export let expandedClass = "";
+const _presetsCls = {
+  left: `left-0`,
+  right: `right-0`,
+  top: `top-0`,
+  bottom: `bottom-0`
+};
+$:
+  _isExpanded = !!force;
+const click = "click";
+const hover = "hover";
+const both = "both";
+const _onHover = (flag) => {
+  if (force)
+    return _isExpanded = true;
+  if ([hover, both].includes(expandsOn))
+    _isExpanded = !!flag;
+};
+const _onClick = (e) => {
+  if (force)
+    return _isExpanded = true;
+  if ([click, both].includes(expandsOn))
+    _isExpanded = !_isExpanded;
+};
+$:
+  dispatch("expanded", _isExpanded);
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
+<div
+	on:mouseenter={() => _onHover(true)}
+	on:mouseleave={() => _onHover(false)}
+	on:click={_onClick}
+	on:click
+	aria-expanded={_isExpanded}
+	class={twMerge(`
+        absolute w-full h-full flex flex-col
+        ${$prefersReducedMotionStore ? '' : 'transition-all'}
+        ${_presetsCls[position] || ''} 
+        ${_class}
+        ${_isExpanded ? expandedClass : ''}
+    `)}
+>
+	<slot isExpanded={_isExpanded} />
+</div>

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

@@ -0,0 +1,27 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        position?: "left" | "top" | "right" | "bottom" | undefined;
+        expandsOn?: "click" | "hover" | "both" | undefined;
+        force?: boolean | undefined;
+        class?: string | undefined;
+        expandedClass?: string | undefined;
+    };
+    events: {
+        click: MouseEvent;
+        expanded: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            isExpanded: boolean;
+        };
+    };
+};
+export type ExpandableProps = typeof __propDef.props;
+export type ExpandableEvents = typeof __propDef.events;
+export type ExpandableSlots = typeof __propDef.slots;
+export default class Expandable extends SvelteComponent<ExpandableProps, ExpandableEvents, ExpandableSlots> {
+}
+export {};

package/dist/index.d.ts

@@ -1,6 +1,9 @@
-export { default as AppShell } from './components/AppShell/AppShell.svelte';
+export { default as AppShell, appShellSetHtmlBodyHeight, } 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 Expandable } from './components/Expandable/Expandable.svelte';
 export { default as X } from './components/X/X.svelte';

package/dist/index.js

@@ -1,14 +1,17 @@
 // Reexport your entry components here
 //
-export { default as AppShell } from './components/AppShell/AppShell.svelte';
+export { default as AppShell, appShellSetHtmlBodyHeight, } 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';
 //
+export { default as Expandable } from './components/Expandable/Expandable.svelte';
+//
 export { default as X } from './components/X/X.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "1.0.3",
+	"version": "1.2.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 {};