@medyll/idae-slotui-svelte 0.3.0

package/dist/controls/checkbox/checkbox.scss

@@ -0,0 +1,112 @@
+@import "../../styles/slotui-mixins.scss";
+
+:root {
+    --sld-checkbox-background: var(--sld-color-background-alpha-high);
+    --sld-checkbox-background-hover: var(--sld-color-primary);
+    --sld-checkbox-background-checked: var(--sld-color-primary);
+    --sld-checkbox-background-indeterminate: var(--sld-color-primary-alpha-mid);
+    --sld-checkbox-border-width: 2px;
+    --sld-checkbox-border-color: var(--sld-color-foreground-alpha-mid);
+    --sld-checkbox-border-bottom-width: 2px;
+    --sld-checkbox-border-bottom-color: var(--sld-color-primary-darker, rgb(208, 191, 151));
+    --sld-checkbox-radius: var(--sld-radius-small);
+    --sld-checkbox-padding: 0 0.5rem;
+    --sld-checkbox-shadow: 0px 0px 3px 1px rgba(51, 51, 51, 0.1);
+}
+
+.checkbox {
+    @include data-hover;
+    @include ui-tall-presets;
+    @include ui-transition;
+    appearance: none;
+    outline: none;
+    border: var(--sld-checkbox-border-width) solid var(--sld-checkbox-border-color);
+    border-radius: var(--sld-checkbox-radius);
+    background-clip: padding-box;
+    background-color: var(--sld-checkbox-background);
+    width: 1.7rem;
+    height: 1.7rem;
+    aspect-ratio: 1/1;
+    padding: 0;
+    margin: 0;
+
+    &:focus-visible {
+        box-shadow: var(--sld-checkbox-shadow);
+    }
+
+    &:hover {
+        background-color: var(--sld-color-primary-darken-mid);
+    }
+
+    &:active {
+        + .svg {
+            color: var(--sld-color-secondary);
+        }
+    }
+
+    &:disabled {
+        border-color: #ccc;
+        background-color: #ededed;
+        pointer-events: none;
+    }
+
+    &:checked,
+    &:indeterminate {
+        background-color: var(--sld-checkbox-background-indeterminate);
+
+        &:hover {
+            background-color: var(--sld-checkbox-background-hover);
+        }
+
+        &:active,
+        &:focus {
+            background-color: var(--sld-checkbox-background-checked);
+        }
+
+        &:disabled,
+        &[disabled] {
+            border-color: #ccc;
+            background-color: #ededed;
+            pointer-events: none;
+            + .svg {
+                color: #ededed;
+            }
+        }
+    }
+}
+
+.checkbox-root {
+    display: flex;
+    align-items: center;
+    -webkit-user-select: none;
+    user-select: none;
+    min-block-size: 32px;
+    gap: 0.5rem;
+
+    &.disabled > span {
+        color: #ededed;
+    }
+
+    .checkbox-container {
+        display: inline-flex;
+        justify-content: center;
+        position: relative;
+        .svg {
+            position: absolute;
+            color: white;
+            height: 100%;
+            width: 100%;
+            padding: 3px;
+            path {
+                transform-origin: center;
+                &-check {
+                    transform: scale(1.1);
+                    fill: white;
+                }
+                &-indeterminate {
+                    transform: scale(1.1);
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,20 @@
+import type { DemoerStoryProps } from '../../base/demoer/types.js';
+import { type CommonProps, type ElementProps } from '../../types/index.js';
+export type CheckboxProps = CommonProps & Partial<HTMLInputElement> & {
+    /** The label title for the checkbox. */
+    title?: string;
+    /** Checked state of the checkbox. */
+    checked?: boolean;
+    /** Indeterminate state of the checkbox. */
+    indeterminate?: boolean;
+    /** Sets the `value` attribute of the input element for form usage. */
+    value?: any;
+    /** Determines if the checkbox is disabled for user interaction and styles it accordingly. */
+    disabled?: boolean;
+    /** Provides a bound DOM reference to the checkbox's <input /> element. */
+    inputElement?: HTMLInputElement;
+    /** Provides a bound DOM reference to the checkbox's outer container element. */
+    labelElement?: HTMLLabelElement;
+    dense: ElementProps['dense'];
+};
+export declare const CheckboxDemoValues: DemoerStoryProps<CheckboxProps>;

package/dist/controls/checkbox/types.js

@@ -0,0 +1,24 @@
+import { densePreset } from '../../types/index.js';
+export const CheckboxDemoValues = {
+    title: {
+        type: 'string',
+        values: [undefined, 'Checkbox', 'Check me'],
+        default: 'Checkbox'
+    },
+    checked: {
+        type: 'boolean',
+        default: false
+    },
+    disabled: {
+        type: 'boolean',
+        default: false
+    },
+    indeterminate: {
+        type: 'boolean',
+        default: false
+    },
+    dense: {
+        type: 'dense',
+        default: densePreset.default
+    }
+};

package/dist/controls/confirm/Confirm.demo.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">import Button from "../button/Button.svelte";
+import Confirm from "./Confirm.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 = `
+<Confirm {...activeParams}>
+	{#snippet confirmInitial()}
+		<Button icon="fa-solid:question" size="large">Would you please click once ?</Button>
+	{/snippet}
+	<Button type="submit" size="medium">confirm</Button>
+</Confirm>`;
+let codeProps = `
+<Confirm
+  primary="confirm deletion" />`;
+</script>
+
+<ComponentDemo
+	component="Confirm"
+	cite="Leaded by a proud walk, nothing can stop nobody to win the step ahead, should we confirm ?
+<br />
+V.Hugo 1850"
+>
+	<div class="flex-v gap-large">
+		<DemoPage component="Chipper" code={codeSlot}>
+			<Demoer {parameters} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<Confirm {...activeParams}>
+						{#snippet confirmInitial()}
+							<Button icon="fa-solid:question" width="med">Would you please click once ?</Button>
+						{/snippet}
+						<Button type="submit" width="kind">confirm</Button>
+					</Confirm>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+		<DemoPage title="Using props" component="Chipper" code={codeProps}>
+			<Demoer {parameters} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<Confirm {...activeParams} primary="confirm deletion" />
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/controls/confirm/Confirm.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 ConfirmProps = typeof __propDef.props;
+export type ConfirmEvents = typeof __propDef.events;
+export type ConfirmSlots = typeof __propDef.slots;
+export default class Confirm extends SvelteComponent<ConfirmProps, ConfirmEvents, ConfirmSlots> {
+}
+export {};

package/dist/controls/confirm/Confirm.preview.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">import Button from "../button/Button.svelte";
+import Confirm from "./Confirm.svelte";
+</script>
+
+<div>
+	<Confirm primary="confirm deletion">
+		{#snippet confirmInitial()}
+			<Button>delete</Button>
+		{/snippet}
+
+		<Button type="submit" width="auto">confirm</Button>
+	</Confirm>
+</div>

package/dist/controls/confirm/Confirm.preview.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 ConfirmProps = typeof __propDef.props;
+export type ConfirmEvents = typeof __propDef.events;
+export type ConfirmSlots = typeof __propDef.slots;
+export default class Confirm extends SvelteComponent<ConfirmProps, ConfirmEvents, ConfirmSlots> {
+}
+export {};

package/dist/controls/confirm/Confirm.svelte

@@ -0,0 +1,127 @@
+<script lang="ts" generics="T=any">import { fade } from "svelte/transition";
+import Button from "../button/Button.svelte";
+import IconButton from "../button/IconButton.svelte";
+import { onDestroy } from "svelte";
+import Slotted from "../../utils/slotted/Slotted.svelte";
+let step = $state("initial");
+let {
+  class: className = "",
+  initialRef = null,
+  contentRef = null,
+  tooltipInitial = null,
+  primaryInitial = "",
+  primaryConfirm = "",
+  iconInitial = "",
+  iconColorInitial = "inherit",
+  primary = "confirm",
+  icon = "check-circle-outline",
+  iconColor = "green",
+  tall,
+  autoClose = true,
+  loading,
+  data,
+  action = () => {
+  },
+  iconCancel = { icon: "fluent-mdl2:navigate-back", color: "red" },
+  children,
+  confirmInitial,
+  ...rest
+} = $props();
+let rost = rest;
+let loadingState = $state(false);
+function handleClickInitial(event) {
+  event.preventDefault();
+  event.stopPropagation();
+  step = "confirm";
+}
+function handleClickCancel(event) {
+  event.preventDefault();
+  event.stopPropagation();
+  step = "initial";
+}
+function handleAction(event) {
+  event.preventDefault();
+  event.stopPropagation();
+  if (action) {
+    if (action instanceof Promise) loadingState = true;
+    try {
+      loadingState = true;
+      action(data).then(() => {
+        loadingState = false;
+        if (autoClose) step = "initial";
+        return data;
+      });
+    } catch (e) {
+      if (typeof action == "function") {
+        action(data);
+        if (autoClose) step = "initial";
+      }
+    }
+  }
+}
+onDestroy(() => {
+  step = "initial";
+});
+</script>
+
+<!-- #todo <Content>somecontent</Content> -->
+
+<div {...rost} class="confirm {className}">
+	{#if step === 'initial'}
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class={'confirm-initial ' + className}
+			in:fade|global
+			onclick={handleClickInitial}
+			bind:this={initialRef}
+			title={tooltipInitial}
+		>
+			<Slotted child={confirmInitial} slotArgs={{ step }}>
+				<Button
+					{tall}
+					variant="naked"
+					width="full"
+					icon={{ icon: iconInitial, color: iconColorInitial }}
+					title={tooltipInitial}
+				>
+					{primaryInitial}
+				</Button>
+			</Slotted>
+		</div>
+	{/if}
+	{#if step === 'confirm'}
+		<div class={className + ' confirm-validate'} in:fade|global bind:this={contentRef}>
+			<IconButton
+				onclick={handleClickCancel}
+				width="tiny"
+				ratio="1/1"
+				variant="naked"
+				icon={iconCancel}
+				{tall}
+				title="cancel"
+			/>
+			<Slotted child={children} slotArgs={{ step }}>
+				<IconButton
+					title="confirm"
+					loading={loadingState}
+					{tall}
+					onclick={handleAction}
+					{icon}
+					width="auto"
+					value={primaryConfirm}
+				/>
+			</Slotted>
+		</div>
+	{/if}
+</div>
+
+<style>.confirm {
+  display: contents;
+  display: flex;
+  align-items: center;
+}
+.confirm-validate {
+  display: flex;
+  align-items: center;
+}</style>

package/dist/controls/confirm/Confirm.svelte.d.ts

@@ -0,0 +1,35 @@
+import { SvelteComponent } from "svelte";
+declare class __sveltets_Render<T = any> {
+    props(): import("../../types/index.js").CommonProps & {
+        data?: T | undefined;
+        initialRef?: HTMLElement | null;
+        contentRef?: HTMLElement | null;
+        tooltipInitial?: string | null;
+        primaryInitial: string;
+        primaryConfirm: string;
+        iconInitial?: string;
+        iconColorInitial?: string;
+        primary?: string;
+        icon?: import("../../types/index.js").ElementProps["icon"];
+        tall?: import("../../types/index.js").ElementProps["tall"];
+        iconColor?: string;
+        iconSize?: string;
+        autoClose?: boolean;
+        loading?: boolean;
+        iconLoading?: import("../../types/index.js").ElementProps["icon"];
+        action?: Promise<T> | ((data?: T | undefined) => void) | undefined;
+        iconCancel?: import("../../types/index.js").ElementProps["icon"];
+        children?: import("svelte").Snippet;
+        confirmInitial?: import("svelte").Snippet;
+    } & Partial<Omit<HTMLDivElement, "style">>;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type ConfirmProps_<T = any> = ReturnType<__sveltets_Render<T>['props']>;
+export type ConfirmEvents<T = any> = ReturnType<__sveltets_Render<T>['events']>;
+export type ConfirmSlots<T = any> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class Confirm<T = any> extends SvelteComponent<ConfirmProps_<T>, ConfirmEvents<T>, ConfirmSlots<T>> {
+}
+export {};

package/dist/controls/confirm/confirm.scss

@@ -0,0 +1,12 @@
+@import "../../styles/slotui-mixins.scss";
+.confirm {
+    display: contents;
+    display: flex;
+    align-items: center;
+    &-initial {
+    }
+    &-validate {
+        display: flex;
+        align-items: center;
+    }
+}

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

@@ -0,0 +1,44 @@
+import type { DemoerStoryProps } from '../../base/demoer/types.js';
+import { type CommonProps, type ElementProps } from '../../types/index.js';
+import type { Snippet } from 'svelte';
+export type ConfirmProps<T = any> = CommonProps & {
+    /** element data sent on confirm */
+    data?: T;
+    /** element initial HTMLDivElement props */
+    initialRef?: HTMLElement | null;
+    /** element confirm HTMLDivElement props */
+    contentRef?: HTMLElement | null;
+    /** text displayed on initial button */
+    tooltipInitial?: string | null;
+    /** text displayed on initial button */
+    primaryInitial: string;
+    /** text displayed on the confirm phase */
+    primaryConfirm: string;
+    /** icon displayed on the initial button */
+    iconInitial?: string;
+    /** color of the icon displayed on the initial button */
+    iconColorInitial?: string;
+    /** text displayed on confirm button */
+    primary?: string;
+    /** icon displayed on the confirm button */
+    icon?: ElementProps['icon'];
+    /**  button height */
+    tall?: ElementProps['tall'];
+    /** color of the icon displayed on the confirm button
+     * @type string
+     */
+    iconColor?: string;
+    iconSize?: string;
+    autoClose?: boolean;
+    /** loading state on validate */
+    loading?: boolean;
+    iconLoading?: ElementProps['icon'];
+    /** action initiated on confirmation */
+    action?: Promise<T> | ((data?: T) => void);
+    /** icon to display for back action */
+    iconCancel?: ElementProps['icon'];
+    children?: Snippet;
+    confirmInitial?: Snippet;
+};
+export declare const ConfirmDemoValues: DemoerStoryProps<ConfirmProps>;
+export declare let parameters: DemoerStoryProps<ConfirmProps<any>>, componentArgs: ConfirmProps<any>;

package/dist/controls/confirm/types.js

@@ -0,0 +1,39 @@
+import { demoerArgs } from '../../base/demoer/demoer.utils.js';
+import { iconSize } from '../../types/index.js';
+export const ConfirmDemoValues = {
+    primaryInitial: {
+        type: 'string',
+        values: ['Would you please click once ?'],
+        private: true
+    },
+    tooltipInitial: {
+        type: 'string',
+        values: ['Would you please click once ?'],
+        private: true
+    },
+    iconInitial: {
+        type: 'icon',
+        values: ['fa-solid:question']
+    },
+    iconColorInitial: {
+        type: 'color',
+        values: ['green', 'blue', undefined]
+    },
+    primary: {
+        type: 'icon',
+        values: ['Confirm deletion']
+    },
+    icon: {
+        type: 'icon',
+        values: ['mdi:close', undefined]
+    },
+    iconColor: {
+        type: 'color',
+        values: ['red', 'orange', undefined]
+    },
+    iconSize: {
+        type: 'iconSize',
+        default: iconSize.medium
+    }
+};
+export let { parameters, componentArgs } = demoerArgs(ConfirmDemoValues);

package/dist/controls/inplaceedit/InPlaceEdit.demo.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">import ComponentDemo from "../../base/demoer/DemoerComponent.svelte";
+import Demoer from "../../base/demoer/Demoer.svelte";
+import DemoPage from "../../base/demoer/DemoPage.svelte";
+import InPlaceEdit from "./InPlaceEdit.svelte";
+import { parameters, componentArgs } from "./types.js";
+let code1 = `
+<InPlaceEdit 
+    value={value}
+    onSave={(newValue) => console.log('Saved:', newValue)}
+/>`;
+let code2 = `
+<InPlaceEdit {...activeParams} />`;
+let savedValue = "s";
+</script>
+
+<ComponentDemo component="InPlaceEdit" cite="Edit in place,  save in haste. - Developer's Proverb">
+	<DemoPage component="InPlaceEdit" code={code1}>
+		<Demoer {parameters} {componentArgs}>
+			{#snippet children({ activeParams })}
+				<div class="flex-v gap-medium">
+					<div>
+						<InPlaceEdit {...activeParams} onSave={() => {}} />
+					</div>
+					<p>Last saved value: {savedValue}</p>
+				</div>
+			{/snippet}
+		</Demoer>
+	</DemoPage>
+
+	<DemoPage title="Using props" component="InPlaceEdit" code={code2}>
+		<Demoer {parameters} {componentArgs}>
+			{#snippet children({ activeParams })}
+				<InPlaceEdit {...activeParams} />
+			{/snippet}
+		</Demoer>
+	</DemoPage>
+</ComponentDemo>

package/dist/controls/inplaceedit/InPlaceEdit.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 InPlaceEditProps = typeof __propDef.props;
+export type InPlaceEditEvents = typeof __propDef.events;
+export type InPlaceEditSlots = typeof __propDef.slots;
+export default class InPlaceEdit extends SvelteComponent<InPlaceEditProps, InPlaceEditEvents, InPlaceEditSlots> {
+}
+export {};

package/dist/controls/inplaceedit/InPlaceEdit.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">import Icon from "../../base/icon/Icon.svelte";
+import TextField from "../textfield/TextField.svelte";
+import { be } from "@medyll/idae-be";
+let initialId = "myText";
+let popperId = "myPopover";
+let {
+  value = "",
+  inputElement,
+  inputValue,
+  editing = $bindable(),
+  onSave = (newValue) => {
+  }
+} = $props();
+function saveChanges() {
+  editing = false;
+  onSave(inputValue);
+}
+function handleKeyDown(event) {
+  if (event.key === "Enter") {
+    saveChanges();
+  } else if (event.key === "Escape") {
+    editing = false;
+    inputValue = value;
+  }
+}
+function handleBlur() {
+  editing = false;
+  saveChanges();
+}
+inputValue = !editing ? value : inputValue;
+$effect(() => {
+  if (editing && inputElement) {
+    inputElement.focus();
+  }
+  popper.addEventListener("toggle", (event) => {
+    if (event.newState === "open") {
+      console.log("Le popover est ouvert");
+      editing = true;
+    } else {
+      console.log("Le popover est ferm\xE9");
+      editing = false;
+    }
+  });
+  console.log(be(`#${initialId}`));
+});
+$effect(() => {
+  editing;
+  be(popper).clonePosition(`#${initialId}`, { useTransform: false });
+  if (!editing) {
+    if (popper.matches(":popover-open")) {
+      popper.hidePopover();
+    }
+  }
+});
+let popper;
+</script>
+
+<form />
+
+<div class="border pos-rel">
+	<dialog id={popperId} open={editing} popover="auto" class="popper" bind:this={popper}>
+		<div class="flex gap-4 pad-1" style="gap:4px">
+			<TextField
+				bind:element={inputElement}
+				bind:value={inputValue}
+				style="field-sizing: content;min-width: 350px;"
+				onblur={handleBlur}
+				onkeydown={handleKeyDown}
+				>{#snippet inputLast()}
+					<button variant="contained square" class="button">
+						<Icon style="display:block;width:100%;" icon="fluent-mdl2:accept-medium" />
+					</button>
+				{/snippet}
+			</TextField>
+			<button
+				variant="flat naked square"
+				width="tiny"
+				class="button"
+				style="align-items:center;align-content:center;text-align:center;display:block;"
+				popovertarget={popperId}
+				popovertargetaction="hide"
+			>
+				<Icon icon="icons8:cancel" style="display:block;width:100%;" />
+			</button>
+		</div>
+	</dialog>
+</div>
+<button role="button" id={initialId} popovertarget={popperId} popovertargetaction="toggle">
+	Afficher le popover
+</button>

package/dist/controls/inplaceedit/InPlaceEdit.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        value: string;
+        spanElement: HTMLElement;
+        inputElement: HTMLInputElement;
+        inputValue?: any;
+        editing?: boolean;
+        onSave?: (newValue: string) => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type InPlaceEditProps_ = typeof __propDef.props;
+export { InPlaceEditProps_ as InPlaceEditProps };
+export type InPlaceEditEvents = typeof __propDef.events;
+export type InPlaceEditSlots = typeof __propDef.slots;
+export default class InPlaceEdit extends SvelteComponent<InPlaceEditProps_, InPlaceEditEvents, InPlaceEditSlots> {
+}