@medyll/idae-slotui-svelte 0.3.0

package/README.md

@@ -0,0 +1,18 @@
+# @medyll/idae-slotui-svelte
+
+This package is part of the Idae monorepo and focuses on providing slot UI components for Svelte applications.  
+It aims to offer a set of reusable and customizable slots to enhance the development of web applications.
+
+## Features
+
+- Reusable snippets components for Svelte
+- Easy to integrate and customize
+- Supports dynamic content loading
+
+## Installation
+
+To install `@medyll/idae-slotui-svelte`, run the following command in your project directory:
+
+```sh
+npm install @medyll/idae-slotui-svelte
+```

package/dist/base/alert/Alert.demo.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">import ComponentDemo from "../demoer/DemoerComponent.svelte";
+import Button from "../../controls/button/Button.svelte";
+import Alert from "./Alert.svelte";
+import Demoer from "../demoer/Demoer.svelte";
+import DemoPage from "../demoer/DemoPage.svelte";
+import { parameters, componentArgs } from "./types.js";
+let code1 = `
+<Alert {...activeParams}>
+	Simple alert with a button
+	{#snippet topButtonSlot()}
+		<Button>button</Button>
+	{/snippet}
+</Alert>`;
+let code2 = `
+<Alert />	`;
+</script>
+
+<ComponentDemo
+	component="Alert"
+	cite="Then they were informed, then they were messaged, then they were alerted. Br Jhons, 1752"
+>
+	<DemoPage component="Alert" code={code1}>
+		<Demoer {parameters} {componentArgs}>
+			{#snippet children({ activeParams })}
+				<div class="flex-h flex-wrap flex-align-middle gap-medium">
+					<Alert {...activeParams}>hi !</Alert>
+					<Alert {...activeParams}>
+						Simple alert with a button
+						{#snippet alertTopButton()}
+							<Button>button</Button>
+						{/snippet}
+					</Alert>
+					<Alert
+						{...activeParams}
+						on:alert:closed={() => {
+							alert('closed');
+						}}
+					>
+						Alert with button close
+						{#snippet alertMessage()}
+							description here here
+						{/snippet}
+						{#snippet alertButtonZone()}
+							<Button data-close>close</Button>
+						{/snippet}
+					</Alert>
+				</div>
+			{/snippet}
+		</Demoer>
+	</DemoPage>
+	<DemoPage title="Using props" component="Alert" code={code2}>
+		<Demoer {parameters} {componentArgs}>
+			{#snippet children({ activeParams })}
+				<div class="flex-h flex-wrap gap-medium">
+					<Alert {...activeParams} />
+				</div>
+			{/snippet}
+		</Demoer>
+	</DemoPage>
+</ComponentDemo>

package/dist/base/alert/Alert.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 AlertProps = typeof __propDef.props;
+export type AlertEvents = typeof __propDef.events;
+export type AlertSlots = typeof __propDef.slots;
+export default class Alert extends SvelteComponent<AlertProps, AlertEvents, AlertSlots> {
+}
+export {};

package/dist/base/alert/Alert.svelte

@@ -0,0 +1,195 @@
+<script lang="ts">import { fade } from "svelte/transition";
+import Divider from "../divider/Divider.svelte";
+import Button from "../../controls/button/Button.svelte";
+import Slotted from "../../utils/slotted/Slotted.svelte";
+import IconButton from "../../controls/button/IconButton.svelte";
+export const actions = {
+  open,
+  toggle,
+  close
+};
+let {
+  class: className,
+  message,
+  draggable = false,
+  level = $bindable("info"),
+  isOpen = $bindable(false),
+  element = $bindable(),
+  children,
+  alertTopButton,
+  alertMessage,
+  alertButtonZone,
+  alertButtonClose
+} = $props();
+const handleClick = (event) => {
+  if (event?.target?.getAttribute("data-close")) {
+    event.stopPropagation();
+    actions.close();
+  }
+};
+$effect(() => {
+  if (element) {
+    element.addEventListener("click", handleClick, true);
+  }
+  return () => {
+    if (element) {
+      element.removeEventListener("click", handleClick);
+    }
+  };
+});
+function open() {
+  isOpen = true;
+}
+function toggle() {
+  isOpen = !isOpen;
+}
+function close() {
+  isOpen = false;
+}
+</script>
+
+{#if isOpen}
+	<dialog
+		open={isOpen}
+		{draggable}
+		bind:this={element}
+		transition:fade|global
+		class="alert {className}"
+	>
+		<article class="dialog-content border-color-scheme-{level}">
+			<header class="header-bar">
+				<div class="dot bg-themed-scheme-{level}"></div>
+				<div class="title">
+					<Slotted child={children}>{message}</Slotted>
+				</div>
+				<Slotted child={alertTopButton} />
+				<div data-close>
+					<Slotted child={alertButtonClose}
+						><IconButton
+							icon="window-close"
+							variant="naked"
+							onclick={() => {
+								isOpen = !isOpen;
+							}}
+							aria-label="Close"
+						/></Slotted
+					>
+				</div>
+			</header>
+			{#if alertMessage}
+				<Divider />
+				{@render alertMessage()}
+			{/if}
+			{#if alertButtonZone}
+				<footer class="dialog-footer">
+					{@render alertButtonZone()}
+				</footer>
+			{/if}
+		</article>
+	</dialog>
+{/if}
+
+<style>:root {
+  --alert-radius: var(--sld-radius-small);
+  --alert-color-border: var(--sld-color-border);
+  --alert-color-background: var(--sld-color-background);
+  --alert-elevation: var(--sld-elevation-4);
+  --alert-pad: var(--sld-pad-small);
+  --alert-gap: var(--sld-gap-small);
+}
+
+dialog.alert {
+  position: relative;
+  min-width: 350px;
+  display: inline-block;
+  border-radius: var(--alert-radius);
+  border: 1px solid var(--alert-color-border);
+  background-color: var(--alert-color-background);
+  box-shadow: var(--alert-elevation);
+  overflow: hidden;
+  padding: 0;
+}
+
+dialog.alert[open=true] {
+  display: none;
+}
+
+dialog.alert article.dialog-content {
+  padding: var(--alert-pad);
+  border-bottom: 4px solid var(--alert-color-border);
+}
+
+dialog.alert article.dialog-content header.header-bar {
+  display: flex;
+  align-items: center;
+  padding: var(--alert-pad-small);
+  gap: var(--alert-gap-small, 1rem);
+}
+
+dialog.alert article.dialog-content header.header-bar .dot {
+  display: inline-block;
+  border: 1px solid var(--alert-color-border);
+  border-radius: var(--alert-radius);
+  height: 16px;
+  width: 4px;
+  transform: translate(-50%, 0);
+}
+
+dialog.alert article.dialog-content header.header-bar .title {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+dialog.alert article.dialog-content header.header-bar [data-close] {
+  border-radius: var(--alert-radius);
+  margin: 0.25rem;
+  padding: 0.25rem;
+}
+
+dialog.alert article.dialog-content footer.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: var(--alert-pad);
+  border-top: 1px solid var(--alert-color-border);
+}
+
+dialog.alert article.dialog-content footer.dialog-footer button {
+  margin-left: 1rem;
+}
+
+.bg-themed-scheme-discrete {
+  color: black;
+  text-shadow: 0 0 0.125rem #b3b3b3;
+  background-color: #ccc;
+}
+
+.bg-themed-scheme-success {
+  color: white;
+  text-shadow: 0 0 0.125rem #004d00;
+  background-color: green;
+}
+
+.bg-themed-scheme-info {
+  color: black;
+  text-shadow: 0 0 0.125rem #ffd324;
+  background-color: #ffdd57;
+}
+
+.bg-themed-scheme-warning {
+  color: black;
+  text-shadow: 0 0 0.125rem #b49104;
+  background-color: #e6b905;
+}
+
+.bg-themed-scheme-alert {
+  color: black;
+  text-shadow: 0 0 0.125rem #cc5c00;
+  background-color: #ff7300;
+}
+
+.bg-themed-scheme-error {
+  color: white;
+  text-shadow: 0 0 0.125rem #cc0000;
+  background-color: red;
+}</style>

package/dist/base/alert/Alert.svelte.d.ts

@@ -0,0 +1,37 @@
+import { SvelteComponent } from "svelte";
+import type { ElementProps } from '../../types/index.js';
+declare const __propDef: {
+    props: {
+        level?: ElementProps["levels"];
+        message?: string;
+        draggable?: boolean;
+        isOpen?: boolean;
+        children?: import("svelte").Snippet;
+        alertTopButton?: import("svelte").Snippet;
+        alertMessage?: import("svelte").Snippet;
+        alertButtonZone?: import("svelte").Snippet;
+        alertButtonClose?: import("svelte").Snippet;
+        'anchor-for'?: string;
+        element?: HTMLElement;
+        class?: string;
+        style?: string;
+        container?: `inline` | `size` | `normal`;
+        hideMaxWidth?: string;
+        hideMaxHeight?: string;
+        hideMinWidth?: string;
+        hideMinHeight?: string;
+    } & {
+        actions?: Record<"open" | "toggle" | "close", Function>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type AlertProps_ = typeof __propDef.props;
+export { AlertProps_ as AlertProps };
+export type AlertEvents = typeof __propDef.events;
+export type AlertSlots = typeof __propDef.slots;
+export default class Alert extends SvelteComponent<AlertProps_, AlertEvents, AlertSlots> {
+    get actions(): Record<"close" | "toggle" | "open", Function>;
+}

package/dist/base/alert/alert.scss

@@ -0,0 +1,93 @@
+@import "../../styles/slotui-mixins.scss";
+
+:root {
+    --alert-radius: var(--sld-radius-small);
+    --alert-color-border: var(--sld-color-border);
+    --alert-color-background: var(--sld-color-background);
+    --alert-elevation: var(--sld-elevation-4);
+    --alert-pad: var(--sld-pad-small);
+    --alert-gap: var(--sld-gap-small);
+}
+
+dialog.alert {
+    &[open="true"] {
+        display: none;
+    }
+    position: relative;
+    min-width: 350px;
+    display: inline-block;
+    border-radius: var(--alert-radius);
+    border: 1px solid var(--alert-color-border);
+    background-color: var(--alert-color-background);
+    box-shadow: var(--alert-elevation);
+    overflow: hidden;
+    padding: 0;
+    article.dialog-content {
+        padding: var(--alert-pad);
+        border-bottom: 4px solid var(--alert-color-border);
+        header.header-bar {
+            display: flex;
+            align-items: center;
+            padding: var(--alert-pad-small);
+            gap: var(--alert-gap-small, 1rem);
+            .dot {
+                display: inline-block;
+                border: 1px solid var(--alert-color-border);
+                border-radius: var(--alert-radius);
+                height: 16px;
+                width: 4px;
+                transform: translate(-50%, 0);
+            }
+            .title {
+                flex: 1;
+                display: flex;
+                align-items: center;
+            }
+            [data-close] {
+                border-radius: var(--alert-radius);
+                margin: 0.25rem;
+                padding: 0.25rem;
+            }
+        }
+        footer.dialog-footer {
+            display: flex;
+            justify-content: flex-end;
+            padding: var(--alert-pad);
+            border-top: 1px solid var(--alert-color-border);
+            button {
+                margin-left: 1rem;
+            }
+        }
+    }
+}
+
+.bg-themed-scheme-discrete {
+    color: black;
+    text-shadow: 0 0 0.125rem #b3b3b3;
+    background-color: #ccc;
+}
+.bg-themed-scheme-success {
+    color: white;
+    text-shadow: 0 0 0.125rem #004d00;
+    background-color: green;
+}
+.bg-themed-scheme-info {
+    color: black;
+    text-shadow: 0 0 0.125rem #ffd324;
+    background-color: #ffdd57;
+}
+.bg-themed-scheme-warning {
+    color: black;
+    text-shadow: 0 0 0.125rem #b49104;
+    background-color: #e6b905;
+}
+.bg-themed-scheme-alert {
+    color: black;
+    text-shadow: 0 0 0.125rem #cc5c00;
+    background-color: #ff7300;
+}
+.bg-themed-scheme-error {
+    color: white;
+    text-shadow: 0 0 0.125rem #cc0000;
+    background-color: red;
+}

package/dist/base/alert/types.d.ts

@@ -0,0 +1,20 @@
+import { type CommonProps, type ElementProps } from '../../types/index.js';
+import type { Snippet } from 'svelte';
+import type { DemoerStoryProps } from '../demoer/types.js';
+export interface AlertProps extends CommonProps {
+    /** alert level */
+    level?: ElementProps['levels'];
+    /** message to be shown */
+    message?: string;
+    /** make the alert draggable */
+    draggable?: boolean;
+    /** show or hide the alert */
+    isOpen?: boolean;
+    children?: Snippet;
+    alertTopButton?: Snippet;
+    alertMessage?: Snippet;
+    alertButtonZone?: Snippet;
+    alertButtonClose?: Snippet;
+}
+export declare const alertDemoValues: DemoerStoryProps<any>;
+export declare let parameters: DemoerStoryProps<any>, componentArgs: any;

package/dist/base/alert/types.js

@@ -0,0 +1,24 @@
+import { statusPreset } from '../../types/index.js';
+import { demoerArgs } from '../demoer/demoer.utils.js';
+export const alertDemoValues = {
+    isOpen: {
+        type: 'boolean',
+        values: [true, false],
+        default: true
+    },
+    draggable: {
+        type: 'boolean',
+        values: [true, false],
+        default: false
+    },
+    level: {
+        type: 'levels',
+        values: Object.keys(statusPreset),
+        default: statusPreset.info
+    },
+    message: {
+        type: 'string',
+        values: ['Some messages']
+    }
+};
+export let { parameters, componentArgs } = demoerArgs(alertDemoValues);

package/dist/base/avatar/Avatar.demo.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">import ComponentDemo from "../demoer/DemoerComponent.svelte";
+import Demoer from "../demoer/Demoer.svelte";
+import DemoPage from "../demoer/DemoPage.svelte";
+import Icon from "../icon/Icon.svelte";
+import Avatar from "./Avatar.svelte";
+import { parameters, componentArgs } from "./types.js";
+let code1 = `
+<Avatar>
+	<Icon icon={activeParams?.icon} />
+</Avatar>`;
+let code2 = `
+	<Avatar icon={icon} />`;
+</script>
+
+<ComponentDemo
+	component="Avatar"
+	cite="If it's not you, then it's the other you, <br /> Emma Avatar you, 1652"
+>
+	<div class="flex-v gap-large">
+		<DemoPage component="Rating" code={code1}>
+			<Demoer {parameters} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<Avatar {...activeParams}>
+						<Icon icon={activeParams?.icon} />
+					</Avatar>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+		<DemoPage title="Without slots" code={code2} component="Rating">
+			<Demoer {parameters} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<Avatar {...activeParams} icon={activeParams?.icon} />
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/base/avatar/Avatar.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 AvatarProps = typeof __propDef.props;
+export type AvatarEvents = typeof __propDef.events;
+export type AvatarSlots = typeof __propDef.slots;
+export default class Avatar extends SvelteComponent<AvatarProps, AvatarEvents, AvatarSlots> {
+}
+export {};

package/dist/base/avatar/Avatar.preview.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">import Icon from "../icon/Icon.svelte";
+import Avatar from "./Avatar.svelte";
+</script>
+
+<Avatar size="tiny" class="marg-4"><Icon icon="user" /></Avatar>

package/dist/base/avatar/Avatar.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 AvatarProps = typeof __propDef.props;
+export type AvatarEvents = typeof __propDef.events;
+export type AvatarSlots = typeof __propDef.slots;
+export default class Avatar extends SvelteComponent<AvatarProps, AvatarEvents, AvatarSlots> {
+}
+export {};

package/dist/base/avatar/Avatar.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">import Icon from "../icon/Icon.svelte";
+import Content from "../../utils/content/Content.svelte";
+let {
+  icon = "icon-park-outline:avatar",
+  size,
+  iconSize,
+  class: className = "",
+  element = $bindable(),
+  children,
+  avatarBadge,
+  ...rest
+} = $props();
+const sizes = {
+  tiny: "2rem",
+  small: "4rem",
+  medium: "8rem",
+  large: "12rem",
+  full: "100%"
+};
+</script>
+
+<Content
+	bind:element
+	tag="figure"
+	class="avatar {className}"
+	style="width:{sizes[size]};height:{sizes[size]}"
+	{...rest}
+>
+	{@render avatarBadge?.()}
+
+	{#if children}
+		{@render children()}
+	{:else}
+		<Icon {icon} {iconSize} />
+	{/if}
+</Content>
+
+<style>:root {
+  --avatar-radius: var(--css-radius-small);
+  --avatar-border-color: var(--sld-color-border);
+}
+
+.avatar {
+  position: relative;
+  border-radius: var(--avatar-radius);
+  border: 1px solid var(--avatar-border-color);
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+}</style>

package/dist/base/avatar/Avatar.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponent } 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?: (import("svelte").Snippet<[any]> & import("svelte").Snippet<[]>) | undefined;
+        icon?: string;
+        size?: import("../../types/index.js").ElementProps["width"];
+        iconSize?: import("../../types/index.js").ElementProps["iconSize"];
+        avatarBadge?: import("svelte").Snippet;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type AvatarProps_ = typeof __propDef.props;
+export { AvatarProps_ as AvatarProps };
+export type AvatarEvents = typeof __propDef.events;
+export type AvatarSlots = typeof __propDef.slots;
+export default class Avatar extends SvelteComponent<AvatarProps_, AvatarEvents, AvatarSlots> {
+}

package/dist/base/avatar/avatar.scss

@@ -0,0 +1,17 @@
+// @import "../../styles/slotui-presets.scss";
+
+@import "../../styles/slotui-mixins.scss";
+
+:root {
+  --avatar-radius: var(--css-radius-small);
+  --avatar-border-color: var(--sld-color-border);
+}
+
+.avatar {
+  position: relative;
+  border-radius: var(--avatar-radius);
+  border: 1px solid var(--avatar-border-color);
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+}

package/dist/base/avatar/types.d.ts

@@ -0,0 +1,29 @@
+import type { DemoerStoryProps } from '../demoer/types.js';
+export declare enum statusPreset {
+    success = "success",
+    warning = "warning",
+    alert = "alert",
+    error = "error",
+    info = "info",
+    discrete = "discrete"
+}
+import type { CommonProps, ElementProps } from '../../types/index.js';
+import type { Snippet } from 'svelte';
+export type AvatarProps = CommonProps & {
+    /** icon name 	*/
+    icon?: string;
+    /**
+     * size of the avatar
+     */
+    size?: ElementProps['width'];
+    /**
+     * size of the icon
+     */
+    iconSize?: ElementProps['iconSize'];
+    element?: HTMLElement;
+    class?: string;
+    children?: Snippet;
+    avatarBadge?: Snippet;
+};
+export declare const AvatarDemoValues: DemoerStoryProps<AvatarProps>;
+export declare let parameters: DemoerStoryProps<AvatarProps>, componentArgs: AvatarProps;