@medyll/idae-slotui-svelte 0.122.1 → 0.124.0

package/dist/base/demoer/DemoPage.svelte

@@ -1,40 +1,40 @@
-<script lang="ts">
-	import Icon from '../icon/Icon.svelte';
-	import type { Snippet } from 'svelte';
-	import DemoerCode from './DemoerCode.svelte';
-	import type { CommonProps } from '../../types/index.js';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-	import type { DemoPageProps } from './types.js';
-
-	let {
-		title = '',
-		code = '',
-		subTitle,
-		component,
-		children,
-		demoerCode
-	}: DemoPageProps = $props();
-
-	let codeT = subTitle ? subTitle : `component ${component} demo ${title?.toLowerCase()}`;
-</script>
-
-<div>
-	<div class="pad-l-2">
-		{#if code || demoerCode}
-			<div>
-				<!-- {@render demoerCode?.()} -->
-				<Slotted child={demoerCode}>
-					<DemoerCode {code} />
-				</Slotted>
-			</div>
-		{/if}
-		<h6 class="border-b w-medium pad flex-h flex-align-middle gap-small">
-			<Icon icon="cib:svelte" /> playground
-		</h6>
-		<div class="os-rel">
-			{#if children}
-				{@render children?.()}
-			{/if}
-		</div>
-	</div>
-</div>
+<script lang="ts">
+	import Icon from '../icon/Icon.svelte';
+	import type { Snippet } from 'svelte';
+	import DemoerCode from './DemoerCode.svelte';
+	import type { CommonProps } from '../../types/index.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { DemoPageProps } from './types.js';
+
+	let {
+		title = '',
+		code = '',
+		subTitle,
+		component,
+		children,
+		demoerCode
+	}: DemoPageProps = $props();
+
+	let codeT = subTitle ? subTitle : `component ${component} demo ${title?.toLowerCase()}`;
+</script>
+
+<div>
+	<div class="pad-l-2">
+		{#if code || demoerCode}
+			<div>
+				<!-- {@render demoerCode?.()} -->
+				<Slotted child={demoerCode}>
+					<DemoerCode {code} />
+				</Slotted>
+			</div>
+		{/if}
+		<h6 class="border-b w-medium pad flex-h flex-align-middle gap-small">
+			<Icon icon="cib:svelte" /> playground
+		</h6>
+		<div class="os-rel">
+			{#if children}
+				{@render children?.()}
+			{/if}
+		</div>
+	</div>
+</div>

package/dist/base/demoer/Demoer.svelte

@@ -1,170 +1,170 @@
-<script lang="ts" generics="T=Record<string, any>">
-	import Button from '../../controls/button/Button.svelte';
-	import Icon from '../icon/Icon.svelte';
-	import Switch from '../../controls/switch/Switch.svelte';
-	import type { DemoerProps, DemoerStoryProps } from './types.js';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-	import { densePreset, flowPreset, uiPresets } from '../../types/index.js';
-	import IconButton from '../../controls/button/IconButton.svelte';
-
-	let {
-		title,
-		parameters = $bindable<DemoerStoryProps<T>>({} as DemoerStoryProps<T>),
-		component = $bindable(),
-		componentArgs = $bindable<T>({} as T),
-		multiple = {},
-		children
-	}: DemoerProps<T> = $props();
-
-	let activeParams: T = $state({ ...componentArgs });
-
-</script>
-
-{#if title}
-	<div class="pad">{title}</div>
-{/if}
-
-{#snippet main({ parameter, values })}
-	{#each parameters?.[parameter]?.values ?? values ?? [] as value}
-		{@const finalValue = value === undefined ? 'unset' : value}
-		<Button
-			width="small"
-			variant="flat"
-			showChip={activeParams[parameter] === value}
-			onclick={() => {
-				activeParams[parameter] = value;
-			}}
-		>
-			{finalValue}
-		</Button>
-		<div class="border-r pad-tb-1"></div>
-	{/each}
-{/snippet}
-{#snippet boolean({ parameter })}
-	<Switch
-		name={crypto.randomUUID()}
-		checked={activeParams[parameter]}
-		onChange={(val, metadata) => {
-			activeParams[parameter] = val;
-		}}
-	/>
-{/snippet}
-{#snippet color({ parameter, values })}
-	<input
-		type="color"
-		onchange={(event) => {
-			activeParams[parameter] = event.target.value;
-		}}
-	/>
-{/snippet}
-{#snippet icon({ parameter, values })}
-	{#each ['fa-solid:tree', 'mdi:window', 'mdi:user', 'mdi:close', 'search'] as red}
-		<IconButton
-			icon={red}
-			title={red}
-			showChip={activeParams[parameter] === red}
-			onclick={() => {
-				activeParams[parameter] = red;
-			}}
-		/>
-	{/each}
-{/snippet}
-
-<div class="flex-v gap-small">
-	<div class="pad-l-8">
-		<h6 class="border-b w-medium pad flex-h flex-align-middle gap-small">
-			<Icon icon="cib:svelte" /> component
-		</h6>
-		<div class="pad-2">
-			{#if Object.entries(multiple).length > 0}
-				<div class="flex-h flex-align-middle flex-wrap gap-medium">
-					{#each Object.keys(multiple) as tiple}
-						{#each Object.keys(multiple[tiple]) as params}
-							<div>
-								<Slotted
-									child={children}
-									slotArgs={{
-										activeParams: {
-											...activeParams,
-											...multiple[tiple][params]
-										}
-									}}
-								/>
-								<svelte:component this={component} {componentArgs} {...multiple[tiple][params]} />
-
-								<div class="pad-2 text-center">{tiple} {params}</div>
-							</div>
-							<div class="border-r pad-tb-4" />
-						{/each}
-					{/each}
-				</div>
-			{:else if component}
-				<!-- <svelte:component this={component} {...componentArgs} {...activeParams} /> -->
-			{:else}
-				{#key activeParams}
-					{@render children?.({ activeParams })}
-				{/key}
-			{/if}
-		</div>
-		<h6 class="border-b w-medium pad flex-h flex-align-middle gap-small">
-			<Icon icon="clarity:command-line" />
-			parameters
-		</h6>
-		<div class=" pad flex-h flex-wrap flex-align-middle gap-small">
-			<table style="width:100%;table-layout:auto;border-spacing: 0.5rem">
-				<tbody>
-					{#each Object.keys(parameters) as parameter}
-						{#if parameters?.[parameter]?.private !== true}
-							<tr>
-								<td class="w-medium-min text-bold">{parameter}</td>
-								<td>{parameters?.[parameter]?.type} </td>
-								<td>
-									<div class="flex flex-align-middle gap-small w-mid-min flex-wrap">
-										{#if parameters?.[parameter]?.type === 'boolean'}
-											{@render boolean({ parameter, values: [false, true] })}
-										{:else if parameters?.[parameter]?.type === 'color'}
-											{@render color({ parameter, values: uiPresets.theme })}
-										{:else if parameters?.[parameter]?.type === 'icon'}
-											{@render icon({ parameter })}
-										{:else if parameters?.[parameter]?.type === 'dense'}
-											{@render main({ parameter, values: uiPresets.dense })}
-										{:else if parameters?.[parameter]?.type === 'flow'}
-											{@render main({ parameter, values: uiPresets.flow })}
-										{:else if parameters?.[parameter]?.type === 'buttonVariant'}
-											{@render main({ parameter, values: uiPresets.buttonVariant })}
-										{:else if parameters?.[parameter]?.type === 'iconSize'}
-											{@render main({ parameter, values: uiPresets.iconSize })}
-										{:else if parameters?.[parameter]?.type === 'width'}
-											{@render main({ parameter, values: uiPresets.width })}
-										{:else if parameters?.[parameter]?.type === 'status'}
-											{@render main({ parameter, values: uiPresets.status })}
-										{:else if parameters?.[parameter]?.type === 'stickyPosition'}
-											{@render main({ parameter, values: uiPresets.stickyPosition })}
-										{:else if parameters?.[parameter]?.type === 'position'}
-											{@render main({ parameter, values: uiPresets.position })}
-										{:else if parameters?.[parameter]?.type === 'levels'}
-											{@render main({ parameter, values: uiPresets.levels })}
-										{:else if parameters?.[parameter]?.type === 'theme'}
-											{@render main({ parameter, values: uiPresets.theme })}
-										{:else if parameters?.[parameter]?.type === 'direction'}
-											{@render main({ parameter, values: uiPresets.orientation })}
-										{:else if parameters?.[parameter]?.type === 'elevation'}
-											{@render main({ parameter, values: uiPresets.elevation })}
-										{:else if parameters?.[parameter]?.type === 'tall'}
-											{@render main({ parameter, values: uiPresets.tall })}
-										{:else if parameters?.[parameter]?.type === 'gutter'}
-											{@render main({ parameter, values: uiPresets.gutter })}
-										{:else}
-											<!-- array, default -->
-											{@render main({ parameter })}
-										{/if}
-									</div>
-								</td>
-							</tr>
-						{/if}
-					{/each}
-				</tbody>
-			</table>
-		</div>
-	</div>
-</div>
+<script lang="ts" generics="T=Record<string, any>">
+	import Button from '../../controls/button/Button.svelte';
+	import Icon from '../icon/Icon.svelte';
+	import Switch from '../../controls/switch/Switch.svelte';
+	import type { DemoerProps, DemoerStoryProps } from './types.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import { densePreset, flowPreset, uiPresets } from '../../types/index.js';
+	import IconButton from '../../controls/button/IconButton.svelte';
+
+	let {
+		title,
+		parameters = $bindable<DemoerStoryProps<T>>({} as DemoerStoryProps<T>),
+		component = $bindable(),
+		componentArgs = $bindable<T>({} as T),
+		multiple = {},
+		children
+	}: DemoerProps<T> = $props();
+
+	let activeParams: T = $state({ ...componentArgs });
+
+</script>
+
+{#if title}
+	<div class="pad">{title}</div>
+{/if}
+
+{#snippet main({ parameter, values })}
+	{#each parameters?.[parameter]?.values ?? values ?? [] as value}
+		{@const finalValue = value === undefined ? 'unset' : value}
+		<Button
+			width="small"
+			variant="flat"
+			showChip={activeParams[parameter] === value}
+			onclick={() => {
+				activeParams[parameter] = value;
+			}}
+		>
+			{finalValue}
+		</Button>
+		<div class="border-r pad-tb-1"></div>
+	{/each}
+{/snippet}
+{#snippet boolean({ parameter })}
+	<Switch
+		name={crypto.randomUUID()}
+		checked={activeParams[parameter]}
+		onChange={(val, metadata) => {
+			activeParams[parameter] = val;
+		}}
+	/>
+{/snippet}
+{#snippet color({ parameter, values })}
+	<input
+		type="color"
+		onchange={(event) => {
+			activeParams[parameter] = event.target.value;
+		}}
+	/>
+{/snippet}
+{#snippet icon({ parameter, values })}
+	{#each ['fa-solid:tree', 'mdi:window', 'mdi:user', 'mdi:close', 'search'] as red}
+		<IconButton
+			icon={red}
+			title={red}
+			showChip={activeParams[parameter] === red}
+			onclick={() => {
+				activeParams[parameter] = red;
+			}}
+		/>
+	{/each}
+{/snippet}
+
+<div class="flex-v gap-small">
+	<div class="pad-l-8">
+		<h6 class="border-b w-medium pad flex-h flex-align-middle gap-small">
+			<Icon icon="cib:svelte" /> component
+		</h6>
+		<div class="pad-2">
+			{#if Object.entries(multiple).length > 0}
+				<div class="flex-h flex-align-middle flex-wrap gap-medium">
+					{#each Object.keys(multiple) as tiple}
+						{#each Object.keys(multiple[tiple]) as params}
+							<div>
+								<Slotted
+									child={children}
+									slotArgs={{
+										activeParams: {
+											...activeParams,
+											...multiple[tiple][params]
+										}
+									}}
+								/>
+								<svelte:component this={component} {componentArgs} {...multiple[tiple][params]} />
+
+								<div class="pad-2 text-center">{tiple} {params}</div>
+							</div>
+							<div class="border-r pad-tb-4" />
+						{/each}
+					{/each}
+				</div>
+			{:else if component}
+				<!-- <svelte:component this={component} {...componentArgs} {...activeParams} /> -->
+			{:else}
+				{#key activeParams}
+					{@render children?.({ activeParams })}
+				{/key}
+			{/if}
+		</div>
+		<h6 class="border-b w-medium pad flex-h flex-align-middle gap-small">
+			<Icon icon="clarity:command-line" />
+			parameters
+		</h6>
+		<div class=" pad flex-h flex-wrap flex-align-middle gap-small">
+			<table style="width:100%;table-layout:auto;border-spacing: 0.5rem">
+				<tbody>
+					{#each Object.keys(parameters) as parameter}
+						{#if parameters?.[parameter]?.private !== true}
+							<tr>
+								<td class="w-medium-min text-bold">{parameter}</td>
+								<td>{parameters?.[parameter]?.type} </td>
+								<td>
+									<div class="flex flex-align-middle gap-small w-mid-min flex-wrap">
+										{#if parameters?.[parameter]?.type === 'boolean'}
+											{@render boolean({ parameter, values: [false, true] })}
+										{:else if parameters?.[parameter]?.type === 'color'}
+											{@render color({ parameter, values: uiPresets.theme })}
+										{:else if parameters?.[parameter]?.type === 'icon'}
+											{@render icon({ parameter })}
+										{:else if parameters?.[parameter]?.type === 'dense'}
+											{@render main({ parameter, values: uiPresets.dense })}
+										{:else if parameters?.[parameter]?.type === 'flow'}
+											{@render main({ parameter, values: uiPresets.flow })}
+										{:else if parameters?.[parameter]?.type === 'buttonVariant'}
+											{@render main({ parameter, values: uiPresets.buttonVariant })}
+										{:else if parameters?.[parameter]?.type === 'iconSize'}
+											{@render main({ parameter, values: uiPresets.iconSize })}
+										{:else if parameters?.[parameter]?.type === 'width'}
+											{@render main({ parameter, values: uiPresets.width })}
+										{:else if parameters?.[parameter]?.type === 'status'}
+											{@render main({ parameter, values: uiPresets.status })}
+										{:else if parameters?.[parameter]?.type === 'stickyPosition'}
+											{@render main({ parameter, values: uiPresets.stickyPosition })}
+										{:else if parameters?.[parameter]?.type === 'position'}
+											{@render main({ parameter, values: uiPresets.position })}
+										{:else if parameters?.[parameter]?.type === 'levels'}
+											{@render main({ parameter, values: uiPresets.levels })}
+										{:else if parameters?.[parameter]?.type === 'theme'}
+											{@render main({ parameter, values: uiPresets.theme })}
+										{:else if parameters?.[parameter]?.type === 'direction'}
+											{@render main({ parameter, values: uiPresets.orientation })}
+										{:else if parameters?.[parameter]?.type === 'elevation'}
+											{@render main({ parameter, values: uiPresets.elevation })}
+										{:else if parameters?.[parameter]?.type === 'tall'}
+											{@render main({ parameter, values: uiPresets.tall })}
+										{:else if parameters?.[parameter]?.type === 'gutter'}
+											{@render main({ parameter, values: uiPresets.gutter })}
+										{:else}
+											<!-- array, default -->
+											{@render main({ parameter })}
+										{/if}
+									</div>
+								</td>
+							</tr>
+						{/if}
+					{/each}
+				</tbody>
+			</table>
+		</div>
+	</div>
+</div>

package/dist/base/demoer/DemoerCode.svelte

@@ -1,45 +1,45 @@
-<script lang="ts">
-	import Prism from 'prismjs';
-	import 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace';
-	import 'prism-svelte';
-	import Icon from '../icon/Icon.svelte';
-	import type { Snippet } from 'svelte';
-
-	type DemoerCodeProps = {
-		title?: string;
-		code: string;
-		subTitle?: string;
-		component?: string;
-		demoerCode?: Snippet;
-	};
-
-	let { title = undefined, code = '', subTitle, component, demoerCode }: DemoerCodeProps = $props();
-
-	/* Prism.plugins.NormalizeWhitespace.setDefaults({
-		'remove-trailing': true,
-		'remove-indent': true,
-		'left-trim': false,
-		'right-trim': false,
-		'break-lines': 80, 
-		'remove-initial-line-feed': true,
-		'tabs-to-spaces': 2 
-	}); */
-
-	const highlighted = Prism.highlight(code, Prism.languages.svelte, 'svelte');
-</script>
-
-<div>
-	{#if code || demoerCode}
-		<h6 class="border-b w-medium pad flex-h flex-align-middle gap-small">
-			<Icon icon="mdi:code" /> code
-		</h6>
-		{#if title}<div class="text-bold pad pad-l-4">- {title}</div>{/if}
-		<div class="marg-l-2 dsp-block-inline radius-small pad-ii-2">
-			{#if demoerCode}
-				{@render demoerCode()}
-			{:else}
-				<pre><code lang="language-svelte">{@html highlighted}</code></pre>
-			{/if}
-		</div>
-	{/if}
-</div>
+<script lang="ts">
+	import Prism from 'prismjs';
+	import 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace';
+	import 'prism-svelte';
+	import Icon from '../icon/Icon.svelte';
+	import type { Snippet } from 'svelte';
+
+	type DemoerCodeProps = {
+		title?: string;
+		code: string;
+		subTitle?: string;
+		component?: string;
+		demoerCode?: Snippet;
+	};
+
+	let { title = undefined, code = '', subTitle, component, demoerCode }: DemoerCodeProps = $props();
+
+	/* Prism.plugins.NormalizeWhitespace.setDefaults({
+		'remove-trailing': true,
+		'remove-indent': true,
+		'left-trim': false,
+		'right-trim': false,
+		'break-lines': 80, 
+		'remove-initial-line-feed': true,
+		'tabs-to-spaces': 2 
+	}); */
+
+	const highlighted = Prism.highlight(code, Prism.languages.svelte, 'svelte');
+</script>
+
+<div>
+	{#if code || demoerCode}
+		<h6 class="border-b w-medium pad flex-h flex-align-middle gap-small">
+			<Icon icon="mdi:code" /> code
+		</h6>
+		{#if title}<div class="text-bold pad pad-l-4">- {title}</div>{/if}
+		<div class="marg-l-2 dsp-block-inline radius-small pad-ii-2">
+			{#if demoerCode}
+				{@render demoerCode()}
+			{:else}
+				<pre><code lang="language-svelte">{@html highlighted}</code></pre>
+			{/if}
+		</div>
+	{/if}
+</div>

package/dist/base/demoer/DemoerComponent.svelte

@@ -1,50 +1,50 @@
-<script lang="ts" generics="T=Data">
-	//import { slotuiCatalog } from '../../../sitedata/slotuiCatalog.js';
-	import { componentCite } from '../../componentCite.js';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-	import type { Snippet } from 'svelte';
-	import type { Data } from '../../types/index.js';
-
-	let {
-		component,
-		cite = componentCite?.[component.toLowerCase()] ?? '',
-		code,
-		title = '',
-		componentArgs = {} as T,
-		parameters = {} as T,
-		children
-	}: {
-		component: string;
-		/** parameters values for the component */
-		parameters?: T;
-		/** component demo arguments for props */
-		componentArgs?: T;
-		cite?: string;
-		/** code sample */
-		code?: string;
-		title?: string;
-		/** use for several DemoPage */
-		children: Snippet;
-	} = $props();
-
-	let citation = componentCite?.[component.toLowerCase()]?.cite ?? '';
-	let author = componentCite?.[component.toLowerCase()]?.author ?? '';
-
-	// const compDet = '';Object.values(slotuiCatalog).find((x) => x.name === component);
-</script>
-
-<div class="flex-v gap-large w-full">
-	<div class="flex-v gap-small flex-align-middle">
-		<h5>{`<${component} />`}</h5>
-		<!-- <span>@medyll/slotted/{compDet?.group}/{compDet?.code}.svelte</span> -->
-	</div>
-	<cite><p>"{@html citation}"<br />{@html author}</p></cite>
-	{#if children}
-		<div class="flex-v gap-medium">
-			{component} svelte component
-			<div class="marg-l-4">
-				<Slotted child={children} />
-			</div>
-		</div>
-	{/if}
-</div>
+<script lang="ts" generics="T=Data">
+	//import { slotuiCatalog } from '../../../sitedata/slotuiCatalog.js';
+	import { componentCite } from '../../componentCite.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { Snippet } from 'svelte';
+	import type { Data } from '../../types/index.js';
+
+	let {
+		component,
+		cite = componentCite?.[component.toLowerCase()] ?? '',
+		code,
+		title = '',
+		componentArgs = {} as T,
+		parameters = {} as T,
+		children
+	}: {
+		component: string;
+		/** parameters values for the component */
+		parameters?: T;
+		/** component demo arguments for props */
+		componentArgs?: T;
+		cite?: string;
+		/** code sample */
+		code?: string;
+		title?: string;
+		/** use for several DemoPage */
+		children: Snippet;
+	} = $props();
+
+	let citation = componentCite?.[component.toLowerCase()]?.cite ?? '';
+	let author = componentCite?.[component.toLowerCase()]?.author ?? '';
+
+	// const compDet = '';Object.values(slotuiCatalog).find((x) => x.name === component);
+</script>
+
+<div class="flex-v gap-large w-full">
+	<div class="flex-v gap-small flex-align-middle">
+		<h5>{`<${component} />`}</h5>
+		<!-- <span>@medyll/slotted/{compDet?.group}/{compDet?.code}.svelte</span> -->
+	</div>
+	<cite><p>"{@html citation}"<br />{@html author}</p></cite>
+	{#if children}
+		<div class="flex-v gap-medium">
+			{component} svelte component
+			<div class="marg-l-4">
+				<Slotted child={children} />
+			</div>
+		</div>
+	{/if}
+</div>