@medyll/idae-slotui-svelte 0.26.0 → 0.28.0

package/dist/controls/select/Select.demo.svelte

@@ -1,38 +1,45 @@
-<script lang="ts">import Select from "./Select.svelte";
-import Button from "../button/Button.svelte";
-import { defaultsArgs, defaultsArgsFromProps } 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 MenuItem from "../../ui/menu/MenuItem.svelte";
-let parametersSlot = {
-  autoClose: {
-    type: "boolean",
-    values: [true, false]
-  },
-  stickToHookWidth: {
-    type: "boolean",
-    values: [false, true]
-  },
-  position: {
-    type: "string",
-    values: uiPresets.stickyPosition
-  }
-};
-let componentArgsSlot = {
-  ...defaultsArgs(parametersSlot),
-  position: "BC",
-  data: [
-    { id: 1, name: "name 1" },
-    { id: 2, name: "name 2" },
-    { id: 3, name: "name 3" },
-    { id: 4, name: "name 4" },
-    { id: 5, name: "name 5" }
-  ]
-};
-let codeSlot = `<script>
+<script lang="ts">
+	import Select from './Select.svelte';
+	import Button from '../button/Button.svelte';
+	/* demo */
+	import { defaultsArgs, defaultsArgsFromProps } 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';
+	/* demo */
+
+	import MenuItem from '../../ui/menu/MenuItem.svelte';
+
+	let parametersSlot: any = {
+		autoClose: {
+			type: 'boolean',
+			values: [true, false]
+		},
+		stickToHookWidth: {
+			type: 'boolean',
+			values: [false, true]
+		},
+		position: {
+			type: 'string',
+			values: uiPresets.stickyPosition
+		}
+	};
+
+	let componentArgsSlot = {
+		...defaultsArgs(parametersSlot),
+		position: 'BC',
+		data: [
+			{ id: 1, name: 'name 1' },
+			{ id: 2, name: 'name 2' },
+			{ id: 3, name: 'name 3' },
+			{ id: 4, name: 'name 4' },
+			{ id: 5, name: 'name 5' }
+		]
+	};
+
+	let codeSlot = `<script>
     const data = [{id:1,name:'name'},{id:2,name:'name'}];
 <script> 
 
@@ -52,7 +59,8 @@ let codeSlot = `<script>
   dataFieldName={"name"} />
 </Select>
 `;
-let codeProps = `
+
+	let codeProps = `
 <Loader
     status={"loading"}
     messages={{
@@ -65,7 +73,8 @@ let codeProps = `
     errorIcon="mdi:alert-circle-outline"
     loadingIcon="mdi:loading"
     successIcon="clarity:success-standard-line" />`;
-let isOpen = false;
+
+	let isOpen = false;
 </script>
 
 <ComponentDemo component="Select">

package/dist/controls/select/Select.svelte

@@ -1,32 +1,79 @@
-<script lang="ts">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";
-let {
-  name,
-  element,
-  disabled = false,
-  data,
-  dataFieldId,
-  dataFieldName,
-  options = [],
-  position,
-  stickToHookWidth,
-  autoClose = false,
-  value = void 0,
-  children,
-  ...rest
-} = $props();
-let hiddenRef;
-let isVisible = false;
-let timerClick;
-const show = (visible) => (event) => {
-  timerClick = setTimeout(() => {
-    isVisible = visible;
-  }, 250);
-};
+<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} />

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

@@ -1,13 +1,20 @@
-<script lang="ts">import Slider from "./Slider.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 codeSlot = `
+<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;
+
+	let isOpen = false;
 </script>
 
 <ComponentDemo component="Slider">

package/dist/controls/slider/Slider.svelte

@@ -1,92 +1,107 @@
-<script lang="ts">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
-} = $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(event2) {
-    if (event2.cancelable) event2.preventDefault();
-    holding = true;
-  },
-  mouseDown(event2) {
-    if (event2.cancelable) event2.preventDefault();
-    holding = true;
-  },
-  click(event2) {
-    if (event2.cancelable) event2.preventDefault();
-    getSliderVal(event2);
-    holding = false;
-  },
-  keyDown(event2) {
-    const { key: key2 } = event2;
-    const up = !reverse ? steps.increase : steps.decrease;
-    const down = !reverse ? steps.decrease : steps.increase;
-    if (key2 === "ArrowDown" || key2 === "ArrowUp") event2.preventDefault();
-    if (!disabled) {
-      if (key2 === "ArrowLeft" || key2 === "ArrowDown" && !disabled) {
-        up();
-      } else if (key2 === "ArrowRight" || key2 === "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) {
-  return (val - min) / (max - min) * 100;
-}
-function getSliderVal(event2) {
-  const { clientX, clientY } = event2.touches ? event2.touches?.[0] : event2;
-  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 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

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

@@ -1,9 +1,12 @@
-<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 = `
+<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>`;

package/dist/controls/stepper/Stepper.svelte

@@ -1,16 +1,22 @@
-<script lang="ts" generics="T = Data">import Slotted from "../../utils/slotted/Slotted.svelte";
-export const actions = {
-  setActiveStep: function(step) {
-    activeStep = step ?? 0;
-  }
-};
-let {
-  steps = $bindable([]),
-  stepperOrientation = "horizontal",
-  activeStep = $bindable(0),
-  children
-} = $props();
-let child = children;
+<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}">

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

@@ -1,30 +1,37 @@
-<script lang="ts">import Switch from "./Switch.svelte";
-import { defaultsArgs, defaultsArgsFromProps } 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";
-let parametersSlot = {
-  autoClose: {
-    type: "boolean",
-    values: [true, false]
-  },
-  stickToHookWidth: {
-    type: "boolean",
-    values: [true, false]
-  },
-  position: {
-    type: "string",
-    values: uiPresets.stickyPosition
-  }
-};
-let componentArgs = defaultsArgs(parametersSlot);
-let codeSlot = `
+<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 = `
+
+	let codeProps = `
 <Loader
     status={"loading"}
     messages={{

package/dist/controls/switch/Switch.svelte

@@ -1,18 +1,23 @@
-<script lang="ts" generics="T=Data">import Slotted from "../../utils/slotted/Slotted.svelte";
-let {
-  class: className = "",
-  style = "",
-  element = $bindable(null),
-  name = $bindable(void 0),
-  checked = $bindable(false),
-  disabled = $bindable(false),
-  metaData,
-  onChange = (val, metaData2) => {
-  },
-  children,
-  switchLabel
-} = $props();
-let hiddenRef;
+<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" />