@medyll/idae-slotui-svelte 0.27.0 → 0.28.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/alert/types.d.ts

@@ -1,9 +1,9 @@
-import { type CommonProps, type ElementProps } from '../../types/index.js';
-import type { Snippet } from 'svelte';
-import type { DemoerStoryProps } from '../demoer/types.js';
+import { type CommonProps, type ElementProps } from "../../types/index.js";
+import type { Snippet } from "svelte";
+import type { DemoerStoryProps } from "../demoer/types.js";
 export interface AlertProps extends CommonProps {
     /** alert level */
-    level?: ElementProps['levels'];
+    level?: ElementProps["levels"];
     /** message to be shown */
     message?: string;
     /** make the alert draggable */

package/dist/base/alert/types.js

@@ -1,24 +1,24 @@
-import { statusPreset } from '../../types/index.js';
-import { demoerArgs } from '../demoer/demoer.utils.js';
+import { statusPreset, } from "../../types/index.js";
+import { demoerArgs } from "../demoer/demoer.utils.js";
 export const alertDemoValues = {
     isOpen: {
-        type: 'boolean',
+        type: "boolean",
         values: [true, false],
-        default: true
+        default: true,
     },
     draggable: {
-        type: 'boolean',
+        type: "boolean",
         values: [true, false],
-        default: false
+        default: false,
     },
     level: {
-        type: 'levels',
+        type: "levels",
         values: Object.keys(statusPreset),
-        default: statusPreset.info
+        default: statusPreset.info,
     },
     message: {
-        type: 'string',
-        values: ['Some messages']
-    }
+        type: "string",
+        values: ["Some messages"],
+    },
 };
 export let { parameters, componentArgs } = demoerArgs(alertDemoValues);

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/avatar/types.d.ts

@@ -1,4 +1,4 @@
-import type { DemoerStoryProps } from '../demoer/types.js';
+import type { DemoerStoryProps } from "../demoer/types.js";
 export declare enum statusPreset {
     success = "success",
     warning = "warning",
@@ -7,19 +7,19 @@ export declare enum statusPreset {
     info = "info",
     discrete = "discrete"
 }
-import type { CommonProps, ElementProps } from '../../types/index.js';
-import type { Snippet } from 'svelte';
+import type { CommonProps, ElementProps } from "../../types/index.js";
+import type { Snippet } from "svelte";
 export type AvatarProps = CommonProps & {
     /** icon name 	*/
     icon?: string;
     /**
      * size of the avatar
      */
-    size?: ElementProps['width'];
+    size?: ElementProps["width"];
     /**
      * size of the icon
      */
-    iconSize?: ElementProps['iconSize'];
+    iconSize?: ElementProps["iconSize"];
     element?: HTMLElement;
     class?: string;
     children?: Snippet;

package/dist/base/avatar/types.js

@@ -1,4 +1,4 @@
-import { widthPreset, iconSize } from '../../types/index.js';
+import { widthPreset, iconSize } from "../../types/index.js";
 export var statusPreset;
 (function (statusPreset) {
     statusPreset["success"] = "success";
@@ -8,19 +8,19 @@ export var statusPreset;
     statusPreset["info"] = "info";
     statusPreset["discrete"] = "discrete";
 })(statusPreset || (statusPreset = {}));
-import { demoerArgs } from '../demoer/demoer.utils.js';
+import { demoerArgs } from "../demoer/demoer.utils.js";
 export const AvatarDemoValues = {
     icon: {
-        type: 'icon',
-        default: 'user'
+        type: "icon",
+        default: "user",
     },
     size: {
-        type: 'width',
-        default: widthPreset.med
+        type: "width",
+        default: widthPreset.med,
     },
     iconSize: {
-        type: 'iconSize',
-        default: iconSize.medium
-    }
+        type: "iconSize",
+        default: iconSize.medium,
+    },
 };
 export let { parameters, componentArgs } = demoerArgs(AvatarDemoValues);

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/backdrop/types.d.ts

@@ -1,16 +1,16 @@
-import type { CommonProps, ElementProps } from '../../types/index.js';
-import type { Snippet } from 'svelte';
-import type { DemoerStoryProps } from '../demoer/types.js';
+import type { CommonProps, ElementProps } from "../../types/index.js";
+import type { Snippet } from "svelte";
+import type { DemoerStoryProps } from "../demoer/types.js";
 export interface BackdropProps<T = any, C = any> extends CommonProps {
     /** backdrop class */
     class?: string;
     /** backdrop style */
     style?: string;
     /**
-            css position mode of the backdrop
-            @type {'absolute' | 'fixed' | 'relative'}
-        */
-    flow?: ElementProps['flow'];
+              css position mode of the backdrop
+              @type {'absolute' | 'fixed' | 'relative'}
+          */
+    flow?: ElementProps["flow"];
     /** auto-close backdrop on click */
     autoClose?: boolean;
     /** show or hide the backdrop */

package/dist/base/backdrop/types.js

@@ -1,20 +1,20 @@
-import { demoerArgs } from '../demoer/demoer.utils.js';
+import { demoerArgs } from "../demoer/demoer.utils.js";
 export const BackdropDemoValues = {
     isOpen: {
-        type: 'boolean',
-        default: true
+        type: "boolean",
+        default: true,
     },
     autoClose: {
-        type: 'boolean',
-        default: true
+        type: "boolean",
+        default: true,
     },
     isLoading: {
-        type: 'boolean',
-        default: false
+        type: "boolean",
+        default: false,
     },
     flow: {
-        type: 'flow',
-        default: 'fixed'
-    }
+        type: "flow",
+        default: "fixed",
+    },
 };
 export let { parameters, componentArgs } = demoerArgs(BackdropDemoValues);

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>