flowbite-svelte 0.27.12 → 0.27.14

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 (13) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/avatar/Avatar.svelte +15 -15
  3. package/footer/Footer.svelte +13 -13
  4. package/footer/FooterBrand.svelte +7 -6
  5. package/footer/FooterBrand.svelte.d.ts +1 -0
  6. package/footer/FooterCopyright.svelte +10 -9
  7. package/footer/FooterCopyright.svelte.d.ts +1 -0
  8. package/footer/FooterIcon.svelte +5 -4
  9. package/footer/FooterIcon.svelte.d.ts +1 -0
  10. package/footer/FooterLink.svelte +6 -4
  11. package/footer/FooterLink.svelte.d.ts +1 -0
  12. package/modals/Modal.svelte +16 -10
  13. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,21 @@
2
2
 
3
3
  All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
4
4
 
5
+ ### [0.27.14](https://github.com/themesberg/flowbite-svelte/compare/v0.27.13...v0.27.14) (2022-11-01)
6
+
7
+
8
+ ### Bug Fixes
9
+
10
+ * card breadcrumb_title ([1ac4820](https://github.com/themesberg/flowbite-svelte/commit/1ac4820ac2553a3c812fced3b9d627e56a9d5ec2))
11
+ * create MetaTag component ([#406](https://github.com/themesberg/flowbite-svelte/issues/406)) ([4d09e4a](https://github.com/themesberg/flowbite-svelte/commit/4d09e4acd14e04a07b3c01408de1be718b4eef1e))
12
+
13
+ ### [0.27.13](https://github.com/themesberg/flowbite-svelte/compare/v0.27.12...v0.27.13) (2022-10-30)
14
+
15
+
16
+ ### Features
17
+
18
+ * add target and {...$$restProps} to all footer components ([#405](https://github.com/themesberg/flowbite-svelte/issues/405)) ([c045aa7](https://github.com/themesberg/flowbite-svelte/commit/c045aa76dc209471f278eb98f0ec566c61e957f2))
19
+
5
20
  ### [0.27.12](https://github.com/themesberg/flowbite-svelte/compare/v0.27.11...v0.27.12) (2022-10-29)
6
21
 
7
22
 
package/avatar/Avatar.svelte CHANGED
@@ -21,19 +21,19 @@ $: avatarClass = classNames(rounded ? 'rounded' : 'rounded-full', border && 'p-1
21
21
  </script>
22
22
 
23
23
  <Dot show={$$props.dot} {rounded} {...dot} {size} class={sizes[size]}>
24
- {#if src}
25
- <img {alt} {src} {...$$restProps} class={avatarClass} />
26
- {:else if $$slots.default}
27
- <svelte:element
28
- this={href ? 'a' : 'div'}
29
- {href}
30
- {...$$restProps}
31
- class="flex justify-center items-center text-xs font-medium {avatarClass}">
32
- <slot />
33
- </svelte:element>
34
- {:else}
35
- <svelte:element this={href ? 'a' : 'div'} {...$$restProps} class={avatarClass}>
36
- <AvatarPlaceholder {rounded} />
37
- </svelte:element>
38
- {/if}
24
+ {#if src}
25
+ <img {alt} {src} {...$$restProps} class={avatarClass} />
26
+ {:else if $$slots.default}
27
+ <svelte:element
28
+ this={href ? 'a' : 'div'}
29
+ {href}
30
+ {...$$restProps}
31
+ class="flex justify-center items-center text-xs font-medium {avatarClass}">
32
+ <slot />
33
+ </svelte:element>
34
+ {:else}
35
+ <svelte:element this={href ? 'a' : 'div'} {...$$restProps} class={avatarClass}>
36
+ <AvatarPlaceholder {rounded} />
37
+ </svelte:element>
38
+ {/if}
39
39
  </Dot>
package/footer/Footer.svelte CHANGED
@@ -5,17 +5,17 @@ export let footerType = 'default';
5
5
  </script>
6
6
 
7
7
  <footer
8
- class={classNames(
9
- {
10
- 'bg-gray-800': footerType === 'sitemap',
11
- 'p-4 bg-white sm:p-6 dark:bg-gray-800': footerType === 'socialmedia',
12
- 'p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800': footerType === 'logo',
13
- 'p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800':
14
- footerType === 'default',
15
- [`${customClass}`]: footerType === 'custom'
16
- },
17
- $$props.class
18
- )}
19
- >
20
- <slot />
8
+ {...$$restProps}
9
+ class={classNames(
10
+ {
11
+ 'bg-gray-800': footerType === 'sitemap',
12
+ 'p-4 bg-white sm:p-6 dark:bg-gray-800': footerType === 'socialmedia',
13
+ 'p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800': footerType === 'logo',
14
+ 'p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800':
15
+ footerType === 'default',
16
+ [`${customClass}`]: footerType === 'custom'
17
+ },
18
+ $$props.class
19
+ )}>
20
+ <slot />
21
21
  </footer>
package/footer/FooterBrand.svelte CHANGED
@@ -6,14 +6,15 @@ export let href = '';
6
6
  export let src = '';
7
7
  export let alt = '';
8
8
  export let name = '';
9
+ export let target = undefined;
9
10
  </script>
10
11
 
11
12
  {#if href}
12
- <a {href} class={classNames(aClass, $$props.class)}>
13
- <img {src} class={imgClass} {alt} />
14
- <span class={spanClass}>{name}</span>
15
- <slot />
16
- </a>
13
+ <a {...$$restProps} {href} {target} class={classNames(aClass, $$props.class)}>
14
+ <img {src} class={imgClass} {alt} />
15
+ <span class={spanClass}>{name}</span>
16
+ <slot />
17
+ </a>
17
18
  {:else}
18
- <img {src} class={imgClass} {alt} />
19
+ <img {...$$restProps} {src} class={imgClass} {alt} />
19
20
  {/if}
package/footer/FooterBrand.svelte.d.ts CHANGED
@@ -9,6 +9,7 @@ declare const __propDef: {
9
9
  src?: string | undefined;
10
10
  alt?: string | undefined;
11
11
  name?: string | undefined;
12
+ target?: string | undefined;
12
13
  };
13
14
  events: {
14
15
  [evt: string]: CustomEvent<any>;
package/footer/FooterCopyright.svelte CHANGED
@@ -4,16 +4,17 @@ export let aClass = 'hover:underline';
4
4
  export let year = new Date().getFullYear();
5
5
  export let href = '';
6
6
  export let by = '';
7
+ export let target = undefined;
7
8
  </script>
8
9
 
9
10
  <span class={classNames(spanClass, $$props.class)}>
10
- &copy; {year}
11
- {#if href}
12
- <a {href} class={aClass}>
13
- {by}
14
- </a>
15
- {:else}
16
- <span class="ml-1">{by}</span>
17
- {/if}
18
- . All Rights Reserved.
11
+ &copy; {year}
12
+ {#if href}
13
+ <a {...$$restProps} {href} {target} class={aClass}>
14
+ {by}
15
+ </a>
16
+ {:else}
17
+ <span class="ml-1">{by}</span>
18
+ {/if}
19
+ . All Rights Reserved.
19
20
  </span>
package/footer/FooterCopyright.svelte.d.ts CHANGED
@@ -7,6 +7,7 @@ declare const __propDef: {
7
7
  year?: number | undefined;
8
8
  href?: string | undefined;
9
9
  by?: string | undefined;
10
+ target?: string | undefined;
10
11
  };
11
12
  events: {
12
13
  [evt: string]: CustomEvent<any>;
package/footer/FooterIcon.svelte CHANGED
@@ -2,12 +2,13 @@
2
2
  export let href = '';
3
3
  export let ariaLabel = '';
4
4
  export let aClass = 'text-gray-500 hover:text-gray-900 dark:hover:text-white';
5
+ export let target = undefined;
5
6
  </script>
6
7
 
7
8
  {#if href}
8
- <a {href} aria-label={ariaLabel} class={classNames(aClass, $$props.class)}>
9
- <slot />
10
- </a>
9
+ <a {...$$restProps} {href} {target} aria-label={ariaLabel} class={classNames(aClass, $$props.class)}>
10
+ <slot />
11
+ </a>
11
12
  {:else}
12
- <slot />
13
+ <slot />
13
14
  {/if}
package/footer/FooterIcon.svelte.d.ts CHANGED
@@ -5,6 +5,7 @@ declare const __propDef: {
5
5
  href?: string | undefined;
6
6
  ariaLabel?: string | undefined;
7
7
  aClass?: string | undefined;
8
+ target?: string | undefined;
8
9
  };
9
10
  events: {
10
11
  [evt: string]: CustomEvent<any>;
package/footer/FooterLink.svelte CHANGED
@@ -1,11 +1,13 @@
1
- <script>import classNames from 'classnames';
1
+ <script>import A from '../typography/A.svelte';
2
+ import classNames from 'classnames';
2
3
  export let liClass = 'mr-4 last:mr-0 md:mr-6';
3
4
  export let aClass = 'hover:underline';
4
5
  export let href = '';
6
+ export let target = undefined;
5
7
  </script>
6
8
 
7
9
  <li class={classNames(liClass, $$props.class)}>
8
- <a {href} class={aClass}>
9
- <slot />
10
- </a>
10
+ <a {...$$restProps} {href} class={aClass} {target}>
11
+ <slot />
12
+ </a>
11
13
  </li>
package/footer/FooterLink.svelte.d.ts CHANGED
@@ -5,6 +5,7 @@ declare const __propDef: {
5
5
  liClass?: string | undefined;
6
6
  aClass?: string | undefined;
7
7
  href?: string | undefined;
8
+ target?: string | undefined;
8
9
  };
9
10
  events: {
10
11
  [evt: string]: CustomEvent<any>;
package/modals/Modal.svelte CHANGED
@@ -68,7 +68,9 @@ const hide = () => {
68
68
  open = false;
69
69
  };
70
70
  let mainClass;
71
- $: mainClass = classNames('flex overflow-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full', backdropClasses, ...getPlacementClasses(), $$props.class);
71
+ $: mainClass = classNames('flex overflow-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full', backdropClasses, ...getPlacementClasses());
72
+ let frameClass;
73
+ $: frameClass = classNames('relative flex flex-col w-full h-full md:h-auto', $$props.class);
72
74
  const isScrollable = (e) => [
73
75
  e.scrollWidth > e.clientWidth && ['scroll', 'auto'].indexOf(getComputedStyle(e).overflowX) >= 0,
74
76
  e.scrollHeight > e.clientHeight && ['scroll', 'auto'].indexOf(getComputedStyle(e).overflowY) >= 0
@@ -97,19 +99,24 @@ function handleKeys(e) {
97
99
  on:click={autoclose ? onAutoClose : null}>
98
100
  <div class="flex p-4 w-full {sizes[size]} h-full md:h-auto max-h-screen">
99
101
  <!-- Modal content -->
100
- <Frame {...$$restProps} rounded shadow class="relative flex flex-col w-full h-full md:h-auto">
102
+ <Frame rounded shadow {...$$restProps} class={frameClass}>
101
103
  <!-- Modal header -->
102
104
  {#if $$slots.header || title}
103
- <div class="flex justify-between items-center p-4 rounded-t border-b dark:border-gray-600">
105
+ <Frame color={$$restProps.color} class="flex justify-between items-center p-4 rounded-t border-b">
104
106
  <slot name="header">
105
- <h3 class="text-xl font-semibold text-gray-900 dark:text-white p-0">
107
+ <h3
108
+ class="text-xl font-semibold {$$restProps.color ? '' : 'text-gray-900 dark:text-white'} p-0">
106
109
  {title}
107
110
  </h3>
108
111
  </slot>
109
- {#if !permanent}<CloseButton name="Close modal" on:click={hide} />{/if}
110
- </div>
112
+ {#if !permanent}<CloseButton name="Close modal" on:click={hide} color={$$restProps.color} />{/if}
113
+ </Frame>
111
114
  {:else if !permanent}
112
- <CloseButton name="Close modal" class="absolute top-3 right-2.5" on:click={hide} />
115
+ <CloseButton
116
+ name="Close modal"
117
+ class="absolute top-3 right-2.5"
118
+ on:click={hide}
119
+ color={$$restProps.color} />
113
120
  {/if}
114
121
  <!-- Modal body -->
115
122
  <div
@@ -121,10 +128,9 @@ function handleKeys(e) {
121
128
  </div>
122
129
  <!-- Modal footer -->
123
130
  {#if $$slots.footer}
124
- <div
125
- class="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600">
131
+ <Frame color={$$restProps.color} class="flex items-center p-6 space-x-2 rounded-b border-t">
126
132
  <slot name="footer" />
127
- </div>
133
+ </Frame>
128
134
  {/if}
129
135
  </Frame>
130
136
  </div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flowbite-svelte",
3
- "version": "0.27.12",
3
+ "version": "0.27.14",
4
4
  "description": "Flowbite components for Svelte",
5
5
  "main": "index.js",
6
6
  "author": {