@marianmeres/stuic 1.2.0 → 1.4.0

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

@@ -5,5 +5,6 @@ export { default as SystemAwareColorScheme } from './components/ColorScheme/Syst
 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 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

@@ -12,6 +12,8 @@ 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 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,23 @@
+/// <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;
+};
+interface Breakpoint {
+    __current__: null | string;
+    sm: boolean;
+    md: boolean;
+    lg: boolean;
+    xl: boolean;
+    '2xl': boolean;
+}
+export declare const breakpoint: import("svelte/store").Readable<Breakpoint>;
+export {};

package/dist/utils/window-size.js

@@ -0,0 +1,34 @@
+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);
+export const breakpoint = derived([windowSize], ([{ width: w }]) => {
+    const list = [
+        ['sm', 640],
+        ['md', 768],
+        ['lg', 1024],
+        ['xl', 1280],
+        ['2xl', 1536],
+    ];
+    // return list.reduce<string | null>((m, [k, v]) => (w && w >= v ? k : m), null);
+    return list.reduce((m, [k, v]) => {
+        const flag = w && w >= v;
+        m = { ...m, [k]: flag, __current__: flag ? k : m.__current__ };
+        return m;
+    }, { __current__: null, sm: false, md: false, lg: false, xl: false, '2xl': false });
+});

package/package.json

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

package/dist/components/Expandable/Expandable.svelte

@@ -1,54 +0,0 @@
-<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

@@ -1,27 +0,0 @@
-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 {};