@medyll/idae-slotui-svelte 0.122.1 → 0.124.0

package/dist/ui/panel/Panel.demo.svelte

@@ -1,169 +1,169 @@
-<script lang="ts">
-	import Paneler from './Paneler.svelte';
-	import PanelSlide from './PanelSlide.svelte';
-	import Panel from './Panel.svelte';
-	import PanelGrid from './PanelGrid.svelte';
-
-	/* demo */
-	import { defaultsArgs } from '../../base/demoer/demoer.utils.js';
-	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
-	import Demoer from '../../base/demoer/Demoer.svelte';
-	import DemoPage from '../../base/demoer/DemoPage.svelte';
-	/* demo */
-
-	let parametersSlot: any = {
-		isOpen: {
-			type: 'boolean',
-			values: [true, false]
-		}
-	};
-
-	$: componentArgsSlot = {
-		...defaultsArgs(parametersSlot),
-		onClose: () => {
-			componentArgsSlot.open = !componentArgsSlot.open;
-		},
-		data: [
-			{ id: 1, name: 'name' },
-			{ id: 2, name: 'name' },
-			{ id: 3, name: 'name' },
-			{ id: 4, name: 'name' }
-		]
-	};
-
-	//
-	let codeSlot = `
-<script>
-  import Paneler from "./Paneler.svelte"; 
-  import PanelSlide from "./PanelSlide.svelte"; 
-  import Panel from "./Panel.svelte"; 
-  import PanelGrid from "./PanelGrid.svelte";
-<\/script>
-
-<Paneler style="width:450px;height:450px;overflow:hidden;">
-  <PanelSlide
-    class="overflow-x-hidden overflow-y-auto"
-    open={true}>
-      <Panel data={{ some: "data" }} title="Some Items">
-        <PanelGrid data={[...Array(9)]} let:data>
-            <div class="pad border radius-tiny">Some</div>
-            {#snippet panelGridZoom()}
-				<div class="pad-4 text-center theme-bg-primary">Some large</div>
-			{/snippet}
-            Some large
-            </div>
-        </PanelGrid>
-      </Panel>
-      <Panel title="Recent Items">
-        <PanelGrid data={[...Array(12)]} columns={6}>
-            <div class="pad border radius-tiny">Recent</div>
-        </PanelGrid>
-      </Panel>
-      <Panel title="Other Items">
-        <PanelGrid data={[...Array(7)]} columns={2}>
-            <div class="pad border radius-tiny">Others</div>
-        </PanelGrid>
-      </Panel>
-  </PanelSlide>
-  <PanelSlide
-    class="overflow-x-hidden overflow-y-auto"
-    let:panelSlideId
-    open={false}
-    let:data>
-      <Panel title="Zoom area">
-        <PanelGrid data={[...Array(130)]} columns={1}>
-            <div class="pad border radius-tiny">
-            list item for {panelSlideId}
-            </div>
-        </PanelGrid>
-      </Panel>
-  </PanelSlide> 
-</Paneler>
-`;
-
-	let codeProps = `
-    <Button
-        onclick={() => {
-            openWindow("html", {
-            componentProps: { some: "props", someother: "deprops" },
-            contentHTML:
-                '<div class="pad-4 align-center">some html content</div>',
-            });
-        }}>
-        Window with html content
-    </Button>
-    
-    <Button
-        onclick={() => {
-            openWindow("component", {
-            component: Debug,
-            componentProps: { some: "props", someother: "deprops" },
-            });
-        }}>
-        Window with component
-    </Button>`;
-</script>
-
-<ComponentDemo
-	component="Panel"
-	cite="If you can slide, then there are chances you are a panel<br /> C. Quin 2013"
->
-	<div class="flex-v gap-large">
-		<DemoPage code={codeSlot} component="Panel">
-			<Demoer parameters={parametersSlot} componentArgs={componentArgsSlot}>
-				{#snippet children({ activeParams })}
-					<div class=" w-full pad pos-rel">
-						<Paneler style="width:450px;height:450px;overflow:hidden;">
-							<PanelSlide class="overflow-x-hidden overflow-y-auto" open={true}>
-								<Panel data={{ some: 'data' }} title="Some Items">
-									<PanelGrid data={[...Array(9)]}>
-										{#snippet children({ data })}
-											<div class="pad border radius-tiny">Some</div>
-										{/snippet}
-										{#snippet panelGridZoom()}
-											<div class="pad-4 text-center theme-bg-primary">Some large</div>
-										{/snippet}
-									</PanelGrid>
-								</Panel>
-								<Panel title="More Items">
-									<PanelGrid data={[...Array(12)]} columns={6}>
-										<div class="pad border radius-tiny">More</div>
-									</PanelGrid>
-								</Panel>
-								<!-- <Panel title="Other Items">
-									<PanelGrid data={[...Array(7)]} columns={2}>
-										<div class="pad border radius-tiny">Others</div>
-									</PanelGrid>
-								</Panel> -->
-								{#snippet panelSlideZoom()}
-									<Panel title="Zoom area">
-										{#snippet children({ data, panelSlideId })}
-											<Panel title="Zoom area">
-												<PanelGrid data={[...Array(130)]} columns={1}>
-													<div class="pad border radius-tiny">
-														list item for {panelSlideId}
-													</div>
-												</PanelGrid>
-											</Panel>
-										{/snippet}
-									</Panel>
-								{/snippet}
-							</PanelSlide>
-							<PanelSlide class="overflow-x-hidden overflow-y-auto" open={false}
-								>{#snippet children({ data, panelSlideId })}
-									<Panel title="Zoom area">
-										<PanelGrid data={[...Array(130)]} columns={1}>
-											<div class="pad border radius-tiny">
-												list item for {panelSlideId}
-											</div>
-										</PanelGrid>
-									</Panel>
-								{/snippet}
-							</PanelSlide>
-						</Paneler>
-					</div>
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-	</div>
-</ComponentDemo>
+<script lang="ts">
+	import Paneler from './Paneler.svelte';
+	import PanelSlide from './PanelSlide.svelte';
+	import Panel from './Panel.svelte';
+	import PanelGrid from './PanelGrid.svelte';
+
+	/* demo */
+	import { defaultsArgs } from '../../base/demoer/demoer.utils.js';
+	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
+	import Demoer from '../../base/demoer/Demoer.svelte';
+	import DemoPage from '../../base/demoer/DemoPage.svelte';
+	/* demo */
+
+	let parametersSlot: any = {
+		isOpen: {
+			type: 'boolean',
+			values: [true, false]
+		}
+	};
+
+	$: componentArgsSlot = {
+		...defaultsArgs(parametersSlot),
+		onClose: () => {
+			componentArgsSlot.open = !componentArgsSlot.open;
+		},
+		data: [
+			{ id: 1, name: 'name' },
+			{ id: 2, name: 'name' },
+			{ id: 3, name: 'name' },
+			{ id: 4, name: 'name' }
+		]
+	};
+
+	//
+	let codeSlot = `
+<script>
+  import Paneler from "./Paneler.svelte"; 
+  import PanelSlide from "./PanelSlide.svelte"; 
+  import Panel from "./Panel.svelte"; 
+  import PanelGrid from "./PanelGrid.svelte";
+<\/script>
+
+<Paneler style="width:450px;height:450px;overflow:hidden;">
+  <PanelSlide
+    class="overflow-x-hidden overflow-y-auto"
+    open={true}>
+      <Panel data={{ some: "data" }} title="Some Items">
+        <PanelGrid data={[...Array(9)]} let:data>
+            <div class="pad border radius-tiny">Some</div>
+            {#snippet panelGridZoom()}
+				<div class="pad-4 text-center theme-bg-primary">Some large</div>
+			{/snippet}
+            Some large
+            </div>
+        </PanelGrid>
+      </Panel>
+      <Panel title="Recent Items">
+        <PanelGrid data={[...Array(12)]} columns={6}>
+            <div class="pad border radius-tiny">Recent</div>
+        </PanelGrid>
+      </Panel>
+      <Panel title="Other Items">
+        <PanelGrid data={[...Array(7)]} columns={2}>
+            <div class="pad border radius-tiny">Others</div>
+        </PanelGrid>
+      </Panel>
+  </PanelSlide>
+  <PanelSlide
+    class="overflow-x-hidden overflow-y-auto"
+    let:panelSlideId
+    open={false}
+    let:data>
+      <Panel title="Zoom area">
+        <PanelGrid data={[...Array(130)]} columns={1}>
+            <div class="pad border radius-tiny">
+            list item for {panelSlideId}
+            </div>
+        </PanelGrid>
+      </Panel>
+  </PanelSlide> 
+</Paneler>
+`;
+
+	let codeProps = `
+    <Button
+        onclick={() => {
+            openWindow("html", {
+            componentProps: { some: "props", someother: "deprops" },
+            contentHTML:
+                '<div class="pad-4 align-center">some html content</div>',
+            });
+        }}>
+        Window with html content
+    </Button>
+    
+    <Button
+        onclick={() => {
+            openWindow("component", {
+            component: Debug,
+            componentProps: { some: "props", someother: "deprops" },
+            });
+        }}>
+        Window with component
+    </Button>`;
+</script>
+
+<ComponentDemo
+	component="Panel"
+	cite="If you can slide, then there are chances you are a panel<br /> C. Quin 2013"
+>
+	<div class="flex-v gap-large">
+		<DemoPage code={codeSlot} component="Panel">
+			<Demoer parameters={parametersSlot} componentArgs={componentArgsSlot}>
+				{#snippet children({ activeParams })}
+					<div class=" w-full pad pos-rel">
+						<Paneler style="width:450px;height:450px;overflow:hidden;">
+							<PanelSlide class="overflow-x-hidden overflow-y-auto" open={true}>
+								<Panel data={{ some: 'data' }} title="Some Items">
+									<PanelGrid data={[...Array(9)]}>
+										{#snippet children({ data })}
+											<div class="pad border radius-tiny">Some</div>
+										{/snippet}
+										{#snippet panelGridZoom()}
+											<div class="pad-4 text-center theme-bg-primary">Some large</div>
+										{/snippet}
+									</PanelGrid>
+								</Panel>
+								<Panel title="More Items">
+									<PanelGrid data={[...Array(12)]} columns={6}>
+										<div class="pad border radius-tiny">More</div>
+									</PanelGrid>
+								</Panel>
+								<!-- <Panel title="Other Items">
+									<PanelGrid data={[...Array(7)]} columns={2}>
+										<div class="pad border radius-tiny">Others</div>
+									</PanelGrid>
+								</Panel> -->
+								{#snippet panelSlideZoom()}
+									<Panel title="Zoom area">
+										{#snippet children({ data, panelSlideId })}
+											<Panel title="Zoom area">
+												<PanelGrid data={[...Array(130)]} columns={1}>
+													<div class="pad border radius-tiny">
+														list item for {panelSlideId}
+													</div>
+												</PanelGrid>
+											</Panel>
+										{/snippet}
+									</Panel>
+								{/snippet}
+							</PanelSlide>
+							<PanelSlide class="overflow-x-hidden overflow-y-auto" open={false}
+								>{#snippet children({ data, panelSlideId })}
+									<Panel title="Zoom area">
+										<PanelGrid data={[...Array(130)]} columns={1}>
+											<div class="pad border radius-tiny">
+												list item for {panelSlideId}
+											</div>
+										</PanelGrid>
+									</Panel>
+								{/snippet}
+							</PanelSlide>
+						</Paneler>
+					</div>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/ui/panel/Panel.svelte

@@ -1,98 +1,98 @@
-<script lang="ts" generics="T=Data">
-	import { run } from 'svelte/legacy';
-
-	import { onMount, getContext } from 'svelte';
-	import Button from '../../controls/button/Button.svelte';
-	import type { PanelContextType, PanelProps } from './types.js';
-	import type { Data } from '../../types/index.js';
-
-	let {
-		title = 'not set',
-		panelId = crypto.randomUUID() as string,
-		data = undefined,
-		showNavigation = true,
-		panelButtonPrevious,
-		panelButtonNext,
-		children
-	}: PanelProps<T> = $props();
-	export const actions = {
-		load: (args: any) => {}
-	};
-
-	let ref: HTMLDivElement | undefined = $state(undefined);
-	let panelSlideId = getContext<string>('PanelSlide');
-	let panelerContext = getContext<PanelContextType>('Paneler');
-
-	let currentIdx = $state(),
-		hasNext = $state(),
-		hasPrev = $state();
-
-	$effect(() => {
-		if ($panelerContext.panelSlides) {
-			currentIdx = Object.keys($panelerContext.panelSlides).indexOf(panelSlideId);
-			hasNext = Boolean(Object.keys($panelerContext.panelSlides)[currentIdx + 1]);
-			hasPrev = Boolean(Object.keys($panelerContext.panelSlides)[currentIdx - 1]);
-		}
-	});
-
-	function prevNextPanel(page: 'next' | 'prev') {
-		const event = new CustomEvent('panel:button:clicked', {
-			detail: { panelId, page, data },
-			bubbles: true
-		});
-		ref?.dispatchEvent(event);
-	}
-</script>
-
-<div class="panel" bind:this={ref}>
-	<div class="panel-bar pos-sticky top-0 gap-small">
-		<div style="flex:1">{title}</div>
-		{#if hasPrev}
-			{#if panelButtonPrevious}
-				<div
-					onclick={() => {
-						prevNextPanel('prev');
-					}}
-				>
-					{@render panelButtonPrevious?.()}
-				</div>
-			{:else}
-				<Button
-					icon="chevron-left"
-					tall="mini"
-					variant="naked"
-					onclick={() => {
-						prevNextPanel('prev');
-					}}
-				/>
-			{/if}
-		{/if}
-		{#if hasNext}
-			{#if panelButtonNext}
-				<div
-					onclick={() => {
-						prevNextPanel('next');
-					}}
-				>
-					{@render panelButtonNext?.()}
-				</div>
-			{:else}
-				<Button
-					iconEnd="chevron-right"
-					variant="naked"
-					tall="mini"
-					onclick={() => {
-						prevNextPanel('next');
-					}}
-				></Button>
-			{/if}
-		{/if}
-	</div>
-	<div class="panelContent">
-		{@render children?.({ panelId, actions })}
-	</div>
-</div>
-
+<script lang="ts" generics="T=Data">
+	import { run } from 'svelte/legacy';
+
+	import { onMount, getContext } from 'svelte';
+	import Button from '../../controls/button/Button.svelte';
+	import type { PanelContextType, PanelProps } from './types.js';
+	import type { Data } from '../../types/index.js';
+
+	let {
+		title = 'not set',
+		panelId = crypto.randomUUID() as string,
+		data = undefined,
+		showNavigation = true,
+		panelButtonPrevious,
+		panelButtonNext,
+		children
+	}: PanelProps<T> = $props();
+	export const actions = {
+		load: (args: any) => {}
+	};
+
+	let ref: HTMLDivElement | undefined = $state(undefined);
+	let panelSlideId = getContext<string>('PanelSlide');
+	let panelerContext = getContext<PanelContextType>('Paneler');
+
+	let currentIdx = $state(),
+		hasNext = $state(),
+		hasPrev = $state();
+
+	$effect(() => {
+		if ($panelerContext.panelSlides) {
+			currentIdx = Object.keys($panelerContext.panelSlides).indexOf(panelSlideId);
+			hasNext = Boolean(Object.keys($panelerContext.panelSlides)[currentIdx + 1]);
+			hasPrev = Boolean(Object.keys($panelerContext.panelSlides)[currentIdx - 1]);
+		}
+	});
+
+	function prevNextPanel(page: 'next' | 'prev') {
+		const event = new CustomEvent('panel:button:clicked', {
+			detail: { panelId, page, data },
+			bubbles: true
+		});
+		ref?.dispatchEvent(event);
+	}
+</script>
+
+<div class="panel" bind:this={ref}>
+	<div class="panel-bar pos-sticky top-0 gap-small">
+		<div style="flex:1">{title}</div>
+		{#if hasPrev}
+			{#if panelButtonPrevious}
+				<div
+					onclick={() => {
+						prevNextPanel('prev');
+					}}
+				>
+					{@render panelButtonPrevious?.()}
+				</div>
+			{:else}
+				<Button
+					icon="chevron-left"
+					tall="mini"
+					variant="naked"
+					onclick={() => {
+						prevNextPanel('prev');
+					}}
+				/>
+			{/if}
+		{/if}
+		{#if hasNext}
+			{#if panelButtonNext}
+				<div
+					onclick={() => {
+						prevNextPanel('next');
+					}}
+				>
+					{@render panelButtonNext?.()}
+				</div>
+			{:else}
+				<Button
+					iconEnd="chevron-right"
+					variant="naked"
+					tall="mini"
+					onclick={() => {
+						prevNextPanel('next');
+					}}
+				></Button>
+			{/if}
+		{/if}
+	</div>
+	<div class="panelContent">
+		{@render children?.({ panelId, actions })}
+	</div>
+</div>
+
 <style>:root {
   --panel-margin-bottom: 2rem;
   --panel-bar-margin-bottom: 2rem;
@@ -117,4 +117,4 @@
   padding: var(--panel-bar-button-padding);
   border: var(--panel-bar-button-border);
   background-color: var(--panel-bar-button-background-color);
-}</style>
+}</style>

package/dist/ui/panel/PanelGrid.svelte

@@ -1,64 +1,64 @@
-<script lang="ts">
-	import Button from '../../controls/button/Button.svelte';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-
-	import { fade } from 'svelte/transition';
-	import type { PanelGridProps } from './types.js';
-
-	let {
-		class: className = '',
-		element = $bindable(),
-		style = '',
-		data = [],
-		columns = 3,
-		isExpanded = $bindable(false),
-		children,
-		panelGridZoom,
-		...rest
-	}: PanelGridProps = $props();
-</script>
-
-{#if data}
-	<div
-		class="slotUiGrid panelGrid"
-		style="--sld-column-size:{Math.floor(100 / columns)}%;gap:0.5rem"
-		{...rest}
-	>
-		{#each data as dta}
-			{#if !isExpanded}
-				<!-- svelte-ignore a11y_click_events_have_key_events -->
-				<!-- svelte-ignore a11y_no_static_element_interactions -->
-				<div
-					onclick={() => {
-						if (panelGridZoom) isExpanded = true;
-					}}
-					class="panelGridThumb"
-					in:fade|global
-				>
-					<Slotted child={children} slotArgs={{ data: dta }}></Slotted>
-				</div>
-			{/if}
-		{/each}
-	</div>
-	{#if isExpanded}
-		<div class="panelGridPreview" in:fade|global>
-			<div>
-				<Button
-					onclick={() => {
-						isExpanded = false;
-					}}
-					variant="naked"
-					icon="chevron-left"
-					class="theme-text-primary"
-				/>
-			</div>
-			<div class="panelGridZoom">
-				<Slotted child={panelGridZoom}></Slotted>
-			</div>
-		</div>
-	{/if}
-{/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 { PanelGridProps } from './types.js';
+
+	let {
+		class: className = '',
+		element = $bindable(),
+		style = '',
+		data = [],
+		columns = 3,
+		isExpanded = $bindable(false),
+		children,
+		panelGridZoom,
+		...rest
+	}: PanelGridProps = $props();
+</script>
+
+{#if data}
+	<div
+		class="slotUiGrid panelGrid"
+		style="--sld-column-size:{Math.floor(100 / columns)}%;gap:0.5rem"
+		{...rest}
+	>
+		{#each data as dta}
+			{#if !isExpanded}
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div
+					onclick={() => {
+						if (panelGridZoom) isExpanded = true;
+					}}
+					class="panelGridThumb"
+					in:fade|global
+				>
+					<Slotted child={children} slotArgs={{ data: dta }}></Slotted>
+				</div>
+			{/if}
+		{/each}
+	</div>
+	{#if isExpanded}
+		<div class="panelGridPreview" in:fade|global>
+			<div>
+				<Button
+					onclick={() => {
+						isExpanded = false;
+					}}
+					variant="naked"
+					icon="chevron-left"
+					class="theme-text-primary"
+				/>
+			</div>
+			<div class="panelGridZoom">
+				<Slotted child={panelGridZoom}></Slotted>
+			</div>
+		</div>
+	{/if}
+{/if}
+
 <style>.panelGridPreview {
   display: flex;
 }
@@ -70,4 +70,4 @@
   display: grid;
   grid-gap: 0.2rem;
   grid-template-columns: repeat(auto-fit, minmax(calc(var(--sld-column-size) - 0.5rem), 1fr));
-}</style>
+}</style>