@medyll/idae-slotui-svelte 0.3.0

package/dist/ui/toast/Toaster.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        toasterId?: string;
+        children: unknown;
+    } & Record<string, unknown>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ToasterProps = typeof __propDef.props;
+export type ToasterEvents = typeof __propDef.events;
+export type ToasterSlots = typeof __propDef.slots;
+export default class Toaster extends SvelteComponent<ToasterProps, ToasterEvents, ToasterSlots> {
+}
+export {};

package/dist/ui/toast/store.d.ts

@@ -0,0 +1,4 @@
+import { type Writable } from 'svelte/store';
+import type { ToastType } from './types.js';
+export type ToastStoreType = Writable<Record<string, ToastType>>;
+export declare const toastStore: ToastStoreType;

package/dist/ui/toast/store.js

@@ -0,0 +1,2 @@
+import { writable } from 'svelte/store';
+export const toastStore = writable({});

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

@@ -0,0 +1,26 @@
+import type { CommonProps } from '../../types/index.js';
+import type { Snippet, SvelteComponent } from 'svelte';
+export type ToastProps = CommonProps & {
+    /** Unique ID for the toast */
+    toastId?: string;
+    /** Toast will safe close after delay */
+    autoClose?: boolean;
+    /** Default delay in milliseconds before auto closing  */
+    autoCloseDelay?: number;
+    /** Component to be rendered in the toast */
+    component?: SvelteComponent;
+    /** Props for the component to be rendered in the toast */
+    componentProps?: any;
+    /** ID of the toaster */
+    toasterId?: string;
+    element?: HTMLDivElement;
+    /** Children snippet for the default content */
+    children?: Snippet;
+};
+export type ToastType = {
+    toastId?: any;
+    autoClose?: boolean;
+    autoCloseDelay?: number;
+    component?: SvelteComponent;
+    componentProps?: any;
+};

package/dist/ui/toast/types.js

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

