@medyll/idae-slotui-svelte 0.122.0 → 0.123.0

package/dist/ui/toolBar/ToolBar.svelte

@@ -1,32 +1,32 @@
-<script lang="ts">
-	import type { CommonProps } from '../../types/index.js';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-	import type { Snippet } from 'svelte';
-	import type { ToolBarProps } from './types.js';
-
-	let {
-		class: className = '',
-		element = $bindable(),
-		style = '',
-		color = '#fff',
-		vertical = $bindable<boolean>(false),
-		toolbarSeparator,
-		children,
-		...rest
-	}: ToolBarProps = $props();
-</script>
-
-<div
-	bind:this={element}
-	class:vertical
-	class="toolbar {className}"
-	style="{style};--color: {color}"
-	{...rest}
->
-	<Slotted child={children} />
-	<Slotted child={toolbarSeparator} />
-</div>
-
+<script lang="ts">
+	import type { CommonProps } from '../../types/index.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { Snippet } from 'svelte';
+	import type { ToolBarProps } from './types.js';
+
+	let {
+		class: className = '',
+		element = $bindable(),
+		style = '',
+		color = '#fff',
+		vertical = $bindable<boolean>(false),
+		toolbarSeparator,
+		children,
+		...rest
+	}: ToolBarProps = $props();
+</script>
+
+<div
+	bind:this={element}
+	class:vertical
+	class="toolbar {className}"
+	style="{style};--color: {color}"
+	{...rest}
+>
+	<Slotted child={children} />
+	<Slotted child={toolbarSeparator} />
+</div>
+
 <style>:root {
   --toolbar-padding: var(--sld-toolbar-padding, var(--box-density-1, var(--sld-pad-tiny)));
   --toolbar-gap: var(--sld-pad-tiny);
@@ -54,4 +54,4 @@
 .toolbar.vertical divider {
   border: var(--toolbar-vertical-divider-border);
   width: var(--toolbar-vertical-divider-width);
-}</style>
+}</style>

package/dist/ui/toolBar/toolbar.scss

@@ -1,32 +1,32 @@
-@use "../../styles/slotui-mixins.scss";
-
-:root {
-	--toolbar-padding: var(--sld-toolbar-padding, var(--box-density-1, var(--sld-pad-tiny)));
-	--toolbar-gap: var(--sld-pad-tiny);
-	--toolbar-divider-border: 1px solid red;
-	--toolbar-divider-height: 1rem;
-	--toolbar-vertical-divider-border: 1px solid green;
-	--toolbar-vertical-divider-width: 1rem;
-}
-
-.toolbar {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	padding: var(--toolbar-padding);
-	gap: var(--toolbar-gap);
-
-	divider {
-		border: var(--toolbar-divider-border);
-		height: var(--toolbar-divider-height);
-	}
-}
-
-.toolbar.vertical {
-	flex-direction: column;
-
-	divider {
-		border: var(--toolbar-vertical-divider-border);
-		width: var(--toolbar-vertical-divider-width);
-	}
-}
+@use "../../styles/slotui-mixins.scss";
+
+:root {
+	--toolbar-padding: var(--sld-toolbar-padding, var(--box-density-1, var(--sld-pad-tiny)));
+	--toolbar-gap: var(--sld-pad-tiny);
+	--toolbar-divider-border: 1px solid red;
+	--toolbar-divider-height: 1rem;
+	--toolbar-vertical-divider-border: 1px solid green;
+	--toolbar-vertical-divider-width: 1rem;
+}
+
+.toolbar {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	padding: var(--toolbar-padding);
+	gap: var(--toolbar-gap);
+
+	divider {
+		border: var(--toolbar-divider-border);
+		height: var(--toolbar-divider-height);
+	}
+}
+
+.toolbar.vertical {
+	flex-direction: column;
+
+	divider {
+		border: var(--toolbar-vertical-divider-border);
+		width: var(--toolbar-vertical-divider-width);
+	}
+}

package/dist/ui/tree/Tree.demo.svelte

