@medyll/idae-slotui-svelte 0.3.0

package/dist/ui/login/Login.demo.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">import Login from "./Login.svelte";
+import { defaultsArgs, defaultsArgsFromProps } from "../../base/demoer/demoer.utils.js";
+import ComponentDemo from "../../base/demoer/DemoerComponent.svelte";
+import DemoerCode from "../../base/demoer/DemoerCode.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 Button from "../../controls/button/Button.svelte";
+import DemoerComponent from "../../base/demoer/DemoerComponent.svelte";
+import { parameters, componentArgs } from "./types.js";
+let submitting = false;
+let showLogin = true;
+function validate() {
+  submitting = true;
+  setTimeout(() => {
+    submitting = false;
+    showLogin = false;
+  }, 2e3);
+}
+let codeSlot = ``;
+</script>
+
+<ComponentDemo component="Login">
+	<DemoPage component="Chipper" code={codeSlot}>
+		<Demoer {parameters} {componentArgs}>
+			{#snippet children({ activeParams })}
+				<Login {showLogin} {submitting}>
+					{#snippet loginAvatar()}
+						<Icon icon="mdi:user" />
+					{/snippet}
+					{#snippet loginForm()}
+						<form
+							class="h-full w-full flex-v flex-align-middle-center"
+							method="post"
+							on:submit|preventDefault={validate}
+						>
+							<div class="pad-2">
+								<input name="email" type="text" value="..." />
+							</div>
+							<div class="pad-2">
+								<input name="password" type="password" />
+							</div>
+							<Button type="submit" width="medium" value="login" loading={false}>Login</Button>
+						</form>
+					{/snippet}
+				</Login>
+			{/snippet}
+		</Demoer>
+	</DemoPage>
+	<div class="flex-v gap-large">
+		<DemoerCode title="myContext" code={codeSlot}></DemoerCode>
+	</div>
+</ComponentDemo>

package/dist/ui/login/Login.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 LoginProps = typeof __propDef.props;
+export type LoginEvents = typeof __propDef.events;
+export type LoginSlots = typeof __propDef.slots;
+export default class Login extends SvelteComponent<LoginProps, LoginEvents, LoginSlots> {
+}
+export {};

package/dist/ui/login/Login.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">import { fade } from "svelte/transition";
+import Backdrop from "../../base/backdrop/Backdrop.svelte";
+import Button from "../../controls/button/Button.svelte";
+import Icon from "../../base/icon/Icon.svelte";
+import Slotted from "../../utils/slotted/Slotted.svelte";
+let {
+  class: className = "",
+  element = $bindable(),
+  style = "",
+  showLogin = true,
+  transition = { type: fade, args: {} },
+  fields = { email: "", password: "" },
+  loading = false,
+  submitting = false,
+  onSubmit = function(args) {
+    return new Promise((resolve, reject) => {
+      return setTimeout(() => {
+        resolve(true);
+      }, 2e3);
+    });
+  },
+  children,
+  slotRetrievePassword,
+  loginAvatarRoot,
+  loginAvatar,
+  loginForm,
+  ...rest
+} = $props();
+export const actions = {
+  toggle: (lo) => {
+    showLogin = lo ?? !showLogin;
+  },
+  toggleLoading: (lo) => {
+    loading = lo ?? !loading;
+  }
+};
+let grantedError = false;
+const validData = {};
+function validate() {
+  return true;
+}
+</script>
+
+{#if showLogin}
+	<Backdrop isOpen={showLogin} style="height:100%;" {loading}>
+		<form
+			bind:this={element}
+			class="pos-abs top-0 h-full w-full {className}"
+			method="post"
+			on:submit|preventDefault={validate}
+		>
+			<div transition:fade|global class="pos-rel h-full w-full flex-h flex-align-middle-center">
+				<div class="form flex-v flex-align-middle-center">
+					<Slotted child={loginAvatarRoot}>
+						<div class="avatarHolder marg-b-2">
+							<div class="avatar flex-h flex-align-middle-center">
+								{#if submitting}
+									<Icon rotate iconSize="large" icon="loading" />
+								{:else}
+									<Slotted child={loginAvatar} />
+								{/if}
+							</div>
+						</div>
+					</Slotted>
+					<Slotted child={loginForm}>
+						<div class="pad-2">
+							<input class="input" name="email" type="text" />
+						</div>
+						<div class="pad-2">
+							<input name="password" type="password" />
+						</div>
+						<Button type="submit" value="login" loading={submitting}>
+							{#if submitting}<i class="fa fa-spinner fa-spin theme-text-primary-complement"
+								></i>{/if}
+							Login
+						</Button>
+						{#if grantedError}
+							<div class="pad-1 color-scheme-error">Please verify your input</div>
+						{/if}
+					</Slotted>
+					{#if slotRetrievePassword}
+						<div class="retrieve">
+							<Slotted child={slotRetrievePassword} />
+						</div>
+					{/if}
+				</div>
+			</div>
+		</form>
+	</Backdrop>
+{:else}
+	{@render children?.()}
+{/if}
+
+<style>form {
+  z-index: 1000;
+}
+
+.retrieve {
+  padding: var(--sld-pad-med);
+}
+
+.form {
+  height: 33% !important;
+  width: 20%;
+}
+
+.form .avatarHolder {
+  width: 50%;
+  padding-bottom: 50%;
+  position: relative;
+}
+
+.form .avatarHolder .avatar {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  border: 1px solid var(--sld-color-foreground-alpha-mid);
+  box-shadow: 0 0 5px 1px rgba(32, 123, 21, 0.3);
+  background-color: var(--sld-color-background-alpha-mid);
+}
+
+.form .name {
+  text-align: center;
+  margin: 0.5rem;
+}</style>

package/dist/ui/login/Login.svelte.d.ts

@@ -0,0 +1,39 @@
+import { SvelteComponent } from "svelte";
+import { type TransitionConfig } from 'svelte/transition';
+declare const __propDef: {
+    props: import("../../types/index.js").CommonProps & {
+        showLogin: boolean;
+        transition: TransitionConfig;
+        fields: {
+            email: string;
+            password: string;
+        };
+        loading: boolean;
+        submitting: boolean;
+        onSubmit: (args: any) => Promise<any>;
+        children?: import("svelte").Snippet;
+        loginAvatarRoot?: import("svelte").Snippet;
+        loginAvatar?: import("svelte").Snippet;
+        loginForm?: import("svelte").Snippet;
+        slotRetrievePassword?: import("svelte").Snippet;
+    } & {
+        actions?: {
+            toggle: (lo?: boolean) => void;
+            toggleLoading: (lo?: boolean) => void;
+        };
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type LoginProps_ = typeof __propDef.props;
+export { LoginProps_ as LoginProps };
+export type LoginEvents = typeof __propDef.events;
+export type LoginSlots = typeof __propDef.slots;
+export default class Login extends SvelteComponent<LoginProps_, LoginEvents, LoginSlots> {
+    get actions(): {
+        toggle: (lo?: boolean) => void;
+        toggleLoading: (lo?: boolean) => void;
+    };
+}

package/dist/ui/login/store.js

@@ -0,0 +1,16 @@
+// store.js
+import { writable } from 'svelte/store';
+import { browser } from '$app/environment';
+let storedUserStore;
+if (browser) {
+    storedUserStore = localStorage.getItem('userStore');
+}
+export const userStore = writable({
+    logged: true,
+    ...JSON.parse(storedUserStore ?? '{}')
+});
+if (browser) {
+    userStore.subscribe((value) => {
+        localStorage.setItem('userStore', JSON.stringify(value));
+    });
+}

package/dist/ui/login/types.d.ts

@@ -0,0 +1,31 @@
+import type { DemoerStoryProps } from '../../base/demoer/types.js';
+import type { CommonProps } from '../../types/index.js';
+import type { Snippet } from 'svelte';
+import type { TransitionConfig } from 'svelte/transition';
+export type LoginProps = CommonProps & {
+    /** Whether to show the login form or not */
+    showLogin: boolean;
+    /** Transition configuration for the login form */
+    transition: TransitionConfig;
+    /** Fields for the login form */
+    fields: {
+        email: string;
+        password: string;
+    };
+    /** Whether the form is loading or not */
+    loading: boolean;
+    /** Whether the form is submitting or not */
+    submitting: boolean;
+    /** Function to call when the form is submitted */
+    onSubmit: (args: any) => Promise<any>;
+    /** Children snippet for the default content */
+    children?: Snippet;
+    /** Slot for the login avatar root */
+    loginAvatarRoot?: Snippet;
+    /** Slot for the login avatar */
+    loginAvatar?: Snippet;
+    /** Slot for the login form */
+    loginForm?: Snippet;
+    slotRetrievePassword?: Snippet;
+};
+export declare let parameters: DemoerStoryProps<LoginProps>, componentArgs: LoginProps;

package/dist/ui/login/types.js

@@ -0,0 +1,28 @@
+import { demoerArgs } from '../../base/demoer/demoer.utils.js';
+const loginDemoValues = {
+    showLogin: {
+        type: 'boolean',
+        values: [true, false],
+        default: false
+    },
+    fields: {
+        type: 'object',
+        default: { email: '', password: '' }
+    },
+    loading: {
+        type: 'boolean',
+        values: [true, false],
+        default: false
+    },
+    submitting: {
+        type: 'boolean',
+        values: [true, false],
+        default: false
+    },
+    onSubmit: {
+        type: 'function',
+        default: () => Promise.resolve(),
+        private: true
+    }
+};
+export let { parameters, componentArgs } = demoerArgs(loginDemoValues);

package/dist/ui/marquee/Marque.demo.svelte

@@ -0,0 +1,34 @@
+<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 { parameters, componentArgs } from "./types.js";
+import Marquee from "./Marquee.svelte";
+let code = `
+<Marquee >
+    <div></div>
+    <div></div>
+    <div></div>
+</Marquee>`;
+</script>
+
+<ComponentDemo component="Marquee">
+	<DemoPage component="Rating" {code}>
+		<Demoer {parameters} {componentArgs}>
+			{#snippet children({ activeParams })}
+				<Marquee {...activeParams}>
+					<div>thumb</div>
+					<div>thumb no !!!</div>
+					<div>thumb</div>
+					<div>thumb</div>
+					<div>thumb</div>
+					<div>thumb</div>
+					<div>thumb</div>
+					<div>thumb</div>
+					<div>thumb</div>
+					<div>thumb</div>
+					<div>thumb</div>
+				</Marquee>
+			{/snippet}
+		</Demoer>
+	</DemoPage>
+</ComponentDemo>

package/dist/ui/marquee/Marque.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 MarqueProps = typeof __propDef.props;
+export type MarqueEvents = typeof __propDef.events;
+export type MarqueSlots = typeof __propDef.slots;
+export default class Marque extends SvelteComponent<MarqueProps, MarqueEvents, MarqueSlots> {
+}
+export {};

package/dist/ui/marquee/Marquee.svelte

@@ -0,0 +1,110 @@
+<script lang="ts" generics="T=Data">import Stepper from "../../controls/stepper/Stepper.svelte";
+import Content from "../../utils/content/Content.svelte";
+import Slotted from "../../utils/slotted/Slotted.svelte";
+let container = $state();
+let {
+  showControls = true,
+  autoStart = false,
+  pauseOnHover = false,
+  activeElement = $bindable(0),
+  activeIndex = $bindable(0),
+  showStepper = false,
+  stepperProps = {},
+  gutter,
+  marqueePrev,
+  marqueeNext,
+  children,
+  ...rest
+} = $props();
+function scrollHorizontally(element, distance) {
+  element.scrollBy({ left: distance, behavior: "smooth" });
+}
+function scrollNext() {
+  if (container) scrollHorizontally(container, container.clientWidth);
+}
+function scrollPrev() {
+  if (container) scrollHorizontally(container, -container.clientWidth);
+}
+</script>
+
+<div class="marquee-container">
+	{#if showControls}
+		<div class="marquee-controls-prev">
+			<button onclick={scrollPrev}>Précédent</button>
+		</div>
+	{/if}
+	<div bind:this={container} class="marquee" {...rest}>
+		<Content {gutter} tag="div" class="marquee-children" style="scroll-snap-type: x mandatory;">
+			{#if children}{@render children()}{:else}
+				<div>enter content or data</div>
+			{/if}
+		</Content>
+	</div>
+	{#if showControls}
+		<div class="marquee-controls-next">
+			<Slotted child={marqueePrev}>
+				<button onclick={scrollNext}>Suivant</button>
+			</Slotted>
+		</div>
+	{/if}
+</div>
+{#if showStepper}
+	<Stepper {...stepperProps} steps={[{ order: 1 }, { order: 2 }]}></Stepper>
+{/if}
+
+<style>.marquee {
+  flex: 1;
+  overflow-x: hidden;
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
+  width: 300px;
+}
+.marquee-container {
+  display: flex;
+  align-items: center;
+  --preset-gutter: var(--sld-gutter-default);
+}
+.marquee-container :global([gutter="tiny"]), .marquee-container :global(.gutter-tiny) {
+  padding: var(--sld-gutter-tiny);
+  gap: var(--sld-gutter-tiny);
+  --preset-gutter: var(--sld-gutter-tiny);
+}
+.marquee-container :global([gutter="mini"]), .marquee-container :global(.gutter-mini) {
+  padding: var(--sld-gutter-mini);
+  gap: var(--sld-gutter-mini);
+  --preset-gutter: var(--sld-gutter-mini);
+}
+.marquee-container :global([gutter="small"]), .marquee-container :global(.gutter-small) {
+  padding: var(--sld-gutter-small);
+  gap: var(--sld-gutter-small);
+  --preset-gutter: var(--sld-gutter-small);
+}
+.marquee-container :global([gutter="med"]), .marquee-container :global(.gutter-med) {
+  padding: var(--sld-gutter-med);
+  gap: var(--sld-gutter-med);
+  --preset-gutter: var(--sld-gutter-med);
+}
+.marquee-container :global([gutter="kind"]), .marquee-container :global(.gutter-kind) {
+  padding: var(--sld-gutter-kind);
+  gap: var(--sld-gutter-kind);
+  --preset-gutter: var(--sld-gutter-kind);
+}
+.marquee-container :global([gutter="default"]), .marquee-container :global(.gutter-default) {
+  padding: var(--sld-gutter-default);
+  gap: var(--sld-gutter-default);
+  --preset-gutter: var(--sld-gutter-default);
+}
+.marquee :global(.marquee-children) {
+  display: inline-flex;
+}
+.marquee :global(.marquee-children) > :global(*) {
+  border: 1px solid red;
+  width: 90px;
+  height: 300px;
+}
+.marquee-controls-prev {
+  display: contents;
+}
+.marquee-controls-next {
+  display: contents;
+}</style>

package/dist/ui/marquee/Marquee.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+import type { StepperProps } from '../../controls/stepper/types.js';
+import type { Data } from '../../types/index.js';
+declare class __sveltets_Render<T = Data> {
+    props(): {
+        showControls?: boolean;
+        autoStart?: boolean;
+        pauseOnHover?: boolean;
+        activeElement?: number;
+        activeIndex?: number;
+        gutter?: import("../../types/index.js").ElementProps["gutter"];
+        showStepper?: boolean;
+        stepperProps?: StepperProps;
+        marqueePrev?: import("svelte").Snippet;
+        marqueeNext?: import("svelte").Snippet;
+        children?: import("svelte").Snippet;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type MarqueeProps_<T = Data> = ReturnType<__sveltets_Render<T>['props']>;
+export type MarqueeEvents<T = Data> = ReturnType<__sveltets_Render<T>['events']>;
+export type MarqueeSlots<T = Data> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class Marquee<T = Data> extends SvelteComponent<MarqueeProps_<T>, MarqueeEvents<T>, MarqueeSlots<T>> {
+}
+export {};

package/dist/ui/marquee/marquee.scss

@@ -0,0 +1,32 @@
+@import "../../styles/slotui-mixins.scss";
+
+.marquee {
+    flex: 1;
+    overflow-x: hidden;
+    scroll-behavior: smooth;
+    scroll-snap-type: x mandatory;
+
+    width: 300px;
+    &-container {
+        display: flex;
+        align-items: center;
+        @include ui-gutter-presets;
+    }
+    :global(.marquee-children) {
+        display: inline-flex;
+        & > :global(*) {
+            border: 1px solid red;
+            width: 90px;
+            height: 300px;
+        }
+    }
+    &-controls {
+        &-prev {
+            display: contents;
+        }
+
+        &-next {
+            display: contents;
+        }
+    }
+}

package/dist/ui/marquee/types.d.ts

@@ -0,0 +1,19 @@
+import type { DemoerStoryProps } from '../../base/demoer/types.js';
+import type { StepperProps } from '../../controls/stepper/types.js';
+import type { ElementProps } from '../../types/index.js';
+import type { Snippet } from 'svelte';
+export interface MarqueeProps {
+    showControls?: boolean;
+    autoStart?: boolean;
+    pauseOnHover?: boolean;
+    activeElement?: number;
+    activeIndex?: number;
+    gutter?: ElementProps['gutter'];
+    showStepper?: boolean;
+    stepperProps?: StepperProps;
+    marqueePrev?: Snippet;
+    marqueeNext?: Snippet;
+    children?: Snippet;
+}
+export declare const MarqueDemoValues: DemoerStoryProps<MarqueeProps>;
+export declare let parameters: DemoerStoryProps<MarqueeProps>, componentArgs: MarqueeProps;

package/dist/ui/marquee/types.js

@@ -0,0 +1,23 @@
+import { demoerArgs } from '../../base/demoer/demoer.utils.js';
+export const MarqueDemoValues = {
+    showControls: {
+        type: 'boolean',
+        default: true
+    },
+    autoStart: {
+        type: 'boolean',
+        default: true
+    },
+    showStepper: {
+        type: 'boolean',
+        default: true
+    },
+    gutter: {
+        type: 'gutter'
+    },
+    pauseOnHover: {
+        type: 'boolean',
+        default: true
+    }
+};
+export let { parameters, componentArgs } = demoerArgs(MarqueDemoValues);

package/dist/ui/menu/Menu.svelte

@@ -0,0 +1,5 @@
+<script lang="ts" generics="T= Data">import MenuList from "../menuList/MenuList.svelte";
+let { ...rest } = $props();
+</script>
+
+<MenuList {...rest} class="menu" />

package/dist/ui/menu/Menu.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+import type { Data } from '../../types/index.js';
+import type { MenuListProps } from '../menuList/types.js';
+declare class __sveltets_Render<T = Data> {
+    props(): MenuListProps;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type MenuProps<T = Data> = ReturnType<__sveltets_Render<T>['props']>;
+export type MenuEvents<T = Data> = ReturnType<__sveltets_Render<T>['events']>;
+export type MenuSlots<T = Data> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class Menu<T = Data> extends SvelteComponent<MenuProps<T>, MenuEvents<T>, MenuSlots<T>> {
+}
+export {};

package/dist/ui/menu/MenuItem.svelte

@@ -0,0 +1,5 @@
+<script lang="ts" generics="T= Data">import MenuListItem from "../menuList/MenuListItem.svelte";
+let { ...rest } = $props();
+</script>
+
+<MenuListItem {...rest} class="menuItem" />

package/dist/ui/menu/MenuItem.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+import type { MenuListItemProps } from '../menuList/types.js';
+import type { Data } from '../../types/index.js';
+declare class __sveltets_Render<T = Data> {
+    props(): MenuListItemProps;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type MenuItemProps<T = Data> = ReturnType<__sveltets_Render<T>['props']>;
+export type MenuItemEvents<T = Data> = ReturnType<__sveltets_Render<T>['events']>;
+export type MenuItemSlots<T = Data> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class MenuItem<T = Data> extends SvelteComponent<MenuItemProps<T>, MenuItemEvents<T>, MenuItemSlots<T>> {
+}
+export {};