@medyll/idae-slotui-svelte 0.3.0

package/dist/navigation/drawer/drawer.scss

@@ -0,0 +1,65 @@
+@import "../../styles/slotui-mixins.scss";
+
+:root {
+  --drawer-color: inherit;
+  --drawer-background-color: var(--sld-color-paper-alpha-low);
+  --drawer-backdrop-filter: blur(0px);
+  --drawer-box-shadow: var(--sld-elevation-3);
+  --drawer-border-left: var(--sld-color-primary-alpha-mid);
+  --drawer-icon-padding: 0 0.5rem;
+  --drawer-header-min-height: 48px;
+  --drawer-header-bar-title-font-size: large;
+  --drawer-content-flex: 1;
+}
+
+.drawer {
+  color: var(--drawer-color);
+  background-color: var(--drawer-background-color);
+  --webkit-backdrop-filter: var(--drawer-backdrop-filter);
+  backdrop-filter: var(--drawer-backdrop-filter);
+  z-index: 3000;
+  box-shadow: var(--drawer-box-shadow);
+  border-left: 1px solid var(--drawer-border-left);
+  overflow: visible;
+  @include flex(column);
+  height: 100%;
+  transition: all 0.1s;
+
+  &-icon {
+    padding: var(--drawer-icon-padding);
+    display: flex;
+    align-items: center;
+  }
+
+  &-opener {
+    position: absolute;
+    z-index: 8600;
+  }
+  header,
+  &-header {
+    @include ui-tall-presets;
+
+    min-height: var(--drawer-header-min-height);
+    display: flex;
+    width: 100%;
+
+    &-bar {
+      flex: 1;
+      display: flex;
+      align-items: center;
+
+      &-title {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+        font-size: var(--drawer-header-bar-title-font-size);
+      }
+    }
+  }
+  &-content {
+    flex: var(--drawer-content-flex);
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+  }
+}

package/dist/navigation/drawer/types.d.ts

@@ -0,0 +1,45 @@
+import type { DemoerStoryProps } from '../../base/demoer/types.js';
+import { type CommonProps, type ElementProps } from '../../types/index.js';
+import type { Snippet } from 'svelte';
+type DrawerTitleType = string;
+export type DrawerProps<T = any> = CommonProps & {
+    /** title of the drawer */
+    primary?: DrawerTitleType;
+    /** sub-title of the drawer */
+    secondary?: DrawerTitleType;
+    /** icon of the drawer */
+    icon?: string;
+    /** Should the drawer be open */
+    isOpen?: boolean;
+    /** Should the closer icon be hidden */
+    hideCloseIcon?: boolean;
+    /**
+     * flow
+     * @type "fixed" | "relative" | "absolute"
+     */
+    flow?: ElementProps['flow'];
+    /**  stickTo position */
+    stickTo?: ElementProps['position'];
+    showOpenerIcon?: boolean;
+    /** default width of the drawer in vertical mode */
+    defaultWidth?: string;
+    /** minimum width of the drawer in vertical mode and closed state */
+    defaultVisibleArea?: string;
+    dense?: ElementProps['dense'];
+    tall?: ElementProps['dense'];
+    /** default height of the drawer in horizontal mode */
+    defaultHeight?: string;
+    drawerContent?: Snippet;
+    drawerIcon?: Snippet;
+    drawerTitle?: Snippet;
+    drawerPrimary?: Snippet;
+    drawerSecondary?: Snippet;
+    drawerTop?: Snippet;
+    drawerFooter?: Snippet;
+    /** actions for the drawer */
+    actions?: {
+        toggle: (visibleSate?: boolean) => void;
+    };
+};
+export declare const parameters: DemoerStoryProps<DrawerProps<any>>, componentArgs: DrawerProps<any>;
+export {};

package/dist/navigation/drawer/types.js

@@ -0,0 +1,35 @@
+import { demoerArgs } from '../../base/demoer/demoer.utils.js';
+import { densePreset, tallPreset } from '../../types/index.js';
+const drawerDemoValues = {
+    primary: {
+        type: 'string',
+        values: ['Drawer']
+    },
+    secondary: {
+        type: 'string',
+        values: ['Drawer secondary']
+    },
+    isOpen: {
+        type: 'boolean',
+        default: false
+    },
+    flow: {
+        type: 'flow'
+    },
+    stickTo: {
+        type: 'stickyPosition'
+    },
+    showOpenerIcon: {
+        type: 'boolean',
+        default: false
+    },
+    dense: {
+        type: 'dense',
+        default: densePreset.default
+    },
+    tall: {
+        type: 'dense',
+        default: tallPreset.default
+    }
+};
+export const { parameters, componentArgs } = demoerArgs(drawerDemoValues);

