@medyll/idae-slotui-svelte 0.122.1 → 0.123.0

package/dist/base/paper/Paper.svelte

@@ -1,22 +1,22 @@
-<script lang="ts">
-	import type { ExpandProps } from '../../types/index.js';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-	import type { PaperProps } from './type.js';
-
-	let {
-		class: className = '',
-		style,
-		element = $bindable(),
-		children,
-		elevation = 0,
-		...rest
-	}: ExpandProps<PaperProps> = $props();
-</script>
-
-<div bind:this={element} class="paper {className} elevation-{elevation}" {style} {...rest}>
-	<Slotted child={children} />
-</div>
-
+<script lang="ts">
+	import type { ExpandProps } from '../../types/index.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { PaperProps } from './type.js';
+
+	let {
+		class: className = '',
+		style,
+		element = $bindable(),
+		children,
+		elevation = 0,
+		...rest
+	}: ExpandProps<PaperProps> = $props();
+</script>
+
+<div bind:this={element} class="paper {className} elevation-{elevation}" {style} {...rest}>
+	<Slotted child={children} />
+</div>
+
 <style>:root {
   --paper-radius: var(--sld-radius-small);
   --paper-border: var(--sld-color-foreground-alpha-high);
@@ -37,4 +37,4 @@
 }
 .paper.elevation-5, .paper[elevation-5] {
   box-shadow: var(--sld-elevation-5);
-}</style>
+}</style>

package/dist/base/paper/paper.scss

@@ -1,15 +1,15 @@
-@use "../../styles/slotui-mixins.scss";
-
-:root {
-    --paper-radius: var(--sld-radius-small);
-    --paper-border: var(--sld-color-foreground-alpha-high);
-    --paper-background-color: var(--sld-color-paper);
-    --paper-background-color-hover: var(--sld-color-paper-darken-low);
-}
-
-.paper {
-    color: var(--paper-border);
-    background-color: var(--paper-background-color);
-    border-radius: var(--paper-radius);
-    @include slotui-mixins.elevation();
-}
+@use "../../styles/slotui-mixins.scss";
+
+:root {
+    --paper-radius: var(--sld-radius-small);
+    --paper-border: var(--sld-color-foreground-alpha-high);
+    --paper-background-color: var(--sld-color-paper);
+    --paper-background-color-hover: var(--sld-color-paper-darken-low);
+}
+
+.paper {
+    color: var(--paper-border);
+    background-color: var(--paper-background-color);
+    border-radius: var(--paper-radius);
+    @include slotui-mixins.elevation();
+}

package/dist/base/titleBar/TitleBar.demo.svelte

