@medyll/idae-slotui-svelte 0.27.0 → 0.28.0

package/dist/base/box/Box.svelte

@@ -1,39 +1,47 @@
-<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 lang="ts">
+	import TitleBar from '../titleBar/TitleBar.svelte';
+	import Icon from '../icon/Icon.svelte';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { BoxProps } from './types.js';
+	import type { ExpandProps } from '../../types/index.js';
+	import Content from '../../utils/content/Content.svelte';
+
+	/** box actions */
+	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
+	}: ExpandProps<BoxProps> = $props();
+
+	function open() {
+		isOpen = true;
+	}
+	function toggle() {
+		isOpen = !isOpen;
+	}
+	function close() {
+		isOpen = false;
+	}
+
+	let closer = !showCloseControl ? {} : { onClose: () => actions.close() };
 </script>
 
 {#if isOpen}

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

@@ -1,6 +1,6 @@
-import type { CommonProps } from '../../types/index.js';
-import type { Snippet } from 'svelte';
-import type { DemoerStoryProps } from '../demoer/types.js';
+import type { CommonProps } from "../../types/index.js";
+import type { Snippet } from "svelte";
+import type { DemoerStoryProps } from "../demoer/types.js";
 export interface BoxProps extends CommonProps {
     element?: HTMLDivElement;
     style?: string;

package/dist/base/box/types.js

@@ -1,32 +1,32 @@
-import { demoerArgs } from '../demoer/demoer.utils.js';
+import { demoerArgs } from "../demoer/demoer.utils.js";
 export const BoxDemoValues = {
     isOpen: {
-        type: 'boolean',
-        default: true
+        type: "boolean",
+        default: true,
     },
     showCloseControl: {
-        type: 'boolean',
-        default: true
+        type: "boolean",
+        default: true,
     },
     hasMenu: {
-        type: 'boolean',
-        default: true
+        type: "boolean",
+        default: true,
     },
     title: {
-        type: 'string',
-        values: ['A smart title on a smart box', 'second title']
+        type: "string",
+        values: ["A smart title on a smart box", "second title"],
     },
     icon: {
-        type: 'icon',
-        values: ['mdi:window', 'mdi:user', undefined]
+        type: "icon",
+        values: ["mdi:window", "mdi:user", undefined],
     },
     content: {
-        type: 'string',
-        values: ['Some content as text / html', 'second content']
+        type: "string",
+        values: ["Some content as text / html", "second content"],
     },
     bottomZone: {
-        type: 'string',
-        values: ['bottomZone as text / html', 'second bottomZone']
-    }
+        type: "string",
+        values: ["bottomZone as text / html", "second bottomZone"],
+    },
 };
 export let { parameters, componentArgs } = demoerArgs(BoxDemoValues);

package/dist/base/breadCrumb/BreadCrumb.svelte

@@ -1,11 +1,15 @@
-<script lang="ts">import Slotted from "../../utils/slotted/Slotted.svelte";
-let {
-  class: className,
-  element,
-  children,
-  style,
-  breadList = []
-} = $props();
+<script lang="ts">
+	import type { ExpandProps } from '../../types/index.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { BreadCrumbProps } from './types.js';
+
+	let {
+		class: className,
+		element,
+		children,
+		style,
+		breadList = []
+	}: ExpandProps<BreadCrumbProps> = $props();
 </script>
 
 <nav bind:this={element} class="breadCrumb {className ?? ''}" {style}>

package/dist/base/cartouche/Cartouche.demo.svelte

@@ -1,11 +1,14 @@
-<script lang="ts">import Cartouche from "./Cartouche.svelte";
-import Demoer from "../demoer/Demoer.svelte";
-import DemoPage from "../demoer/DemoPage.svelte";
-import Icon from "../icon/Icon.svelte";
-import Button from "../../controls/button/Button.svelte";
-import ComponentDemo from "../demoer/DemoerComponent.svelte";
-import { parameters, componentArgs } from "./types.js";
-let code1 = `
+<script lang="ts">
+	import Cartouche from './Cartouche.svelte';
+	import Demoer from '../demoer/Demoer.svelte';
+	import DemoPage from '../demoer/DemoPage.svelte';
+	import Icon from '../icon/Icon.svelte';
+	import Button from '../../controls/button/Button.svelte';
+	import ComponentDemo from '../demoer/DemoerComponent.svelte';
+
+	import { parameters, componentArgs } from './types.js';
+
+	let code1 = `
 <Cartouche  class="marg-tb-1">
 	{#snippet cartoucheButtons()}
 		<Button size="medium">a button</Button>
@@ -21,7 +24,8 @@ let code1 = `
 	{/snippet}
 	<div class="pad-2 border-t">Some <br />Cartouche <br />content</div>
 </Cartouche>`;
-let code2 = `
+
+	let code2 = `
 	<Cartouche 
 		class="marg-tb-1" />`;
 </script>

package/dist/base/cartouche/Cartouche.svelte

@@ -1,46 +1,53 @@
-<script lang="ts">import { slide } from "svelte/transition";
-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";
-export const actions = {
-  open,
-  toggle,
-  close
-};
-let {
-  class: className = "",
-  classes = {},
-  style = void 0,
-  element = $bindable(),
-  primary,
-  secondary,
-  icon,
-  stacked = false,
-  component,
-  componentProps = {},
-  keepCartoucheContent = true,
-  showTitleDivider = false,
-  bordered = true,
-  children,
-  cartoucheIcon,
-  cartouchePrimary,
-  cartoucheSecondary,
-  cartoucheButtons,
-  isOpen = $bindable(),
-  dense,
-  tall
-} = $props();
-function open() {
-  isOpen = true;
-}
-function toggle(event) {
-  isOpen = !isOpen;
-}
-function close() {
-  isOpen = false;
-}
-const chevronIcon = !isOpen ? "chevron-down" : "chevron-up";
+<script lang="ts">
+	import { slide } from 'svelte/transition';
+	import Icon from '../icon/Icon.svelte';
+	import Button from '../../controls/button/Button.svelte';
+	import IconButton from '../../controls/button/IconButton.svelte';
+	import type { CartoucheClasses, CartoucheProps } from './types.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { ExpandProps } from '../../types/index.js';
+
+	export const actions = {
+		open,
+		toggle,
+		close
+	};
+
+	let {
+		class: className = '',
+		classes = {} as CartoucheClasses,
+		style = undefined,
+		element = $bindable(),
+		primary,
+		secondary,
+		icon,
+		stacked = false,
+		component,
+		componentProps = {},
+		keepCartoucheContent = true,
+		showTitleDivider = false,
+		bordered = true,
+		children,
+		cartoucheIcon,
+		cartouchePrimary,
+		cartoucheSecondary,
+		cartoucheButtons,
+		isOpen = $bindable(),
+		dense,
+		tall = "small"
+	}: ExpandProps<CartoucheProps> = $props();
+
+	function open() {
+		isOpen = true;
+	}
+	function toggle(event: Event) {
+		isOpen = !isOpen;
+	}
+	function close() {
+		isOpen = false;
+	}
+
+	const chevronIcon = !isOpen ? 'chevron-down' : 'chevron-up';
 </script>
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->

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

@@ -1,6 +1,6 @@
-import { type CommonProps, type ElementProps } from '../../types/index.js';
-import type { Snippet, SvelteComponent } from 'svelte';
-import type { DemoerStoryProps } from '../demoer/types.js';
+import { type CommonProps, type ElementProps } from "../../types/index.js";
+import type { Snippet, SvelteComponent } from "svelte";
+import type { DemoerStoryProps } from "../demoer/types.js";
 export type CartoucheClasses = {
     control: string;
     controlIcon: string;
@@ -20,7 +20,7 @@ export type CartoucheProps = CommonProps & {
     primary: string;
     /** displayed sub title of the cartouche */
     secondary?: string;
-    icon?: ElementProps['icon'];
+    icon?: ElementProps["icon"];
     /** can be set as a prop or as a className */
     stacked?: boolean;
     component?: SvelteComponent;
@@ -33,10 +33,10 @@ export type CartoucheProps = CommonProps & {
     bordered?: boolean;
     isOpen?: boolean;
     /** component actions	 */
-    actions?: Record<'open' | 'toggle' | 'close', (event: Event) => void>;
+    actions?: Record<"open" | "toggle" | "close", (event: Event) => void>;
     /** @deprecated */
-    dense?: ElementProps['dense'];
-    tall?: ElementProps['tall'];
+    dense?: ElementProps["dense"];
+    tall?: ElementProps["tall"];
     children?: Snippet;
     cartoucheIcon?: Snippet;
     cartouchePrimary?: Snippet;

package/dist/base/cartouche/types.js

@@ -1,38 +1,38 @@
-import { tallPreset } from '../../types/index.js';
-import { demoerArgs } from '../demoer/demoer.utils.js';
+import { tallPreset, } from "../../types/index.js";
+import { demoerArgs } from "../demoer/demoer.utils.js";
 export const cartoucheDemoValues = {
     primary: {
-        type: 'string',
-        values: ['A smart title', 'Second title']
+        type: "string",
+        values: ["A smart title", "Second title"],
     },
     secondary: {
-        type: 'string',
-        values: [undefined, 'A smart subtitle', 'Second subtitle'],
-        default: undefined
+        type: "string",
+        values: [undefined, "A smart subtitle", "Second subtitle"],
+        default: undefined,
     },
     icon: {
-        type: 'icon',
-        values: ['mdi:window', 'mdi:user', undefined]
+        type: "icon",
+        values: ["mdi:window", "mdi:user", undefined],
     },
     stacked: {
-        type: 'boolean',
-        default: false
+        type: "boolean",
+        default: false,
     },
     showTitleDivider: {
-        type: 'boolean',
-        default: false
+        type: "boolean",
+        default: false,
     },
     bordered: {
-        type: 'boolean',
-        default: false
+        type: "boolean",
+        default: false,
     },
     isOpen: {
-        type: 'boolean',
-        default: true
+        type: "boolean",
+        default: true,
     },
     tall: {
-        type: 'tall',
-        default: tallPreset.default
-    }
+        type: "tall",
+        default: tallPreset.default,
+    },
 };
 export let { parameters, componentArgs } = demoerArgs(cartoucheDemoValues);

package/dist/base/chipper/Chipper.demo.svelte

@@ -1,20 +1,24 @@
-<script lang="ts">import ComponentDemo from "../demoer/DemoerComponent.svelte";
-import Demoer from "../demoer/Demoer.svelte";
-import DemoPage from "../demoer/DemoPage.svelte";
-import { chipperDemoValues } from "./types.js";
-import { defaultsArgs } from "../demoer/demoer.utils.js";
-import Chipper from "./Chipper.svelte";
-import { parameters, componentArgs } from "./types.js";
-let codeSlot = `
+<script lang="ts">
+	import ComponentDemo from '../demoer/DemoerComponent.svelte';
+	import Demoer from '../demoer/Demoer.svelte';
+	import DemoPage from '../demoer/DemoPage.svelte';
+	import { chipperDemoValues, type ChipperProps } from './types.js';
+	import { defaultsArgs } from '../demoer/demoer.utils.js';
+	import Chipper from './Chipper.svelte';
+
+	import { parameters, componentArgs } from './types.js';
+
+	let codeSlot = `
 <Chipper >
 	<div class="pad-2">some content</div>
 	{#snippet chipperChip()}
 		<div class="theme-bg-primary radius-small w-full h-full"></div>
 	{/snippet}
 </Chipper>`;
-let codeProps = `
+
+	let codeProps = `
 <Chipper
-	content="<div class='pad'>Some props html content</div>"
+	content="<div class='pad'>Some props html content<\/div>"
 	color="red" />`;
 </script>
 

package/dist/base/chipper/Chipper.svelte

@@ -1,17 +1,22 @@
-<script lang="ts">import Slotted from "../../utils/slotted/Slotted.svelte";
-let {
-  class: className = "",
-  style,
-  element = $bindable(),
-  position = "bottom",
-  theme: status = "primary",
-  color = "",
-  content = "",
-  showChip = true,
-  chipperChip,
-  children
-} = $props();
-let cssColor = $derived(color ?? (status ? `var(--sld-color-${status})` : ""));
+<script lang="ts">
+	import type { CommonProps, ElementProps, ExpandProps } from '../../types/index.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { ChipperProps } from './types.js';
+
+	let {
+		class: className = '',
+		style,
+		element = $bindable<HTMLDivElement>(),
+		position = 'bottom',
+		theme: status = 'primary',
+		color = '',
+		content = '',
+		showChip = true,
+		chipperChip,
+		children
+	}: ExpandProps<ChipperProps> = $props();
+
+	let cssColor = $derived(color ?? (status ? `var(--sld-color-${status})` : ''));
 </script>
 
 <div bind:this={element} style="{style};position:relative;" class="chipper {className} ">

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

@@ -1,11 +1,11 @@
-import type { CommonProps, ElementProps } from '../../types/index.js';
-import type { Snippet } from 'svelte';
-import type { DemoerStoryProps } from '../demoer/types.js';
+import type { CommonProps, ElementProps } from "../../types/index.js";
+import type { Snippet } from "svelte";
+import type { DemoerStoryProps } from "../demoer/types.js";
 export interface ChipperProps extends CommonProps {
     /** position of the chipper  */
-    position?: ElementProps['position'];
+    position?: ElementProps["position"];
     /** status of the chip */
-    theme?: 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark';
+    theme?: "primary" | "secondary" | "tertiary" | "success" | "warning" | "danger" | "light" | "medium" | "dark";
     /** css color code for the chip */
     color?: string;
     /** text or html is snippet is not used */

package/dist/base/chipper/types.js

@@ -1,22 +1,22 @@
-import { demoerArgs } from '../demoer/demoer.utils.js';
+import { demoerArgs } from "../demoer/demoer.utils.js";
 export const chipperDemoValues = {
     showChip: {
-        type: 'boolean',
-        default: true
+        type: "boolean",
+        default: true,
     },
     position: {
-        type: 'position'
+        type: "position",
     },
     theme: {
-        type: 'theme'
+        type: "theme",
     },
     color: {
-        type: 'color',
-        values: ['#ff0000', '#00ff00', '#0000ff']
+        type: "color",
+        values: ["#ff0000", "#00ff00", "#0000ff"],
     },
     content: {
-        type: 'string',
-        values: ['Some content', 'Other content']
-    }
+        type: "string",
+        values: ["Some content", "Other content"],
+    },
 };
 export let { parameters, componentArgs } = demoerArgs(chipperDemoValues);

package/dist/base/columner/Column.svelte

@@ -1,34 +1,42 @@
-<script lang="ts">import { getContext, tick } from "svelte";
-import { resizer } from "../../utils/uses/resizer/resizer.js";
-import Slotted from "../../utils/slotted/Slotted.svelte";
-import { onEvent } from "../../utils/uses/event.js";
-let columner = getContext("columner");
-let {
-  class: className = "",
-  element = $bindable(),
-  style = "",
-  columnId = crypto.randomUUID(),
-  bottomSlot,
-  drawerTop,
-  children,
-  ...rest
-} = $props();
-if (!$columner[columnId]) {
-  $columner[columnId] = {
-    columnId: Object.keys($columner).length,
-    state: "default",
-    defaultStyle: {}
-  };
-}
-let width;
-function resizeStart() {
-}
-async function resizeOn(data) {
-  await tick();
-  width = data.detail.width + "px";
-}
-function resizeEnd() {
-}
+<script lang="ts">
+	import { getContext, tick } from 'svelte';
+	import type { ColumnProps, ColumnerStoreType } from './types.js';
+	import { resizer } from '../../utils/uses/resizer/resizer.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import { onEvent } from '../../utils/uses/event.js';
+
+	let columner = getContext<ColumnerStoreType>('columner');
+
+	let {
+		class: className = '',
+		element = $bindable(),
+		style = '',
+		columnId = crypto.randomUUID() as string,
+		bottomSlot,
+		drawerTop,
+		children,
+		...rest
+	}: ColumnProps = $props();
+
+	if (!$columner[columnId]) {
+		$columner[columnId] = {
+			columnId: Object.keys($columner).length,
+			state: 'default',
+			defaultStyle: {}
+		};
+	}
+
+	let width: string;
+
+	function resizeStart() {}
+
+	async function resizeOn(data: CustomEvent<{ width: any }>) {
+		await tick();
+		width = data.detail.width + 'px';
+		// $dataListContext.columns[field].width = data.detail.width + 'px';
+	}
+
+	function resizeEnd() {}
 </script>
 
 <div

package/dist/base/columner/Columner.demo.svelte

@@ -1,6 +1,7 @@
-<script lang="ts">import ComponentDemo from "../demoer/DemoerComponent.svelte";
-import Column from "./Column.svelte";
-import Columner from "./Columner.svelte";
+<script lang="ts">
+	import ComponentDemo from '../demoer/DemoerComponent.svelte';
+	import Column from './Column.svelte';
+	import Columner from './Columner.svelte';
 </script>
 
 todo

package/dist/base/columner/Columner.svelte

@@ -1,8 +1,15 @@
-<script lang="ts">import { setContext } from "svelte";
-import { writable } from "svelte/store";
-const columner = writable({});
-setContext("columner", columner);
-let { children, ...restProps } = $props();
+<script lang="ts">
+	import type { ExpandProps } from '../../types/index.js';
+	import type { ColumnerStoreType } from './types.js';
+	import { setContext, type Snippet } from 'svelte';
+	import { writable } from 'svelte/store';
+
+	const columner = writable<ColumnerStoreType>({});
+	setContext('columner', columner);
+	type Props = {
+		children: Snippet;
+	};
+	let { children, ...restProps }: ExpandProps<Props> = $props();
 </script>
 
 <div class="columner" {...restProps}>