@medyll/idae-slotui-svelte 0.122.1 → 0.124.0

package/dist/ui/toggleBar/ToggleBar.demo.svelte

@@ -1,114 +1,114 @@
-<script lang="ts">
-	import Button from '../../controls/button/Button.svelte';
-	import ToggleBar from './ToggleBar.svelte';
-
-	/* demo */
-	import { defaultsArgs } 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 Finder from '../../data/finder/Finder.svelte';
-	/* demo */
-
-	let parametersSlot: any = {
-		open: {
-			type: 'boolean',
-			values: [true, false]
-		},
-		flow: {
-			type: 'preset-flow',
-			values: uiPresets.flow
-		},
-		showHandle: {
-			type: 'boolean',
-			values: [true, false]
-		},
-		closeOnValidate: {
-			type: 'boolean',
-			values: [true, false]
-		},
-		hideAcceptButton: {
-			type: 'boolean',
-			values: [false, true]
-		},
-		hideCloseButton: {
-			type: 'boolean',
-			values: [false, true]
-		},
-		hideCancelButton: {
-			type: 'boolean',
-			values: [true, false]
-		}
-	};
-
-	let multiple = {
-		orientation: {
-			right: { orientation: 'right' },
-			left: { orientation: 'left' }
-		}
-	};
-
-	$: componentArgsSlot = {
-		...defaultsArgs(parametersSlot),
-		title: 'A toggle bar',
-		onClose: () => {
-			componentArgsSlot.open = !componentArgsSlot.open;
-		},
-		data: [
-			{ id: 1, name: 'name' },
-			{ id: 2, name: 'name' },
-			{ id: 3, name: 'name' },
-			{ id: 4, name: 'name' }
-		]
-	};
-
-	let codeSlot = `
-<ToggleBar style="width:350px;" {...activeParams}>
-	{#snippet toggleBarIcon()}
-		<Icon icon="carbon:progress-bar" />
-	{/snippet}
-	{#snippet toggleBarButtons()}
-		<div><Button>button</Button></div>
-		<div><Button>button</Button></div>
-	{/snippet}
-	{#snippet contentSwitcherIcon()}
-		<Button ratio="1/1" icon="search" />
-	{/snippet}
-	{#snippet contentSwitcherReveal()}
-		<Finder styleRoot="width:100%;" size="full" showSortMenu={true} />
-	{/snippet}
-</ToggleBar>
-`;
-
-	let codeProps = ` `;
-</script>
-
-<ComponentDemo component="ToggleBar">
-	<div class="flex-v gap-large">
-		<DemoPage code={codeSlot} component="ToggleBar">
-			<Demoer {multiple} parameters={parametersSlot} componentArgs={componentArgsSlot}
-				>{#snippet children({ activeParams })}
-					<div class="pad pos-rel">
-						<ToggleBar style="width:350px;" {...activeParams}>
-							{#snippet toggleBarIcon()}
-								<Icon icon="carbon:progress-bar" />
-							{/snippet}
-							{#snippet toggleBarButtons()}
-								<div><Button>button</Button></div>
-								<div><Button>button</Button></div>
-							{/snippet}
-							{#snippet contentSwitcherIcon()}
-								<Button ratio="1/1" icon="search" />
-							{/snippet}
-							{#snippet contentSwitcherReveal()}
-								<Finder styleRoot="width:100%;" size="full" showSortMenu={true} />
-							{/snippet}
-						</ToggleBar>
-					</div>
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-	</div>
-</ComponentDemo>
+<script lang="ts">
+	import Button from '../../controls/button/Button.svelte';
+	import ToggleBar from './ToggleBar.svelte';
+
+	/* demo */
+	import { defaultsArgs } 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 Finder from '../../data/finder/Finder.svelte';
+	/* demo */
+
+	let parametersSlot: any = {
+		open: {
+			type: 'boolean',
+			values: [true, false]
+		},
+		flow: {
+			type: 'preset-flow',
+			values: uiPresets.flow
+		},
+		showHandle: {
+			type: 'boolean',
+			values: [true, false]
+		},
+		closeOnValidate: {
+			type: 'boolean',
+			values: [true, false]
+		},
+		hideAcceptButton: {
+			type: 'boolean',
+			values: [false, true]
+		},
+		hideCloseButton: {
+			type: 'boolean',
+			values: [false, true]
+		},
+		hideCancelButton: {
+			type: 'boolean',
+			values: [true, false]
+		}
+	};
+
+	let multiple = {
+		orientation: {
+			right: { orientation: 'right' },
+			left: { orientation: 'left' }
+		}
+	};
+
+	$: componentArgsSlot = {
+		...defaultsArgs(parametersSlot),
+		title: 'A toggle bar',
+		onClose: () => {
+			componentArgsSlot.open = !componentArgsSlot.open;
+		},
+		data: [
+			{ id: 1, name: 'name' },
+			{ id: 2, name: 'name' },
+			{ id: 3, name: 'name' },
+			{ id: 4, name: 'name' }
+		]
+	};
+
+	let codeSlot = `
+<ToggleBar style="width:350px;" {...activeParams}>
+	{#snippet toggleBarIcon()}
+		<Icon icon="carbon:progress-bar" />
+	{/snippet}
+	{#snippet toggleBarButtons()}
+		<div><Button>button</Button></div>
+		<div><Button>button</Button></div>
+	{/snippet}
+	{#snippet contentSwitcherIcon()}
+		<Button ratio="1/1" icon="search" />
+	{/snippet}
+	{#snippet contentSwitcherReveal()}
+		<Finder styleRoot="width:100%;" size="full" showSortMenu={true} />
+	{/snippet}
+</ToggleBar>
+`;
+
+	let codeProps = ` `;
+</script>
+
+<ComponentDemo component="ToggleBar">
+	<div class="flex-v gap-large">
+		<DemoPage code={codeSlot} component="ToggleBar">
+			<Demoer {multiple} parameters={parametersSlot} componentArgs={componentArgsSlot}
+				>{#snippet children({ activeParams })}
+					<div class="pad pos-rel">
+						<ToggleBar style="width:350px;" {...activeParams}>
+							{#snippet toggleBarIcon()}
+								<Icon icon="carbon:progress-bar" />
+							{/snippet}
+							{#snippet toggleBarButtons()}
+								<div><Button>button</Button></div>
+								<div><Button>button</Button></div>
+							{/snippet}
+							{#snippet contentSwitcherIcon()}
+								<Button ratio="1/1" icon="search" />
+							{/snippet}
+							{#snippet contentSwitcherReveal()}
+								<Finder styleRoot="width:100%;" size="full" showSortMenu={true} />
+							{/snippet}
+						</ToggleBar>
+					</div>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/ui/toggleBar/ToggleBar.svelte

@@ -1,60 +1,60 @@
-<script lang="ts">
-	import ContentSwitcher from '../../base/contentSwitcher/ContentSwitcher.svelte';
-	import Icon from '../../base/icon/Icon.svelte';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-	import type { ToggleBarProps } from './types.js';
-
-	let {
-		class: className = '',
-		style,
-		title,
-		icon,
-		contentSwitcherProps = {
-			icon: 'search'
-		},
-		orientation = $bindable('right'),
-		element = $bindable(),
-		toggleBarIcon,
-		toggleBarTitle,
-		toggleBarButtons,
-		contentSwitcherReveal,
-		contentSwitcherIcon,
-		children,
-		...rest
-	}: ToggleBarProps = $props();
-
-	const posTitle = orientation === 'right' ? 1 : 3;
-	const posCloser = orientation === 'right' ? 3 : 1;
-</script>
-
-<div bind:this={element} class="toggle-bar {className}" {style} {...rest}>
-	{#if toggleBarIcon || icon}
-		<div class="toggle-bar-icon">
-			<Slotted child={toggleBarIcon}>
-				<Icon {icon} />
-			</Slotted>
-		</div>
-	{/if}
-	<div class="toggle-bar-title" style="order:{posTitle};">
-		{#if toggleBarTitle || Boolean(title)}
-			<Slotted child={toggleBarTitle}>
-				<div class="toggle-bar-title-content">
-					<h5 class="text-ellipsis">{title}</h5>
-				</div>
-			</Slotted>
-		{/if}
-	</div>
-	<div class="toggle-bar-content" style="order:2;">
-		<Slotted child={toggleBarButtons} />
-	</div>
-	<div style="order:{posCloser}">
-		<ContentSwitcher parent={element} {...contentSwitcherProps}>
-			<Slotted child={contentSwitcherIcon} />
-			<Slotted child={contentSwitcherReveal} />
-		</ContentSwitcher>
-	</div>
-</div>
-
+<script lang="ts">
+	import ContentSwitcher from '../../base/contentSwitcher/ContentSwitcher.svelte';
+	import Icon from '../../base/icon/Icon.svelte';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { ToggleBarProps } from './types.js';
+
+	let {
+		class: className = '',
+		style,
+		title,
+		icon,
+		contentSwitcherProps = {
+			icon: 'search'
+		},
+		orientation = $bindable('right'),
+		element = $bindable(),
+		toggleBarIcon,
+		toggleBarTitle,
+		toggleBarButtons,
+		contentSwitcherReveal,
+		contentSwitcherIcon,
+		children,
+		...rest
+	}: ToggleBarProps = $props();
+
+	const posTitle = orientation === 'right' ? 1 : 3;
+	const posCloser = orientation === 'right' ? 3 : 1;
+</script>
+
+<div bind:this={element} class="toggle-bar {className}" {style} {...rest}>
+	{#if toggleBarIcon || icon}
+		<div class="toggle-bar-icon">
+			<Slotted child={toggleBarIcon}>
+				<Icon {icon} />
+			</Slotted>
+		</div>
+	{/if}
+	<div class="toggle-bar-title" style="order:{posTitle};">
+		{#if toggleBarTitle || Boolean(title)}
+			<Slotted child={toggleBarTitle}>
+				<div class="toggle-bar-title-content">
+					<h5 class="text-ellipsis">{title}</h5>
+				</div>
+			</Slotted>
+		{/if}
+	</div>
+	<div class="toggle-bar-content" style="order:2;">
+		<Slotted child={toggleBarButtons} />
+	</div>
+	<div style="order:{posCloser}">
+		<ContentSwitcher parent={element} {...contentSwitcherProps}>
+			<Slotted child={contentSwitcherIcon} />
+			<Slotted child={contentSwitcherReveal} />
+		</ContentSwitcher>
+	</div>
+</div>
+
 <style>:root {
   --toggle-bar-padding: var(--sld-commandbar-padding, var(--box-density-1));
   --toggle-bar-border-bottom: var(--sld-topbar-border-bottom-color, var(--sld-color-border));
@@ -95,4 +95,4 @@
   position: relative;
   min-width: auto;
   overflow: hidden;
-}</style>
+}</style>

package/dist/ui/toggleBar/toggle-bar.scss

@@ -1,45 +1,45 @@
-@use "../../styles/slotui-mixins.scss";
-
-:root {
-    --toggle-bar-padding: var(--sld-commandbar-padding, var(--box-density-1));
-    --toggle-bar-border-bottom: var(--sld-topbar-border-bottom-color, var(--sld-color-border));
-    --toggle-bar-gap: var(--sld-commandbar-gap, var(--sld-pad-tiny));
-    --toggle-bar-icon-padding: var(--sld-pad-medium);
-    --toggle-bar-title-font-weight: 500;
-    --toggle-bar-title-content-font-size: 18px;
-}
-
-.toggle-bar {
-    padding: var(--toggle-bar-padding);
-    display: flex;
-    border-bottom: var(--toggle-bar-border-bottom);
-    width: 100%;
-    max-width: 100%;
-    min-width: auto;
-    position: relative;
-    gap: var(--toggle-bar-gap);
-
-    &-icon {
-        padding: var(--toggle-bar-icon-padding);
-    }
-    &-title {
-        flex: 1;
-        font-weight: var(--toggle-bar-title-font-weight);
-        min-width: auto;
-        &-content {
-            display: flex;
-            align-items: center;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            font-size: var(--toggle-bar-title-content-font-size);
-            min-width: auto;
-            height: 100%;
-        }
-    }
-
-    &-content {
-        position: relative;
-        min-width: auto;
-        overflow: hidden;
-    }
-}
+@use "../../styles/slotui-mixins.scss";
+
+:root {
+    --toggle-bar-padding: var(--sld-commandbar-padding, var(--box-density-1));
+    --toggle-bar-border-bottom: var(--sld-topbar-border-bottom-color, var(--sld-color-border));
+    --toggle-bar-gap: var(--sld-commandbar-gap, var(--sld-pad-tiny));
+    --toggle-bar-icon-padding: var(--sld-pad-medium);
+    --toggle-bar-title-font-weight: 500;
+    --toggle-bar-title-content-font-size: 18px;
+}
+
+.toggle-bar {
+    padding: var(--toggle-bar-padding);
+    display: flex;
+    border-bottom: var(--toggle-bar-border-bottom);
+    width: 100%;
+    max-width: 100%;
+    min-width: auto;
+    position: relative;
+    gap: var(--toggle-bar-gap);
+
+    &-icon {
+        padding: var(--toggle-bar-icon-padding);
+    }
+    &-title {
+        flex: 1;
+        font-weight: var(--toggle-bar-title-font-weight);
+        min-width: auto;
+        &-content {
+            display: flex;
+            align-items: center;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            font-size: var(--toggle-bar-title-content-font-size);
+            min-width: auto;
+            height: 100%;
+        }
+    }
+
+    &-content {
+        position: relative;
+        min-width: auto;
+        overflow: hidden;
+    }
+}

package/dist/ui/toolBar/ToolBar.demo.svelte

@@ -1,98 +1,98 @@
-<script lang="ts">
-	import ToolBar from './ToolBar.svelte';
-
-	/* demo */
-	import { defaultsArgs } 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';
-	/* demo */
-
-	let parametersSlot: any = {
-		vertical: {
-			type: 'boolean',
-			values: [false, true]
-		},
-		color: {
-			type: 'string',
-			values: [undefined, '#999']
-		},
-		closeOnValidate: {
-			type: 'boolean',
-			values: [true, false]
-		}
-	};
-
-	let multiple = {
-		vertical: {
-			false: { vertical: false },
-			true: { vertical: true }
-		}
-	};
-
-	$: componentArgsSlot = {
-		...defaultsArgs(parametersSlot),
-		onClose: () => {
-			// componentArgsSlot.open = !componentArgsSlot.open;
-		},
-		data: [
-			{ id: 1, name: 'name' },
-			{ id: 2, name: 'name' },
-			{ id: 3, name: 'name' },
-			{ id: 4, name: 'name' }
-		]
-	};
-
-	let codeSlot = `      <ToolBar>
-        <span>item 1</span>
-        <span>item 2</span>
-        <divider />
-        <span>item 3</span>
-        <span>item 4</span>
-      </ToolBar>`;
-
-	let codeProps = `
-<Button
-	onclick={() => {
-		openWindow("html", {
-		componentProps: { some: "props", someother: "deprops" },
-		contentHTML:
-			'<div class="pad-4 align-center">some html content</div>',
-		});
-	}}>
-	Window with html content
-</Button>
-
-<Button
-	onclick={() => {
-		openWindow("component", {
-		component: Debug,
-		componentProps: { some: "props", someother: "deprops" },
-		});
-	}}>
-	Window with component
-</Button>`;
-</script>
-
-<ComponentDemo
-	component="ToolBar"
-	cite="Way more than putting tools in a bar : having them in a toolbar ! <br /> Quead Jones, 450"
->
-	<div class="flex-v gap-large">
-		<DemoPage code={codeSlot} component="ToolBar">
-			<Demoer {multiple} parameters={parametersSlot} componentArgs={componentArgsSlot}
-				>{#snippet children({ activeParams })}
-					<div class="pad-2 h-large pos-rel">
-						<ToolBar {...activeParams}>
-							<span>item 1</span>
-							<span>item 2</span>
-							<divider></divider>
-							<span>item 3</span>
-							<span>item 4</span>
-						</ToolBar>
-					</div>
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-	</div>
-</ComponentDemo>
+<script lang="ts">
+	import ToolBar from './ToolBar.svelte';
+
+	/* demo */
+	import { defaultsArgs } 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';
+	/* demo */
+
+	let parametersSlot: any = {
+		vertical: {
+			type: 'boolean',
+			values: [false, true]
+		},
+		color: {
+			type: 'string',
+			values: [undefined, '#999']
+		},
+		closeOnValidate: {
+			type: 'boolean',
+			values: [true, false]
+		}
+	};
+
+	let multiple = {
+		vertical: {
+			false: { vertical: false },
+			true: { vertical: true }
+		}
+	};
+
+	$: componentArgsSlot = {
+		...defaultsArgs(parametersSlot),
+		onClose: () => {
+			// componentArgsSlot.open = !componentArgsSlot.open;
+		},
+		data: [
+			{ id: 1, name: 'name' },
+			{ id: 2, name: 'name' },
+			{ id: 3, name: 'name' },
+			{ id: 4, name: 'name' }
+		]
+	};
+
+	let codeSlot = `      <ToolBar>
+        <span>item 1</span>
+        <span>item 2</span>
+        <divider />
+        <span>item 3</span>
+        <span>item 4</span>
+      </ToolBar>`;
+
+	let codeProps = `
+<Button
+	onclick={() => {
+		openWindow("html", {
+		componentProps: { some: "props", someother: "deprops" },
+		contentHTML:
+			'<div class="pad-4 align-center">some html content</div>',
+		});
+	}}>
+	Window with html content
+</Button>
+
+<Button
+	onclick={() => {
+		openWindow("component", {
+		component: Debug,
+		componentProps: { some: "props", someother: "deprops" },
+		});
+	}}>
+	Window with component
+</Button>`;
+</script>
+
+<ComponentDemo
+	component="ToolBar"
+	cite="Way more than putting tools in a bar : having them in a toolbar ! <br /> Quead Jones, 450"
+>
+	<div class="flex-v gap-large">
+		<DemoPage code={codeSlot} component="ToolBar">
+			<Demoer {multiple} parameters={parametersSlot} componentArgs={componentArgsSlot}
+				>{#snippet children({ activeParams })}
+					<div class="pad-2 h-large pos-rel">
+						<ToolBar {...activeParams}>
+							<span>item 1</span>
+							<span>item 2</span>
+							<divider></divider>
+							<span>item 3</span>
+							<span>item 4</span>
+						</ToolBar>
+					</div>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>