@medyll/idae-slotui-svelte 0.3.0

package/dist/base/avatar/types.js

@@ -0,0 +1,26 @@
+import { widthPreset, iconSize } from '../../types/index.js';
+export var statusPreset;
+(function (statusPreset) {
+    statusPreset["success"] = "success";
+    statusPreset["warning"] = "warning";
+    statusPreset["alert"] = "alert";
+    statusPreset["error"] = "error";
+    statusPreset["info"] = "info";
+    statusPreset["discrete"] = "discrete";
+})(statusPreset || (statusPreset = {}));
+import { demoerArgs } from '../demoer/demoer.utils.js';
+export const AvatarDemoValues = {
+    icon: {
+        type: 'icon',
+        default: 'user'
+    },
+    size: {
+        type: 'width',
+        default: widthPreset.med
+    },
+    iconSize: {
+        type: 'iconSize',
+        default: iconSize.medium
+    }
+};
+export let { parameters, componentArgs } = demoerArgs(AvatarDemoValues);

package/dist/base/backdrop/Backdrop.demo.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">import ComponentDemo from "../demoer/DemoerComponent.svelte";
+import Demoer from "../demoer/Demoer.svelte";
+import DemoPage from "../demoer/DemoPage.svelte";
+import { defaultsArgs } from "../demoer/demoer.utils.js";
+import Backdrop from "./Backdrop.svelte";
+import { BackdropDemoValues } from "./types.js";
+import { parameters, componentArgs } from "./types.js";
+let codeSlot = `
+	<Backdrop
+		flow="relative"
+		onclick={()=>{}}> 
+		<div class="flex-h flex-align-middle-center h-full">
+			<div class="pad-4 border radius-small theme-bg">
+				some content
+			</div>
+		</div>
+	</Backdrop>`;
+let BackdropRef;
+</script>
+
+<ComponentDemo component="Backdrop">
+	<div class="flex-v gap-medium">
+		<DemoPage code={codeSlot} component="Backdrop">
+			<Demoer {parameters} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<div style="width:350px;height:350px;position:realive;">
+						<Backdrop
+							bind:this={BackdropRef}
+							onclick={() => {
+								componentArgs.flow = 'relative';
+								BackdropRef.flow = 'relative';
+							}}
+							{...componentArgs}
+							{...activeParams}
+						>
+							<div class="flex-h flex-align-middle-center h-full">
+								<div class="pad-4 border radius-small theme-bg">some content</div>
+							</div>
+						</Backdrop>
+					</div>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/base/backdrop/Backdrop.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 BackdropProps = typeof __propDef.props;
+export type BackdropEvents = typeof __propDef.events;
+export type BackdropSlots = typeof __propDef.slots;
+export default class Backdrop extends SvelteComponent<BackdropProps, BackdropEvents, BackdropSlots> {
+}
+export {};

