@medyll/idae-slotui-svelte 0.3.0

package/dist/data/jsoner/Jsoner.svelte.d.ts

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

package/dist/data/jsoner/types.d.ts

@@ -0,0 +1,7 @@
+import type { CommonProps, Data } from '../../types/index.js';
+export type JsonerProps = CommonProps & {
+    /** The data to be displayed */
+    data: Data[];
+    /** The mode of the data */
+    mode?: 'array' | 'object' | 'string' | 'number';
+};

package/dist/data/jsoner/types.js

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

package/dist/data/list/List.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">import MenuList from "../../ui/menuList/MenuList.svelte";
+let { element, selectedData, selectedIndex, menuListItems, data, ...rest } = $props();
+</script>
+
+<MenuList
+	{...rest}
+	bind:element
+	bind:selectedData
+	bind:selectedIndex
+	bind:menuListItems
+	bind:data
+/>

package/dist/data/list/List.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import type { MenuListProps } from '../../ui/menuList/types.js';
+declare const __propDef: {
+    props: MenuListProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ListProps = typeof __propDef.props;
+export type ListEvents = typeof __propDef.events;
+export type ListSlots = typeof __propDef.slots;
+export default class List extends SvelteComponent<ListProps, ListEvents, ListSlots> {
+}
+export {};

package/dist/data/list/ListItem.svelte

@@ -0,0 +1,7 @@
+<svelte:options />
+
+<script lang="ts">import MenuListItem from "../../ui/menuList/MenuListItem.svelte";
+let { ...rest } = $props();
+</script>
+
+<MenuListItem {...rest} />

package/dist/data/list/ListItem.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import type { MenuListItemProps } from '../../ui/menuList/types.js';
+declare const __propDef: {
+    props: MenuListItemProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ListItemProps = typeof __propDef.props;
+export type ListItemEvents = typeof __propDef.events;
+export type ListItemSlots = typeof __propDef.slots;
+export default class ListItem extends SvelteComponent<ListItemProps, ListItemEvents, ListItemSlots> {
+}
+export {};

package/dist/data/list/ListTitle.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">import MenuListTitle from "../../ui/menuList/MenuListTitle.svelte";
+let { ...rest } = $props();
+</script>
+
+<MenuListTitle {...rest} />

package/dist/data/list/ListTitle.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import type { MenuListItemProps } from '../../ui/menuList/types.js';
+declare const __propDef: {
+    props: MenuListItemProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ListTitleProps = typeof __propDef.props;
+export type ListTitleEvents = typeof __propDef.events;
+export type ListTitleSlots = typeof __propDef.slots;
+export default class ListTitle extends SvelteComponent<ListTitleProps, ListTitleEvents, ListTitleSlots> {
+}
+export {};

package/dist/data/loader/Loader.demo.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">import Loader from "./Loader.svelte";
+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 { parameters, componentArgs } from "./types.js";
+let codeSlot = `
+<Loader onstatuschange={() => {}}>
+	{#snippet loaderLoading()}
+		<Icon color="orange" fontSize="big" icon="mdi:loading" rotate />
+	{/snippet}
+	{#snippet loaderError()}
+		<Icon color="red" fontSize="big" icon="mdi:alert-circle-outline" />
+	{/snippet}
+	{#snippet loaderEmpty()}
+		<Icon color="gray" fontSize="big" icon="mdi:database-search-outline" />
+	{/snippet}
+	{#snippet loaderSuccess()}
+		<Icon color="green" fontSize="big" icon="clarity:success-standard-line" />
+	{/snippet}v
+</Loader>`;
+let codeProps = `
+<Loader
+    status={"loading"}
+    messages={{
+        loading: 'Loading dataset',
+        error  : 'An error occurred',
+        empty  : 'Empty results',
+        success: 'Success !'
+      }}
+    emptyIcon="mdi:database-search-outline"
+    errorIcon="mdi:alert-circle-outline"
+    loadingIcon="mdi:loading"
+    successIcon="clarity:success-standard-line" />`;
+</script>
+
+<ComponentDemo
+	cite="And suddenly, in this dark cabinet, i realized that the most pleasant
+	phase was that of waiting.<br /> D. Pentes, 824"
+	component="Loader"
+>
+	<div class="flex-v gap-large">
+		<DemoPage code={codeSlot} component="Loading">
+			<Demoer {componentArgs} {parameters}>
+				{#snippet children({ activeParams })}
+					<div class="pos-rel h-large w-large">
+						<Loader {...activeParams} on:status:change={() => {}}>
+							{#snippet loaderLoading()}
+								<Icon color="orange" iconSize="big" icon="mdi:loading" rotate />
+							{/snippet}
+							{#snippet loaderError()}
+								<Icon color="red" iconSize="big" icon="mdi:alert-circle-outline" />
+							{/snippet}
+							{#snippet loaderEmpty()}
+								<Icon color="gray" iconSize="big" icon="mdi:database-search-outline" />
+							{/snippet}
+							{#snippet loaderSuccess()}
+								<Icon color="green" iconSize="big" icon="clarity:success-standard-line" />
+							{/snippet}v
+						</Loader>
+					</div>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+		<DemoPage code={codeProps} component="Loading" title="Using props">
+			<Demoer {componentArgs} {parameters}>
+				{#snippet children({ activeParams })}
+					<div class="pos-rel h-large w-large">
+						<Loader
+							{...activeParams}
+							emptyIcon="mdi:database-search-outline"
+							errorIcon="mdi:alert-circle-outline"
+							loadingIcon="mdi:loading"
+							messages={{
+								loading: 'Loading dataset',
+								error: 'An error occurred',
+								empty: 'Empty results',
+								success: 'Success !'
+							}}
+							successIcon="clarity:success-standard-line"
+						/>
+					</div>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/data/loader/Loader.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 LoaderProps_ = typeof __propDef.props;
+export { LoaderProps_ as LoaderProps };
+export type LoaderEvents = typeof __propDef.events;
+export type LoaderSlots = typeof __propDef.slots;
+export default class Loader extends SvelteComponent<LoaderProps_, LoaderEvents, LoaderSlots> {
+}

package/dist/data/loader/Loader.preview.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">import Loader from "./Loader.svelte";
+</script>
+
+<div class="pos-rel">
+	<Loader isLoading={true} />
+</div>

package/dist/data/loader/Loader.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 LoaderProps = typeof __propDef.props;
+export type LoaderEvents = typeof __propDef.events;
+export type LoaderSlots = typeof __propDef.slots;
+export default class Loader extends SvelteComponent<LoaderProps, LoaderEvents, LoaderSlots> {
+}
+export {};

package/dist/data/loader/Loader.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">import { fade } from "svelte/transition";
+import Icon from "../../base/icon/Icon.svelte";
+import Slotted from "../../utils/slotted/Slotted.svelte";
+let {
+  class: className = "",
+  element = $bindable(),
+  style = "",
+  status,
+  showSuccess = true,
+  loadingIcon = "mdi:loading",
+  errorIcon = "mdi:alert-circle-outline",
+  emptyIcon = "mdi:database-search-outline",
+  successIcon = "clarity:success-standard-line",
+  isLoading = false,
+  isError = false,
+  isEmpty = false,
+  message,
+  messages = {
+    loading: "Loading",
+    error: "An error occurred",
+    empty: "Empty results",
+    success: "Success"
+  },
+  loaderLoading,
+  loaderError,
+  loaderEmpty,
+  loaderMessage,
+  loaderSuccess,
+  children,
+  ...rest
+} = $props();
+const msgType = $derived(
+  () => isLoading ? "loading" : isError ? "error" : isEmpty ? "empty" : ""
+);
+let finalMessage = $derived(() => message ?? messages?.[status] ?? messages?.[msgType]);
+let timer;
+$effect(() => {
+  if (status === "success") {
+    if (!showSuccess) status = void 0;
+    else {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        status = void 0;
+      }, 1250);
+    }
+  } else {
+    clearTimeout(timer);
+  }
+});
+</script>
+
+{#key status}
+	{#if status || isLoading || isError || isEmpty}
+		<div bind:this={element} transition:fade|global class="loader {className}" {style} {...rest}>
+			<div class="loader-box">
+				{#if status === 'loading' || isLoading}
+					<Slotted child={loaderLoading}>
+						<Icon
+							style="color:var(--sld-color-primary)"
+							icon={loadingIcon}
+							iconSize="medium"
+							rotate
+						/>
+					</Slotted>
+				{/if}
+				{#if status === 'error' || isError}
+					<Slotted child={loaderError}>
+						<Icon style="color:orange;" icon={errorIcon} iconSize="medium" />
+					</Slotted>
+				{/if}
+				{#if showSuccess && status === 'success'}
+					<Slotted child={loaderSuccess}>
+						<Icon style="color:green;" icon={successIcon} iconSize="medium" />
+					</Slotted>
+				{/if}
+				{#if status === 'empty' || isEmpty}
+					<Slotted child={loaderEmpty}>
+						<Icon icon={emptyIcon} iconSize="medium" />
+					</Slotted>
+				{/if}
+
+				{#if Boolean(finalMessage)}
+					<Slotted child={loaderMessage}>
+						<div class="loader-message">{finalMessage}</div>
+					</Slotted>
+				{/if}
+			</div>
+		</div>
+	{/if}
+{/key}
+
+<style>:root {
+  --loader-background-color: var(--sld-color-background-alpha-mid);
+  --loader-box-shadow: var(--sld-elevation-1);
+  --loader-radius: var(--sld-radius-tiny);
+  --loader-border: var(--sld-color-foreground-alpha-high);
+  --loader-message-border-radius: var(--sld-radius-small);
+  --loader-message-border-bottom: var(--sld-color-primary);
+  --loader-message-padding: var(--box-density-1) var(--box-density-2);
+}
+
+.loader {
+  position: absolute;
+  top: 0;
+  background-color: var(--loader-background-color);
+  height: 100%;
+  min-width: 128px;
+  max-width: 100%;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  left: 50%;
+  transform: translate(-50%, 0);
+}
+
+.loader .loader-box {
+  box-shadow: var(--loader-box-shadow);
+  border-radius: var(--loader-radius);
+  border: 1px solid var(--loader-border);
+  padding: 1rem 0;
+  min-width: 128px;
+  width: 100%;
+  margin: 1rem;
+  text-align: center;
+  background-color: var(--loader-background-color);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.loader .loader-box .loader-message {
+  border-radius: var(--loader-message-border-radius);
+  border-bottom: 1px solid;
+  border-color: var(--loader-message-border-bottom);
+  padding: var(--loader-message-padding);
+  display: inline-block;
+  box-shadow: var(--loader-box-shadow);
+}</style>

package/dist/data/loader/Loader.svelte.d.ts

@@ -0,0 +1,41 @@
+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;
+        status: "loading" | "success" | "error" | "empty" | undefined;
+        showSuccess?: boolean;
+        loadingIcon?: string;
+        errorIcon?: string;
+        emptyIcon?: string;
+        successIcon?: string;
+        message?: string;
+        messages: Record<"loading" | "success" | "error" | "empty", string>;
+        isLoading?: boolean;
+        isError?: boolean;
+        isEmpty?: boolean;
+        loaderLoading?: import("svelte").Snippet;
+        loaderError?: import("svelte").Snippet;
+        loaderEmpty?: import("svelte").Snippet;
+        loaderMessage?: import("svelte").Snippet;
+        loaderSuccess?: import("svelte").Snippet;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type LoaderProps_ = typeof __propDef.props;
+export { LoaderProps_ as LoaderProps };
+export type LoaderEvents = typeof __propDef.events;
+export type LoaderSlots = typeof __propDef.slots;
+export default class Loader extends SvelteComponent<LoaderProps_, LoaderEvents, LoaderSlots> {
+}

package/dist/data/loader/loader.scss

@@ -0,0 +1,50 @@
+@import "../../styles/slotui-mixins.scss";
+
+:root {
+    --loader-background-color: var(--sld-color-background-alpha-mid);
+    --loader-box-shadow: var(--sld-elevation-1);
+    --loader-radius: var(--sld-radius-tiny);
+    --loader-border: var(--sld-color-foreground-alpha-high);
+    --loader-message-border-radius: var(--sld-radius-small);
+    --loader-message-border-bottom: var(--sld-color-primary);
+    --loader-message-padding: var(--box-density-1) var(--box-density-2);
+}
+
+.loader {
+    position: absolute;
+    top: 0;
+    background-color: var(--loader-background-color);
+    height: 100%;
+    min-width: 128px;
+    max-width: 100%;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    left: 50%;
+    transform: translate(-50%, 0);
+
+    .loader-box {
+        box-shadow: var(--loader-box-shadow);
+        border-radius: var(--loader-radius);
+        border: 1px solid var(--loader-border);
+        padding: 1rem 0;
+        min-width: 128px;
+        width: 100%;
+        margin: 1rem;
+        text-align: center;
+        background-color: var(--loader-background-color);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .loader-message {
+            border-radius: var(--loader-message-border-radius);
+            border-bottom: 1px solid;
+            border-color: var(--loader-message-border-bottom);
+            padding: var(--loader-message-padding);
+            display: inline-block;
+            box-shadow: var(--loader-box-shadow);
+        }
+    }
+}

package/dist/data/loader/types.d.ts

@@ -0,0 +1,36 @@
+import type { DemoerStoryProps } from '../../base/demoer/types.js';
+import type { CommonProps } from '../../types/index.js';
+import type { Snippet } from 'svelte';
+export type LoaderProps = CommonProps & {
+    /** Status of the loader */
+    status: 'loading' | 'success' | 'error' | 'empty' | undefined;
+    /** Whether to show success status or not */
+    showSuccess?: boolean;
+    /** Icon for the loading status */
+    loadingIcon?: string;
+    /** Icon for the error status */
+    errorIcon?: string;
+    /** Icon for the empty status */
+    emptyIcon?: string;
+    /** Icon for the success status */
+    successIcon?: string;
+    /** Message to display */
+    message?: string;
+    /** Default messages for different statuses */
+    /** used if props.message   is omitted */
+    messages: Record<'loading' | 'success' | 'error' | 'empty', string>;
+    /** @deprecated */
+    isLoading?: boolean;
+    /** @deprecated */
+    isError?: boolean;
+    /** @deprecated */
+    isEmpty?: boolean;
+    /** Children snippet for the default content */
+    children?: Snippet;
+    loaderLoading?: Snippet;
+    loaderError?: Snippet;
+    loaderEmpty?: Snippet;
+    loaderMessage?: Snippet;
+    loaderSuccess?: Snippet;
+};
+export declare const parameters: DemoerStoryProps<LoaderProps>, componentArgs: LoaderProps;

package/dist/data/loader/types.js

@@ -0,0 +1,53 @@
+import { demoerArgs } from '../../base/demoer/demoer.utils.js';
+/* 	let parameters: any = {
+        status: {
+            type: 'string',
+            values: ['loading', 'success', 'error', 'empty', undefined]
+        }
+    };
+
+    let componentArgs = {
+        status: defaultsArgsFromProps('status', parameters)
+    } as LoaderProps; */
+const loaderDemoValues = {
+    status: {
+        type: 'string',
+        values: [undefined, 'idle', 'loading', 'success', 'error', 'empty'],
+        default: undefined
+    },
+    showSuccess: {
+        type: 'boolean',
+        default: false
+    },
+    loadingIcon: {
+        type: 'icon',
+        default: 'loading'
+    },
+    errorIcon: {
+        type: 'icon',
+        default: 'error'
+    },
+    emptyIcon: {
+        type: 'icon',
+        default: 'empty'
+    },
+    successIcon: {
+        type: 'icon',
+        default: 'success'
+    },
+    message: {
+        type: 'string',
+        default: 'Message'
+    },
+    messages: {
+        type: 'object',
+        default: {
+            loading: 'Loading...',
+            success: 'Success',
+            error: 'Error',
+            empty: 'Empty'
+        },
+        private: true
+    }
+};
+export const { parameters, componentArgs } = demoerArgs(loaderDemoValues);

package/dist/data/sorter/Sorter.demo.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">import Divider from "../../base/divider/Divider.svelte";
+import List from "../list/List.svelte";
+import ComponentDemo from "../../base/demoer/DemoerComponent.svelte";
+import Sorter from "./Sorter.svelte";
+import Sorterer from "./Sorterer.svelte";
+const data = [...Array(5)].map((r, i) => {
+  return {
+    id: i,
+    name: "surname " + i,
+    directory: ((prop) => "dir-" + i % 4 + prop)(i),
+    nestedData: {
+      uuid: crypto?.randomUUID() ?? i
+    }
+  };
+});
+let sortedData = [];
+let activeCommonSortField = "";
+</script>
+
+<ComponentDemo
+	component="Sorter"
+	cite="Then, what was before became the after.<br /> R. Hakran, 824"
+>
+	<h5>Button mode</h5>
+	<div class="flex-h gap-small">
+		<div>
+			<div class="flex-h gap-small">
+				<Sorter
+					sortByOrder="asc"
+					sortByField="id"
+					bind:sortedData
+					bind:activeCommonSortField
+					{data}
+				/>
+				<Sorter sortByField="name" bind:sortedData bind:activeCommonSortField {data} />
+				<Sorter sortByField="directory" bind:sortedData bind:activeCommonSortField {data} />
+				<Sorter sortByField="nestedData.uuid" bind:sortedData bind:activeCommonSortField {data} />
+			</div>
+			<Divider shadowed />
+			<List selectorField="id" data={[...sortedData]} />
+		</div>
+		<div class="flex-h gap-small">
+			<div class="pad">
+				<h6>Code</h6>
+				single field<br />
+				mutiple field <br />
+				nested field <br />
+			</div>
+		</div>
+	</div>
+	<h5>{'<Sorterer />'}</h5>
+	<div>
+		<Sorterer
+			bind:sortedData
+			fields={[{ sortByField: 'name' }, { sortByField: 'directory' }]}
+			{data}>With a title :</Sorterer
+		>
+	</div>
+</ComponentDemo>

package/dist/data/sorter/Sorter.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 SorterProps = typeof __propDef.props;
+export type SorterEvents = typeof __propDef.events;
+export type SorterSlots = typeof __propDef.slots;
+export default class Sorter extends SvelteComponent<SorterProps, SorterEvents, SorterSlots> {
+}
+export {};