@@ -1,84 +1,84 @@
-<script lang="ts">
-	import Tree from './Tree.svelte';
-
-	/* demo */
-	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
-	import DemoPage from '../../base/demoer/DemoPage.svelte';
-	import Demoer from '../../base/demoer/Demoer.svelte';
-	import { defaultsArgsFromProps } from '../../base/demoer/demoer.utils.js';
-	/* demo */
-
-	let paths = [
-		'About.vue',
-		'Categories/Index.vue',
-		'Categories/Demo.vue',
-		'Categories/Flavors.vue',
-		'Categories/Demo',
-		'Categories/Demo/Flavors.vue'
-	];
-
-	let pathsData = [
-		{ name: '', path: 'Categories/Demo/Vue', other: 'item' },
-		{ name: '', path: 'About' },
-		{ name: '', path: 'More' },
-		{ name: '', path: 'Categories/Demo/Vue/Demo' },
-		{ name: '', path: 'Categories/Index' },
-		{ name: '', path: 'Categories/About' },
-		{ name: '', path: 'Categories/Demo' },
-		{ name: '', path: 'New/With/Some/Unique/Levels/Yep' },
-		{ name: '', path: 'New/With/Some/Other/Levels/Yep', data: { isbel: 'or' } }
-	];
-
-	let data = [
-		{ name: '', path: 'Categories/Demo/Vue/Demo' },
-		{
-			name: '',
-			path: 'New/With/Some/Unique/Levels/Yep'
-		}
-	];
-
-	let selectedData: any = [];
-
-	let parameters: any = {
-		showCheckBox: {
-			type: 'boolean',
-			values: [true, false]
-		}
-	};
-
-	let componentArgs = {
-		status: defaultsArgsFromProps('status', parameters)
-	};
-
-	let code = `
-<Tree bind:selectedData
-    {data}
-    pathField="path"
-    paths={pathsData} />`;
-</script>
-
-<ComponentDemo
-	cite="We were looking for leaves and we found trees<br /> B. Esein, 1354"
-	component="Tree"
->
-	<div class="flex-v gap-large">
-		<DemoPage {code} component="Loading">
-			<Demoer {componentArgs} {parameters}>
-				{#snippet children({ activeParams })}
-					<div class="pos-rel flex-h">
-						<div style="width:250px;" class="h-large overflow-auto">
-							<Tree bind:selectedData {data} pathField="path" paths={pathsData} {...activeParams} />
-						</div>
-						<div style="width:250px;" class="h-large overflow-auto">
-							<pre>{JSON.stringify(
-									selectedData.filter((x: any) => x),
-									null,
-									' '
-								)}</pre>
-						</div>
-					</div>
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-	</div>
-</ComponentDemo>
+<script lang="ts">
+	import Tree from './Tree.svelte';
+
+	/* demo */
+	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
+	import DemoPage from '../../base/demoer/DemoPage.svelte';
+	import Demoer from '../../base/demoer/Demoer.svelte';
+	import { defaultsArgsFromProps } from '../../base/demoer/demoer.utils.js';
+	/* demo */
+
+	let paths = [
+		'About.vue',
+		'Categories/Index.vue',
+		'Categories/Demo.vue',
+		'Categories/Flavors.vue',
+		'Categories/Demo',
+		'Categories/Demo/Flavors.vue'
+	];
+
+	let pathsData = [
+		{ name: '', path: 'Categories/Demo/Vue', other: 'item' },
+		{ name: '', path: 'About' },
+		{ name: '', path: 'More' },
+		{ name: '', path: 'Categories/Demo/Vue/Demo' },
+		{ name: '', path: 'Categories/Index' },
+		{ name: '', path: 'Categories/About' },
+		{ name: '', path: 'Categories/Demo' },
+		{ name: '', path: 'New/With/Some/Unique/Levels/Yep' },
+		{ name: '', path: 'New/With/Some/Other/Levels/Yep', data: { isbel: 'or' } }
+	];
+
+	let data = [
+		{ name: '', path: 'Categories/Demo/Vue/Demo' },
+		{
+			name: '',
+			path: 'New/With/Some/Unique/Levels/Yep'
+		}
+	];
+
+	let selectedData: any = [];
+
+	let parameters: any = {
+		showCheckBox: {
+			type: 'boolean',
+			values: [true, false]
+		}
+	};
+
+	let componentArgs = {
+		status: defaultsArgsFromProps('status', parameters)
+	};
+
+	let code = `
+<Tree bind:selectedData
+    {data}
+    pathField="path"
+    paths={pathsData} />`;
+</script>
+
+<ComponentDemo
+	cite="We were looking for leaves and we found trees<br /> B. Esein, 1354"
+	component="Tree"
+>
+	<div class="flex-v gap-large">
+		<DemoPage {code} component="Loading">
+			<Demoer {componentArgs} {parameters}>
+				{#snippet children({ activeParams })}
+					<div class="pos-rel flex-h">
+						<div style="width:250px;" class="h-large overflow-auto">
+							<Tree bind:selectedData {data} pathField="path" paths={pathsData} {...activeParams} />
+						</div>
+						<div style="width:250px;" class="h-large overflow-auto">
+							<pre>{JSON.stringify(
+									selectedData.filter((x: any) => x),
+									null,
+									' '
+								)}</pre>
+						</div>
+					</div>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/ui/tree/Tree.preview.svelte

@@ -1,19 +1,19 @@
-<script lang="ts">
-	import Tree from './Tree.svelte';
-
-	let pathsData = [
-		{ name: '', path: 'About/Svelte', other: 'item' },
-		{ name: '', path: 'About', other: 'item' },
-		{ name: '', path: 'Categories/Demo/Svelte', other: 'item' },
-		{ name: '', path: 'Categories/Demo/Svelte/Demo' },
-		{ name: '', path: 'Categories/Index' },
-		{ name: '', path: 'Categories/About' },
-		{ name: '', path: 'Categories/Demo' }
-	];
-
-	let selectedData: any[] = [];
-</script>
-
-<div class="flex-v gap-medium h-large-min">
-	<Tree pathField="path" paths={pathsData} bind:selectedData />
-</div>
+<script lang="ts">
+	import Tree from './Tree.svelte';
+
+	let pathsData = [
+		{ name: '', path: 'About/Svelte', other: 'item' },
+		{ name: '', path: 'About', other: 'item' },
+		{ name: '', path: 'Categories/Demo/Svelte', other: 'item' },
+		{ name: '', path: 'Categories/Demo/Svelte/Demo' },
+		{ name: '', path: 'Categories/Index' },
+		{ name: '', path: 'Categories/About' },
+		{ name: '', path: 'Categories/Demo' }
+	];
+
+	let selectedData: any[] = [];
+</script>
+
+<div class="flex-v gap-medium h-large-min">
+	<Tree pathField="path" paths={pathsData} bind:selectedData />
+</div>