@medyll/idae-slotui-svelte 0.122.1 → 0.124.0

package/dist/ui/popper/popper.scss

@@ -1,108 +1,108 @@
-@use "../../styles/slotui-mixins.scss";
-
-:root {
-    --popper-border-radius: var(--sld-radius-tiny);
-    --popper-box-shadow: var(--sld-elevation-4);
-    --popper-background-color: var(--sld-color-background-alpha-mid);
-    --popper-backdrop-filter: blur(30px);
-    --popper-z-index: 30000;
-    --popper-open-border: 1px color red;
-}
-
-:global(dialog.popper) {
-    // Reset
-    all: unset;
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    border: none;
-    background: none;
-    color: inherit;
-    font: inherit;
-
-    opacity: 0;
-    visibility: hidden;
-
-    transition:
-        opacity 0.3s ease,
-        visibility 0.3s ease;
-
-    // Styles
-    border-radius: var(--popper-border-radius);
-    overflow: hidden;
-    position: fixed;
-    inset: 0;
-
-    box-shadow: var(--popper-box-shadow);
-    background-color: var(--popper-background-color);
-    -webkit-backdrop-filter: var(--popper-backdrop-filter);
-    backdrop-filter: var(--popper-backdrop-filter);
-    z-index: var(--popper-z-index);
-
-    opacity: 0;
-    visibility: hidden;
-    align-items: center;
-    transition:
-        opacity 0.3s ease,
-        visibility 0.3s ease;
-
-    outline: none;
-
-    width: moz-fit-content;
-    width: fit-content;
-    height: moz-fit-content;
-    height: fit-content;
-
-    /* top: 15rem;
-    left: 40rem; */
-
-    &:focus-visible {
-        outline: 2px solid var(--focus-color);
-        outline-offset: 2px;
-    }
-    z-index: 30000;
-
-    &[open],
-    &:popover-open {
-        opacity: 1;
-        visibility: visible;
-        animation: popoverEnter 0.3s ease-out;
-    }
-
-    .popper-left,
-    .popper-right {
-        height: 100%;
-        max-height: 100%;
-        overflow: hidden;
-    }
-
-    &::backdrop {
-        background-color: rgba(0, 0, 0, 0.5);
-        width: moz-fit-content;
-        width: fit-content;
-    }
-}
-
-@keyframes popoverEnter {
-    from {
-        opacity: 0;
-        transform: scale(0.9);
-    }
-    to {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-
-/* @media (prefers-color-scheme: dark) {
-    :global(dialog.popper) {
-        --popper-background-color: #2a2a2a;
-        --popper-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
-        --focus-color: #6ab5ff;
-    }
-} */
-
-:global(dialog.popper) {
-    padding-block: 0;
-    padding-inline: 0;
-}
+@use "../../styles/slotui-mixins.scss";
+
+:root {
+    --popper-border-radius: var(--sld-radius-tiny);
+    --popper-box-shadow: var(--sld-elevation-4);
+    --popper-background-color: var(--sld-color-background-alpha-mid);
+    --popper-backdrop-filter: blur(30px);
+    --popper-z-index: 30000;
+    --popper-open-border: 1px color red;
+}
+
+:global(dialog.popper) {
+    // Reset
+    all: unset;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: none;
+    color: inherit;
+    font: inherit;
+
+    opacity: 0;
+    visibility: hidden;
+
+    transition:
+        opacity 0.3s ease,
+        visibility 0.3s ease;
+
+    // Styles
+    border-radius: var(--popper-border-radius);
+    overflow: hidden;
+    position: fixed;
+    inset: 0;
+
+    box-shadow: var(--popper-box-shadow);
+    background-color: var(--popper-background-color);
+    -webkit-backdrop-filter: var(--popper-backdrop-filter);
+    backdrop-filter: var(--popper-backdrop-filter);
+    z-index: var(--popper-z-index);
+
+    opacity: 0;
+    visibility: hidden;
+    align-items: center;
+    transition:
+        opacity 0.3s ease,
+        visibility 0.3s ease;
+
+    outline: none;
+
+    width: moz-fit-content;
+    width: fit-content;
+    height: moz-fit-content;
+    height: fit-content;
+
+    /* top: 15rem;
+    left: 40rem; */
+
+    &:focus-visible {
+        outline: 2px solid var(--focus-color);
+        outline-offset: 2px;
+    }
+    z-index: 30000;
+
+    &[open],
+    &:popover-open {
+        opacity: 1;
+        visibility: visible;
+        animation: popoverEnter 0.3s ease-out;
+    }
+
+    .popper-left,
+    .popper-right {
+        height: 100%;
+        max-height: 100%;
+        overflow: hidden;
+    }
+
+    &::backdrop {
+        background-color: rgba(0, 0, 0, 0.5);
+        width: moz-fit-content;
+        width: fit-content;
+    }
+}
+
+@keyframes popoverEnter {
+    from {
+        opacity: 0;
+        transform: scale(0.9);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+/* @media (prefers-color-scheme: dark) {
+    :global(dialog.popper) {
+        --popper-background-color: #2a2a2a;
+        --popper-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+        --focus-color: #6ab5ff;
+    }
+} */
+
+:global(dialog.popper) {
+    padding-block: 0;
+    padding-inline: 0;
+}

package/dist/ui/preview/Preview.svelte

@@ -1,43 +1,43 @@
-<script lang="ts">
-	import Button from '../../controls/button/Button.svelte';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-
-	import { fade } from 'svelte/transition';
-	import type { PreviewProps } from './types.js';
-
-	let {
-		class: className = '',
-		element = $bindable(),
-		style = '',
-		data = [],
-		columns = 3,
-		isExpanded = $bindable(false),
-		children,
-		previewZoom,
-		...rest
-	}: PreviewProps = $props();
-</script>
-
-<div class="preview-root">
-	{@render children?.({ data })}
-</div>
-{#if isExpanded}
-	<div class="preview" in:fade|global>
-		<div>
-			<Button
-				onclick={() => {
-					isExpanded = false;
-				}}
-				variant="naked"
-				icon="chevron-left"
-			/>
-		</div>
-		<div class="preview-zoom">
-			{@render previewZoom?.({ data })}
-		</div>
-	</div>
-{/if}
-
+<script lang="ts">
+	import Button from '../../controls/button/Button.svelte';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+
+	import { fade } from 'svelte/transition';
+	import type { PreviewProps } from './types.js';
+
+	let {
+		class: className = '',
+		element = $bindable(),
+		style = '',
+		data = [],
+		columns = 3,
+		isExpanded = $bindable(false),
+		children,
+		previewZoom,
+		...rest
+	}: PreviewProps = $props();
+</script>
+
+<div class="preview-root">
+	{@render children?.({ data })}
+</div>
+{#if isExpanded}
+	<div class="preview" in:fade|global>
+		<div>
+			<Button
+				onclick={() => {
+					isExpanded = false;
+				}}
+				variant="naked"
+				icon="chevron-left"
+			/>
+		</div>
+		<div class="preview-zoom">
+			{@render previewZoom?.({ data })}
+		</div>
+	</div>
+{/if}
+
 <style>.preview-root {
   display: contents;
 }
@@ -47,4 +47,4 @@
 }
 .preview .preview-zoom {
   flex: 1;
-}</style>
+}</style>

package/dist/ui/serviceBox/ServiceBox.svelte

@@ -1,26 +1,26 @@
-<script lang="ts">
-	import IconButton from '../../controls/button/IconButton.svelte';
-	import ButtonMenu from '../../controls/button/ButtonAction.svelte';
-	import Debug from '../../base/debug/Debug.svelte';
-
-	const onclose = function () {
-		console.log('close ??');
-	};
-</script>
-
-<div class="service-box">
-	<div class="service-box-main gridIconBis">
-		{#each [...Array(6)] as key, val}
-			<!--for popper-->
-			<ButtonMenu actionComponent={Debug}>Setting {val}</ButtonMenu>
-		{/each}
-	</div>
-	<div class="service-box-buttons">
-		<IconButton icon="faList"></IconButton>
-		<IconButton icon="faList"></IconButton>
-	</div>
-</div>
-
+<script lang="ts">
+	import IconButton from '../../controls/button/IconButton.svelte';
+	import ButtonMenu from '../../controls/button/ButtonAction.svelte';
+	import Debug from '../../base/debug/Debug.svelte';
+
+	const onclose = function () {
+		console.log('close ??');
+	};
+</script>
+
+<div class="service-box">
+	<div class="service-box-main gridIconBis">
+		{#each [...Array(6)] as key, val}
+			<!--for popper-->
+			<ButtonMenu actionComponent={Debug}>Setting {val}</ButtonMenu>
+		{/each}
+	</div>
+	<div class="service-box-buttons">
+		<IconButton icon="faList"></IconButton>
+		<IconButton icon="faList"></IconButton>
+	</div>
+</div>
+
 <style>.gridIconBis {
   width: 100%;
   display: grid;
@@ -42,4 +42,4 @@
   display: flex;
   justify-content: flex-end;
   padding: var(--sld-pad-med);
-}</style>
+}</style>

package/dist/ui/startMenu/BootMenu.svelte

@@ -1,104 +1,104 @@
-<svelte:options immutable={true} />
-
-<script lang="ts">
-	import { fade } from 'svelte/transition';
-
-	import { sx4u } from '../../utils/uses/sx4u/sx4u.js';
-	import { clickAway } from '../../utils/uses/clickAway/clickAway.js';
-	import Panel from '../panel/Panel.svelte';
-	import PanelSlide from '../panel/PanelSlide.svelte';
-
-	import { toggleStartMenu, startMenuStore } from '../../utils/engine/wactions.utils.js';
-	import { openWindow } from '../window/actions.svelte.js';
-	import { setContext } from 'svelte';
-
-	import IconButton from '../../controls/button/IconButton.svelte';
-	import { writable } from 'svelte/store';
-	import Debug from '../../base/debug/Debug.svelte';
-	import { onEvent } from '../../utils/uses/event.js';
-
-	const menuStore = writable<any>(null);
-
-	let slideLeft: any;
-	let slideRight: any;
-
-	function toggleSlidePanels() {
-		slideLeft.actions.toggle();
-		slideRight.actions.toggle();
-
-		menuStore.set({
-			...$menuStore,
-			open: !$menuStore?.open
-		});
-		setContext('PanelSlide', menuStore);
-	}
-</script>
-
-{#if $startMenuStore}
-	<div
-		class="boot-menu"
-		transition:fade|global={{ duration: 50 }}
-		use:sx4u={{ position: 'absolute', radius: 8, w: 96, h: 64 }}
-		use:clickAway={{ action: toggleStartMenu }}
-		use:onEvent={{ event: 'panel-button-clicked', action: toggleSlidePanels }}
-	>
-		<div use:sx4u={{ p: 2, py: 2 }} style="margin-bottom:2rem">
-			<input style="width: 100%;" type="search" placeholder="Recherche" />
-		</div>
-		<div style="position:relative" class="boot-menuContent">
-			<PanelSlide open={true} bind:this={slideLeft}>
-				<Panel title="Pinned Items">
-					<div class="gridIcon">
-						{#each [...Array(9)] as key, val}
-							<!-- svelte-ignore a11y_click_events_have_key_events -->
-							<!-- svelte-ignore a11y_no_static_element_interactions -->
-							<div
-								onclick={() => {
-									openWindow('try ' + val, {
-										component: Debug,
-										componentProps: { some: 'props', someother: 'deprops' }
-									});
-								}}
-								class="buttonPole"
-							>
-								key
-							</div>
-						{/each}
-					</div>
-				</Panel>
-				<Panel title="Recent Items">
-					<div class="gridIconBis">
-						{#each [...Array(12)] as key}
-							<div class="buttonPole">here</div>
-						{/each}
-					</div>
-				</Panel>
-				<Panel>
-					<div class="gridOne">
-						{#each [...Array(3)] as key}
-							<div class="buttonPole">here</div>
-						{/each}
-					</div>
-				</Panel>
-			</PanelSlide>
-			<PanelSlide open={false} bind:this={slideRight}>
-				<Panel title="Zoom area">
-					<div class="gridIconMid">
-						{#each [...Array(130)] as key}
-							<div class="buttonPole">here</div>
-						{/each}
-					</div>
-				</Panel>
-			</PanelSlide>
-		</div>
-		<div class="bottomBar">
-			<IconButton style="color:white" icon="faBed" />
-			<IconButton style="color:white" icon="faTruck" />
-			<IconButton style="color:white" icon="faSign" />
-		</div>
-	</div>
-{/if}
-
+<svelte:options immutable={true} />
+
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+
+	import { sx4u } from '../../utils/uses/sx4u/sx4u.js';
+	import { clickAway } from '../../utils/uses/clickAway/clickAway.js';
+	import Panel from '../panel/Panel.svelte';
+	import PanelSlide from '../panel/PanelSlide.svelte';
+
+	import { toggleStartMenu, startMenuStore } from '../../utils/engine/wactions.utils.js';
+	import { openWindow } from '../window/actions.svelte.js';
+	import { setContext } from 'svelte';
+
+	import IconButton from '../../controls/button/IconButton.svelte';
+	import { writable } from 'svelte/store';
+	import Debug from '../../base/debug/Debug.svelte';
+	import { onEvent } from '../../utils/uses/event.js';
+
+	const menuStore = writable<any>(null);
+
+	let slideLeft: any;
+	let slideRight: any;
+
+	function toggleSlidePanels() {
+		slideLeft.actions.toggle();
+		slideRight.actions.toggle();
+
+		menuStore.set({
+			...$menuStore,
+			open: !$menuStore?.open
+		});
+		setContext('PanelSlide', menuStore);
+	}
+</script>
+
+{#if $startMenuStore}
+	<div
+		class="boot-menu"
+		transition:fade|global={{ duration: 50 }}
+		use:sx4u={{ position: 'absolute', radius: 8, w: 96, h: 64 }}
+		use:clickAway={{ action: toggleStartMenu }}
+		use:onEvent={{ event: 'panel-button-clicked', action: toggleSlidePanels }}
+	>
+		<div use:sx4u={{ p: 2, py: 2 }} style="margin-bottom:2rem">
+			<input style="width: 100%;" type="search" placeholder="Recherche" />
+		</div>
+		<div style="position:relative" class="boot-menuContent">
+			<PanelSlide open={true} bind:this={slideLeft}>
+				<Panel title="Pinned Items">
+					<div class="gridIcon">
+						{#each [...Array(9)] as key, val}
+							<!-- svelte-ignore a11y_click_events_have_key_events -->
+							<!-- svelte-ignore a11y_no_static_element_interactions -->
+							<div
+								onclick={() => {
+									openWindow('try ' + val, {
+										component: Debug,
+										componentProps: { some: 'props', someother: 'deprops' }
+									});
+								}}
+								class="buttonPole"
+							>
+								key
+							</div>
+						{/each}
+					</div>
+				</Panel>
+				<Panel title="Recent Items">
+					<div class="gridIconBis">
+						{#each [...Array(12)] as key}
+							<div class="buttonPole">here</div>
+						{/each}
+					</div>
+				</Panel>
+				<Panel>
+					<div class="gridOne">
+						{#each [...Array(3)] as key}
+							<div class="buttonPole">here</div>
+						{/each}
+					</div>
+				</Panel>
+			</PanelSlide>
+			<PanelSlide open={false} bind:this={slideRight}>
+				<Panel title="Zoom area">
+					<div class="gridIconMid">
+						{#each [...Array(130)] as key}
+							<div class="buttonPole">here</div>
+						{/each}
+					</div>
+				</Panel>
+			</PanelSlide>
+		</div>
+		<div class="bottomBar">
+			<IconButton style="color:white" icon="faBed" />
+			<IconButton style="color:white" icon="faTruck" />
+			<IconButton style="color:white" icon="faSign" />
+		</div>
+	</div>
+{/if}
+
 <style>:root {
   --boot-menu-background-color: rgba(90, 67, 52, 0.9);
   --boot-menu-backdrop-filter: blur(10px);
@@ -175,4 +175,4 @@
   display: flex;
   align-items: end;
   padding: var(--boot-menu-bottom-bar-padding);
-}</style>
+}</style>