@hyvor/design 0.0.12 → 0.0.14

package/dist/components/Base/Base.svelte

@@ -1,8 +1,10 @@
 <script>import DarkProvider from "./../Dark/DarkProvider.svelte";
 import "../../index.js";
+import ToastProvider from "../Toast/ToastProvider.svelte";
 </script>
 
 <DarkProvider />
+<ToastProvider />
 
 <div id="base">
     <slot />

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

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        type?: "danger" | "soft" | "info" | "success" | "warning" | undefined;
+        type?: "danger" | "success" | "warning" | "info" | "soft" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/Divider/Divider.svelte

@@ -0,0 +1,27 @@
+<script>export let color = "var(--accent-lightest)";
+export let height = 1;
+export let width = 100;
+export let margin = 0;
+export let align = "center";
+</script>
+
+
+<div
+    class="line"
+    style="
+    background-color: {color};
+        height: {height}px;
+        width: {width}%;
+        margin-top: {margin}px;
+        margin-bottom: {margin}px;
+        margin-left: {align === 'center' || align === 'end' ? 'auto' : 0};
+        margin-right: {align === 'center' ? 'auto' : 0};
+        display: flex;
+    "
+/>
+
+<style>
+    .line {
+        display: block;
+    }
+</style>

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

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        color?: string | undefined;
+        height?: number | undefined;
+        width?: number | undefined;
+        margin?: number | undefined;
+        align?: "start" | "end" | "center" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DividerProps = typeof __propDef.props;
+export type DividerEvents = typeof __propDef.events;
+export type DividerSlots = typeof __propDef.slots;
+export default class Divider extends SvelteComponent<DividerProps, DividerEvents, DividerSlots> {
+}
+export {};

package/dist/components/Dropdown/Dropdown.svelte

@@ -5,11 +5,12 @@ export let width = 225;
 export let relative = false;
 export let closeOnOutsideClick = true;
 export let align = "start";
+export let position = "bottom";
 </script>
 
 <span 
-    class="dropdown"
-    class:relative
+class="dropdown"
+class:relative
 >
 
     <span 
