@medyll/idae-slotui-svelte 0.3.0

package/dist/ui/panel/types.d.ts

@@ -0,0 +1,36 @@
+import type { CommonProps, Data } from '../../types/index.js';
+import type { Snippet } from 'svelte';
+import type { Writable } from 'svelte/store';
+export type PanelContextType = Writable<{
+    activePanelId?: string;
+    activePanelSlideData: Record<string, any>;
+    panelSlides: Record<string, any>;
+    panels: Record<string, any>;
+}>;
+export type PanelGridProps<T = Data> = CommonProps & {
+    /** Data to be displayed in the grid */
+    data?: T[];
+    /** Number of columns in the grid */
+    columns?: number;
+    /** Whether the grid is expanded or not */
+    isExpanded?: boolean;
+    /** Children snippet for the default content */
+    children?: Snippet<[{
+        data: T;
+    }]>;
+    /** Slot for the zoomed in view */
+    panelGridZoom?: Snippet;
+};
+export type PanelProps<T = Data> = {
+    /** Title of the panel */
+    title: string;
+    /** ID of the panel */
+    panelId?: string;
+    /** Data to be displayed in the panel */
+    data?: T;
+    /** Whether to show navigation or not */
+    showNavigation?: boolean;
+    panelButtonPrevious?: import('svelte').Snippet;
+    panelButtonNext?: import('svelte').Snippet;
+    children?: import('svelte').Snippet<[any]>;
+};

