@medyll/idae-slotui-svelte 0.3.0

package/dist/utils/content/Content.svelte

@@ -0,0 +1,178 @@
+<!--
+ @component Content
+	@ Adds css properties for width, height, offsetHeight, and offsetWidth to the style of the element.
+	@ var(--${cssPrefix}-height)
+	@ var(--${cssPrefix}-width)
+	@ var(--${cssPrefix}-offset-height)
+	@ var(--${cssPrefix}-offset-width)
+	@ EThe content element will fire a custom 'dom:resize' event when the bindable properties change. 
+-->
+<script lang="ts">let {
+  element = $bindable(),
+  dimensions = $bindable({
+    clientHeight: element?.clientHeight,
+    clientWidth: element?.clientWidth,
+    offsetHeight: element?.offsetHeight,
+    offsetWidth: element?.offsetWidth
+  }),
+  cssVar,
+  cssPrefix = "bind",
+  tag = "div",
+  style = $bindable(""),
+  solid = false,
+  implementation = "inline",
+  onresize = (event) => {
+  },
+  children,
+  ...rest
+} = $props();
+cssVar = `--${cssPrefix}-height: ${dimensions.clientHeight}px; 
+            --${cssPrefix}-width: ${dimensions.clientWidth}px; 
+            --${cssPrefix}-offset-height: ${dimensions.offsetHeight}px; 
+            --${cssPrefix}-offset-width: ${dimensions.offsetWidth}px;`;
+$effect(() => {
+  if (element && dimensions)
+    element.dispatchEvent(
+      new CustomEvent("dom:resize", {
+        detail: { dimensions, element }
+      })
+    );
+});
+function transformToObj(dimensions2) {
+  let result = {};
+  for (let key in dimensions2) {
+    result[`--${cssPrefix}-${key}`] = `${dimensions2[key]}px`;
+  }
+  return result;
+}
+function applyStyle() {
+  switch (implementation) {
+    case "inline":
+      return `${cssVar};display:contents;${style ?? ""}`;
+    case "style":
+      return `${cssVar};display:block;${style ?? ""}`;
+  }
+}
+</script>
+
+<svelte:element
+	this={tag}
+	bind:this={element}
+	bind:clientHeight={dimensions.clientHeight}
+	bind:clientWidth={dimensions.clientWidth}
+	bind:offsetHeight={dimensions.offsetHeight}
+	bind:offsetWidth={dimensions.offsetWidth}
+	style={`${cssVar};${style}`}
+	class={'content ' + rest?.class}
+	{...rest}
+>
+	{@render children?.()}
+</svelte:element>
+
+<style>.content {
+  --preset-width: var(--sld-width-small);
+  width: var(--preset-width-small);
+  --preset-gutter: var(--sld-gutter-default);
+}
+.content {
+  --preset-width: var(--sld-width-small);
+  width: var(--preset-width-small);
+  min-width: var(--preset-width-small);
+}
+.content[width=tiny], .content.width-tiny {
+  --preset-width: var(--sld-width-tiny);
+  width: var(--sld-width-tiny) !important;
+}
+.content[width=mini], .content.width-mini {
+  --preset-width: var(--sld-width-mini);
+  width: var(--sld-width-mini) !important;
+}
+.content[width=small], .content.width-small {
+  --preset-width: var(--sld-width-small);
+  width: var(--sld-width-small) !important;
+}
+.content[width=med], .content.width-med {
+  --preset-width: var(--sld-width-med);
+  width: var(--sld-width-med) !important;
+}
+.content[width=kind], .content.width-kind {
+  --preset-width: var(--sld-width-kind);
+  width: var(--sld-width-kind) !important;
+}
+.content[width=full], .content.width-full {
+  --preset-width: var(--sld-width-full);
+  width: var(--sld-width-full) !important;
+}
+.content[width=auto], .content.width-auto {
+  --preset-width: var(--sld-width-auto);
+  width: var(--sld-width-auto) !important;
+}
+.content[width=default], .content.width-default {
+  --preset-width: var(--sld-width-default);
+  width: var(--sld-width-default) !important;
+}
+.content :global([gutter="tiny"]), .content :global(.gutter-tiny) {
+  padding: var(--sld-gutter-tiny);
+  gap: var(--sld-gutter-tiny);
+  --preset-gutter: var(--sld-gutter-tiny);
+}
+.content :global([gutter="mini"]), .content :global(.gutter-mini) {
+  padding: var(--sld-gutter-mini);
+  gap: var(--sld-gutter-mini);
+  --preset-gutter: var(--sld-gutter-mini);
+}
+.content :global([gutter="small"]), .content :global(.gutter-small) {
+  padding: var(--sld-gutter-small);
+  gap: var(--sld-gutter-small);
+  --preset-gutter: var(--sld-gutter-small);
+}
+.content :global([gutter="med"]), .content :global(.gutter-med) {
+  padding: var(--sld-gutter-med);
+  gap: var(--sld-gutter-med);
+  --preset-gutter: var(--sld-gutter-med);
+}
+.content :global([gutter="kind"]), .content :global(.gutter-kind) {
+  padding: var(--sld-gutter-kind);
+  gap: var(--sld-gutter-kind);
+  --preset-gutter: var(--sld-gutter-kind);
+}
+.content :global([gutter="default"]), .content :global(.gutter-default) {
+  padding: var(--sld-gutter-default);
+  gap: var(--sld-gutter-default);
+  --preset-gutter: var(--sld-gutter-default);
+}
+.content {
+  --preset-tall: var(--sld-tall-small);
+  min-height: var(--preset-tall-small);
+  height: var(--preset-tall-small);
+}
+.content[tall=tiny], .content.tall-tiny {
+  min-height: var(--sld-tall-tiny) !important;
+}
+.content[tall=mini], .content.tall-mini {
+  min-height: var(--sld-tall-mini) !important;
+}
+.content[tall=small], .content.tall-small {
+  min-height: var(--sld-tall-small) !important;
+}
+.content[tall=med], .content.tall-med {
+  min-height: var(--sld-tall-med) !important;
+}
+.content[tall=kind], .content.tall-kind {
+  min-height: var(--sld-tall-kind) !important;
+}
+.content[tall=auto], .content.tall-auto {
+  min-height: var(--sld-tall-auto) !important;
+}
+.content[tall=default], .content.tall-default {
+  min-height: var(--sld-tall-default) !important;
+}
+.content.elevation-0, .content[elevation-0] {
+  box-shadow: var(--sld-elevation-0);
+}
+.content.elevation-through, .content[elevation-through] {
+  box-shadow: var(--sld-elevation-through);
+}
+.content.elevation-5, .content[elevation-5] {
+  box-shadow: var(--sld-elevation-5);
+}</style>

