@medyll/idae-slotui-svelte 0.3.0

package/dist/base/divider/divider.scss

@@ -0,0 +1,19 @@
+@import "../../styles/slotui-mixins.scss";
+
+:root {
+  --divider-border-top: var(--sld-color-border, var(--sld-color-foreground-alpha-high, #333));
+  --divider-background-color: var(--sld-color-border, var(--sld-color-foreground-alpha-mid, #333));
+  --divider-border-right: var(--sld-color-border, var(--sld-color-foreground-alpha-mid, #333));
+}
+
+hr {
+  border: none;
+  border-top: 1px solid var(--divider-border-top);
+  background-color: var(--divider-background-color);
+  display: block;
+
+  &.vertical {
+    width: 1px;
+    border-right: 1px solid var(--divider-border-right);
+  }
+}

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

@@ -0,0 +1,30 @@
+import { type ElementProps } from '../../types/index.js';
+import type { DemoerStoryProps } from '../demoer/types.js';
+export type DividerProps = {
+    /** className off the root component */
+    class?: string;
+    /** css style off the root component */
+    style?: CSSStyleDeclaration;
+    /** element root HTMLDivElement props */
+    element?: HTMLDivElement | null;
+    /**
+     * margins and with applied to divider
+     */
+    dense?: ElementProps['dense'];
+    /**
+     * default direction of the divider
+     * @type {'vertical' | 'horizontal'}
+     */
+    orientation?: ElementProps['orientation'];
+    /**
+     * expansion of the divider
+     * @type {'full' | 'padded' | 'centered'}
+     */
+    expansion?: 'full' | 'padded' | 'centered';
+    /** give shadow to divider */
+    shadowed?: boolean;
+    /** give color to divider */
+    color?: string | null;
+};
+export declare const DividerDemoValues: DemoerStoryProps<DividerProps>;
+export declare let parameters: DemoerStoryProps<DividerProps>, componentArgs: DividerProps;

package/dist/base/divider/types.js

@@ -0,0 +1,22 @@
+import { densePreset, uiPresets } from '../../types/index.js';
+import { demoerArgs } from '../demoer/demoer.utils.js';
+export const DividerDemoValues = {
+    dense: {
+        type: 'dense',
+        default: densePreset.default
+    },
+    orientation: {
+        type: 'direction'
+    },
+    expansion: {
+        type: 'string',
+        values: ['full', 'padded', 'centered']
+    },
+    shadowed: {
+        type: 'boolean'
+    },
+    color: {
+        type: 'color'
+    }
+};
+export let { parameters, componentArgs } = demoerArgs(DividerDemoValues);

package/dist/base/icon/Icon.demo.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">import ComponentDemo from "../demoer/DemoerComponent.svelte";
+import { DemoPage, Demoer } from "../../index.js";
+import Icon from "./Icon.svelte";
+import { parameters, componentArgs } from "./types.js";
+let code = `
+<Icon>
+    mdi:tree
+</Icon>`;
+</script>
+
+<ComponentDemo component="Icon" cite="The icon is the window to the soul of the app">
+	<div class="flex-v gap-small">
+		<DemoPage component="Icon" {code}>
+			<Demoer {parameters} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<Icon {...activeParams} />
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/base/icon/Icon.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 IconProps = typeof __propDef.props;
+export type IconEvents = typeof __propDef.events;
+export type IconSlots = typeof __propDef.slots;
+export default class Icon extends SvelteComponent<IconProps, IconEvents, IconSlots> {
+}
+export {};

package/dist/base/icon/Icon.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">import { iconFontSize } from "../../types/index.js";
+import Iconify from "@iconify/svelte";
+let {
+  icon = $bindable("question"),
+  class: className,
+  style,
+  element = $bindable(),
+  iconSize = $bindable(),
+  rotate = false,
+  color = $bindable(),
+  rotation = 0,
+  ico,
+  ...rest
+} = $props();
+iconSize = iconSize || "small";
+const sizes = iconFontSize;
+let finalI = $derived(ico?.icon ?? (typeof icon === "object" ? icon.icon : icon));
+let finRot = $derived(ico?.rotate ?? (typeof icon === "object" ? icon.rotate : rotate));
+let finRotation = $derived(
+  ico?.rotation ?? (typeof icon === "object" ? icon.rotation : rotation)
+);
+let finCol = $derived(ico?.color ?? (typeof icon === "object" ? icon.color : color));
+let finSize = $derived(ico?.iconSize ?? (typeof icon === "object" ? iconSize : iconSize));
+let iconName = $derived(finalI.includes(":") ? finalI : `mdi:${finalI}`);
+let finalStyle = $derived(
+  `display:block;font-size:${sizes[finSize]};color:${finCol};transform: rotate(${finRotation}deg);${style};`
+);
+</script>
+
+{#key [icon, iconName, color, finalStyle]}
+	<Iconify
+		bind:this={element}
+		class="icon medium {className} {finRot ? 'rotate' : ''}"
+		style={finalStyle}
+		icon={iconName}
+		{...rest}
+	/>
+{/key}
+
+<style>:global(.icon) {
+  transition: all 0.2;
+}
+
+.rotate {
+  animation: spinner-frames 3s infinite linear;
+}
+
+@keyframes spinner-frames {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}</style>

package/dist/base/icon/Icon.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+import { type ElementProps } from '../../types/index.js';
+declare const __propDef: {
+    props: {
+        icon?: ElementProps["icon"];
+        class?: string;
+        style?: string;
+        element?: HTMLDivElement | null | any;
+        ico?: import("../../types/index.js").IconObj;
+        iconSize?: ElementProps["iconSize"];
+        rotate?: boolean;
+        color?: string;
+        rotation?: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type IconProps = typeof __propDef.props;
+export type IconEvents = typeof __propDef.events;
+export type IconSlots = typeof __propDef.slots;
+export default class Icon extends SvelteComponent<IconProps, IconEvents, IconSlots> {
+}
+export {};

package/dist/base/icon/icon.scss

@@ -0,0 +1,17 @@
+@import "../../styles/slotui-mixins.scss";
+
+:global(.icon) {
+	transition: all 0.2;
+}
+
+.rotate {
+	animation: spinner-frames 3s infinite linear;
+}
+@keyframes spinner-frames {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}

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

@@ -0,0 +1,24 @@
+import type { ElementProps, IconObj } from '../../types/index.js';
+import type { DemoerStoryProps } from '../demoer/types.js';
+export type IconAppProps = {
+    /** icon name for iconify  */
+    icon?: ElementProps['icon'];
+    /** className off the root component */
+    class?: string;
+    /** css style off the root component */
+    style?: string;
+    /** element root HTMLDivElement props */
+    element?: HTMLDivElement | null | any;
+    /** icon object for iconify, replace and invalidate props.icon  */
+    ico?: IconObj;
+    /**  icon size 	 */
+    iconSize?: ElementProps['iconSize'];
+    /** rotate icon */
+    rotate?: boolean;
+    /** icon color */
+    color?: string;
+    /** icon rotation */
+    rotation?: number;
+};
+export declare const iconAppDemoValues: DemoerStoryProps<IconAppProps>;
+export declare let parameters: DemoerStoryProps<IconAppProps>, componentArgs: IconAppProps;

package/dist/base/icon/types.js

@@ -0,0 +1,21 @@
+import { demoerArgs } from '../demoer/demoer.utils.js';
+export const iconAppDemoValues = {
+    icon: {
+        type: 'icon',
+        default: 'user'
+    },
+    iconSize: {
+        type: 'iconSize'
+    },
+    color: {
+        type: 'color'
+    },
+    rotation: {
+        type: 'number',
+        values: [0, 45, 90, 180, 270]
+    },
+    rotate: {
+        type: 'boolean'
+    }
+};
+export let { parameters, componentArgs } = demoerArgs(iconAppDemoValues);

package/dist/base/paper/Paper.demo.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">import ComponentDemo from "../demoer/DemoerComponent.svelte";
+import DemoPage from "../demoer/DemoPage.svelte";
+import Demoer from "../demoer/Demoer.svelte";
+import { defaultsArgs } from "../demoer/demoer.utils.js";
+import Paper from "./Paper.svelte";
+import { paperDemoValues } from "./type.js";
+let parameters = paperDemoValues;
+let componentArgs = defaultsArgs(parameters);
+let code = `
+<Paper elevation="2" style="height:350px;width:250px" >
+    paper content
+</Paper>`;
+</script>
+
+<ComponentDemo
+	component="Paper"
+	cite="What is separating before from after is not a time nor a place : it's only a component <br /> B. Franklin, 1854"
+>
+	<div class=" flex-v gap-small">
+		<DemoPage component="Paper" {code}>
+			<Demoer {parameters} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<Paper {...activeParams} style="height:350px;width:250px" />
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/base/paper/Paper.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: {};
+};
+type PaperProps_ = typeof __propDef.props;
+export { PaperProps_ as PaperProps };
+export type PaperEvents = typeof __propDef.events;
+export type PaperSlots = typeof __propDef.slots;
+export default class Paper extends SvelteComponent<PaperProps_, PaperEvents, PaperSlots> {
+}

package/dist/base/paper/Paper.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">import Slotted from "../../utils/slotted/Slotted.svelte";
+let {
+  class: className = "",
+  style,
+  element = $bindable(),
+  children,
+  elevation = 0,
+  ...rest
+} = $props();
+</script>
+
+<div bind:this={element} class="paper {className} elevation-{elevation}" {style} {...rest}>
+	<Slotted child={children} />
+</div>
+
+<style>:root {
+  --paper-radius: var(--sld-radius-small);
+  --paper-border: var(--sld-color-foreground-alpha-high);
+  --paper-background-color: var(--sld-color-paper);
+  --paper-background-color-hover: var(--sld-color-paper-darken-low);
+}
+
+.paper {
+  color: var(--paper-border);
+  background-color: var(--paper-background-color);
+  border-radius: var(--paper-radius);
+}
+
+.paper.elevation-0, .paper[elevation-0] {
+  box-shadow: var(--sld-elevation-0);
+}
+
+.paper.elevation-through, .paper[elevation-through] {
+  box-shadow: var(--sld-elevation-through);
+}
+
+.paper.elevation-5, .paper[elevation-5] {
+  box-shadow: var(--sld-elevation-5);
+}</style>

package/dist/base/paper/Paper.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string;
+        style?: string;
+        element?: (HTMLDivElement & HTMLElement) | undefined;
+        elevation?: number;
+        children?: (import("svelte").Snippet<[]> & import("svelte").Snippet<[any]>) | undefined;
+        'anchor-for'?: string;
+        container?: `inline` | `size` | `normal`;
+        hideMaxWidth?: string;
+        hideMaxHeight?: string;
+        hideMinWidth?: string;
+        hideMinHeight?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type PaperProps_ = typeof __propDef.props;
+export { PaperProps_ as PaperProps };
+export type PaperEvents = typeof __propDef.events;
+export type PaperSlots = typeof __propDef.slots;
+export default class Paper extends SvelteComponent<PaperProps_, PaperEvents, PaperSlots> {
+}

package/dist/base/paper/paper.scss

@@ -0,0 +1,15 @@
+@import "../../styles/slotui-mixins.scss";
+
+:root {
+    --paper-radius: var(--sld-radius-small);
+    --paper-border: var(--sld-color-foreground-alpha-high);
+    --paper-background-color: var(--sld-color-paper);
+    --paper-background-color-hover: var(--sld-color-paper-darken-low);
+}
+
+.paper {
+    color: var(--paper-border);
+    background-color: var(--paper-background-color);
+    border-radius: var(--paper-radius);
+    @include elevation();
+}

package/dist/base/paper/type.d.ts

@@ -0,0 +1,16 @@
+import type { CommonProps } from '../../types/index.js';
+import type { Snippet } from 'svelte';
+import type { DemoerStoryProps } from '../demoer/types.js';
+export type PaperProps = {
+    /** className off the root component */
+    class?: string;
+    /** css style off the root component */
+    style?: string;
+    /** element root HTMLDivElement props */
+    element?: HTMLDivElement | null;
+    /** from 0 to 5 */
+    elevation?: number;
+    children?: Snippet;
+} & CommonProps;
+export declare const paperDemoValues: DemoerStoryProps<PaperProps>;
+export declare let parameters: DemoerStoryProps<PaperProps>, componentArgs: PaperProps;

package/dist/base/paper/type.js

@@ -0,0 +1,8 @@
+import { demoerArgs } from '../demoer/demoer.utils.js';
+export const paperDemoValues = {
+    elevation: {
+        type: 'elevation',
+        default: 0
+    }
+};
+export let { parameters, componentArgs } = demoerArgs(paperDemoValues);

package/dist/base/titleBar/TitleBar.demo.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">import { titleBarDemoValues } from "./types.js";
+import { defaultsArgs } from "../demoer/demoer.utils.js";
+import ComponentDemo from "../demoer/DemoerComponent.svelte";
+import DemoPage from "../demoer/DemoPage.svelte";
+import Demoer from "../demoer/Demoer.svelte";
+import TitleBar from "./TitleBar.svelte";
+let parameters = titleBarDemoValues;
+let componentArgs = defaultsArgs(parameters);
+let code = `
+    <TitleBar {...activeParams} class="marg-tb-1">
+        {#snippet titleBarIcon()}
+            <Icon fontSize="small" icon="circle" />
+        {/snippet}
+        {#snippet titleBarTitle()}
+            This is a title bar
+        {/snippet}
+    </TitleBar>`;
+</script>
+
+<ComponentDemo component="TitleBar" cite="The title bar is the window to the soul of the app">
+	<DemoPage component="TitleBar" {code}>
+		<Demoer {parameters} {componentArgs}>
+			{#snippet children({ activeParams })}
+				<TitleBar {...activeParams} />
+			{/snippet}
+		</Demoer>
+	</DemoPage>
+</ComponentDemo>

package/dist/base/titleBar/TitleBar.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 TitleBarProps = typeof __propDef.props;
+export type TitleBarEvents = typeof __propDef.events;
+export type TitleBarSlots = typeof __propDef.slots;
+export default class TitleBar extends SvelteComponent<TitleBarProps, TitleBarEvents, TitleBarSlots> {
+}
+export {};

package/dist/base/titleBar/TitleBar.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">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";
+let {
+  onClose,
+  hasMenu = false,
+  icon,
+  title,
+  titleBarIcon,
+  titleBarTitle
+} = $props();
+</script>
+
+<div class="title-bar">
+	<div class="title-bar-content">
+		<div class="title-bar-content-icon">
+			<Slotted child={titleBarIcon}><Icon iconSize="small" {icon} /></Slotted>
+		</div>
+		<div class="title-bar-content-title">
+			<Slotted child={titleBarTitle}>
+				{title}
+			</Slotted>
+		</div>
+	</div>
+	{#if hasMenu}
+		<div class="title-bar-menu">
+			<!--<ButtonAction/>-->
+		</div>
+	{/if}
+	{#if Boolean(onClose)}
+		<IconButton onclick={onClose} variant="naked" icon="window-close" width={'mini'} />
+	{/if}
+</div>
+
+<style global>:root {
+  --title-bar-gap: var(--sld-gap-med);
+  --title-bar-pad: var(--sld-pad-med);
+  --title-bar-color-border-bottom: var(--sld-color-border);
+}
+
+.title-bar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-bottom: 1px solid var(--title-bar-color-border-bottom);
+}
+
+.title-bar-content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--title-bar-gap);
+  min-height: 34px;
+  flex: 1;
+}
+
+.title-bar-content-icon {
+  padding: var(--title-bar-pad);
+}
+
+.title-bar-content-title {
+  flex: 1;
+}</style>

package/dist/base/titleBar/TitleBar.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        title: string;
+        readonly onClose?: () => void;
+        hasMenu?: boolean;
+        icon?: import("../../types/index.js").ElementProps["icon"];
+        titleBarIcon?: import("svelte").Snippet;
+        titleBarTitle?: import("svelte").Snippet;
+        children?: import("svelte").Snippet;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type TitleBarProps_ = typeof __propDef.props;
+export { TitleBarProps_ as TitleBarProps };
+export type TitleBarEvents = typeof __propDef.events;
+export type TitleBarSlots = typeof __propDef.slots;
+export default class TitleBar extends SvelteComponent<TitleBarProps_, TitleBarEvents, TitleBarSlots> {
+}

package/dist/base/titleBar/title-bar.scss

@@ -0,0 +1,27 @@
+@import "../../styles/slotui-mixins.scss";
+
+:root {
+    --title-bar-gap: var(--sld-gap-med);
+    --title-bar-pad: var(--sld-pad-med);
+    --title-bar-color-border-bottom: var(--sld-color-border);
+}
+
+.title-bar {
+    @include flex(row, center);
+    &-content {
+        @include flex(row, center);
+        gap: var(--title-bar-gap);
+        min-height: 34px;
+        flex: 1;
+
+        &-icon {
+            padding: var(--title-bar-pad);
+        }
+
+        &-title {
+            flex: 1;
+        }
+    }
+
+    border-bottom: 1px solid var(--title-bar-color-border-bottom);
+}

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

@@ -0,0 +1,17 @@
+import type { ElementProps } from '../../types/index.js';
+import type { Snippet } from 'svelte';
+import type { DemoerStoryProps } from '../demoer/types.js';
+export type TitleBarProps = {
+    title: string;
+    /** Function to be called when the close button is clicked */
+    readonly onClose?: () => void;
+    /** Determines if the title bar has a menu */
+    hasMenu?: boolean;
+    /** Icon to be displayed in the title bar */
+    icon?: ElementProps['icon'];
+    titleBarIcon?: Snippet;
+    titleBarTitle?: Snippet;
+    children?: Snippet;
+};
+export declare const titleBarDemoValues: DemoerStoryProps<TitleBarProps>;
+export declare let parameters: DemoerStoryProps<TitleBarProps>, componentArgs: TitleBarProps;

package/dist/base/titleBar/types.js

@@ -0,0 +1,18 @@
+import { demoerArgs } from '../demoer/demoer.utils.js';
+export const titleBarDemoValues = {
+    onClose: {
+        type: 'function',
+        values: [() => console.log('close')]
+    },
+    hasMenu: {
+        type: 'boolean'
+    },
+    icon: {
+        type: 'icon'
+    },
+    title: {
+        type: 'string',
+        values: ['Title', 'Title 2', 'Title 3']
+    }
+};
+export let { parameters, componentArgs } = demoerArgs(titleBarDemoValues);

package/dist/componentCite.d.ts

@@ -0,0 +1 @@
+export declare const componentCite: Record<string, any>;