@medyll/idae-slotui-svelte 0.122.1 → 0.124.0

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

@@ -1,30 +1,30 @@
-<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
-	component="Progress"
-	cite="You'll never know that you've got a score, unless comes the day when you see the other's ones.<br/> S. Roch, 1824"
->
-	<div class="flex-v gap-large">
-		<DemoPage component="Progress" {code}>
-			<Demoer {parameters} {componentArgs}>
-				{#snippet children({ activeParams })}
-					<Progress {...activeParams} />
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-	</div>
-</ComponentDemo>
+<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
+	component="Progress"
+	cite="You'll never know that you've got a score, unless comes the day when you see the other's ones.<br/> S. Roch, 1824"
+>
+	<div class="flex-v gap-large">
+		<DemoPage component="Progress" {code}>
+			<Demoer {parameters} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<Progress {...activeParams} />
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/controls/progress/Progress.svelte

@@ -1,28 +1,28 @@
-<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}>
-	<div class="progress-gouge" style="{attr}:{precWidth}%;{attrTickness}:0.5rem"></div>
-</div>
-
+<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}>
+	<div class="progress-gouge" style="{attr}:{precWidth}%;{attrTickness}:0.5rem"></div>
+</div>
+
 <style>:root {
   --progress-border: var(--sld-color-secondary-alpha-mid);
   --progress-radius: var(--sld-radius-tiny);
@@ -42,4 +42,4 @@
   transition-delay: 250ms;
   transition: all 0.25s;
   max-width: 100%;
-}</style>
+}</style>

package/dist/controls/progress/progress.scss

@@ -1,23 +1,23 @@
-@use "../../styles/slotui-mixins.scss";
-
-:root {
-    --progress-border: var(--sld-color-secondary-alpha-mid);
-    --progress-radius: var(--sld-radius-tiny);
-    --progress-gouge-background: var(--sld-color-primary);
-    --progress-gouge-border: var(--sld-color-primary-alpha);
-}
-
-.progress {
-    border: 1px solid var(--progress-border);
-    border-radius: var(--progress-radius);
-    padding: 1px;
-
-    .progress-gouge {
-        background: var(--progress-gouge-background);
-        border-radius: var(--progress-radius);
-        border: 1px solid var(--progress-gouge-border);
-        transition-delay: 250ms;
-        transition: all 0.25s;
-        max-width: 100%;
-    }
-}
+@use "../../styles/slotui-mixins.scss";
+
+:root {
+    --progress-border: var(--sld-color-secondary-alpha-mid);
+    --progress-radius: var(--sld-radius-tiny);
+    --progress-gouge-background: var(--sld-color-primary);
+    --progress-gouge-border: var(--sld-color-primary-alpha);
+}
+
+.progress {
+    border: 1px solid var(--progress-border);
+    border-radius: var(--progress-radius);
+    padding: 1px;
+
+    .progress-gouge {
+        background: var(--progress-gouge-background);
+        border-radius: var(--progress-radius);
+        border: 1px solid var(--progress-gouge-border);
+        transition-delay: 250ms;
+        transition: all 0.25s;
+        max-width: 100%;
+    }
+}

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