package/dist/base/backdrop/Backdrop.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">import { fade } from "svelte/transition";
+import Icon from "../icon/Icon.svelte";
+import Slotted from "../../utils/slotted/Slotted.svelte";
+export const actions = {
+  close: () => {
+    isOpen = false;
+  },
+  open: () => {
+    isOpen = true;
+  }
+};
+let {
+  class: className,
+  style,
+  flow = "fixed",
+  autoClose = false,
+  isOpen = $bindable(),
+  onclick,
+  isLoading = false,
+  element,
+  elementContent,
+  elementContentInner,
+  component,
+  componentProps,
+  classes = {},
+  children,
+  backdropLoading
+} = $props();
+$effect(() => {
+  element?.addEventListener("click", testAutoClose);
+  elementContentInner?.addEventListener("click", (event) => {
+    event.stopPropagation();
+  });
+});
+function testAutoClose() {
+  if (autoClose) isOpen = false;
+}
+</script>
+
+{#if isOpen}
+	<div
+		in:fade|global
+		out:fade|global
+		bind:this={element}
+		class="backdrop {className}"
+		style="position:{flow};{style}"
+		role="dialog"
+		tabindex="-1"
+	>
+		<div bind:this={elementContent} class="backdrop-content">
+			{#if isLoading}
+				<div class="backdrop-content-loader">
+					<Slotted child={backdropLoading}>
+						<Icon icon="mdi:loading" iconSize="large" rotate />
+					</Slotted>
+				</div>
+			{:else}
+				<div class="backdrop-content-inner" bind:this={elementContentInner}>
+					{#if children}
+						{@render children?.()}
+					{:else if component}
+						<svelte:component this={component} {...componentProps} />
+					{/if}
+				</div>
+			{/if}
+		</div>
+	</div>
+{/if}
+
+<style>:root {
+  --backdrop-background-color: var(--sld-color-foreground-alpha-high);
+}
+
+.backdrop {
+  z-index: 10000;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+}
+
+.backdrop-content {
+  z-index: 10001;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  background-color: var(--backdrop-background-color);
+  backdrop-filter: blur(5px);
+  --moz-backdrop-filter: blur(5px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.backdrop-content-loader {
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+}
+
+.backdrop-content-inner {
+  display: inherit;
+}</style>

package/dist/base/backdrop/Backdrop.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import type { BackdropProps } from './types.js';
+declare const __propDef: {
+    props: BackdropProps<any, any> & {
+        /** Backdrop controller */ actions?: {
+            close: () => void;
+            open: () => void;
+        };
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type BackdropProps_ = typeof __propDef.props;
+export { BackdropProps_ as BackdropProps };
+export type BackdropEvents = typeof __propDef.events;
+export type BackdropSlots = typeof __propDef.slots;
+export default class Backdrop extends SvelteComponent<BackdropProps_, BackdropEvents, BackdropSlots> {
+    get actions(): {
+        close: () => void;
+        open: () => void;
+    };
+}

package/dist/base/backdrop/backdrop.scss

@@ -0,0 +1,34 @@
+@import "../../styles/slotui-mixins.scss";
+
+:root {
+    --backdrop-background-color: var(--sld-color-foreground-alpha-high);
+}
+
+.backdrop {
+    z-index: 10000;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    &-content {
+        z-index: 10001;
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        background-color: var(--backdrop-background-color);
+        backdrop-filter: blur(5px);
+        --moz-backdrop-filter: blur(5px);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        &-loader {
+            display: flex;
+            justify-content: center;
+            align-content: center;
+            align-items: center;
+        }
+        &-inner {
+            display: inherit;
+        }
+    }
+}

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

@@ -0,0 +1,35 @@
+import type { CommonProps, ElementProps } from '../../types/index.js';
+import type { Snippet } from 'svelte';
+import type { DemoerStoryProps } from '../demoer/types.js';
+export interface BackdropProps<T = any, C = any> extends CommonProps {
+    /** backdrop class */
+    class?: string;
+    /** backdrop style */
+    style?: string;
+    /**
+            css position mode of the backdrop
+            @type {'absolute' | 'fixed' | 'relative'}
+        */
+    flow?: ElementProps['flow'];
+    /** auto-close backdrop on click */
+    autoClose?: boolean;
+    /** show or hide the backdrop */
+    isOpen?: boolean;
+    /** if in loading state, it will show a loading icon or $$slots.loadingSlot */
+    isLoading?: boolean;
+    element?: HTMLDivElement;
+    elementContent?: HTMLDivElement;
+    elementContentInner?: HTMLDivElement;
+    component?: C;
+    componentProps?: Record<string, any>;
+    classes?: {
+        backdrop?: string;
+        backdropContent?: string;
+        backdropContentInner?: string;
+    };
+    onclick?: (event: MouseEvent) => void;
+    children?: Snippet;
+    backdropLoading?: Snippet;
+}
+export declare const BackdropDemoValues: DemoerStoryProps<BackdropProps>;
+export declare let parameters: DemoerStoryProps<BackdropProps<any, any>>, componentArgs: BackdropProps<any, any>;

package/dist/base/backdrop/types.js

@@ -0,0 +1,20 @@
+import { demoerArgs } from '../demoer/demoer.utils.js';
+export const BackdropDemoValues = {
+    isOpen: {
+        type: 'boolean',
+        default: true
+    },
+    autoClose: {
+        type: 'boolean',
+        default: true
+    },
+    isLoading: {
+        type: 'boolean',
+        default: false
+    },
+    flow: {
+        type: 'flow',
+        default: 'fixed'
+    }
+};
+export let { parameters, componentArgs } = demoerArgs(BackdropDemoValues);

package/dist/base/backdrop/useBackDrop.d.ts

@@ -0,0 +1,7 @@
+import type { SvelteComponent } from 'svelte';
+export type UseBackDropProps = {
+    component?: SvelteComponent | any;
+    componentProps?: {};
+    parentNode?: HTMLElement | any;
+};
+export declare const backdrop: (node: HTMLElement, props?: UseBackDropProps) => void;

package/dist/base/backdrop/useBackDrop.js

@@ -0,0 +1 @@
+export const backdrop = (node, props) => { };

package/dist/base/badge/Badge.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">import Slotted from "../../utils/slotted/Slotted.svelte";
+let {
+  value,
+  ceiling,
+  element,
+  position = { x: "right", y: "top" },
+  children
+} = $props();
+const xM = {
+  left: "left:0",
+  right: "right:0",
+  center: "left:50%;transformation:translate(-50%,0)"
+};
+const yM = {
+  top: "top:0",
+  bottom: "bottom:0",
+  center: "top:50%;transformation:translate(0,-50%)"
+};
+</script>
+
+{#if value > ceiling}
+	<div bind:this={element} class="badge" style="{xM[position.x]};{yM[position.y]}">
+		<Slotted child={children}>{value}</Slotted>
+	</div>
+{/if}
+
+<style>:root {
+  --badge-color-border: var(--sld-color-border);
+}
+
+.badge {
+  position: absolute;
+  border-radius: 50%;
+  border: 1px solid var(--badge-color-border);
+  display: grid;
+  place-items: center;
+  width: 16px;
+  height: 16px;
+}
+
+.badge .hidden {
+  transform: scale(0, 0);
+}</style>

package/dist/base/badge/Badge.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import type { BadgeProps } from './types.js';
+declare const __propDef: {
+    props: BadgeProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type BadgeProps_ = typeof __propDef.props;
+export { BadgeProps_ as BadgeProps };
+export type BadgeEvents = typeof __propDef.events;
+export type BadgeSlots = typeof __propDef.slots;
+export default class Badge extends SvelteComponent<BadgeProps_, BadgeEvents, BadgeSlots> {
+}

package/dist/base/badge/badge.scss

@@ -0,0 +1,19 @@
+@import "../../styles/slotui-mixins.scss";
+
+:root {
+  --badge-color-border: var(--sld-color-border);
+}
+
+.badge {
+  position: absolute;
+  border-radius: 50%;
+  border: 1px solid var(--badge-color-border);
+  display: grid;
+  place-items: center;
+  width: 16px;
+  height: 16px;
+
+  .hidden {
+    transform: scale(0, 0);
+  }
+}

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

@@ -0,0 +1,14 @@
+import type { CommonProps } from '../../types/index.js';
+export interface BadgeProps extends CommonProps {
+    value: number;
+    ceiling: number;
+    element: HTMLDivElement;
+    /**
+     * position of the badge
+     * @type {{ x: 'left' | 'right' | 'center'; y: 'top' | 'bottom' | 'center' }}
+     */
+    position: {
+        x: 'left' | 'right' | 'center';
+        y: 'top' | 'bottom' | 'center';
+    };
+}

package/dist/base/badge/types.js

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

package/dist/base/box/Box.demo.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">import Box from "./Box.svelte";
+import Icon from "../icon/Icon.svelte";
+import ComponentDemo from "../demoer/DemoerComponent.svelte";
+import Demoer from "../demoer/Demoer.svelte";
+import DemoPage from "../demoer/DemoPage.svelte";
+import { BoxDemoValues } from "./types.js";
+import { defaultsArgs } from "../demoer/demoer.utils.js";
+import { parameters, componentArgs } from "./types.js";
+let code = `
+<Box>
+	{#snippet titleBarTitle()}
+		<span>Title of the box</span>
+	{/snippet}
+	{#snippet titleBarIcon()}
+		<Icon fontSize="small" icon="clock" />
+	{/snippet}
+	{#snippet boxBottomZone()}
+		<div class="flex-h gap-small pad border-t marg-ii-1">bottom zoone</div>
+	{/snippet}
+	{#snippet children()}
+		<div class="pad-2">Content of the box</div>
+	{/snippet}
+</Box>`;
+</script>
+
+<ComponentDemo
+	component="Box"
+	cite="Boxes, essentially, contain other boxes. That's the meaning we'll found if open them<br /> B. Franklin,1854"
+	><div class="flex-v gap-medium">
+		<DemoPage {code} component="Box">
+			<Demoer {parameters} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<Box {...activeParams}>
+						{#snippet titleBarTitle()}
+							<span>Title of the box</span>
+						{/snippet}
+						{#snippet titleBarIcon()}
+							<Icon iconSize="small" icon="clock" />
+						{/snippet}
+						{#snippet boxBottomZone()}
+							<div class="flex-h gap-small pad border-t marg-ii-1">bottom zoone</div>
+						{/snippet}
+						{#snippet children()}
+							<div class="pad-2">Content of the box</div>
+						{/snippet}
+					</Box>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/base/box/Box.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 BoxProps = typeof __propDef.props;
+export type BoxEvents = typeof __propDef.events;
+export type BoxSlots = typeof __propDef.slots;
+export default class Box extends SvelteComponent<BoxProps, BoxEvents, BoxSlots> {
+}
+export {};

package/dist/base/box/Box.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">import TitleBar from "../titleBar/TitleBar.svelte";
+import Icon from "../icon/Icon.svelte";
+import Slotted from "../../utils/slotted/Slotted.svelte";
+import Content from "../../utils/content/Content.svelte";
+export const actions = {
+  open,
+  toggle,
+  close
+};
+let {
+  class: className = "",
+  element = $bindable(),
+  style = "",
+  isOpen = $bindable(true),
+  showCloseControl = true,
+  hasMenu = false,
+  title,
+  icon,
+  content,
+  bottomZone,
+  children,
+  titleBarTitle,
+  titleBarIcon,
+  boxBottomZone,
+  ...rest
+} = $props();
+function open() {
+  isOpen = true;
+}
+function toggle() {
+  isOpen = !isOpen;
+}
+function close() {
+  isOpen = false;
+}
+let closer = !showCloseControl ? {} : { onClose: () => actions.close() };
+</script>
+
+{#if isOpen}
+	<Content bind:element class="box {className}" {style} {...rest}>
+		<TitleBar {hasMenu} {...closer}>
+			<Slotted child={titleBarTitle}>
+				{title ?? ''}
+			</Slotted>
+			<Slotted child={titleBarIcon}>
+				{#if icon}
+					<Icon {icon} />
+				{/if}
+			</Slotted>
+		</TitleBar>
+		<div class="box-content">
+			<Slotted child={children}>
+				{@html content ?? ''}
+			</Slotted>
+		</div>
+		<div class="box-button-zone">
+			<Slotted child={boxBottomZone}>
+				{@html bottomZone ?? ''}
+			</Slotted>
+		</div>
+	</Content>
+{/if}
+
+<style>:root {
+  --box-color-background: var(--sld-color-background);
+  --box-border-bottom: var(--sld-color-primary);
+  --box-radius: var(--sld-radius-small);
+  --box-elevation: var(--sld-elevation-3);
+  --box-gap: var(--sld-gap-tiny);
+  --box-pad: var(--sld-pad-small);
+}
+
+.box {
+  min-height: 160px;
+  min-width: 320px;
+  background-color: var(--box-color-background);
+  border-bottom: 1px solid var(--box-border-bottom);
+  border-radius: var(--box-radius);
+  box-shadow: var(--box-elevation);
+  display: flex;
+  flex-direction: column;
+}
+
+.box-content {
+  flex: 1;
+}
+
+.box-button-zone {
+  display: flex;
+  gap: var(--box-gap);
+  padding: var(--box-pad);
+  text-align: right;
+  justify-content: end;
+}</style>

package/dist/base/box/Box.svelte.d.ts

@@ -0,0 +1,46 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        element?: HTMLDivElement;
+        style?: string;
+        isOpen: boolean;
+        showCloseControl: boolean;
+        hasMenu: boolean;
+        title: string;
+        icon: string;
+        content: string;
+        bottomZone?: string;
+        children?: import("svelte").Snippet;
+        boxBottomZone?: import("svelte").Snippet;
+        titleBarTitle?: import("svelte").Snippet;
+        titleBarIcon?: import("svelte").Snippet;
+        'anchor-for'?: string;
+        class?: string;
+        container?: `inline` | `size` | `normal`;
+        hideMaxWidth?: string;
+        hideMaxHeight?: string;
+        hideMinWidth?: string;
+        hideMinHeight?: string;
+    } & {
+        /** box actions */ actions?: {
+            open: () => void;
+            toggle: () => void;
+            close: () => void;
+        };
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type BoxProps_ = typeof __propDef.props;
+export { BoxProps_ as BoxProps };
+export type BoxEvents = typeof __propDef.events;
+export type BoxSlots = typeof __propDef.slots;
+export default class Box extends SvelteComponent<BoxProps_, BoxEvents, BoxSlots> {
+    get actions(): {
+        open: () => void;
+        toggle: () => void;
+        close: () => void;
+    };
+}

package/dist/base/box/box.scss

@@ -0,0 +1,33 @@
+@import "../../styles/slotui-mixins.scss";
+
+:root {
+  --box-color-background: var(--sld-color-background);
+  --box-border-bottom: var(--sld-color-primary);
+  --box-radius: var(--sld-radius-small);
+  --box-elevation: var(--sld-elevation-3);
+  --box-gap: var(--sld-gap-tiny);
+  --box-pad: var(--sld-pad-small);
+}
+
+.box {
+  min-height: 160px;
+  min-width: 320px;
+  background-color: var(--box-color-background);
+  border-bottom: 1px solid var(--box-border-bottom);
+  border-radius: var(--box-radius);
+  box-shadow: var(--box-elevation);
+  display: flex;
+  flex-direction: column;
+
+  &-content {
+    flex: 1;
+  }
+
+  &-button-zone {
+    display: flex;
+    gap: var(--box-gap);
+    padding: var(--box-pad);
+    text-align: right;
+    justify-content: end;
+  }
+}