flowbite-svelte 0.46.10 → 0.46.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/toast/Toast.svelte +53 -26
  2. package/dist/toast/Toast.svelte.d.ts +18 -25
  3. package/dist/types.d.ts +2 -1
  4. package/package.json +2 -2
package/dist/toast/Toast.svelte CHANGED
@@ -1,7 +1,6 @@
1
- <script>import TransitionFrame from "../utils/TransitionFrame.svelte";
1
+ <script>import { fade } from "svelte/transition";
2
2
  import { twMerge } from "tailwind-merge";
3
- import CloseButton from "../utils/CloseButton.svelte";
4
- import Frame from "../utils/Frame.svelte";
3
+ import { CloseButton } from "..";
5
4
  export let dismissable = true;
6
5
  export let color = "primary";
7
6
  export let position = "none";
@@ -9,6 +8,9 @@ export let divClass = "w-full max-w-xs p-4 text-gray-500 bg-white shadow dark:te
9
8
  export let defaultIconClass = "w-8 h-8";
10
9
  export let contentClass = "w-full text-sm font-normal";
11
10
  export let align = true;
11
+ export let transition = fade;
12
+ export let params = {};
13
+ export let toastStatus = true;
12
14
  const positions = {
13
15
  "top-left": "absolute top-5 start-5",
14
16
  "top-right": "absolute top-5 end-5",
@@ -16,8 +18,13 @@ const positions = {
16
18
  "bottom-right": "absolute bottom-5 end-5",
17
19
  none: ""
18
20
  };
19
- let finalDivClass;
20
- $: finalDivClass = twMerge("flex", align ? "items-center" : "items-start", divClass, positions[position], $$props.class);
21
+ let finalDivClass = twMerge(
22
+ "flex",
23
+ align ? "items-center" : "items-start",
24
+ divClass,
25
+ positions[position],
26
+ $$props.class
27
+ );
21
28
  const colors = {
22
29
  primary: "text-primary-500 bg-primary-100 dark:bg-primary-800 dark:text-primary-200",
23
30
  gray: "text-gray-500 bg-gray-100 dark:bg-gray-700 dark:text-gray-200",
@@ -27,41 +34,61 @@ const colors = {
27
34
  blue: "text-blue-500 bg-blue-100 dark:bg-blue-800 dark:text-blue-200",
28
35
  indigo: "text-indigo-500 bg-indigo-100 dark:bg-indigo-800 dark:text-indigo-200",
29
36
  purple: "text-purple-500 bg-purple-100 dark:bg-purple-800 dark:text-purple-200",
30
- orange: "text-orange-500 bg-orange-100 dark:bg-orange-700 dark:text-orange-200",
37
+ pink: "text-pink-500 bg-pink-100 dark:bg-pink-700 dark:text-pink-200",
31
38
  none: ""
32
39
  };
33
- let iconClass;
34
- $: iconClass = twMerge("inline-flex items-center justify-center shrink-0", colors[color], defaultIconClass);
35
- const clsBtnExtraClass = "-mx-1.5 -my-1.5 text-gray-400 hover:text-gray-900 focus:!ring-gray-300 hover:bg-gray-100 dark:text-gray-500 dark:hover:text-white dark:hover:bg-gray-700";
40
+ let iconClass = twMerge(
41
+ "inline-flex items-center justify-center shrink-0 rounded-lg",
42
+ colors[color],
43
+ defaultIconClass
44
+ );
45
+ const clsBtnExtraClass = "ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700";
36
46
  </script>
37
47
 
38
- <TransitionFrame rounded color="none" role="alert" {...$$restProps} class={finalDivClass} let:close on:close>
39
- {#if $$slots.icon}
40
- <Frame rounded color="none" class={iconClass}>
41
- <slot name="icon" />
42
- </Frame>
43
- {/if}
48
+ {#if toastStatus}
49
+ <div
50
+ role="alert"
51
+ {...$$restProps}
52
+ class={finalDivClass}
53
+ transition:transition={params}
54
+ >
55
+ {#if $$slots.icon}
56
+ <div class={iconClass}>
57
+ <slot name="icon" />
58
+ </div>
59
+ {/if}
44
60
 
45
- <div class={contentClass}>
46
- <slot />
47
- </div>
61
+ <div class={contentClass}>
62
+ <slot />
63
+ </div>
48
64
 
49
- {#if dismissable}
50
- <slot name="close-button" {close}>
51
- <CloseButton class={clsBtnExtraClass} on:click={close} />
52
- </slot>
53
- {/if}
54
- </TransitionFrame>
65
+ {#if dismissable}
66
+ <CloseButton
67
+ divclass={clsBtnExtraClass}
68
+ ariaLabel="Remove toast"
69
+ {color}
70
+ on:click={() => {
71
+ toastStatus = false;
72
+ }}
73
+ />
74
+ {/if}
75
+ </div>
76
+ {/if}
55
77
 
56
78
  <!--
57
79
  @component
58
80
  [Go to docs](https://flowbite-svelte.com/)
59
81
  ## Props
60
82
  @prop export let dismissable: boolean = true;
61
- @prop export let color: 'primary' | 'gray' | 'red' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'orange' | 'none' = 'primary';
62
- @prop export let position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'none' = 'none';
83
+ @prop export let color: ColorVariant = 'primary';
84
+ @prop export let position: ToastPositionType = 'none';
63
85
  @prop export let divClass: string = 'w-full max-w-xs p-4 text-gray-500 bg-white shadow dark:text-gray-400 dark:bg-gray-800 gap-3';
64
86
  @prop export let defaultIconClass: string = 'w-8 h-8';
65
87
  @prop export let contentClass: string = 'w-full text-sm font-normal';
88
+ @prop export let div2class: string = '';
89
+ @prop export let div3class: string = '';
66
90
  @prop export let align: boolean = true;
91
+ @prop export let transition: TransitionFunc = fade;
92
+ @prop export let params = {};
93
+ @prop export let toastStatus: boolean = true;
67
94
  -->
package/dist/toast/Toast.svelte.d.ts CHANGED
@@ -1,38 +1,26 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
+ import { type TransitionConfig } from 'svelte/transition';
3
+ import type { ColorVariant, ToastPositionType } from '../types';
2
4
  declare const __propDef: {
3
- props: import("svelte/elements").HTMLAnchorAttributes & {
4
- tag?: string;
5
- color?: "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "light" | "dark" | "default" | "dropdown" | "navbar" | "navbarUl" | "form" | "primary" | "orange" | "none";
6
- rounded?: boolean;
7
- border?: boolean;
8
- shadow?: boolean;
9
- node?: HTMLElement | undefined;
10
- use?: import("svelte/action").Action<HTMLElement, any>;
11
- options?: object;
12
- class?: string;
13
- role?: string;
14
- open?: boolean;
15
- transition?: (node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig;
16
- params?: any;
17
- } & import("..").Dismissable & {
18
- color?: "primary" | "gray" | "red" | "yellow" | "green" | "blue" | "indigo" | "purple" | "orange" | "none";
19
- position?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "none";
5
+ props: {
6
+ [x: string]: any;
7
+ dismissable?: boolean;
8
+ color?: ColorVariant;
9
+ position?: ToastPositionType;
20
10
  divClass?: string;
21
11
  defaultIconClass?: string;
22
- extraIconClass?: string;
23
12
  contentClass?: string;
13
+ align?: boolean;
14
+ transition?: (node: HTMLElement, params: any) => TransitionConfig;
15
+ params?: {};
16
+ toastStatus?: boolean;
24
17
  };
25
18
  events: {
26
- close: CustomEvent<any>;
27
- } & {
28
19
  [evt: string]: CustomEvent<any>;
29
20
  };
30
21
  slots: {
31
22
  icon: {};
32
23
  default: {};
33
- 'close-button': {
34
- close: (ev: MouseEvent | undefined) => void;
35
- };
36
24
  };
37
25
  };
38
26
  export type ToastProps = typeof __propDef.props;
@@ -42,12 +30,17 @@ export type ToastSlots = typeof __propDef.slots;
42
30
  * [Go to docs](https://flowbite-svelte.com/)
43
31
  * ## Props
44
32
  * @prop export let dismissable: boolean = true;
45
- * @prop export let color: 'primary' | 'gray' | 'red' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'orange' | 'none' = 'primary';
46
- * @prop export let position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'none' = 'none';
33
+ * @prop export let color: ColorVariant = 'primary';
34
+ * @prop export let position: ToastPositionType = 'none';
47
35
  * @prop export let divClass: string = 'w-full max-w-xs p-4 text-gray-500 bg-white shadow dark:text-gray-400 dark:bg-gray-800 gap-3';
48
36
  * @prop export let defaultIconClass: string = 'w-8 h-8';
49
37
  * @prop export let contentClass: string = 'w-full text-sm font-normal';
38
+ * @prop export let div2class: string = '';
39
+ * @prop export let div3class: string = '';
50
40
  * @prop export let align: boolean = true;
41
+ * @prop export let transition: TransitionFunc = fade;
42
+ * @prop export let params = {};
43
+ * @prop export let toastStatus: boolean = true;
51
44
  */
52
45
  export default class Toast extends SvelteComponentTyped<ToastProps, ToastEvents, ToastSlots> {
53
46
  }
package/dist/types.d.ts CHANGED
@@ -7,7 +7,7 @@ export type CheckboxItem = {
7
7
  label?: string;
8
8
  isChecked?: boolean;
9
9
  };
10
- export type ColorVariant = 'dark' | 'red' | 'yellow' | 'green' | 'indigo' | 'purple' | 'pink' | 'blue' | 'primary' | 'none';
10
+ export type ColorVariant = 'gray' | 'red' | 'yellow' | 'green' | 'indigo' | 'purple' | 'pink' | 'blue' | 'primary' | 'none';
11
11
  export type Colors = 'blue' | 'gray' | 'red' | 'yellow' | 'purple' | 'green' | 'indigo' | 'pink' | 'white' | 'custom' | 'primary' | 'secondary';
12
12
  export type ImgType = {
13
13
  src: string;
@@ -117,3 +117,4 @@ export interface ButtonClassesTypes {
117
117
  video?: string;
118
118
  custom?: string;
119
119
  }
120
+ export type ToastPositionType = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'none';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flowbite-svelte",
3
- "version": "0.46.10",
3
+ "version": "0.46.11",
4
4
  "description": "Flowbite components for Svelte",
5
5
  "main": "dist/index.js",
6
6
  "author": {
@@ -28,7 +28,7 @@
28
28
  "eslint": "^9.5.0",
29
29
  "eslint-config-prettier": "^9.1.0",
30
30
  "eslint-plugin-svelte": "^2.41.0",
31
- "flowbite-svelte": "^0.46.10",
31
+ "flowbite-svelte": "^0.46.11",
32
32
  "flowbite-svelte-blocks": "^1.1.3",
33
33
  "flowbite-svelte-icons": "^1.6.1",
34
34
  "mdsvex": "^0.11.2",