@marianmeres/stuic 1.1.0 → 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/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,8 +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 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,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,6 @@ 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.1.0",
+	"version": "1.2.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",