@medyll/idae-slotui-svelte 0.3.0

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

@@ -0,0 +1,30 @@
+import type { CommonProps } from '../../types/index.js';
+import type { Snippet } from 'svelte';
+import type { DemoerStoryProps } from '../demoer/types.js';
+export interface BoxProps extends CommonProps {
+    element?: HTMLDivElement;
+    style?: string;
+    /** is the content visible */
+    isOpen: boolean;
+    /** show a working closer icon */
+    showCloseControl: boolean;
+    /** used to activate the slotted.TitleBar component	 */
+    hasMenu: boolean;
+    /** text to be shown in the title bar */
+    title: string;
+    /** alternative to iconSlot, icon to be used with the internat iconify component */
+    icon: string;
+    /** alternative to contentSlot,  content to be shown in the main area */
+    content: string;
+    /** alternative to snippet.bottomZone, content to be shown in the bottom button zone */
+    bottomZone?: string;
+    /** component actions
+     * @type {Record<'open'|'toggle' | 'close', Function>}
+     */
+    children?: Snippet;
+    boxBottomZone?: Snippet;
+    titleBarTitle?: Snippet;
+    titleBarIcon?: Snippet;
+}
+export declare const BoxDemoValues: DemoerStoryProps<BoxProps>;
+export declare let parameters: DemoerStoryProps<BoxProps>, componentArgs: BoxProps;

package/dist/base/box/types.js

@@ -0,0 +1,32 @@
+import { demoerArgs } from '../demoer/demoer.utils.js';
+export const BoxDemoValues = {
+    isOpen: {
+        type: 'boolean',
+        default: true
+    },
+    showCloseControl: {
+        type: 'boolean',
+        default: true
+    },
+    hasMenu: {
+        type: 'boolean',
+        default: true
+    },
+    title: {
+        type: 'string',
+        values: ['A smart title on a smart box', 'second title']
+    },
+    icon: {
+        type: 'icon',
+        values: ['mdi:window', 'mdi:user', undefined]
+    },
+    content: {
+        type: 'string',
+        values: ['Some content as text / html', 'second content']
+    },
+    bottomZone: {
+        type: 'string',
+        values: ['bottomZone as text / html', 'second bottomZone']
+    }
+};
+export let { parameters, componentArgs } = demoerArgs(BoxDemoValues);

package/dist/base/breadCrumb/BreadCrumb.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">import Slotted from "../../utils/slotted/Slotted.svelte";
+let {
+  class: className,
+  element,
+  children,
+  style,
+  breadList = []
+} = $props();
+</script>
+
+<nav bind:this={element} class="breadCrumb {className ?? ''}" {style}>
+	<ul>
+		<li class="bread">
+			<Slotted child={children} />
+		</li>
+	</ul>
+</nav>
+
+<style>.breadCrumb ul {
+  display: flex;
+}</style>

package/dist/base/breadCrumb/breadcrumb.scss

@@ -0,0 +1,11 @@
+// @import "../../styles/slotui-presets.scss";
+@import "../../styles/slotui-mixins.scss";
+
+.breadCrumb {
+    ul {
+        display: flex;
+
+        .bread {
+        }
+    }
+}

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

@@ -0,0 +1,23 @@
+import type { CommonProps } from '../../types/index.js';
+import type { Snippet } from 'svelte';
+interface BreadListType {
+    action?: () => void;
+    breads?: BreadListItemType[];
+}
+interface BreadListItemType<D = Record<string, any>> {
+    text: string;
+    icon: string;
+    link?: string;
+    data?: D;
+    children: Snippet;
+}
+export interface BreadCrumbProps extends CommonProps {
+    /** breadCrumb class */
+    class?: string;
+    /** breadCrumb style */
+    style?: string;
+    /** breadCrumb list */
+    breadList: BreadListType[];
+    element: HTMLElement;
+}
+export {};

package/dist/base/breadCrumb/types.js

@@ -0,0 +1 @@
+export {};

