@hyvor/design 0.0.67 → 0.0.68

package/dist/components/Loader/LoadButton.svelte

@@ -10,35 +10,21 @@ export let buttonProps = {};
 </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/Loader.svelte

@@ -1,7 +1,4 @@
-<script>import {
-  IconCheckCircleFill,
-  IconXCircleFill
-} from "@hyvor/icons";
+<script>import { IconCheckCircleFill, IconXCircleFill } from "@hyvor/icons";
 export let block = false;
 export let full = false;
 export let padding = "medium";
@@ -42,72 +39,61 @@ const paddings = {
 padding = typeof padding === "number" ? padding : paddings[padding];
 </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}
+	{...$$restProps}
 >
-
-
-    {#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 $$slots.default}
+		<div class="message">
+			<slot></slot>
+		</div>
+	{/if}
 </div>
 
-
-
 <style>.loader {
   display: inline-flex;
   align-items: center;
@@ -147,7 +133,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 +171,4 @@ circle.progress {
     transform: scale(1);
     opacity: 1;
   }
-}</style>
+}</style>

package/dist/components/Modal/ConfirmModalProvider.svelte

@@ -18,40 +18,22 @@ $: {
 </script>
 
 {#if $confirmStore}
+	<Modal title={$confirmStore.title} bind:show size="small" loading={$confirmStore.loading}>
+		{#if typeof $confirmStore.content === 'string'}
+			{$confirmStore.content}
+		{:else}
+			<svelte:component this={$confirmStore.content} {...$confirmStore.contentProps || {}} />
+		{/if}
 
-    <Modal
-        title={$confirmStore.title}
-        bind:show={show}
-        size="small"
-        loading={$confirmStore.loading}
-    >
-
-        {#if typeof $confirmStore.content === "string"}
-            {$confirmStore.content}
-        {:else}
-            <svelte:component 
-                this={$confirmStore.content}
-                {...$confirmStore.contentProps || {}}
-            />
-        {/if}
-
-        <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>
-
-    </Modal>
-
-{/if}
+		<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>
+	</Modal>
+{/if}

package/dist/components/Modal/Modal.svelte

@@ -39,172 +39,142 @@ $:
   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 $$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 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>
 {/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/ModalFooter.svelte

@@ -6,31 +6,28 @@ export let footer;
 const dispatch = createEventDispatcher();
 </script>
 
-
 <ButtonGroup>
+	{#if footer.cancel !== false}
+		<Button
+			variant="invisible"
+			on:click={() => {
+				show = false;
+				dispatch('cancel');
+			}}
+			{...footer.cancel?.props}
+		>
+			{footer.cancel?.text || 'Cancel'}
+		</Button>
+	{/if}
 
-    {#if footer.cancel !== false}
-        <Button
-            variant="invisible"
-            on:click={() => {
-                show = false;
-                dispatch("cancel");
-            }}
-            {...footer.cancel?.props}
-        >
-            {footer.cancel?.text || "Cancel"}
-        </Button>
-    {/if}
-
-    {#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.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/confirm.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentType } from "svelte";
+import { type ComponentType } from 'svelte';
 interface ConfirmConfig {
     title: string;
     content: string | ComponentType;

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