package/dist/ui/toggleBar/ToggleBar.demo.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">import Button from "../../controls/button/Button.svelte";
+import ToggleBar from "./ToggleBar.svelte";
+import { defaultsArgs } from "../../base/demoer/demoer.utils.js";
+import ComponentDemo from "../../base/demoer/DemoerComponent.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 Finder from "../../data/finder/Finder.svelte";
+let parametersSlot = {
+  open: {
+    type: "boolean",
+    values: [true, false]
+  },
+  flow: {
+    type: "preset-flow",
+    values: uiPresets.flow
+  },
+  showHandle: {
+    type: "boolean",
+    values: [true, false]
+  },
+  closeOnValidate: {
+    type: "boolean",
+    values: [true, false]
+  },
+  hideAcceptButton: {
+    type: "boolean",
+    values: [false, true]
+  },
+  hideCloseButton: {
+    type: "boolean",
+    values: [false, true]
+  },
+  hideCancelButton: {
+    type: "boolean",
+    values: [true, false]
+  }
+};
+let multiple = {
+  orientation: {
+    right: { orientation: "right" },
+    left: { orientation: "left" }
+  }
+};
+$: componentArgsSlot = {
+  ...defaultsArgs(parametersSlot),
+  title: "A toggle bar",
+  onClose: () => {
+    componentArgsSlot.open = !componentArgsSlot.open;
+  },
+  data: [
+    { id: 1, name: "name" },
+    { id: 2, name: "name" },
+    { id: 3, name: "name" },
+    { id: 4, name: "name" }
+  ]
+};
+let codeSlot = `
+<ToggleBar style="width:350px;" {...activeParams}>
+	{#snippet toggleBarIcon()}
+		<Icon icon="carbon:progress-bar" />
+	{/snippet}
+	{#snippet toggleBarButtons()}
+		<div><Button>button</Button></div>
+		<div><Button>button</Button></div>
+	{/snippet}
+	{#snippet contentSwitcherIcon()}
+		<Button ratio="1/1" icon="search" />
+	{/snippet}
+	{#snippet contentSwitcherReveal()}
+		<Finder styleRoot="width:100%;" size="full" showSortMenu={true} />
+	{/snippet}
+</ToggleBar>
+`;
+let codeProps = ` `;
+</script>
+
+<ComponentDemo component="ToggleBar">
+	<div class="flex-v gap-large">
+		<DemoPage code={codeSlot} component="ToggleBar">
+			<Demoer {multiple} parameters={parametersSlot} componentArgs={componentArgsSlot}
+				>{#snippet children({ activeParams })}
+					<div class="pad pos-rel">
+						<ToggleBar style="width:350px;" {...activeParams}>
+							{#snippet toggleBarIcon()}
+								<Icon icon="carbon:progress-bar" />
+							{/snippet}
+							{#snippet toggleBarButtons()}
+								<div><Button>button</Button></div>
+								<div><Button>button</Button></div>
+							{/snippet}
+							{#snippet contentSwitcherIcon()}
+								<Button ratio="1/1" icon="search" />
+							{/snippet}
+							{#snippet contentSwitcherReveal()}
+								<Finder styleRoot="width:100%;" size="full" showSortMenu={true} />
+							{/snippet}
+						</ToggleBar>
+					</div>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/ui/toggleBar/ToggleBar.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 ToggleBarProps = typeof __propDef.props;
+export type ToggleBarEvents = typeof __propDef.events;
+export type ToggleBarSlots = typeof __propDef.slots;
+export default class ToggleBar extends SvelteComponent<ToggleBarProps, ToggleBarEvents, ToggleBarSlots> {
+}
+export {};

package/dist/ui/toggleBar/ToggleBar.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">import ContentSwitcher from "../../base/contentSwitcher/ContentSwitcher.svelte";
+import Icon from "../../base/icon/Icon.svelte";
+import Slotted from "../../utils/slotted/Slotted.svelte";
+let {
+  class: className = "",
+  style,
+  title,
+  icon,
+  contentSwitcherProps = {
+    icon: "search"
+  },
+  orientation = $bindable("right"),
+  element = $bindable(),
+  toggleBarIcon,
+  toggleBarTitle,
+  toggleBarButtons,
+  contentSwitcherReveal,
+  contentSwitcherIcon,
+  children,
+  ...rest
+} = $props();
+const posTitle = orientation === "right" ? 1 : 3;
+const posCloser = orientation === "right" ? 3 : 1;
+</script>
+
+<div bind:this={element} class="toggle-bar {className}" {style} {...rest}>
+	{#if toggleBarIcon || icon}
+		<div class="toggle-bar-icon">
+			<Slotted child={toggleBarIcon}>
+				<Icon {icon} />
+			</Slotted>
+		</div>
+	{/if}
+	<div class="toggle-bar-title" style="order:{posTitle};">
+		{#if toggleBarTitle || Boolean(title)}
+			<Slotted child={toggleBarTitle}>
+				<div class="toggle-bar-title-content">
+					<h5 class="text-ellipsis">{title}</h5>
+				</div>
+			</Slotted>
+		{/if}
+	</div>
+	<div class="toggle-bar-content" style="order:2;">
+		<Slotted child={toggleBarButtons} />
+	</div>
+	<div style="order:{posCloser}">
+		<ContentSwitcher parent={element} {...contentSwitcherProps}>
+			<Slotted child={contentSwitcherIcon} />
+			<Slotted child={contentSwitcherReveal} />
+		</ContentSwitcher>
+	</div>
+</div>
+
+<style>:root {
+  --toggle-bar-padding: var(--sld-commandbar-padding, var(--box-density-1));
+  --toggle-bar-border-bottom: var(--sld-topbar-border-bottom-color, var(--sld-color-border));
+  --toggle-bar-gap: var(--sld-commandbar-gap, var(--sld-pad-tiny));
+  --toggle-bar-icon-padding: var(--sld-pad-medium);
+  --toggle-bar-title-font-weight: 500;
+  --toggle-bar-title-content-font-size: 18px;
+}
+
+.toggle-bar {
+  padding: var(--toggle-bar-padding);
+  display: flex;
+  border-bottom: var(--toggle-bar-border-bottom);
+  width: 100%;
+  max-width: 100%;
+  min-width: auto;
+  position: relative;
+  gap: var(--toggle-bar-gap);
+}
+
+.toggle-bar-icon {
+  padding: var(--toggle-bar-icon-padding);
+}
+
+.toggle-bar-title {
+  flex: 1;
+  font-weight: var(--toggle-bar-title-font-weight);
+  min-width: auto;
+}
+
+.toggle-bar-title-content {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--toggle-bar-title-content-font-size);
+  min-width: auto;
+  height: 100%;
+}
+
+.toggle-bar-content {
+  position: relative;
+  min-width: auto;
+  overflow: hidden;
+}</style>

package/dist/ui/toggleBar/ToggleBar.svelte.d.ts

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

package/dist/ui/toggleBar/toggle-bar.scss

@@ -0,0 +1,45 @@
+@import "../../styles/slotui-mixins.scss";
+
+:root {
+    --toggle-bar-padding: var(--sld-commandbar-padding, var(--box-density-1));
+    --toggle-bar-border-bottom: var(--sld-topbar-border-bottom-color, var(--sld-color-border));
+    --toggle-bar-gap: var(--sld-commandbar-gap, var(--sld-pad-tiny));
+    --toggle-bar-icon-padding: var(--sld-pad-medium);
+    --toggle-bar-title-font-weight: 500;
+    --toggle-bar-title-content-font-size: 18px;
+}
+
+.toggle-bar {
+    padding: var(--toggle-bar-padding);
+    display: flex;
+    border-bottom: var(--toggle-bar-border-bottom);
+    width: 100%;
+    max-width: 100%;
+    min-width: auto;
+    position: relative;
+    gap: var(--toggle-bar-gap);
+
+    &-icon {
+        padding: var(--toggle-bar-icon-padding);
+    }
+    &-title {
+        flex: 1;
+        font-weight: var(--toggle-bar-title-font-weight);
+        min-width: auto;
+        &-content {
+            display: flex;
+            align-items: center;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            font-size: var(--toggle-bar-title-content-font-size);
+            min-width: auto;
+            height: 100%;
+        }
+    }
+
+    &-content {
+        position: relative;
+        min-width: auto;
+        overflow: hidden;
+    }
+}

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

@@ -0,0 +1,17 @@
+import type { ContentSwitcherProps } from '../../base/contentSwitcher/types.js';
+import type { CommonProps } from '../../types/index.js';
+import type { Snippet } from 'svelte';
+export type ToggleBarProps = CommonProps & {
+    /** title of the toggle bar */
+    title?: string;
+    /** icon of the toggle bar */
+    icon?: string;
+    /** orientation of the toggle bar */
+    orientation?: 'right' | 'left';
+    contentSwitcherProps?: ContentSwitcherProps;
+    toggleBarIcon?: Snippet;
+    toggleBarTitle?: Snippet;
+    toggleBarButtons?: Snippet;
+    contentSwitcherIcon?: Snippet;
+    contentSwitcherReveal?: Snippet;
+};

package/dist/ui/toggleBar/types.js

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

package/dist/ui/toolBar/ToolBar.demo.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">import ToolBar from "./ToolBar.svelte";
+import { defaultsArgs } from "../../base/demoer/demoer.utils.js";
+import ComponentDemo from "../../base/demoer/DemoerComponent.svelte";
+import Demoer from "../../base/demoer/Demoer.svelte";
+import DemoPage from "../../base/demoer/DemoPage.svelte";
+let parametersSlot = {
+  vertical: {
+    type: "boolean",
+    values: [false, true]
+  },
+  color: {
+    type: "string",
+    values: [void 0, "#999"]
+  },
+  closeOnValidate: {
+    type: "boolean",
+    values: [true, false]
+  }
+};
+let multiple = {
+  vertical: {
+    false: { vertical: false },
+    true: { vertical: true }
+  }
+};
+$: componentArgsSlot = {
+  ...defaultsArgs(parametersSlot),
+  onClose: () => {
+  },
+  data: [
+    { id: 1, name: "name" },
+    { id: 2, name: "name" },
+    { id: 3, name: "name" },
+    { id: 4, name: "name" }
+  ]
+};
+let codeSlot = `      <ToolBar>
+        <span>item 1</span>
+        <span>item 2</span>
+        <divider />
+        <span>item 3</span>
+        <span>item 4</span>
+      </ToolBar>`;
+let codeProps = `
+<Button
+	onclick={() => {
+		openWindow("html", {
+		componentProps: { some: "props", someother: "deprops" },
+		contentHTML:
+			'<div class="pad-4 align-center">some html content</div>',
+		});
+	}}>
+	Window with html content
+</Button>
+
+<Button
+	onclick={() => {
+		openWindow("component", {
+		component: Debug,
+		componentProps: { some: "props", someother: "deprops" },
+		});
+	}}>
+	Window with component
+</Button>`;
+</script>
+
+<ComponentDemo
+	component="ToolBar"
+	cite="Way more than putting tools in a bar : having them in a toolbar ! <br /> Quead Jones, 450"
+>
+	<div class="flex-v gap-large">
+		<DemoPage code={codeSlot} component="ToolBar">
+			<Demoer {multiple} parameters={parametersSlot} componentArgs={componentArgsSlot}
+				>{#snippet children({ activeParams })}
+					<div class="pad-2 h-large pos-rel">
+						<ToolBar {...activeParams}>
+							<span>item 1</span>
+							<span>item 2</span>
+							<divider></divider>
+							<span>item 3</span>
+							<span>item 4</span>
+						</ToolBar>
+					</div>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/ui/toolBar/ToolBar.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 ToolBarProps = typeof __propDef.props;
+export type ToolBarEvents = typeof __propDef.events;
+export type ToolBarSlots = typeof __propDef.slots;
+export default class ToolBar extends SvelteComponent<ToolBarProps, ToolBarEvents, ToolBarSlots> {
+}
+export {};

package/dist/ui/toolBar/ToolBar.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">import Slotted from "../../utils/slotted/Slotted.svelte";
+let {
+  class: className = "",
+  element = $bindable(),
+  style = "",
+  color = "#fff",
+  vertical = $bindable(false),
+  toolbarSeparator,
+  children,
+  ...rest
+} = $props();
+</script>
+
+<div
+	bind:this={element}
+	class:vertical
+	class="toolbar {className}"
+	style="{style};--color: {color}"
+	{...rest}
+>
+	<Slotted child={children} />
+	<Slotted child={toolbarSeparator} />
+</div>
+
+<style>:root {
+  --toolbar-padding: var(--sld-toolbar-padding, var(--box-density-1, var(--sld-pad-tiny)));
+  --toolbar-gap: var(--sld-pad-tiny);
+  --toolbar-divider-border: 1px solid red;
+  --toolbar-divider-height: 1rem;
+  --toolbar-vertical-divider-border: 1px solid green;
+  --toolbar-vertical-divider-width: 1rem;
+}
+
+.toolbar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: var(--toolbar-padding);
+  gap: var(--toolbar-gap);
+}
+
+.toolbar divider {
+  border: var(--toolbar-divider-border);
+  height: var(--toolbar-divider-height);
+}
+
+.toolbar.vertical {
+  flex-direction: column;
+}
+
+.toolbar.vertical divider {
+  border: var(--toolbar-vertical-divider-border);
+  width: var(--toolbar-vertical-divider-width);
+}</style>

package/dist/ui/toolBar/ToolBar.svelte.d.ts

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

package/dist/ui/toolBar/toolbar.scss

@@ -0,0 +1,32 @@
+@import "../../styles/slotui-mixins.scss";
+
+:root {
+	--toolbar-padding: var(--sld-toolbar-padding, var(--box-density-1, var(--sld-pad-tiny)));
+	--toolbar-gap: var(--sld-pad-tiny);
+	--toolbar-divider-border: 1px solid red;
+	--toolbar-divider-height: 1rem;
+	--toolbar-vertical-divider-border: 1px solid green;
+	--toolbar-vertical-divider-width: 1rem;
+}
+
+.toolbar {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	padding: var(--toolbar-padding);
+	gap: var(--toolbar-gap);
+
+	divider {
+		border: var(--toolbar-divider-border);
+		height: var(--toolbar-divider-height);
+	}
+}
+
+.toolbar.vertical {
+	flex-direction: column;
+
+	divider {
+		border: var(--toolbar-vertical-divider-border);
+		width: var(--toolbar-vertical-divider-width);
+	}
+}

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

@@ -0,0 +1,11 @@
+import type { CommonProps } from '../../types/index.js';
+import type { Snippet } from 'svelte';
+export type ToolBarProps = CommonProps & {
+    /** color of the toolbar */
+    color?: string;
+    /** whether the toolbar is vertical */
+    vertical?: boolean;
+    /**    */
+    element?: HTMLDivElement;
+    toolbarSeparator?: Snippet;
+};

package/dist/ui/toolBar/types.js

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

package/dist/ui/tree/Tree.demo.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">import Tree from "./Tree.svelte";
+import ComponentDemo from "../../base/demoer/DemoerComponent.svelte";
+import DemoPage from "../../base/demoer/DemoPage.svelte";
+import Demoer from "../../base/demoer/Demoer.svelte";
+import { defaultsArgsFromProps } from "../../base/demoer/demoer.utils.js";
+let paths = [
+  "About.vue",
+  "Categories/Index.vue",
+  "Categories/Demo.vue",
+  "Categories/Flavors.vue",
+  "Categories/Demo",
+  "Categories/Demo/Flavors.vue"
+];
+let pathsData = [
+  { name: "", path: "Categories/Demo/Vue", other: "item" },
+  { name: "", path: "About" },
+  { name: "", path: "More" },
+  { name: "", path: "Categories/Demo/Vue/Demo" },
+  { name: "", path: "Categories/Index" },
+  { name: "", path: "Categories/About" },
+  { name: "", path: "Categories/Demo" },
+  { name: "", path: "New/With/Some/Unique/Levels/Yep" },
+  { name: "", path: "New/With/Some/Other/Levels/Yep", data: { isbel: "or" } }
+];
+let data = [
+  { name: "", path: "Categories/Demo/Vue/Demo" },
+  {
+    name: "",
+    path: "New/With/Some/Unique/Levels/Yep"
+  }
+];
+let selectedData = [];
+let parameters = {
+  showCheckBox: {
+    type: "boolean",
+    values: [true, false]
+  }
+};
+let componentArgs = {
+  status: defaultsArgsFromProps("status", parameters)
+};
+let code = `
+<Tree bind:selectedData
+    {data}
+    pathField="path"
+    paths={pathsData} />`;
+</script>
+
+<ComponentDemo
+	cite="We were looking for leaves and we found trees<br /> B. Esein, 1354"
+	component="Tree"
+>
+	<div class="flex-v gap-large">
+		<DemoPage {code} component="Loading">
+			<Demoer {componentArgs} {parameters}>
+				{#snippet children({ activeParams })}
+					<div class="pos-rel flex-h">
+						<div style="width:250px;" class="h-large overflow-auto">
+							<Tree bind:selectedData {data} pathField="path" paths={pathsData} {...activeParams} />
+						</div>
+						<div style="width:250px;" class="h-large overflow-auto">
+							<pre>{JSON.stringify(
+									selectedData.filter((x: any) => x),
+									null,
+									' '
+								)}</pre>
+						</div>
+					</div>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/ui/tree/Tree.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 TreeProps = typeof __propDef.props;
+export type TreeEvents = typeof __propDef.events;
+export type TreeSlots = typeof __propDef.slots;
+export default class Tree extends SvelteComponent<TreeProps, TreeEvents, TreeSlots> {
+}
+export {};