@hyvor/design 0.0.35 → 0.0.36

package/dist/components/Base/Base.svelte

@@ -1,4 +1,5 @@
-<script>import DarkProvider from "./../Dark/DarkProvider.svelte";
+<script>import ConfirmModalProvider from "./../Modal/ConfirmModalProvider.svelte";
+import DarkProvider from "./../Dark/DarkProvider.svelte";
 import "../../index.js";
 import ToastProvider from "../Toast/ToastProvider.svelte";
 </script>
@@ -6,6 +7,8 @@ import ToastProvider from "../Toast/ToastProvider.svelte";
 <DarkProvider />
 <ToastProvider />
 
+<ConfirmModalProvider />
+
 <div id="base">
     <slot />
 </div>

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" | "invisible" | "outline-fill" | undefined;
+        variant?: "fill" | "outline" | "outline-fill" | "invisible" | "fill-light" | 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" | "outline" | "invisible" | "outline-fill" | undefined;
+        variant?: "fill" | "outline" | "outline-fill" | "invisible" | undefined;
         as?: "button" | "a" | undefined;
     };
     events: {

package/dist/components/Modal/ConfirmModalProvider.svelte

@@ -0,0 +1,52 @@
+<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();
+  }
+}
+</script>
+
+{#if $confirmStore}
+
+    <Modal
+        title={$confirmStore.title}
+        show={true}
+        size="small"
+    >
+
+        {#if typeof $confirmStore.content === "string"}
+            {$confirmStore.content}
+        {:else}
+            <svelte:component this={$confirmStore.content} />
+        {/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/ConfirmModalProvider.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 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 {};

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

@@ -0,0 +1,15 @@
+import { type ComponentType } from "svelte";
+interface ConfirmConfig {
+    title: string;
+    content: string | ComponentType;
+    confirmText?: string;
+    cancelText?: string;
+    danger?: boolean;
+}
+interface ConfirmStore extends ConfirmConfig {
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+export declare const confirmStore: import("svelte/store").Writable<ConfirmStore | null>;
+export declare function confirm(config: ConfirmConfig): Promise<boolean>;
+export {};

package/dist/components/Modal/confirm.js

@@ -0,0 +1,18 @@
+import {} from "svelte";
+import { writable } from "svelte/store";
+export const confirmStore = writable(null);
+export function confirm(config) {
+    return new Promise((resolve, reject) => {
+        confirmStore.set({
+            ...config,
+            onConfirm: () => {
+                resolve(true);
+                confirmStore.set(null);
+            },
+            onCancel: () => {
+                resolve(false);
+                confirmStore.set(null);
+            }
+        });
+    });
+}

package/dist/components/index.d.ts

@@ -23,6 +23,7 @@ export { default as IconButton } from './IconButton/IconButton.svelte';
 export { default as Link } from './Link/Link.svelte';
 export { default as Loader } from './Loader/Loader.svelte';
 export { default as Modal } from './Modal/Modal.svelte';
+export { confirm } from './Modal/confirm.js';
 export { default as NavLink } from './NavLink/NavLink.svelte';
 export { default as Radio } from './Radio/Radio.svelte';
 export { default as SplitControl } from './SplitControl/SplitControl.svelte';

package/dist/components/index.js

@@ -23,6 +23,7 @@ export { default as IconButton } from './IconButton/IconButton.svelte';
 export { default as Link } from './Link/Link.svelte';
 export { default as Loader } from './Loader/Loader.svelte';
 export { default as Modal } from './Modal/Modal.svelte';
+export { confirm } from './Modal/confirm.js';
 export { default as NavLink } from './NavLink/NavLink.svelte';
 export { default as Radio } from './Radio/Radio.svelte';
 export { default as SplitControl } from './SplitControl/SplitControl.svelte';

package/package.json

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