@medyll/idae-slotui-svelte 0.26.0 → 0.28.0

package/dist/controls/button/types.js

@@ -1,45 +1,47 @@
-import { demoerArgs } from '../../base/demoer/demoer.utils.js';
-import { buttonVariant, densePreset, uiPresets, widthPreset } from '../../types/index.js';
+import { demoerArgs } from "../../base/demoer/demoer.utils.js";
+import { buttonVariant, densePreset, uiPresets, widthPreset, } from "../../types/index.js";
 const ButtonDemoValues = {
     type: {
-        type: 'string',
-        values: ['button', 'submit', 'reset'],
-        default: 'button'
+        type: "string",
+        values: ["button", "submit", "reset"],
+        default: "button",
     },
     icon: {
-        type: 'icon'
+        type: "icon",
+        values: ["add", "user"],
+        default: "add",
     },
     width: {
-        type: 'width',
-        default: widthPreset.med
+        type: "width",
+        default: widthPreset.med,
     },
     tall: {
-        type: 'tall',
-        default: densePreset.default
+        type: "tall",
+        default: densePreset.default,
     },
     bgTheme: {
-        type: 'theme',
-        default: 'primary'
+        type: "theme",
+        default: "primary",
     },
     variant: {
-        type: 'buttonVariant',
-        default: buttonVariant.contained
+        type: "buttonVariant",
+        default: buttonVariant.contained,
     },
-    nowrap: {
-        type: 'boolean',
-        default: false
+    ellipsis: {
+        type: "boolean",
+        default: false,
     },
     selected: {
-        type: 'boolean',
-        default: false
+        type: "boolean",
+        default: false,
     },
     reverse: {
-        type: 'boolean',
-        default: false
+        type: "boolean",
+        default: false,
     },
     loading: {
-        type: 'boolean',
-        default: false
-    }
+        type: "boolean",
+        default: false,
+    },
 };
 export let { parameters, componentArgs } = demoerArgs(ButtonDemoValues);

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
   primary="confirm deletion" />`;
 </script>

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,67 +1,90 @@
-<script lang="ts" generics="T=any">import { fade } from "svelte/transition";
-import Button from "../button/Button.svelte";
-import IconButton from "../button/IconButton.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: "fluent-mdl2:navigate-back", color: "red" },
-  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 IconButton from '../button/IconButton.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: 'fluent-mdl2:navigate-back', color: 'red' },
+		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">

package/dist/controls/inplaceedit/InPlaceEdit.svelte

@@ -1,58 +1,77 @@
-<script lang="ts">import Icon from "../../base/icon/Icon.svelte";
-import TextField from "../textfield/TextField.svelte";
-import { be } from "@medyll/idae-be";
-let initialId = "myText";
-let popperId = "myPopover";
-let {
-  value = "",
-  inputElement,
-  inputValue,
-  editing = $bindable(),
-  onSave = (newValue) => {
-  }
-} = $props();
-function saveChanges() {
-  editing = false;
-  onSave(inputValue);
-}
-function handleKeyDown(event) {
-  if (event.key === "Enter") {
-    saveChanges();
-  } else if (event.key === "Escape") {
-    editing = false;
-    inputValue = value;
-  }
-}
-function handleBlur() {
-  editing = false;
-  saveChanges();
-}
-inputValue = !editing ? value : inputValue;
-$effect(() => {
-  if (editing && inputElement) {
-    inputElement.focus();
-  }
-  popper.addEventListener("toggle", (event) => {
-    if (event.newState === "open") {
-      console.log("Le popover est ouvert");
-      editing = true;
-    } else {
-      console.log("Le popover est ferm\xE9");
-      editing = false;
-    }
-  });
-  console.log(be(`#${initialId}`));
-});
-$effect(() => {
-  editing;
-  be(popper).clonePosition(`#${initialId}`, { useTransform: false });
-  if (!editing) {
-    if (popper.matches(":popover-open")) {
-      popper.hidePopover();
-    }
-  }
-});
-let popper;
+<script lang="ts">
+	import Icon from '../../base/icon/Icon.svelte';
+	import TextField from '../textfield/TextField.svelte';
+	import { be } from '@medyll/idae-be';
+
+	type InPlaceEditProps = {
+		value: string;
+		spanElement: HTMLElement;
+		inputElement: HTMLInputElement;
+		inputValue?: any;
+		editing?: boolean;
+		onSave?: (newValue: string) => void;
+	};
+
+	let initialId: string = 'myText';
+	let popperId: string = 'myPopover';
+
+	let {
+		value = '',
+		inputElement,
+		inputValue,
+		editing = $bindable(),
+		onSave = (newValue) => {}
+	}: InPlaceEditProps = $props();
+
+	function saveChanges() {
+		editing = false;
+		onSave(inputValue);
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		if (event.key === 'Enter') {
+			saveChanges();
+		} else if (event.key === 'Escape') {
+			editing = false;
+			inputValue = value;
+		}
+	}
+
+	function handleBlur() {
+		editing = false;
+		saveChanges();
+	}
+
+	inputValue = !editing ? value : inputValue;
+
+	$effect(() => {
+		if (editing && inputElement) {
+			inputElement.focus();
+		}
+		popper.addEventListener('toggle', (event) => {
+			if (event.newState === 'open') {
+				console.log('Le popover est ouvert');
+				editing = true;
+			} else {
+				console.log('Le popover est fermé');
+				editing = false;
+			}
+		});
+
+		console.log(be(`#${initialId}`));
+	});
+
+	$effect(() => {
+		editing;
+		be(popper).clonePosition(`#${initialId}`, { useTransform: false });
+		if (!editing) {
+			if (popper.matches(':popover-open')) {
+				popper.hidePopover();
+			}
+		}
+	});
+
+	let popper;
 </script>
 
 <form />

