@danielito1996/compose-svelted 0.2.2 → 0.2.5

package/dist/components/layouts/LazyRow.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+    import { Modifier } from "../../core/modifier/Modifier";
+    import { Alignment } from "./Alignment";
+    import { Arrangement } from "./Arrangement";
+    import type { ArrangementValue } from "./Arrangement";
+    import type { VerticalAlignment } from "./Alignment";
+
+    export let items: any[] = [];
+    export let modifier: Modifier = Modifier.empty();
+
+    export let verticalAlignment: VerticalAlignment = Alignment.Top;
+    export let horizontalArrangement: ArrangementValue = Arrangement.Start;
+
+    export let scrollEnabled: boolean = true;
+    export let hideScrollbar: boolean = false;
+    export let horizontalSpacing: number | null = null;
+
+    function resolveGap(): string {
+        if (horizontalSpacing !== null) {
+            return `${horizontalSpacing}px`;
+        }
+
+        return horizontalArrangement.type === "spaced"
+            ? `${horizontalArrangement.gap}px`
+            : "0px";
+    }
+
+    function resolveOverflowX(): string {
+        return scrollEnabled ? "auto" : "hidden";
+    }
+
+    function resolveScrollbarStyle(): string {
+        if (!hideScrollbar) return "";
+
+        return `
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+    `;
+    }
+</script>
+
+<div
+        class={hideScrollbar ? "lazy-row--hide-scrollbar" : ""}
+        style={`
+    display: flex;
+    flex-direction: row;
+
+    align-items: ${verticalAlignment};
+    justify-content: ${horizontalArrangement.justifyContent};
+    gap: ${resolveGap()};
+
+    overflow-x: ${resolveOverflowX()};
+    overflow-y: visible;
+
+    height: fit-content;
+    min-height: fit-content;
+
+    ${resolveScrollbarStyle()}
+    ${modifier.toStyle()}
+  `}
+>
+    {#each items as item}
+        <slot {item} />
+    {/each}
+</div>
+
+<style>
+    .lazy-row--hide-scrollbar::-webkit-scrollbar {
+        display: none;
+    }
+</style>

package/dist/components/layouts/LazyRow.svelte.d.ts

@@ -0,0 +1,42 @@
+import { Modifier } from "../../core/modifier/Modifier";
+import type { ArrangementValue } from "./Arrangement";
+import type { VerticalAlignment } from "./Alignment";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const LazyRow: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    items?: any[];
+    modifier?: Modifier;
+    verticalAlignment?: VerticalAlignment;
+    horizontalArrangement?: ArrangementValue;
+    scrollEnabled?: boolean;
+    hideScrollbar?: boolean;
+    horizontalSpacing?: number | null;
+}, {
+    default: {
+        item: any;
+    };
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {
+        item: any;
+    };
+}, {}, string>;
+type LazyRow = InstanceType<typeof LazyRow>;
+export default LazyRow;

package/dist/components/layouts/Row.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import { Modifier } from "../../core/modifier/Modifier";
+    import { Alignment } from "./Alignment";
+    import { Arrangement } from "./Arrangement";
+    import type { ArrangementValue } from "./Arrangement";
+    import type { VerticalAlignment } from "./Alignment";
+
+    export let modifier: Modifier = Modifier.empty();
+    export let verticalAlignment: VerticalAlignment = Alignment.Top;
+    export let horizontalArrangement: ArrangementValue = Arrangement.Start;
+</script>
+
+<div
+        class="flex flex-row"
+        style={`
+            align-items: ${verticalAlignment};
+            justify-content: ${horizontalArrangement.justifyContent};
+        ${horizontalArrangement.type === "spaced" ? `gap:${horizontalArrangement.gap}px;` : ""}
+        ${modifier.toStyle()}
+    `}
+>
+    <slot />
+</div>

package/dist/components/layouts/Row.svelte.d.ts

@@ -0,0 +1,34 @@
+import { Modifier } from "../../core/modifier/Modifier";
+import type { ArrangementValue } from "./Arrangement";
+import type { VerticalAlignment } from "./Alignment";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Row: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    modifier?: Modifier;
+    verticalAlignment?: VerticalAlignment;
+    horizontalArrangement?: ArrangementValue;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Row = InstanceType<typeof Row>;
+export default Row;