package/dist/navigation/tabs/Tabs.demo.svelte

@@ -0,0 +1,78 @@
+<svelte:options runes />
+
+<script lang="ts">import Tabs from "./Tabs.svelte";
+import Cartouche from "../../base/cartouche/Cartouche.svelte";
+import Button from "../../controls/button/Button.svelte";
+import DemoerComponent from "../../base/demoer/DemoerComponent.svelte";
+import DemoPage from "../../base/demoer/DemoPage.svelte";
+import Demoer from "../../base/demoer/Demoer.svelte";
+import { parameters, componentArgs } from "./types.js";
+const items = [
+  { label: "Tab 1", code: "tab1", withContent: "ff" },
+  { label: "Tab 2", code: "tab2" },
+  {
+    label: "Another tab",
+    code: "tab3",
+    withComponent: Cartouche,
+    componentProps: { label: "inner component" }
+  }
+];
+let code = `
+<Tabs
+	activeTabCode="tab1" 
+	onTabClick={(e) => { 
+	}}
+	class="h-full"
+	style="height:100%;width:350px"
+	{items}>
+		{#snippet children({ activeTabCode })}
+			{#snippet tabTitle()}
+				Some tabs title
+			{/snippet}
+			{#snippet tabButtons()}
+				<Button variant="bordered">button</Button>
+			{/snippet}
+			{#snippet tabsInner()}
+				<div class="h-full">
+					<div class="pad-4 h-full overflow-auto">
+						<!-- selected : {activeTabCode} -->
+					</div>
+				</div>
+			{/snippet}
+		{/snippet}
+</Tabs>`;
+</script>
+
+<DemoerComponent component="Tabs">
+	<DemoPage {code} component="Tabs">
+		<Demoer {componentArgs} {parameters}>
+			{#snippet children({ activeParams })}
+				<div style="height:450px;">
+					<Tabs
+						{...activeParams}
+						onTabClick={(e) => {
+							console.log(e);
+							componentArgs.activeTabCode = e.code;
+						}}
+						class="h-full"
+						style="height:100%;width:350px"
+					>
+						{#snippet tabsTitle()}
+							Some tabs title
+						{/snippet}
+						{#snippet tabsButtonZone()}
+							<Button variant="bordered">button</Button>
+						{/snippet}
+						{#snippet tabsInner({ activeTabCode })}
+							<div class="h-full">
+								<div class="pad-4 h-full overflow-auto">
+									selected : {activeTabCode}
+								</div>
+							</div>
+						{/snippet}
+					</Tabs>
+				</div>
+			{/snippet}
+		</Demoer>
+	</DemoPage>
+</DemoerComponent>

package/dist/navigation/tabs/Tabs.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 TabsProps = typeof __propDef.props;
+export type TabsEvents = typeof __propDef.events;
+export type TabsSlots = typeof __propDef.slots;
+export default class Tabs extends SvelteComponent<TabsProps, TabsEvents, TabsSlots> {
+}
+export {};

package/dist/navigation/tabs/Tabs.preview.svelte

@@ -0,0 +1,19 @@
+<svelte:options />
+
+<script lang="ts">import Tabs from "./Tabs.svelte";
+import Cartouche from "../../base/cartouche/Cartouche.svelte";
+import Divider from "../../base/divider/Divider.svelte";
+import Button from "../../controls/button/Button.svelte";
+const items = [
+  { label: "Tab 1", code: "theTitle1", withContent: "ff", secondary: "some" },
+  { label: "Tab 2", code: "theTitle2" },
+  {
+    label: "Another tab",
+    code: "theTitle3",
+    withComponent: Cartouche,
+    componentProps: { label: "inner component" }
+  }
+];
+</script>
+
+<Tabs activeTabCode="theTitle3" {items}>s</Tabs>

package/dist/navigation/tabs/Tabs.preview.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 TabsProps = typeof __propDef.props;
+export type TabsEvents = typeof __propDef.events;
+export type TabsSlots = typeof __propDef.slots;
+export default class Tabs extends SvelteComponent<TabsProps, TabsEvents, TabsSlots> {
+}
+export {};

package/dist/navigation/tabs/Tabs.svelte

@@ -0,0 +1,242 @@
+<svelte:options runes />
+
+<script lang="ts" generics="T=Data">import Slotted from "../../utils/slotted/Slotted.svelte";
+import { elem } from "../../utils/engine/elem.js";
+import Icon from "../../base/icon/Icon.svelte";
+import { onEvent } from "../../utils/uses/event.js";
+let {
+  class: className = "",
+  element = $bindable(),
+  style = "",
+  activeTabCode = $bindable(),
+  items = [],
+  orientation = "horizontal",
+  onTabClick = (item) => {
+  },
+  children,
+  tabsTitleMain,
+  tabsLabel,
+  tabsTitle,
+  tabsButtonZone,
+  tabsInner,
+  ...rest
+} = $props();
+let navElementRef;
+let tabsElementRef;
+let activeCellElementRef;
+let boundingClientRect;
+const handleClick = (item) => {
+  onTabClick(item);
+  const event = new CustomEvent("on:tabs:click", { detail: item, bubbles: true });
+  element?.dispatchEvent(event);
+};
+const setChipPos = (code) => {
+  if (!elem(navElementRef) || !code) return;
+  const node = elem(navElementRef).find(`[data-code=${code}]`);
+  if (node && activeCellElementRef?.parentElement) {
+    boundingClientRect = node.getBoundingClientRect();
+    if (orientation === "vertical") {
+      activeCellElementRef.style.left = node?.offsetLeft + "px";
+      activeCellElementRef.style.width = boundingClientRect.width + "px";
+    } else {
+      activeCellElementRef.style.top = node?.offsetTop + "px";
+      activeCellElementRef.style.height = boundingClientRect.height + "px";
+      activeCellElementRef.style.width = "3px";
+    }
+  }
+};
+$effect(() => {
+  if (activeTabCode && element && navElementRef) {
+    setChipPos(activeTabCode);
+  }
+});
+function toggler(node) {
+  if (element !== void 0 && node !== void 0)
+    elem(element)?.findAll("[aria-selected]")?.forEach((node2) => {
+      node2?.removeAttribute("aria-selected");
+    });
+  node.setAttribute("aria-selected", "true");
+  if (node.dataset.code) togglerCode(node.dataset.code);
+}
+function togglerCode(code) {
+  activeTabCode = code;
+}
+</script>
+
+<div bind:this={element} class="tab {className}" aria-orientation={orientation} {style}>
+	<div
+		use:onEvent={{ event: 'dom:close', action: () => {} }}
+		use:onEvent={{ event: 'dom:toggle', action: () => {} }}
+		use:onEvent={{
+			event: 'on:tabs:click',
+			action: () => {}
+		}}
+		bind:this={tabsElementRef}
+		class="tab-nav"
+	>
+		<div>
+			<Slotted child={tabsTitleMain}></Slotted>
+		</div>
+		<nav bind:this={navElementRef} class="tab-nav-rail">
+			{#each items as item}
+				<button
+					data-code={item?.code}
+					data-toggle={item?.code}
+					onclick={(ji) => {
+						if (ji.target) toggler(ji.target as HTMLElement);
+						handleClick(item);
+					}}
+					class={activeTabCode === item?.code ? 'active' : ''}
+				>
+					<Slotted child={tabsLabel} slotArgs={{ item, activeTabCode }}>
+						{item?.label}
+					</Slotted>
+				</button>
+			{/each}
+		</nav>
+		<div>
+			<Slotted child={tabsTitle}></Slotted>
+		</div>
+		<div>
+			<Slotted child={tabsButtonZone}></Slotted>
+		</div>
+	</div>
+	<div class="tab-floating-cell">
+		<div bind:this={activeCellElementRef} class="tab-floating-cell-snip"></div>
+	</div>
+	<div class="tab-content">
+		{#each items as item}
+			{@const display = activeTabCode === item?.code ? 'flex' : 'none'}
+			{#if item && activeTabCode === item?.code}
+				<Slotted child={tabsInner} slotArgs={{ item, activeTabCode }}>
+					<div
+						data-code={item.code}
+						data-toggle-on={item.code}
+						data-activeTabCode={activeTabCode}
+						style="display:{display};height:100%;position:relative;flex-direction:column"
+					>
+						{#if Boolean(item?.secondary)}
+							<div class="tab-content-secondary">
+								<div class="tab-content-secondary-icon">
+									<Icon style="display:block" icon="clarity:help-info-solid" />
+								</div>
+								<div style="flex:1;">{@html item?.secondary}</div>
+							</div>
+						{/if}
+						<Slotted child={tabsInner} slotArgs={{ item, activeTabCode }}>
+							<div data-code={item.code} style="flex:1;overflow:hidden;position:relative;">
+								{#if activeTabCode === item.code}
+									{#if Boolean(item?.withComponent)}
+										<svelte:component this={item.withComponent} {...item.componentProps ?? {}} />
+									{:else if Boolean(item?.withContent)}
+										{item.withContent}
+									{:else if Boolean(item?.withUid)}
+										{item.withUid}
+									{/if}
+								{/if}
+							</div>
+						</Slotted>
+					</div>
+				</Slotted>
+			{/if}
+		{/each}
+	</div>
+</div>
+
+<style>:root {
+  --tabs-nav-border-color: var(--sld-color-primary-alpha-high);
+  --tabs-content-background-color: var(--sld-color-background);
+  --tabs-content-secondary-padding: var(--box-density-preset-small);
+  --tabs-content-secondary-gap: var(--sld-gap-small);
+  --tabs-content-secondary-icon-border-right: var(--sld-color-border);
+  --tabs-content-secondary-icon-border-radius: var(--sld-radius-tiny);
+  --tabs-content-secondary-icon-box-shadow: var(--sld-elevation-3);
+  --tabs-content-secondary-icon-padding: var(--sld-padding-small);
+  --tabs-floating-cell-slot-border-radius: var(--sld-radius-small);
+  --tabs-floating-cell-slot-background-color: var(--sld-color-primary);
+}
+
+.tab {
+  position: relative;
+  display: flex;
+}
+
+.tab[aria-orientation=horizontal] ul {
+  flex-direction: column;
+}
+
+.tab[aria-orientation=vertical] {
+  flex-direction: column;
+}
+
+.tab-nav {
+  padding: 0.25rem 0;
+  gap: var(--sld-gap-med);
+  border-bottom: 1px solid var(--tabs-nav-border-color);
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.tab-nav[aria-orientation=horizontal] {
+  flex-direction: column;
+}
+
+.tab-nav-rail {
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+  padding-left: 0;
+  margin-bottom: 0;
+}
+
+.tab-nav-rail > button {
+  padding: var(--box-density-preset-small);
+  min-width: 48px;
+  cursor: pointer;
+  background: none;
+  border: none;
+}
+
+.tab-nav-rail > button.active, .tab-nav-rail > button[aria-selected=true] {
+  font-weight: bold;
+}
+
+.tab-content {
+  flex: 1;
+  background-color: var(--tabs-content-background-color);
+  position: relative;
+  width: 100%;
+}
+
+.tab-content-secondary {
+  display: flex;
+  padding: var(--tabs-content-secondary-padding) unset;
+  gap: var(--tabs-content-secondary-gap);
+}
+
+.tab-content-secondary-icon {
+  border-right: 1px solid var(--tabs-content-secondary-icon-border-right);
+  border-radius: var(--tabs-content-secondary-icon-border-radius);
+  box-shadow: var(--tabs-content-secondary-icon-box-shadow);
+  padding: var(--tabs-content-secondary-icon-padding);
+}
+
+.tab-floating-cell {
+  top: auto;
+  position: relative;
+  min-height: 4px;
+  height: 4px;
+  transition: all 0.15;
+}
+
+.tab-floating-cell-snip {
+  border-radius: var(--tabs-floating-cell-slot-border-radius);
+  min-height: 4px;
+  background-color: var(--tabs-floating-cell-slot-background-color);
+  width: 100%;
+  position: absolute;
+  transition: all 0.25s ease-in;
+  z-index: 200;
+}</style>

package/dist/navigation/tabs/Tabs.svelte.d.ts

@@ -0,0 +1,45 @@
+import { SvelteComponent } from "svelte";
+import type { TabItem } from './types.js';
+import type { Data } from '../../types/index.js';
+declare class __sveltets_Render<T = Data> {
+    props(): {
+        '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]> & import("svelte").Snippet<[{
+            item: any;
+            activeTabCode: string;
+        }]>) | undefined;
+        activeTabCode?: string;
+        items?: import("./types.js").TabsItemsProps;
+        orientation?: "horizontal" | "vertical";
+        onTabClick?: (item: TabItem) => void;
+        tabsTitleMain?: import("svelte").Snippet;
+        tabsLabel?: import("svelte").Snippet<[{
+            item: any;
+            activeTabCode: string;
+        }]>;
+        tabsTitle?: import("svelte").Snippet;
+        tabsButtonZone?: import("svelte").Snippet;
+        tabsInner?: import("svelte").Snippet<[{
+            item: any;
+            activeTabCode: string;
+        }]>;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type TabsProps_<T = Data> = ReturnType<__sveltets_Render<T>['props']>;
+export type TabsEvents<T = Data> = ReturnType<__sveltets_Render<T>['events']>;
+export type TabsSlots<T = Data> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class Tabs<T = Data> extends SvelteComponent<TabsProps_<T>, TabsEvents<T>, TabsSlots<T>> {
+}
+export {};

package/dist/navigation/tabs/tabs.scss

@@ -0,0 +1,92 @@
+@import "../../styles/slotui-mixins.scss";
+
+:root {
+  --tabs-nav-border-color: var(--sld-color-primary-alpha-high);
+  --tabs-content-background-color: var(--sld-color-background);
+  --tabs-content-secondary-padding: var(--box-density-preset-small);
+  --tabs-content-secondary-gap: var(--sld-gap-small);
+  --tabs-content-secondary-icon-border-right: var(--sld-color-border);
+  --tabs-content-secondary-icon-border-radius: var(--sld-radius-tiny);
+  --tabs-content-secondary-icon-box-shadow: var(--sld-elevation-3);
+  --tabs-content-secondary-icon-padding: var(--sld-padding-small);
+  --tabs-floating-cell-slot-border-radius: var(--sld-radius-small);
+  --tabs-floating-cell-slot-background-color: var(--sld-color-primary);
+}
+
+.tab {
+  position: relative;
+  display: flex;
+  &[aria-orientation="horizontal"] {
+    ul {
+      flex-direction: column;
+    }
+  }
+  &[aria-orientation="vertical"] {
+    flex-direction: column;
+  }
+
+  &-nav {
+    padding: 0.25rem 0;
+    gap: var(--sld-gap-med);
+    border-bottom: 1px solid var(--tabs-nav-border-color);
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    &[aria-orientation="horizontal"] {
+      flex-direction: column;
+    }
+    &-rail {
+      display: flex;
+      flex: 1;
+      flex-wrap: wrap;
+      padding-left: 0;
+      margin-bottom: 0;
+      > button {
+        padding: var(--box-density-preset-small);
+        min-width: 48px;
+        cursor: pointer;
+        background: none;
+        border: none;
+        &.active,
+        &[aria-selected="true"] {
+          font-weight: bold;
+        }
+      }
+    }
+  }
+  &-content {
+    flex: 1;
+    background-color: var(--tabs-content-background-color);
+    position: relative;
+    width: 100%;
+    &-secondary {
+      display: flex;
+      padding: var(--tabs-content-secondary-padding) unset;
+      gap: var(--tabs-content-secondary-gap);
+      &-icon {
+        border-right: 1px solid var(--tabs-content-secondary-icon-border-right);
+        border-radius: var(--tabs-content-secondary-icon-border-radius);
+        box-shadow: var(--tabs-content-secondary-icon-box-shadow);
+        padding: var(--tabs-content-secondary-icon-padding);
+      }
+    }
+  }
+
+  &-floating-cell {
+    top: auto;
+    position: relative;
+    min-height: 4px;
+    height: 4px;
+    transition: all 0.15;
+    &-snip {
+      border-radius: var(--tabs-floating-cell-slot-border-radius);
+      min-height: 4px;
+      background-color: var(--tabs-floating-cell-slot-background-color);
+      width: 100%;
+      position: absolute;
+      transition: all 0.25s ease-in;
+      z-index: 200;
+    }
+  }
+}

package/dist/navigation/tabs/types.d.ts

@@ -0,0 +1,40 @@
+import type { DemoerStoryProps } from '../../base/demoer/types.js';
+import type { CommonProps } from '../../types/index.js';
+import type { Snippet } from 'svelte';
+export type TabItem = {
+    label: string;
+    code?: string;
+    secondary?: string;
+    withUid?: string;
+    withContent?: any;
+    withComponent?: any;
+    componentProps?: Record<string, any>;
+};
+export type TabsItemsProps = TabItem[];
+export type TabsProps = CommonProps & {
+    /** active tab */
+    activeTabCode?: string;
+    element?: HTMLElement;
+    /** tabs to display */
+    items?: TabsItemsProps;
+    /** orientation of the tabs */
+    orientation?: 'horizontal' | 'vertical';
+    /** event handler for tab click */
+    onTabClick?: (item: TabItem) => void;
+    tabsTitleMain?: Snippet;
+    tabsLabel?: Snippet<[{
+        item: any;
+        activeTabCode: string;
+    }]>;
+    tabsTitle?: Snippet;
+    tabsButtonZone?: Snippet;
+    tabsInner?: Snippet<[{
+        item: any;
+        activeTabCode: string;
+    }]>;
+    children?: Snippet<[{
+        item: any;
+        activeTabCode: string;
+    }]>;
+};
+export declare const parameters: DemoerStoryProps<TabsProps>, componentArgs: TabsProps;