@medyll/idae-slotui-svelte 0.26.0 → 0.28.0

package/dist/controls/button/Button.svelte

@@ -1,59 +1,64 @@
-<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,
-  element = $bindable(),
-  style,
-  type: buttonType = "button",
-  icon = $bindable(),
-  iconEnd = $bindable(),
-  variant = "bordered",
-  bgTheme,
-  usePopper,
-  loading,
-  showChip,
-  popperOpen,
-  width = widthPreset.auto,
-  tall = tallPreset.small,
-  nowrap,
-  selected = false,
-  value,
-  reverse = false,
-  ratio,
-  buttonPopper,
-  buttonStart,
-  buttonEnd,
-  buttonLoadingIcon,
-  children,
-  ...rest
-} = $props();
-let startRef;
-let clientWidth = $state();
+<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);
+ 
+	$inspect(startRef?.clientWidth)
 </script>
 
 <button
 	class={className + ' button '}
 	class:loading
 	bind:this={element}
-	use:popper={usePopper}
+	use:popper={usePopperProps}
 	onclickAway={() => {
 		popperOpen = false;
 	}}
 	type={buttonType}
 	{tall}
 	{width}
-	{nowrap}
 	{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}
-			bind:clientWidth
 			class="button-start"
 			style="--start-position:{(children ?? value) ? 'absolute' : 'relative'}"
 		>
