@medyll/idae-slotui-svelte 0.122.1 → 0.124.0

package/dist/controls/button/Button.svelte

@@ -1,97 +1,97 @@
-<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
-	class={className + ' slotui-button '}
-	class:loading
-	bind:this={element}
-	use:popper={usePopperProps}
-	onclickAway={() => {
-		popperOpen = false;
-	}}
-	type={buttonType}
-	{tall}
-	{width}
-	variant={variant}
-	{selected}
-	{...rest}
-	style:aspect-ratio={ratio}
-	style="--content-padding:{buttonStart || icon ? `${startRef?.clientWidth ?? '0.5rem'}px` : '0.5rem'}"
->
-	{#if buttonStart || icon}
-		<div
-			bind:this={startRef}
-			class="start"
-			style="--start-position:{(children ?? value) ? 'absolute' : 'relative'}"
-		>
-			<Slotted child={buttonStart}>
-				<Icon iconSize="small" {icon} />
-			</Slotted>
-		</div>
-	{/if}
-	{#if children ?? value}
-		<div
-			class="central {ellipsis? 'ellipsis' : ''}"
-			style="--content-padding:{buttonStart || icon ? `${startRef?.clientWidth ?? '0.5rem'}px` : '0.5rem'}"
-		>
-			<Slotted child={children}>{value ?? ''}</Slotted>
-		</div>
-	{/if}
-	{#if buttonEnd || iconEnd}
-		<div class="end">
-			<Slotted child={buttonEnd}>
-				<Icon icon={iconEnd} />
-			</Slotted>
-		</div>
-	{/if}
-
-	{#if loading}
-		<div class="loadingButtonZone">
-				<Slotted child={buttonLoadingIcon} /> 
-		</div>
-	{/if}
-	{#if showChip}
-		<span class="chip"></span>
-	{/if}
-</button>
-
+<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
+	class={className + ' slotui-button '}
+	class:loading
+	bind:this={element}
+	use:popper={usePopperProps}
+	onclickAway={() => {
+		popperOpen = false;
+	}}
+	type={buttonType}
+	{tall}
+	{width}
+	variant={variant}
+	{selected}
+	{...rest}
+	style:aspect-ratio={ratio}
+	style="--content-padding:{buttonStart || icon ? `${startRef?.clientWidth ?? '0.5rem'}px` : '0.5rem'}"
+>
+	{#if buttonStart || icon}
+		<div
+			bind:this={startRef}
+			class="start"
+			style="--start-position:{(children ?? value) ? 'absolute' : 'relative'}"
+		>
+			<Slotted child={buttonStart}>
+				<Icon iconSize="small" {icon} />
+			</Slotted>
+		</div>
+	{/if}
+	{#if children ?? value}
+		<div
+			class="central {ellipsis? 'ellipsis' : ''}"
+			style="--content-padding:{buttonStart || icon ? `${startRef?.clientWidth ?? '0.5rem'}px` : '0.5rem'}"
+		>
+			<Slotted child={children}>{value ?? ''}</Slotted>
+		</div>
+	{/if}
+	{#if buttonEnd || iconEnd}
+		<div class="end">
+			<Slotted child={buttonEnd}>
+				<Icon icon={iconEnd} />
+			</Slotted>
+		</div>
+	{/if}
+
+	{#if loading}
+		<div class="loadingButtonZone">
+				<Slotted child={buttonLoadingIcon} /> 
+		</div>
+	{/if}
+	{#if showChip}
+		<span class="chip"></span>
+	{/if}
+</button>
+
 <style global>:root {
   --sld-button-font-size: inherit;
   --sld-button-radius: var(--sld-radius-small);
@@ -852,4 +852,4 @@ input[type=submit].slotui-button.flat:focus {
   to {
     transform: rotate(360deg);
   }
-}</style>
+}</style>

package/dist/controls/button/ButtonAction.svelte

@@ -1,57 +1,57 @@
-<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}">
-	<Button {...rest} {tall} bind:element variant="naked">
-		<Slotted child={children} />
-	</Button>
-	<Button
-		{disabled}
-		onclick={() => {
-			isOpen = true;
-		}}
-		{tall}
-		variant="naked" 
-		icon={{icon:chevron,rotation:isOpen ? 180 : 0}}
-		class="chevron" />
-</div>
-{#if isOpen && !disabled}
-	<Popper bind:isOpen parentNode={holder} stickToHookWidth={true} autoClose={true} {...popperProps}>
-		<Slotted child={popperContent} />
-	</Popper>
-{/if}
-
+<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}">
+	<Button {...rest} {tall} bind:element variant="naked">
+		<Slotted child={children} />
+	</Button>
+	<Button
+		{disabled}
+		onclick={() => {
+			isOpen = true;
+		}}
+		{tall}
+		variant="naked" 
+		icon={{icon:chevron,rotation:isOpen ? 180 : 0}}
+		class="chevron" />
+</div>
+{#if isOpen && !disabled}
+	<Popper bind:isOpen parentNode={holder} stickToHookWidth={true} autoClose={true} {...popperProps}>
+		<Slotted child={popperContent} />
+	</Popper>
+{/if}
+
 <style>:root {
   --sld-button-font-size: inherit;
   --sld-button-radius: var(--sld-radius-small);
@@ -820,4 +820,4 @@ input[type=submit].slotui-button.flat:focus {
 }
 .button-action .chevron {
   flex-shrink: 1;
-}</style>
+}</style>

package/dist/controls/button/ButtonMenu.svelte

@@ -1,57 +1,57 @@
-<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
-	onclick={() => {
-		isOpen = true;
-	}}
-	{...rest}
-	bind:element
-	iconEnd={{ icon: chevron, rotation: isOpen ? 180 : 0 }}
-	{children}
-/>
-{#if isOpen && !disabled}
-	<Popper
-		bind:element={popperElement}
-		bind:isOpen
-		parentNode={element}
-		{...popperProps}
-		position="BC"
-		stickToHookWidth={true}
-	>
-		<MenuList {...menuProps}>
-			{#snippet children({ item })}
-				{#if menuItem}
-					{@render menuItem?.({ item })}
-				{:else}
-					<MenuListItem {...item} />
-				{/if}
-			{/snippet}
-		</MenuList>
-	</Popper>
-{/if}
-
+<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
+	onclick={() => {
+		isOpen = true;
+	}}
+	{...rest}
+	bind:element
+	iconEnd={{ icon: chevron, rotation: isOpen ? 180 : 0 }}
+	{children}
+/>
+{#if isOpen && !disabled}
+	<Popper
+		bind:element={popperElement}
+		bind:isOpen
+		parentNode={element}
+		{...popperProps}
+		position="BC"
+		stickToHookWidth={true}
+	>
+		<MenuList {...menuProps}>
+			{#snippet children({ item })}
+				{#if menuItem}
+					{@render menuItem?.({ item })}
+				{:else}
+					<MenuListItem {...item} />
+				{/if}
+			{/snippet}
+		</MenuList>
+	</Popper>
+{/if}
+
 <style>.buttonActionRoot {
   display: inline-block;
   position: relative;
@@ -82,4 +82,4 @@
 }
 .action:hover {
   background-color: rgba(255, 255, 255, 0.5);
-}</style>
+}</style>

package/dist/controls/button/IconButton.svelte

@@ -1,45 +1,45 @@
-<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}>
-	<Icon style="display:inline; " {rotation} icon={finalIcon}   />
-</Button>
+<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}>
+	<Icon style="display:inline; " {rotation} icon={finalIcon}   />
+</Button>

package/dist/controls/button/button-action.scss

@@ -1,8 +1,8 @@
-.button-action {
-  display: inline-flex;
-  position: relative;
-  align-items: center;
-  .chevron {
-    flex-shrink: 1;
-  }
-}
+.button-action {
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+  .chevron {
+    flex-shrink: 1;
+  }
+}

package/dist/controls/button/button-menu.scss

@@ -1,36 +1,36 @@
-.buttonActionRoot {
-  display: inline-block;
-  position: relative;
-  width: 64px;
-
- 
-}
-
-.buttonText {
-  text-align: center;
-}
-.button {
-  display: block;
-  width: 64px;
-
-  &:hover {
-    background-color: rgba(255, 255, 255, 0.3);
-  }
-
-
-}
-
-.action {
-  position: absolute;
-  display: block;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  background-color: rgba(255, 255, 255, 0.1);
-  width: 30%;
-  padding: 0.5rem;
-
-  &:hover {
-    background-color: rgba(255, 255, 255, 0.5);
-  }
-}
+.buttonActionRoot {
+  display: inline-block;
+  position: relative;
+  width: 64px;
+
+ 
+}
+
+.buttonText {
+  text-align: center;
+}
+.button {
+  display: block;
+  width: 64px;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.3);
+  }
+
+
+}
+
+.action {
+  position: absolute;
+  display: block;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  background-color: rgba(255, 255, 255, 0.1);
+  width: 30%;
+  padding: 0.5rem;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.5);
+  }
+}