@hyvor/design 0.0.67 → 1.0.3

package/dist/components/Modal/Modal.svelte

@@ -1,210 +1,209 @@
-<script>import ModalFooter from "./ModalFooter.svelte";
-import { clickOutside } from "../directives/clickOutside.js";
-import { IconX } from "@hyvor/icons";
-import IconButton from "./../IconButton/IconButton.svelte";
-import { fade, scale } from "svelte/transition";
-import { onMount, tick } from "svelte";
-import Loader from "../Loader/Loader.svelte";
-import { createEventDispatcher } from "svelte";
-export let show = false;
-export let title = "";
-export let size = "medium";
-export let id = "modal";
-export let role = "alertdialog";
-export let closeOnOutsideClick = true;
-export let closeOnEscape = true;
-export let loading = false;
-const dispatch = createEventDispatcher();
-const titleId = id + "-title";
-const descId = id + "-desc";
-export let footer = null;
-let wrapEl;
-let innerEl;
-function handleCancel() {
-  show = false;
-  dispatch("cancel");
-}
-async function setFlex() {
-  await tick();
-  if (!wrapEl || !innerEl)
-    return;
-  if (innerEl.offsetHeight > wrapEl.offsetHeight - 60) {
-    wrapEl.style.alignItems = "flex-start";
-  } else {
-    wrapEl.style.alignItems = "center";
-  }
-}
-onMount(setFlex);
-$:
-  show, setFlex();
+<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot making the component unusable -->
+<script lang="ts">
+	import ModalFooter from './ModalFooter.svelte';
+	import type { Footer } from './modal-types.js';
+	import { clickOutside } from '../directives/clickOutside.js';
+	import { IconX } from '@hyvor/icons';
+	import IconButton from './../IconButton/IconButton.svelte';
+	import { fade, scale } from 'svelte/transition';
+	import { onMount, tick, type Snippet } from 'svelte';
+	import Loader from '../Loader/Loader.svelte';
+	import { createEventDispatcher } from 'svelte';
+
+	interface Props {
+		show?: boolean;
+		title?: string | Snippet;
+		size?: 'small' | 'medium' | 'large';
+		id?: string;
+		role?: 'dialog' | 'alertdialog';
+		closeOnOutsideClick?: boolean;
+		closeOnEscape?: boolean;
+		loading?: boolean | string;
+
+		footer?: Footer | Snippet;
+		children?: Snippet;
+	}
+
+	let {
+		show = $bindable(false),
+		title,
+		size = 'medium',
+		id = 'modal',
+		role = 'alertdialog',
+		closeOnOutsideClick = true,
+		closeOnEscape = true,
+		loading = false,
+		footer,
+		children
+	}: Props = $props();
+
+	const dispatch = createEventDispatcher();
+
+	const titleId = id + '-title';
+	const descId = id + '-desc';
+
+	let wrapEl: HTMLDivElement | undefined = $state();
+	let innerEl: HTMLDivElement | undefined = $state();
+
+	function handleCancel() {
+		show = false;
+		dispatch('cancel');
+	}
+
+	async function setFlex() {
+		await tick();
+		if (!wrapEl || !innerEl) return;
+		if (innerEl.offsetHeight > wrapEl.offsetHeight - 60) {
+			wrapEl.style.alignItems = 'flex-start';
+		} else {
+			wrapEl.style.alignItems = 'center';
+		}
+	}
+
+	onMount(setFlex);
+
+	$effect(() => {
+		show;
+		setFlex();
+	});
 </script>
 
