@medyll/idae-slotui-svelte 0.67.0 → 0.69.0

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

package/dist/controls/select/Select.demo.svelte

@@ -1,38 +1,45 @@
-<script lang="ts">import Select from "./Select.svelte";
-import Button from "../button/Button.svelte";
-import { defaultsArgs, defaultsArgsFromProps } from "../../base/demoer/demoer.utils.js";
-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 { uiPresets } from "../../utils/engine/presets.js";
-import MenuItem from "../../ui/menu/MenuItem.svelte";
-let parametersSlot = {
-  autoClose: {
-    type: "boolean",
-    values: [true, false]
-  },
-  stickToHookWidth: {
-    type: "boolean",
-    values: [false, true]
-  },
-  position: {
-    type: "string",
-    values: uiPresets.stickyPosition
-  }
-};
-let componentArgsSlot = {
-  ...defaultsArgs(parametersSlot),
-  position: "BC",
-  data: [
-    { id: 1, name: "name 1" },
-    { id: 2, name: "name 2" },
-    { id: 3, name: "name 3" },
-    { id: 4, name: "name 4" },
-    { id: 5, name: "name 5" }
-  ]
-};
-let codeSlot = `<script>
+<script lang="ts">
+	import Select from './Select.svelte';
+	import Button from '../button/Button.svelte';
+	/* demo */
+	import { defaultsArgs, defaultsArgsFromProps } from '../../base/demoer/demoer.utils.js';
+	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 { uiPresets } from '../../utils/engine/presets.js';
+	/* demo */
+
+	import MenuItem from '../../ui/menu/MenuItem.svelte';
+
+	let parametersSlot: any = {
+		autoClose: {
+			type: 'boolean',
+			values: [true, false]
+		},
+		stickToHookWidth: {
+			type: 'boolean',
+			values: [false, true]
+		},
+		position: {
+			type: 'string',
+			values: uiPresets.stickyPosition
+		}
+	};
+
+	let componentArgsSlot = {
+		...defaultsArgs(parametersSlot),
+		position: 'BC',
+		data: [
+			{ id: 1, name: 'name 1' },
+			{ id: 2, name: 'name 2' },
+			{ id: 3, name: 'name 3' },
+			{ id: 4, name: 'name 4' },
+			{ id: 5, name: 'name 5' }
+		]
+	};
+
+	let codeSlot = `<script>
     const data = [{id:1,name:'name'},{id:2,name:'name'}];
 <script> 
 
@@ -52,7 +59,8 @@ let codeSlot = `<script>
   dataFieldName={"name"} />
 </Select>
 `;
-let codeProps = `
+
+	let codeProps = `
 <Loader
     status={"loading"}
     messages={{
@@ -65,7 +73,8 @@ let codeProps = `
     errorIcon="mdi:alert-circle-outline"
     loadingIcon="mdi:loading"
     successIcon="clarity:success-standard-line" />`;
-let isOpen = false;
+
+	let isOpen = false;
 </script>
 
 <ComponentDemo component="Select">

package/dist/controls/select/Select.svelte

@@ -1,32 +1,79 @@
-<script lang="ts">import TextField from "../textfield/TextField.svelte";
-import Icon from "../../base/icon/Icon.svelte";
-import Popper from "../../ui/popper/Popper.svelte";
-import Menu from "../../ui/menu/Menu.svelte";
-import MenuItem from "../../ui/menu/MenuItem.svelte";
-import Slotted from "../../utils/slotted/Slotted.svelte";
-let {
-  name,
-  element,
-  disabled = false,
-  data,
-  dataFieldId,
-  dataFieldName,
-  options = [],
-  position,
-  stickToHookWidth,
-  autoClose = false,
-  value = void 0,
-  children,
-  ...rest
-} = $props();
-let hiddenRef;
-let isVisible = false;
-let timerClick;
-const show = (visible) => (event) => {
-  timerClick = setTimeout(() => {
-    isVisible = visible;
-  }, 250);
-};
+<script lang="ts">
+	import type { CommonProps, Data, ElementProps, ExpandProps } from '../../types/index.js';
+	import TextField from '../textfield/TextField.svelte';
+	import Icon from '../../base/icon/Icon.svelte';
+	import Popper from '../../ui/popper/Popper.svelte';
+	import Menu from '../../ui/menu/Menu.svelte';
+	import MenuItem from '../../ui/menu/MenuItem.svelte';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { Snippet } from 'svelte';
+
+	type SelectProps = CommonProps & {
+		/** The position of the popper */
+		position?: ElementProps['popperPosition'];
+
+		/** Whether the popper should stick to the hook width */
+		stickToHookWidth: boolean;
+
+		/** Whether the popper should auto close */
+		autoClose?: boolean;
+
+		/** The value of the select */
+		value: any;
+
+		/** The name of the select */
+		name: string;
+
+		/** The style of the select */
+		style?: string;
+
+		/** The class name of the select */
+		className: string;
+
+		/** The data for the select */
+		data: any[];
+		disabled?: boolean;
+		/** The options for the select */
+		options?: {
+			data?: Data;
+			text: string;
+			icon?: any;
+		}[];
+
+		/** The data field id for the select */
+		dataFieldId: string;
+
+		/** The data field name for the select */
+		dataFieldName: string;
+		children?: Snippet<[{ optionsData: Data }]>;
+	};
+
+	let {
+		name,
+		element,
+		disabled = false,
+		data,
+		dataFieldId,
+		dataFieldName,
+		options = [],
+		position,
+		stickToHookWidth,
+		autoClose = false,
+		value = undefined,
+		children,
+		...rest
+	}: ExpandProps<SelectProps> = $props();
+
+	let hiddenRef;
+	let isVisible: boolean = false;
+
+	let timerClick: any;
+
+	const show = (visible: boolean) => (event) => {
+		timerClick = setTimeout(() => {
+			isVisible = visible;
+		}, 250);
+	};
 </script>
 
 <input {value} bind:this={hiddenRef} type="hidden" {name} />

package/dist/controls/slider/Slider.demo.svelte

@@ -1,13 +1,20 @@
-<script lang="ts">import Slider from "./Slider.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 Slider from './Slider.svelte';
+
+	/* demo */
+	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
+	import Demoer from '../../base/demoer/Demoer.svelte';
+	import DemoPage from '../../base/demoer/DemoPage.svelte';
+	/* demo */
+
+	import { parameters, componentArgs } from './types.js';
+
+	let codeSlot = `
 <Slider  name={'switcher'} class="w-small" >
   <span   />
 </Slider>`;
-let isOpen = false;
+
+	let isOpen = false;
 </script>
 
 <ComponentDemo component="Slider">