@medyll/idae-slotui-svelte 0.3.0

package/dist/base/cartouche/types.js

@@ -0,0 +1,38 @@
+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']
+    },
+    secondary: {
+        type: 'string',
+        values: [undefined, 'A smart subtitle', 'Second subtitle'],
+        default: undefined
+    },
+    icon: {
+        type: 'icon',
+        values: ['mdi:window', 'mdi:user', undefined]
+    },
+    stacked: {
+        type: 'boolean',
+        default: false
+    },
+    showTitleDivider: {
+        type: 'boolean',
+        default: false
+    },
+    bordered: {
+        type: 'boolean',
+        default: false
+    },
+    isOpen: {
+        type: 'boolean',
+        default: true
+    },
+    tall: {
+        type: 'tall',
+        default: tallPreset.default
+    }
+};
+export let { parameters, componentArgs } = demoerArgs(cartoucheDemoValues);

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

@@ -0,0 +1,41 @@
+<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 = `
+<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 = `
+<Chipper
+	content="<div class='pad'>Some props html content</div>"
+	color="red" />`;
+</script>
+
+<ComponentDemo component="Chipper">
+	<DemoPage component="Chipper" code={codeSlot}>
+		<Demoer {parameters} {componentArgs}>
+			{#snippet children({ activeParams })}
+				<Chipper {...activeParams}>
+					<div class="pad-2">some content</div>
+					{#snippet chipperChip()}
+						<div class="theme-bg-primary radius-small w-full h-full"></div>
+					{/snippet}
+				</Chipper>
+			{/snippet}
+		</Demoer>
+	</DemoPage>
+	<DemoPage title="Without slots" component="Chipper" code={codeProps}>
+		<Demoer {parameters} {componentArgs}>
+			{#snippet children({ activeParams })}
+				<Chipper {...activeParams} />
+			{/snippet}
+		</Demoer>
+	</DemoPage>
+</ComponentDemo>

package/dist/base/chipper/Chipper.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 ChipperProps_ = typeof __propDef.props;
+export { ChipperProps_ as ChipperProps };
+export type ChipperEvents = typeof __propDef.events;
+export type ChipperSlots = typeof __propDef.slots;
+export default class Chipper extends SvelteComponent<ChipperProps_, ChipperEvents, ChipperSlots> {
+}

package/dist/base/chipper/Chipper.svelte

@@ -0,0 +1,93 @@
+<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>
+
+<div bind:this={element} style="{style};position:relative;" class="chipper {className} ">
+	<Slotted child={children}>
+		{#if content}
+			<div class="chipper-content">{@html content ?? ''}</div>
+		{/if}
+	</Slotted>
+
+	<chip class="chipper-chip" data-position={position} style:--css-button-chip-color={cssColor}>
+		{#if showChip}
+			<Slotted child={chipperChip} />
+		{/if}
+	</chip>
+</div>
+
+<style>:root {
+  --chipper-gap: var(--sld-gap-tiny);
+  --chipper-radius: var(--sld-radius-large);
+  --chipper-chip-color: var(--css-button-chip-color, var(--sld-color-primary));
+}
+
+.chipper {
+  position: relative;
+  gap: var(--chipper-gap);
+}
+
+.chipper .chipper-content {
+  padding: 0.5rem;
+}
+
+.chipper .chipper-chip {
+  display: block;
+  position: absolute;
+  z-index: 2;
+  border-radius: var(--chipper-radius);
+  transition: all 0.25s;
+  max-height: 100%;
+  background-color: var(--chipper-chip-color);
+}
+
+.chipper .chipper-chip[data-position=left] {
+  top: 2px;
+  left: 2px;
+  height: 100%;
+  width: 3px;
+}
+
+.chipper .chipper-chip[data-position=right] {
+  top: 2px;
+  right: 2px;
+  height: 130px;
+  width: 3px;
+}
+
+.chipper .chipper-chip[data-position=top] {
+  height: 4px;
+  top: 2px;
+  left: 50%;
+  transform: translate(-50%, 0);
+  width: 50%;
+}
+
+.chipper .chipper-chip[data-position=bottom] {
+  height: 4px;
+  bottom: 2px;
+  left: 50%;
+  transform: translate(-50%, 0);
+  width: 50%;
+}
+
+.chipper .chipper-chip .defaultChip,
+.chipper .chipper-chip [slot=chipperChip] {
+  display: block;
+  height: 100%;
+  width: 100%;
+  min-height: 3px;
+  background-color: var(--chipper-chip-color);
+}</style>

package/dist/base/chipper/Chipper.svelte.d.ts

@@ -0,0 +1,32 @@
+import { SvelteComponent } from "svelte";
+import type { ElementProps } from '../../types/index.js';
+declare const __propDef: {
+    props: {
+        position?: ElementProps["position"];
+        theme?: "primary" | "secondary" | "tertiary" | "success" | "warning" | "danger" | "light" | "medium" | "dark";
+        color?: string;
+        content?: string;
+        showChip?: boolean;
+        chipperChip?: import("svelte").Snippet;
+        '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]>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type ChipperProps_ = typeof __propDef.props;
+export { ChipperProps_ as ChipperProps };
+export type ChipperEvents = typeof __propDef.events;
+export type ChipperSlots = typeof __propDef.slots;
+export default class Chipper extends SvelteComponent<ChipperProps_, ChipperEvents, ChipperSlots> {
+}

package/dist/base/chipper/chipper.scss

@@ -0,0 +1,65 @@
+@import "../../styles/slotui-mixins.scss";
+
+:root {
+    --chipper-gap: var(--sld-gap-tiny);
+    --chipper-radius: var(--sld-radius-large);
+    --chipper-chip-color: var(--css-button-chip-color, var(--sld-color-primary));
+}
+
+.chipper {
+    position: relative;
+    gap: var(--chipper-gap);
+
+    .chipper-content {
+        padding: 0.5rem;
+    }
+
+    .chipper-chip {
+        display: block;
+        position: absolute;
+        z-index: 2;
+        border-radius: var(--chipper-radius);
+        transition: all 0.25s;
+        max-height: 100%;
+        background-color: var(--chipper-chip-color);
+
+        &[data-position="left"] {
+            top: 2px;
+            left: 2px;
+            height: 100%;
+            width: 3px;
+        }
+
+        &[data-position="right"] {
+            top: 2px;
+            right: 2px;
+            height: 130px;
+            width: 3px;
+        }
+
+        &[data-position="top"] {
+            height: 4px;
+            top: 2px;
+            left: 50%;
+            transform: translate(-50%, 0);
+            width: 50%;
+        }
+
+        &[data-position="bottom"] {
+            height: 4px;
+            bottom: 2px;
+            left: 50%;
+            transform: translate(-50%, 0);
+            width: 50%;
+        }
+
+        .defaultChip,
+        [slot="chipperChip"] {
+            display: block;
+            height: 100%;
+            width: 100%;
+            min-height: 3px;
+            background-color: var(--chipper-chip-color);
+        }
+    }
+}

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

@@ -0,0 +1,18 @@
+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'];
+    /** status of the chip */
+    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 */
+    content?: string;
+    /** show or hide the chip */
+    showChip?: boolean;
+    chipperChip?: Snippet;
+}
+export declare const chipperDemoValues: DemoerStoryProps<ChipperProps>;
+export declare let parameters: DemoerStoryProps<ChipperProps>, componentArgs: ChipperProps;

package/dist/base/chipper/types.js

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

package/dist/base/columner/Column.svelte

@@ -0,0 +1,75 @@
+<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>
+
+<div
+	bind:this={element}
+	id={columnId}
+	class="column {className}"
+	use:resizer
+	use:onEvent={{ event: 'on:resizer:start', action: resizeStart }}
+	use:onEvent={{ event: 'on:resizer:resize', action: resizeOn }}
+	use:onEvent={{ event: 'on:resizer:end', action: resizeEnd }}
+	style:width
+	{...rest}
+>
+	<Slotted child={drawerTop}></Slotted>
+	<div class="content">
+		{width}
+
+		<Slotted child={children}></Slotted>
+	</div>
+	<Slotted child={bottomSlot}></Slotted>
+</div>
+
+<style>.column {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  min-width: 110px;
+  position: relative;
+  flex-direction: column;
+  border-right: 1px solid var(--sld-column-bordercolor, var(--sld-color-foreground-alpha-high));
+  box-shadow: var(--sld-elevation-1);
+}
+.column [data-resizer=true] {
+  background-color: red;
+}
+.column .content {
+  flex: 1;
+  overflow: hidden;
+}
+.column .commandBar {
+  position: sticky;
+  top: 0;
+}</style>

package/dist/base/columner/Column.svelte.d.ts

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

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

@@ -0,0 +1,14 @@
+<script lang="ts">import ComponentDemo from "../demoer/DemoerComponent.svelte";
+import Column from "./Column.svelte";
+import Columner from "./Columner.svelte";
+</script>
+
+todo
+<ComponentDemo component="Column" cite="What else, cells ? We are columns <br /> D. Viesas, 1964">
+	<Columner style="height:350px">
+		<Column style="width:150px">1</Column>
+		<Column style="width:150px">2</Column>
+		<Column style="width:150px">2</Column>
+		<Column style="width:150px;right:0">3</Column>
+	</Columner>
+</ComponentDemo>

package/dist/base/columner/Columner.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 ColumnerProps = typeof __propDef.props;
+export type ColumnerEvents = typeof __propDef.events;
+export type ColumnerSlots = typeof __propDef.slots;
+export default class Columner extends SvelteComponent<ColumnerProps, ColumnerEvents, ColumnerSlots> {
+}
+export {};

package/dist/base/columner/Columner.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">import { setContext } from "svelte";
+import { writable } from "svelte/store";
+const columner = writable({});
+setContext("columner", columner);
+let { children, ...restProps } = $props();
+</script>
+
+<div class="columner" {...restProps}>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>.columner {
+  display: flex;
+  height: 100%;
+  position: relative;
+}</style>

package/dist/base/columner/Columner.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import { type Snippet } from 'svelte';
+declare const __propDef: {
+    props: {
+        children: Snippet;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ColumnerProps = typeof __propDef.props;
+export type ColumnerEvents = typeof __propDef.events;
+export type ColumnerSlots = typeof __propDef.slots;
+export default class Columner extends SvelteComponent<ColumnerProps, ColumnerEvents, ColumnerSlots> {
+}
+export {};

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

@@ -0,0 +1,17 @@
+import type { CommonProps } from '../../types/index.js';
+import type { Snippet } from 'svelte';
+export type ColumnProps = CommonProps & {
+    /** unique id of the column */
+    columnId: string;
+    /** snippet for the top of the drawer */
+    drawerTop?: Snippet;
+    /** snippet for the bottom of the column */
+    bottomSlot?: Snippet;
+};
+export type ColumnerStoreType = Record<string, ColumnType>;
+export interface ColumnType {
+    columnId: string;
+    state: keyof typeof states;
+}
+declare const states: string[];
+export {};

package/dist/base/columner/types.js

@@ -0,0 +1,2 @@
+const states = ['expanded', 'equal', 'minimal', 'default'];
+export {};

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

@@ -0,0 +1,42 @@
+<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" />
+    {/snippet}
+    {#snippet contentSwitcherBackIcon()}
+        <span>Switch</span>
+    {/snippet}
+    {#snippet contentSwitcherReveal()}
+        <div class="pad-2 border-t">Some <br />switched <br />content</div>
+    {/snippet}
+</ContentSwitcher>`;
+</script>
+
+<ComponentDemo component="ContentSwitcher">
+	<div class="flex-v gap-large">
+		<DemoPage component="ContentSwitcher" {code}>
+			<Demoer title="A simple contentSwitcher" {parameters} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<ContentSwitcher {...activeParams} class="marg-tb-1">
+						{#snippet contentSwitcherTogglerIcon()}
+							<Icon icon="mdi:tree" />
+						{/snippet}
+						{#snippet contentSwitcherBackIcon()}
+							<span>Switch</span>
+						{/snippet}
+						{#snippet contentSwitcherReveal()}
+							<div class="pad-2 border-t">Some <br />switched <br />content</div>
+						{/snippet}
+					</ContentSwitcher>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/base/contentSwitcher/ContentSwitcher.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 ContentSwitcherProps = typeof __propDef.props;
+export type ContentSwitcherEvents = typeof __propDef.events;
+export type ContentSwitcherSlots = typeof __propDef.slots;
+export default class ContentSwitcher extends SvelteComponent<ContentSwitcherProps, ContentSwitcherEvents, ContentSwitcherSlots> {
+}
+export {};

package/dist/base/contentSwitcher/ContentSwitcher.svelte

@@ -0,0 +1,74 @@
+<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>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class={className} {style} onclick={handleClick}>
+	<Slotted child={togglerIcon}>
+		<IconButton style="aspect-ratio:1/1" {icon} iconFontSize="small" />
+	</Slotted>
+</div>
+<div bind:this={element} style="display:none">
+	<div bind:this={thisRef} class="content-switcher">
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div onclick={handleClick}>
+			<Slotted child={backIcon}>
+				<Button ratio="1/1" icon={iconback} />
+			</Slotted>
+		</div>
+		<Slotted child={contentSwitcherReveal} />
+	</div>
+</div>
+
+<style>:root {
+  --sld-content-switcher-overflow: hidden;
+}
+
+.content-switcher {
+  min-width: auto;
+  max-width: 100%;
+  width: 100%;
+  gap: 0.5rem;
+  overflow: var(--sld-content-switcher-overflow);
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+
+.content-switcher .content {
+  position: relative;
+  overflow: var(--sld-content-switcher-overflow);
+  min-width: auto;
+  flex: 1 1 auto;
+}</style>

package/dist/base/contentSwitcher/ContentSwitcher.svelte.d.ts

@@ -0,0 +1,31 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    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]>;
+        icon?: string | import("../../types/index.js").IconObj;
+        iconback?: string | import("../../types/index.js").IconObj;
+        parent?: HTMLElement;
+        contentSwitcherTogglerIcon?: import("svelte").Snippet;
+        contentSwitcherBackIcon?: import("svelte").Snippet;
+        contentSwitcherReveal?: import("svelte").Snippet;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type ContentSwitcherProps_ = typeof __propDef.props;
+export { ContentSwitcherProps_ as ContentSwitcherProps };
+export type ContentSwitcherEvents = typeof __propDef.events;
+export type ContentSwitcherSlots = typeof __propDef.slots;
+export default class ContentSwitcher extends SvelteComponent<ContentSwitcherProps_, ContentSwitcherEvents, ContentSwitcherSlots> {
+}