-<svelte:window on:keyup={e => {
-    if (e.key === 'Escape' && closeOnEscape && !loading) {
-        show = false;
-    }
-}} />
-
+<svelte:window
+	on:keyup={(e) => {
+		if (e.key === 'Escape' && closeOnEscape && !loading) {
+			show = false;
+		}
+	}}
+/>
 
 {#if show}
-    <div 
-        class="wrap"
-        bind:this={wrapEl}
-        in:fade={{duration: 100}}
-        out:fade={{duration: 100}}
-    >
-
-        <div
-            class="inner {size}"
-            use:clickOutside={{
-                enabled: closeOnOutsideClick,
-                callback: () => !loading ? show = false : null
-            }}
-            in:scale={{duration: 100, start: 0.9, opacity: 0.9}}
-            out:scale={{duration: 100, start: 0.9, opacity: 0.9}}
-            bind:this={innerEl}
-
-            role={role}
-            aria-modal="true"
-            aria-labelledby={titleId}
-            aria-describedby={descId}
-        >
-
-            <div class="header">
-
-                <div 
-                    class="title"
-                    id={titleId}
-                >
-                    {#if $$slots.title}
-                        <slot name="title" />
-                    {:else}
-                        <span>{title}</span>
-                    {/if}
-                </div>
-
-                <div class="close-wrap">
-                    <IconButton
-                        variant="invisible"
-                        on:click={handleCancel}
-                    >
-                        <IconX size={25} />
-                    </IconButton>
-                </div>
-
-            </div>
-
-            <div 
-                class="content"
-                id={descId}
-            >
-                <slot /> 
-            </div>
-
-            {#if $$slots.footer || footer}
-                <div class="footer">
-                    {#if $$slots.footer}
-                        <slot name="footer" />
-                    {:else if footer}
-                        <ModalFooter 
-                            {footer}
-                            bind:show={show}
-                            on:cancel
-                            on:confirm
-                        />
-                    {/if}   
-                </div>
-            {/if}
-
-            {#if loading}
-                <div 
-                    class="loading"
-                    in:fade={{duration: 100}}
-                >
-                    <Loader full>
-                        {#if typeof loading === "string"}
-                            {loading}
-                        {/if}
-                    </Loader>
-                </div>
-            {/if}
-
-        </div>
-
-    </div>
+	<div class="wrap" bind:this={wrapEl} in:fade={{ duration: 100 }} out:fade={{ duration: 100 }}>
+		<div
+			class="inner {size}"
+			use:clickOutside={{
+				enabled: closeOnOutsideClick,
+				callback: () => (!loading ? (show = false) : null)
+			}}
+			in:scale={{ duration: 100, start: 0.9, opacity: 0.9 }}
+			out:scale={{ duration: 100, start: 0.9, opacity: 0.9 }}
+			bind:this={innerEl}
+			{role}
+			aria-modal="true"
+			aria-labelledby={titleId}
+			aria-describedby={descId}
+		>
+			<div class="header">
+				<div class="title" id={titleId}>
+					{#if typeof title === 'string'}
+						<span>{title}</span>
+					{:else}
+						{@render title?.()}
+					{/if}
+				</div>
+
+				<div class="close-wrap">
+					<IconButton variant="invisible" on:click={handleCancel}>
+						<IconX size={25} />
+					</IconButton>
+				</div>
+			</div>
+
+			<div class="content" id={descId}>
+				{@render children?.()}
+			</div>
+
+			{#if footer}
+				<div class="footer">
+					{#if typeof footer === 'object'}
+						<ModalFooter {footer} bind:show on:cancel on:confirm />
+					{:else}
+						{@render footer()}
+					{/if}
+				</div>
+			{/if}
+
+			{#if loading}
+				<div class="loading" in:fade={{ duration: 100 }}>
+					<Loader full>
+						{#if typeof loading === 'string'}
+							{loading}
+						{/if}
+					</Loader>
+				</div>
+			{/if}
+		</div>
+	</div>
 {/if}
 
 <style>
-
-    .loading {
-        position: absolute;
-        top: 0;
-        left: 0;
-        z-index: 1;
-        width: 100%;
-        height: 100%;
-        background-color: var(--box-background);
-        border-radius: var(--box-radius);
-        box-shadow: var(--box-shadow);
-    }
-
-    .wrap {
-        position: fixed;
-        top: 0;
-        left: 0;
-        z-index: 10000000;
-        width: 100%;
-        height: 100%;
-        background: rgba(0,0,0,0.5);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 30px;
-        overflow: auto;
-    }
-
-    .inner {
-        background: var(--box-background);
-        border-radius: var(--box-radius);
-        box-shadow: var(--box-shadow);
-        width: 650px;
-        max-width: 100%;
-        position: relative;
-    }
-
-    .inner.small {
-        width: 425px;
-    }
-    .inner.large {
-        width: 800px;
-    }
-
-    .header {
-        padding: 20px 25px;
-        display: flex;
-        align-items: center;
-    }
-
-    .title {
-        flex: 1;
-    }
-    .title span {
-        font-size: 1.2em;
-        font-weight: 600;
-    }
-
-    .content {
-        padding: 20px 25px;
-    }
-
-    .footer {
-        padding: 20px 25px;
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-    }
-    .footer :global(button:not(:last-child)) {
-        margin-right: 2px;
-    }
-
-</style>
+	.loading {
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: 1;
+		width: 100%;
+		height: 100%;
+		background-color: var(--box-background);
+		border-radius: var(--box-radius);
+		box-shadow: var(--box-shadow);
+	}
+
+	.wrap {
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 10000000;
+		width: 100%;
+		height: 100%;
+		background: rgba(0, 0, 0, 0.5);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 30px;
+		overflow: auto;
+	}
+
+	.inner {
+		background: var(--box-background);
+		border-radius: var(--box-radius);
+		box-shadow: var(--box-shadow);
+		width: 650px;
+		max-width: 100%;
+		position: relative;
+	}
+
+	.inner.small {
+		width: 425px;
+	}
+	.inner.large {
+		width: 800px;
+	}
+
+	.header {
+		padding: 20px 25px;
+		display: flex;
+		align-items: center;
+	}
+
+	.title {
+		flex: 1;
+	}
+	.title span {
+		font-size: 1.2em;
+		font-weight: 600;
+	}
+
+	.content {
+		padding: 20px 25px;
+	}
+
+	.footer {
+		padding: 20px 25px;
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+	}
+	.footer :global(button:not(:last-child)) {
+		margin-right: 2px;
+	}
+</style>

package/dist/components/Modal/Modal.svelte.d.ts

@@ -1,32 +1,34 @@
-import { SvelteComponent } from "svelte";
 import type { Footer } from './modal-types.js';
-declare const __propDef: {
-    props: {
-        show?: boolean | undefined;
-        title?: string | undefined;
-        size?: "small" | "medium" | "large" | undefined;
-        id?: string | undefined;
-        role?: "dialog" | "alertdialog" | undefined;
-        closeOnOutsideClick?: boolean | undefined;
-        closeOnEscape?: boolean | undefined;
-        loading?: string | boolean | undefined;
-        footer?: Footer | null | undefined;
+import { type Snippet } from 'svelte';
+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;
     };
-    events: {
-        cancel: CustomEvent<any>;
-        confirm: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        title: {};
-        default: {};
-        footer: {};
-    };
-};
-export type ModalProps = typeof __propDef.props;
-export type ModalEvents = typeof __propDef.events;
-export type ModalSlots = typeof __propDef.slots;
-export default class Modal extends SvelteComponent<ModalProps, ModalEvents, ModalSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Modal: $$__sveltets_2_IsomorphicComponent<{
+    show?: boolean;
+    title?: string | Snippet;
+    size?: "small" | "medium" | "large";
+    id?: string;
+    role?: "dialog" | "alertdialog";
+    closeOnOutsideClick?: boolean;
+    closeOnEscape?: boolean;
+    loading?: boolean | string;
+    footer?: Footer | Snippet;
+    children?: Snippet;
+}, {
+    cancel: CustomEvent<any>;
+    confirm: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "show">;
+type Modal = InstanceType<typeof Modal>;
+export default Modal;

package/dist/components/Modal/ModalFooter.svelte

@@ -1,36 +1,41 @@
-<script>import { createEventDispatcher } from "svelte";
-import Button from "../Button/Button.svelte";
-import ButtonGroup from "../Button/ButtonGroup.svelte";
-export let show;
-export let footer;
-const dispatch = createEventDispatcher();
-</script>
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import Button from '../Button/Button.svelte';
+	import ButtonGroup from '../Button/ButtonGroup.svelte';
+	import type { Footer } from './modal-types.ts';
 
+	interface Props {
+		show: boolean;
+		footer: Footer;
+	}
 
-<ButtonGroup>
+	let { show = $bindable(), footer }: Props = $props();
 
-    {#if footer.cancel !== false}
-        <Button
-            variant="invisible"
-            on:click={() => {
-                show = false;
-                dispatch("cancel");
-            }}
-            {...footer.cancel?.props}
-        >
-            {footer.cancel?.text || "Cancel"}
-        </Button>
-    {/if}
+	const dispatch = createEventDispatcher();
+</script>
 
-    {#if footer.confirm !== false}
-        <Button
-            variant="fill"
-            color={footer.confirm?.danger ? "red" : "accent"}
-            on:click={() => dispatch("confirm")}
-            {...footer.confirm?.props}
-        >
-            {footer.confirm?.text || "Confirm"}
-        </Button>
-    {/if}
+<ButtonGroup>
+	{#if footer.cancel !== false}
+		<Button
+			variant="invisible"
+			on:click={() => {
+				show = false;
+				dispatch('cancel');
+			}}
+			{...footer.cancel?.props}
+		>
+			{footer.cancel?.text || 'Cancel'}
+		</Button>
+	{/if}
 
-</ButtonGroup>
+	{#if footer.confirm !== false}
+		<Button
+			variant="fill"
+			color={footer.confirm?.danger ? 'red' : 'accent'}
+			on:click={() => dispatch('confirm')}
+			{...footer.confirm?.props}
+		>
+			{footer.confirm?.text || 'Confirm'}
+		</Button>
+	{/if}
+</ButtonGroup>

package/dist/components/Modal/ModalFooter.svelte.d.ts

@@ -1,21 +1,25 @@
-import { SvelteComponent } from "svelte";
 import type { Footer } from './modal-types.ts';
-declare const __propDef: {
-    props: {
-        show: boolean;
-        footer: Footer;
+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;
     };
-    events: {
-        cancel: CustomEvent<any>;
-        confirm: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ModalFooterProps = typeof __propDef.props;
-export type ModalFooterEvents = typeof __propDef.events;
-export type ModalFooterSlots = typeof __propDef.slots;
-export default class ModalFooter extends SvelteComponent<ModalFooterProps, ModalFooterEvents, ModalFooterSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const ModalFooter: $$__sveltets_2_IsomorphicComponent<{
+    show: boolean;
+    footer: Footer;
+}, {
+    cancel: CustomEvent<any>;
+    confirm: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "show">;
+type ModalFooter = InstanceType<typeof ModalFooter>;
+export default ModalFooter;

package/dist/components/Modal/confirm.d.ts

@@ -1,7 +1,7 @@
-import { type ComponentType } from "svelte";
+import { type Component } from 'svelte';
 interface ConfirmConfig {
     title: string;
-    content: string | ComponentType;
+    content: string | Component<any>;
     contentProps?: Record<string, any>;
     confirmText?: string;
     cancelText?: string;

package/dist/components/Modal/confirm.js

@@ -1,5 +1,5 @@
-import {} from "svelte";
-import { writable } from "svelte/store";
+import {} from 'svelte';
+import { writable } from 'svelte/store';
 export const confirmStore = writable(null);
 export function confirm(config) {
     function getOptions() {
@@ -12,7 +12,7 @@ export function confirm(config) {
                     return store;
                 });
             },
-            close: () => confirmStore.set(null),
+            close: () => confirmStore.set(null)
         };
     }
     return new Promise((resolve, reject) => {
@@ -27,7 +27,7 @@ export function confirm(config) {
             onCancel: () => {
                 resolve(false);
                 confirmStore.set(null);
-            },
+            }
         });
     });
 }

package/dist/components/Modal/modal-types.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentProps } from "svelte";
-import type Button from "../Button/Button.svelte";
+import type { ComponentProps } from 'svelte';
+import type Button from '../Button/Button.svelte';
 export interface Footer {
     /**
      * undefined: default cancel button
@@ -8,11 +8,11 @@ export interface Footer {
      */
     cancel?: false | {
         text?: string;
-        props?: ComponentProps<Button>;
+        props?: ComponentProps<typeof Button>;
     };
     confirm?: false | {
         danger?: boolean;
         text?: string;
-        props?: ComponentProps<Button>;
+        props?: ComponentProps<typeof Button>;
     };
 }