@medyll/idae-slotui-svelte 0.122.0 → 0.123.0

package/dist/controls/slider/slider.scss

@@ -1,51 +1,51 @@
-@use "../../styles/slotui-mixins.scss";
-
-:root {
-    --slider-background-color: var(--sld-color-background);
-    --slider-gouge-background-color: var(--sld-color-secondary);
-    --slider-gouge-selected-background-color: var(--sld-color-primary);
-    --slider-thumb-background-color: var(--sld-color-primary);
-    --slider-thumb-border: var(--sld-color-primary-darken-high);
-    --slider-thumb-hover-outline: var(--sld-color-primary-alpha-high);
-    --slider-thumb-hover-box-shadow: var(--sld-elevation-3);
-}
-
-.slider {
-    @include slotui-mixins.ui-tall-presets;
-    & {
-        --height: calc(var(--preset-density) / 6);
-        background-color: var(--slider-background-color);
-        position: relative;
-        display: inline-flex;
-        flex-direction: row;
-        align-items: center;
-        width: 168px;
-    }
-    .slider-gouge {
-        height: var(--height);
-        width: 100%;
-        border-radius: 10px;
-        background-color: var(--slider-gouge-background-color);
-    }
-    .slider-gouge-selected {
-        height: var(--height);
-        border-radius: 10px;
-        background-color: var(--slider-gouge-selected-background-color);
-    }
-    .slider-thumb {
-        top: 0;
-        aspect-ratio: 1/1;
-        height: 90%;
-        transform: translateY(50%);
-        background-color: var(--slider-thumb-background-color);
-        position: absolute;
-        border: 3px solid var(--slider-thumb-border);
-        border-radius: 50%;
-        display: inline-block;
-        background-clip: padding-box;
-        &:hover {
-            box-shadow: var(--slider-thumb-hover-box-shadow);
-            outline: 4px solid var(--slider-thumb-hover-outline);
-        }
-    }
-}
+@use "../../styles/slotui-mixins.scss";
+
+:root {
+    --slider-background-color: var(--sld-color-background);
+    --slider-gouge-background-color: var(--sld-color-secondary);
+    --slider-gouge-selected-background-color: var(--sld-color-primary);
+    --slider-thumb-background-color: var(--sld-color-primary);
+    --slider-thumb-border: var(--sld-color-primary-darken-high);
+    --slider-thumb-hover-outline: var(--sld-color-primary-alpha-high);
+    --slider-thumb-hover-box-shadow: var(--sld-elevation-3);
+}
+
+.slider {
+    @include slotui-mixins.ui-tall-presets;
+    & {
+        --height: calc(var(--preset-density) / 6);
+        background-color: var(--slider-background-color);
+        position: relative;
+        display: inline-flex;
+        flex-direction: row;
+        align-items: center;
+        width: 168px;
+    }
+    .slider-gouge {
+        height: var(--height);
+        width: 100%;
+        border-radius: 10px;
+        background-color: var(--slider-gouge-background-color);
+    }
+    .slider-gouge-selected {
+        height: var(--height);
+        border-radius: 10px;
+        background-color: var(--slider-gouge-selected-background-color);
+    }
+    .slider-thumb {
+        top: 0;
+        aspect-ratio: 1/1;
+        height: 90%;
+        transform: translateY(50%);
+        background-color: var(--slider-thumb-background-color);
+        position: absolute;
+        border: 3px solid var(--slider-thumb-border);
+        border-radius: 50%;
+        display: inline-block;
+        background-clip: padding-box;
+        &:hover {
+            box-shadow: var(--slider-thumb-hover-box-shadow);
+            outline: 4px solid var(--slider-thumb-hover-outline);
+        }
+    }
+}

package/dist/controls/stepper/Stepper.demo.svelte