package/dist/utils/content/Content.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import type { ContentProps } from './types.js';
+declare const __propDef: {
+    props: ContentProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type ContentProps_ = typeof __propDef.props;
+export { ContentProps_ as ContentProps };
+export type ContentEvents = typeof __propDef.events;
+export type ContentSlots = typeof __propDef.slots;
+/**
+ * Content
+ * @ Adds css properties for width, height, offsetHeight, and offsetWidth to the style of the element.
+ * @ var(--${cssPrefix}-height)
+ * @ var(--${cssPrefix}-width)
+ * @ var(--${cssPrefix}-offset-height)
+ * @ var(--${cssPrefix}-offset-width)
+ * @ EThe content element will fire a custom 'dom:resize' event when the bindable properties change.
+ */
+export default class Content extends SvelteComponent<ContentProps_, ContentEvents, ContentSlots> {
+}

package/dist/utils/content/types.d.ts

@@ -0,0 +1,31 @@
+import type { CommonProps, ElementProps } from '../../types/index.js';
+import type { Snippet } from 'svelte';
+export type ContentProps = CommonProps & {
+    /** all the html tags */
+    tag?: keyof HTMLElementTagNameMap;
+    element?: Partial<HTMLElement>;
+    cssPrefix?: string;
+    cssVar?: string;
+    /** uses style.display = contents */
+    solid?: boolean;
+    dimensions?: {
+        clientHeight?: number;
+        clientWidth?: number;
+        offsetHeight?: number;
+        offsetWidth?: number;
+    };
+    implementation?: 'inline' | 'style';
+    tall?: ElementProps['tall'];
+    width?: ElementProps['width'];
+    gutter?: ElementProps['gutter'];
+    elevation?: ElementProps['elevation'];
+    onresize?: (event: BindableEvent) => void;
+    children?: Snippet;
+};
+export type BindableEvent = CustomEvent<{
+    element: any;
+    clientHeight?: number;
+    clientWidth?: number;
+    offsetHeight?: number;
+    offsetWidth?: number;
+}>;

package/dist/utils/content/types.js

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

package/dist/utils/contextRooter/ContextRooter.demo.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">import { defaultsArgs, defaultsArgsFromProps } from "../../base/demoer/demoer.utils.js";
+import ComponentDemo from "../../base/demoer/DemoerComponent.svelte";
+import DemoerCode from "../../base/demoer/DemoerCode.svelte";
+import Demoer from "../../base/demoer/Demoer.svelte";
+import DemoPage from "../../base/demoer/DemoPage.svelte";
+import Icon from "../../base/icon/Icon.svelte";
+import { uiPresets } from "../engine/presets.js";
+let codeSlot = `
+<script>
+    /** read and set svelte context from component root */
+    import ContextRooter  from "./ContextRooter.svelte";
+    let myContextRef;
+    setContext("myContext", {some:"data"});
+
+    $: myContext = myContextRef
+
+    $myContext.some = "other data"
+<\/script>
+
+<ContextRooter
+    contextKey="Read and set svelte context from component root"
+    bind:this={myContextRef} />`;
+</script>
+
+<ComponentDemo component="ContextRoot">
+	<div class="flex-v gap-large">
+		<DemoerCode title="myContext" code={codeSlot} />
+	</div>
+</ComponentDemo>

package/dist/utils/contextRooter/ContextRooter.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 ContextRooterProps = typeof __propDef.props;
+export type ContextRooterEvents = typeof __propDef.events;
+export type ContextRooterSlots = typeof __propDef.slots;
+export default class ContextRooter extends SvelteComponent<ContextRooterProps, ContextRooterEvents, ContextRooterSlots> {
+}
+export {};

package/dist/utils/contextRooter/ContextRooter.svelte

@@ -0,0 +1,4 @@
+<script lang="ts" generics="T">import { getContext } from "svelte";
+let { contextKey = "red", contextRoot = $bindable() } = $props();
+contextRoot = getContext(contextKey);
+</script>

package/dist/utils/contextRooter/ContextRooter.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+declare class __sveltets_Render<T> {
+    props(): {
+        contextKey?: string;
+        contextRoot?: unknown;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type ContextRooterProps<T> = ReturnType<__sveltets_Render<T>['props']>;
+export type ContextRooterEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
+export type ContextRooterSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class ContextRooter<T> extends SvelteComponent<ContextRooterProps<T>, ContextRooterEvents<T>, ContextRooterSlots<T>> {
+}
+export {};

package/dist/utils/css/Css.demo.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">import Css from "./Css.svelte";
+</script>
+
+<Css />

package/dist/utils/css/Css.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 CssProps = typeof __propDef.props;
+export type CssEvents = typeof __propDef.events;
+export type CssSlots = typeof __propDef.slots;
+export default class Css extends SvelteComponent<CssProps, CssEvents, CssSlots> {
+}
+export {};

package/dist/utils/css/Css.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">import Looper from "../looper/Looper.svelte";
+</script>
+
+{#snippet cssBlock(color)}
+	<div>
+		<div class="flex-h gap-small">
+			<div>- {color}</div>
+		</div>
+		<div class="flex-h gap-small" style="background-color:purple">
+			<div style="background-color:var(--sld-color-{color})"></div>
+			{#each ['alpha', 'darken', 'lighten'] as typ}
+				<div style="">
+					<div>{typ}</div>
+					{#each ['low', 'mid', 'high'] as _nope}
+						<div style="background-color:var(--sld-color-{color}-{typ}-{_nope})">{_nope}</div>
+					{/each}
+				</div>
+			{/each}
+		</div>
+	</div>
+{/snippet}
+{#snippet cssElevation(color)}
+	<div style="box-shadow: var(--sld-elevation-{color})" class="flex-h gap-med">
+		<div>elevation-{color}</div>
+		<div></div>
+	</div>
+{/snippet}
+foreground, "background"
+<div class="flex-h gap-small">
+	<Looper data={['foreground', 'background', 'paper']}>
+		{#snippet children(item)}
+			{@render cssBlock(item)}
+		{/snippet}
+	</Looper>
+</div>
+primary, secondary, tertiary;
+<div class="flex-h gap-small">
+	<Looper data={['primary', 'secondary', 'tertiary']}>
+		{#snippet children(item)}
+			{@render cssBlock(item)}
+		{/snippet}
+	</Looper>
+</div>
+discrete, success, info, warning, alert, error
+<div class="flex-h gap-small">
+	<Looper data={['discrete', 'success', 'info', 'warning', 'alert', 'error']}>
+		{#snippet children(item)}
+			{@render cssBlock(item)}
+		{/snippet}
+	</Looper>
+</div>
+elevation 1/5
+<Looper naked={false} class="flex-v gap-small" data={[1, 2, 3, 4, 5]}>
+	{#snippet children(item)}
+		{@render cssElevation(item)}
+	{/snippet}
+</Looper>
+
+<style>
+	div {
+		padding: 1rem;
+	}
+</style>

package/dist/utils/css/Css.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 CssProps = typeof __propDef.props;
+export type CssEvents = typeof __propDef.events;
+export type CssSlots = typeof __propDef.slots;
+export default class Css extends SvelteComponent<CssProps, CssEvents, CssSlots> {
+}
+export {};

package/dist/utils/effects/transitions.d.ts

@@ -0,0 +1,44 @@
+type DurationDelayType = {
+    duration: number;
+    delay: number;
+    direction?: 'prev' | 'next';
+};
+declare function slideOut(node: HTMLElement, { duration, delay }: DurationDelayType): {
+    duration: number;
+    delay: number;
+    css: (t: number) => string;
+};
+declare function slideOutRt(node: HTMLElement, { duration, delay }: DurationDelayType): {
+    duration: number;
+    delay: number;
+    css: (t: number) => string;
+};
+declare function slideIn(node: HTMLElement, { duration, delay }: DurationDelayType): {
+    duration: number;
+    delay: number;
+    css: (t: number) => string;
+};
+declare function slideInRtl(node: HTMLElement, { duration, delay }: DurationDelayType): {
+    duration: number;
+    delay: number;
+    css: (t: number) => string;
+};
+declare function slideInNoName(node: HTMLElement, { duration, delay, direction }: DurationDelayType): {
+    duration: number;
+    delay: number;
+    css: (t: number) => string;
+};
+declare function slideOutNoName(node: HTMLElement, { duration, delay, direction }: DurationDelayType): {
+    duration: number;
+    delay: number;
+    css: (t: number) => string;
+};
+export declare const transitions: {
+    slideOut: typeof slideOut;
+    slideOutRt: typeof slideOutRt;
+    slideIn: typeof slideIn;
+    slideInRtl: typeof slideInRtl;
+    slideOutNoName: typeof slideOutNoName;
+    slideInNoName: typeof slideInNoName;
+};
+export {};

package/dist/utils/effects/transitions.js

@@ -0,0 +1,77 @@
+import * as effects from 'svelte/easing';
+function slideOut(node, { duration, delay }) {
+    return {
+        duration,
+        delay,
+        css: (t) => {
+            const eased = effects.quadOut(t);
+            return `transform: translate(-${50 - eased * 50}px,0);
+        opacity: ${t}`;
+        }
+    };
+}
+function slideOutRt(node, { duration, delay }) {
+    return {
+        duration,
+        delay,
+        css: (t) => {
+            const eased = effects.quadOut(t);
+            return `transform: translate(${50 - eased * 50}px,0);
+        opacity: ${t}`;
+        }
+    };
+}
+function slideIn(node, { duration, delay }) {
+    return {
+        duration,
+        delay,
+        css: (t) => {
+            const eased = effects.quadOut(t);
+            return `transform: translate(${250 - eased * 250}px,0);
+        opacity: ${t}`;
+        }
+    };
+}
+function slideInRtl(node, { duration, delay }) {
+    return {
+        duration,
+        delay,
+        css: (t) => {
+            const eased = effects.quadOut(t);
+            return `transform: translate(-${250 - eased * 250}px,0);
+        opacity: ${t}`;
+        }
+    };
+}
+function slideInNoName(node, { duration, delay, direction }) {
+    const getTranslate = (eased) => direction === 'next' ? -(250 - eased * 250) : 250 - eased * 250;
+    return {
+        duration,
+        delay,
+        css: (t) => {
+            const eased = effects.quadOut(t);
+            return `transform: translate(${getTranslate(eased)}px,0);
+        opacity: ${t}`;
+        }
+    };
+}
+function slideOutNoName(node, { duration, delay, direction }) {
+    const getTranslate = (eased) => direction === 'next' ? -(250 - eased * 250) : 250 - eased * 250;
+    return {
+        duration,
+        delay,
+        css: (t) => {
+            const eased = effects.quadOut(t);
+            return `transform: translate(${getTranslate(eased)}px,0);
+        opacity: ${t}`;
+        }
+    };
+}
+export const transitions = {
+    slideOut,
+    slideOutRt,
+    slideIn,
+    slideInRtl,
+    slideOutNoName,
+    slideInNoName
+};

package/dist/utils/engine/elem.d.ts

@@ -0,0 +1,9 @@
+declare const elem: (node: HTMLElement | HTMLElement[] | string) => {
+    find: (qy: string) => Element | (Element | null)[] | null | undefined;
+    findAll: (qy: string) => NodeListOf<Element> | NodeListOf<Element>[] | undefined;
+    up: (qy?: string | undefined) => any;
+    next: (qy?: string | undefined) => any;
+    previous: (qy?: string | undefined) => any;
+    setStyle: (styles: Record<string, any>) => string | HTMLElement | HTMLElement[];
+};
+export { elem };

package/dist/utils/engine/elem.js

@@ -0,0 +1,106 @@
+/* be('#myElement')
+    .attr.set('data-test', 'value')
+    .data.set('test', 'value')
+    .dom.update('content')
+    .prop.set('id', 'myId'); */
+const elem = (node) => {
+    let isWhat = typeof node === 'string' ? 'qy' : node;
+    isWhat = Array.isArray(node) ? 'array' : isWhat;
+    isWhat = node instanceof HTMLElement ? 'element' : isWhat;
+    console.log(node, isWhat);
+    /* const elements = Array.isArray(node)
+        ? node
+        : Array.from(document.querySelectorAll(node as string)); */
+    function findWhile(element, property, expression = 0) {
+        let sibling = element[property];
+        while (sibling) {
+            if (sibling.matches(expression)) {
+                return sibling;
+            }
+            sibling = sibling[property];
+        }
+    }
+    return {
+        find: (qy) => {
+            switch (isWhat) {
+                case 'element':
+                    return node.querySelector(qy);
+                case 'array':
+                    return node.map((node) => node.querySelector(qy));
+                case 'string':
+                    return document.querySelector(node)?.querySelector(qy);
+            }
+        },
+        findAll: (qy) => {
+            switch (isWhat) {
+                case 'element':
+                    return node.querySelectorAll(qy);
+                case 'array':
+                    return node.map((node) => node.querySelectorAll(qy));
+                case 'string':
+                    return Array.from(document.querySelectorAll(node)).flatMap((node) => node.querySelectorAll(qy));
+            }
+        },
+        up: (qy) => {
+            switch (isWhat) {
+                case 'element':
+                    return findWhile(node, 'parentNode', qy);
+                case 'array':
+                    return node.map((node) => findWhile(node, 'parentNode', qy));
+                case 'string':
+                    return Array.from(document.querySelectorAll(node)).flatMap((node) => findWhile(node, 'parentNode', qy));
+            }
+        },
+        next: (qy) => {
+            switch (isWhat) {
+                case 'element':
+                    return findWhile(node, 'nextElementSibling', qy);
+                case 'array':
+                    return node.map((node) => findWhile(node, 'nextElementSibling', qy));
+                case 'string':
+                    return Array.from(document.querySelectorAll(node)).flatMap((node) => findWhile(node, 'nextElementSibling', qy));
+            }
+        },
+        previous: (qy) => {
+            switch (isWhat) {
+                case 'element':
+                    return findWhile(node, 'previousElementSibling', qy);
+                case 'array':
+                    return node.map((node) => findWhile(node, 'previousElementSibling', qy));
+                case 'string':
+                    return Array.from(document.querySelectorAll(node)).flatMap((node) => findWhile(node, 'previousElementSibling', qy));
+            }
+        },
+        setStyle: (styles) => {
+            switch (isWhat) {
+                case 'element':
+                    const elementStyle = node.style;
+                    for (const property in styles) {
+                        // @ts-ignore
+                        elementStyle[property] = styles[property];
+                    }
+                    return node;
+                case 'array':
+                    node.forEach((node) => {
+                        const elementStyle = node.style;
+                        for (const property in styles) {
+                            // @ts-ignore
+                            elementStyle[property] = styles[property];
+                        }
+                    });
+                    return node;
+                case 'string':
+                    Array.from(document.querySelectorAll(node)).forEach((node) => {
+                        const elementStyle = node.style;
+                        for (const property in styles) {
+                            // @ts-ignore
+                            elementStyle[property] = styles[property];
+                        }
+                    });
+                    return node;
+            }
+            return node;
+        }
+    };
+};
+export { elem };

package/dist/utils/engine/engine.d.ts

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

package/dist/utils/engine/engine.js

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

package/dist/utils/engine/presets.d.ts

@@ -0,0 +1,14 @@
+export { uiPresets } from '../../types/index.js';
+export declare enum Position {
+    TC = "TC",// Top Center
+    TL = "TL",// Top Left
+    TR = "TR",// Top Right
+    BC = "BC",// Bottom Center
+    BL = "BL",// Bottom Left
+    BR = "BR",// Bottom Right
+    T = "T",// Top
+    R = "R",// Right
+    B = "B",// Bottom
+    L = "L",// Left
+    C = "C"
+}