package/dist/controls/progress/Progress.demo.svelte

@@ -1,12 +1,17 @@
-<script lang="ts">import Progress from "./Progress.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 { ProgressDemoValues } from "./types.js";
-const code = `<Progress value="50" />`;
-let parameters = ProgressDemoValues;
-let componentArgs = defaultsArgs(parameters);
+<script lang="ts">
+	import Progress from './Progress.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 { ProgressDemoValues } from './types.js';
+
+	const code = `<Progress value="50" />`;
+
+	let parameters = ProgressDemoValues;
+
+	let componentArgs = defaultsArgs(parameters);
 </script>
 
 <ComponentDemo

package/dist/controls/progress/Progress.svelte

@@ -1,16 +1,22 @@
-<script lang="ts">let {
-  class: className = "",
-  style = "",
-  element = null,
-  percentBase = 100,
-  value = 0,
-  orientation: direction = "horizontal",
-  ...rest
-} = $props();
-const title = `${value} / ${percentBase}`;
-let attr = direction === "vertical" ? "height" : "width";
-let attrTickness = direction === "vertical" ? "width" : "height";
-const precWidth = $derived(value / percentBase * 100);
+<script lang="ts">
+	import type { ExpandProps } from '../../types/index.js';
+	import type { ProgressProps } from './types.js';
+
+	let {
+		class: className = '',
+		style = '',
+		element = null,
+		percentBase = 100,
+		value = 0,
+		orientation: direction = 'horizontal',
+		...rest
+	}: ExpandProps<ProgressProps> = $props();
+
+	const title = `${value} / ${percentBase}`;
+
+	let attr = direction === 'vertical' ? 'height' : 'width';
+	let attrTickness = direction === 'vertical' ? 'width' : 'height';
+	const precWidth = $derived((value / percentBase) * 100);
 </script>
 
 <div bind:this={element} class="progress {className} w-large" {style} {title}>

package/dist/controls/rating/Rating.demo.svelte

@@ -1,17 +1,20 @@
-<script lang="ts">import ComponentDemo from "../../base/demoer/DemoerComponent.svelte";
-import Icon from "../../base/icon/Icon.svelte";
-import Rating from "./Rating.svelte";
-import Demoer from "../../base/demoer/Demoer.svelte";
-import DemoPage from "../../base/demoer/DemoPage.svelte";
-import { parameters, componentArgs } from "./types.js";
-const ww = `
+<script lang="ts">
+	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
+	import Icon from '../../base/icon/Icon.svelte';
+	import Rating from './Rating.svelte';
+	import Demoer from '../../base/demoer/Demoer.svelte';
+	import DemoPage from '../../base/demoer/DemoPage.svelte';
+	import { parameters, componentArgs } from './types.js';
+
+	const ww = `
 <Rating>
 	<Icon icon={defaultIcon} />
 	{#snippet ratingScoredIcon()}
 		<Icon icon={scoredIcon} />
 	{/snippet} 
 </Rating>`;
-const ww2 = `<Rating defaultIcon="minus" scoredIcon="plus" scored={3} />`;
+
+	const ww2 = `<Rating defaultIcon="minus" scoredIcon="plus" scored={3} />`;
 </script>
 
 <ComponentDemo

package/dist/controls/rating/Rating.svelte

@@ -1,19 +1,24 @@
-<script lang="ts">import Icon from "../../base/icon/Icon.svelte";
-import Slotted from "../../utils/slotted/Slotted.svelte";
-let {
-  class: className = "",
-  style,
-  element = $bindable(),
-  ratingBase = $bindable(4),
-  scored = $bindable(0),
-  defaultIcon = $bindable("star"),
-  scoredIcon = $bindable("star-fill"),
-  orientation: direction = $bindable("horizontal"),
-  ratingScoredIcon,
-  children,
-  ...rest
-} = $props();
-const title = `${scored} / ${ratingBase}`;
+<script lang="ts">
+	import Icon from '../../base/icon/Icon.svelte';
+	import type { ExpandProps } from '../../types/index.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { RatingProps } from './types.js';
+
+	let {
+		class: className = '',
+		style,
+		element = $bindable(),
+		ratingBase = $bindable(4),
+		scored = $bindable(0),
+		defaultIcon = $bindable('star'),
+		scoredIcon = $bindable('star-fill'),
+		orientation: direction = $bindable('horizontal'),
+		ratingScoredIcon,
+		children,
+		...rest
+	}: ExpandProps<RatingProps> = $props();
+
+	const title = `${scored} / ${ratingBase}`;
 </script>
 
 <div