@medyll/idae-slotui-svelte 0.26.0 → 0.28.0

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/contentSwitcher/types.d.ts

@@ -1,6 +1,6 @@
-import type { CommonProps, IconObj } from '../../types/index.js';
-import type { Snippet } from 'svelte';
-import type { DemoerStoryProps } from '../demoer/types.js';
+import type { CommonProps, IconObj } from "../../types/index.js";
+import type { Snippet } from "svelte";
+import type { DemoerStoryProps } from "../demoer/types.js";
 export type ContentSwitcherProps = CommonProps & {
     /** className off the root component */
     class?: string;

package/dist/base/contentSwitcher/types.js

@@ -1,12 +1,12 @@
-import { demoerArgs } from '../demoer/demoer.utils.js';
+import { demoerArgs } from "../demoer/demoer.utils.js";
 export const contentSwitcherDemoValues = {
     icon: {
-        type: 'icon',
-        values: ['mdi:window', 'mdi:user', undefined]
+        type: "icon",
+        values: ["mdi:window", "mdi:user", undefined],
     },
     iconback: {
-        type: 'icon',
-        values: ['mdi:window', 'mdi:user', undefined]
-    }
+        type: "icon",
+        values: ["mdi:window", "mdi:user", undefined],
+    },
 };
 export let { parameters, componentArgs } = demoerArgs(contentSwitcherDemoValues);

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,19 +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 });
-$inspect(activeParams);
+<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/demoer/demoer.utils.d.ts

