@medyll/idae-slotui-svelte 0.122.1 → 0.123.0

package/dist/controls/select/Select.svelte

@@ -1,127 +1,127 @@
-<script lang="ts">
-	import type { CommonProps, Data, ElementProps, ExpandProps } from '../../types/index.js';
-	import TextField from '../textfield/TextField.svelte';
-	import Icon from '../../base/icon/Icon.svelte';
-	import Popper from '../../ui/popper/Popper.svelte';
-	import Menu from '../../ui/menu/Menu.svelte';
-	import MenuItem from '../../ui/menu/MenuItem.svelte';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-	import type { Snippet } from 'svelte';
-
-	type SelectProps = CommonProps & {
-		/** The position of the popper */
-		position?: ElementProps['popperPosition'];
-
-		/** Whether the popper should stick to the hook width */
-		stickToHookWidth: boolean;
-
-		/** Whether the popper should auto close */
-		autoClose?: boolean;
-
-		/** The value of the select */
-		value: any;
-
-		/** The name of the select */
-		name: string;
-
-		/** The style of the select */
-		style?: string;
-
-		/** The class name of the select */
-		className: string;
-
-		/** The data for the select */
-		data: any[];
-		disabled?: boolean;
-		/** The options for the select */
-		options?: {
-			data?: Data;
-			text: string;
-			icon?: any;
-		}[];
-
-		/** The data field id for the select */
-		dataFieldId: string;
-
-		/** The data field name for the select */
-		dataFieldName: string;
-		children?: Snippet<[{ optionsData: Data }]>;
-	};
-
-	let {
-		name,
-		element,
-		disabled = false,
-		data,
-		dataFieldId,
-		dataFieldName,
-		options = [],
-		position,
-		stickToHookWidth,
-		autoClose = false,
-		value = undefined,
-		children,
-		...rest
-	}: ExpandProps<SelectProps> = $props();
-
-	let hiddenRef;
-	let isVisible: boolean = false;
-
-	let timerClick: any;
-
-	const show = (visible: boolean) => (event) => {
-		timerClick = setTimeout(() => {
-			isVisible = visible;
-		}, 250);
-	};
-</script>
-
-<input {value} bind:this={hiddenRef} type="hidden" {name} />
-<Popper {position} {stickToHookWidth} {autoClose} flow="fixed" isOpen={isVisible}>
-	{#snippet popperHolder()}
-		<TextField
-			bind:this={element}
-			onblur={show(false)}
-			on:focus={show(true)}
-			on:keydown={() => {
-				console.log('red');
-			}}
-			placeholder="Select"
-			readonly
-			value=""
-			{style}
-			class={className}
-		>
-			{#snippet inputEnd()}
-				<Icon icon="chevron-down" />
-			{/snippet}
-		</TextField>
-	{/snippet}
-
-	<Menu
-		style="width:100%;"
-		onclick={(event) => {
-			const args = event.detail;
-			hiddenRef.value = args?.[dataFieldId] ?? args?.['id'] ?? args?.[dataFieldName] ?? args;
-			element.value = args?.[dataFieldName] ?? args?.[dataFieldId] ?? args?.['id'] ?? args;
-		}}
-	>
-		{#if data}
-			{#each data as dta}
-				<Slotted child={children} slotArgs={{ optionsData: dta }}>
-					<MenuItem selected={value === 2} data={dta}>{dta?.[dataFieldName]}</MenuItem></Slotted
-				>
-			{/each}
-		{:else if options}
-			{#each options as option}
-				<Slotted child={children} slotArgs={{ optionsData: options }}>
-					<MenuItem icon={option.icon} selected={value === 2} data={option}>{option.text}</MenuItem>
-				</Slotted>
-			{/each}
-		{/if}
-	</Menu>
-</Popper>
-
+<script lang="ts">
+	import type { CommonProps, Data, ElementProps, ExpandProps } from '../../types/index.js';
+	import TextField from '../textfield/TextField.svelte';
+	import Icon from '../../base/icon/Icon.svelte';
+	import Popper from '../../ui/popper/Popper.svelte';
+	import Menu from '../../ui/menu/Menu.svelte';
+	import MenuItem from '../../ui/menu/MenuItem.svelte';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { Snippet } from 'svelte';
+
+	type SelectProps = CommonProps & {
+		/** The position of the popper */
+		position?: ElementProps['popperPosition'];
+
+		/** Whether the popper should stick to the hook width */
+		stickToHookWidth: boolean;
+
+		/** Whether the popper should auto close */
+		autoClose?: boolean;
+
+		/** The value of the select */
+		value: any;
+
+		/** The name of the select */
+		name: string;
+
+		/** The style of the select */
+		style?: string;
+
+		/** The class name of the select */
+		className: string;
+
+		/** The data for the select */
+		data: any[];
+		disabled?: boolean;
+		/** The options for the select */
+		options?: {
+			data?: Data;
+			text: string;
+			icon?: any;
+		}[];
+
+		/** The data field id for the select */
+		dataFieldId: string;
+
+		/** The data field name for the select */
+		dataFieldName: string;
+		children?: Snippet<[{ optionsData: Data }]>;
+	};
+
+	let {
+		name,
+		element,
+		disabled = false,
+		data,
+		dataFieldId,
+		dataFieldName,
+		options = [],
+		position,
+		stickToHookWidth,
+		autoClose = false,
+		value = undefined,
+		children,
+		...rest
+	}: ExpandProps<SelectProps> = $props();
+
+	let hiddenRef;
+	let isVisible: boolean = false;
+
+	let timerClick: any;
+
+	const show = (visible: boolean) => (event) => {
+		timerClick = setTimeout(() => {
+			isVisible = visible;
+		}, 250);
+	};
+</script>
+
+<input {value} bind:this={hiddenRef} type="hidden" {name} />
+<Popper {position} {stickToHookWidth} {autoClose} flow="fixed" isOpen={isVisible}>
+	{#snippet popperHolder()}
+		<TextField
+			bind:this={element}
+			onblur={show(false)}
+			on:focus={show(true)}
+			on:keydown={() => {
+				console.log('red');
+			}}
+			placeholder="Select"
+			readonly
+			value=""
+			{style}
+			class={className}
+		>
+			{#snippet inputEnd()}
+				<Icon icon="chevron-down" />
+			{/snippet}
+		</TextField>
+	{/snippet}
+
+	<Menu
+		style="width:100%;"
+		onclick={(event) => {
+			const args = event.detail;
+			hiddenRef.value = args?.[dataFieldId] ?? args?.['id'] ?? args?.[dataFieldName] ?? args;
+			element.value = args?.[dataFieldName] ?? args?.[dataFieldId] ?? args?.['id'] ?? args;
+		}}
+	>
+		{#if data}
+			{#each data as dta}
+				<Slotted child={children} slotArgs={{ optionsData: dta }}>
+					<MenuItem selected={value === 2} data={dta}>{dta?.[dataFieldName]}</MenuItem></Slotted
+				>
+			{/each}
+		{:else if options}
+			{#each options as option}
+				<Slotted child={children} slotArgs={{ optionsData: options }}>
+					<MenuItem icon={option.icon} selected={value === 2} data={option}>{option.text}</MenuItem>
+				</Slotted>
+			{/each}
+		{/if}
+	</Menu>
+</Popper>
+
 <style>:root {
   --select-background-color: var(--sld-color-background);
   --select-radius: var(--sld-radius-small);
@@ -132,4 +132,4 @@
   height: 160px;
   width: 160px;
   border-radius: var(--select-radius);
-}</style>
+}</style>

package/dist/controls/select/select.scss

@@ -1,13 +1,13 @@
-@use "../../styles/slotui-mixins.scss";
-
-:root {
-  --select-background-color: var(--sld-color-background);
-  --select-radius: var(--sld-radius-small);
-}
-
-.select {
-  background-color: var(--select-background-color);
-  height: 160px;
-  width: 160px;
-  border-radius: var(--select-radius);
-}
+@use "../../styles/slotui-mixins.scss";
+
+:root {
+  --select-background-color: var(--sld-color-background);
+  --select-radius: var(--sld-radius-small);
+}
+
+.select {
+  background-color: var(--select-background-color);
+  height: 160px;
+  width: 160px;
+  border-radius: var(--select-radius);
+}

package/dist/controls/slider/Slider.demo.svelte

@@ -1,34 +1,34 @@
-<script lang="ts">
-	import Slider from './Slider.svelte';
-
-	/* demo */
-	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
-	import Demoer from '../../base/demoer/Demoer.svelte';
-	import DemoPage from '../../base/demoer/DemoPage.svelte';
-	/* demo */
-
-	import { parameters, componentArgs } from './types.js';
-
-	let codeSlot = `
-<Slider  name={'switcher'} class="w-small" >
-  <span   />
-</Slider>`;
-
-	let isOpen = false;
-</script>
-
-<ComponentDemo component="Slider">
-	<div class="flex-v gap-large">
-		<DemoPage code={codeSlot} component="Slider">
-			<Demoer {parameters} {...componentArgs}>
-				{#snippet children({ activeParams })}
-					<div class="pad-2">
-						<Slider {...activeParams} class="flex-h flex-align-middle w-small">
-							<span>tooltip</span>
-						</Slider>
-					</div>
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-	</div>
-</ComponentDemo>
+<script lang="ts">
+	import Slider from './Slider.svelte';
+
+	/* demo */
+	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
+	import Demoer from '../../base/demoer/Demoer.svelte';
+	import DemoPage from '../../base/demoer/DemoPage.svelte';
+	/* demo */
+
+	import { parameters, componentArgs } from './types.js';
+
+	let codeSlot = `
+<Slider  name={'switcher'} class="w-small" >
+  <span   />
+</Slider>`;
+
+	let isOpen = false;
+</script>
+
+<ComponentDemo component="Slider">
+	<div class="flex-v gap-large">
+		<DemoPage code={codeSlot} component="Slider">
+			<Demoer {parameters} {...componentArgs}>
+				{#snippet children({ activeParams })}
+					<div class="pad-2">
+						<Slider {...activeParams} class="flex-h flex-align-middle w-small">
+							<span>tooltip</span>
+						</Slider>
+					</div>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/controls/slider/Slider.svelte

@@ -1,155 +1,155 @@
-<script lang="ts">
-	import type { ExpandProps } from '../../types/index.js';
-	import type { SliderProps } from './types.js';
-
-	let {
-		class: className = '',
-		style = '',
-		dense = 'default',
-		element,
-		elementInput,
-		elementRail,
-		value = $bindable(0),
-		min = 0,
-		max = 100,
-		step = 1,
-		orientation = 'horizontal',
-		reverse = false,
-		disabled = false,
-		onchange
-	}: ExpandProps<SliderProps> = $props();
-
-	let dragging = $state(false);
-	let holding = $state(false);
-
-	const steps = {
-		increase() {
-			value += step;
-			if (value > max) value = max;
-		},
-		decrease() {
-			value -= step;
-			if (value < min) value = min;
-		}
-	};
-
-	const move = {
-		handle() {
-			if (holding) {
-				dragging = true;
-			}
-		},
-		cancel() {
-			holding = false;
-			dragging = false;
-		}
-	};
-
-	const key = {
-		start(event: Event) {
-			if (event.cancelable) event.preventDefault();
-			holding = true;
-		},
-		mouseDown(event: MouseEvent) {
-			if (event.cancelable) event.preventDefault();
-			holding = true;
-		},
-		click(event: MouseEvent) {
-			if (event.cancelable) event.preventDefault();
-			getSliderVal(event);
-			holding = false;
-		},
-		keyDown(event: KeyboardEvent) {
-			const { key } = event;
-			const up = !reverse ? steps.increase : steps.decrease;
-			const down = !reverse ? steps.decrease : steps.increase;
-			if (key === 'ArrowDown' || key === 'ArrowUp') event.preventDefault();
-			if (!disabled) {
-				if (key === 'ArrowLeft' || (key === 'ArrowDown' && !disabled)) {
-					up();
-				} else if (key === 'ArrowRight' || (key === 'ArrowUp' && !disabled)) {
-					down();
-				}
-			}
-		}
-	};
-
-	let percentage = $derived(getPercentage(value));
-	$effect(() => {
-		if (value <= min) value = min;
-		else if (value >= max) value = max;
-	});
-
-	$effect(() => {
-		if (dragging) {
-			getSliderVal(event);
-			dragging = false;
-		}
-	});
-
-	function getPercentage(val: number) {
-		return ((val - min) / (max - min)) * 100;
-	}
-
-	function getSliderVal(event: Event) {
-		// @ts-ignore
-		const { clientX, clientY } = (event.touches ? event.touches?.[0] : event) as TouchEvent;
-		// @ts-ignore
-		const { left, top, width, height } = elementRail?.getBoundingClientRect();
-		const offset = orientation === 'horizontal' ? clientX - left : top + height - clientY;
-		const size = orientation === 'horizontal' ? width : height;
-		const newValue = min + (max - min) * (offset / size);
-		//
-		value = Math.round(newValue / step) * step;
-	}
-</script>
-
-<svelte:window
-	onmousemove={move.handle}
-	onmouseup={move.cancel}
-	ontouchmove={move.handle}
-	ontouchend={move.cancel}
-	ontouchcancel={move.cancel}
-/>
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-<div
-	class="slider {className} dense-{dense}"
-	onmousedown={key.mouseDown}
-	ontouchstart={key.start}
-	onkeydown={key.keyDown}
-	onclick={key.click}
-	tabindex="0"
-	{style}
-	bind:this={element}
->
-	<div class="slider-gouge" bind:this={elementRail}>
-		<div class="slider-gouge-selected" style="width:{percentage}%;"></div>
-	</div>
-
-	<div
-		class="slider-thumb"
-		aria-valuemin={min}
-		aria-valuemax={max}
-		aria-valuenow={value}
-		role="slider"
-		style="left: {percentage}%;transform: translateX(-50%);"
-	></div>
-
-	<input
-		{onchange}
-		hidden
-		type="range"
-		bind:this={elementInput}
-		{disabled}
-		{value}
-		{min}
-		{max}
-		{step}
-	/>
-</div>
-
+<script lang="ts">
+	import type { ExpandProps } from '../../types/index.js';
+	import type { SliderProps } from './types.js';
+
+	let {
+		class: className = '',
+		style = '',
+		dense = 'default',
+		element,
+		elementInput,
+		elementRail,
+		value = $bindable(0),
+		min = 0,
+		max = 100,
+		step = 1,
+		orientation = 'horizontal',
+		reverse = false,
+		disabled = false,
+		onchange
+	}: ExpandProps<SliderProps> = $props();
+
+	let dragging = $state(false);
+	let holding = $state(false);
+
+	const steps = {
+		increase() {
+			value += step;
+			if (value > max) value = max;
+		},
+		decrease() {
+			value -= step;
+			if (value < min) value = min;
+		}
+	};
+
+	const move = {
+		handle() {
+			if (holding) {
+				dragging = true;
+			}
+		},
+		cancel() {
+			holding = false;
+			dragging = false;
+		}
+	};
+
+	const key = {
+		start(event: Event) {
+			if (event.cancelable) event.preventDefault();
+			holding = true;
+		},
+		mouseDown(event: MouseEvent) {
+			if (event.cancelable) event.preventDefault();
+			holding = true;
+		},
+		click(event: MouseEvent) {
+			if (event.cancelable) event.preventDefault();
+			getSliderVal(event);
+			holding = false;
+		},
+		keyDown(event: KeyboardEvent) {
+			const { key } = event;
+			const up = !reverse ? steps.increase : steps.decrease;
+			const down = !reverse ? steps.decrease : steps.increase;
+			if (key === 'ArrowDown' || key === 'ArrowUp') event.preventDefault();
+			if (!disabled) {
+				if (key === 'ArrowLeft' || (key === 'ArrowDown' && !disabled)) {
+					up();
+				} else if (key === 'ArrowRight' || (key === 'ArrowUp' && !disabled)) {
+					down();
+				}
+			}
+		}
+	};
+
+	let percentage = $derived(getPercentage(value));
+	$effect(() => {
+		if (value <= min) value = min;
+		else if (value >= max) value = max;
+	});
+
+	$effect(() => {
+		if (dragging) {
+			getSliderVal(event);
+			dragging = false;
+		}
+	});
+
+	function getPercentage(val: number) {
+		return ((val - min) / (max - min)) * 100;
+	}
+
+	function getSliderVal(event: Event) {
+		// @ts-ignore
+		const { clientX, clientY } = (event.touches ? event.touches?.[0] : event) as TouchEvent;
+		// @ts-ignore
+		const { left, top, width, height } = elementRail?.getBoundingClientRect();
+		const offset = orientation === 'horizontal' ? clientX - left : top + height - clientY;
+		const size = orientation === 'horizontal' ? width : height;
+		const newValue = min + (max - min) * (offset / size);
+		//
+		value = Math.round(newValue / step) * step;
+	}
+</script>
+
+<svelte:window
+	onmousemove={move.handle}
+	onmouseup={move.cancel}
+	ontouchmove={move.handle}
+	ontouchend={move.cancel}
+	ontouchcancel={move.cancel}
+/>
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+	class="slider {className} dense-{dense}"
+	onmousedown={key.mouseDown}
+	ontouchstart={key.start}
+	onkeydown={key.keyDown}
+	onclick={key.click}
+	tabindex="0"
+	{style}
+	bind:this={element}
+>
+	<div class="slider-gouge" bind:this={elementRail}>
+		<div class="slider-gouge-selected" style="width:{percentage}%;"></div>
+	</div>
+
+	<div
+		class="slider-thumb"
+		aria-valuemin={min}
+		aria-valuemax={max}
+		aria-valuenow={value}
+		role="slider"
+		style="left: {percentage}%;transform: translateX(-50%);"
+	></div>
+
+	<input
+		{onchange}
+		hidden
+		type="range"
+		bind:this={elementInput}
+		{disabled}
+		{value}
+		{min}
+		{max}
+		{step}
+	/>
+</div>
+
 <style>:root {
   --slider-background-color: var(--sld-color-background);
   --slider-gouge-background-color: var(--sld-color-secondary);
@@ -223,4 +223,4 @@
 .slider .slider-thumb:hover {
   box-shadow: var(--slider-thumb-hover-box-shadow);
   outline: 4px solid var(--slider-thumb-hover-outline);
-}</style>
+}</style>