flowbite-svelte 0.9.3 → 0.9.4

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/buttongroups/ButtonGroup.svelte +7 -7
  2. package/buttongroups/ButtonGroupOutline.svelte +7 -7
  3. package/cards/CtaCard.svelte +2 -2
  4. package/cards/InteractiveCard.svelte +4 -4
  5. package/footer/LogoFooter.svelte +4 -4
  6. package/footer/SimpleFooter.svelte +3 -3
  7. package/footer/SitemapFooter.svelte +5 -5
  8. package/footer/SitemapFooter.svelte.d.ts +2 -2
  9. package/footer/SocialMediaFooter.svelte +59 -106
  10. package/footer/SocialMediaFooter.svelte.d.ts +9 -61
  11. package/navbar/Navbar.svelte +3 -3
  12. package/package.json +1 -2
  13. package/types.d.ts +10 -5
package/buttongroups/ButtonGroup.svelte CHANGED
@@ -6,14 +6,14 @@ let classLast = 'inline-flex relative items-center py-2 px-4 text-sm font-medium
6
6
  </script>
7
7
 
8
8
  <div class="inline-flex rounded-md shadow-sm" role="group">
9
- {#each buttons as { name, icon, link, rel }, i}
9
+ {#each buttons as { name, icon, href, rel }, i}
10
10
  {#if i === 0}
11
11
  <button type="button" class={classFirst}>
12
12
  {#if icon}
13
13
  <svelte:component this={icon} className="h-4 w-4 mr-2" />
14
14
  {/if}
15
- {#if link}
16
- <a href={link} {rel}>{name}</a>
15
+ {#if href}
16
+ <a {href} {rel}>{name}</a>
17
17
  {:else}
18
18
  {name}
19
19
  {/if}
@@ -23,8 +23,8 @@ let classLast = 'inline-flex relative items-center py-2 px-4 text-sm font-medium
23
23
  {#if icon}
24
24
  <svelte:component this={icon} className="h-4 w-4 mr-2" />
25
25
  {/if}
26
- {#if link}
27
- <a href={link} {rel}>{name}</a>
26
+ {#if href}
27
+ <a {href} {rel}>{name}</a>
28
28
  {:else}
29
29
  {name}
30
30
  {/if}
@@ -34,8 +34,8 @@ let classLast = 'inline-flex relative items-center py-2 px-4 text-sm font-medium
34
34
  {#if icon}
35
35
  <svelte:component this={icon} className="h-4 w-4 mr-2" />
36
36
  {/if}
37
- {#if link}
38
- <a href={link} {rel}>{name}</a>
37
+ {#if href}
38
+ <a {href} {rel}>{name}</a>
39
39
  {:else}
40
40
  {name}
41
41
  {/if}
package/buttongroups/ButtonGroupOutline.svelte CHANGED
@@ -6,14 +6,14 @@ let classLast = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gra
6
6
  </script>
7
7
 
8
8
  <div class="inline-flex rounded-md shadow-sm">
9
- {#each buttons as { link, name, rel, icon }, i}
9
+ {#each buttons as { href, name, rel, icon }, i}
10
10
  {#if i === 0}
11
11
  <button type="button" class={classFirst}>
12
12
  {#if icon}
13
13
  <svelte:component this={icon} className="h-4 w-4 mr-2" />
14
14
  {/if}
15
- {#if link}
16
- <a href={link} {rel}>{name}</a>
15
+ {#if href}
16
+ <a {href} {rel}>{name}</a>
17
17
  {:else}
18
18
  {name}
19
19
  {/if}
@@ -23,8 +23,8 @@ let classLast = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gra
23
23
  {#if icon}
24
24
  <svelte:component this={icon} className="h-4 w-4 mr-2" />
25
25
  {/if}
26
- {#if link}
27
- <a href={link} {rel}>{name}</a>
26
+ {#if href}
27
+ <a {href} {rel}>{name}</a>
28
28
  {:else}
29
29
  {name}
30
30
  {/if}
@@ -34,8 +34,8 @@ let classLast = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gra
34
34
  {#if icon}
35
35
  <svelte:component this={icon} className="h-4 w-4 mr-2" />
36
36
  {/if}
37
- {#if link}
38
- <a href={link} {rel}>{name}</a>
37
+ {#if href}
38
+ <a {href} {rel}>{name}</a>
39
39
  {:else}
40
40
  {name}
41
41
  {/if}
package/cards/CtaCard.svelte CHANGED
@@ -43,8 +43,8 @@ else {
43
43
  </p>
44
44
  <div class="justify-center items-center space-y-4 sm:flex sm:space-y-0 sm:space-x-4">
45
45
  {#if btns}
46
- {#each btns as { name, textSize, type, link, rel, rounded }}
47
- <a href={link} {rel}>
46
+ {#each btns as { name, textSize, type, href, rel, rounded }}
47
+ <a {href} {rel}>
48
48
  <Button {name} {rounded} {type} {textSize} />
49
49
  </a>
50
50
  {/each}
package/cards/InteractiveCard.svelte CHANGED
@@ -97,12 +97,12 @@ else {
97
97
  </h3>
98
98
  <span class="text-sm text-gray-500 dark:text-gray-400">{content}</span>
99
99
  <div class="flex mt-4 space-x-3 lg:mt-6">
100
- {#if link1.link}
101
- <a href={link1.link} rel={link1.rel} class={linkClass}>{link1.name}</a>
100
+ {#if link1.href}
101
+ <a href={link1.href} rel={link1.rel} class={linkClass}>{link1.name}</a>
102
102
  {/if}
103
- {#if link2.link}
103
+ {#if link2.href}
104
104
  <a
105
- href={link2.link}
105
+ href={link2.href}
106
106
  rel={link2.rel}
107
107
  class="inline-flex items-center py-2 px-4 text-sm font-medium text-center text-gray-900 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-blue-300 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-800"
108
108
  >{link2.name}</a
package/footer/LogoFooter.svelte CHANGED
@@ -16,14 +16,14 @@ export let allRightsReserved = 'All Rights Reserved.';
16
16
 
17
17
  <footer class={footerClass}>
18
18
  <div class={divClass}>
19
- <a href={site.link} class={siteNameLinkClass}>
19
+ <a href={site.href} class={siteNameLinkClass}>
20
20
  <img src={site.img} class={imgClass} alt={site.name} />
21
21
  <span class={siteNameClass}>{site.name}</span>
22
22
  </a>
23
23
  <ul class={ulClass}>
24
- {#each links as { name, link, rel }}
24
+ {#each links as { name, href, rel }}
25
25
  <li>
26
- <a href={link} {rel} class={aClass}>{name}</a>
26
+ <a {href} {rel} class={aClass}>{name}</a>
27
27
  </li>
28
28
  {/each}
29
29
  </ul>
@@ -31,6 +31,6 @@ export let allRightsReserved = 'All Rights Reserved.';
31
31
  <hr class={hrClass} />
32
32
  <span class={copyRightSpanClass}
33
33
  >{copyrightYear}
34
- <a href={site.link} class={copyRightLinkClass}>{site.name}</a>. {allRightsReserved}
34
+ <a href={site.href} class={copyRightLinkClass}>{site.name}</a>. {allRightsReserved}
35
35
  </span>
36
36
  </footer>
package/footer/SimpleFooter.svelte CHANGED
@@ -12,12 +12,12 @@ export let allRightsReserved = 'All Rights Reserved.';
12
12
  <footer class={footerClass}>
13
13
  <span class={siteNameClass}
14
14
  >{copyrightYear}
15
- <a href={site.link} class={siteNameLinkClass} target="_blank">{site.name}</a>. {allRightsReserved}
15
+ <a href={site.href} class={siteNameLinkClass} target="_blank">{site.name}</a>. {allRightsReserved}
16
16
  </span>
17
17
  <ul class={ulClass}>
18
- {#each links as { name, link, rel }}
18
+ {#each links as { name, href, rel }}
19
19
  <li>
20
- <a href={link} {rel} class={aClass}>{name}</a>
20
+ <a {href} {rel} class={aClass}>{name}</a>
21
21
  </li>
22
22
  {/each}
23
23
  </ul>
package/footer/SitemapFooter.svelte CHANGED
@@ -23,9 +23,9 @@ export let allRightsReserved = 'All Rights Reserved.';
23
23
  {parent}
24
24
  </h2>
25
25
  <ul class={ulClass}>
26
- {#each children as { name, link }}
26
+ {#each children as { name, href }}
27
27
  <li class="mb-4">
28
- <a href={link} class={linkClass}>{name}</a>
28
+ <a {href} class={linkClass}>{name}</a>
29
29
  </li>
30
30
  {/each}
31
31
  </ul>
@@ -34,11 +34,11 @@ export let allRightsReserved = 'All Rights Reserved.';
34
34
  </div>
35
35
  <div class={copyrightDivClass}>
36
36
  <span class={copyrightClass}
37
- >{copyrightYear} <a href={site.link}>{site.name}</a>. {allRightsReserved}
37
+ >{copyrightYear} <a href={site.href}>{site.name}</a>. {allRightsReserved}
38
38
  </span>
39
39
  <div class={socialMediaDivClass}>
40
- {#each socialMedia as { link, icon }}
41
- <a href={link} class={socialMediaLinkClass}>
40
+ {#each socialMedia as { href, icon }}
41
+ <a {href} class={socialMediaLinkClass}>
42
42
  <svelte:component this={icon} className={iconClass} />
43
43
  </a>
44
44
  {/each}
package/footer/SitemapFooter.svelte.d.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
- import type { LinkType, SiteType, SocialMediaType } from '../types';
2
+ import type { SiteType, SocialMediaType, SocialMediaLinkType } from '../types';
3
3
  declare const __propDef: {
4
4
  props: {
5
5
  site: SiteType;
6
- links: LinkType[];
6
+ links: SocialMediaLinkType[];
7
7
  socialMedia: SocialMediaType[];
8
8
  footerClass?: string;
9
9
  linksClass?: string;
package/footer/SocialMediaFooter.svelte CHANGED
@@ -1,110 +1,63 @@
1
- <script>
2
- export let site = {
3
- link: "/",
4
- name: "Flowbite Svelte",
5
- img: "/images/mkdir-logo.png",
6
- };
7
- export let links = [
8
- {
9
- parent: "RESOURCES",
10
- children: [
11
- { name: "Flowbite-Svelte", link: "/" },
12
- {
13
- name: "Flowbite",
14
- link: "/",
15
- },
16
- ],
17
- },
18
- {
19
- parent: "FOLLOW US",
20
- children: [
21
- { name: "Github", link: "/" },
22
- {
23
- name: "Flowbite",
24
- link: "/",
25
- },
26
- ],
27
- },
28
- {
29
- parent: "LEGAL",
30
- children: [
31
- { name: "Privacy Policy", link: "/" },
32
- {
33
- name: "Terms & Conditions",
34
- link: "/",
35
- },
36
- ],
37
- },
38
- ];
39
- export let socialMedia = [
40
- {
41
- link: "/",
42
- icon: "",
43
- },
44
- ];
45
- export let footerClass = "p-4 bg-white sm:p-6 dark:bg-gray-800";
46
- export let divClass = "md:flex md:justify-between";
47
- export let divClass2 = "mb-6 md:mb-0";
48
- export let siteLinkClass = "flex items-center";
49
- export let siteNameSpanClass =
50
- "self-center text-2xl font-semibold whitespace-nowrap dark:text-white";
51
- export let imgClass = "mr-3 h-8";
52
- export let linksDivClass = "grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3";
53
- export let parentClass =
54
- "mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white";
55
- export let ulClass = "text-gray-600 dark:text-gray-400";
56
- export let linkClass = "hover:underline";
57
- export let hrClass =
58
- "my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8";
59
- export let copyrightDivClass = "sm:flex sm:items-center sm:justify-between";
60
- export let copyrightClass =
61
- "text-sm text-gray-500 sm:text-center dark:text-gray-400";
62
- export let socialMediaDivClass =
63
- "flex mt-4 space-x-6 sm:justify-center sm:mt-0";
64
- export let socialMediaLinkClass =
65
- "text-gray-500 hover:text-gray-900 dark:hover:text-white";
66
- export let iconClass = "h-5 w-5 mr-2";
67
- export let copyrightYear = "© 2022";
68
- export let allRightsReserved = "All Rights Reserved.";
1
+ <script >export let site;
2
+ export let links;
3
+ export let socialMedia;
4
+ export let footerClass = 'p-4 bg-white sm:p-6 dark:bg-gray-800';
5
+ export let divClass = 'md:flex md:justify-between';
6
+ export let divClass2 = 'mb-6 md:mb-0';
7
+ export let siteLinkClass = 'flex items-center';
8
+ export let siteNameSpanClass = 'self-center text-2xl font-semibold whitespace-nowrap dark:text-white';
9
+ export let imgClass = 'mr-3 h-8';
10
+ export let linksDivClass = 'grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3';
11
+ export let parentClass = 'mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white';
12
+ export let ulClass = 'text-gray-600 dark:text-gray-400';
13
+ export let linkClass = 'hover:underline';
14
+ export let hrClass = 'my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8';
15
+ export let copyrightDivClass = 'sm:flex sm:items-center sm:justify-between';
16
+ export let copyrightClass = 'text-sm text-gray-500 sm:text-center dark:text-gray-400';
17
+ export let socialMediaDivClass = 'flex mt-4 space-x-6 sm:justify-center sm:mt-0';
18
+ export let socialMediaLinkClass = 'text-gray-500 hover:text-gray-900 dark:hover:text-white';
19
+ export let iconClass = 'h-5 w-5 mr-2';
20
+ export let copyrightYear = '© 2022';
21
+ export let allRightsReserved = 'All Rights Reserved.';
69
22
  </script>
70
23
 
71
24
  <footer class={footerClass}>
72
- <div class={divClass}>
73
- <div class={divClass2}>
74
- <a href={site.link} class={siteLinkClass}>
75
- <img src={site.img} class={imgClass} alt={site.name} />
76
- <span class={siteNameSpanClass}>{site.name}</span>
77
- </a>
78
- </div>
79
- <div class={linksDivClass}>
80
- {#each links as { parent, children }}
81
- <div>
82
- <h2 class={parentClass}>
83
- {parent}
84
- </h2>
85
- <ul class={ulClass}>
86
- {#each children as { name, link }}
87
- <li class="mb-4">
88
- <a href={link} class={linkClass}>{name}</a>
89
- </li>
90
- {/each}
91
- </ul>
92
- </div>
93
- {/each}
94
- </div>
95
- </div>
96
- <hr class={hrClass} />
97
- <div class={copyrightDivClass}>
98
- <span class={copyrightClass}
99
- >{copyrightYear}
100
- <a href={site.link} class="hover:underline">{site.name}</a>. {allRightsReserved}
101
- </span>
102
- <div class={socialMediaDivClass}>
103
- {#each socialMedia as { link, icon }}
104
- <a href={link} class={socialMediaLinkClass}>
105
- <svelte:component this={icon} className={iconClass} />
106
- </a>
107
- {/each}
108
- </div>
109
- </div>
25
+ <div class={divClass}>
26
+ <div class={divClass2}>
27
+ <a href={site.href} class={siteLinkClass}>
28
+ <img src={site.img} class={imgClass} alt={site.name} />
29
+ <span class={siteNameSpanClass}>{site.name}</span>
30
+ </a>
31
+ </div>
32
+ <div class={linksDivClass}>
33
+ {#each links as { parent, children }}
34
+ <div>
35
+ <h2 class={parentClass}>
36
+ {parent}
37
+ </h2>
38
+ <ul class={ulClass}>
39
+ {#each children as { name, href }}
40
+ <li class="mb-4">
41
+ <a {href} class={linkClass}>{name}</a>
42
+ </li>
43
+ {/each}
44
+ </ul>
45
+ </div>
46
+ {/each}
47
+ </div>
48
+ </div>
49
+ <hr class={hrClass} />
50
+ <div class={copyrightDivClass}>
51
+ <span class={copyrightClass}
52
+ >{copyrightYear}
53
+ <a href={site.href} class="hover:underline">{site.name}</a>. {allRightsReserved}
54
+ </span>
55
+ <div class={socialMediaDivClass}>
56
+ {#each socialMedia as { href, icon }}
57
+ <a {href} class={socialMediaLinkClass}>
58
+ <svelte:component this={icon} className={iconClass} />
59
+ </a>
60
+ {/each}
61
+ </div>
62
+ </div>
110
63
  </footer>
package/footer/SocialMediaFooter.svelte.d.ts CHANGED
@@ -1,67 +1,10 @@
1
- /** @typedef {typeof __propDef.props} SocialMediaFooterProps */
2
- /** @typedef {typeof __propDef.events} SocialMediaFooterEvents */
3
- /** @typedef {typeof __propDef.slots} SocialMediaFooterSlots */
4
- export default class SocialMediaFooter extends SvelteComponentTyped<{
5
- site?: {
6
- link: string;
7
- name: string;
8
- img: string;
9
- };
10
- links?: {
11
- parent: string;
12
- children: {
13
- name: string;
14
- link: string;
15
- }[];
16
- }[];
17
- socialMedia?: {
18
- link: string;
19
- icon: string;
20
- }[];
21
- footerClass?: string;
22
- divClass?: string;
23
- divClass2?: string;
24
- siteLinkClass?: string;
25
- siteNameSpanClass?: string;
26
- imgClass?: string;
27
- linksDivClass?: string;
28
- parentClass?: string;
29
- ulClass?: string;
30
- linkClass?: string;
31
- hrClass?: string;
32
- copyrightDivClass?: string;
33
- copyrightClass?: string;
34
- socialMediaDivClass?: string;
35
- socialMediaLinkClass?: string;
36
- iconClass?: string;
37
- copyrightYear?: string;
38
- allRightsReserved?: string;
39
- }, {
40
- [evt: string]: CustomEvent<any>;
41
- }, {}> {
42
- }
43
- export type SocialMediaFooterProps = typeof __propDef.props;
44
- export type SocialMediaFooterEvents = typeof __propDef.events;
45
- export type SocialMediaFooterSlots = typeof __propDef.slots;
46
1
  import { SvelteComponentTyped } from "svelte";
2
+ import type { SocialMediaLinkType, SocialMediaType, SiteType } from '../types';
47
3
  declare const __propDef: {
48
4
  props: {
49
- site?: {
50
- link: string;
51
- name: string;
52
- img: string;
53
- };
54
- links?: {
55
- parent: string;
56
- children: {
57
- name: string;
58
- link: string;
59
- }[];
60
- }[];
61
- socialMedia?: {
62
- link: string;
63
- icon: string;
64
- }[];
5
+ site: SiteType;
6
+ links: SocialMediaLinkType[];
7
+ socialMedia: SocialMediaType[];
65
8
  footerClass?: string;
66
9
  divClass?: string;
67
10
  divClass2?: string;
@@ -86,4 +29,9 @@ declare const __propDef: {
86
29
  };
87
30
  slots: {};
88
31
  };
32
+ export declare type SocialMediaFooterProps = typeof __propDef.props;
33
+ export declare type SocialMediaFooterEvents = typeof __propDef.events;
34
+ export declare type SocialMediaFooterSlots = typeof __propDef.slots;
35
+ export default class SocialMediaFooter extends SvelteComponentTyped<SocialMediaFooterProps, SocialMediaFooterEvents, SocialMediaFooterSlots> {
36
+ }
89
37
  export {};
package/navbar/Navbar.svelte CHANGED
@@ -52,11 +52,11 @@ export let menus;
52
52
  </button>
53
53
  <div class:hidden={barHidden} class="hidden w-full md:block md:w-auto" id="mobile-menu">
54
54
  <ul class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
55
- {#each menus as { name, link, rel }}
55
+ {#each menus as { name, href, rel }}
56
56
  <li>
57
57
  <a
58
- class:active={$page.url.pathname === link}
59
- href={link}
58
+ class:active={$page.url.pathname === href}
59
+ {href}
60
60
  {rel}
61
61
  class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 dark:hover:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent {textsize}"
62
62
  >{name}</a
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flowbite-svelte",
3
- "version": "0.9.3",
3
+ "version": "0.9.4",
4
4
  "description": "Flowbite components for Svelte",
5
5
  "author": {
6
6
  "name": "Shinichi Okada",
@@ -23,7 +23,6 @@
23
23
  "eslint": "^7.32.0",
24
24
  "eslint-config-prettier": "^8.3.0",
25
25
  "eslint-plugin-svelte3": "^3.2.1",
26
- "flowbite-svelte": "^0.9.0",
27
26
  "mdsvex": "^0.10.5",
28
27
  "postcss": "^8.4.5",
29
28
  "postcss-load-config": "^3.1.1",
package/types.d.ts CHANGED
@@ -6,7 +6,7 @@ export declare type Gradientduotones = 'purple2blue' | 'cyan2blue' | 'green2blue
6
6
  export declare type Textsize = 'text-xs' | 'text-sm' | 'text-base' | 'text-lg' | 'text-xl' | 'text-2xl' | 'text-3xl' | 'text-4xl';
7
7
  export interface ButtonGroupType {
8
8
  name: string;
9
- link?: string;
9
+ href?: string;
10
10
  rel?: string;
11
11
  icon?: typeof SvelteComponent;
12
12
  }
@@ -14,7 +14,7 @@ export declare type CardButtonType = {
14
14
  textSize?: Textsize;
15
15
  name: string;
16
16
  type?: Buttontypes;
17
- link?: string;
17
+ href?: string;
18
18
  rel?: string;
19
19
  rounded?: boolean;
20
20
  };
@@ -24,15 +24,16 @@ export declare type ImgType = {
24
24
  };
25
25
  export interface LinkType {
26
26
  name: string;
27
- link: string;
27
+ href: string;
28
28
  rel?: string;
29
29
  }
30
30
  export interface SiteType {
31
31
  name: string;
32
- link: string;
32
+ href: string;
33
+ img?: string;
33
34
  }
34
35
  export interface SocialMediaType {
35
- link: string;
36
+ href: string;
36
37
  icon: typeof SvelteComponent;
37
38
  }
38
39
  export declare type AlignType = 'text-center' | 'text-left' | 'text-right';
@@ -64,3 +65,7 @@ export interface DropdownLinkType {
64
65
  href: string;
65
66
  rel?: string;
66
67
  }
68
+ export interface SocialMediaLinkType {
69
+ parent: string;
70
+ children?: LinkType[];
71
+ }