@medyll/idae-slotui-svelte 0.122.1 → 0.124.0

package/dist/ui/panel/PanelSlide.svelte

@@ -1,158 +1,158 @@
-<svelte:options />
-
-<script lang="ts">
-	import { transitions } from '../../utils/effects/transitions.js';
-	import { onMount, setContext, getContext } from 'svelte';
-	import type { PanelContextType } from './types.js';
-	const { slideInNoName, slideOutNoName } = transitions;
-
-	import type { SvelteComponent } from 'svelte';
-	import type { Snippet } from 'svelte';
-	import type { CommonProps, ElementProps } from '../../types/index.js';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-
-	type PanelSlideProps = CommonProps & {
-		/** Whether the panel is open or not */
-		open: boolean;
-
-		/** Component to be rendered in the panel */
-		component?: SvelteComponent;
-
-		/** Flow of the panel */
-		flow?: ElementProps['flow'];
-
-		/** Whether the panel is outer or not */
-		outer?: boolean;
-
-		/** Unique ID for the panel slide */
-		panelSlideId?: string;
-		panelSlideZoom?: import('svelte').Snippet;
-		/** Children   for the default content */
-		children?: Snippet<[any]>;
-	};
-	let panelSlideRef: any;
-	let {
-		class: className = '',
-		element = $bindable<HTMLInputElement>(panelSlideRef),
-		style = '',
-		open,
-		component,
-		flow = 'absolute',
-		outer,
-		panelSlideId = crypto.randomUUID() as string,
-		panelSlideZoom,
-		children,
-		...rest
-	}: PanelSlideProps = $props();
-
-	let transitionTo: 'prev' | 'next';
-
-	export const actions = {
-		open: () => {
-			setVisible(true);
-		},
-		close: () => {
-			setVisible(false);
-		},
-		toggle: () => {
-			setVisible(!open);
-		},
-		hasNextPrev: (nextPrev: 'next' | 'prev') => {
-			const registredPanelSlides = $panelerContext.panelSlides;
-			const slidePanelsKeys = Object.keys(registredPanelSlides);
-			const activeIdx = slidePanelsKeys.indexOf(panelSlideId);
-		}
-	};
-
-	const panelerContext = getContext<PanelContextType>('Paneler');
-	if (outer) setContext<string>('PanelSlide', panelSlideId);
-
-	$effect(() => {
-		if (!$panelerContext.panelSlides[panelSlideId] && outer && panelerContext) {
-			$panelerContext.panelSlides[panelSlideId] = {};
-		}
-	});
-
-	$effect(() => {
-		if (panelerContext && component && outer) {
-			$panelerContext.panelSlides[panelSlideId] = component;
-		}
-	});
-
-	$effect(() => {
-		panelSlideRef?.addEventListener('panel-button-clicked', (event: CustomEvent) => {
-			toggleSlidePanels(event);
-		});
-		return () => {
-			delete $panelerContext.panelSlides?.[panelSlideId];
-		};
-	});
-
-	function setVisible(vis: boolean) {
-		open = vis;
-	}
-
-	/** receives PanelpanelSlideId to show/hide */
-	function toggleSlidePanels(
-		event: CustomEvent<{ panelId: string; page: 'next' | 'prev'; data?: any }>
-	) {
-		const { panelId, page, data } = event.detail;
-		// get other context.panelSlideId
-		const registredPanelSlides = $panelerContext.panelSlides;
-		const slidePanelsKeys = Object.keys(registredPanelSlides);
-		const activeIdx = slidePanelsKeys.indexOf(panelSlideId);
-		let prevNext;
-
-		if (page === 'next' && slidePanelsKeys[activeIdx + 1]) {
-			prevNext = slidePanelsKeys[activeIdx + 1];
-			transitionTo = 'next';
-		}
-		if (page === 'prev' && slidePanelsKeys[activeIdx - 1]) {
-			prevNext = slidePanelsKeys[activeIdx - 1];
-			transitionTo = 'prev';
-		}
-		// transitionTo
-		actions.close();
-		// new activePanelSlide
-		// will be bound to the default child
-		if (prevNext) {
-			const activePanelSlideId = registredPanelSlides[prevNext].panelSlideId;
-			$panelerContext.activePanelSlideData[activePanelSlideId] = data;
-			registredPanelSlides[prevNext].actions.open();
-		}
-	}
-</script>
-
-{#if !outer}
-	<svelte:self
-		bind:this={component}
-		outer={true}
-		{panelSlideId}
-		{flow}
-		{open}
-		{style}
-		{children}
-		{panelSlideZoom}
-	/>
-{:else if open}
-	<div
-		bind:this={panelSlideRef}
-		out:slideOutNoName|global={{ duration: 125, delay: 20, direction: transitionTo }}
-		in:slideInNoName|global={{ duration: 150, delay: 150, direction: transitionTo }}
-		class="sidePanel {className}"
-		style:position={flow ?? ''}
-		{style}
-		{...rest}
-	>
-		{@render children?.({ panelSlideId, data: $panelerContext.activePanelSlideData[panelSlideId] })}
-	</div>
-	{#if panelSlideZoom}
-		<svelte:self class={className}>
-			{@render panelSlideZoom?.()}
-		</svelte:self>
-	{/if}
-{/if}
-
+<svelte:options />
+
+<script lang="ts">
+	import { transitions } from '../../utils/effects/transitions.js';
+	import { onMount, setContext, getContext } from 'svelte';
+	import type { PanelContextType } from './types.js';
+	const { slideInNoName, slideOutNoName } = transitions;
+
+	import type { SvelteComponent } from 'svelte';
+	import type { Snippet } from 'svelte';
+	import type { CommonProps, ElementProps } from '../../types/index.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+
+	type PanelSlideProps = CommonProps & {
+		/** Whether the panel is open or not */
+		open: boolean;
+
+		/** Component to be rendered in the panel */
+		component?: SvelteComponent;
+
+		/** Flow of the panel */
+		flow?: ElementProps['flow'];
+
+		/** Whether the panel is outer or not */
+		outer?: boolean;
+
+		/** Unique ID for the panel slide */
+		panelSlideId?: string;
+		panelSlideZoom?: import('svelte').Snippet;
+		/** Children   for the default content */
+		children?: Snippet<[any]>;
+	};
+	let panelSlideRef: any;
+	let {
+		class: className = '',
+		element = $bindable<HTMLInputElement>(panelSlideRef),
+		style = '',
+		open,
+		component,
+		flow = 'absolute',
+		outer,
+		panelSlideId = crypto.randomUUID() as string,
+		panelSlideZoom,
+		children,
+		...rest
+	}: PanelSlideProps = $props();
+
+	let transitionTo: 'prev' | 'next';
+
+	export const actions = {
+		open: () => {
+			setVisible(true);
+		},
+		close: () => {
+			setVisible(false);
+		},
+		toggle: () => {
+			setVisible(!open);
+		},
+		hasNextPrev: (nextPrev: 'next' | 'prev') => {
+			const registredPanelSlides = $panelerContext.panelSlides;
+			const slidePanelsKeys = Object.keys(registredPanelSlides);
+			const activeIdx = slidePanelsKeys.indexOf(panelSlideId);
+		}
+	};
+
+	const panelerContext = getContext<PanelContextType>('Paneler');
+	if (outer) setContext<string>('PanelSlide', panelSlideId);
+
+	$effect(() => {
+		if (!$panelerContext.panelSlides[panelSlideId] && outer && panelerContext) {
+			$panelerContext.panelSlides[panelSlideId] = {};
+		}
+	});
+
+	$effect(() => {
+		if (panelerContext && component && outer) {
+			$panelerContext.panelSlides[panelSlideId] = component;
+		}
+	});
+
+	$effect(() => {
+		panelSlideRef?.addEventListener('panel-button-clicked', (event: CustomEvent) => {
+			toggleSlidePanels(event);
+		});
+		return () => {
+			delete $panelerContext.panelSlides?.[panelSlideId];
+		};
+	});
+
+	function setVisible(vis: boolean) {
+		open = vis;
+	}
+
+	/** receives PanelpanelSlideId to show/hide */
+	function toggleSlidePanels(
+		event: CustomEvent<{ panelId: string; page: 'next' | 'prev'; data?: any }>
+	) {
+		const { panelId, page, data } = event.detail;
+		// get other context.panelSlideId
+		const registredPanelSlides = $panelerContext.panelSlides;
+		const slidePanelsKeys = Object.keys(registredPanelSlides);
+		const activeIdx = slidePanelsKeys.indexOf(panelSlideId);
+		let prevNext;
+
+		if (page === 'next' && slidePanelsKeys[activeIdx + 1]) {
+			prevNext = slidePanelsKeys[activeIdx + 1];
+			transitionTo = 'next';
+		}
+		if (page === 'prev' && slidePanelsKeys[activeIdx - 1]) {
+			prevNext = slidePanelsKeys[activeIdx - 1];
+			transitionTo = 'prev';
+		}
+		// transitionTo
+		actions.close();
+		// new activePanelSlide
+		// will be bound to the default child
+		if (prevNext) {
+			const activePanelSlideId = registredPanelSlides[prevNext].panelSlideId;
+			$panelerContext.activePanelSlideData[activePanelSlideId] = data;
+			registredPanelSlides[prevNext].actions.open();
+		}
+	}
+</script>
+
+{#if !outer}
+	<svelte:self
+		bind:this={component}
+		outer={true}
+		{panelSlideId}
+		{flow}
+		{open}
+		{style}
+		{children}
+		{panelSlideZoom}
+	/>
+{:else if open}
+	<div
+		bind:this={panelSlideRef}
+		out:slideOutNoName|global={{ duration: 125, delay: 20, direction: transitionTo }}
+		in:slideInNoName|global={{ duration: 150, delay: 150, direction: transitionTo }}
+		class="sidePanel {className}"
+		style:position={flow ?? ''}
+		{style}
+		{...rest}
+	>
+		{@render children?.({ panelSlideId, data: $panelerContext.activePanelSlideData[panelSlideId] })}
+	</div>
+	{#if panelSlideZoom}
+		<svelte:self class={className}>
+			{@render panelSlideZoom?.()}
+		</svelte:self>
+	{/if}
+{/if}
+
 <style>:root {
   --panel-margin-bottom: 2rem;
   --panel-bar-margin-bottom: 2rem;
@@ -184,4 +184,4 @@
   bottom: 0;
   padding: 1rem 2rem;
   width: 100%;
-}</style>
+}</style>

package/dist/ui/panel/Paneler.svelte

@@ -1,63 +1,63 @@
-<script lang="ts">
-	import { fade, slide } from 'svelte/transition';
-
-	import { setContext } from 'svelte';
-	import { writable, type Writable } from 'svelte/store';
-	import type { PanelContextType } from './types.js';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-	import type { CommonProps } from '../../types/index.js';
-	import { onEvent } from '../../utils/uses/event.js';
-
-	interface PanelerProps {
-		class?: string;
-		element?: HTMLInputElement | null;
-		style?: string;
-		dd?: string;
-		children?: import('svelte').Snippet;
-	}
-
-	let {
-		class: className = '',
-		element = null,
-		style = '',
-		dd = '',
-		children
-	}: PanelerProps = $props();
-
-	export const panelerStore: PanelContextType = writable({
-		activePanelId: undefined,
-		activePanelSlideData: {},
-		panelSlides: {},
-		panels: {}
-	});
-
-	setContext<PanelContextType>('Paneler', panelerStore);
-
-	let slideLeft: any;
-	let slideRight: any;
-
-	function toggleSlidePanels(event) {
-		console.log(event);
-		// get children from context
-		// alert("red");
-		/* slideLeft.actions.toggle();
-		slideRight.actions.toggle();
-
-		panelerStore.set({
-			...$panelerStore,
-			open: !$panelerStore?.open
-		});
-		setContext('PanelSlide', panelerStore); */
-	}
-</script>
-
-<div
-	use:onEvent={{ event: 'panel:button:clicked', action: toggleSlidePanels }}
-	transition:fade|global={{ duration: 50 }}
-	class={className}
-	{style}
->
-	{@render children?.()}
-</div>
-
-<style></style>
+<script lang="ts">
+	import { fade, slide } from 'svelte/transition';
+
+	import { setContext } from 'svelte';
+	import { writable, type Writable } from 'svelte/store';
+	import type { PanelContextType } from './types.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { CommonProps } from '../../types/index.js';
+	import { onEvent } from '../../utils/uses/event.js';
+
+	interface PanelerProps {
+		class?: string;
+		element?: HTMLInputElement | null;
+		style?: string;
+		dd?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		class: className = '',
+		element = null,
+		style = '',
+		dd = '',
+		children
+	}: PanelerProps = $props();
+
+	export const panelerStore: PanelContextType = writable({
+		activePanelId: undefined,
+		activePanelSlideData: {},
+		panelSlides: {},
+		panels: {}
+	});
+
+	setContext<PanelContextType>('Paneler', panelerStore);
+
+	let slideLeft: any;
+	let slideRight: any;
+
+	function toggleSlidePanels(event) {
+		console.log(event);
+		// get children from context
+		// alert("red");
+		/* slideLeft.actions.toggle();
+		slideRight.actions.toggle();
+
+		panelerStore.set({
+			...$panelerStore,
+			open: !$panelerStore?.open
+		});
+		setContext('PanelSlide', panelerStore); */
+	}
+</script>
+
+<div
+	use:onEvent={{ event: 'panel:button:clicked', action: toggleSlidePanels }}
+	transition:fade|global={{ duration: 50 }}
+	class={className}
+	{style}
+>
+	{@render children?.()}
+</div>
+
+<style></style>

package/dist/ui/panel/panel.scss

@@ -1,32 +1,32 @@
-@use "../../styles/slotui-mixins.scss";
-
-:root {
-    --panel-margin-bottom: 2rem;
-    --panel-bar-margin-bottom: 2rem;
-    --panel-bar-padding-right: var(--sld-pad-tiny);
-    --panel-bar-button-padding: 0 var(--sld-pad-tiny);
-    --panel-bar-button-border: 1px solid rgba(255, 255, 255, 0.05);
-    --panel-bar-button-background-color: rgba(255, 255, 255, 0.1);
-}
-
-.panel {
-    position: relative;
-    margin-bottom: var(--panel-margin-bottom);
-
-    .panel-bar {
-        margin-bottom: var(--panel-bar-margin-bottom);
-        display: flex;
-        min-width: auto;
-        align-items: center;
-        padding-right: var(--panel-bar-padding-right);
-
-        button {
-            padding: var(--panel-bar-button-padding);
-            border: var(--panel-bar-button-border);
-            background-color: var(--panel-bar-button-background-color);
-        }
-    }
-
-    .panelContent {
-    }
-}
+@use "../../styles/slotui-mixins.scss";
+
+:root {
+    --panel-margin-bottom: 2rem;
+    --panel-bar-margin-bottom: 2rem;
+    --panel-bar-padding-right: var(--sld-pad-tiny);
+    --panel-bar-button-padding: 0 var(--sld-pad-tiny);
+    --panel-bar-button-border: 1px solid rgba(255, 255, 255, 0.05);
+    --panel-bar-button-background-color: rgba(255, 255, 255, 0.1);
+}
+
+.panel {
+    position: relative;
+    margin-bottom: var(--panel-margin-bottom);
+
+    .panel-bar {
+        margin-bottom: var(--panel-bar-margin-bottom);
+        display: flex;
+        min-width: auto;
+        align-items: center;
+        padding-right: var(--panel-bar-padding-right);
+
+        button {
+            padding: var(--panel-bar-button-padding);
+            border: var(--panel-bar-button-border);
+            background-color: var(--panel-bar-button-background-color);
+        }
+    }
+
+    .panelContent {
+    }
+}