@hyvor/design 0.0.40 → 0.0.42

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

@@ -6,7 +6,7 @@ declare const __propDef: {
         size?: "small" | "medium" | "large" | "x-small" | undefined;
         color?: "input" | "accent" | "gray" | "green" | "red" | "blue" | "orange" | undefined;
         block?: boolean | undefined;
-        variant?: "fill" | "fill-light" | "outline" | "outline-fill" | "invisible" | undefined;
+        variant?: "fill" | "fill-light" | "outline" | "invisible" | "outline-fill" | undefined;
         align?: "start" | "center" | undefined;
         button?: HTMLButtonElement | HTMLAnchorElement | undefined;
     };

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

@@ -4,7 +4,7 @@ declare const __propDef: {
         [x: string]: any;
         size?: number | "small" | "medium" | "large" | undefined;
         color?: "accent" | "gray" | "green" | "red" | "blue" | "orange" | undefined;
-        variant?: "fill" | "fill-light" | "outline" | "outline-fill" | "invisible" | undefined;
+        variant?: "fill" | "fill-light" | "outline" | "invisible" | "outline-fill" | undefined;
         as?: "button" | "a" | undefined;
     };
     events: {

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

@@ -12,7 +12,7 @@ declare const __propDef: {
             full?: boolean | undefined;
             padding?: number | "none" | "small" | "medium" | "large" | undefined;
             size?: number | "small" | "medium" | "large" | undefined;
-            state?: "none" | "error" | "success" | "loading" | undefined;
+            state?: "none" | "error" | "loading" | "success" | undefined;
             duration?: number | null | undefined;
             color?: string | undefined;
             colorTrack?: string | undefined;
@@ -24,7 +24,7 @@ declare const __propDef: {
             size?: "small" | "medium" | "large" | "x-small" | undefined;
             color?: "input" | "accent" | "gray" | "green" | "red" | "blue" | "orange" | undefined;
             block?: boolean | undefined;
-            variant?: "fill" | "fill-light" | "outline" | "outline-fill" | "invisible" | undefined;
+            variant?: "fill" | "fill-light" | "outline" | "invisible" | "outline-fill" | undefined;
             align?: "start" | "center" | undefined;
             button?: HTMLButtonElement | HTMLAnchorElement | undefined;
         } | undefined;

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

@@ -6,7 +6,7 @@ declare const __propDef: {
         full?: boolean | undefined;
         padding?: number | "none" | "small" | "medium" | "large" | undefined;
         size?: number | "small" | "medium" | "large" | undefined;
-        state?: "none" | "error" | "success" | "loading" | undefined;
+        state?: "none" | "error" | "loading" | "success" | undefined;
         duration?: number | null | undefined;
         color?: string | undefined;
         colorTrack?: string | undefined;

package/dist/components/Modal/Modal.svelte

@@ -1,13 +1,17 @@
-<script>import { clickOutside } from "../../directives/clickOutside.js";
+<script>import ModalFooter from "./ModalFooter.svelte";
+import { clickOutside } from "../../directives/clickOutside.js";
 import { IconX } from "@hyvor/icons";
 import IconButton from "./../IconButton/IconButton.svelte";
-import { scale } from "svelte/transition";
+import { fade, scale } from "svelte/transition";
 import { onMount, tick } from "svelte";
+import Loader from "../Loader/Loader.svelte";
 export let show = false;
 export let title = "";
 export let size = "medium";
 export let closeOnOutsideClick = true;
 export let closeOnEscape = true;
+export let loading = false;
+export let footer = null;
 let wrapEl;
 let innerEl;
 async function setFlex() {
@@ -26,7 +30,7 @@ $:
 </script>
 
 <svelte:window on:keyup={e => {
-    if (e.key === 'Escape' && closeOnEscape) {
+    if (e.key === 'Escape' && closeOnEscape && !loading) {
         show = false;
     }
 }} />
@@ -36,15 +40,18 @@ $:
     <div 
         class="wrap"
         bind:this={wrapEl}
+        in:fade={{duration: 100}}
+        out:fade={{duration: 100}}
     >
 
-        <div 
+        <div
             class="inner {size}"
             use:clickOutside={{
                 enabled: closeOnOutsideClick,
-                callback: () => show = false
+                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}
         >
 
@@ -73,9 +80,31 @@ $:
                 <slot /> 
             </div>
 
-            {#if $$slots.footer}
+            {#if $$slots.footer || footer}
                 <div class="footer">
-                    <slot name="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}
 
@@ -86,6 +115,18 @@ $:
 
 <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;

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

@@ -1,4 +1,5 @@
 import { SvelteComponent } from "svelte";
+import type { Footer } from './modal-types.js';
 declare const __propDef: {
     props: {
         show?: boolean | undefined;
@@ -6,8 +7,13 @@ declare const __propDef: {
         size?: "small" | "medium" | "large" | undefined;
         closeOnOutsideClick?: boolean | undefined;
         closeOnEscape?: boolean | undefined;
+        loading?: string | boolean | undefined;
+        footer?: Footer | null | undefined;
     };
     events: {
+        cancel: CustomEvent<any>;
+        confirm: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/dist/components/Modal/ModalFooter.svelte

@@ -0,0 +1,36 @@
+<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>
+
+
+<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.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

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import type { Footer } from './modal-types.ts';
+declare const __propDef: {
+    props: {
+        show: boolean;
+        footer: Footer;
+    };
+    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> {
+}
+export {};

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

@@ -0,0 +1,18 @@
+import type { ComponentProps } from "svelte";
+import type Button from "../Button/Button.svelte";
+export interface Footer {
+    /**
+     * undefined: default cancel button
+     * false: no cancel button
+     * obj: custom cancel button
+     */
+    cancel?: false | {
+        text?: string;
+        props?: ComponentProps<Button>;
+    };
+    confirm?: false | {
+        danger?: boolean;
+        text?: string;
+        props?: ComponentProps<Button>;
+    };
+}

package/dist/components/Modal/modal-types.js

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

package/dist/components/Textarea/Textarea.svelte

@@ -12,7 +12,7 @@ export let textarea = {};
     on:click={() => textarea.focus()}
     on:keydown={(e) => {
         if (e.key === 'Enter') {
-            textarea.blur();
+            textarea.focus();
         }
     }}
     role="textbox"

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hyvor/design",
-	"version": "0.0.40",
+	"version": "0.0.42",
 	"license": "MIT",
 	"private": false,
 	"scripts": {