@medyll/idae-slotui-svelte 0.3.0

package/dist/ui/panel/Panel.demo.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">import Paneler from "./Paneler.svelte";
+import PanelSlide from "./PanelSlide.svelte";
+import Panel from "./Panel.svelte";
+import PanelGrid from "./PanelGrid.svelte";
+import { defaultsArgs } 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";
+let parametersSlot = {
+  isOpen: {
+    type: "boolean",
+    values: [true, false]
+  }
+};
+$: componentArgsSlot = {
+  ...defaultsArgs(parametersSlot),
+  onClose: () => {
+    componentArgsSlot.open = !componentArgsSlot.open;
+  },
+  data: [
+    { id: 1, name: "name" },
+    { id: 2, name: "name" },
+    { id: 3, name: "name" },
+    { id: 4, name: "name" }
+  ]
+};
+let codeSlot = `
+<script>
+  import Paneler from "./Paneler.svelte"; 
+  import PanelSlide from "./PanelSlide.svelte"; 
+  import Panel from "./Panel.svelte"; 
+  import PanelGrid from "./PanelGrid.svelte";
+<\/script>
+
+<Paneler style="width:450px;height:450px;overflow:hidden;">
+  <PanelSlide
+    class="overflow-x-hidden overflow-y-auto"
+    open={true}>
+      <Panel data={{ some: "data" }} title="Some Items">
+        <PanelGrid data={[...Array(9)]} let:data>
+            <div class="pad border radius-tiny">Some</div>
+            {#snippet panelGridZoom()}
+				<div class="pad-4 text-center theme-bg-primary">Some large</div>
+			{/snippet}
+            Some large
+            </div>
+        </PanelGrid>
+      </Panel>
+      <Panel title="Recent Items">
+        <PanelGrid data={[...Array(12)]} columns={6}>
+            <div class="pad border radius-tiny">Recent</div>
+        </PanelGrid>
+      </Panel>
+      <Panel title="Other Items">
+        <PanelGrid data={[...Array(7)]} columns={2}>
+            <div class="pad border radius-tiny">Others</div>
+        </PanelGrid>
+      </Panel>
+  </PanelSlide>
+  <PanelSlide
+    class="overflow-x-hidden overflow-y-auto"
+    let:panelSlideId
+    open={false}
+    let:data>
+      <Panel title="Zoom area">
+        <PanelGrid data={[...Array(130)]} columns={1}>
+            <div class="pad border radius-tiny">
+            list item for {panelSlideId}
+            </div>
+        </PanelGrid>
+      </Panel>
+  </PanelSlide> 
+</Paneler>
+`;
+let codeProps = `
+    <Button
+        onclick={() => {
+            openWindow("html", {
+            componentProps: { some: "props", someother: "deprops" },
+            contentHTML:
+                '<div class="pad-4 align-center">some html content</div>',
+            });
+        }}>
+        Window with html content
+    </Button>
+    
+    <Button
+        onclick={() => {
+            openWindow("component", {
+            component: Debug,
+            componentProps: { some: "props", someother: "deprops" },
+            });
+        }}>
+        Window with component
+    </Button>`;
+</script>
+
+<ComponentDemo
+	component="Panel"
+	cite="If you can slide, then there are chances you are a panel<br /> C. Quin 2013"
+>
+	<div class="flex-v gap-large">
+		<DemoPage code={codeSlot} component="Panel">
+			<Demoer parameters={parametersSlot} componentArgs={componentArgsSlot}>
+				{#snippet children({ activeParams })}
+					<div class=" w-full pad pos-rel">
+						<Paneler style="width:450px;height:450px;overflow:hidden;">
+							<PanelSlide class="overflow-x-hidden overflow-y-auto" open={true}>
+								<Panel data={{ some: 'data' }} title="Some Items">
+									<PanelGrid data={[...Array(9)]}>
+										{#snippet children({ data })}
+											<div class="pad border radius-tiny">Some</div>
+										{/snippet}
+										{#snippet panelGridZoom()}
+											<div class="pad-4 text-center theme-bg-primary">Some large</div>
+										{/snippet}
+									</PanelGrid>
+								</Panel>
+								<Panel title="More Items">
+									<PanelGrid data={[...Array(12)]} columns={6}>
+										<div class="pad border radius-tiny">More</div>
+									</PanelGrid>
+								</Panel>
+								<!-- <Panel title="Other Items">
+									<PanelGrid data={[...Array(7)]} columns={2}>
+										<div class="pad border radius-tiny">Others</div>
+									</PanelGrid>
+								</Panel> -->
+								{#snippet panelSlideZoom()}
+									<Panel title="Zoom area">
+										{#snippet children({ data, panelSlideId })}
+											<Panel title="Zoom area">
+												<PanelGrid data={[...Array(130)]} columns={1}>
+													<div class="pad border radius-tiny">
+														list item for {panelSlideId}
+													</div>
+												</PanelGrid>
+											</Panel>
+										{/snippet}
+									</Panel>
+								{/snippet}
+							</PanelSlide>
+							<PanelSlide class="overflow-x-hidden overflow-y-auto" open={false}
+								>{#snippet children({ data, panelSlideId })}
+									<Panel title="Zoom area">
+										<PanelGrid data={[...Array(130)]} columns={1}>
+											<div class="pad border radius-tiny">
+												list item for {panelSlideId}
+											</div>
+										</PanelGrid>
+									</Panel>
+								{/snippet}
+							</PanelSlide>
+						</Paneler>
+					</div>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/ui/panel/Panel.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 PanelProps = typeof __propDef.props;
+export type PanelEvents = typeof __propDef.events;
+export type PanelSlots = typeof __propDef.slots;
+export default class Panel extends SvelteComponent<PanelProps, PanelEvents, PanelSlots> {
+}
+export {};

package/dist/ui/panel/Panel.svelte

@@ -0,0 +1,112 @@
+<script lang="ts" generics="T=Data">import { run } from "svelte/legacy";
+import { onMount, getContext } from "svelte";
+import Button from "../../controls/button/Button.svelte";
+let {
+  title = "not set",
+  panelId = crypto.randomUUID(),
+  data = void 0,
+  showNavigation = true,
+  panelButtonPrevious,
+  panelButtonNext,
+  children
+} = $props();
+export const actions = {
+  load: (args) => {
+  }
+};
+let ref = $state(void 0);
+let panelSlideId = getContext("PanelSlide");
+let panelerContext = getContext("Paneler");
+let currentIdx = $state(), hasNext = $state(), hasPrev = $state();
+$effect(() => {
+  if ($panelerContext.panelSlides) {
+    currentIdx = Object.keys($panelerContext.panelSlides).indexOf(panelSlideId);
+    hasNext = Boolean(Object.keys($panelerContext.panelSlides)[currentIdx + 1]);
+    hasPrev = Boolean(Object.keys($panelerContext.panelSlides)[currentIdx - 1]);
+  }
+});
+function prevNextPanel(page) {
+  const event = new CustomEvent("panel:button:clicked", {
+    detail: { panelId, page, data },
+    bubbles: true
+  });
+  ref?.dispatchEvent(event);
+}
+</script>
+
+<div class="panel" bind:this={ref}>
+	<div class="panel-bar pos-sticky top-0 gap-small">
+		<div style="flex:1">{title}</div>
+		{#if hasPrev}
+			{#if panelButtonPrevious}
+				<div
+					onclick={() => {
+						prevNextPanel('prev');
+					}}
+				>
+					{@render panelButtonPrevious?.()}
+				</div>
+			{:else}
+				<Button
+					icon="chevron-left"
+					tall="mini"
+					variant="naked"
+					onclick={() => {
+						prevNextPanel('prev');
+					}}
+				/>
+			{/if}
+		{/if}
+		{#if hasNext}
+			{#if panelButtonNext}
+				<div
+					onclick={() => {
+						prevNextPanel('next');
+					}}
+				>
+					{@render panelButtonNext?.()}
+				</div>
+			{:else}
+				<Button
+					iconEnd="chevron-right"
+					variant="naked"
+					tall="mini"
+					onclick={() => {
+						prevNextPanel('next');
+					}}
+				></Button>
+			{/if}
+		{/if}
+	</div>
+	<div class="panelContent">
+		{@render children?.({ panelId, actions })}
+	</div>
+</div>
+
+<style>:root {
+  --panel-margin-bottom: 2rem;
+  --panel-bar-margin-bottom: 2rem;
+  --panel-bar-padding-right: var(--sld-pad-tiny);
+  --panel-bar-button-padding: 0 var(--sld-pad-tiny);
+  --panel-bar-button-border: 1px solid rgba(255, 255, 255, 0.05);
+  --panel-bar-button-background-color: rgba(255, 255, 255, 0.1);
+}
+
+.panel {
+  position: relative;
+  margin-bottom: var(--panel-margin-bottom);
+}
+
+.panel .panel-bar {
+  margin-bottom: var(--panel-bar-margin-bottom);
+  display: flex;
+  min-width: auto;
+  align-items: center;
+  padding-right: var(--panel-bar-padding-right);
+}
+
+.panel .panel-bar button {
+  padding: var(--panel-bar-button-padding);
+  border: var(--panel-bar-button-border);
+  background-color: var(--panel-bar-button-background-color);
+}</style>

package/dist/ui/panel/Panel.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { PanelProps } from './types.js';
+import type { Data } from '../../types/index.js';
+declare class __sveltets_Render<T = Data> {
+    props(): PanelProps<T> & {
+        actions?: {
+            load: (args: any) => void;
+        } | undefined;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type PanelProps_<T = Data> = ReturnType<__sveltets_Render<T>['props']>;
+export type PanelEvents<T = Data> = ReturnType<__sveltets_Render<T>['events']>;
+export type PanelSlots<T = Data> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class Panel<T = Data> extends SvelteComponent<PanelProps_<T>, PanelEvents<T>, PanelSlots<T>> {
+    get actions(): {
+        load: (args: any) => void;
+    };
+}
+export {};

package/dist/ui/panel/PanelGrid.svelte

@@ -0,0 +1,68 @@
+<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,
+  panelGridZoom,
+  ...rest
+} = $props();
+</script>
+
+{#if data}
+	<div
+		class="slotUiGrid panelGrid"
+		style="--sld-column-size:{Math.floor(100 / columns)}%;gap:0.5rem"
+		{...rest}
+	>
+		{#each data as dta}
+			{#if !isExpanded}
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div
+					onclick={() => {
+						if (panelGridZoom) isExpanded = true;
+					}}
+					class="panelGridThumb"
+					in:fade|global
+				>
+					<Slotted child={children} slotArgs={{ data: dta }}></Slotted>
+				</div>
+			{/if}
+		{/each}
+	</div>
+	{#if isExpanded}
+		<div class="panelGridPreview" in:fade|global>
+			<div>
+				<Button
+					onclick={() => {
+						isExpanded = false;
+					}}
+					variant="naked"
+					icon="chevron-left"
+					class="theme-text-primary"
+				/>
+			</div>
+			<div class="panelGridZoom">
+				<Slotted child={panelGridZoom}></Slotted>
+			</div>
+		</div>
+	{/if}
+{/if}
+
+<style>.panelGridPreview {
+  display: flex;
+}
+.panelGridPreview .panelGridZoom {
+  flex: 1;
+}
+.slotUiGrid {
+  display: grid;
+  grid-gap: 0.2rem;
+  grid-template-columns: repeat(auto-fit, minmax(calc(var(--sld-column-size) - 0.5rem), 1fr));
+}</style>

package/dist/ui/panel/PanelGrid.svelte.d.ts

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

package/dist/ui/panel/PanelSlide.svelte

@@ -0,0 +1,148 @@
+<svelte:options />
+
+<script lang="ts">import { transitions } from "../../utils/effects/transitions.js";
+import { onMount, setContext, getContext } from "svelte";
+const { slideInNoName, slideOutNoName } = transitions;
+import Slotted from "../../utils/slotted/Slotted.svelte";
+let panelSlideRef;
+let {
+  class: className = "",
+  element = $bindable(panelSlideRef),
+  style = "",
+  open,
+  component,
+  flow = "absolute",
+  outer,
+  panelSlideId = crypto.randomUUID(),
+  panelSlideZoom,
+  children,
+  ...rest
+} = $props();
+let transitionTo;
+export const actions = {
+  open: () => {
+    setVisible(true);
+  },
+  close: () => {
+    setVisible(false);
+  },
+  toggle: () => {
+    setVisible(!open);
+  },
+  hasNextPrev: (nextPrev) => {
+    const registredPanelSlides = $panelerContext.panelSlides;
+    const slidePanelsKeys = Object.keys(registredPanelSlides);
+    const activeIdx = slidePanelsKeys.indexOf(panelSlideId);
+  }
+};
+const panelerContext = getContext("Paneler");
+if (outer) setContext("PanelSlide", panelSlideId);
+$effect(() => {
+  if (!$panelerContext.panelSlides[panelSlideId] && outer && panelerContext) {
+    $panelerContext.panelSlides[panelSlideId] = {};
+  }
+});
+$effect(() => {
+  if (panelerContext && component && outer) {
+    $panelerContext.panelSlides[panelSlideId] = component;
+  }
+});
+$effect(() => {
+  panelSlideRef?.addEventListener("panel-button-clicked", (event) => {
+    toggleSlidePanels(event);
+  });
+  return () => {
+    delete $panelerContext.panelSlides?.[panelSlideId];
+  };
+});
+function setVisible(vis) {
+  open = vis;
+}
+function toggleSlidePanels(event) {
+  const { panelId, page, data } = event.detail;
+  const registredPanelSlides = $panelerContext.panelSlides;
+  const slidePanelsKeys = Object.keys(registredPanelSlides);
+  const activeIdx = slidePanelsKeys.indexOf(panelSlideId);
+  let prevNext;
+  if (page === "next" && slidePanelsKeys[activeIdx + 1]) {
+    prevNext = slidePanelsKeys[activeIdx + 1];
+    transitionTo = "next";
+  }
+  if (page === "prev" && slidePanelsKeys[activeIdx - 1]) {
+    prevNext = slidePanelsKeys[activeIdx - 1];
+    transitionTo = "prev";
+  }
+  actions.close();
+  if (prevNext) {
+    const activePanelSlideId = registredPanelSlides[prevNext].panelSlideId;
+    $panelerContext.activePanelSlideData[activePanelSlideId] = data;
+    registredPanelSlides[prevNext].actions.open();
+  }
+}
+</script>
+
+{#if !outer}
+	<svelte:self
+		bind:this={component}
+		outer={true}
+		{panelSlideId}
+		{flow}
+		{open}
+		{style}
+		{children}
+		{panelSlideZoom}
+	/>
+{:else if open}
+	<div
+		bind:this={panelSlideRef}
+		out:slideOutNoName|global={{ duration: 125, delay: 20, direction: transitionTo }}
+		in:slideInNoName|global={{ duration: 150, delay: 150, direction: transitionTo }}
+		class="sidePanel {className}"
+		style:position={flow ?? ''}
+		{style}
+		{...rest}
+	>
+		{@render children?.({ panelSlideId, data: $panelerContext.activePanelSlideData[panelSlideId] })}
+	</div>
+	{#if panelSlideZoom}
+		<svelte:self class={className}>
+			{@render panelSlideZoom?.()}
+		</svelte:self>
+	{/if}
+{/if}
+
+<style>:root {
+  --panel-margin-bottom: 2rem;
+  --panel-bar-margin-bottom: 2rem;
+  --panel-bar-padding-right: var(--sld-pad-tiny);
+  --panel-bar-button-padding: 0 var(--sld-pad-tiny);
+  --panel-bar-button-border: 1px solid rgba(255, 255, 255, 0.05);
+  --panel-bar-button-background-color: rgba(255, 255, 255, 0.1);
+}
+
+.panel {
+  position: relative;
+  margin-bottom: var(--panel-margin-bottom);
+}
+
+.panel .panel-bar {
+  margin-bottom: var(--panel-bar-margin-bottom);
+  display: flex;
+  min-width: auto;
+  align-items: center;
+  padding-right: var(--panel-bar-padding-right);
+}
+
+.panel .panel-bar button {
+  padding: var(--panel-bar-button-padding);
+  border: var(--panel-bar-button-border);
+  background-color: var(--panel-bar-button-background-color);
+}
+
+.sidePanel {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  padding: 1rem 2rem;
+  width: 100%;
+}</style>

package/dist/ui/panel/PanelSlide.svelte.d.ts

@@ -0,0 +1,43 @@
+import { SvelteComponent } from "svelte";
+import type { Snippet } from 'svelte';
+import type { CommonProps, ElementProps } from '../../types/index.js';
+declare const __propDef: {
+    props: CommonProps & {
+        /** Whether the panel is open or not */
+        open: boolean;
+        /** Component to be rendered in the panel */
+        component?: SvelteComponent;
+        /** Flow of the panel */
+        flow?: ElementProps["flow"];
+        /** Whether the panel is outer or not */
+        outer?: boolean;
+        /** Unique ID for the panel slide */
+        panelSlideId?: string;
+        panelSlideZoom?: import("svelte").Snippet;
+        /** Children   for the default content */
+        children?: Snippet<[any]>;
+    } & {
+        actions?: {
+            open: () => void;
+            close: () => void;
+            toggle: () => void;
+            hasNextPrev: (nextPrev: "next" | "prev") => void;
+        };
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type PanelSlideProps_ = typeof __propDef.props;
+export { PanelSlideProps_ as PanelSlideProps };
+export type PanelSlideEvents = typeof __propDef.events;
+export type PanelSlideSlots = typeof __propDef.slots;
+export default class PanelSlide extends SvelteComponent<PanelSlideProps_, PanelSlideEvents, PanelSlideSlots> {
+    get actions(): {
+        open: () => void;
+        close: () => void;
+        toggle: () => void;
+        hasNextPrev: (nextPrev: "next" | "prev") => void;
+    };
+}

package/dist/ui/panel/Paneler.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">import { fade, slide } from "svelte/transition";
+import { setContext } from "svelte";
+import { writable } from "svelte/store";
+import Slotted from "../../utils/slotted/Slotted.svelte";
+import { onEvent } from "../../utils/uses/event.js";
+let {
+  class: className = "",
+  element = null,
+  style = "",
+  dd = "",
+  children
+} = $props();
+export const panelerStore = writable({
+  activePanelId: void 0,
+  activePanelSlideData: {},
+  panelSlides: {},
+  panels: {}
+});
+setContext("Paneler", panelerStore);
+let slideLeft;
+let slideRight;
+function toggleSlidePanels(event) {
+  console.log(event);
+}
+</script>
+
+<div
+	use:onEvent={{ event: 'panel:button:clicked', action: toggleSlidePanels }}
+	transition:fade|global={{ duration: 50 }}
+	class={className}
+	{style}
+>
+	{@render children?.()}
+</div>
+
+<style></style>

package/dist/ui/panel/Paneler.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import type { PanelContextType } from './types.js';
+declare const __propDef: {
+    props: {
+        class?: string;
+        element?: HTMLInputElement | null;
+        style?: string;
+        dd?: string;
+        children?: import("svelte").Snippet;
+    } & {
+        panelerStore?: PanelContextType;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type PanelerProps_ = typeof __propDef.props;
+export { PanelerProps_ as PanelerProps };
+export type PanelerEvents = typeof __propDef.events;
+export type PanelerSlots = typeof __propDef.slots;
+export default class Paneler extends SvelteComponent<PanelerProps_, PanelerEvents, PanelerSlots> {
+    get panelerStore(): PanelContextType;
+}

package/dist/ui/panel/panel.scss

@@ -0,0 +1,32 @@
+@import "../../styles/slotui-mixins.scss";
+
+:root {
+    --panel-margin-bottom: 2rem;
+    --panel-bar-margin-bottom: 2rem;
+    --panel-bar-padding-right: var(--sld-pad-tiny);
+    --panel-bar-button-padding: 0 var(--sld-pad-tiny);
+    --panel-bar-button-border: 1px solid rgba(255, 255, 255, 0.05);
+    --panel-bar-button-background-color: rgba(255, 255, 255, 0.1);
+}
+
+.panel {
+    position: relative;
+    margin-bottom: var(--panel-margin-bottom);
+
+    .panel-bar {
+        margin-bottom: var(--panel-bar-margin-bottom);
+        display: flex;
+        min-width: auto;
+        align-items: center;
+        padding-right: var(--panel-bar-padding-right);
+
+        button {
+            padding: var(--panel-bar-button-padding);
+            border: var(--panel-bar-button-border);
+            background-color: var(--panel-bar-button-background-color);
+        }
+    }
+
+    .panelContent {
+    }
+}