@medyll/idae-slotui-svelte 0.3.0

package/dist/controls/inplaceedit/types.d.ts

@@ -0,0 +1,11 @@
+import type { DemoerStoryProps } from '../../base/demoer/types.js';
+export type InPlaceEditProps = {
+    value: string;
+    spanElement: HTMLElement;
+    inputElement: HTMLInputElement;
+    inputValue?: any;
+    editing?: boolean;
+    onSave?: (newValue: string) => void;
+};
+export declare const inPlaceEditDemoValues: DemoerStoryProps<InPlaceEditProps>;
+export declare const parameters: DemoerStoryProps<InPlaceEditProps>, componentArgs: InPlaceEditProps;

package/dist/controls/inplaceedit/types.js

@@ -0,0 +1,24 @@
+import { demoerArgs } from '../../base/demoer/demoer.utils.js';
+export const inPlaceEditDemoValues = {
+    value: {
+        type: 'string',
+        values: ['Initial Value', 'Click to Edit'],
+        default: 'Initial Value'
+    },
+    inputValue: {
+        type: 'string',
+        values: [undefined, 'Editing Value'],
+        default: undefined
+    },
+    editing: {
+        type: 'boolean',
+        values: [true, false],
+        default: false
+    },
+    onSave: {
+        type: 'function',
+        private: true,
+        values: [(newValue) => console.log('Saved:', newValue)]
+    }
+};
+export const { parameters, componentArgs } = demoerArgs(inPlaceEditDemoValues);

package/dist/controls/progress/Progress.demo.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">import Progress from "./Progress.svelte";
+import ComponentDemo from "../../base/demoer/DemoerComponent.svelte";
+import Demoer from "../../base/demoer/Demoer.svelte";
+import DemoPage from "../../base/demoer/DemoPage.svelte";
+import { defaultsArgs } from "../../base/demoer/demoer.utils.js";
+import { ProgressDemoValues } from "./types.js";
+const code = `<Progress value="50" />`;
+let parameters = ProgressDemoValues;
+let componentArgs = defaultsArgs(parameters);
+</script>
+
+<ComponentDemo
+	component="Progress"
+	cite="You'll never know that you've got a score, unless comes the day when you see the other's ones.<br/> S. Roch, 1824"
+>
+	<div class="flex-v gap-large">
+		<DemoPage component="Progress" {code}>
+			<Demoer {parameters} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<Progress {...activeParams} />
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/controls/progress/Progress.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 ProgressProps = typeof __propDef.props;
+export type ProgressEvents = typeof __propDef.events;
+export type ProgressSlots = typeof __propDef.slots;
+export default class Progress extends SvelteComponent<ProgressProps, ProgressEvents, ProgressSlots> {
+}
+export {};

package/dist/controls/progress/Progress.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">let {
+  class: className = "",
+  style = "",
+  element = null,
+  percentBase = 100,
+  value = 0,
+  orientation: direction = "horizontal",
+  ...rest
+} = $props();
+const title = `${value} / ${percentBase}`;
+let attr = direction === "vertical" ? "height" : "width";
+let attrTickness = direction === "vertical" ? "width" : "height";
+const precWidth = $derived(value / percentBase * 100);
+</script>
+
+<div bind:this={element} class="progress {className} w-large" {style} {title}>
+	<div class="progress-gouge" style="{attr}:{precWidth}%;{attrTickness}:0.5rem"></div>
+</div>
+
+<style>:root {
+  --progress-border: var(--sld-color-secondary-alpha-mid);
+  --progress-radius: var(--sld-radius-tiny);
+  --progress-gouge-background: var(--sld-color-primary);
+  --progress-gouge-border: var(--sld-color-primary-alpha);
+}
+
+.progress {
+  border: 1px solid var(--progress-border);
+  border-radius: var(--progress-radius);
+  padding: 1px;
+}
+
+.progress .progress-gouge {
+  background: var(--progress-gouge-background);
+  border-radius: var(--progress-radius);
+  border: 1px solid var(--progress-gouge-border);
+  transition-delay: 250ms;
+  transition: all 0.25s;
+  max-width: 100%;
+}</style>