@@ -1,30 +1,30 @@
-<script lang="ts">
-	import { titleBarDemoValues } from './types.js';
-	import { defaultsArgs } from '../demoer/demoer.utils.js';
-	import ComponentDemo from '../demoer/DemoerComponent.svelte';
-	import DemoPage from '../demoer/DemoPage.svelte';
-	import Demoer from '../demoer/Demoer.svelte';
-	import TitleBar from './TitleBar.svelte';
-	let parameters = titleBarDemoValues;
-	let componentArgs = defaultsArgs(parameters);
-
-	let code = `
-    <TitleBar {...activeParams} class="marg-tb-1">
-        {#snippet titleBarIcon()}
-            <Icon fontSize="small" icon="circle" />
-        {/snippet}
-        {#snippet titleBarTitle()}
-            This is a title bar
-        {/snippet}
-    </TitleBar>`;
-</script>
-
-<ComponentDemo component="TitleBar" cite="The title bar is the window to the soul of the app">
-	<DemoPage component="TitleBar" {code}>
-		<Demoer {parameters} {componentArgs}>
-			{#snippet children({ activeParams })}
-				<TitleBar {...activeParams} />
-			{/snippet}
-		</Demoer>
-	</DemoPage>
-</ComponentDemo>
+<script lang="ts">
+	import { titleBarDemoValues } from './types.js';
+	import { defaultsArgs } from '../demoer/demoer.utils.js';
+	import ComponentDemo from '../demoer/DemoerComponent.svelte';
+	import DemoPage from '../demoer/DemoPage.svelte';
+	import Demoer from '../demoer/Demoer.svelte';
+	import TitleBar from './TitleBar.svelte';
+	let parameters = titleBarDemoValues;
+	let componentArgs = defaultsArgs(parameters);
+
+	let code = `
+    <TitleBar {...activeParams} class="marg-tb-1">
+        {#snippet titleBarIcon()}
+            <Icon fontSize="small" icon="circle" />
+        {/snippet}
+        {#snippet titleBarTitle()}
+            This is a title bar
+        {/snippet}
+    </TitleBar>`;
+</script>
+
+<ComponentDemo component="TitleBar" cite="The title bar is the window to the soul of the app">
+	<DemoPage component="TitleBar" {code}>
+		<Demoer {parameters} {componentArgs}>
+			{#snippet children({ activeParams })}
+				<TitleBar {...activeParams} />
+			{/snippet}
+		</Demoer>
+	</DemoPage>
+</ComponentDemo>

package/dist/base/titleBar/TitleBar.svelte

@@ -1,42 +1,42 @@
-<script lang="ts">
-	import Icon from '../icon/Icon.svelte';
-	import Button from '../../controls/button/Button.svelte';
-	import IconButton from '../../controls/button/IconButton.svelte';
-	import type { ExpandProps } from '../../types/index.js';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-	import type { TitleBarProps } from './types.js';
-
-	let {
-		onClose,
-		hasMenu = false,
-		icon,
-		title,
-		titleBarIcon,
-		titleBarTitle
-	}: ExpandProps<TitleBarProps> = $props();
-</script>
-
-<div class="title-bar">
-	<div class="title-bar-content">
-		<div class="title-bar-content-icon">
-			<Slotted child={titleBarIcon}><Icon iconSize="small" {icon} /></Slotted>
-		</div>
-		<div class="title-bar-content-title">
-			<Slotted child={titleBarTitle}>
-				{title}
-			</Slotted>
-		</div>
-	</div>
-	{#if hasMenu}
-		<div class="title-bar-menu">
-			<!--<ButtonAction/>-->
-		</div>
-	{/if}
-	{#if Boolean(onClose)}
-		<IconButton onclick={onClose} variant="naked" icon="window-close" width={'mini'} />
-	{/if}
-</div>
-
+<script lang="ts">
+	import Icon from '../icon/Icon.svelte';
+	import Button from '../../controls/button/Button.svelte';
+	import IconButton from '../../controls/button/IconButton.svelte';
+	import type { ExpandProps } from '../../types/index.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { TitleBarProps } from './types.js';
+
+	let {
+		onClose,
+		hasMenu = false,
+		icon,
+		title,
+		titleBarIcon,
+		titleBarTitle
+	}: ExpandProps<TitleBarProps> = $props();
+</script>
+
+<div class="title-bar">
+	<div class="title-bar-content">
+		<div class="title-bar-content-icon">
+			<Slotted child={titleBarIcon}><Icon iconSize="small" {icon} /></Slotted>
+		</div>
+		<div class="title-bar-content-title">
+			<Slotted child={titleBarTitle}>
+				{title}
+			</Slotted>
+		</div>
+	</div>
+	{#if hasMenu}
+		<div class="title-bar-menu">
+			<!--<ButtonAction/>-->
+		</div>
+	{/if}
+	{#if Boolean(onClose)}
+		<IconButton onclick={onClose} variant="naked" icon="window-close" width={'mini'} />
+	{/if}
+</div>
+
 <style global>:root {
   --title-bar-gap: var(--sld-gap-med);
   --title-bar-pad: var(--sld-pad-med);
@@ -64,4 +64,4 @@
 }
 .title-bar {
   border-bottom: 1px solid var(--title-bar-color-border-bottom);
-}</style>
+}</style>

package/dist/base/titleBar/title-bar.scss

@@ -1,29 +1,29 @@
-@use "../../styles/slotui-mixins.scss";
-
-:root {
-    --title-bar-gap: var(--sld-gap-med);
-    --title-bar-pad: var(--sld-pad-med);
-    --title-bar-color-border-bottom: var(--sld-color-border);
-}
-
-.title-bar {
-    @include slotui-mixins.flex(row, center);
-    &-content {
-        @include slotui-mixins.flex(row, center);
-        gap: var(--title-bar-gap);
-        min-height: 34px;
-        flex: 1;
-
-        &-icon {
-            padding: var(--title-bar-pad);
-        }
-
-        &-title {
-            flex: 1;
-        }
-    }
-
-    & {
-        border-bottom: 1px solid var(--title-bar-color-border-bottom);
-    }
-}
+@use "../../styles/slotui-mixins.scss";
+
+:root {
+    --title-bar-gap: var(--sld-gap-med);
+    --title-bar-pad: var(--sld-pad-med);
+    --title-bar-color-border-bottom: var(--sld-color-border);
+}
+
+.title-bar {
+    @include slotui-mixins.flex(row, center);
+    &-content {
+        @include slotui-mixins.flex(row, center);
+        gap: var(--title-bar-gap);
+        min-height: 34px;
+        flex: 1;
+
+        &-icon {
+            padding: var(--title-bar-pad);
+        }
+
+        &-title {
+            flex: 1;
+        }
+    }
+
+    & {
+        border-bottom: 1px solid var(--title-bar-color-border-bottom);
+    }
+}

package/dist/controls/autocomplete/AutoComplete.demo.svelte

@@ -1,88 +1,88 @@
-<script lang="ts">
-	import AutoComplete from './AutoComplete.svelte';
-	import MenuItem from '../../ui/menu/MenuItem.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 data = [
-		{ id: 1, name: 'Wanda', surname: 'Wand', lastname: 'Groot', age: 23 },
-		{ id: 2, name: 'John', surname: 'Jo', lastname: 'Doe', age: 33 },
-		{ id: 3, name: 'Jane', surname: 'Jay', lastname: 'Doe', age: 43 },
-		{ id: 4, name: 'Peter', surname: 'Piotr', lastname: 'Parker', age: 53 },
-		{ id: 5, name: 'Mary', surname: 'Ma', lastname: 'Jane', age: 63 },
-		{ id: 6, name: 'Bruce', surname: 'Banner', lastname: 'Wayne', age: 73 }
-	];
-
-	let codeSlot = `
-<AutoComplete 
-	class="marg-b"
-	placeholder="Search in list"
-	style="width:200px"
-	{data}>
-	{#snippet children(menuItemData)}
-		<MenuItem data={menuItemData}>{menuItemData.name} {menuItemData.lastname}</MenuItem>
-	{/snippet}
-	{#snippet autoCompleteEmpty()}
-		<div class="pad">No results found</div>
-	{/snippet}
-	{#snippet autoCompleteNoResults()}
-		<div class="pad">No results found</div>
-	{/snippet}
-</AutoComplete>`;
-
-	let codeProps = `
-<AutoComplete
-  let:menuItemData
-  {data}
-  onPick={()=>{}}
-  class="marg-b"
-  placeholder="Search in list"
-  style="width:200px"
-  dataFieldName="name" />`;
-</script>
-
-<ComponentDemo component="AutoComplete">
-	<div class="flex-v gap-large">
-		<DemoPage code={codeSlot} component="AutoComplete">
-			<Demoer {componentArgs} {parameters}>
-				{#snippet children({ activeParams })}
-					<AutoComplete
-						{...activeParams}
-						class="marg-b"
-						placeholder="Search in list"
-						style="width:200px"
-						{data}
-					>
-						{#snippet children(menuItemData)}
-							<MenuItem data={menuItemData}>{menuItemData.name} {menuItemData.lastname}</MenuItem>
-						{/snippet}
-						{#snippet autoCompleteEmpty()}
-							<div class="pad">No results found</div>
-						{/snippet}
-						{#snippet autoCompleteNoResults()}
-							<div class="pad">No results found</div>
-						{/snippet}
-					</AutoComplete>
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-		<DemoPage code={codeProps} component="AutoComplete" title="Using props">
-			<Demoer {componentArgs} {parameters}>
-				{#snippet children({ activeParams })}
-					<AutoComplete
-						{...activeParams}
-						{data}
-						onchange={() => {}}
-						class="marg-b"
-						placeholder="Search in list"
-						style="width:200px"
-						dataFieldName="name"
-					/>
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-	</div>
-</ComponentDemo>
+<script lang="ts">
+	import AutoComplete from './AutoComplete.svelte';
+	import MenuItem from '../../ui/menu/MenuItem.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 data = [
+		{ id: 1, name: 'Wanda', surname: 'Wand', lastname: 'Groot', age: 23 },
+		{ id: 2, name: 'John', surname: 'Jo', lastname: 'Doe', age: 33 },
+		{ id: 3, name: 'Jane', surname: 'Jay', lastname: 'Doe', age: 43 },
+		{ id: 4, name: 'Peter', surname: 'Piotr', lastname: 'Parker', age: 53 },
+		{ id: 5, name: 'Mary', surname: 'Ma', lastname: 'Jane', age: 63 },
+		{ id: 6, name: 'Bruce', surname: 'Banner', lastname: 'Wayne', age: 73 }
+	];
+
+	let codeSlot = `
+<AutoComplete 
+	class="marg-b"
+	placeholder="Search in list"
+	style="width:200px"
+	{data}>
+	{#snippet children(menuItemData)}
+		<MenuItem data={menuItemData}>{menuItemData.name} {menuItemData.lastname}</MenuItem>
+	{/snippet}
+	{#snippet autoCompleteEmpty()}
+		<div class="pad">No results found</div>
+	{/snippet}
+	{#snippet autoCompleteNoResults()}
+		<div class="pad">No results found</div>
+	{/snippet}
+</AutoComplete>`;
+
+	let codeProps = `
+<AutoComplete
+  let:menuItemData
+  {data}
+  onPick={()=>{}}
+  class="marg-b"
+  placeholder="Search in list"
+  style="width:200px"
+  dataFieldName="name" />`;
+</script>
+
+<ComponentDemo component="AutoComplete">
+	<div class="flex-v gap-large">
+		<DemoPage code={codeSlot} component="AutoComplete">
+			<Demoer {componentArgs} {parameters}>
+				{#snippet children({ activeParams })}
+					<AutoComplete
+						{...activeParams}
+						class="marg-b"
+						placeholder="Search in list"
+						style="width:200px"
+						{data}
+					>
+						{#snippet children(menuItemData)}
+							<MenuItem data={menuItemData}>{menuItemData.name} {menuItemData.lastname}</MenuItem>
+						{/snippet}
+						{#snippet autoCompleteEmpty()}
+							<div class="pad">No results found</div>
+						{/snippet}
+						{#snippet autoCompleteNoResults()}
+							<div class="pad">No results found</div>
+						{/snippet}
+					</AutoComplete>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+		<DemoPage code={codeProps} component="AutoComplete" title="Using props">
+			<Demoer {componentArgs} {parameters}>
+				{#snippet children({ activeParams })}
+					<AutoComplete
+						{...activeParams}
+						{data}
+						onchange={() => {}}
+						class="marg-b"
+						placeholder="Search in list"
+						style="width:200px"
+						dataFieldName="name"
+					/>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>