@marianmeres/stuic 1.1.0 → 1.3.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/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/HoverExpandableWidth/HoverExpandableWidth.svelte

@@ -0,0 +1,102 @@
+<script>import { createClog } from "@marianmeres/clog";
+import { createEventDispatcher } from "svelte";
+import { get } from "svelte/store";
+import { prefersReducedMotionStore } from "../../utils/prefers-reduced-motion.js";
+import { windowSize } from "../../utils/window-size.js";
+import { twMerge } from "tailwind-merge";
+const clog = createClog("HoverExpandableWidth");
+const dispatch = createEventDispatcher();
+export let shadowOpacity = 0.8;
+export let transitionDuration = 150;
+export let targetWidth = 300;
+let _class = "";
+export { _class as class };
+$:
+  _isExpanded = false;
+let _isShrinking = false;
+let _isExpanding = false;
+let _todo;
+let el;
+const _maybeTodo = () => {
+  if (typeof _todo === "function")
+    _todo();
+  _todo = null;
+};
+const _expand = () => {
+  _todo = _expand;
+  if (_isExpanding || _isShrinking || _isExpanded)
+    return;
+  _isExpanded = true;
+  _isExpanding = true;
+  const box = el.getBoundingClientRect();
+  const w = get(windowSize);
+  const pos = {
+    top: box.top,
+    bottom: w.height - box.bottom,
+    left: box.left,
+    right: w.width - box.right
+  };
+  el.style.boxShadow = `8px 0 16px -8px rgb(0 0 0 / ${shadowOpacity})`;
+  el.style.zIndex = `1`;
+  el.style.top = `${pos.top}px`;
+  el.style.right = `${pos.right}px`;
+  el.style.bottom = `${pos.bottom}px`;
+  el.style.left = `${pos.left}px`;
+  el.style.width = "auto";
+  el.style.height = "auto";
+  setTimeout(
+    () => {
+      _isExpanding = false;
+      _maybeTodo();
+    },
+    transitionDuration + 1e3 / 60 * 3
+    // 3 x raf
+  );
+  requestAnimationFrame(() => {
+    el.style.position = `fixed`;
+    requestAnimationFrame(() => {
+      el.style.width = `${box.width}px`;
+      requestAnimationFrame(() => {
+        !$prefersReducedMotionStore && (el.style.transitionProperty = "all");
+        el.style.width = `${targetWidth}px`;
+      });
+    });
+  });
+};
+const _shrink = () => {
+  _todo = _shrink;
+  if (_isExpanding || _isShrinking || !_isExpanded)
+    return;
+  _isExpanded = false;
+  _isShrinking = true;
+  el.style.position = `static`;
+  el.style.zIndex = `auto`;
+  el.style.top = "auto";
+  el.style.right = "auto";
+  el.style.bottom = "auto";
+  el.style.left = "auto";
+  el.style.width = "100%";
+  el.style.height = "100%";
+  el.style.boxShadow = "none";
+  setTimeout(() => {
+    _isShrinking = false;
+    el.style.transitionProperty = "none";
+    _maybeTodo();
+  }, transitionDuration);
+};
+$:
+  dispatch("change", _isExpanded);
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
+<div
+	bind:this={el}
+	on:mouseenter={_expand}
+	on:mouseleave={_shrink}
+	on:click
+	aria-expanded={_isExpanded}
+	class={twMerge(`${_class}`)}
+	style="width: 100%; height: 100%; transition-duration: {transitionDuration}ms;"
+>
+	<slot isExpanded={_isExpanded} inTransition={_isExpanding || _isShrinking} />
+</div>

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

@@ -0,0 +1,27 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        shadowOpacity?: number | undefined;
+        transitionDuration?: number | undefined;
+        targetWidth?: number | undefined;
+        class?: string | undefined;
+    };
+    events: {
+        click: MouseEvent;
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            isExpanded: boolean;
+            inTransition: boolean;
+        };
+    };
+};
+export type HoverExpandableWidthProps = typeof __propDef.props;
+export type HoverExpandableWidthEvents = typeof __propDef.events;
+export type HoverExpandableWidthSlots = typeof __propDef.slots;
+export default class HoverExpandableWidth extends SvelteComponent<HoverExpandableWidthProps, HoverExpandableWidthEvents, HoverExpandableWidthSlots> {
+}
+export {};

package/dist/index.d.ts

@@ -1,8 +1,10 @@
-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 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 HoverExpandableWidth } from './components/HoverExpandableWidth/HoverExpandableWidth.svelte';
 export { default as X } from './components/X/X.svelte';
+export { windowSize, breakpoint } from './utils/window-size.js';

package/dist/index.js

@@ -1,6 +1,6 @@
 // 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';
 //
@@ -12,4 +12,8 @@ export { ColorScheme } from './components/ColorScheme/color-scheme.js';
 //
 export { default as Drawer, createDrawerStore } from './components/Drawer/Drawer.svelte';
 //
+export { default as HoverExpandableWidth } from './components/HoverExpandableWidth/HoverExpandableWidth.svelte';
+//
 export { default as X } from './components/X/X.svelte';
+//
+export { windowSize, breakpoint } from './utils/window-size.js';

package/dist/utils/window-size.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="svelte" />
+export declare const windowSize: {
+    touch: () => void;
+    subscribe(this: void, run: import("svelte/store").Subscriber<{
+        width: number;
+        height: number;
+        scale: number;
+    }>, invalidate?: import("svelte/store").Invalidator<{
+        width: number;
+        height: number;
+        scale: number;
+    }> | undefined): import("svelte/store").Unsubscriber;
+};
+export declare const breakpoint: import("svelte/store").Readable<string | null>;

package/dist/utils/window-size.js

@@ -0,0 +1,30 @@
+import { derived, writable } from 'svelte/store';
+const getWindowSize = () => {
+    const { width, height, scale } = window?.visualViewport || {
+        width: 0,
+        height: 0,
+        scale: 1,
+    };
+    return { width, height, scale };
+};
+let _trigger = writable(0);
+export const windowSize = {
+    ...derived([_trigger], ([_]) => getWindowSize()),
+    touch: () => _trigger.set(Date.now()),
+};
+// init now!
+windowSize.touch();
+// intentionally not debounced
+window?.visualViewport?.addEventListener('resize', windowSize.touch);
+window?.visualViewport?.addEventListener('scroll', windowSize.touch);
+// https://tailwindcss.com/docs/responsive-design
+export const breakpoint = derived([windowSize], ([{ width: w }]) => {
+    const list = [
+        ['sm', 640],
+        ['md', 768],
+        ['lg', 1024],
+        ['xl', 1280],
+        ['2xl', 1536],
+    ];
+    return list.reduce((m, [k, v]) => (w && w >= v ? k : m), null);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "1.1.0",
+	"version": "1.3.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",