@@ -64,14 +69,14 @@ let clientWidth = $state();
 	{/if}
 	{#if children ?? value}
 		<div
-			class="button-central"
-			style="--content-padding:{buttonStart || icon ? `${clientWidth}px` : ''}"
+			class="button-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="button-action">
+		<div class="button-end">
 			<Slotted child={buttonEnd}>
 				<Icon icon={iconEnd} />
 			</Slotted>
@@ -80,12 +85,7 @@ let clientWidth = $state();
 
 	{#if loading}
 		<div class="loadingButtonZone">
-			<div>
-				<Slotted child={buttonLoadingIcon}>
-					<Icon icon="loading" rotate />
-				</Slotted>
-			</div>
-			<div></div>
+				<Slotted child={buttonLoadingIcon} /> 
 		</div>
 	{/if}
 	{#if showChip}
@@ -101,7 +101,7 @@ let clientWidth = $state();
   --sld-button-text-align: center;
   --sld-button-padding: 0;
   --sld-button-background: var(--sld-color-foreground-alpha-high);
-  --sld-button-contained-background: var(--sld-color-primary);
+  --sld-button-contained-background: var(--sld-color-primary-alpha-high);
   --sld-button-hover-border-color: var(--sld-color-primary);
   --sld-button-active-border-color: var(--sld-color-secondary);
   --sld-button-focus-border-color: var(--sld-color-primary);
@@ -128,6 +128,7 @@ let clientWidth = $state();
   --preset-width: var(--sld-width-small);
   width: var(--preset-width-small);
   border: none;
+  border-radius: 0;
   margin: 0;
   text-align: var(--sld-button-text-align);
   font-size: var(--sld-button-font-size);
@@ -135,35 +136,13 @@ let clientWidth = $state();
   color: var(--sld-color-foreground);
   padding: var(--sld-button-padding);
   position: relative;
-  display: inline-block;
+  display: inline-flex;
   transition: all 0.2s ease-in-out;
   overflow: hidden;
   cursor: pointer;
-  align-content: center;
-  align-items: center;
+  align-content: stretch;
+  align-items: stretch;
   background: var(--sld-button-background);
-  /*  &:focus {
-      outline: 1px solid var(--sld-button-focus-border-color);
-      outline-offset: 2px;
-      box-shadow: var(--sld-button-focus-shadow);
-  }
-  &:focus-visible {
-      outline: 1px solid var(--sld-button-focus-border-color);
-      outline-offset: -2px;
-      box-shadow: var(--sld-button-focus-shadow);
-  }
-  &:focus:not(:focus-visible) {
-      box-shadow: var(--sld-button-focus-shadow);
-  }
-  &:hover {
-      background-color: var(--sld-button-hover-background);
-      box-shadow: var(--sld-button-hover-shadow);
-  }
-
-  &:active {
-      transform: translateY(1px);
-      box-shadow: var(--sld-button-active-shadow);
-  } */
   --preset-width: var(--sld-width-small);
   width: var(--preset-width-small);
 }
@@ -496,36 +475,58 @@ let clientWidth = $state();
 :global(button.button) .button-start,
 :global(input[type="button"]) .button-start,
 :global(input[type="submit"]) .button-start {
-  --preset-ellipsis-line: 1;
-  position: absolute;
+  position: relative;
   top: 0;
   left: 0;
-  height: 100%;
-  display: flex;
+  max-height: 100%;
   align-items: center;
-  justify-content: center;
-  padding: 0 0.5rem;
+  align-content: center;
+  padding: 0 0.15rem;
+  display: block;
 }
 
-:global(button) .button-start[ellipsis], :global(button) .button-start.ellipsis,
-:global(.button) .button-start[ellipsis],
-:global(.button) .button-start.ellipsis,
-:global(button.button) .button-start[ellipsis],
-:global(button.button) .button-start.ellipsis,
-:global(input[type="button"]) .button-start[ellipsis],
-:global(input[type="button"]) .button-start.ellipsis,
-:global(input[type="submit"]) .button-start[ellipsis],
-:global(input[type="submit"]) .button-start.ellipsis {
+:global(button) .button-start:empty,
+:global(.button) .button-start:empty,
+:global(button.button) .button-start:empty,
+:global(input[type="button"]) .button-start:empty,
+:global(input[type="submit"]) .button-start:empty {
+  display: none;
+}
+
+:global(button) .button-central,
+:global(.button) .button-central,
+:global(button.button) .button-central,
+:global(input[type="button"]) .button-central,
+:global(input[type="submit"]) .button-central {
+  --preset-ellipsis-line: 1;
+  max-width: 100%;
+  max-height: 100%;
+  flex: 1;
+  align-items: center;
+  align-content: center;
+  padding-right: calc(var(--content-padding, 0.25rem) / 2);
+  text-align: var(--sld-button-text-align, center);
+}
+
+:global(button) .button-central[ellipsis], :global(button) .button-central.ellipsis,
+:global(.button) .button-central[ellipsis],
+:global(.button) .button-central.ellipsis,
+:global(button.button) .button-central[ellipsis],
+:global(button.button) .button-central.ellipsis,
+:global(input[type="button"]) .button-central[ellipsis],
+:global(input[type="button"]) .button-central.ellipsis,
+:global(input[type="submit"]) .button-central[ellipsis],
+:global(input[type="submit"]) .button-central.ellipsis {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-:global(button) .button-start.ellipsis-line-1,
-:global(.button) .button-start.ellipsis-line-1,
-:global(button.button) .button-start.ellipsis-line-1,
-:global(input[type="button"]) .button-start.ellipsis-line-1,
-:global(input[type="submit"]) .button-start.ellipsis-line-1 {
+:global(button) .button-central.ellipsis-line-1,
+:global(.button) .button-central.ellipsis-line-1,
+:global(button.button) .button-central.ellipsis-line-1,
+:global(input[type="button"]) .button-central.ellipsis-line-1,
+:global(input[type="submit"]) .button-central.ellipsis-line-1 {
   display: -webkit-box;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
@@ -535,11 +536,11 @@ let clientWidth = $state();
   --preset-ellipsis-line: 1;
 }
 
-:global(button) .button-start.ellipsis-line-2,
-:global(.button) .button-start.ellipsis-line-2,
-:global(button.button) .button-start.ellipsis-line-2,
-:global(input[type="button"]) .button-start.ellipsis-line-2,
-:global(input[type="submit"]) .button-start.ellipsis-line-2 {
+:global(button) .button-central.ellipsis-line-2,
+:global(.button) .button-central.ellipsis-line-2,
+:global(button.button) .button-central.ellipsis-line-2,
+:global(input[type="button"]) .button-central.ellipsis-line-2,
+:global(input[type="submit"]) .button-central.ellipsis-line-2 {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
@@ -549,11 +550,11 @@ let clientWidth = $state();
   --preset-ellipsis-line: 2;
 }
 
-:global(button) .button-start.ellipsis-line-3,
-:global(.button) .button-start.ellipsis-line-3,
-:global(button.button) .button-start.ellipsis-line-3,
-:global(input[type="button"]) .button-start.ellipsis-line-3,
-:global(input[type="submit"]) .button-start.ellipsis-line-3 {
+:global(button) .button-central.ellipsis-line-3,
+:global(.button) .button-central.ellipsis-line-3,
+:global(button.button) .button-central.ellipsis-line-3,
+:global(input[type="button"]) .button-central.ellipsis-line-3,
+:global(input[type="submit"]) .button-central.ellipsis-line-3 {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
@@ -563,11 +564,11 @@ let clientWidth = $state();
   --preset-ellipsis-line: 3;
 }
 
-:global(button) .button-start.ellipsis-line-4,
-:global(.button) .button-start.ellipsis-line-4,
-:global(button.button) .button-start.ellipsis-line-4,
-:global(input[type="button"]) .button-start.ellipsis-line-4,
-:global(input[type="submit"]) .button-start.ellipsis-line-4 {
+:global(button) .button-central.ellipsis-line-4,
+:global(.button) .button-central.ellipsis-line-4,
+:global(button.button) .button-central.ellipsis-line-4,
+:global(input[type="button"]) .button-central.ellipsis-line-4,
+:global(input[type="submit"]) .button-central.ellipsis-line-4 {
   display: -webkit-box;
   -webkit-line-clamp: 4;
   -webkit-box-orient: vertical;
@@ -577,11 +578,11 @@ let clientWidth = $state();
   --preset-ellipsis-line: 4;
 }
 
-:global(button) .button-start.ellipsis-line-5,
-:global(.button) .button-start.ellipsis-line-5,
-:global(button.button) .button-start.ellipsis-line-5,
-:global(input[type="button"]) .button-start.ellipsis-line-5,
-:global(input[type="submit"]) .button-start.ellipsis-line-5 {
+:global(button) .button-central.ellipsis-line-5,
+:global(.button) .button-central.ellipsis-line-5,
+:global(button.button) .button-central.ellipsis-line-5,
+:global(input[type="button"]) .button-central.ellipsis-line-5,
+:global(input[type="submit"]) .button-central.ellipsis-line-5 {
   display: -webkit-box;
   -webkit-line-clamp: 5;
   -webkit-box-orient: vertical;
@@ -591,28 +592,6 @@ let clientWidth = $state();
   --preset-ellipsis-line: 5;
 }
 
-:global(button) .button-start:empty,
-:global(.button) .button-start:empty,
-:global(button.button) .button-start:empty,
-:global(input[type="button"]) .button-start:empty,
-:global(input[type="submit"]) .button-start:empty {
-  display: none;
-}
-
-:global(button) .button-central,
-:global(.button) .button-central,
-:global(button.button) .button-central,
-:global(input[type="button"]) .button-central,
-:global(input[type="submit"]) .button-central {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 0.5rem;
-  text-align: var(--sld-button-text-align);
-}
-
 :global(button) .button-central:empty,
 :global(.button) .button-central:empty,
 :global(button.button) .button-central:empty,
@@ -621,36 +600,32 @@ let clientWidth = $state();
   display: none;
 }
 
-:global(button) .button-action,
-:global(.button) .button-action,
-:global(button.button) .button-action,
-:global(input[type="button"]) .button-action,
-:global(input[type="submit"]) .button-action {
-  position: absolute;
-  top: 0;
-  right: 0;
-  height: 100%;
-  display: flex;
+:global(button) .button-end,
+:global(.button) .button-end,
+:global(button.button) .button-end,
+:global(input[type="button"]) .button-end,
+:global(input[type="submit"]) .button-end {
+  position: relative;
   align-items: center;
-  justify-content: center;
-  width: var(--w-tiny);
+  align-content: center;
   padding: 0 0.5rem;
+  text-align: center;
   cursor: pointer;
 }
 
-:global(button) .button-action:empty,
-:global(.button) .button-action:empty,
-:global(button.button) .button-action:empty,
-:global(input[type="button"]) .button-action:empty,
-:global(input[type="submit"]) .button-action:empty {
+:global(button) .button-end:empty,
+:global(.button) .button-end:empty,
+:global(button.button) .button-end:empty,
+:global(input[type="button"]) .button-end:empty,
+:global(input[type="submit"]) .button-end:empty {
   display: none;
 }
 
-:global(button) .button-action:hover,
-:global(.button) .button-action:hover,
-:global(button.button) .button-action:hover,
-:global(input[type="button"]) .button-action:hover,
-:global(input[type="submit"]) .button-action:hover {
+:global(button) .button-end:hover,
+:global(.button) .button-end:hover,
+:global(button.button) .button-end:hover,
+:global(input[type="button"]) .button-end:hover,
+:global(input[type="submit"]) .button-end:hover {
   background-color: var(--sld-button-action-hover-background);
 }
 

package/dist/controls/button/Button.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type UsePopperProps } from '../../ui/popper/usePopper.js';
+import type { ButtonProps } from './types.js';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,32 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Button: $$__sveltets_2_IsomorphicComponent<{
-    element?: HTMLButtonElement | undefined;
-    type?: ("button" | "submit" | "reset") | undefined;
-    icon?: import("../../types/index.js").ElementProps["icon"] | undefined;
-    wrap?: import("../../types/index.js").ElementProps["wrap"] | undefined;
-    iconEnd?: import("../../types/index.js").ElementProps["icon"] | undefined;
-    bgTheme?: string | undefined;
-    usePopper?: UsePopperProps | undefined;
-    popperOpen?: boolean | undefined;
-    loading?: boolean | undefined;
-    showChip?: boolean | undefined;
-    variant?: import("../../types/index.js").ElementProps["buttonVariant"] | undefined;
-    width?: import("../../types/index.js").ElementProps["width"] | undefined;
-    nowrap?: boolean | undefined;
-    tall?: import("../../types/index.js").ElementProps["tall"] | undefined;
-    selected?: boolean | undefined;
-    value?: string | undefined;
-    reverse?: boolean | undefined;
-    rounded?: (boolean | string) | undefined;
-    ratio?: string | undefined;
-    children?: import("svelte").Snippet | undefined;
-    buttonPopper?: import("svelte").Snippet | undefined;
-    buttonStart?: import("svelte").Snippet | undefined;
-    buttonEnd?: import("svelte").Snippet | undefined;
-    buttonLoadingIcon?: import("svelte").Snippet | undefined;
-}, {
+declare const Button: $$__sveltets_2_IsomorphicComponent<ButtonProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "icon" | "element" | "iconEnd">;
 type Button = InstanceType<typeof Button>;