@medyll/idae-slotui-svelte 0.3.0

package/dist/componentCite.js

@@ -0,0 +1,200 @@
+export const componentCite = {
+    alert: {
+        component: 'Alert',
+        componentCode: 'alert',
+        cite: 'Then they were informed, then they were messaged, then they were alerted.',
+        author: 'Br Jhons, 1752'
+    },
+    autocomplete: {
+        component: 'AutoComplete',
+        componentCode: 'autocomplete',
+        cite: "The art of guessing what you're going to say before you say it.",
+        author: 'E. Guessed, 1690'
+    },
+    avatar: {
+        component: 'Avatar',
+        componentCode: 'avatar',
+        cite: "If it's not you, then it's the other you",
+        author: 'A. Render, 1995'
+    },
+    button: {
+        component: 'Button',
+        componentCode: 'button',
+        cite: "There were a place where we used to click. You've called it a button, and we clicked yes. R. Falgt, 1354",
+        author: 'R. Falgt, 1354'
+    },
+    tabs: {
+        component: 'Tabs',
+        componentCode: 'tabs',
+        cite: 'A journey of a thousand pages begins with a single tab',
+        author: 'Confucius, 450 BC'
+    },
+    box: {
+        component: 'Box',
+        componentCode: 'box',
+        cite: "Boxes, essentially, contain other boxes. That's the meaning we'll find if we open them .",
+        author: 'B. Franklin, 1854'
+    },
+    backdrop: {
+        component: 'Backdrop',
+        componentCode: 'backdrop',
+        cite: "The background, the stage, the curtain: it's all a backdrop",
+        author: 'P. Shaw, 1900'
+    },
+    cartouche: {
+        component: 'Cartouche',
+        componentCode: 'cartouche',
+        cite: "Open up', they said. So we stackedG.",
+        author: 'G. Brahms, 1964'
+    },
+    chip: {
+        component: 'Chip',
+        componentCode: 'chip',
+        cite: 'Small bits of information, always at hand',
+        author: 'J. Chips, 1985'
+    },
+    column: {
+        component: 'Column',
+        componentCode: 'column',
+        cite: 'What else? Cells? We are columns',
+        author: 'D. Viesas, 1964'
+    },
+    divider: {
+        component: 'Divider',
+        componentCode: 'divider',
+        cite: "What is separating before from after is not a time nor a place : it's only a component",
+        author: 'B. Franklin, 1854'
+    },
+    drawer: {
+        component: 'Drawer',
+        componentCode: 'drawer',
+        cite: 'The hidden compartment, always there when needed',
+        author: 'M. Drawer, 2005'
+    },
+    list: {
+        component: 'List',
+        componentCode: 'list',
+        cite: 'List differs from menu essentially by the way you call it',
+        author: 'R. List, 1990'
+    },
+    progress: {
+        component: 'Progress',
+        componentCode: 'progress',
+        cite: "You'll never know that you've got a score, unless comes the day when you see the other's ones.",
+        author: 'S. Roch, 1824'
+    },
+    slider: {
+        component: 'Slider',
+        componentCode: 'slider',
+        cite: 'Adjusting the flow, one step at a time',
+        author: 'L. Slider, 2010'
+    },
+    datalist: {
+        component: 'DataList',
+        componentCode: 'datalist',
+        cite: 'Those who call them tables are the same who name stones as chairs. Reality is above : datalist is a datalist table .',
+        author: 'A. Einstein, 1879'
+    },
+    finder: {
+        component: 'Finder',
+        componentCode: 'finder',
+        cite: 'This constant need about knowing what I was looking for, this need, I gave it a name.',
+        author: 'H. Maifield, 1996'
+    },
+    grouper: {
+        component: 'Grouper',
+        componentCode: 'grouper',
+        cite: 'Together we stand, divided we fall. The importance of grouping.',
+        author: 'A. Lincoln, 1863'
+    },
+    loader: {
+        component: 'Loader',
+        componentCode: 'loader',
+        cite: 'And suddenly, in this dark cabinet, I realized that the most pleasant phase was that of waiting.',
+        author: 'D. Pentes, 824'
+    },
+    sorter: {
+        component: 'Sorter',
+        componentCode: 'sorter',
+        cite: 'Then, what was before became the after.',
+        author: 'R. Hakran, 824'
+    },
+    confirm: {
+        component: 'Confirm',
+        componentCode: 'confirm',
+        cite: 'Leaded by a proud walk, nothing can stop nobody to win the step ahead, should we confirm ?',
+        author: 'V.Hugo 1850'
+    },
+    input: {
+        component: 'Input',
+        componentCode: 'input',
+        cite: 'The words we type today will shape the thoughts of tomorrow',
+        author: 'Anonymous, 2022'
+    },
+    switch: {
+        component: 'Switch',
+        componentCode: 'switch',
+        cite: 'With a flick of a switch, worlds are changed and opportunities arise',
+        author: 'Nikola Tesla, 1894'
+    },
+    select: {
+        component: 'Select',
+        componentCode: 'select',
+        cite: 'To select or not to select, that is the question.',
+        author: 'Jhon. Shakespare, 1623'
+    },
+    frame: {
+        component: 'Frame',
+        componentCode: 'frame',
+        cite: 'What happens in the Frame, stays in the Frame',
+        author: 'R. Smith, 1452'
+    },
+    login: {
+        component: 'Login',
+        componentCode: 'login',
+        cite: 'The journey of a thousand miles begins with a single login.',
+        author: 'T. Lao, 568'
+    },
+    menu: {
+        component: 'Menu',
+        componentCode: 'menu',
+        cite: "A menu is not a list, it's just like a list but more and less",
+        author: 'S. Kim, 1654'
+    },
+    panel: {
+        component: 'Panel',
+        componentCode: 'panel',
+        cite: 'If you can slide, then there are chances you are a panel.',
+        author: 'C. Quin, 2013'
+    },
+    popper: {
+        component: 'Popper',
+        componentCode: 'popper',
+        cite: 'This Popper is the base of all the flyout stuff: it pops',
+        author: 'P. Cheng, 1045'
+    },
+    toast: {
+        component: 'Toast',
+        componentCode: 'toast',
+        cite: 'A message in a bottle that never gets lost at sea.',
+        author: 'H. Chen, 756'
+    },
+    togglebar: {
+        component: 'ToggleBar',
+        componentCode: 'togglebar',
+        cite: "Toggling between states with ease, that's what ToggleBars do best.",
+        author: 'Q. Jones, 954'
+    },
+    toolbar: {
+        component: 'ToolBar',
+        componentCode: 'toolbar',
+        cite: 'Way more than putting tools in a bar: having them in a toolbar!',
+        author: 'Q. Jones, 450'
+    },
+    window: {
+        component: 'Window',
+        componentCode: 'window',
+        cite: 'Claiming they were not doors, made what they are today: windows.',
+        author: 'Ch XX, 1320'
+    }
+};

