@medyll/idae-slotui-svelte 0.3.0

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

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SliderProps = typeof __propDef.props;
+export type SliderEvents = typeof __propDef.events;
+export type SliderSlots = typeof __propDef.slots;
+export default class Slider extends SvelteComponent<SliderProps, SliderEvents, SliderSlots> {
+}
+export {};

package/dist/controls/slider/Slider.svelte

@@ -0,0 +1,221 @@
+<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>
+
+<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);
+  --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 {
+  background-color: var(--slider-background-color);
+  position: relative;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  width: 168px;
+  --height: calc(var(--preset-density) / 6);
+}
+
+.slider {
+  --preset-tall: var(--sld-tall-small);
+  min-height: var(--preset-tall-small);
+  height: var(--preset-tall-small);
+}
+
+.slider[tall=tiny], .slider.tall-tiny {
+  min-height: var(--sld-tall-tiny) !important;
+}
+
+.slider[tall=mini], .slider.tall-mini {
+  min-height: var(--sld-tall-mini) !important;
+}
+
+.slider[tall=small], .slider.tall-small {
+  min-height: var(--sld-tall-small) !important;
+}
+
+.slider[tall=med], .slider.tall-med {
+  min-height: var(--sld-tall-med) !important;
+}
+
+.slider[tall=kind], .slider.tall-kind {
+  min-height: var(--sld-tall-kind) !important;
+}
+
+.slider[tall=auto], .slider.tall-auto {
+  min-height: var(--sld-tall-auto) !important;
+}
+
+.slider[tall=default], .slider.tall-default {
+  min-height: var(--sld-tall-default) !important;
+}
+
+.slider .slider-gouge {
+  height: var(--height);
+  width: 100%;
+  border-radius: 10px;
+  background-color: var(--slider-gouge-background-color);
+}
+
+.slider .slider-gouge-selected {
+  height: var(--height);
+  border-radius: 10px;
+  background-color: var(--slider-gouge-selected-background-color);
+}
+
+.slider .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;
+}
+
+.slider .slider-thumb:hover {
+  box-shadow: var(--slider-thumb-hover-box-shadow);
+  outline: 4px solid var(--slider-thumb-hover-outline);
+}</style>

package/dist/controls/slider/Slider.svelte.d.ts

@@ -0,0 +1,40 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        'anchor-for'?: string;
+        element?: (HTMLElement & HTMLDivElement) | undefined;
+        class?: string;
+        style?: string;
+        container?: `inline` | `size` | `normal`;
+        hideMaxWidth?: string;
+        hideMaxHeight?: string;
+        hideMinWidth?: string;
+        hideMinHeight?: string;
+        children?: import("svelte").Snippet<[any]>;
+        elementInput?: HTMLInputElement | null;
+        elementRail?: HTMLDivElement;
+        elementGutter?: HTMLDivElement;
+        value: number;
+        min?: number;
+        max?: number;
+        step?: number;
+        tooltip?: boolean;
+        orientation?: import("../../types/index.js").ElementProps["orientation"];
+        reverse?: boolean;
+        disabled?: boolean;
+        dense?: import("../../types/index.js").ElementProps["dense"];
+        onchange?: (event: Event & {
+            currentTarget: EventTarget & HTMLInputElement;
+        }) => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type SliderProps_ = typeof __propDef.props;
+export { SliderProps_ as SliderProps };
+export type SliderEvents = typeof __propDef.events;
+export type SliderSlots = typeof __propDef.slots;
+export default class Slider extends SvelteComponent<SliderProps_, SliderEvents, SliderSlots> {
+}

package/dist/controls/slider/slider.scss

@@ -0,0 +1,49 @@
+@import "../../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 {
+    background-color: var(--slider-background-color);
+    position: relative;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    width: 168px;
+    @include ui-tall-presets;
+    --height: calc(var(--preset-density) / 6);
+    .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/slider/types.d.ts

@@ -0,0 +1,36 @@
+import type { DemoerStoryProps } from '../../base/demoer/types.js';
+import type { ElementProps, CommonProps } from '../../types/index.js';
+export type SliderProps = CommonProps & {
+    /** element root HTMLDivElement props */
+    element?: HTMLDivElement | null;
+    /** Obtains a bound DOM reference to the slider's input element. */
+    elementInput?: HTMLInputElement | null;
+    /** Obtains a bound DOM reference to the slider's outer rail element. */
+    elementRail?: HTMLDivElement;
+    /** Obtains a bound DOM reference to the slider's track (fill) element. */
+    elementGutter?: HTMLDivElement;
+    /** Slider's value. */
+    value: number;
+    /** Minimum value. */
+    min?: number;
+    /** Maximum value . */
+    max?: number;
+    /** Steps size. */
+    step?: number;
+    /** Determines if the slider's value tooltip will be shown. */
+    tooltip?: boolean;
+    /** Slider's orientation. */
+    orientation?: ElementProps['orientation'];
+    /** Reverse th slider order . */
+    reverse?: boolean;
+    /** Controls Slider  status. */
+    disabled?: boolean;
+    /** Dense mode. */
+    dense?: ElementProps['dense'];
+    style?: string;
+    onchange?: (event: Event & {
+        currentTarget: EventTarget & HTMLInputElement;
+    }) => void;
+};
+export declare const SliderDemoValues: DemoerStoryProps<SliderProps>;
+export declare let parameters: DemoerStoryProps<SliderProps>, componentArgs: SliderProps;

package/dist/controls/slider/types.js