package/dist/components/layouts/Scaffold.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+    import { Modifier } from "../../core/modifier/Modifier";
+
+    export let modifier: Modifier = Modifier.empty();
+
+    // Padding interno aplicado al content (como Scaffold paddingValues)
+    export let contentPadding: number = 16;
+
+    // Control del FAB
+    export let fabAlignment:
+        | "bottom-end"
+        | "bottom-center"
+        | "bottom-start" = "bottom-end";
+</script>
+
+<div
+        style={`
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    position: relative;
+    ${modifier.toStyle()}
+  `}
+>
+    <!-- Top Bar -->
+    <div>
+        <slot name="topBar" />
+    </div>
+
+    <!-- Content -->
+    <div
+            style={`
+      flex: 1;
+      position: relative;
+      padding: ${contentPadding}px;
+      overflow: auto;
+    `}
+    >
+        <slot />
+    </div>
+
+    <!-- Bottom Bar -->
+    <div>
+        <slot name="bottomBar" />
+    </div>
+
+    <!-- Floating Action Button -->
+    <div
+            style={`
+      position: absolute;
+      pointer-events: none;
+      inset: 0;
+    `}
+    >
+        <div
+                style={`
+        position: absolute;
+        pointer-events: auto;
+
+        ${
+          fabAlignment === "bottom-end"
+            ? "right: 16px; bottom: 16px;"
+            : fabAlignment === "bottom-center"
+            ? "left: 50%; transform: translateX(-50%); bottom: 16px;"
+            : "left: 16px; bottom: 16px;"
+        }
+      `}
+        >
+            <slot name="floatingActionButton" />
+        </div>
+    </div>
+</div>

package/dist/components/layouts/Scaffold.svelte.d.ts

@@ -0,0 +1,38 @@
+import { Modifier } from "../../core/modifier/Modifier";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Scaffold: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    modifier?: Modifier;
+    contentPadding?: number;
+    fabAlignment?: "bottom-end" | "bottom-center" | "bottom-start";
+}, {
+    topBar: {};
+    default: {};
+    bottomBar: {};
+    floatingActionButton: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    topBar: {};
+    default: {};
+    bottomBar: {};
+    floatingActionButton: {};
+}, {}, string>;
+type Scaffold = InstanceType<typeof Scaffold>;
+export default Scaffold;

package/dist/components/menus/DropdownMenu.svelte.d.ts

@@ -0,0 +1,26 @@
+export default DropdownMenu;
+type DropdownMenu = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string;
+};
+declare const DropdownMenu: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/menus/DropdownMenuItem.svelte.d.ts

@@ -0,0 +1,26 @@
+export default DropdownMenuItem;
+type DropdownMenuItem = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string;
+};
+declare const DropdownMenuItem: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/motion/AnimatedContent.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+    import type { ContentTransition } from "../../core/motion/ContentTransition";
+    import { fade } from "../../core/motion/contentTransitions";
+
+    export let targetState: any;
+    export let transition: ContentTransition = fade();
+
+    let currentKey = targetState;
+    let exiting = false;
+
+    let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+    $: if (targetState !== currentKey) {
+        exiting = true;
+
+        if (timeoutId) clearTimeout(timeoutId);
+
+        timeoutId = setTimeout(() => {
+            currentKey = targetState;
+            exiting = false;
+            timeoutId = null;
+        }, transition.duration);
+    }
+</script>
+
+<div class="relative w-full h-full overflow-hidden">
+    <div
+            class={`w-full h-full transition-all ${
+      exiting ? transition.exit : transition.enter
+    }`}
+    >
+        <slot />
+    </div>
+</div>

package/dist/components/motion/AnimatedContent.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { ContentTransition } from "../../core/motion/ContentTransition";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const AnimatedContent: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    targetState: any;
+    transition?: ContentTransition;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type AnimatedContent = InstanceType<typeof AnimatedContent>;
+export default AnimatedContent;

package/dist/components/motion/AnimatedVisibility.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+    import type { AnimationSpec } from "../../core/motion/AnimationSpec";
+    import { fadeIn, fadeOut } from "../../core/motion/transitions";
+
+    export let visible: boolean;
+
+    export let enter: AnimationSpec = fadeIn();
+    export let exit: AnimationSpec = fadeOut();
+
+    let shouldRender = visible;
+    let classes = "";
+
+    function applyEnter() {
+        classes = `
+            ${enter.base}
+            ${enter.from}
+        `;
+
+        requestAnimationFrame(() => {
+            classes = `
+                ${enter.base}
+                ${enter.to}
+            `;
+        });
+    }
+
+    function applyExit() {
+        classes = `
+            ${exit.base}
+            ${exit.from}
+        `;
+
+        requestAnimationFrame(() => {
+            classes = `
+                ${exit.base}
+                ${exit.to}
+            `;
+        });
+
+        setTimeout(() => {
+            shouldRender = false;
+        }, exit.duration);
+    }
+
+    $: {
+        if (visible) {
+            shouldRender = true;
+            applyEnter();
+        } else if (shouldRender) {
+            applyExit();
+        }
+    }
+</script>
+
+{#if shouldRender}
+    <div class={classes}>
+        <slot />
+    </div>
+{/if}

package/dist/components/motion/AnimatedVisibility.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { AnimationSpec } from "../../core/motion/AnimationSpec";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const AnimatedVisibility: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    visible: boolean;
+    enter?: AnimationSpec;
+    exit?: AnimationSpec;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type AnimatedVisibility = InstanceType<typeof AnimatedVisibility>;
+export default AnimatedVisibility;