@medyll/idae-slotui-svelte 0.68.0 → 0.70.0

package/dist/base/alert/Alert.demo.svelte

@@ -1,17 +1,19 @@
-<script lang="ts">import ComponentDemo from "../demoer/DemoerComponent.svelte";
-import Button from "../../controls/button/Button.svelte";
-import Alert from "./Alert.svelte";
-import Demoer from "../demoer/Demoer.svelte";
-import DemoPage from "../demoer/DemoPage.svelte";
-import { parameters, componentArgs } from "./types.js";
-let code1 = `
+<script lang="ts">
+	import ComponentDemo from '../demoer/DemoerComponent.svelte';
+	import Button from '../../controls/button/Button.svelte';
+	import Alert from './Alert.svelte';
+	import Demoer from '../demoer/Demoer.svelte';
+	import DemoPage from '../demoer/DemoPage.svelte';
+	import { parameters, componentArgs } from './types.js';
+
+	let code1 = `
 <Alert {...activeParams}>
 	Simple alert with a button
 	{#snippet topButtonSlot()}
 		<Button>button</Button>
 	{/snippet}
 </Alert>`;
-let code2 = `
+	let code2 = `
 <Alert />	`;
 </script>
 

package/dist/base/alert/Alert.svelte

@@ -1,51 +1,59 @@
-<script lang="ts">import { fade } from "svelte/transition";
-import Divider from "../divider/Divider.svelte";
-import Button from "../../controls/button/Button.svelte";
-import Slotted from "../../utils/slotted/Slotted.svelte";
-import IconButton from "../../controls/button/IconButton.svelte";
-export const actions = {
-  open,
-  toggle,
-  close
-};
-let {
-  class: className,
-  message,
-  draggable = false,
-  level = $bindable("info"),
-  isOpen = $bindable(false),
-  element = $bindable(),
-  children,
-  alertTopButton,
-  alertMessage,
-  alertButtonZone,
-  alertButtonClose
-} = $props();
-const handleClick = (event) => {
-  if (event?.target?.getAttribute("data-close")) {
-    event.stopPropagation();
-    actions.close();
-  }
-};
-$effect(() => {
-  if (element) {
-    element.addEventListener("click", handleClick, true);
-  }
-  return () => {
-    if (element) {
-      element.removeEventListener("click", handleClick);
-    }
-  };
-});
-function open() {
-  isOpen = true;
-}
-function toggle() {
-  isOpen = !isOpen;
-}
-function close() {
-  isOpen = false;
-}
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import Divider from '../divider/Divider.svelte';
+	import Button from '../../controls/button/Button.svelte';
+	import type { ElementProps, ExpandProps } from '../../types/index.js';
+	import type { AlertProps } from './types.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import IconButton from '../../controls/button/IconButton.svelte';
+
+	export const actions: Record<'open' | 'toggle' | 'close', Function> = {
+		open,
+		toggle,
+		close
+	};
+
+	let {
+		class: className,
+		message,
+		draggable = false,
+		level = $bindable<ElementProps['levels']>('info'),
+		isOpen = $bindable<boolean>(false),
+		element = $bindable<HTMLDialogElement>(),
+		children,
+		alertTopButton,
+		alertMessage,
+		alertButtonZone,
+		alertButtonClose
+	}: ExpandProps<AlertProps> = $props();
+
+	const handleClick = (event: Event) => {
+		if ((event?.target as Element)?.getAttribute('data-close')) {
+			event.stopPropagation();
+			actions.close();
+		}
+	};
+
+	$effect(() => {
+		if (element) {
+			element.addEventListener('click', handleClick, true);
+		}
+		return () => {
+			if (element) {
+				element.removeEventListener('click', handleClick);
+			}
+		};
+	});
+
+	function open() {
+		isOpen = true;
+	}
+	function toggle() {
+		isOpen = !isOpen;
+	}
+	function close() {
+		isOpen = false;
+	}
 </script>
 
 {#if isOpen}

package/dist/base/avatar/Avatar.demo.svelte

@@ -1,14 +1,18 @@
-<script lang="ts">import ComponentDemo from "../demoer/DemoerComponent.svelte";
-import Demoer from "../demoer/Demoer.svelte";
-import DemoPage from "../demoer/DemoPage.svelte";
-import Icon from "../icon/Icon.svelte";
-import Avatar from "./Avatar.svelte";
-import { parameters, componentArgs } from "./types.js";
-let code1 = `
+<script lang="ts">
+	import ComponentDemo from '../demoer/DemoerComponent.svelte';
+	import Demoer from '../demoer/Demoer.svelte';
+	import DemoPage from '../demoer/DemoPage.svelte';
+	import Icon from '../icon/Icon.svelte';
+	import Avatar from './Avatar.svelte';
+
+	import { parameters, componentArgs } from './types.js';
+
+	let code1 = `
 <Avatar>
 	<Icon icon={activeParams?.icon} />
 </Avatar>`;
-let code2 = `
+
+	let code2 = `
 	<Avatar icon={icon} />`;
 </script>
 

package/dist/base/avatar/Avatar.preview.svelte

@@ -1,5 +1,6 @@
-<script lang="ts">import Icon from "../icon/Icon.svelte";
-import Avatar from "./Avatar.svelte";
+<script lang="ts">
+	import Icon from '../icon/Icon.svelte';
+	import Avatar from './Avatar.svelte';
 </script>
 
 <Avatar size="tiny" class="marg-4"><Icon icon="user" /></Avatar>

package/dist/base/avatar/Avatar.svelte

@@ -1,22 +1,27 @@
-<script lang="ts">import Icon from "../icon/Icon.svelte";
-import Content from "../../utils/content/Content.svelte";
-let {
-  icon = "icon-park-outline:avatar",
-  size,
-  iconSize,
-  class: className = "",
-  element = $bindable(),
-  children,
-  avatarBadge,
-  ...rest
-} = $props();
-const sizes = {
-  tiny: "2rem",
-  small: "4rem",
-  medium: "8rem",
-  large: "12rem",
-  full: "100%"
-};
+<script lang="ts">
+	import Icon from '../icon/Icon.svelte';
+	import type { ExpandProps } from '../../types/index.js';
+	import type { AvatarProps } from './types.js';
+	import Content from '../../utils/content/Content.svelte';
+
+	let {
+		icon = 'icon-park-outline:avatar',
+		size,
+		iconSize,
+		class: className = '',
+		element = $bindable(),
+		children,
+		avatarBadge,
+		...rest
+	}: ExpandProps<AvatarProps> = $props();
+
+	const sizes = {
+		tiny: '2rem',
+		small: '4rem',
+		medium: '8rem',
+		large: '12rem',
+		full: '100%'
+	};
 </script>
 
 <Content

package/dist/base/backdrop/Backdrop.demo.svelte

@@ -1,11 +1,14 @@
-<script lang="ts">import ComponentDemo from "../demoer/DemoerComponent.svelte";
-import Demoer from "../demoer/Demoer.svelte";
-import DemoPage from "../demoer/DemoPage.svelte";
-import { defaultsArgs } from "../demoer/demoer.utils.js";
-import Backdrop from "./Backdrop.svelte";
-import { BackdropDemoValues } from "./types.js";
-import { parameters, componentArgs } from "./types.js";
-let codeSlot = `
+<script lang="ts">
+	import ComponentDemo from '../demoer/DemoerComponent.svelte';
+	import Demoer from '../demoer/Demoer.svelte';
+	import DemoPage from '../demoer/DemoPage.svelte';
+	import { defaultsArgs } from '../demoer/demoer.utils.js';
+	import Backdrop from './Backdrop.svelte';
+	import { BackdropDemoValues } from './types.js';
+
+	import { parameters, componentArgs } from './types.js';
+
+	let codeSlot = `
 	<Backdrop
 		flow="relative"
 		onclick={()=>{}}> 
@@ -15,7 +18,8 @@ let codeSlot = `
 			</div>
 		</div>
 	</Backdrop>`;
-let BackdropRef;
+
+	let BackdropRef: Backdrop;
 </script>
 
 <ComponentDemo component="Backdrop">

package/dist/base/backdrop/Backdrop.svelte

@@ -1,40 +1,48 @@
-<script lang="ts">import { fade } from "svelte/transition";
-import Icon from "../icon/Icon.svelte";
-import Slotted from "../../utils/slotted/Slotted.svelte";
-export const actions = {
-  close: () => {
-    isOpen = false;
-  },
-  open: () => {
-    isOpen = true;
-  }
-};
-let {
-  class: className,
-  style,
-  flow = "fixed",
-  autoClose = false,
-  isOpen = $bindable(),
-  onclick,
-  isLoading = false,
-  element,
-  elementContent,
-  elementContentInner,
-  component,
-  componentProps,
-  classes = {},
-  children,
-  backdropLoading
-} = $props();
-$effect(() => {
-  element?.addEventListener("click", testAutoClose);
-  elementContentInner?.addEventListener("click", (event) => {
-    event.stopPropagation();
-  });
-});
-function testAutoClose() {
-  if (autoClose) isOpen = false;
-}
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import Icon from '../icon/Icon.svelte';
+	import type { CommonProps, ExpandProps } from '../../types/index.js';
+	import type { BackdropProps } from './types.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+
+	/** Backdrop controller */
+	export const actions = {
+		close: () => {
+			isOpen = false;
+		},
+		open: () => {
+			isOpen = true;
+		}
+	};
+
+	let {
+		class: className,
+		style,
+		flow = 'fixed',
+		autoClose = false,
+		isOpen = $bindable(),
+		onclick,
+		isLoading = false,
+		element,
+		elementContent,
+		elementContentInner,
+		component,
+		componentProps,
+		classes = {},
+		children,
+		backdropLoading
+	}: BackdropProps = $props();
+
+	$effect(() => {
+		element?.addEventListener('click', testAutoClose);
+		elementContentInner?.addEventListener('click', (event) => {
+			event.stopPropagation();
+		});
+	});
+
+	function testAutoClose() {
+		if (autoClose) isOpen = false;
+	}
 </script>
 
 {#if isOpen}

package/dist/base/badge/Badge.svelte

@@ -1,21 +1,25 @@
-<script lang="ts">import Slotted from "../../utils/slotted/Slotted.svelte";
-let {
-  value,
-  ceiling,
-  element,
-  position = { x: "right", y: "top" },
-  children
-} = $props();
-const xM = {
-  left: "left:0",
-  right: "right:0",
-  center: "left:50%;transformation:translate(-50%,0)"
-};
-const yM = {
-  top: "top:0",
-  bottom: "bottom:0",
-  center: "top:50%;transformation:translate(0,-50%)"
-};
+<script lang="ts">
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { BadgeProps } from './types.js';
+
+	let {
+		value,
+		ceiling,
+		element,
+		position = { x: 'right', y: 'top' },
+		children
+	}: BadgeProps = $props();
+
+	const xM = {
+		left: 'left:0',
+		right: 'right:0',
+		center: 'left:50%;transformation:translate(-50%,0)'
+	};
+	const yM = {
+		top: 'top:0',
+		bottom: 'bottom:0',
+		center: 'top:50%;transformation:translate(0,-50%)'
+	};
 </script>
 
 {#if value > ceiling}

package/dist/base/box/Box.demo.svelte

@@ -1,12 +1,15 @@
-<script lang="ts">import Box from "./Box.svelte";
-import Icon from "../icon/Icon.svelte";
-import ComponentDemo from "../demoer/DemoerComponent.svelte";
-import Demoer from "../demoer/Demoer.svelte";
-import DemoPage from "../demoer/DemoPage.svelte";
-import { BoxDemoValues } from "./types.js";
-import { defaultsArgs } from "../demoer/demoer.utils.js";
-import { parameters, componentArgs } from "./types.js";
-let code = `
+<script lang="ts">
+	import Box from './Box.svelte';
+	import Icon from '../icon/Icon.svelte';
+	import ComponentDemo from '../demoer/DemoerComponent.svelte';
+	import Demoer from '../demoer/Demoer.svelte';
+	import DemoPage from '../demoer/DemoPage.svelte';
+	import { BoxDemoValues } from './types.js';
+	import { defaultsArgs } from '../demoer/demoer.utils.js';
+
+	import { parameters, componentArgs } from './types.js';
+
+	let code = `
 <Box>
 	{#snippet titleBarTitle()}
 		<span>Title of the box</span>

package/dist/base/box/Box.svelte

@@ -1,39 +1,47 @@
-<script lang="ts">import TitleBar from "../titleBar/TitleBar.svelte";
-import Icon from "../icon/Icon.svelte";
-import Slotted from "../../utils/slotted/Slotted.svelte";
-import Content from "../../utils/content/Content.svelte";
-export const actions = {
-  open,
-  toggle,
-  close
-};
-let {
-  class: className = "",
-  element = $bindable(),
-  style = "",
-  isOpen = $bindable(true),
-  showCloseControl = true,
-  hasMenu = false,
-  title,
-  icon,
-  content,
-  bottomZone,
-  children,
-  titleBarTitle,
-  titleBarIcon,
-  boxBottomZone,
-  ...rest
-} = $props();
-function open() {
-  isOpen = true;
-}
-function toggle() {
-  isOpen = !isOpen;
-}
-function close() {
-  isOpen = false;
-}
-let closer = !showCloseControl ? {} : { onClose: () => actions.close() };
+<script lang="ts">
+	import TitleBar from '../titleBar/TitleBar.svelte';
+	import Icon from '../icon/Icon.svelte';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { BoxProps } from './types.js';
+	import type { ExpandProps } from '../../types/index.js';
+	import Content from '../../utils/content/Content.svelte';
+
+	/** box actions */
+	export const actions = {
+		open,
+		toggle,
+		close
+	};
+
+	let {
+		class: className = '',
+		element = $bindable(),
+		style = '',
+		isOpen = $bindable(true),
+		showCloseControl = true,
+		hasMenu = false,
+		title,
+		icon,
+		content,
+		bottomZone,
+		children,
+		titleBarTitle,
+		titleBarIcon,
+		boxBottomZone,
+		...rest
+	}: ExpandProps<BoxProps> = $props();
+
+	function open() {
+		isOpen = true;
+	}
+	function toggle() {
+		isOpen = !isOpen;
+	}
+	function close() {
+		isOpen = false;
+	}
+
+	let closer = !showCloseControl ? {} : { onClose: () => actions.close() };
 </script>
 
 {#if isOpen}

package/dist/base/breadCrumb/BreadCrumb.svelte

@@ -1,11 +1,15 @@
-<script lang="ts">import Slotted from "../../utils/slotted/Slotted.svelte";
-let {
-  class: className,
-  element,
-  children,
-  style,
-  breadList = []
-} = $props();
+<script lang="ts">
+	import type { ExpandProps } from '../../types/index.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { BreadCrumbProps } from './types.js';
+
+	let {
+		class: className,
+		element,
+		children,
+		style,
+		breadList = []
+	}: ExpandProps<BreadCrumbProps> = $props();
 </script>
 
 <nav bind:this={element} class="breadCrumb {className ?? ''}" {style}>

package/dist/base/cartouche/Cartouche.demo.svelte

@@ -1,11 +1,14 @@
-<script lang="ts">import Cartouche from "./Cartouche.svelte";
-import Demoer from "../demoer/Demoer.svelte";
-import DemoPage from "../demoer/DemoPage.svelte";
-import Icon from "../icon/Icon.svelte";
-import Button from "../../controls/button/Button.svelte";
-import ComponentDemo from "../demoer/DemoerComponent.svelte";
-import { parameters, componentArgs } from "./types.js";
-let code1 = `
+<script lang="ts">
+	import Cartouche from './Cartouche.svelte';
+	import Demoer from '../demoer/Demoer.svelte';
+	import DemoPage from '../demoer/DemoPage.svelte';
+	import Icon from '../icon/Icon.svelte';
+	import Button from '../../controls/button/Button.svelte';
+	import ComponentDemo from '../demoer/DemoerComponent.svelte';
+
+	import { parameters, componentArgs } from './types.js';
+
+	let code1 = `
 <Cartouche  class="marg-tb-1">
 	{#snippet cartoucheButtons()}
 		<Button size="medium">a button</Button>
@@ -21,7 +24,8 @@ let code1 = `
 	{/snippet}
 	<div class="pad-2 border-t">Some <br />Cartouche <br />content</div>
 </Cartouche>`;
-let code2 = `
+
+	let code2 = `
 	<Cartouche 
 		class="marg-tb-1" />`;
 </script>