@@ -1,45 +1,45 @@
-<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} />`;
-</script>
-
-<ComponentDemo
-	component="Rating"
-	cite="First they tell you that it's just about stars.<br/>And then you'll be starred<br/> Amal. Creed, 1824"
->
-	<div class="flex-v gap-large">
-		<DemoPage component="Rating" code={ww}>
-			<Demoer {parameters} {...componentArgs}>
-				{#snippet children({ activeParams })}
-					<Rating {...activeParams}>
-						<Icon icon={activeParams.defaultIcon} />
-						{#snippet ratingScoredIcon()}
-							<Icon icon={activeParams.scoredIcon} />
-						{/snippet}
-					</Rating>
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-		<DemoPage title="Using props" component="rating" code={ww2}>
-			<Demoer {parameters} {...componentArgs}>
-				{#snippet children({ activeParams })}
-					<Rating {...activeParams} />
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-	</div>
-</ComponentDemo>
+<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} />`;
+</script>
+
+<ComponentDemo
+	component="Rating"
+	cite="First they tell you that it's just about stars.<br/>And then you'll be starred<br/> Amal. Creed, 1824"
+>
+	<div class="flex-v gap-large">
+		<DemoPage component="Rating" code={ww}>
+			<Demoer {parameters} {...componentArgs}>
+				{#snippet children({ activeParams })}
+					<Rating {...activeParams}>
+						<Icon icon={activeParams.defaultIcon} />
+						{#snippet ratingScoredIcon()}
+							<Icon icon={activeParams.scoredIcon} />
+						{/snippet}
+					</Rating>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+		<DemoPage title="Using props" component="rating" code={ww2}>
+			<Demoer {parameters} {...componentArgs}>
+				{#snippet children({ activeParams })}
+					<Rating {...activeParams} />
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/controls/rating/Rating.svelte

@@ -1,46 +1,46 @@
-<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
-	bind:this={element}
-	class="rating {className}"
-	style="--direction:{direction === 'horizontal' ? 'row' : 'column'};{style}"
-	{title}
-	{...rest}
->
-	{#each [...Array(ratingBase)] as rate, idx}
-		{#if idx + 1 <= scored}
-			<Slotted child={ratingScoredIcon}>
-				<Icon icon={scoredIcon} />
-			</Slotted>
-		{:else}
-			<Slotted child={children}>
-				<Icon icon={defaultIcon} />
-			</Slotted>
-		{/if}
-	{/each}
-</div>
-
+<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
+	bind:this={element}
+	class="rating {className}"
+	style="--direction:{direction === 'horizontal' ? 'row' : 'column'};{style}"
+	{title}
+	{...rest}
+>
+	{#each [...Array(ratingBase)] as rate, idx}
+		{#if idx + 1 <= scored}
+			<Slotted child={ratingScoredIcon}>
+				<Icon icon={scoredIcon} />
+			</Slotted>
+		{:else}
+			<Slotted child={children}>
+				<Icon icon={defaultIcon} />
+			</Slotted>
+		{/if}
+	{/each}
+</div>
+
 <style>:root {
   --rating-gap: var(--sld-gap-small);
 }
@@ -49,4 +49,4 @@
   display: flex;
   flex-direction: var(--direction);
   gap: var(--rating-gap);
-}</style>
+}</style>

package/dist/controls/rating/rating.scss

@@ -1,9 +1,9 @@
-@use "../../styles/slotui-mixins.scss";
-:root {
-    --rating-gap: var(--sld-gap-small);
-}
-.rating {
-    display: flex;
-    flex-direction: var(--direction);
-    gap: var(--rating-gap);
-}
+@use "../../styles/slotui-mixins.scss";
+:root {
+    --rating-gap: var(--sld-gap-small);
+}
+.rating {
+    display: flex;
+    flex-direction: var(--direction);
+    gap: var(--rating-gap);
+}

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

@@ -1,101 +1,101 @@
-<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> 
-
-<Select
-  let:optionsData
-  value="2"
-  name={"input_select"}
-  {data} >
-  <MenuItem  data={optionsData} >{optionsData.name}</MenuItem>
-</Select>
-
-<Select
-  let:optionsData
-  value="2"
-  name={"input_select"}
-  {data}
-  dataFieldName={"name"} />
-</Select>
-`;
-
-	let codeProps = `
-<Loader
-    status={"loading"}
-    messages={{
-        loading: 'Loading dataset',
-        error  : 'An error occurred',
-        empty  : 'Empty results',
-        success: 'Success !'
-      }}
-    emptyIcon="mdi:database-search-outline"
-    errorIcon="mdi:alert-circle-outline"
-    loadingIcon="mdi:loading"
-    successIcon="clarity:success-standard-line" />`;
-
-	let isOpen = false;
-</script>
-
-<ComponentDemo component="Select">
-	<div class="flex-v gap-large">
-		<DemoPage code={codeSlot} component="Select">
-			<Demoer parameters={parametersSlot} componentArgs={componentArgsSlot}>
-				{#snippet children({ activeParams })}
-					<div class="pad-2">
-						<Select
-							{...activeParams}
-							value="2"
-							name={'select'}
-							dataFieldName={'name'}
-							class=" w-large border-4"
-							>{#snippet children({ optionsData })}
-								<MenuItem data={optionsData}>{optionsData?.name}</MenuItem>
-							{/snippet}
-						</Select>
-					</div>
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-	</div>
-</ComponentDemo>
+<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> 
+
+<Select
+  let:optionsData
+  value="2"
+  name={"input_select"}
+  {data} >
+  <MenuItem  data={optionsData} >{optionsData.name}</MenuItem>
+</Select>
+
+<Select
+  let:optionsData
+  value="2"
+  name={"input_select"}
+  {data}
+  dataFieldName={"name"} />
+</Select>
+`;
+
+	let codeProps = `
+<Loader
+    status={"loading"}
+    messages={{
+        loading: 'Loading dataset',
+        error  : 'An error occurred',
+        empty  : 'Empty results',
+        success: 'Success !'
+      }}
+    emptyIcon="mdi:database-search-outline"
+    errorIcon="mdi:alert-circle-outline"
+    loadingIcon="mdi:loading"
+    successIcon="clarity:success-standard-line" />`;
+
+	let isOpen = false;
+</script>
+
+<ComponentDemo component="Select">
+	<div class="flex-v gap-large">
+		<DemoPage code={codeSlot} component="Select">
+			<Demoer parameters={parametersSlot} componentArgs={componentArgsSlot}>
+				{#snippet children({ activeParams })}
+					<div class="pad-2">
+						<Select
+							{...activeParams}
+							value="2"
+							name={'select'}
+							dataFieldName={'name'}
+							class=" w-large border-4"
+							>{#snippet children({ optionsData })}
+								<MenuItem data={optionsData}>{optionsData?.name}</MenuItem>
+							{/snippet}
+						</Select>
+					</div>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>