@medyll/idae-slotui-svelte 0.68.0 → 0.70.0

package/dist/base/cartouche/Cartouche.svelte

@@ -1,47 +1,55 @@
-<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 = false,
-  children,
-  cartoucheIcon,
-  cartouchePrimary,
-  cartoucheSecondary,
-  cartoucheButtons,
-  isOpen = $bindable(),
-  dense,
-  tall = "small"
-} = $props();
-function open() {
-  isOpen = true;
-}
-function toggle(event) {
-  isOpen = !isOpen;
-}
-function close() {
-  isOpen = false;
-}
-const chevronIcon = $derived(!isOpen ? "chevron-down" : "chevron-up");
-let Component = $state(component);
+<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 = false,
+		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 = $derived(!isOpen ? 'chevron-down' : 'chevron-up');
+
+	let Component = $state(component);
 </script>
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->

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/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}>

package/dist/base/contentSwitcher/ContentSwitcher.demo.svelte

@@ -1,11 +1,14 @@
-<script lang="ts">import ComponentDemo from "../demoer/DemoerComponent.svelte";
-import { Demoer } from "../../../sitedata/slotuiComponents.js";
-import Icon from "../icon/Icon.svelte";
-import DemoPage from "../demoer/DemoPage.svelte";
-import ContentSwitcher from "./ContentSwitcher.svelte";
-import { contentSwitcherDemoValues } from "./types.js";
-import { parameters, componentArgs } from "./types.js";
-const code = `
+<script lang="ts">
+	import ComponentDemo from '../demoer/DemoerComponent.svelte';
+	import { Demoer } from '../../../sitedata/slotuiComponents.js';
+	import Icon from '../icon/Icon.svelte';
+	import DemoPage from '../demoer/DemoPage.svelte';
+	import ContentSwitcher from './ContentSwitcher.svelte';
+	import { contentSwitcherDemoValues } from './types.js';
+
+	import { parameters, componentArgs } from './types.js';
+
+	const code = `
 <ContentSwitcher {...activeParams} class="marg-tb-1">
     {#snippet contentSwitcherTogglerIcon()}
         <Icon icon="mdi:tree" />

package/dist/base/contentSwitcher/ContentSwitcher.svelte

@@ -1,33 +1,43 @@
-<script lang="ts">import IconButton from "../../controls/button/IconButton.svelte";
-import Button from "../../controls/button/Button.svelte";
-import Slotted from "../../utils/slotted/Slotted.svelte";
-let {
-  class: className = "",
-  element = void 0,
-  style,
-  icon = "toggle",
-  iconback = "chevron-left",
-  parent = void 0,
-  contentSwitcherTogglerIcon: togglerIcon,
-  contentSwitcherBackIcon: backIcon,
-  contentSwitcherReveal
-} = $props();
-let visibleSate = $state(false);
-let thisRef;
-let realParent = $derived(parent ?? element?.parentElement ?? null);
-function handleClick(event) {
-  visibleSate = !visibleSate;
-  if (!element || !realParent) return false;
-  const children = realParent?.children;
-  Array.from(children).forEach((li) => {
-    li.style.display = visibleSate ? "none" : "";
-  });
-  if (visibleSate) {
-    realParent.appendChild(thisRef);
-  } else {
-    element.appendChild(thisRef);
-  }
-}
+<script lang="ts">
+	import IconButton from '../../controls/button/IconButton.svelte';
+	import Button from '../../controls/button/Button.svelte';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { ContentSwitcherProps } from './types.js';
+	import type { ExpandProps } from '../../types/index.js';
+
+	let {
+		class: className = '',
+		element = undefined,
+		style,
+		icon = 'toggle',
+		iconback = 'chevron-left',
+		parent = undefined,
+		contentSwitcherTogglerIcon: togglerIcon,
+		contentSwitcherBackIcon: backIcon,
+		contentSwitcherReveal
+	}: ExpandProps<ContentSwitcherProps> = $props();
+
+	let visibleSate: boolean = $state(false);
+	let thisRef: any;
+	let realParent: HTMLElement | null = $derived(parent ?? element?.parentElement ?? null);
+
+	function handleClick(event: MouseEvent) {
+		visibleSate = !visibleSate;
+		if (!element || !realParent) return false;
+		const children: HTMLCollection = realParent?.children;
+
+		// iterate over all child nodes
+		Array.from(children).forEach((li: any) => {
+			//li.style.transform = visibleSate ? 'scale(0,0)' : '';
+			li.style.display = visibleSate ? 'none' : '';
+		});
+
+		if (visibleSate) {
+			realParent.appendChild(thisRef);
+		} else {
+			element.appendChild(thisRef);
+		}
+	}
 </script>
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->

package/dist/base/debug/Debug.svelte

@@ -1,14 +1,17 @@
-<script lang="ts">import Cartouche from "../cartouche/Cartouche.svelte";
-const items = [
-  { label: "theTitle", code: "theTitle1" },
-  { label: "theTitle bis", code: "theTitle2" },
-  {
-    label: "theTitle ter",
-    code: "theTitle3",
-    component: Cartouche,
-    componentProps: { label: "dynamic" }
-  }
-];
+<script lang="ts">
+	import Cartouche from '../cartouche/Cartouche.svelte';
+	import type TabsItemsProps from '../../navigation/tabs/Tabs.svelte';
+
+	const items: TabsItemsProps = [
+		{ label: 'theTitle', code: 'theTitle1' },
+		{ label: 'theTitle bis', code: 'theTitle2' },
+		{
+			label: 'theTitle ter',
+			code: 'theTitle3',
+			component: Cartouche,
+			componentProps: { label: 'dynamic' }
+		}
+	];
 </script>
 
 <div style="padding:0.5rem">

package/dist/base/demoer/DemoPage.svelte

@@ -1,15 +1,21 @@
-<script lang="ts">import Icon from "../icon/Icon.svelte";
-import DemoerCode from "./DemoerCode.svelte";
-import Slotted from "../../utils/slotted/Slotted.svelte";
-let {
-  title = "",
-  code = "",
-  subTitle,
-  component,
-  children,
-  demoerCode
-} = $props();
-let codeT = subTitle ? subTitle : `component ${component} demo ${title?.toLowerCase()}`;
+<script lang="ts">
+	import Icon from '../icon/Icon.svelte';
+	import type { Snippet } from 'svelte';
+	import DemoerCode from './DemoerCode.svelte';
+	import type { CommonProps } from '../../types/index.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { DemoPageProps } from './types.js';
+
+	let {
+		title = '',
+		code = '',
+		subTitle,
+		component,
+		children,
+		demoerCode
+	}: DemoPageProps = $props();
+
+	let codeT = subTitle ? subTitle : `component ${component} demo ${title?.toLowerCase()}`;
 </script>
 
 <div>

package/dist/base/demoer/Demoer.svelte

@@ -1,18 +1,23 @@
-<script lang="ts" generics="T=Record<string, any>">import Button from "../../controls/button/Button.svelte";
-import Icon from "../icon/Icon.svelte";
-import Switch from "../../controls/switch/Switch.svelte";
-import Slotted from "../../utils/slotted/Slotted.svelte";
-import { densePreset, flowPreset, uiPresets } from "../../types/index.js";
-import IconButton from "../../controls/button/IconButton.svelte";
-let {
-  title,
-  parameters = $bindable({}),
-  component = $bindable(),
-  componentArgs = $bindable({}),
-  multiple = {},
-  children
-} = $props();
-let activeParams = $state({ ...componentArgs });
+<script lang="ts" generics="T=Record<string, any>">
+	import Button from '../../controls/button/Button.svelte';
+	import Icon from '../icon/Icon.svelte';
+	import Switch from '../../controls/switch/Switch.svelte';
+	import type { DemoerProps, DemoerStoryProps } from './types.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import { densePreset, flowPreset, uiPresets } from '../../types/index.js';
+	import IconButton from '../../controls/button/IconButton.svelte';
+
+	let {
+		title,
+		parameters = $bindable<DemoerStoryProps<T>>({} as DemoerStoryProps<T>),
+		component = $bindable(),
+		componentArgs = $bindable<T>({} as T),
+		multiple = {},
+		children
+	}: DemoerProps<T> = $props();
+
+	let activeParams: T = $state({ ...componentArgs });
+
 </script>
 
 {#if title}

package/dist/base/demoer/DemoerCode.svelte

@@ -1,9 +1,31 @@
-<script lang="ts">import Prism from "prismjs";
-import "prismjs/plugins/normalize-whitespace/prism-normalize-whitespace";
-import "prism-svelte";
-import Icon from "../icon/Icon.svelte";
-let { title = void 0, code = "", subTitle, component, demoerCode } = $props();
-const highlighted = Prism.highlight(code, Prism.languages.svelte, "svelte");
+<script lang="ts">
+	import Prism from 'prismjs';
+	import 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace';
+	import 'prism-svelte';
+	import Icon from '../icon/Icon.svelte';
+	import type { Snippet } from 'svelte';
+
+	type DemoerCodeProps = {
+		title?: string;
+		code: string;
+		subTitle?: string;
+		component?: string;
+		demoerCode?: Snippet;
+	};
+
+	let { title = undefined, code = '', subTitle, component, demoerCode }: DemoerCodeProps = $props();
+
+	/* Prism.plugins.NormalizeWhitespace.setDefaults({
+		'remove-trailing': true,
+		'remove-indent': true,
+		'left-trim': false,
+		'right-trim': false,
+		'break-lines': 80, 
+		'remove-initial-line-feed': true,
+		'tabs-to-spaces': 2 
+	}); */
+
+	const highlighted = Prism.highlight(code, Prism.languages.svelte, 'svelte');
 </script>
 
 <div>

package/dist/base/demoer/DemoerComponent.svelte

@@ -1,16 +1,36 @@
-<script lang="ts" generics="T=Data">import { componentCite } from "../../componentCite.js";
-import Slotted from "../../utils/slotted/Slotted.svelte";
-let {
-  component,
-  cite = componentCite?.[component.toLowerCase()] ?? "",
-  code,
-  title = "",
-  componentArgs = {},
-  parameters = {},
-  children
-} = $props();
-let citation = componentCite?.[component.toLowerCase()]?.cite ?? "";
-let author = componentCite?.[component.toLowerCase()]?.author ?? "";
+<script lang="ts" generics="T=Data">
+	//import { slotuiCatalog } from '../../../sitedata/slotuiCatalog.js';
+	import { componentCite } from '../../componentCite.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { Snippet } from 'svelte';
+	import type { Data } from '../../types/index.js';
+
+	let {
+		component,
+		cite = componentCite?.[component.toLowerCase()] ?? '',
+		code,
+		title = '',
+		componentArgs = {} as T,
+		parameters = {} as T,
+		children
+	}: {
+		component: string;
+		/** parameters values for the component */
+		parameters?: T;
+		/** component demo arguments for props */
+		componentArgs?: T;
+		cite?: string;
+		/** code sample */
+		code?: string;
+		title?: string;
+		/** use for several DemoPage */
+		children: Snippet;
+	} = $props();
+
+	let citation = componentCite?.[component.toLowerCase()]?.cite ?? '';
+	let author = componentCite?.[component.toLowerCase()]?.author ?? '';
+
+	// const compDet = '';Object.values(slotuiCatalog).find((x) => x.name === component);
 </script>
 
 <div class="flex-v gap-large w-full">

package/dist/base/divider/Divider.demo.svelte

@@ -1,9 +1,15 @@
-<script lang="ts">import Divider from "./Divider.svelte";
-import ComponentDemo from "../demoer/DemoerComponent.svelte";
-import Demoer from "../demoer/Demoer.svelte";
-import DemoPage from "../demoer/DemoPage.svelte";
-import { parameters, componentArgs } from "./types.js";
-let codeSlot = `
+<script lang="ts">
+	import Divider from './Divider.svelte';
+
+	/* demo */
+	import ComponentDemo from '../demoer/DemoerComponent.svelte';
+	import Demoer from '../demoer/Demoer.svelte';
+	import DemoPage from '../demoer/DemoPage.svelte';
+	/* demo */
+
+	import { parameters, componentArgs } from './types.js';
+
+	let codeSlot = `
 	<Divider />`;
 </script>