@medyll/idae-slotui-svelte 0.67.0 → 0.69.0

package/dist/controls/button/Button.demo.svelte

@@ -1,47 +1,53 @@
-<script lang="ts">import MenuList from "../../ui/menuList/MenuList.svelte";
-import MenuListItem from "../../ui/menuList/MenuListItem.svelte";
-import ComponentDemo from "../../base/demoer/DemoerComponent.svelte";
-import Demoer from "../../base/demoer/Demoer.svelte";
-import DemoPage from "../../base/demoer/DemoPage.svelte";
-import Icon from "../../base/icon/Icon.svelte";
-import Button from "./Button.svelte";
-import { uiPresets } from "../../utils/engine/presets.js";
-import ButtonAction from "./ButtonAction.svelte";
-import ButtonMenu from "./ButtonMenu.svelte";
-import { parameters, componentArgs } from "./types.js";
-let multiple = {
-  bgTheme: {
-    none: { bgTheme: void 0 },
-    primary: { bgTheme: "primary" },
-    secondary: { bgTheme: "secondary" },
-    tertiary: { bgTheme: "tertiary" }
-  }
-};
-let parametersMenu = {
-  position: {
-    type: "stickyPosition",
-    values: uiPresets.stickyPosition
-  }
-};
-let styleParameters = {
-  color: {
-    type: "color-preset",
-    values: [void 0, "primary", "secondary", "tertiary"]
-  },
-  contained: {
-    type: "boolean",
-    values: [true, false]
-  },
-  bordered: {
-    type: "boolean",
-    values: [true, false]
-  },
-  link: {
-    type: "boolean",
-    values: [true, false]
-  }
-};
-let code = `
+<script lang="ts">
+	import MenuList from '../../ui/menuList/MenuList.svelte';
+	import MenuListItem from '../../ui/menuList/MenuListItem.svelte';
+	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
+	import Demoer from '../../base/demoer/Demoer.svelte';
+	import DemoPage from '../../base/demoer/DemoPage.svelte';
+	import Icon from '../../base/icon/Icon.svelte';
+	import Button from './Button.svelte';
+	import { uiPresets } from '../../utils/engine/presets.js';
+	import ButtonAction from './ButtonAction.svelte';
+	import ButtonMenu from './ButtonMenu.svelte';
+
+	import { parameters, componentArgs } from './types.js';
+
+	let multiple = {
+		bgTheme: {
+			none: { bgTheme: undefined },
+			primary: { bgTheme: 'primary' },
+			secondary: { bgTheme: 'secondary' },
+			tertiary: { bgTheme: 'tertiary' }
+		}
+	};
+
+	let parametersMenu: any = {
+		position: {
+			type: 'stickyPosition',
+			values: uiPresets.stickyPosition
+		}
+	};
+	/** */
+	let styleParameters: any = {
+		color: {
+			type: 'color-preset',
+			values: [undefined, 'primary', 'secondary', 'tertiary']
+		},
+		contained: {
+			type: 'boolean',
+			values: [true, false]
+		},
+		bordered: {
+			type: 'boolean',
+			values: [true, false]
+		},
+		link: {
+			type: 'boolean',
+			values: [true, false]
+		}
+	};
+
+	let code = `
 <Button onclick={()=>{}} >
 	My button
 	{#snippet buttonStart()}

package/dist/controls/button/Button.svelte

@@ -1,36 +1,41 @@
-<script lang="ts">import { popper } from "../../ui/popper/usePopper.js";
-import Icon from "../../base/icon/Icon.svelte";
-import Slotted from "../../utils/slotted/Slotted.svelte";
-import { tallPreset, widthPreset } from "../../types/index.js";
-let {
-  class: className,
-  style,
-  element = $bindable(),
-  type: buttonType = "button",
-  icon = $bindable(),
-  iconEnd = $bindable(),
-  variant = "bordered",
-  bgTheme,
-  usePopperProps = { disabled: true },
-  loading,
-  showChip,
-  popperOpen,
-  width = widthPreset.auto,
-  tall = tallPreset.small,
-  nowrap,
-  ellipsis = true,
-  selected = false,
-  value,
-  reverse = false,
-  ratio,
-  buttonPopper,
-  buttonStart,
-  buttonEnd,
-  buttonLoadingIcon,
-  children,
-  ...rest
-} = $props();
-let startRef = $state(void 0);
+<script lang="ts">
+	import { popper} from '../../ui/popper/usePopper.js';
+	import Icon from '../../base/icon/Icon.svelte';
+	import type { ButtonProps } from './types.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import { tallPreset, widthPreset, type ExpandProps } from '../../types/index.js';
+
+	let {
+		class: className,
+		style,
+		element = $bindable(),
+		type: buttonType = 'button',
+		icon = $bindable(),
+		iconEnd = $bindable(),
+		variant = 'bordered',
+		bgTheme,
+		usePopperProps={disabled:true},
+		loading,
+		showChip,
+		popperOpen,
+		width = widthPreset.auto,
+		tall = tallPreset.small,
+		nowrap,
+		ellipsis=true,
+		selected = false,
+		value,
+		reverse = false,
+		ratio,
+		buttonPopper,
+		buttonStart,
+		buttonEnd,
+		buttonLoadingIcon,
+		children,
+		...rest
+	}: ButtonProps = $props();
+
+	let startRef: HTMLDivElement | undefined = $state<HTMLDivElement | undefined>(undefined);
+  
 </script>
 
 <button

package/dist/controls/button/ButtonAction.svelte

@@ -1,22 +1,35 @@
-<script lang="ts">import Popper from "../../ui/popper/Popper.svelte";
-import Button from "./Button.svelte";
-import Icon from "../../base/icon/Icon.svelte";
-import Slotted from "../../utils/slotted/Slotted.svelte";
-let {
-  element,
-  class: className = "",
-  menuProps = {},
-  popperProps = {},
-  popperContent = void 0,
-  disabled = false,
-  variant = "bordered",
-  tall = "small",
-  children,
-  ...rest
-} = $props();
-let holder;
-let isOpen = $state(popperProps?.isOpen);
-let chevron = "fluent:chevron-down-20-regular";
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { PopperProps } from '../../ui/popper/types.js';
+	import type { MenuProps } from '../../ui/menu/types.js';
+	import Popper from '../../ui/popper/Popper.svelte';
+	import Button from './Button.svelte';
+	import type { ButtonProps } from './types.js';
+	import Icon from '../../base/icon/Icon.svelte';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { ExpandProps } from '../../types/index.js';
+
+	type ButtonActionProps = ButtonProps & {
+		menuProps?: MenuProps;
+		popperProps?: PopperProps;
+		popperContent?: Snippet;
+	};
+
+	let {
+		element,
+		class: className = '',
+		menuProps = {},
+		popperProps = {},
+		popperContent = undefined,
+		disabled = false,
+		variant = 'bordered',
+		tall = 'small',
+		children,
+		...rest
+	}: ExpandProps<ButtonActionProps> = $props();
+	let holder: HTMLDivElement;
+	let isOpen = $state(popperProps?.isOpen);
+	let chevron = 'fluent:chevron-down-20-regular';
 </script>
 
 <div bind:this={holder} class="button button-action selected {variant} tall-{tall} {className}">

package/dist/controls/button/ButtonMenu.svelte

@@ -1,19 +1,25 @@
-<script lang="ts" generics="T">import Popper from "../../ui/popper/Popper.svelte";
-import MenuList from "../../ui/menuList/MenuList.svelte";
-import Button from "./Button.svelte";
-import MenuListItem from "../../ui/menuList/MenuListItem.svelte";
-let {
-  menuProps = {},
-  popperProps = {},
-  disabled = false,
-  element = $bindable(),
-  popperElement,
-  menuItem,
-  children,
-  ...rest
-} = $props();
-let isOpen = $state(popperProps?.isOpen);
-let chevron = $derived(disabled ? "fluent:chevron-up-20-regular" : "fluent:chevron-up-12-down");
+<script lang="ts" generics="T">
+	import Popper from '../../ui/popper/Popper.svelte';
+	import MenuList from '../../ui/menuList/MenuList.svelte';
+	import Button from './Button.svelte';
+	import type { ButtonMenuProps } from './types.js';
+	import type { MenuListProps } from '../../ui/menuList/types.js';
+	import type { PopperProps } from '../../ui/popper/types.js';
+	import MenuListItem from '../../ui/menuList/MenuListItem.svelte';
+
+	let {
+		menuProps = {} as MenuListProps<T>,
+		popperProps = {} as PopperProps,
+		disabled = false,
+		element = $bindable(),
+		popperElement,
+		menuItem,
+		children,
+		...rest
+	}: ButtonMenuProps<T> = $props();
+
+	let isOpen = $state(popperProps?.isOpen);
+	let chevron = $derived(disabled ? 'fluent:chevron-up-20-regular' : 'fluent:chevron-up-12-down');
 </script>
 
 <Button

package/dist/controls/button/IconButton.svelte

@@ -1,16 +1,43 @@
-<script lang="ts">import Icon from "../../base/icon/Icon.svelte";
-import Button from "./Button.svelte";
-let {
-  element,
-  icon,
-  ratio = "1/1",
-  iconFontSize = "full",
-  rotation = 0,
-  size = "mini",
-  children,
-  ...rest
-} = $props();
-let finalIcon = $derived(typeof icon === "object" ? { ...icon, iconSize: iconFontSize } : { icon, iconSize: iconFontSize });
+<script lang="ts">
+	import Icon from '../../base/icon/Icon.svelte';
+	import Button from './Button.svelte';
+	import type { ElementProps } from '../../types/index.js';
+	import type { Snippet } from 'svelte';
+	import type { ButtonProps } from './types.js';
+	type IconButtonProps = {
+		/** Icon to be displayed */
+		icon: ElementProps['icon'];
+		showShip?: boolean;
+		/** Font size of the icon */
+		iconFontSize?: ElementProps['iconSize'];
+		element?: HTMLButtonElement | null;
+
+		/** Aspect ratio of the icon button */
+		ratio?: string;
+
+		/** Whether to show the chip or not */
+		showChip?: boolean;
+
+		/** Rotation of the icon */
+		rotation?: number;
+
+		size?: ElementProps['width'];
+		/** Children   for the default content */
+		children?: Snippet;
+	} & Partial<ButtonProps>;
+
+	let {
+		element,
+		icon,
+		ratio = '1/1',
+		iconFontSize = 'full',
+		rotation = 0,
+		size = 'mini',
+		children,
+		...rest
+	}: IconButtonProps = $props();
+
+	let finalIcon = $derived(typeof icon === 'object' ? {...icon,iconSize:iconFontSize} : {icon,iconSize:iconFontSize});
 </script>
 
 <Button variant="square" bind:element width={size} tall="unset" {ratio} {...rest}>

package/dist/controls/checkbox/Checkbox.demo.svelte

@@ -1,12 +1,16 @@
-<script lang="ts">import Checkbox from "./Checkbox.svelte";
-import ComponentDemo from "../../base/demoer/DemoerComponent.svelte";
-import Demoer from "../../base/demoer/Demoer.svelte";
-import DemoPage from "../../base/demoer/DemoPage.svelte";
-import { defaultsArgs } from "../../base/demoer/demoer.utils.js";
-import { CheckboxDemoValues } from "./types.js";
-let parameters = CheckboxDemoValues;
-let componentArgs = defaultsArgs(parameters);
-let code = `
+<script lang="ts">
+	import Checkbox from './Checkbox.svelte';
+
+	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
+	import Demoer from '../../base/demoer/Demoer.svelte';
+	import DemoPage from '../../base/demoer/DemoPage.svelte';
+	import { defaultsArgs } from '../../base/demoer/demoer.utils.js';
+	import { CheckboxDemoValues } from './types.js';
+
+	let parameters = CheckboxDemoValues;
+	let componentArgs = defaultsArgs(parameters);
+
+	let code = `
 <Checkbox>
 	label
 </Checkbox>`;

package/dist/controls/checkbox/Checkbox.svelte

@@ -1,17 +1,21 @@
-<script lang="ts">import Slotted from "../../utils/slotted/Slotted.svelte";
-let {
-  title,
-  indeterminate = $bindable(false),
-  class: className = "",
-  inputElement = $bindable(),
-  labelElement,
-  checked = $bindable(false),
-  value = $bindable(void 0),
-  disabled = $bindable(false),
-  dense,
-  children,
-  ...rest
-} = $props();
+<script lang="ts">
+	import type { CommonProps, ElementProps, ExpandProps } from '../../types/index.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { CheckboxProps } from './types.js';
+
+	let {
+		title,
+		indeterminate = $bindable(false),
+		class: className = '',
+		inputElement = $bindable(),
+		labelElement,
+		checked = $bindable(false),
+		value = $bindable(undefined),
+		disabled = $bindable(false),
+		dense,
+		children,
+		...rest
+	}: ExpandProps<CheckboxProps> = $props();
 </script>
 
 <label class="checkbox-root" class:disabled class:indeterminate bind:this={labelElement}>

package/dist/controls/confirm/Confirm.demo.svelte

@@ -1,17 +1,21 @@
-<script lang="ts">import Button from "../button/Button.svelte";
-import Confirm from "./Confirm.svelte";
-import ComponentDemo from "../../base/demoer/DemoerComponent.svelte";
-import Demoer from "../../base/demoer/Demoer.svelte";
-import DemoPage from "../../base/demoer/DemoPage.svelte";
-import { parameters, componentArgs } from "./types.js";
-let codeSlot = `
+<script lang="ts">
+	import Button from '../button/Button.svelte';
+	import Confirm from './Confirm.svelte';
+
+	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
+	import Demoer from '../../base/demoer/Demoer.svelte';
+	import DemoPage from '../../base/demoer/DemoPage.svelte';
+	import { parameters, componentArgs } from './types.js';
+
+	let codeSlot = `
 <Confirm {...activeParams}>
 	{#snippet confirmInitial()}
 		<Button icon="fa-solid:question" size="large">Would you please click once ?</Button>
 	{/snippet}
 	<Button type="submit" size="medium">confirm</Button>
 </Confirm>`;
-let codeProps = `
+
+	let codeProps = `
 <Confirm 
 	buttonInitial={{
 		icon: {icon:'fa-solid:question', size:'auto',color:'green'},

package/dist/controls/confirm/Confirm.preview.svelte

@@ -1,5 +1,6 @@
-<script lang="ts">import Button from "../button/Button.svelte";
-import Confirm from "./Confirm.svelte";
+<script lang="ts">
+	import Button from '../button/Button.svelte';
+	import Confirm from './Confirm.svelte';
 </script>
 
 <div>

package/dist/controls/confirm/Confirm.svelte

@@ -1,70 +1,93 @@
-<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";
-let step = $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
-} = $props();
-let rost = rest;
-let loadingState = $state(false);
-function handleClickInitial(event) {
-  event.preventDefault();
-  event.stopPropagation();
-  step = "confirm";
-}
-function handleClickCancel(event) {
-  event.preventDefault();
-  event.stopPropagation();
-  step = "initial";
-}
-function handleAction(event) {
-  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";
-      }
-    }
-  }
-}
-onDestroy(() => {
-  step = "initial";
-});
+<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> --> 

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

@@ -1,16 +1,20 @@
-<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 = `
+<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 = `
+
+	let code2 = `
 <InPlaceEdit {...activeParams} />`;
-let savedValue = "s";
+
+	let savedValue = 's';
 </script>
 
 <ComponentDemo component="InPlaceEdit" cite="Edit in place,  save in haste. - Developer's Proverb">