@@ -28,7 +29,7 @@ export let align = "start";
 
     {#if show}
         <div
-            class="content-wrap {align}"
+            class="content-wrap {align} {position}"
             use:clickOutside={{
                 enabled: closeOnOutsideClick,
                 callback: () => show = false
@@ -42,36 +43,82 @@ export let align = "start";
 
 </span>
 
-<style>
-    .dropdown {
-        position: relative;
-        display: inline-block;
-    }
-
-    .dropdown .content-wrap {
-        position: absolute;
-        top: 100%;
-        margin-top: 5px;
-        left: 0;
-        z-index: 1;
-    }
-
-    .content-wrap.end {
-        left: auto;
-        right: 0;
-    }
-
-    .content-wrap.center {
-        left: 50%;
-        transform: translateX(-50%);
-    }
-
-    .content-wrap > :global(.content) {
-        padding: 10px;
-    }
-
-    .dropdown.relative > .content-wrap {
-        position: relative;
-    }
-
-</style>
+<style>.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown .content-wrap {
+  position: absolute;
+  left: 0;
+  z-index: 1;
+}
+
+.content-wrap.bottom {
+  top: 100%;
+  margin-top: 5px;
+}
+.content-wrap.bottom.end {
+  left: auto;
+  right: 0;
+}
+.content-wrap.bottom.center {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.content-wrap.top {
+  bottom: 100%;
+  margin-bottom: 5px;
+}
+.content-wrap.top.end {
+  left: auto;
+  right: 0;
+}
+.content-wrap.top.center {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.content-wrap.left {
+  right: 100%;
+  left: auto;
+  margin-right: 5px;
+  top: 0;
+  bottom: auto;
+}
+.content-wrap.left.end {
+  top: auto;
+  bottom: 0;
+}
+.content-wrap.left.center {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.content-wrap.right {
+  left: 100%;
+  margin-left: 5px;
+  top: 0;
+  bottom: auto;
+}
+.content-wrap.right.end {
+  bottom: 0;
+  top: auto;
+}
+.content-wrap.right.center {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.content-wrap > :global(.content) {
+  padding: 10px;
+}
+
+.dropdown.relative > .content-wrap {
+  position: relative;
+}</style>
+
+
+
+

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

@@ -6,6 +6,7 @@ declare const __propDef: {
         relative?: boolean | undefined;
         closeOnOutsideClick?: boolean | undefined;
         align?: "start" | "end" | "center" | undefined;
+        position?: "left" | "right" | "bottom" | "top" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/TextInput/TextInput.svelte

@@ -27,6 +27,17 @@ let input;
     <input
         {...$$restProps}
         bind:this={input}
+
+        on:keyup
+        on:keydown
+        on:keypress
+        on:focus
+        on:blur
+        on:click
+        on:mouseover
+        on:mouseenter
+        on:mouseleave
+        on:change
     />
 
     {#if $$slots.end}

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

@@ -7,6 +7,17 @@ declare const __propDef: {
         block?: boolean | undefined;
     };
     events: {
+        keyup: KeyboardEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        focus: FocusEvent;
+        blur: FocusEvent;
+        click: MouseEvent;
+        mouseover: MouseEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        change: Event;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/dist/components/Toast/ToastIcon.svelte

@@ -0,0 +1,52 @@
+<script>import Loader from "../Loader/Loader.svelte";
+import {
+  IconCheckCircleFill,
+  IconXCircleFill,
+  IconExclamationCircleFill,
+  IconInfoCircleFill
+} from "@hyvor/icons";
+export let toast;
+$:
+  color = {
+    success: "var(--green)",
+    error: "var(--red)",
+    warning: "var(--orange)",
+    info: "var(--blue)"
+  }[toast.type] || "inherit";
+</script>
+
+<span 
+    style:color={color}
+>
+    {#if toast.type === 'success'}
+        <IconCheckCircleFill />
+    {:else if toast.type === 'error'}
+        <IconXCircleFill />
+    {:else if toast.type === 'warning'}
+        <IconExclamationCircleFill />
+    {:else if toast.type === 'info'}
+        <IconInfoCircleFill />
+    {:else if toast.type === 'loading'}
+        <Loader size="small" />
+    {/if}
+</span>
+
+<style>
+    span {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        animation: scale 0.2s ease-in-out;
+    }
+
+    @keyframes scale {
+        0% {
+            transform: scale(0.5);
+            opacity: 0.4;
+        }
+        100% {
+            transform: scale(1);
+            opacity: 1;
+        }
+    }
+</style>

package/dist/components/Toast/ToastIcon.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { Toast } from './toast.ts';
+declare const __propDef: {
+    props: {
+        toast: Toast;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ToastIconProps = typeof __propDef.props;
+export type ToastIconEvents = typeof __propDef.events;
+export type ToastIconSlots = typeof __propDef.slots;
+export default class ToastIcon extends SvelteComponent<ToastIconProps, ToastIconEvents, ToastIconSlots> {
+}
+export {};

package/dist/components/Toast/ToastMessage.svelte

@@ -0,0 +1,47 @@
+<script>import ToastIcon from "./ToastIcon.svelte";
+import { fade } from "svelte/transition";
+export let toast;
+</script>
+
+<div 
+    class="toast" 
+    out:fade={{ duration: 200 }}
+    in:fade={{duration: 50}}
+>
+
+    {#if toast.type !== 'blank'}
+        <div class="icon-wrap">
+            <ToastIcon {toast} />
+        </div>
+    {/if}
+
+    <div class="message-wrap">
+        {#if typeof toast.message === 'string' || toast.message === null}
+            {@html toast.message }
+        {:else}
+            <svelte:component this={toast.message} {toast} />
+        {/if}
+    </div>
+
+</div>
+
+<style>
+    .toast {
+        margin-bottom: 10px;
+        box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
+        border-radius: var(--box-radius);
+        background-color: var(--box-background);
+        padding: 8px 20px;
+        display: flex;
+        align-items: center;
+        max-width: 350px;
+    }
+    .toast:first-child {
+        margin-top: 10px;
+    }
+    .icon-wrap {
+        margin-right: 8px;
+        display: inline-flex;
+        align-items: center;
+    }
+</style>

package/dist/components/Toast/ToastMessage.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { Toast } from './toast.ts';
+declare const __propDef: {
+    props: {
+        toast: Toast;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ToastMessageProps = typeof __propDef.props;
+export type ToastMessageEvents = typeof __propDef.events;
+export type ToastMessageSlots = typeof __propDef.slots;
+export default class ToastMessage extends SvelteComponent<ToastMessageProps, ToastMessageEvents, ToastMessageSlots> {
+}
+export {};

package/dist/components/Toast/ToastProvider.svelte

@@ -0,0 +1,25 @@
+<script>import ToastMessage from "./ToastMessage.svelte";
+import { toastStore } from "./toast.js";
+import { useCleaner } from "./cleaner.js";
+useCleaner();
+</script>
+
+<div id="toasts-wrap">
+    {#each $toastStore as toast (toast.id)}
+        <ToastMessage {toast} />
+    {/each}
+</div>
+
+<style>
+    #toasts-wrap {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        z-index: 9999;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+</style>

package/dist/components/Toast/ToastProvider.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ToastProviderProps = typeof __propDef.props;
+export type ToastProviderEvents = typeof __propDef.events;
+export type ToastProviderSlots = typeof __propDef.slots;
+export default class ToastProvider extends SvelteComponent<ToastProviderProps, ToastProviderEvents, ToastProviderSlots> {
+}
+export {};

package/dist/components/Toast/cleaner.d.ts

@@ -0,0 +1 @@
+export declare function useCleaner(): void;

package/dist/components/Toast/cleaner.js

@@ -0,0 +1,28 @@
+import { onDestroy } from "svelte";
+import { default as toastService, toastStore } from "./toast.js";
+const DEFAULT_DURATIONS = {
+    success: 2000,
+    loading: Infinity,
+};
+export function useCleaner() {
+    const timeouts = new Map();
+    const unsubscribe = toastStore.subscribe(toasts => {
+        toasts.forEach(toast => {
+            if (timeouts.has(toast.id)) {
+                return;
+            }
+            const duration = toast.duration || DEFAULT_DURATIONS[toast.type] || 5000;
+            if (duration === Infinity) {
+                return;
+            }
+            const timeout = setTimeout(() => {
+                toastService.close(toast.id);
+                timeouts.delete(toast.id);
+            }, duration);
+            timeouts.set(toast.id, timeout);
+        });
+    });
+    onDestroy(() => {
+        unsubscribe();
+    });
+}

package/dist/components/Toast/toast.d.ts

@@ -0,0 +1,23 @@
+import type { SvelteComponent } from "svelte";
+export interface Toast {
+    id: number;
+    type: ToastType;
+    message: ToastMessageType;
+    duration?: number;
+}
+export declare const toastStore: import("svelte/store").Writable<Toast[]>;
+export type ToastType = "success" | "error" | "warning" | "info" | "loading" | "blank";
+export type ToastMessageType = typeof SvelteComponent<Record<string, any>> | string | null;
+declare function createHandler(type: ToastType): (message: ToastMessageType, options?: Partial<Toast>) => number;
+type ToastFunctionSignature = ReturnType<typeof createHandler>;
+interface ToastSignature {
+    (message: ToastMessageType, options?: Partial<Toast>): number;
+    success: ToastFunctionSignature;
+    error: ToastFunctionSignature;
+    warning: ToastFunctionSignature;
+    info: ToastFunctionSignature;
+    loading: ToastFunctionSignature;
+    close: (id: number) => void;
+}
+declare const toast: ToastSignature;
+export default toast;

package/dist/components/Toast/toast.js

@@ -0,0 +1,43 @@
+import { get, writable } from "svelte/store";
+const MAX_TOASTS = 10;
+export const toastStore = writable([]);
+const storeHelper = {
+    add: (toast) => {
+        toastStore.update((toasts) => [toast, ...toasts].slice(0, MAX_TOASTS));
+    },
+    update: (toast) => {
+        toastStore.update((toasts) => toasts.map(t => t.id === toast.id ? { ...t, ...toast } : t));
+    },
+    upsert: (toast) => {
+        if (get(toastStore).find(t => t.id === toast.id)) {
+            storeHelper.update(toast);
+        }
+        else {
+            storeHelper.add(toast);
+        }
+    },
+    remove: (id) => {
+        toastStore.update((toasts) => toasts.filter(t => t.id !== id));
+    }
+};
+let id = 0;
+function createHandler(type) {
+    return (message, options = {}) => {
+        const newId = options.id || id++;
+        storeHelper.upsert({
+            id: newId,
+            type,
+            message,
+            ...options
+        });
+        return newId;
+    };
+}
+const toast = createHandler("blank");
+toast.success = createHandler("success");
+toast.error = createHandler("error");
+toast.warning = createHandler("warning");
+toast.info = createHandler("info");
+toast.loading = createHandler("loading");
+toast.close = (id) => storeHelper.remove(id);
+export default toast;

package/dist/components/Tooltip/Tooltip.svelte

@@ -77,7 +77,7 @@ onMount(() => {
 
 <style>
     .tooltip-wrap {
-        display: inline-block;
+        display: inline-flex;
         position: relative;
 
         --local-bg: #24292f;

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

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         text?: string | undefined;
-        position?: "left" | "right" | "top" | "bottom" | undefined;
+        position?: "left" | "right" | "bottom" | "top" | undefined;
         color?: "danger" | "accent" | "soft" | "black" | undefined;
         show?: boolean | undefined;
         maxWidth?: number | undefined;

package/dist/components/index.d.ts

@@ -12,6 +12,7 @@ export { default as Checkbox } from './Checkbox/Checkbox.svelte';
 export { default as CodeBlock } from './CodeBlock/CodeBlock.svelte';
 export { default as DarkToggle } from './Dark/DarkToggle.svelte';
 export { default as Dropdown } from './Dropdown/Dropdown.svelte';
+export { default as Divider } from './Divider/Divider.svelte';
 export { default as Caption } from './FormControl/Caption.svelte';
 export { default as FormControl } from './FormControl/FormControl.svelte';
 export { default as InputGroup } from './FormControl/InputGroup.svelte';
@@ -29,4 +30,5 @@ export { default as TableRow } from './Table/TableRow.svelte';
 export { default as Textarea } from './Textarea/Textarea.svelte';
 export { default as Text } from './Text/Text.svelte';
 export { default as TextInput } from './TextInput/TextInput.svelte';
+export { default as toast } from './Toast/toast.js';
 export { default as Tooltip } from './Tooltip/Tooltip.svelte';

package/dist/components/index.js

@@ -12,6 +12,7 @@ export { default as Checkbox } from './Checkbox/Checkbox.svelte';
 export { default as CodeBlock } from './CodeBlock/CodeBlock.svelte';
 export { default as DarkToggle } from './Dark/DarkToggle.svelte';
 export { default as Dropdown } from './Dropdown/Dropdown.svelte';
+export { default as Divider } from './Divider/Divider.svelte';
 export { default as Caption } from './FormControl/Caption.svelte';
 export { default as FormControl } from './FormControl/FormControl.svelte';
 export { default as InputGroup } from './FormControl/InputGroup.svelte';
@@ -29,4 +30,5 @@ export { default as TableRow } from './Table/TableRow.svelte';
 export { default as Textarea } from './Textarea/Textarea.svelte';
 export { default as Text } from './Text/Text.svelte';
 export { default as TextInput } from './TextInput/TextInput.svelte';
+export { default as toast } from './Toast/toast.js';
 export { default as Tooltip } from './Tooltip/Tooltip.svelte';

package/package.json

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