package/dist/controls/autocomplete/AutoComplete.demo.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">import AutoComplete from "./AutoComplete.svelte";
+import MenuItem from "../../ui/menu/MenuItem.svelte";
+import ComponentDemo from "../../base/demoer/DemoerComponent.svelte";
+import Demoer from "../../base/demoer/Demoer.svelte";
+import DemoPage from "../../base/demoer/DemoPage.svelte";
+import { parameters, componentArgs } from "./types.js";
+let data = [
+  { id: 1, name: "Wanda", surname: "Wand", lastname: "Groot", age: 23 },
+  { id: 2, name: "John", surname: "Jo", lastname: "Doe", age: 33 },
+  { id: 3, name: "Jane", surname: "Jay", lastname: "Doe", age: 43 },
+  { id: 4, name: "Peter", surname: "Piotr", lastname: "Parker", age: 53 },
+  { id: 5, name: "Mary", surname: "Ma", lastname: "Jane", age: 63 },
+  { id: 6, name: "Bruce", surname: "Banner", lastname: "Wayne", age: 73 }
+];
+let codeSlot = `
+<AutoComplete 
+	class="marg-b"
+	placeholder="Search in list"
+	style="width:200px"
+	{data}>
+	{#snippet children(menuItemData)}
+		<MenuItem data={menuItemData}>{menuItemData.name} {menuItemData.lastname}</MenuItem>
+	{/snippet}
+	{#snippet autoCompleteEmpty()}
+		<div class="pad">No results found</div>
+	{/snippet}
+	{#snippet autoCompleteNoResults()}
+		<div class="pad">No results found</div>
+	{/snippet}
+</AutoComplete>`;
+let codeProps = `
+<AutoComplete
+  let:menuItemData
+  {data}
+  onPick={()=>{}}
+  class="marg-b"
+  placeholder="Search in list"
+  style="width:200px"
+  dataFieldName="name" />`;
+</script>
+
+<ComponentDemo component="AutoComplete">
+	<div class="flex-v gap-large">
+		<DemoPage code={codeSlot} component="AutoComplete">
+			<Demoer {componentArgs} {parameters}>
+				{#snippet children({ activeParams })}
+					<AutoComplete
+						{...activeParams}
+						class="marg-b"
+						placeholder="Search in list"
+						style="width:200px"
+						{data}
+					>
+						{#snippet children(menuItemData)}
+							<MenuItem data={menuItemData}>{menuItemData.name} {menuItemData.lastname}</MenuItem>
+						{/snippet}
+						{#snippet autoCompleteEmpty()}
+							<div class="pad">No results found</div>
+						{/snippet}
+						{#snippet autoCompleteNoResults()}
+							<div class="pad">No results found</div>
+						{/snippet}
+					</AutoComplete>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+		<DemoPage code={codeProps} component="AutoComplete" title="Using props">
+			<Demoer {componentArgs} {parameters}>
+				{#snippet children({ activeParams })}
+					<AutoComplete
+						{...activeParams}
+						{data}
+						onchange={() => {}}
+						class="marg-b"
+						placeholder="Search in list"
+						style="width:200px"
+						dataFieldName="name"
+					/>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/controls/autocomplete/AutoComplete.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 AutoCompleteProps = typeof __propDef.props;
+export type AutoCompleteEvents = typeof __propDef.events;
+export type AutoCompleteSlots = typeof __propDef.slots;
+export default class AutoComplete extends SvelteComponent<AutoCompleteProps, AutoCompleteEvents, AutoCompleteSlots> {
+}
+export {};

package/dist/controls/autocomplete/AutoComplete.svelte

@@ -0,0 +1,133 @@
+<script lang="ts" generics="T">import TextField from "../textfield/TextField.svelte";
+import { dataOp } from "../../utils/engine/utils.js";
+import Popper from "../../ui/popper/Popper.svelte";
+import MenuList from "../../ui/menuList/MenuList.svelte";
+import MenuListItem from "../../ui/menuList/MenuListItem.svelte";
+import Icon from "../../base/icon/Icon.svelte";
+import Slotted from "../../utils/slotted/Slotted.svelte";
+let {
+  class: className = "",
+  element = $bindable(),
+  data = $bindable([]),
+  searchField = "*",
+  dataFieldName,
+  mode = "partial",
+  filteredData = $bindable(data),
+  selectedIndex = $bindable(-1),
+  onchange = (args) => {
+  },
+  showAllOnEmpty = true,
+  children,
+  autoCompleteEmpty,
+  autoCompleteNoResults,
+  ...rest
+} = $props();
+let searchString = $state(void 0);
+let menuHTML = $state(null);
+let popperHTML = $state(void 0);
+let popperOpen = $state(false);
+let menuRef;
+let childs = children;
+$effect(() => {
+  element?.addEventListener("keypress", (e) => {
+    preNavigate(e);
+  });
+});
+$effect(() => {
+  filteredData = !searchString ? showAllOnEmpty ? data : [] : doFind(data, searchString, searchField);
+});
+const doFind = (list, kw, field) => {
+  let results;
+  if (!kw) {
+    results = data;
+  } else {
+    results = mode === "exact" ? dataOp.filterList(list, kw, field) : dataOp.searchList(list, kw, field);
+  }
+  return results;
+};
+async function preNavigate(e) {
+  if (e.keyCode === 13) {
+    e.preventDefault();
+    onSelect(filteredData[selectedIndex], selectedIndex);
+    return;
+  }
+}
+function onSelect(filteredData2, index) {
+  searchString = getFieldName(filteredData2, dataFieldName);
+  if (onchange) onchange(filteredData2);
+}
+function getFieldName(data2, fieldName) {
+  let field = Array.isArray(fieldName) ? fieldName : [fieldName];
+  return data2 ? field.map((field2) => data2[field2]).join(" ") : "";
+}
+</script>
+
+{popperOpen}
+<Popper
+	bind:isOpen={popperOpen}
+	bind:element={popperHTML}
+	position="BC"
+	stickToHookWidth={true}
+	autoClose
+	class="auto-complete"
+>
+	{#snippet popperHolder()}
+		<TextField
+			bind:value={searchString}
+			bind:element
+			type="search"
+			inputType="search"
+			class={className}
+			onclick={() => (popperOpen = true)}
+			onfocus={() => {
+				setTimeout(() => (popperOpen = true), 125);
+			}}
+			onkeydown={(e: Event) => menuRef.actions.navigate(e, filteredData)}
+			{...rest}
+			aria-haspopup="menu"
+			aria-controls="menu"
+			tabindex="0"
+		/>
+	{/snippet}
+
+	<MenuList
+		bind:this={menuRef}
+		style="max-height:350px;overflow:auto;width:100%;"
+		data={filteredData}
+		bind:element={menuHTML}
+		bind:selectedIndex
+		id="menu"
+		role="menu"
+		tabindex="-1"
+		aria-expanded={popperOpen}
+	>
+		{#snippet children(prop)}
+			<Slotted child={childs} slotArgs={prop.item}>
+				<MenuListItem
+					text={getFieldName(prop.item, dataFieldName)}
+					data={prop.item}
+					onclick={(event) => {
+						onSelect(event.detail ?? (event as T), prop.itemIndex);
+						popperOpen = false;
+						menuRef.actions.gotoIndex(prop.itemIndex);
+					}}
+				/>
+			</Slotted>
+		{/snippet}
+	</MenuList>
+	{#if !filteredData.length && !searchString}
+		<Slotted child={autoCompleteEmpty}>
+			<div class="auto-complete-boot">
+				<Icon iconSize="large" icon="fa-regular:keyboard" />
+				perform search
+			</div>
+		</Slotted>
+	{:else if !filteredData.length}
+		<Slotted child={autoCompleteNoResults}>
+			<div class="auto-complete-no-results">
+				<Icon class="dsp-inline" iconSize="large" icon="material-symbols:no-sim-outline" />
+				no results
+			</div>
+		</Slotted>
+	{/if}
+</Popper>

package/dist/controls/autocomplete/AutoComplete.svelte.d.ts

@@ -0,0 +1,35 @@
+import { SvelteComponent } from "svelte";
+declare class __sveltets_Render<T> {
+    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]>;
+        data: T[];
+        showAllOnEmpty?: boolean;
+        searchField?: string | "*";
+        dataFieldName?: keyof T | (keyof T)[] | undefined;
+        mode?: "exact" | "partial";
+        filteredData?: T[] | undefined;
+        selectedIndex?: number;
+        onchange?: ((args: T) => void) | undefined;
+        autoCompleteEmpty?: import("svelte").Snippet;
+        autoCompleteNoResults?: import("svelte").Snippet;
+    } & Partial<Omit<HTMLInputElement, "style">>;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type AutoCompleteProps_<T> = ReturnType<__sveltets_Render<T>['props']>;
+export type AutoCompleteEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
+export type AutoCompleteSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class AutoComplete<T> extends SvelteComponent<AutoCompleteProps_<T>, AutoCompleteEvents<T>, AutoCompleteSlots<T>> {
+}
+export {};

package/dist/controls/autocomplete/auto-complete.scss

@@ -0,0 +1,15 @@
+@import "../../styles/slotui-mixins.scss";
+
+:root {
+    --auto-complete-pad: var(--sld-pad-medium);
+    --auto-complete-gap: var(--sld-gap-small);
+}
+
+.auto-complete {
+    &-no-results,
+    &-boot {
+        padding: var(--auto-complete-pad);
+        gap: var(--auto-complete-gap);
+        @include flex(row, center);
+    }
+}

package/dist/controls/autocomplete/types.d.ts

@@ -0,0 +1,30 @@
+import type { DemoerStoryProps } from '../../base/demoer/types.js';
+import type { CommonProps, Data } from '../../types/index.js';
+import type { Snippet } from 'svelte';
+export type AutoCompleteProps<T = Data> = CommonProps & {
+    /** className off the root component */
+    class?: string;
+    /** element root HTMLDivElement props */
+    element?: HTMLDivElement;
+    /** initial data to look in */
+    data: T[];
+    /** show all data when search is empty */
+    showAllOnEmpty?: boolean;
+    /** default field to be used for searches, can be * */
+    searchField?: string | '*';
+    /**
+     * defaults fields to be shown
+     */
+    dataFieldName?: keyof T | (keyof T)[];
+    /** search mode : exact or partial match*/
+    mode?: 'exact' | 'partial';
+    /** external bind use, to read filtered data */
+    filteredData?: T[];
+    /** selectedIndex : index of the selected item in data */
+    selectedIndex?: number;
+    /** selectedIndex : index of the selected item in data */
+    onchange?: (args: T) => void;
+    autoCompleteEmpty?: Snippet;
+    autoCompleteNoResults?: Snippet;
+};
+export declare let parameters: DemoerStoryProps<AutoCompleteProps<Data>>, componentArgs: AutoCompleteProps<Data>;

package/dist/controls/autocomplete/types.js

@@ -0,0 +1,28 @@
+import { demoerArgs } from '../../base/demoer/demoer.utils.js';
+const AutoCompleteDemoValues = {
+    data: {
+        type: 'array',
+        values: [
+            [
+                { name: 'John', age: 25 },
+                { name: 'Jane', age: 30 }
+            ]
+        ],
+        default: []
+    },
+    showAllOnEmpty: {
+        type: 'boolean',
+        default: false
+    },
+    searchField: {
+        type: 'string',
+        values: ['name', 'age', '*'],
+        default: '*'
+    },
+    mode: {
+        type: 'string',
+        values: ['exact', 'partial'],
+        default: 'exact'
+    }
+};
+export let { parameters, componentArgs } = demoerArgs(AutoCompleteDemoValues);

package/dist/controls/button/Button.demo.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">import MenuList from "../../ui/menuList/MenuList.svelte";
+import MenuListItem from "../../ui/menuList/MenuListItem.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 Button from "./Button.svelte";
+import { uiPresets } from "../../utils/engine/presets.js";
+import ButtonAction from "./ButtonAction.svelte";
+import ButtonMenu from "./ButtonMenu.svelte";
+import { parameters, componentArgs } from "./types.js";
+let multiple = {
+  bgTheme: {
+    none: { bgTheme: void 0 },
+    primary: { bgTheme: "primary" },
+    secondary: { bgTheme: "secondary" },
+    tertiary: { bgTheme: "tertiary" }
+  }
+};
+let parametersMenu = {
+  position: {
+    type: "stickyPosition",
+    values: uiPresets.stickyPosition
+  }
+};
+let styleParameters = {
+  color: {
+    type: "color-preset",
+    values: [void 0, "primary", "secondary", "tertiary"]
+  },
+  contained: {
+    type: "boolean",
+    values: [true, false]
+  },
+  bordered: {
+    type: "boolean",
+    values: [true, false]
+  },
+  link: {
+    type: "boolean",
+    values: [true, false]
+  }
+};
+let code = `
+<Button onclick={()=>{}} >
+	My button
+	{#snippet buttonStart()}
+		<Icon icon="user" />
+	{/snippet}
+	{#snippet buttonEnd()}
+		<Icon icon="user" />
+	{/snippet}
+</Button>`;
+</script>
+
+<Button variant="contained" value="red" icon="material-symbols-light:post-add-sharp"></Button>
+<ButtonAction
+	>test et essai
+	{#snippet popperContent()}
+		<div class="pad-4">content</div>
+	{/snippet}
+</ButtonAction>
+<ButtonMenu
+	>menu
+	{#snippet menuItem()}
+		content
+	{/snippet}
+</ButtonMenu>
+<ComponentDemo
+	component="Button"
+	cite="There were a place where we used to click. You've called it a button, and we clicked yes.<br /> R. Falgt, 1354"
+>
+	<div class="flex-v gap-medium">
+		<DemoPage {code} component="Button">
+			<Demoer {parameters} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<Button {...activeParams}
+						>Using snippets
+						<!-- {#snippet buttonStart()}
+							<Icon icon="user" /> 
+						{/snippet} -->
+
+						{#snippet buttonLoadingIcon()}
+							<Icon icon="loading" rotate />
+						{/snippet}
+					</Button>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+		<DemoPage title="" subTitle="Styling props" component="Button">
+			<Demoer parameters={styleParameters} {multiple} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<Button {...activeParams}
+						>Using snippets
+						{#snippet buttonStart()}
+							<Icon icon="user" />
+						{/snippet}
+						{#snippet buttonLoadingIcon()}
+							<Icon icon="loading" rotate />
+						{/snippet}
+					</Button>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+		<DemoPage title="" subTitle="Menu buttons" component="Button">
+			<Demoer parameters={parametersMenu} {componentArgs}>
+				<Button>
+					default action
+					{#snippet buttonPopper()}
+						<MenuList style="max-height:350px;overflow:auto" density="default">
+							<MenuListItem divider={true} text="strict">menu</MenuListItem>
+							<MenuListItem data={{ some: 'data' }} text="strict">item</MenuListItem>
+							<MenuListItem data={{ some: 'data' }} text="strict">item</MenuListItem>
+							<MenuListItem data={{ some: 'data' }} text="strict">item</MenuListItem>
+						</MenuList>
+					{/snippet}
+				</Button>
+			</Demoer>
+		</DemoPage>
+		<!-- <DemoPage title="Using props" code={code2} component="Button">
+			<Demoer parameters={parametersProps} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<Button {...activeParams}>Using props</Button>
+				{/snippet}
+			</Demoer>
+		</DemoPage> -->
+		<!-- <DemoPage title="" subTitle="Menu buttons" code={code3} component="Button">
+			<Demoer parameters={parametersMenu} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<Button
+					size="medium"
+					usePopper={{ ...usePopper, position: activeParams?.position }}
+					primary="Menu {activeParams?.position ?? ''}"
+				/>
+				{/snippet}
+			</Demoer>
+		</DemoPage> -->
+	</div>
+</ComponentDemo>