@@ -1,32 +1,32 @@
-<script lang="ts">
-	import Stepper from './Stepper.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 code = `
-	<Stepper>
-	
-	</Stepper>`;
-</script>
-
-<ComponentDemo
-	component="Stepper"
-	cite="If a step was a leap it would soar over the next step.<br /> Clara Boxee 2010"
->
-	<div class="flex-v gap-large">
-		<DemoPage component="Stepper" {code}>
-			<Demoer {parameters} {...componentArgs}>
-				{#snippet children({ activeParams })}
-					<Stepper {...activeParams}>
-						{#snippet children(step)}
-							{step.title}, step
-						{/snippet}
-					</Stepper>
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-	</div>
-</ComponentDemo>
+<script lang="ts">
+	import Stepper from './Stepper.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 code = `
+	<Stepper>
+	
+	</Stepper>`;
+</script>
+
+<ComponentDemo
+	component="Stepper"
+	cite="If a step was a leap it would soar over the next step.<br /> Clara Boxee 2010"
+>
+	<div class="flex-v gap-large">
+		<DemoPage component="Stepper" {code}>
+			<Demoer {parameters} {...componentArgs}>
+				{#snippet children({ activeParams })}
+					<Stepper {...activeParams}>
+						{#snippet children(step)}
+							{step.title}, step
+						{/snippet}
+					</Stepper>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/controls/stepper/Stepper.svelte

@@ -1,32 +1,32 @@
-<script lang="ts" generics="T = Data">
-	import type { StepperProps } from './types.js';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-	import type { Data, ExpandProps } from '../../types/index.js';
-
-	export const actions = {
-		setActiveStep: function (step: number) {
-			activeStep = step ?? 0;
-		}
-	};
-
-	let {
-		steps = $bindable([]),
-		stepperOrientation = 'horizontal',
-		activeStep = $bindable(0),
-		children
-	}: ExpandProps<StepperProps<T>> = $props();
-
-	let child = children;
-</script>
-
-<div class="stepper {stepperOrientation}">
-	{#each steps as step, index}
-		<div title={step.title} class="stepper-step">
-			<Slotted child={children} slotArgs={{ step, index }}>de</Slotted>
-		</div>
-	{/each}
-</div>
-
+<script lang="ts" generics="T = Data">
+	import type { StepperProps } from './types.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { Data, ExpandProps } from '../../types/index.js';
+
+	export const actions = {
+		setActiveStep: function (step: number) {
+			activeStep = step ?? 0;
+		}
+	};
+
+	let {
+		steps = $bindable([]),
+		stepperOrientation = 'horizontal',
+		activeStep = $bindable(0),
+		children
+	}: ExpandProps<StepperProps<T>> = $props();
+
+	let child = children;
+</script>
+
+<div class="stepper {stepperOrientation}">
+	{#each steps as step, index}
+		<div title={step.title} class="stepper-step">
+			<Slotted child={children} slotArgs={{ step, index }}>de</Slotted>
+		</div>
+	{/each}
+</div>
+
 <style>:root {
   --stepper-pad: var(--sld-pad-med);
   --stepper-radius: var(--sld-radius-small);
@@ -46,4 +46,4 @@
 }
 .stepper-step.active {
   color: var(--stepper-active-color);
-}</style>
+}</style>

package/dist/controls/stepper/stepper.scss

@@ -1,23 +1,23 @@
-@use "../../styles/slotui-mixins.scss";
-
-:root {
-    --stepper-pad: var(--sld-pad-med);
-    --stepper-radius: var(--sld-radius-small);
-    --stepper-active-color: var(--sld-color-secondary);
-}
-
-.stepper {
-    display: flex;
-    &.vertical {
-        flex-direction: column;
-    }
-    &-step {
-        padding: var(--stepper-pad);
-        border-radius: var(--stepper-radius);
-        margin-top: 10px;
-
-        &.active {
-            color: var(--stepper-active-color);
-        }
-    }
-}
+@use "../../styles/slotui-mixins.scss";
+
+:root {
+    --stepper-pad: var(--sld-pad-med);
+    --stepper-radius: var(--sld-radius-small);
+    --stepper-active-color: var(--sld-color-secondary);
+}
+
+.stepper {
+    display: flex;
+    &.vertical {
+        flex-direction: column;
+    }
+    &-step {
+        padding: var(--stepper-pad);
+        border-radius: var(--stepper-radius);
+        margin-top: 10px;
+
+        &.active {
+            color: var(--stepper-active-color);
+        }
+    }
+}

package/dist/controls/switch/Switch.demo.svelte

@@ -1,61 +1,61 @@
-<script lang="ts">
-	import Switch from './Switch.svelte';
-	import { defaultsArgs, defaultsArgsFromProps } from '../../base/demoer/demoer.utils.js';
-	/* demo */
-	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 */
-
-	let parametersSlot: any = {
-		autoClose: {
-			type: 'boolean',
-			values: [true, false]
-		},
-		stickToHookWidth: {
-			type: 'boolean',
-			values: [true, false]
-		},
-		position: {
-			type: 'string',
-			values: uiPresets.stickyPosition
-		}
-	};
-
-	let componentArgs = defaultsArgs(parametersSlot);
-
-	let codeSlot = `
-<Switch  name={'switcher'} class="w-small" >
- 
-</Switch>`;
-
-	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" />`;
-</script>
-
-<ComponentDemo component="Switch">
-	<div class="flex-v gap-large">
-		<DemoPage code={codeSlot} component="Switch">
-			<Demoer parameters={parametersSlot} {componentArgs}>
-				{#snippet children({ activeParams })}
-					<div class="pad-2">
-						<Switch {...activeParams} name={'switcher'}></Switch>
-					</div>
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-	</div>
-</ComponentDemo>
+<script lang="ts">
+	import Switch from './Switch.svelte';
+	import { defaultsArgs, defaultsArgsFromProps } from '../../base/demoer/demoer.utils.js';
+	/* demo */
+	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 */
+
+	let parametersSlot: any = {
+		autoClose: {
+			type: 'boolean',
+			values: [true, false]
+		},
+		stickToHookWidth: {
+			type: 'boolean',
+			values: [true, false]
+		},
+		position: {
+			type: 'string',
+			values: uiPresets.stickyPosition
+		}
+	};
+
+	let componentArgs = defaultsArgs(parametersSlot);
+
+	let codeSlot = `
+<Switch  name={'switcher'} class="w-small" >
+ 
+</Switch>`;
+
+	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" />`;
+</script>
+
+<ComponentDemo component="Switch">
+	<div class="flex-v gap-large">
+		<DemoPage code={codeSlot} component="Switch">
+			<Demoer parameters={parametersSlot} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<div class="pad-2">
+						<Switch {...activeParams} name={'switcher'}></Switch>
+					</div>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/controls/switch/Switch.svelte

@@ -1,47 +1,47 @@
-<script lang="ts" generics="T=Data">
-	//
-	import type { Data, ExpandProps } from '../../types/index.js';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-	import type { SwitchProps } from './types.js';
-
-	let {
-		class: className = '',
-		style = '',
-		element = $bindable<HTMLElement | null>(null),
-		name = $bindable<string>(undefined),
-		checked = $bindable<boolean>(false),
-		disabled = $bindable<boolean>(false),
-		metaData,
-		onChange = (val: boolean, metaData: T) => {},
-		children,
-		switchLabel
-	}: ExpandProps<SwitchProps<T>> = $props();
-
-	let hiddenRef: HTMLInputElement;
-</script>
-
-<input bind:this={hiddenRef} {name} id={name} value={checked} type="hidden" />
-<label bind:this={element} for="_{name}" class="switch {className}" {style}>
-	<Slotted child={switchLabel} />
-
-	<div class="switchGutter">
-		<input
-			onchange={(event) => {
-				if (hiddenRef) hiddenRef.value = `${event.currentTarget.checked}`;
-				onChange(event.currentTarget.checked, metaData as T);
-			}}
-			id="_{name}"
-			{checked}
-			{disabled}
-			type="checkbox"
-		/>
-		<div class="switchHandle">
-			<Slotted child={children} />
-		</div>
-	</div>
-</label>
-..
-
+<script lang="ts" generics="T=Data">
+	//
+	import type { Data, ExpandProps } from '../../types/index.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { SwitchProps } from './types.js';
+
+	let {
+		class: className = '',
+		style = '',
+		element = $bindable<HTMLElement | null>(null),
+		name = $bindable<string>(undefined),
+		checked = $bindable<boolean>(false),
+		disabled = $bindable<boolean>(false),
+		metaData,
+		onChange = (val: boolean, metaData: T) => {},
+		children,
+		switchLabel
+	}: ExpandProps<SwitchProps<T>> = $props();
+
+	let hiddenRef: HTMLInputElement;
+</script>
+
+<input bind:this={hiddenRef} {name} id={name} value={checked} type="hidden" />
+<label bind:this={element} for="_{name}" class="switch {className}" {style}>
+	<Slotted child={switchLabel} />
+
+	<div class="switchGutter">
+		<input
+			onchange={(event) => {
+				if (hiddenRef) hiddenRef.value = `${event.currentTarget.checked}`;
+				onChange(event.currentTarget.checked, metaData as T);
+			}}
+			id="_{name}"
+			{checked}
+			{disabled}
+			type="checkbox"
+		/>
+		<div class="switchHandle">
+			<Slotted child={children} />
+		</div>
+	</div>
+</label>
+..
+
 <style>:root {
   --switch-border-radius: var(--sld-radius-large);
   --switch-background: var(--sld-color-paper);
@@ -104,4 +104,4 @@ label {
   border: none;
   padding: 0;
   min-width: 42px;
-}</style>
+}</style>

package/dist/controls/switch/switch.scss

@@ -1,73 +1,73 @@
-@use "../../styles/slotui-mixins.scss";
-
-:root {
-    --switch-border-radius: var(--sld-radius-large);
-    --switch-background: var(--sld-color-paper);
-    --switch-checked-background: var(--sld-color-primary);
-    --switch-handle-background-color: var(--sld-color-primary);
-    --switch-handle-border: var(--sld-color-secondary-alpha-low);
-    --switch-gutter-border: var(--sld-color-primary-alpha-low);
-    --switch-gutter-background: var(--sld-switch-background);
-    --switch-gutter-padding: 3px;
-}
-
-.switch {
-    display: inline-block;
-    position: relative;
-    border-radius: var(--switch-border-radius);
-    overflow: hidden;
-    cursor: pointer;
-
-    :hover {
-        .switchHandle {
-            background-color: var(--sld-color-secondary) !important;
-        }
-    }
-
-    :has(input:checked) {
-        background-color: var(--switch-checked-background);
-    }
-
-    .switchGutter {
-        border: 1px solid var(--switch-gutter-border);
-        border-radius: var(--switch-border-radius);
-        padding: var(--switch-gutter-padding);
-        background-color: var(--switch-gutter-background);
-
-        input {
-            position: absolute;
-            width: 0;
-            height: 0;
-            top: -50px;
-            left: -50px;
-        }
-
-        input:checked + .switchHandle {
-            left: calc(100% - 16px);
-            border-color: var(--sld-color-secondary-alpha-mid);
-            box-shadow: var(--sld-elevation-3);
-            background-color: var(--sld-color-background);
-        }
-
-        input + .switchHandle {
-            position: relative;
-            display: block;
-            width: 16px;
-            height: 16px;
-            background: white;
-            border-radius: var(--switch-border-radius);
-            left: 0;
-            transition: all 0.1s;
-            background-color: var(--switch-handle-background-color);
-            border: 1px solid var(--switch-handle-border);
-            box-shadow: var(--sld-elevation-1);
-        }
-    }
-}
-
-label {
-    background-color: transparent;
-    border: none;
-    padding: 0;
-    min-width: 42px;
-}
+@use "../../styles/slotui-mixins.scss";
+
+:root {
+    --switch-border-radius: var(--sld-radius-large);
+    --switch-background: var(--sld-color-paper);
+    --switch-checked-background: var(--sld-color-primary);
+    --switch-handle-background-color: var(--sld-color-primary);
+    --switch-handle-border: var(--sld-color-secondary-alpha-low);
+    --switch-gutter-border: var(--sld-color-primary-alpha-low);
+    --switch-gutter-background: var(--sld-switch-background);
+    --switch-gutter-padding: 3px;
+}
+
+.switch {
+    display: inline-block;
+    position: relative;
+    border-radius: var(--switch-border-radius);
+    overflow: hidden;
+    cursor: pointer;
+
+    :hover {
+        .switchHandle {
+            background-color: var(--sld-color-secondary) !important;
+        }
+    }
+
+    :has(input:checked) {
+        background-color: var(--switch-checked-background);
+    }
+
+    .switchGutter {
+        border: 1px solid var(--switch-gutter-border);
+        border-radius: var(--switch-border-radius);
+        padding: var(--switch-gutter-padding);
+        background-color: var(--switch-gutter-background);
+
+        input {
+            position: absolute;
+            width: 0;
+            height: 0;
+            top: -50px;
+            left: -50px;
+        }
+
+        input:checked + .switchHandle {
+            left: calc(100% - 16px);
+            border-color: var(--sld-color-secondary-alpha-mid);
+            box-shadow: var(--sld-elevation-3);
+            background-color: var(--sld-color-background);
+        }
+
+        input + .switchHandle {
+            position: relative;
+            display: block;
+            width: 16px;
+            height: 16px;
+            background: white;
+            border-radius: var(--switch-border-radius);
+            left: 0;
+            transition: all 0.1s;
+            background-color: var(--switch-handle-background-color);
+            border: 1px solid var(--switch-handle-border);
+            box-shadow: var(--sld-elevation-1);
+        }
+    }
+}
+
+label {
+    background-color: transparent;
+    border: none;
+    padding: 0;
+    min-width: 42px;
+}