package/dist/controls/progress/Progress.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string;
+        style?: string;
+        element?: HTMLDivElement | null;
+        percentBase?: number;
+        value: number;
+        orientation?: import("../../types/index.js").ElementProps["orientation"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type ProgressProps_ = typeof __propDef.props;
+export { ProgressProps_ as ProgressProps };
+export type ProgressEvents = typeof __propDef.events;
+export type ProgressSlots = typeof __propDef.slots;
+export default class Progress extends SvelteComponent<ProgressProps_, ProgressEvents, ProgressSlots> {
+}

package/dist/controls/progress/progress.scss

@@ -0,0 +1,23 @@
+@import "../../styles/slotui-mixins.scss";
+
+:root {
+    --progress-border: var(--sld-color-secondary-alpha-mid);
+    --progress-radius: var(--sld-radius-tiny);
+    --progress-gouge-background: var(--sld-color-primary);
+    --progress-gouge-border: var(--sld-color-primary-alpha);
+}
+
+.progress {
+    border: 1px solid var(--progress-border);
+    border-radius: var(--progress-radius);
+    padding: 1px;
+
+    .progress-gouge {
+        background: var(--progress-gouge-background);
+        border-radius: var(--progress-radius);
+        border: 1px solid var(--progress-gouge-border);
+        transition-delay: 250ms;
+        transition: all 0.25s;
+        max-width: 100%;
+    }
+}

package/dist/controls/progress/types.d.ts

@@ -0,0 +1,17 @@
+import type { DemoerStoryProps } from '../../base/demoer/types.js';
+import type { ElementProps } from '../../types/index.js';
+export type ProgressProps = {
+    /** className off the root component */
+    class?: string;
+    /** css style off the root component */
+    style?: string;
+    /** element root HTMLDivElement props */
+    element?: HTMLDivElement | null;
+    /** base value for the progress */
+    percentBase?: number;
+    /** current value of the progress */
+    value: number;
+    /** can be vertical or horizontal */
+    orientation?: ElementProps['orientation'];
+};
+export declare const ProgressDemoValues: DemoerStoryProps<ProgressProps>;

package/dist/controls/progress/types.js

@@ -0,0 +1,13 @@
+export const ProgressDemoValues = {
+    percentBase: {
+        type: 'number',
+        values: [100, 200]
+    },
+    value: {
+        type: 'number',
+        values: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
+    },
+    orientation: {
+        type: 'orientation'
+    }
+};

package/dist/controls/rating/Rating.demo.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">import ComponentDemo from "../../base/demoer/DemoerComponent.svelte";
+import Icon from "../../base/icon/Icon.svelte";
+import Rating from "./Rating.svelte";
+import Demoer from "../../base/demoer/Demoer.svelte";
+import DemoPage from "../../base/demoer/DemoPage.svelte";
+import { parameters, componentArgs } from "./types.js";
+const ww = `
+<Rating>
+	<Icon icon={defaultIcon} />
+	{#snippet ratingScoredIcon()}
+		<Icon icon={scoredIcon} />
+	{/snippet} 
+</Rating>`;
+const ww2 = `<Rating defaultIcon="minus" scoredIcon="plus" scored={3} />`;
+</script>
+
+<ComponentDemo
+	component="Rating"
+	cite="First they tell you that it's just about stars.<br/>And then you'll be starred<br/> Amal. Creed, 1824"
+>
+	<div class="flex-v gap-large">
+		<DemoPage component="Rating" code={ww}>
+			<Demoer {parameters} {...componentArgs}>
+				{#snippet children({ activeParams })}
+					<Rating {...activeParams}>
+						<Icon icon={activeParams.defaultIcon} />
+						{#snippet ratingScoredIcon()}
+							<Icon icon={activeParams.scoredIcon} />
+						{/snippet}
+					</Rating>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+		<DemoPage title="Using props" component="rating" code={ww2}>
+			<Demoer {parameters} {...componentArgs}>
+				{#snippet children({ activeParams })}
+					<Rating {...activeParams} />
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/controls/rating/Rating.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 RatingProps = typeof __propDef.props;
+export type RatingEvents = typeof __propDef.events;
+export type RatingSlots = typeof __propDef.slots;
+export default class Rating extends SvelteComponent<RatingProps, RatingEvents, RatingSlots> {
+}
+export {};

package/dist/controls/rating/Rating.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">import Icon from "../../base/icon/Icon.svelte";
+import Slotted from "../../utils/slotted/Slotted.svelte";
+let {
+  class: className = "",
+  style,
+  element = $bindable(),
+  ratingBase = $bindable(4),
+  scored = $bindable(0),
+  defaultIcon = $bindable("star"),
+  scoredIcon = $bindable("star-fill"),
+  orientation: direction = $bindable("horizontal"),
+  ratingScoredIcon,
+  children,
+  ...rest
+} = $props();
+const title = `${scored} / ${ratingBase}`;
+</script>
+
+<div
+	bind:this={element}
+	class="rating {className}"
+	style="--direction:{direction === 'horizontal' ? 'row' : 'column'};{style}"
+	{title}
+	{...rest}
+>
+	{#each [...Array(ratingBase)] as rate, idx}
+		{#if idx + 1 <= scored}
+			<Slotted child={ratingScoredIcon}>
+				<Icon icon={scoredIcon} />
+			</Slotted>
+		{:else}
+			<Slotted child={children}>
+				<Icon icon={defaultIcon} />
+			</Slotted>
+		{/if}
+	{/each}
+</div>
+
+<style>:root {
+  --rating-gap: var(--sld-gap-small);
+}
+
+.rating {
+  display: flex;
+  flex-direction: var(--direction);
+  gap: var(--rating-gap);
+}</style>

package/dist/controls/rating/Rating.svelte.d.ts

@@ -0,0 +1,31 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        ratingBase?: number;
+        scored: number;
+        defaultIcon?: string;
+        scoredIcon?: string;
+        orientation?: import("../../types/index.js").ElementProps["orientation"];
+        ratingScoredIcon?: import("svelte").Snippet;
+        '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]>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type RatingProps_ = typeof __propDef.props;
+export { RatingProps_ as RatingProps };
+export type RatingEvents = typeof __propDef.events;
+export type RatingSlots = typeof __propDef.slots;
+export default class Rating extends SvelteComponent<RatingProps_, RatingEvents, RatingSlots> {
+}

package/dist/controls/rating/rating.scss

@@ -0,0 +1,9 @@
+@import "../../styles/slotui-mixins.scss";
+:root {
+    --rating-gap: var(--sld-gap-small);
+}
+.rating {
+    display: flex;
+    flex-direction: var(--direction);
+    gap: var(--rating-gap);
+}

package/dist/controls/rating/types.d.ts

@@ -0,0 +1,19 @@
+import type { DemoerStoryProps } from '../../base/demoer/types.js';
+import type { CommonProps, ElementProps } from '../../types/index.js';
+import type { Snippet } from 'svelte';
+export type RatingProps = {
+    /** maximum rate */
+    ratingBase?: number;
+    /** current score */
+    scored: number;
+    /** default icon to be used when not using slots */
+    defaultIcon?: string;
+    /** scored icon to be used when not using slots */
+    scoredIcon?: string;
+    /** can be vertical or horizontal */
+    orientation?: ElementProps['orientation'];
+    /** Snippet for the scored icon */
+    ratingScoredIcon?: Snippet;
+} & CommonProps;
+export declare const RatingDemoValues: DemoerStoryProps<RatingProps>;
+export declare let parameters: DemoerStoryProps<RatingProps>, componentArgs: RatingProps;

package/dist/controls/rating/types.js

@@ -0,0 +1,24 @@
+import { demoerArgs } from '../../base/demoer/demoer.utils.js';
+export const RatingDemoValues = {
+    scored: {
+        type: 'number',
+        values: [1, 2, 3, 4, 5]
+    },
+    ratingBase: {
+        type: 'number',
+        values: [5, 10],
+        default: 10
+    },
+    defaultIcon: {
+        type: 'icon',
+        values: ['ant-design:star-outlined', 'minus']
+    },
+    scoredIcon: {
+        type: 'icon',
+        values: ['ant-design:star-filled', 'plus']
+    },
+    orientation: {
+        type: 'orientation'
+    }
+};
+export let { parameters, componentArgs } = demoerArgs(RatingDemoValues);

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

@@ -0,0 +1,92 @@
+<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>
+    const data = [{id:1,name:'name'},{id:2,name:'name'}];
+<script> 
+
+<Select
+  let:optionsData
+  value="2"
+  name={"input_select"}
+  {data} >
+  <MenuItem  data={optionsData} >{optionsData.name}</MenuItem>
+</Select>
+
+<Select
+  let:optionsData
+  value="2"
+  name={"input_select"}
+  {data}
+  dataFieldName={"name"} />
+</Select>
+`;
+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" />`;
+let isOpen = false;
+</script>
+
+<ComponentDemo component="Select">
+	<div class="flex-v gap-large">
+		<DemoPage code={codeSlot} component="Select">
+			<Demoer parameters={parametersSlot} componentArgs={componentArgsSlot}>
+				{#snippet children({ activeParams })}
+					<div class="pad-2">
+						<Select
+							{...activeParams}
+							value="2"
+							name={'select'}
+							dataFieldName={'name'}
+							class=" w-large border-4"
+							>{#snippet children({ optionsData })}
+								<MenuItem data={optionsData}>{optionsData?.name}</MenuItem>
+							{/snippet}
+						</Select>
+					</div>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/controls/select/Select.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 SelectProps = typeof __propDef.props;
+export type SelectEvents = typeof __propDef.events;
+export type SelectSlots = typeof __propDef.slots;
+export default class Select extends SvelteComponent<SelectProps, SelectEvents, SelectSlots> {
+}
+export {};

package/dist/controls/select/Select.svelte

@@ -0,0 +1,88 @@
+<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>
+
+<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);
+}
+
+.select {
+  background-color: var(--select-background-color);
+  height: 160px;
+  width: 160px;
+  border-radius: var(--select-radius);
+}</style>

package/dist/controls/select/Select.svelte.d.ts

@@ -0,0 +1,44 @@
+import { SvelteComponent } from "svelte";
+import type { Data, ElementProps } from '../../types/index.js';
+import type { Snippet } from 'svelte';
+declare const __propDef: {
+    props: {
+        'anchor-for'?: string;
+        element?: HTMLElement;
+        class?: string;
+        style?: string;
+        container?: `inline` | `size` | `normal`;
+        hideMaxWidth?: string;
+        hideMaxHeight?: string;
+        hideMinWidth?: string;
+        hideMinHeight?: string;
+        children?: (Snippet<[any]> & Snippet<[{
+            optionsData: Data;
+        }]>) | undefined;
+        position?: ElementProps["popperPosition"];
+        stickToHookWidth: boolean;
+        autoClose?: boolean;
+        value: any;
+        name: string;
+        className: string;
+        data: any[];
+        disabled?: boolean;
+        options?: {
+            data?: Data;
+            text: string;
+            icon?: any;
+        }[];
+        dataFieldId: string;
+        dataFieldName: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type SelectProps_ = typeof __propDef.props;
+export { SelectProps_ as SelectProps };
+export type SelectEvents = typeof __propDef.events;
+export type SelectSlots = typeof __propDef.slots;
+export default class Select extends SvelteComponent<SelectProps_, SelectEvents, SelectSlots> {
+}

package/dist/controls/select/select.scss

@@ -0,0 +1,13 @@
+@import "../../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

@@ -0,0 +1,27 @@
+<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 = `
+<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>