@@ -1,4 +1,5 @@
-import type { DemoerStoryProps } from './types.js';
+import type { DemoerStoryProps } from "./types.js";
+export type { DemoerStoryProps };
 export declare function demoerArgs<T = Record<string, any>>(parametersProps: DemoerStoryProps<T>): {
     parameters: DemoerStoryProps<T>;
     componentArgs: T;

package/dist/base/demoer/demoer.utils.js

@@ -1,5 +1,8 @@
 export function demoerArgs(parametersProps) {
-    return { parameters: parametersProps, componentArgs: defaultsArgs({ ...parametersProps }) };
+    return {
+        parameters: parametersProps,
+        componentArgs: defaultsArgs({ ...parametersProps }),
+    };
 }
 export function defaultsArgs(parametersProps) {
     const out = {};

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>
 

package/dist/base/divider/Divider.svelte

@@ -1,44 +1,61 @@
-<script lang="ts">import { uiPresets } from "../../utils/engine/presets.js";
-let {
-  class: className = "",
-  style,
-  element = null,
-  dense: density = "default",
-  orientation: direction = "horizontal",
-  expansion = "full",
-  shadowed: shadow = false,
-  color
-} = $props();
-let extensionClass = {
-  horizontal: {
-    full: "",
-    padded: "marg-ii-12",
-    centered: "marg-ii-6"
-  },
-  vertical: {
-    full: "",
-    padded: "marg-ii-12",
-    centered: "marg-ii-6"
-  }
-};
-let addStyle = style ?? "";
-const shadowClass = $derived(shadow ? "shad-3" : "");
-if (color) addStyle += `--sld-color-border:${color};`;
-if (direction === "vertical" && (element?.nextElementSibling ?? element?.previousElementSibling)) {
-  let maxHeight = (element?.previousElementSibling ?? element?.nextElementSibling)?.getBoundingClientRect()?.height;
-  addStyle += `height:calc(${maxHeight}px - ${getDensity(density)});`;
-}
-function getDensity(density2) {
-  return uiPresets.density?.[density2];
-}
-switch (direction) {
-  case "horizontal":
-    addStyle += `margin-top:${getDensity(density)};margin-bottom:${getDensity(density)};`;
-    break;
-  case "vertical":
-    addStyle += `margin-left:${getDensity(density)};margin-right:${getDensity(density)};`;
-    break;
-}
+<script lang="ts">
+	/** extends button */
+	import type { ElementProps, ExpandProps } from '../../types/index.js';
+	import { uiPresets } from '../../utils/engine/presets.js';
+	import type { DividerProps } from './types.js';
+	let {
+		class: className = '',
+		style,
+		element = null,
+		dense: density = 'default',
+		orientation: direction = 'horizontal',
+		expansion = 'full',
+		shadowed: shadow = false,
+		color
+	}: ExpandProps<DividerProps> = $props();
+
+	let extensionClass = {
+		horizontal: {
+			full: '',
+			padded: 'marg-ii-12',
+			centered: 'marg-ii-6'
+		},
+		vertical: {
+			full: '',
+			padded: 'marg-ii-12',
+			centered: 'marg-ii-6'
+		}
+	};
+	let addStyle: string = (style as unknown as string) ?? ('' as unknown as string);
+
+	const shadowClass = $derived(shadow ? 'shad-3' : '');
+
+	if (color) addStyle += `--sld-color-border:${color};`;
+
+	// set height od divider when direction === vertical in a flex env
+	if (
+		direction === 'vertical' &&
+		(element?.nextElementSibling ?? element?.previousElementSibling)
+	) {
+		let maxHeight = (
+			element?.previousElementSibling ?? element?.nextElementSibling
+		)?.getBoundingClientRect()?.height;
+
+		addStyle += `height:calc(${maxHeight}px - ${getDensity(density)});`;
+	}
+
+	function getDensity(density: ElementProps['density']) {
+		return uiPresets.density?.[density];
+	}
+
+	switch (direction) {
+		case 'horizontal':
+			addStyle += `margin-top:${getDensity(density)};margin-bottom:${getDensity(density)};`;
+			break;
+		case 'vertical':
+			addStyle += `margin-left:${getDensity(density)};margin-right:${getDensity(density)};`;
+			break;
+	}
 </script>
 
 <hr

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

@@ -1,5 +1,5 @@
-import { type ElementProps } from '../../types/index.js';
-import type { DemoerStoryProps } from '../demoer/types.js';
+import { type ElementProps } from "../../types/index.js";
+import type { DemoerStoryProps } from "../demoer/types.js";
 export type DividerProps = {
     /** className off the root component */
     class?: string;
@@ -10,17 +10,17 @@ export type DividerProps = {
     /**
      * margins and with applied to divider
      */
-    dense?: ElementProps['dense'];
+    dense?: ElementProps["dense"];
     /**
      * default direction of the divider
      * @type {'vertical' | 'horizontal'}
      */
-    orientation?: ElementProps['orientation'];
+    orientation?: ElementProps["orientation"];
     /**
      * expansion of the divider
      * @type {'full' | 'padded' | 'centered'}
      */
-    expansion?: 'full' | 'padded' | 'centered';
+    expansion?: "full" | "padded" | "centered";
     /** give shadow to divider */
     shadowed?: boolean;
     /** give color to divider */

package/dist/base/divider/types.js

@@ -1,22 +1,22 @@
-import { densePreset, uiPresets } from '../../types/index.js';
-import { demoerArgs } from '../demoer/demoer.utils.js';
+import { densePreset, uiPresets } from "../../types/index.js";
+import { demoerArgs } from "../demoer/demoer.utils.js";
 export const DividerDemoValues = {
     dense: {
-        type: 'dense',
-        default: densePreset.default
+        type: "dense",
+        default: densePreset.default,
     },
     orientation: {
-        type: 'direction'
+        type: "direction",
     },
     expansion: {
-        type: 'string',
-        values: ['full', 'padded', 'centered']
+        type: "string",
+        values: ["full", "padded", "centered"],
     },
     shadowed: {
-        type: 'boolean'
+        type: "boolean",
     },
     color: {
-        type: 'color'
-    }
+        type: "color",
+    },
 };
 export let { parameters, componentArgs } = demoerArgs(DividerDemoValues);

package/dist/base/icon/Icon.demo.svelte

@@ -1,8 +1,11 @@
-<script lang="ts">import ComponentDemo from "../demoer/DemoerComponent.svelte";
-import { DemoPage, Demoer } from "../../index.js";
-import Icon from "./Icon.svelte";
-import { parameters, componentArgs } from "./types.js";
-let code = `
+<script lang="ts">
+	import ComponentDemo from '../demoer/DemoerComponent.svelte';
+	import { DemoPage, Demoer } from '../../index.js';
+	import Icon from './Icon.svelte';
+
+	import { parameters, componentArgs } from './types.js';
+
+	let code = `
 <Icon>
     mdi:tree
 </Icon>`;

package/dist/base/icon/Icon.svelte

@@ -1,30 +1,37 @@
-<script lang="ts">import { iconFontSize } from "../../types/index.js";
-import Iconify from "@iconify/svelte";
-let {
-  icon = $bindable("question"),
-  class: className,
-  style,
-  element = $bindable(),
-  iconSize = $bindable(),
-  rotate = false,
-  color = $bindable(),
-  rotation = 0,
-  ico,
-  ...rest
-} = $props();
-iconSize = iconSize || "small";
-const sizes = iconFontSize;
-let finalI = $derived(ico?.icon ?? (typeof icon === "object" ? icon.icon : icon));
-let finRot = $derived(ico?.rotate ?? (typeof icon === "object" ? icon.rotate : rotate));
-let finRotation = $derived(
-  ico?.rotation ?? (typeof icon === "object" ? icon.rotation : rotation)
-);
-let finCol = $derived(ico?.color ?? (typeof icon === "object" ? icon.color : color));
-let finSize = $derived(ico?.iconSize ?? (typeof icon === "object" ? iconSize : iconSize));
-let iconName = $derived(finalI.includes(":") ? finalI : `mdi:${finalI}`);
-let finalStyle = $derived(
-  `display:block;font-size:${sizes[finSize]};color:${finCol};transform: rotate(${finRotation}deg);${style};`
-);
+<script lang="ts">
+	import { iconFontSize, type ElementProps, type ExpandProps } from '../../types/index.js';
+	import type { IconAppProps } from './types.js';
+	import Iconify from '@iconify/svelte';
+
+	let {
+		icon = $bindable('question'),
+		class: className,
+		style,
+		element = $bindable<HTMLDivElement>(),
+		iconSize = $bindable(),
+		rotate = false,
+		color = $bindable(),
+		rotation = 0,
+		ico,
+		...rest
+	}: ExpandProps<IconAppProps> = $props();
+
+	iconSize = iconSize || 'small';
+
+	const sizes: Record<ElementProps['iconSize'], string> = iconFontSize;
+
+	let finalI = $derived(ico?.icon ?? (typeof icon === 'object' ? icon.icon : icon));
+	let finRot = $derived(ico?.rotate ?? (typeof icon === 'object' ? icon.rotate : rotate));
+	let finRotation = $derived(
+		ico?.rotation ?? (typeof icon === 'object' ? icon.rotation : rotation)
+	);
+	let finCol = $derived(ico?.color ?? (typeof icon === 'object' ? icon.color : color));
+	let finSize = $derived(ico?.iconSize ?? (typeof icon === 'object' ? iconSize : iconSize));
+	let iconName = $derived(finalI.includes(':') ? finalI : `mdi:${finalI}`);
+
+	let finalStyle = $derived(
+		`display:block;font-size:${sizes[finSize]};color:${finCol};transform: rotate(${finRotation}deg);${style};`
+	);
 </script>
 
 {#key [icon, iconName, color, finalStyle]}