@hyvor/design 0.0.67 → 1.0.3

package/dist/components/Loader/LoadButton.svelte

@@ -1,44 +1,45 @@
-<script>import Button from "../Button/Button.svelte";
-import Loader from "./Loader.svelte";
-export let text;
-export let show;
-export let loading;
-export let height = 50;
-export let divProps = {};
-export let loaderProps = {};
-export let buttonProps = {};
+<script lang="ts">
+	import type { ComponentProps } from 'svelte';
+	import Button from '../Button/Button.svelte';
+	import Loader from './Loader.svelte';
+
+	interface Props {
+		text: string;
+		show: boolean; // has more
+		loading: boolean; // whether loading
+		height?: number;
+		divProps?: Record<string, any>;
+		loaderProps?: ComponentProps<typeof Loader>;
+		buttonProps?: ComponentProps<typeof Button>;
+	}
+
+	let {
+		text,
+		show,
+		loading,
+		height = 50,
+		divProps = {},
+		loaderProps = {},
+		buttonProps = {}
+	}: Props = $props();
 </script>
 
 {#if show}
-
-    <div 
-        class="load-button"
-        style:height="{height}px"
-        {...divProps}
-    >
-
-        {#if loading}
-            <Loader {...loaderProps} />
-        {:else}
-
-            <Button 
-                size="small"
-                on:click
-                {...buttonProps}
-            >
-                {text}
-            </Button>
-
-        {/if}
-
-    </div>
-
+	<div class="load-button" style:height="{height}px" {...divProps}>
+		{#if loading}
+			<Loader {...loaderProps} />
+		{:else}
+			<Button size="small" on:click {...buttonProps}>
+				{text}
+			</Button>
+		{/if}
+	</div>
 {/if}
 
 <style>
-    .load-button {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-</style>
+	.load-button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+</style>

package/dist/components/Loader/LoadButton.svelte.d.ts

@@ -1,44 +1,31 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        text: string;
-        show: boolean;
-        loading: boolean;
-        height?: number | undefined;
-        divProps?: Record<string, any> | undefined;
-        loaderProps?: {
-            [x: string]: any;
-            block?: boolean | undefined;
-            full?: boolean | undefined;
-            padding?: number | "none" | "small" | "medium" | "large" | undefined;
-            size?: number | "small" | "medium" | "large" | undefined;
-            state?: "none" | "error" | "loading" | "success" | undefined;
-            duration?: number | null | undefined;
-            color?: string | undefined;
-            colorTrack?: string | undefined;
-            invert?: boolean | undefined;
-        } | undefined;
-        buttonProps?: {
-            [x: string]: any;
-            as?: "button" | "a" | undefined;
-            size?: "small" | "medium" | "large" | "x-small" | undefined;
-            color?: "input" | "accent" | "gray" | "green" | "red" | "blue" | "orange" | undefined;
-            block?: boolean | undefined;
-            variant?: "fill" | "fill-light" | "outline" | "invisible" | "outline-fill" | undefined;
-            align?: "start" | "center" | undefined;
-            button?: HTMLButtonElement | HTMLAnchorElement | undefined;
-        } | undefined;
+import type { ComponentProps } from 'svelte';
+import Button from '../Button/Button.svelte';
+import Loader from './Loader.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: {
-        click: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type LoadButtonProps = typeof __propDef.props;
-export type LoadButtonEvents = typeof __propDef.events;
-export type LoadButtonSlots = typeof __propDef.slots;
-export default class LoadButton extends SvelteComponent<LoadButtonProps, LoadButtonEvents, LoadButtonSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const LoadButton: $$__sveltets_2_IsomorphicComponent<{
+    text: string;
+    show: boolean;
+    loading: boolean;
+    height?: number;
+    divProps?: Record<string, any>;
+    loaderProps?: ComponentProps<typeof Loader>;
+    buttonProps?: ComponentProps<typeof Button>;
+}, {
+    click: any;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type LoadButton = InstanceType<typeof LoadButton>;
+export default LoadButton;

package/dist/components/Loader/Loader.svelte

@@ -1,113 +1,126 @@
-<script>import {
-  IconCheckCircleFill,
-  IconXCircleFill
-} from "@hyvor/icons";
-export let block = false;
-export let full = false;
-export let padding = "medium";
-export let size = "medium";
-export let state = "loading";
-export let duration = 2e3;
-$: {
-  if (duration && (state === "success" || state === "error")) {
-    setTimeout(() => {
-      state = "none";
-    }, duration);
-  }
-}
-export let color = "var(--accent)";
-export let colorTrack = "var(--accent-lightest)";
-export let invert = false;
-if (invert) {
-  const colorCopy = color;
-  color = colorTrack;
-  colorTrack = colorCopy;
-}
-const sizes = {
-  small: 16,
-  medium: 24,
-  large: 32
-};
-size = typeof size === "number" ? size : sizes[size];
-const strokeWidth = size >= 32 ? 5 : size >= 24 ? 4 : size >= 16 ? 3 : 2;
-const r = size / 2 - strokeWidth / 2;
-const strokeDashArray = 2 * Math.PI * r;
-const strokeDashOffset = strokeDashArray - strokeDashArray * 0.25;
-const paddings = {
-  none: 0,
-  small: 60,
-  medium: 150,
-  large: 250
-};
-padding = typeof padding === "number" ? padding : paddings[padding];
+<script lang="ts">
+	import { run } from 'svelte/legacy';
+
+	import { IconCheckCircleFill, IconXCircleFill } from '@hyvor/icons';
+
+	interface Props {
+		block?: boolean;
+		full?: boolean;
+		padding?: 'none' | 'small' | 'medium' | 'large' | number;
+		size?: 'small' | 'medium' | 'large' | number;
+		state?: 'loading' | 'success' | 'error' | 'none';
+		duration?: null | number;
+		color?: string;
+		colorTrack?: string;
+		invert?: boolean;
+		children?: import('svelte').Snippet;
+		[key: string]: any;
+	}
+
+	let {
+		block = false,
+		full = false,
+		padding = $bindable('medium'),
+		size = $bindable('medium'),
+		state = $bindable('loading'),
+		duration = 2000,
+		color = $bindable('var(--accent)'),
+		colorTrack = $bindable('var(--accent-lightest)'),
+		invert = false,
+		children,
+		...rest
+	}: Props = $props();
+
+	if (invert) {
+		const colorCopy = color;
+		color = colorTrack;
+		colorTrack = colorCopy;
+	}
+
+	const sizes = {
+		small: 16,
+		medium: 24,
+		large: 32
+	};
+
+	size = typeof size === 'number' ? size : sizes[size];
+
+	const strokeWidth = size >= 32 ? 5 : size >= 24 ? 4 : size >= 16 ? 3 : 2;
+	const r = size / 2 - strokeWidth / 2;
+	const strokeDashArray = 2 * Math.PI * r;
+	const strokeDashOffset = strokeDashArray - strokeDashArray * 0.25;
+
+	const paddings = {
+		none: 0,
+		small: 60,
+		medium: 150,
+		large: 250
+	};
+	padding = typeof padding === 'number' ? padding : paddings[padding];
+	run(() => {
+		if (duration && (state === 'success' || state === 'error')) {
+			setTimeout(() => {
+				state = 'none';
+			}, duration);
+		}
+	});
 </script>
 
-<div 
-    class="loader"
-    class:block
-    class:full
-    class:success={state === 'success'}
-    class:error={state === 'error'}
-    
-
-    style:--local-size={size + "px"}
-    style:padding={block ? padding + "px" : undefined}
-    {...$$restProps}
+<div
+	class="loader"
+	class:block
+	class:full
+	class:success={state === 'success'}
+	class:error={state === 'error'}
+	style:--local-size={size + 'px'}
+	style:padding={block ? padding + 'px' : undefined}
+	{...rest}
 >
-
-
-    {#if state !== 'none'}
-        <span class="loader-wrap">
-
-            {#if state === 'loading'}
-                <svg>
-                    <circle 
-                        class="track"
-                        cx="50%"
-                        cy="50%"
-                        r={r + "px"}
-                        fill="none"
-                        stroke-width={strokeWidth}
-                        stroke={colorTrack}
-                    ></circle>
-                    <circle 
-                        class="progress"
-                        cx="50%"
-                        cy="50%"
-                        r={r + "px"}
-                        fill="none"
-                        stroke-width={strokeWidth}
-                        stroke={color}
-                        stroke-linecap="round"
-                        stroke-dasharray={strokeDashArray}
-                        stroke-dashoffset={strokeDashOffset}
-                    ></circle>
-                </svg>
-            {:else if state === 'success'}
-                <span class="success-icon">
-                    <IconCheckCircleFill  color="var(--green)" width={size} height={size} />
-                </span>
-            {:else if state === 'error'}
-                <span class="error-icon">
-                    <IconXCircleFill color="var(--red)" width={size} height={size} />
-                </span>
-            {/if}
-
-        </span>
-
-    {/if}
-        
-
-    {#if $$slots.default}
-        <div class="message">
-            <slot></slot>
-        </div>
-    {/if}
-    
+	{#if state !== 'none'}
+		<span class="loader-wrap">
+			{#if state === 'loading'}
+				<svg>
+					<circle
+						class="track"
+						cx="50%"
+						cy="50%"
+						r={r + 'px'}
+						fill="none"
+						stroke-width={strokeWidth}
+						stroke={colorTrack}
+					></circle>
+					<circle
+						class="progress"
+						cx="50%"
+						cy="50%"
+						r={r + 'px'}
+						fill="none"
+						stroke-width={strokeWidth}
+						stroke={color}
+						stroke-linecap="round"
+						stroke-dasharray={strokeDashArray}
+						stroke-dashoffset={strokeDashOffset}
+					></circle>
+				</svg>
+			{:else if state === 'success'}
+				<span class="success-icon">
+					<IconCheckCircleFill color="var(--green)" width={size} height={size} />
+				</span>
+			{:else if state === 'error'}
+				<span class="error-icon">
+					<IconXCircleFill color="var(--red)" width={size} height={size} />
+				</span>
+			{/if}
+		</span>
+	{/if}
+
+	{#if children}
+		<div class="message">
+			{@render children?.()}
+		</div>
+	{/if}
 </div>
 
-
-
 <style>.loader {
   display: inline-flex;
   align-items: center;
@@ -147,7 +160,8 @@ padding = typeof padding === "number" ? padding : paddings[padding];
   position: relative;
 }
 
-.success-icon, .error-icon {
+.success-icon,
+.error-icon {
   animation: scale 0.2s ease-in-out;
 }
 
@@ -184,4 +198,4 @@ circle.progress {
     transform: scale(1);
     opacity: 1;
   }
-}</style>
+}</style>

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

@@ -1,27 +1,15 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        block?: boolean | undefined;
-        full?: boolean | undefined;
-        padding?: number | "none" | "small" | "medium" | "large" | undefined;
-        size?: number | "small" | "medium" | "large" | undefined;
-        state?: "none" | "error" | "loading" | "success" | undefined;
-        duration?: number | null | undefined;
-        color?: string | undefined;
-        colorTrack?: string | undefined;
-        invert?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type LoaderProps = typeof __propDef.props;
-export type LoaderEvents = typeof __propDef.events;
-export type LoaderSlots = typeof __propDef.slots;
-export default class Loader extends SvelteComponent<LoaderProps, LoaderEvents, LoaderSlots> {
-}
-export {};
+declare const Loader: import("svelte").Component<{
+    [key: string]: any;
+    block?: boolean;
+    full?: boolean;
+    padding?: "none" | "small" | "medium" | "large" | number;
+    size?: "small" | "medium" | "large" | number;
+    state?: "loading" | "success" | "error" | "none";
+    duration?: null | number;
+    color?: string;
+    colorTrack?: string;
+    invert?: boolean;
+    children?: import("svelte").Snippet;
+}, {}, "size" | "color" | "padding" | "state" | "colorTrack">;
+type Loader = ReturnType<typeof Loader>;
+export default Loader;

package/dist/components/Modal/ConfirmModalProvider.svelte

@@ -1,57 +1,47 @@
-<script>import Modal from "./Modal.svelte";
-import { confirmStore } from "./confirm.js";
-import Button from "./../Button/Button.svelte";
-import ButtonGroup from "./../Button/ButtonGroup.svelte";
-let show = true;
-function handleCancel() {
-  $confirmStore.onCancel();
-}
-function handleConfirm() {
-  $confirmStore.onConfirm();
-}
-$: {
-  if (!show) {
-    handleCancel();
-    show = true;
-  }
-}
-</script>
+<script lang="ts">
+	import { run } from 'svelte/legacy';
 
-{#if $confirmStore}
+	import Modal from './Modal.svelte';
+	import { confirmStore } from './confirm.js';
+	import Button from './../Button/Button.svelte';
+	import ButtonGroup from './../Button/ButtonGroup.svelte';
 
-    <Modal
-        title={$confirmStore.title}
-        bind:show={show}
-        size="small"
-        loading={$confirmStore.loading}
-    >
+	let show = $state(true);
 
-        {#if typeof $confirmStore.content === "string"}
-            {$confirmStore.content}
-        {:else}
-            <svelte:component 
-                this={$confirmStore.content}
-                {...$confirmStore.contentProps || {}}
-            />
-        {/if}
+	function handleCancel() {
+		$confirmStore!.onCancel();
+	}
 
-        <svelte:fragment slot="footer">
-            <ButtonGroup>
-                <Button
-                    variant="invisible"
-                    on:click={handleCancel}
-                >
-                    {$confirmStore.cancelText || "Cancel"}
-                </Button>
-                <Button 
-                    color={$confirmStore.danger ? "red" : "accent"}
-                    on:click={handleConfirm}
-                >
-                    {$confirmStore.confirmText || "Confirm"}
-                </Button>
-            </ButtonGroup>
-        </svelte:fragment>
+	function handleConfirm() {
+		$confirmStore!.onConfirm();
+	}
 
-    </Modal>
+	run(() => {
+		if (!show) {
+			handleCancel();
+			show = true;
+		}
+	});
+</script>
+
+{#if $confirmStore}
+	<Modal title={$confirmStore.title} bind:show size="small" loading={$confirmStore.loading}>
+		{#if typeof $confirmStore.content === 'string'}
+			{$confirmStore.content}
+		{:else}
+			{@const SvelteComponent = $confirmStore.content}
+			<SvelteComponent {...$confirmStore.contentProps || {}} />
+		{/if}
 
-{/if}
+		{#snippet footer()}
+			<ButtonGroup>
+				<Button variant="invisible" on:click={handleCancel}>
+					{$confirmStore.cancelText || 'Cancel'}
+				</Button>
+				<Button color={$confirmStore.danger ? 'red' : 'accent'} on:click={handleConfirm}>
+					{$confirmStore.confirmText || 'Confirm'}
+				</Button>
+			</ButtonGroup>
+		{/snippet}
+	</Modal>
+{/if}

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

@@ -1,14 +1,3 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ConfirmModalProviderProps = typeof __propDef.props;
-export type ConfirmModalProviderEvents = typeof __propDef.events;
-export type ConfirmModalProviderSlots = typeof __propDef.slots;
-export default class ConfirmModalProvider extends SvelteComponent<ConfirmModalProviderProps, ConfirmModalProviderEvents, ConfirmModalProviderSlots> {
-}
-export {};
+declare const ConfirmModalProvider: import("svelte").Component<Record<string, never>, {}, "">;
+type ConfirmModalProvider = ReturnType<typeof ConfirmModalProvider>;
+export default ConfirmModalProvider;