package/dist/ui/panel/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/popper/Popper.demo.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">import Popper from "./Popper.svelte";
+import Button from "../../controls/button/Button.svelte";
+import { defaultsArgs, defaultsArgsFromProps } from "../../base/demoer/demoer.utils.js";
+import ComponentDemo from "../../base/demoer/DemoerComponent.svelte";
+import Demoer from "../../base/demoer/Demoer.svelte";
+import DemoPage from "../../base/demoer/DemoPage.svelte";
+import { uiPresets } from "../../utils/engine/presets.js";
+let parametersSlot = {
+  autoClose: {
+    type: "boolean",
+    values: [true, false]
+  },
+  stickToHookWidth: {
+    type: "boolean",
+    values: [true, false]
+  },
+  position: {
+    type: "string",
+    values: uiPresets.stickyPosition
+  }
+};
+let componentArgsSlot = defaultsArgs(parametersSlot);
+let codeSlot = `
+<Popper bind:isOpen position="BC" autoClose class="w-large">
+	{#snippet popperHolder()}
+		<Button
+			onclick={() => (isOpen = !isOpen)} 
+			class="border text-center pointer {isOpen ? 'theme-bg-paper shad-3' : ''}"
+			>
+			popper
+		</Button>
+	{/snippet}
+	<div class="pad-4">Popper content</div>
+</Popper>`;
+let codeProps = `
+<Loader
+    status={"loading"}
+    messages={{
+        loading: 'Loading dataset',
+        error  : 'An error occurred',
+        empty  : 'Empty results',
+        success: 'Success !'
+      }}
+    emptyIcon="mdi:database-search-outline"
+    errorIcon="mdi:alert-circle-outline"
+    loadingIcon="mdi:loading"
+    successIcon="clarity:success-standard-line" />`;
+let isOpen = false;
+</script>
+
+<ComponentDemo component="Popper" cite="This Popper is the base of all the flyout stuff: it pops">
+	<div class="flex-v gap-large">
+		<DemoPage code={codeSlot} component="Popper">
+			<Demoer componentArgs={componentArgsSlot} parameters={parametersSlot}>
+				{#snippet children({ activeParams })}
+					<div class="pos-rel">
+						<Popper
+							bind:isOpen
+							position="BC"
+							anchor="popper"
+							{...activeParams}
+							class="w-large marg-t-1"
+						>
+							{#snippet popperHolder()}
+								<Button
+									anchor-for="popper"
+									onclick={() => (isOpen = !isOpen)}
+									style="cursor:pointer"
+									class="border text-center pointer {isOpen ? 'theme-bg-paper shad-3' : ''}"
+								>
+									popper
+								</Button>
+							{/snippet}
+							<div class="pad-4">Popper content</div>
+							{#snippet popperRight()}
+								cdscdscd
+							{/snippet}
+						</Popper>
+					</div>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/ui/popper/Popper.demo.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PopperProps = typeof __propDef.props;
+export type PopperEvents = typeof __propDef.events;
+export type PopperSlots = typeof __propDef.slots;
+export default class Popper extends SvelteComponent<PopperProps, PopperEvents, PopperSlots> {
+}
+export {};

package/dist/ui/popper/Popper.svelte

@@ -0,0 +1,232 @@
+<script lang="ts">import { stickTo } from "../../utils/uses/stickTo/stickTo.js";
+import { clickAway } from "../../utils/uses/clickAway/clickAway.js";
+import Slotted from "../../utils/slotted/Slotted.svelte";
+import Button from "../../controls/button/Button.svelte";
+export const toggle = function() {
+};
+export const hide = function() {
+  console.log("hide");
+};
+export const show = function() {
+  console.log("show");
+};
+export const actions = {
+  toggle: () => {
+    console.log("toggle");
+  },
+  show: () => {
+    console.log("show");
+  },
+  hide: () => {
+    console.log("hide");
+  }
+};
+let {
+  class: className = "",
+  element = $bindable(),
+  code = crypto.randomUUID(),
+  parentNode,
+  stickToHookWidth = false,
+  component,
+  componentProps = {},
+  position = "BC",
+  content,
+  autoClose = $bindable(),
+  isOpen = $bindable(),
+  buttonProps,
+  anchor,
+  children,
+  popperHolder,
+  popperLeft,
+  popperRight,
+  ...rest
+} = $props();
+export const clickedAway = function() {
+  const event = new CustomEvent("clickAway", { bubbles: true });
+  parentNode?.dispatchEvent(event);
+  if (autoClose) isOpen = false;
+};
+export const useStickTo = (node) => {
+  if (position && parentNode) {
+    stickTo(node, { parentNode, position, stickToHookWidth });
+  }
+};
+let holderSlotRef = $state();
+let zIndex = $state(0);
+let mounted = $state(false);
+$effect(() => {
+  parentNode;
+  anchor;
+  if (!anchor) {
+    if (parentNode) {
+    } else if (popperHolder) {
+      parentNode = holderSlotRef.firstElementChild ?? document.body;
+    } else {
+      parentNode = element?.parentElement ?? document.body;
+    }
+  }
+  if (anchor) {
+    parentNode = typeof anchor == "string" ? document.querySelector(`[anchor-for="${anchor}"]`) : anchor;
+  }
+  mounted = true;
+});
+$effect(() => {
+  let siblings = Array.prototype.slice.call(element?.parentElement?.children ?? []) ?? [];
+  zIndex = siblings?.reduce((prev, val) => {
+    return val?.style?.zIndex >= prev ? val?.style?.zIndex + 1 : prev;
+  }, 0);
+});
+$effect(() => {
+  isOpen;
+  if (!isOpen) {
+    if (element.matches(":popover-open")) {
+      element.hidePopover();
+    }
+  }
+});
+let hidden = $derived(!(parentNode && (isOpen && autoClose || !autoClose)));
+</script>
+
+{#if popperHolder}
+	<div bind:this={holderSlotRef} style="position:relative;display:contents">
+		{@render popperHolder()}
+	</div>
+{/if}
+{#if buttonProps}
+	<!-- @ts-ignore -->
+	<Button bind:element={holderSlotRef} onclick={() => (isOpen = true)} {...buttonProps} />
+{/if}
+<!-- {#if parentNode && ((isOpen && autoClose) || !autoClose)} -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- @ts-ignore -->
+<dialog
+	open={isOpen}
+	bind:this={element}
+	class="popper {className}"
+	use:stickTo={{ parentNode, position, stickToHookWidth }}
+	use:clickAway={{ action: clickedAway }}
+	{...rest}
+	style={rest.style}
+	style:contentVisibility={!isOpen ? 'hidden' : 'auto'}
+	style:display={!isOpen ? 'none' : ''}
+>
+	<div style="display:flex;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden">
+		{#if popperLeft}
+			<div style="height:100%;max-height:100%;overflow:hidden;" class="popper-left">
+				{@render popperLeft()}
+			</div>
+		{/if}
+		{#if children || component || content}
+			<div style="flex:1">
+				<Slotted child={children}>
+					{#if mounted}
+						{#if component}
+							<svelte:component this={component} {...componentProps} />
+						{/if}
+						{#if content}
+							{content}
+						{/if}
+					{/if}
+				</Slotted>
+			</div>
+		{/if}
+		{#if popperRight}
+			<div class="popper-right">{@render popperRight()}</div>
+		{/if}
+	</div>
+</dialog>
+
+<!-- {/if} -->
+
+<style global>:root {
+  --popper-border-radius: var(--sld-radius-tiny);
+  --popper-box-shadow: var(--sld-elevation-4);
+  --popper-background-color: var(--sld-color-background-alpha-mid);
+  --popper-backdrop-filter: blur(30px);
+  --popper-z-index: 30000;
+  --popper-open-border: 1px color red;
+}
+
+:global(dialog.popper) {
+  all: unset;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  font: inherit;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+  border-radius: var(--popper-border-radius);
+  overflow: hidden;
+  position: fixed;
+  inset: 0;
+  box-shadow: var(--popper-box-shadow);
+  background-color: var(--popper-background-color);
+  -webkit-backdrop-filter: var(--popper-backdrop-filter);
+  backdrop-filter: var(--popper-backdrop-filter);
+  z-index: var(--popper-z-index);
+  opacity: 0;
+  visibility: hidden;
+  align-items: center;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+  outline: none;
+  width: moz-fit-content;
+  width: fit-content;
+  height: moz-fit-content;
+  height: fit-content;
+  /* top: 15rem;
+  left: 40rem; */
+  z-index: 30000;
+}
+
+:global(dialog.popper):focus-visible {
+  outline: 2px solid var(--focus-color);
+  outline-offset: 2px;
+}
+
+:global(dialog.popper)[open], :global(dialog.popper):popover-open {
+  opacity: 1;
+  visibility: visible;
+  animation: popoverEnter 0.3s ease-out;
+}
+
+:global(dialog.popper) .popper-left,
+:global(dialog.popper) .popper-right {
+  height: 100%;
+  max-height: 100%;
+  overflow: hidden;
+}
+
+:global(dialog.popper)::backdrop {
+  background-color: rgba(0, 0, 0, 0.5);
+  width: moz-fit-content;
+  width: fit-content;
+}
+
+@keyframes popoverEnter {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* @media (prefers-color-scheme: dark) {
+    :global(dialog.popper) {
+        --popper-background-color: #2a2a2a;
+        --popper-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+        --focus-color: #6ab5ff;
+    }
+} */
+
+:global(dialog.popper) {
+  padding-block: 0;
+  padding-inline: 0;
+}</style>

package/dist/ui/popper/Popper.svelte.d.ts

@@ -0,0 +1,52 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: import("../../types/index.js").CommonProps & {
+        code?: string;
+        parentNode?: HTMLElement | null;
+        stickToHookWidth?: boolean;
+        component?: import("svelte").ComponentType;
+        componentProps?: {};
+        buttonProps?: import("../../index.js").ButtonProps;
+        position?: import("../../utils/uses/stickTo/stickTo.js").StickToPositionType;
+        content?: any;
+        autoClose?: boolean;
+        flow?: import("../../types/index.js").ElementProps["flow"];
+        isOpen?: boolean;
+        anchor?: `${string}` | HTMLElement | null;
+        popperHolder?: import("svelte").Snippet;
+        popperRight?: import("svelte").Snippet;
+        popperLeft?: import("svelte").Snippet;
+        children?: import("svelte").Snippet;
+    } & {
+        toggle?: () => void;
+        hide?: () => void;
+        show?: () => void;
+        /** actions for the popper */ actions?: {
+            toggle: () => void;
+            show: () => void;
+            hide: () => void;
+        };
+        clickedAway?: () => void;
+        useStickTo?: (node: HTMLElement) => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type PopperProps_ = typeof __propDef.props;
+export { PopperProps_ as PopperProps };
+export type PopperEvents = typeof __propDef.events;
+export type PopperSlots = typeof __propDef.slots;
+export default class Popper extends SvelteComponent<PopperProps_, PopperEvents, PopperSlots> {
+    get toggle(): () => void;
+    get hide(): () => void;
+    get show(): () => void;
+    get actions(): {
+        toggle: () => void;
+        show: () => void;
+        hide: () => void;
+    };
+    get clickedAway(): () => void;
+    get useStickTo(): (node: HTMLElement) => void;
+}

package/dist/ui/popper/actions.d.ts

@@ -0,0 +1,5 @@
+import type { PopperProps } from './types.js';
+import Popper from './Popper.svelte';
+export declare const popperList: Record<string, Popper>;
+declare const openPopper: (popperId: string, args?: PopperProps) => Popper;
+export { openPopper };

package/dist/ui/popper/actions.js

@@ -0,0 +1,26 @@
+import Popper from './Popper.svelte';
+import { mount } from 'svelte';
+export const popperList = {};
+const openPopper = (popperId, args = {}) => {
+    if (popperList[popperId]) {
+        // popperList[popperId]?.actions?.show?.();
+        popperList[popperId].isOpen = true;
+        return popperList[popperId];
+    }
+    else {
+        return createPopper();
+    }
+    function createPopper() {
+        popperList[popperId] = mount(Popper, {
+            target: document.body,
+            intro: true,
+            // @ts-ignore
+            props: { code: popperId, ...args }
+        });
+        /* popperList[popperId].$$.on_destroy.push(() => {
+            delete popperList[popperId];
+        }); */
+        return popperList[popperId];
+    }
+};
+export { openPopper };

package/dist/ui/popper/popper.scss

@@ -0,0 +1,108 @@
+@import "../../styles/slotui-mixins.scss";
+
+:root {
+    --popper-border-radius: var(--sld-radius-tiny);
+    --popper-box-shadow: var(--sld-elevation-4);
+    --popper-background-color: var(--sld-color-background-alpha-mid);
+    --popper-backdrop-filter: blur(30px);
+    --popper-z-index: 30000;
+    --popper-open-border: 1px color red;
+}
+
+:global(dialog.popper) {
+    // Reset
+    all: unset;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: none;
+    color: inherit;
+    font: inherit;
+
+    opacity: 0;
+    visibility: hidden;
+
+    transition:
+        opacity 0.3s ease,
+        visibility 0.3s ease;
+
+    // Styles
+    border-radius: var(--popper-border-radius);
+    overflow: hidden;
+    position: fixed;
+    inset: 0;
+
+    box-shadow: var(--popper-box-shadow);
+    background-color: var(--popper-background-color);
+    -webkit-backdrop-filter: var(--popper-backdrop-filter);
+    backdrop-filter: var(--popper-backdrop-filter);
+    z-index: var(--popper-z-index);
+
+    opacity: 0;
+    visibility: hidden;
+    align-items: center;
+    transition:
+        opacity 0.3s ease,
+        visibility 0.3s ease;
+
+    outline: none;
+
+    width: moz-fit-content;
+    width: fit-content;
+    height: moz-fit-content;
+    height: fit-content;
+
+    /* top: 15rem;
+    left: 40rem; */
+
+    &:focus-visible {
+        outline: 2px solid var(--focus-color);
+        outline-offset: 2px;
+    }
+    z-index: 30000;
+
+    &[open],
+    &:popover-open {
+        opacity: 1;
+        visibility: visible;
+        animation: popoverEnter 0.3s ease-out;
+    }
+
+    .popper-left,
+    .popper-right {
+        height: 100%;
+        max-height: 100%;
+        overflow: hidden;
+    }
+
+    &::backdrop {
+        background-color: rgba(0, 0, 0, 0.5);
+        width: moz-fit-content;
+        width: fit-content;
+    }
+}
+
+@keyframes popoverEnter {
+    from {
+        opacity: 0;
+        transform: scale(0.9);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+/* @media (prefers-color-scheme: dark) {
+    :global(dialog.popper) {
+        --popper-background-color: #2a2a2a;
+        --popper-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+        --focus-color: #6ab5ff;
+    }
+} */
+
+:global(dialog.popper) {
+    padding-block: 0;
+    padding-inline: 0;
+}

package/dist/ui/popper/types.d.ts

@@ -0,0 +1,34 @@
+import type { ButtonProps } from '../../controls/button/types.js';
+import type { CommonProps, ElementProps } from '../../types/index.js';
+import type { StickToPositionType } from '../../utils/uses/stickTo/stickTo.js';
+import type { ComponentType, Snippet } from 'svelte';
+export type PopperPositionType = StickToPositionType;
+export type PopperProps = CommonProps & {
+    /** unique code for the popper */
+    code?: string;
+    /** parent node of the popper */
+    parentNode?: HTMLElement | null;
+    /** whether the popper should stick to hook width */
+    stickToHookWidth?: boolean;
+    /** component to be displayed in the popper */
+    component?: ComponentType;
+    /** props for the component */
+    componentProps?: {};
+    buttonProps?: ButtonProps;
+    /** position of the popper */
+    position?: StickToPositionType;
+    /** content of the popper */
+    content?: any;
+    /** The popper will be closed on clickAway */
+    autoClose?: boolean;
+    /** flow */
+    flow?: ElementProps['flow'];
+    /** binding : The popper will be opened or is opened */
+    isOpen?: boolean;
+    /** anchor sous la forme de anchor-for, will target [anchor-for=anchor]  */
+    anchor?: `${string}` | HTMLElement | null;
+    popperHolder?: Snippet;
+    popperRight?: Snippet;
+    popperLeft?: Snippet;
+    children?: Snippet;
+};

package/dist/ui/popper/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/popper/usePopper.d.ts

@@ -0,0 +1,16 @@
+import type { SvelteComponent } from 'svelte';
+import type { PopperPositionType } from './types.js';
+export type UsePopperProps = {
+    code?: string;
+    component?: SvelteComponent | any;
+    componentProps?: {};
+    content?: any;
+    parentNode?: HTMLElement | any;
+    position?: PopperPositionType;
+    disabled?: boolean;
+};
+/** adds click action to parentNode */
+export declare function popper(node: HTMLElement, props?: UsePopperProps | undefined): false | {
+    destroy(): void;
+    update(args: any): void;
+};

package/dist/ui/popper/usePopper.js

@@ -0,0 +1,26 @@
+import { openPopper } from './actions.js';
+/** adds click action to parentNode */
+export function popper(node, props) {
+    if (!props)
+        return false;
+    if (Boolean(props?.disabled))
+        return false;
+    const { parentNode = undefined, position = 'R', code = crypto.randomUUID() } = props;
+    const doPopperEvent = function (event) {
+        event.stopPropagation();
+        event.preventDefault();
+        openPopper(code, { ...props, parentNode: node });
+    };
+    node.addEventListener('click', doPopperEvent);
+    return {
+        destroy() {
+            node.removeEventListener('click', doPopperEvent);
+        },
+        update(args) {
+            // fire event to parentNode
+            const event = new CustomEvent('popper:closed', { bubbles: true });
+            if (parentNode)
+                parentNode.dispatchEvent(event);
+        }
+    };
+}

package/dist/ui/preview/Preview.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">import Button from "../../controls/button/Button.svelte";
+import Slotted from "../../utils/slotted/Slotted.svelte";
+import { fade } from "svelte/transition";
+let {
+  class: className = "",
+  element = $bindable(),
+  style = "",
+  data = [],
+  columns = 3,
+  isExpanded = $bindable(false),
+  children,
+  previewZoom,
+  ...rest
+} = $props();
+</script>
+
+<div class="preview-root">
+	{@render children?.({ data })}
+</div>
+{#if isExpanded}
+	<div class="preview" in:fade|global>
+		<div>
+			<Button
+				onclick={() => {
+					isExpanded = false;
+				}}
+				variant="naked"
+				icon="chevron-left"
+			/>
+		</div>
+		<div class="preview-zoom">
+			{@render previewZoom?.({ data })}
+		</div>
+	</div>
+{/if}
+
+<style>.preview-root {
+  display: contents;
+}
+
+.preview {
+  display: flex;
+}
+.preview .preview-zoom {
+  flex: 1;
+}</style>