@@ -0,0 +1,37 @@
+import { demoerArgs } from '../../base/demoer/demoer.utils.js';
+import { uiPresets } from '../../utils/engine/presets.js';
+export const SliderDemoValues = {
+    value: {
+        type: 'number',
+        values: [20, 50]
+    },
+    min: {
+        type: 'number',
+        values: [0, 55]
+    },
+    max: {
+        type: 'number',
+        values: [100, 600]
+    },
+    step: {
+        type: 'number',
+        values: [1, 5, 10, 20, 50]
+    },
+    tooltip: {
+        type: 'boolean'
+    },
+    orientation: {
+        type: 'orientation'
+    },
+    reverse: {
+        type: 'boolean'
+    },
+    disabled: {
+        type: 'boolean'
+    },
+    dense: {
+        type: 'string',
+        values: uiPresets.dense
+    }
+};
+export let { parameters, componentArgs } = demoerArgs(SliderDemoValues);

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

@@ -0,0 +1,29 @@
+<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.demo.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type StepperProps = typeof __propDef.props;
+export type StepperEvents = typeof __propDef.events;
+export type StepperSlots = typeof __propDef.slots;
+export default class Stepper extends SvelteComponent<StepperProps, StepperEvents, StepperSlots> {
+}
+export {};

package/dist/controls/stepper/Stepper.svelte

@@ -0,0 +1,46 @@
+<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>
+
+<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);
+  --stepper-active-color: var(--sld-color-secondary);
+}
+
+.stepper {
+  display: flex;
+}
+
+.stepper.vertical {
+  flex-direction: column;
+}
+
+.stepper-step {
+  padding: var(--stepper-pad);
+  border-radius: var(--stepper-radius);
+  margin-top: 10px;
+}
+
+.stepper-step.active {
+  color: var(--stepper-active-color);
+}</style>

package/dist/controls/stepper/Stepper.svelte.d.ts

@@ -0,0 +1,39 @@
+import { SvelteComponent } from "svelte";
+import type { Data } from '../../types/index.js';
+declare class __sveltets_Render<T = Data> {
+    props(): {
+        'anchor-for'?: string;
+        element?: HTMLElement;
+        class?: string;
+        style?: string;
+        container?: `inline` | `size` | `normal`;
+        hideMaxWidth?: string;
+        hideMaxHeight?: string;
+        hideMinWidth?: string;
+        hideMinHeight?: string;
+        children?: (import("svelte").Snippet<[any]> & import("svelte").Snippet<[{
+            step: import("./types.js").StepType<T>;
+            index: number;
+        }]>) | undefined;
+        steps: import("./types.js").StepType<T>[];
+        stepperOrientation: import("./types.js").StepperOrientation;
+        activeStep?: number;
+    } & {
+        actions?: {
+            setActiveStep: (step: number) => void;
+        } | undefined;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type StepperProps_<T = Data> = ReturnType<__sveltets_Render<T>['props']>;
+export type StepperEvents<T = Data> = ReturnType<__sveltets_Render<T>['events']>;
+export type StepperSlots<T = Data> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class Stepper<T = Data> extends SvelteComponent<StepperProps_<T>, StepperEvents<T>, StepperSlots<T>> {
+    get actions(): {
+        setActiveStep: (step: number) => void;
+    };
+}
+export {};

package/dist/controls/stepper/stepper.scss

@@ -0,0 +1,23 @@
+@import "../../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/stepper/types.d.ts

@@ -0,0 +1,24 @@
+import type { DemoerStoryProps } from '../../base/demoer/types.js';
+import { type CommonProps, type Data } from '../../types/index.js';
+import type { Snippet } from 'svelte';
+export type StepperProps<T = Data> = CommonProps & {
+    /** Steps   */
+    steps: StepType<T>[];
+    /** orientation of the stepper */
+    stepperOrientation: StepperOrientation;
+    /** Actual active step */
+    activeStep?: number;
+    children?: Snippet<[{
+        step: StepType<T>;
+        index: number;
+    }]>;
+};
+export type StepperOrientation = 'horizontal' | 'vertical';
+export type StepType<T = Data> = {
+    order?: number;
+    data?: T;
+    title?: string;
+    disabled?: boolean;
+    action?: () => void;
+};
+export declare const parameters: DemoerStoryProps<StepperProps<Data>>, componentArgs: StepperProps<Data>;

package/dist/controls/stepper/types.js

@@ -0,0 +1,27 @@
+import { demoerArgs } from '../../base/demoer/demoer.utils.js';
+import { orientation } from '../../types/index.js';
+const StepperDemoValues = {
+    steps: {
+        type: 'array',
+        values: [
+            [
+                { order: 1, title: 'Step 1' },
+                { order: 2, title: 'Step 2' }
+            ]
+        ],
+        default: [
+            { order: 1, title: 'Step 1' },
+            { order: 2, title: 'Step 2' }
+        ]
+    },
+    activeStep: {
+        type: 'number',
+        values: [1, 2],
+        default: 1
+    },
+    stepperOrientation: {
+        type: 'orientation',
+        default: orientation.horizontal
+    }
+};
+export const { parameters, componentArgs } = demoerArgs(StepperDemoValues);

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

@@ -0,0 +1,54 @@
+<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 = `
+<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.demo.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SwitchProps = typeof __propDef.props;
+export type SwitchEvents = typeof __propDef.events;
+export type SwitchSlots = typeof __propDef.slots;
+export default class Switch extends SvelteComponent<SwitchProps, SwitchEvents, SwitchSlots> {
+}
+export {};