@medyll/idae-slotui-svelte 0.122.1 → 0.123.0

package/dist/controls/confirm/Confirm.svelte

@@ -1,158 +1,158 @@
-<script lang="ts" generics="T=any">
-	import { fade } from 'svelte/transition';
-	import Button from '../button/Button.svelte';
-	import { onDestroy } from 'svelte';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-	import type { ConfirmProps } from './types.js';
-	import type { HTMLAttributes } from 'svelte/elements';
-
-	let step: string = $state('initial'); 
-
-	let {
-		class: className = '',
-		initialRef = null,
-		contentRef = null,
-		tooltipInitial = null,
-		primaryInitial = '',
-		primaryConfirm = '',
-		iconInitial = '',
-		iconColorInitial = 'inherit',
-		primary = 'confirm',
-		icon = 'check-circle-outline',
-		iconColor = 'green',
-		tall,
-		autoClose = true,
-		loading,
-		data,
-		action = () => {},
-		iconCancel = { icon: 'mdi:cancel-bold', color: 'red',iconSize:'large' },
-		variant,
-		buttonInitial,
-		buttonConfirm,
-		buttonCancel,
-		children,
-		confirmInitial,
-		...rest
-	}: ConfirmProps<T> & Partial<Omit<HTMLDivElement, 'style'>> = $props();
-
-	let rost = rest as HTMLAttributes<any>;
-
-	let loadingState = $state(false);
-
-	function handleClickInitial(event: any) {
-		event.preventDefault();
-		event.stopPropagation();
-		step = 'confirm';
-	}
-
-	function handleClickCancel(event: any) {
-		event.preventDefault();
-		event.stopPropagation();
-		step = 'initial';
-	}
-
-	function handleAction(event: any) {
-		event.preventDefault();
-		event.stopPropagation();
-		if (action) {
-			if (action instanceof Promise) loadingState = true;
-
-			try {
-				loadingState = true;
-				action(data).then(() => {
-					loadingState = false;
-					if (autoClose) step = 'initial';
-
-					return data;
-				});
-			} catch (e) {
-				if (typeof action == 'function') {
-					action(data);
-					if (autoClose) step = 'initial';
-				}
-			}
-			/* Promise.resolve(action).then(
-				() => { 
-					loadingState = false;
-					console.log('action done');
-					if (autoClose) step = 'initial';
-				},
-				() => {
-					console.log('action done done');
-					if (autoClose) step = 'initial';
-				}
-			); */
-		}
-	}
-
-	onDestroy(() => {
-		step = 'initial';
-	});
-</script>
-
-<!-- #todo <Content>somecontent</Content> --> 
-<div {...rost} class="confirm {className}">
-	{#if step === 'initial'}
-		<!-- svelte-ignore a11y_click_events_have_key_events -->
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div
-			class={'confirm-initial ' + className}
-			in:fade|global
-			onclick={handleClickInitial}
-			bind:this={initialRef}
-			title={tooltipInitial}
-		>
-			<Slotted child={confirmInitial} slotArgs={{ step }}>
-			{#if buttonInitial}
-				<Button {tall} {variant} {...buttonInitial}  />
-			{:else}
-				<Button
-					{tall}
-					variant= {variant}
-					width="full"
-					icon={{ icon: iconInitial, color: iconColorInitial }}
-					title={tooltipInitial}
-				>
-					{primaryInitial} 
-				</Button>
-			{/if} 
-			</Slotted>
-		</div>
-	{/if}
-	{#if step === 'confirm'}
-			{#if buttonCancel}
-				<Button {tall}   {...buttonCancel} onclick={(event:any)=>{handleClickCancel(event);buttonCancel?.onclick?.(event)}}    />
-			{:else}
-				<Button
-					onclick={handleClickCancel}  
-					variant= {'naked'}
-					icon={iconCancel}
-					{tall}
-					title="cancel"
-					value="cancel"
-					width="auto"
-				/>
-			{/if}
-		<div class={className + ' confirm-validate'} in:fade|global bind:this={contentRef}> 
-			<Slotted child={children} slotArgs={{ step }}>
-			{#if buttonConfirm}
-				<Button {tall} {variant} {...buttonConfirm}  onclick={(event:any)=>{handleAction(event);buttonConfirm?.onclick?.(event)}}    />
-			{:else}
-				<Button
-					title="confirm"
-					loading={loadingState}
-					{tall}
-					onclick={handleAction}
-					{icon} 
-					variant= {variant}
-					value={primaryConfirm}
-				/>
-			{/if}
-			</Slotted>
-		</div>
-	{/if}
-</div>
-
+<script lang="ts" generics="T=any">
+	import { fade } from 'svelte/transition';
+	import Button from '../button/Button.svelte';
+	import { onDestroy } from 'svelte';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { ConfirmProps } from './types.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let step: string = $state('initial'); 
+
+	let {
+		class: className = '',
+		initialRef = null,
+		contentRef = null,
+		tooltipInitial = null,
+		primaryInitial = '',
+		primaryConfirm = '',
+		iconInitial = '',
+		iconColorInitial = 'inherit',
+		primary = 'confirm',
+		icon = 'check-circle-outline',
+		iconColor = 'green',
+		tall,
+		autoClose = true,
+		loading,
+		data,
+		action = () => {},
+		iconCancel = { icon: 'mdi:cancel-bold', color: 'red',iconSize:'large' },
+		variant,
+		buttonInitial,
+		buttonConfirm,
+		buttonCancel,
+		children,
+		confirmInitial,
+		...rest
+	}: ConfirmProps<T> & Partial<Omit<HTMLDivElement, 'style'>> = $props();
+
+	let rost = rest as HTMLAttributes<any>;
+
+	let loadingState = $state(false);
+
+	function handleClickInitial(event: any) {
+		event.preventDefault();
+		event.stopPropagation();
+		step = 'confirm';
+	}
+
+	function handleClickCancel(event: any) {
+		event.preventDefault();
+		event.stopPropagation();
+		step = 'initial';
+	}
+
+	function handleAction(event: any) {
+		event.preventDefault();
+		event.stopPropagation();
+		if (action) {
+			if (action instanceof Promise) loadingState = true;
+
+			try {
+				loadingState = true;
+				action(data).then(() => {
+					loadingState = false;
+					if (autoClose) step = 'initial';
+
+					return data;
+				});
+			} catch (e) {
+				if (typeof action == 'function') {
+					action(data);
+					if (autoClose) step = 'initial';
+				}
+			}
+			/* Promise.resolve(action).then(
+				() => { 
+					loadingState = false;
+					console.log('action done');
+					if (autoClose) step = 'initial';
+				},
+				() => {
+					console.log('action done done');
+					if (autoClose) step = 'initial';
+				}
+			); */
+		}
+	}
+
+	onDestroy(() => {
+		step = 'initial';
+	});
+</script>
+
+<!-- #todo <Content>somecontent</Content> --> 
+<div {...rost} class="confirm {className}">
+	{#if step === 'initial'}
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class={'confirm-initial ' + className}
+			in:fade|global
+			onclick={handleClickInitial}
+			bind:this={initialRef}
+			title={tooltipInitial}
+		>
+			<Slotted child={confirmInitial} slotArgs={{ step }}>
+			{#if buttonInitial}
+				<Button {tall} {variant} {...buttonInitial}  />
+			{:else}
+				<Button
+					{tall}
+					variant= {variant}
+					width="full"
+					icon={{ icon: iconInitial, color: iconColorInitial }}
+					title={tooltipInitial}
+				>
+					{primaryInitial} 
+				</Button>
+			{/if} 
+			</Slotted>
+		</div>
+	{/if}
+	{#if step === 'confirm'}
+			{#if buttonCancel}
+				<Button {tall}   {...buttonCancel} onclick={(event:any)=>{handleClickCancel(event);buttonCancel?.onclick?.(event)}}    />
+			{:else}
+				<Button
+					onclick={handleClickCancel}  
+					variant= {'naked'}
+					icon={iconCancel}
+					{tall}
+					title="cancel"
+					value="cancel"
+					width="auto"
+				/>
+			{/if}
+		<div class={className + ' confirm-validate'} in:fade|global bind:this={contentRef}> 
+			<Slotted child={children} slotArgs={{ step }}>
+			{#if buttonConfirm}
+				<Button {tall} {variant} {...buttonConfirm}  onclick={(event:any)=>{handleAction(event);buttonConfirm?.onclick?.(event)}}    />
+			{:else}
+				<Button
+					title="confirm"
+					loading={loadingState}
+					{tall}
+					onclick={handleAction}
+					{icon} 
+					variant= {variant}
+					value={primaryConfirm}
+				/>
+			{/if}
+			</Slotted>
+		</div>
+	{/if}
+</div>
+
 <style>.confirm {
   display: flex;
   align-items: center;
@@ -161,4 +161,4 @@
 .confirm-validate {
   display: flex;
   align-items: center;
-}</style>
+}</style>

package/dist/controls/confirm/confirm.scss

@@ -1,12 +1,12 @@
-@use "../../styles/slotui-mixins.scss";
-.confirm {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    &-initial {
-    }
-    &-validate {
-        display: flex;
-        align-items: center;
-    }
-}
+@use "../../styles/slotui-mixins.scss";
+.confirm {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    &-initial {
+    }
+    &-validate {
+        display: flex;
+        align-items: center;
+    }
+}

package/dist/controls/inplaceedit/InPlaceEdit.demo.svelte

@@ -1,41 +1,41 @@
-<script lang="ts">
-	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
-	import Demoer from '../../base/demoer/Demoer.svelte';
-	import DemoPage from '../../base/demoer/DemoPage.svelte';
-	import InPlaceEdit from './InPlaceEdit.svelte';
-	import { parameters, componentArgs } from './types.js';
-
-	let code1 = `
-<InPlaceEdit 
-    value={value}
-    onSave={(newValue) => console.log('Saved:', newValue)}
-/>`;
-
-	let code2 = `
-<InPlaceEdit {...activeParams} />`;
-
-	let savedValue = 's';
-</script>
-
-<ComponentDemo component="InPlaceEdit" cite="Edit in place,  save in haste. - Developer's Proverb">
-	<DemoPage component="InPlaceEdit" code={code1}>
-		<Demoer {parameters} {componentArgs}>
-			{#snippet children({ activeParams })}
-				<div class="flex-v gap-medium">
-					<div>
-						<InPlaceEdit {...activeParams} onSave={() => {}} />
-					</div>
-					<p>Last saved value: {savedValue}</p>
-				</div>
-			{/snippet}
-		</Demoer>
-	</DemoPage>
-
-	<DemoPage title="Using props" component="InPlaceEdit" code={code2}>
-		<Demoer {parameters} {componentArgs}>
-			{#snippet children({ activeParams })}
-				<InPlaceEdit {...activeParams} />
-			{/snippet}
-		</Demoer>
-	</DemoPage>
-</ComponentDemo>
+<script lang="ts">
+	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
+	import Demoer from '../../base/demoer/Demoer.svelte';
+	import DemoPage from '../../base/demoer/DemoPage.svelte';
+	import InPlaceEdit from './InPlaceEdit.svelte';
+	import { parameters, componentArgs } from './types.js';
+
+	let code1 = `
+<InPlaceEdit 
+    value={value}
+    onSave={(newValue) => console.log('Saved:', newValue)}
+/>`;
+
+	let code2 = `
+<InPlaceEdit {...activeParams} />`;
+
+	let savedValue = 's';
+</script>
+
+<ComponentDemo component="InPlaceEdit" cite="Edit in place,  save in haste. - Developer's Proverb">
+	<DemoPage component="InPlaceEdit" code={code1}>
+		<Demoer {parameters} {componentArgs}>
+			{#snippet children({ activeParams })}
+				<div class="flex-v gap-medium">
+					<div>
+						<InPlaceEdit {...activeParams} onSave={() => {}} />
+					</div>
+					<p>Last saved value: {savedValue}</p>
+				</div>
+			{/snippet}
+		</Demoer>
+	</DemoPage>
+
+	<DemoPage title="Using props" component="InPlaceEdit" code={code2}>
+		<Demoer {parameters} {componentArgs}>
+			{#snippet children({ activeParams })}
+				<InPlaceEdit {...activeParams} />
+			{/snippet}
+		</Demoer>
+	</DemoPage>
+</ComponentDemo>

package/dist/controls/inplaceedit/InPlaceEdit.svelte

@@ -1,109 +1,109 @@
-<script lang="ts">
-	import Icon from '../../base/icon/Icon.svelte';
-	import TextField from '../textfield/TextField.svelte';
-	import { be } from '@medyll/idae-be';
-
-	type InPlaceEditProps = {
-		value: string;
-		spanElement: HTMLElement;
-		inputElement: HTMLInputElement;
-		inputValue?: any;
-		editing?: boolean;
-		onSave?: (newValue: string) => void;
-	};
-
-	let initialId: string = 'myText';
-	let popperId: string = 'myPopover';
-
-	let {
-		value = '',
-		inputElement,
-		inputValue,
-		editing = $bindable(),
-		onSave = (newValue) => {}
-	}: InPlaceEditProps = $props();
-
-	function saveChanges() {
-		editing = false;
-		onSave(inputValue);
-	}
-
-	function handleKeyDown(event: KeyboardEvent) {
-		if (event.key === 'Enter') {
-			saveChanges();
-		} else if (event.key === 'Escape') {
-			editing = false;
-			inputValue = value;
-		}
-	}
-
-	function handleBlur() {
-		editing = false;
-		saveChanges();
-	}
-
-	inputValue = !editing ? value : inputValue;
-
-	$effect(() => {
-		if (editing && inputElement) {
-			inputElement.focus();
-		}
-		popper.addEventListener('toggle', (event) => {
-			if (event.newState === 'open') {
-				console.log('Le popover est ouvert');
-				editing = true;
-			} else {
-				console.log('Le popover est fermé');
-				editing = false;
-			}
-		});
-
-		console.log(be(`#${initialId}`));
-	});
-
-	$effect(() => {
-		editing;
-		be(popper).clonePosition(`#${initialId}`, { useTransform: false });
-		if (!editing) {
-			if (popper.matches(':popover-open')) {
-				popper.hidePopover();
-			}
-		}
-	});
-
-	let popper;
-</script>
-
-<form />
-
-<div class="border pos-rel">
-	<dialog id={popperId} open={editing} popover="auto" class="popper" bind:this={popper}>
-		<div class="flex gap-4 pad-1" style="gap:4px">
-			<TextField
-				bind:element={inputElement}
-				bind:value={inputValue}
-				style="field-sizing: content;min-width: 350px;"
-				onblur={handleBlur}
-				onkeydown={handleKeyDown}
-				>{#snippet inputLast()}
-					<button variant="contained square" class="button">
-						<Icon style="display:block;width:100%;" icon="fluent-mdl2:accept-medium" />
-					</button>
-				{/snippet}
-			</TextField>
-			<button
-				variant="flat naked square"
-				width="tiny"
-				class="button"
-				style="align-items:center;align-content:center;text-align:center;display:block;"
-				popovertarget={popperId}
-				popovertargetaction="hide"
-			>
-				<Icon icon="icons8:cancel" style="display:block;width:100%;" />
-			</button>
-		</div>
-	</dialog>
-</div>
-<button role="button" id={initialId} popovertarget={popperId} popovertargetaction="toggle">
-	Afficher le popover
-</button>
+<script lang="ts">
+	import Icon from '../../base/icon/Icon.svelte';
+	import TextField from '../textfield/TextField.svelte';
+	import { be } from '@medyll/idae-be';
+
+	type InPlaceEditProps = {
+		value: string;
+		spanElement: HTMLElement;
+		inputElement: HTMLInputElement;
+		inputValue?: any;
+		editing?: boolean;
+		onSave?: (newValue: string) => void;
+	};
+
+	let initialId: string = 'myText';
+	let popperId: string = 'myPopover';
+
+	let {
+		value = '',
+		inputElement,
+		inputValue,
+		editing = $bindable(),
+		onSave = (newValue) => {}
+	}: InPlaceEditProps = $props();
+
+	function saveChanges() {
+		editing = false;
+		onSave(inputValue);
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		if (event.key === 'Enter') {
+			saveChanges();
+		} else if (event.key === 'Escape') {
+			editing = false;
+			inputValue = value;
+		}
+	}
+
+	function handleBlur() {
+		editing = false;
+		saveChanges();
+	}
+
+	inputValue = !editing ? value : inputValue;
+
+	$effect(() => {
+		if (editing && inputElement) {
+			inputElement.focus();
+		}
+		popper.addEventListener('toggle', (event) => {
+			if (event.newState === 'open') {
+				console.log('Le popover est ouvert');
+				editing = true;
+			} else {
+				console.log('Le popover est fermé');
+				editing = false;
+			}
+		});
+
+		console.log(be(`#${initialId}`));
+	});
+
+	$effect(() => {
+		editing;
+		be(popper).clonePosition(`#${initialId}`, { useTransform: false });
+		if (!editing) {
+			if (popper.matches(':popover-open')) {
+				popper.hidePopover();
+			}
+		}
+	});
+
+	let popper;
+</script>
+
+<form />
+
+<div class="border pos-rel">
+	<dialog id={popperId} open={editing} popover="auto" class="popper" bind:this={popper}>
+		<div class="flex gap-4 pad-1" style="gap:4px">
+			<TextField
+				bind:element={inputElement}
+				bind:value={inputValue}
+				style="field-sizing: content;min-width: 350px;"
+				onblur={handleBlur}
+				onkeydown={handleKeyDown}
+				>{#snippet inputLast()}
+					<button variant="contained square" class="button">
+						<Icon style="display:block;width:100%;" icon="fluent-mdl2:accept-medium" />
+					</button>
+				{/snippet}
+			</TextField>
+			<button
+				variant="flat naked square"
+				width="tiny"
+				class="button"
+				style="align-items:center;align-content:center;text-align:center;display:block;"
+				popovertarget={popperId}
+				popovertargetaction="hide"
+			>
+				<Icon icon="icons8:cancel" style="display:block;width:100%;" />
+			</button>
+		</div>
+	</dialog>
+</div>
+<button role="button" id={initialId} popovertarget={popperId} popovertargetaction="toggle">
+	Afficher le popover
+</button>