package/dist/base/cartouche/Cartouche.demo.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">import Cartouche from "./Cartouche.svelte";
+import Demoer from "../demoer/Demoer.svelte";
+import DemoPage from "../demoer/DemoPage.svelte";
+import Icon from "../icon/Icon.svelte";
+import Button from "../../controls/button/Button.svelte";
+import ComponentDemo from "../demoer/DemoerComponent.svelte";
+import { parameters, componentArgs } from "./types.js";
+let code1 = `
+<Cartouche  class="marg-tb-1">
+	{#snippet cartoucheButtons()}
+		<Button size="medium">a button</Button>
+	{/snippet}
+	{#snippet cartoucheIcon()}
+		<Icon fontSize="small" icon="circle" />
+	{/snippet}
+	{#snippet cartouchePrimary()}
+		This is a cartouche
+	{/snippet}
+	{#snippet cartoucheSecondary()}
+		Some subtitle
+	{/snippet}
+	<div class="pad-2 border-t">Some <br />Cartouche <br />content</div>
+</Cartouche>`;
+let code2 = `
+	<Cartouche 
+		class="marg-tb-1" />`;
+</script>
+
+<ComponentDemo
+	component="Cartouche"
+	cite="'Open up', they said. So we stacked<br /> G. Brahms, 1964"
+	><div class="flex-v gap-large">
+		<DemoPage component="Cartouche" code={code1}>
+			<Demoer title="A simple cartouche" {parameters} {componentArgs}
+				>{#snippet children({ activeParams })}
+					<Cartouche {...activeParams} class="marg-tb-1">
+						<!-- {#snippet cartoucheButtons()}
+							<Button width="medium">a button</Button>
+						{/snippet} -->
+						<!-- {#snippet cartoucheIcon()}
+							<Icon iconSize="small" icon="circle" />
+						{/snippet} -->
+						<!-- {#snippet cartouchePrimary()}
+							This is a cartouche
+						{/snippet}
+						{#snippet cartoucheSecondary()}
+							Some subtitle
+						{/snippet} -->
+						<div class="pad-2 border-t">
+							Some <br />Cartouche <br />content
+						</div>
+					</Cartouche>
+				{/snippet}
+			</Demoer>
+			<Demoer title="Some stacked cartouches" {parameters} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<Cartouche {...activeParams} stacked={true}>
+						{#snippet cartouchePrimary()}
+							This is a cartouche
+						{/snippet}
+						<div class="pad-4 border-t">Cartouche content</div>
+					</Cartouche>
+					<Cartouche stacked={true} primary="This is another cartouche">
+						<div class="pad-2 border-t">Cartouche content</div>
+					</Cartouche>
+					<Cartouche primary="And another one" stacked={true}>
+						{#snippet cartoucheIcon()}
+							<Icon iconSize="small" icon="user" />
+						{/snippet}
+					</Cartouche>
+				{/snippet}
+			</Demoer>
+			<Demoer title="Some nested cartouches" {parameters} {componentArgs}
+				>{#snippet children({ activeParams })}
+					<Cartouche
+						{...activeParams}
+						bordered={false}
+						primary="Can contain some others cartouches"
+						class="marg-tb-1"
+					>
+						{#snippet cartoucheIcon()}
+							<Icon iconSize="small" icon="info-circle" />
+						{/snippet}
+						<div class="marg-l-4">
+							<Cartouche {...activeParams} stacked={true} primary="Inner cartouche">
+								<div class="pad-2 border-t">Cartouche content</div>
+							</Cartouche>
+							<Cartouche {...activeParams} stacked={true} primary="Inner cartouche">
+								<div class="pad-2 border-t">Cartouche content</div>
+							</Cartouche>
+						</div>
+					</Cartouche>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+		<DemoPage title="Using props" component="Cartouche" code={code2}>
+			<Demoer title="A simple cartouche" {parameters} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<Cartouche {...activeParams} class="marg-tb-1" />
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/base/cartouche/Cartouche.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 CartoucheProps = typeof __propDef.props;
+export type CartoucheEvents = typeof __propDef.events;
+export type CartoucheSlots = typeof __propDef.slots;
+export default class Cartouche extends SvelteComponent<CartoucheProps, CartoucheEvents, CartoucheSlots> {
+}
+export {};

package/dist/base/cartouche/Cartouche.preview.svelte

@@ -0,0 +1,25 @@
+<script>
+	import Cartouche from './Cartouche.svelte';
+	import Icon from '../icon/Icon.svelte';
+	import Divider from '../divider/Divider.svelte';
+	import Button from '../../controls/button/Button.svelte';
+	import ComponentDemo from '../demoer/DemoerComponent.svelte';
+</script>
+
+<div>
+	<Cartouche stacked={true} icon="user" primary="This is a stacked cartouche">
+		<div class="pad">Cartouche content</div>
+	</Cartouche>
+	<Cartouche stacked={true} primary="This is another cartouche">
+		{#snippet cartoucheButtons()}
+			<Button width="medium">With button</Button>
+		{/snippet}
+		<div class="pad">And some content</div>
+	</Cartouche>
+	<Cartouche primary="With an icon" stacked={true}>
+		{#snippet cartoucheIcon()}
+			<Icon iconSize="small" icon="user" />
+		{/snippet}
+		<div class="pad">And some content</div>
+	</Cartouche>
+</div>

package/dist/base/cartouche/Cartouche.preview.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  CartoucheProps */
+/** @typedef {typeof __propDef.events}  CartoucheEvents */
+/** @typedef {typeof __propDef.slots}  CartoucheSlots */
+export default class Cartouche extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type CartoucheProps = typeof __propDef.props;
+export type CartoucheEvents = typeof __propDef.events;
+export type CartoucheSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/base/cartouche/Cartouche.svelte

@@ -0,0 +1,213 @@
+<script lang="ts">import { slide } from "svelte/transition";
+import Icon from "../icon/Icon.svelte";
+import Button from "../../controls/button/Button.svelte";
+import IconButton from "../../controls/button/IconButton.svelte";
+import Slotted from "../../utils/slotted/Slotted.svelte";
+export const actions = {
+  open,
+  toggle,
+  close
+};
+let {
+  class: className = "",
+  classes = {},
+  style = void 0,
+  element = $bindable(),
+  primary,
+  secondary,
+  icon,
+  stacked = false,
+  component,
+  componentProps = {},
+  keepCartoucheContent = true,
+  showTitleDivider = false,
+  bordered = true,
+  children,
+  cartoucheIcon,
+  cartouchePrimary,
+  cartoucheSecondary,
+  cartoucheButtons,
+  isOpen = $bindable(),
+  dense,
+  tall
+} = $props();
+function open() {
+  isOpen = true;
+}
+function toggle(event) {
+  isOpen = !isOpen;
+}
+function close() {
+  isOpen = false;
+}
+const chevronIcon = !isOpen ? "chevron-down" : "chevron-up";
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class:stacked
+	bind:this={element}
+	class="cartouche {className}"
+	data-bordered={bordered ?? false}
+	{style}
+>
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class="control {classes.control} tall-{tall}" {tall} onclick={actions.toggle}>
+		{#if icon || cartoucheIcon}
+			<div class="controlIcon {classes.controlIcon}">
+				<Slotted child={cartoucheIcon}>
+					<Icon {icon} />
+				</Slotted>
+			</div>
+		{/if}
+		<div class="controlLabel {classes.controlLabel}">
+			{#if primary || cartouchePrimary}
+				<Slotted child={cartouchePrimary}>
+					{primary}
+				</Slotted>
+				<div>
+					<Slotted child={cartoucheSecondary}>
+						{secondary ?? ''}
+					</Slotted>
+				</div>
+			{/if}
+		</div>
+		<div class={showTitleDivider ? 'divider' : ''} style="flex:1" />
+		{#if cartoucheButtons}
+			<div
+				onclick={(event) => {
+					event.preventDefault();
+					event.stopPropagation();
+				}}
+				class="cartoucheAction"
+			>
+				<Slotted child={cartoucheButtons}></Slotted>
+			</div>
+		{/if}
+		<div class="chevron">
+			<IconButton variant="flat" icon={chevronIcon} />
+		</div>
+	</div>
+	{#if isOpen || keepCartoucheContent}
+		<div aria-expanded={isOpen} class="content {classes.content}" transition:slide|global>
+			{#if component}
+				<svelte:component this={component} {...componentProps} />
+			{/if}
+
+			<Slotted child={children} />
+		</div>
+	{/if}
+</div>
+
+<style>:root {
+  --cartouche-radius: var(--sld-radius-small);
+  --cartouche-control-gap: var(--sld-gap-small);
+  --cartouche-border: var(--sld-color-foreground-alpha-high);
+  --cartouche-background-color: var(--sld-color-background);
+  --cartouche-background-color-hover: var(--sld-color-background-darken-low);
+  --cartouche-divider-border: var(--sld-color-foreground-alpha-mid);
+}
+
+.cartouche {
+  border-radius: var(--cartouche-radius);
+  background-clip: padding-box;
+  overflow: hidden;
+}
+
+.cartouche[data-bordered=true] {
+  border: 1px solid var(--cartouche-border);
+}
+
+.cartouche.stacked {
+  border-radius: 0;
+}
+
+.cartouche.stacked:first-child {
+  border-top-left-radius: var(--cartouche-radius);
+  border-top-right-radius: var(--cartouche-radius);
+}
+
+.cartouche.stacked:last-child {
+  border-bottom-left-radius: var(--cartouche-radius);
+  border-bottom-right-radius: var(--cartouche-radius);
+}
+
+.cartouche .control {
+  display: flex;
+  align-items: center;
+  gap: var(--cartouche-control-gap);
+  background-color: var(--cartouche-background-color);
+  padding: auto 0.25rem;
+}
+
+.cartouche .control {
+  --preset-tall: var(--sld-tall-small);
+  min-height: var(--preset-tall-small);
+  height: var(--preset-tall-small);
+}
+
+.cartouche .control[tall=tiny], .cartouche .control.tall-tiny {
+  min-height: var(--sld-tall-tiny) !important;
+}
+
+.cartouche .control[tall=mini], .cartouche .control.tall-mini {
+  min-height: var(--sld-tall-mini) !important;
+}
+
+.cartouche .control[tall=small], .cartouche .control.tall-small {
+  min-height: var(--sld-tall-small) !important;
+}
+
+.cartouche .control[tall=med], .cartouche .control.tall-med {
+  min-height: var(--sld-tall-med) !important;
+}
+
+.cartouche .control[tall=kind], .cartouche .control.tall-kind {
+  min-height: var(--sld-tall-kind) !important;
+}
+
+.cartouche .control[tall=auto], .cartouche .control.tall-auto {
+  min-height: var(--sld-tall-auto) !important;
+}
+
+.cartouche .control[tall=default], .cartouche .control.tall-default {
+  min-height: var(--sld-tall-default) !important;
+}
+
+.cartouche .control:hover {
+  background-color: var(--cartouche-background-color-hover);
+}
+
+.cartouche .control .controlIcon {
+  display: flex;
+  align-items: center;
+  padding: 0 0.5rem;
+}
+
+.cartouche .control .controlLabel {
+  cursor: pointer;
+  padding: 0 0.5rem;
+}
+
+.cartouche .control .chevron {
+  cursor: pointer;
+}
+
+.cartouche .control .divider {
+  border-bottom: 1px solid var(--cartouche-divider-border);
+}
+
+.cartouche .content {
+  overflow: hidden;
+  background-color: var(--cartouche-background-color);
+  content-visibility: auto;
+}
+
+.cartouche .content[aria-expanded=false] {
+  display: none;
+}
+
+.cartouche .content[aria-expanded=true] {
+  border-top: 1px solid var(--cartouche-border);
+}</style>

package/dist/base/cartouche/Cartouche.svelte.d.ts

@@ -0,0 +1,55 @@
+import { SvelteComponent } from "svelte";
+import type { CartoucheClasses } from './types.js';
+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]> & import("svelte").Snippet<[]>) | undefined;
+        classes?: CartoucheClasses;
+        primary: string;
+        secondary?: string;
+        icon?: import("../../types/index.js").ElementProps["icon"];
+        stacked?: boolean;
+        component?: SvelteComponent;
+        componentProps?: Record<string, any>;
+        keepCartoucheContent?: boolean;
+        showTitleDivider?: boolean;
+        bordered?: boolean;
+        isOpen?: boolean;
+        actions?: Record<"open" | "toggle" | "close", (event: Event) => void>;
+        dense?: import("../../types/index.js").ElementProps["dense"];
+        tall?: import("../../types/index.js").ElementProps["tall"];
+        cartoucheIcon?: import("svelte").Snippet;
+        cartouchePrimary?: import("svelte").Snippet;
+        cartoucheSecondary?: import("svelte").Snippet;
+        cartoucheButtons?: import("svelte").Snippet;
+    } & {
+        actions?: {
+            open: () => void;
+            toggle: (event: Event) => void;
+            close: () => void;
+        };
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type CartoucheProps_ = typeof __propDef.props;
+export { CartoucheProps_ as CartoucheProps };
+export type CartoucheEvents = typeof __propDef.events;
+export type CartoucheSlots = typeof __propDef.slots;
+export default class Cartouche extends SvelteComponent<CartoucheProps_, CartoucheEvents, CartoucheSlots> {
+    get actions(): Record<"close" | "toggle" | "open", (event: Event) => void> & {
+        open: () => void;
+        toggle: (event: Event) => void;
+        close: () => void;
+    };
+}

package/dist/base/cartouche/cartouche.scss

@@ -0,0 +1,75 @@
+@import "../../styles/slotui-mixins.scss";
+
+:root {
+  --cartouche-radius: var(--sld-radius-small);
+  --cartouche-control-gap: var(--sld-gap-small);
+  --cartouche-border: var(--sld-color-foreground-alpha-high);
+  --cartouche-background-color: var(--sld-color-background);
+  --cartouche-background-color-hover: var(--sld-color-background-darken-low);
+  --cartouche-divider-border: var(--sld-color-foreground-alpha-mid);
+}
+
+.cartouche {
+  border-radius: var(--cartouche-radius);
+  background-clip: padding-box;
+  overflow: hidden;
+
+  &[data-bordered="true"] {
+    border: 1px solid var(--cartouche-border);
+  }
+
+  &.stacked {
+    border-radius: 0;
+    &:first-child {
+      border-top-left-radius: var(--cartouche-radius);
+      border-top-right-radius: var(--cartouche-radius);
+    }
+    &:last-child {
+      border-bottom-left-radius: var(--cartouche-radius);
+      border-bottom-right-radius: var(--cartouche-radius);
+    }
+  }
+
+  .control {
+    display: flex;
+    align-items: center;
+    gap: var(--cartouche-control-gap);
+    background-color: var(--cartouche-background-color);
+    @include ui-tall-presets;
+    padding: auto 0.25rem;
+    &:hover {
+      background-color: var(--cartouche-background-color-hover);
+    }
+
+    .controlIcon {
+      display: flex;
+      align-items: center;
+      padding: 0 0.5rem;
+    }
+
+    .controlLabel {
+      cursor: pointer;
+      padding: 0 0.5rem;
+    }
+
+    .chevron {
+      cursor: pointer;
+    }
+
+    .divider {
+      border-bottom: 1px solid var(--cartouche-divider-border);
+    }
+  }
+
+  .content {
+    overflow: hidden;
+    background-color: var(--cartouche-background-color);
+    content-visibility: auto;
+    &[aria-expanded="false"] {
+      display: none;
+    }
+    &[aria-expanded="true"] {
+      border-top: 1px solid var(--cartouche-border);
+    }
+  }
+}

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

@@ -0,0 +1,47 @@
+import { type CommonProps, type ElementProps } from '../../types/index.js';
+import type { Snippet, SvelteComponent } from 'svelte';
+import type { DemoerStoryProps } from '../demoer/types.js';
+export type CartoucheClasses = {
+    control: string;
+    controlIcon: string;
+    controlLabel: string;
+    content: string;
+};
+export type CartoucheProps = CommonProps & {
+    /** className off the root component */
+    class?: string;
+    /** classNames off the whole component */
+    classes?: CartoucheClasses;
+    /** css style off the root component */
+    style?: string;
+    /** element root HTMLDivElement props */
+    element?: HTMLDivElement;
+    /** displayed title of the cartouche */
+    primary: string;
+    /** displayed sub title of the cartouche */
+    secondary?: string;
+    icon?: ElementProps['icon'];
+    /** can be set as a prop or as a className */
+    stacked?: boolean;
+    component?: SvelteComponent;
+    componentProps?: Record<string, any>;
+    /** State of content is preserved while visibility is toggled */
+    keepCartoucheContent?: boolean;
+    /** show the title divider line */
+    showTitleDivider?: boolean;
+    /** show the default border style */
+    bordered?: boolean;
+    isOpen?: boolean;
+    /** component actions	 */
+    actions?: Record<'open' | 'toggle' | 'close', (event: Event) => void>;
+    /** @deprecated */
+    dense?: ElementProps['dense'];
+    tall?: ElementProps['tall'];
+    children?: Snippet;
+    cartoucheIcon?: Snippet;
+    cartouchePrimary?: Snippet;
+    cartoucheSecondary?: Snippet;
+    cartoucheButtons?: Snippet;
+};
+export declare const cartoucheDemoValues: DemoerStoryProps<CartoucheProps>;
+export declare let parameters: DemoerStoryProps<CartoucheProps>, componentArgs: CartoucheProps;