flowbite-svelte 0.25.17 → 0.25.18

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 (6) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/breadcrumbs/Breadcrumb.svelte +4 -1
  3. package/breadcrumbs/Breadcrumb.svelte.d.ts +2 -0
  4. package/breadcrumbs/BreadcrumbItem.svelte +43 -35
  5. package/breadcrumbs/BreadcrumbItem.svelte.d.ts +5 -5
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,13 @@
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.25.18](https://github.com/themesberg/flowbite-svelte/compare/v0.25.17...v0.25.18) (2022-08-27)
6
+
7
+
8
+ ### Bug Fixes
9
+
10
+ * change BreadcrumbItem home for all pages ([f5f895f](https://github.com/themesberg/flowbite-svelte/commit/f5f895f6157b03e435975c5735329f8dfc984485))
11
+
5
12
  ### [0.25.17](https://github.com/themesberg/flowbite-svelte/compare/v0.25.16...v0.25.17) (2022-08-27)
6
13
 
7
14
 
package/breadcrumbs/Breadcrumb.svelte CHANGED
@@ -1,9 +1,12 @@
1
1
  <script>import classNames from 'classnames';
2
+ export let solid = false;
2
3
  export let navClass = 'flex';
4
+ export let solidClass = 'flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700';
3
5
  export let olClass = 'inline-flex items-center space-x-1 md:space-x-3';
6
+ let classNav = solid ? solidClass : navClass;
4
7
  </script>
5
8
 
6
- <nav aria-label="Breadcrumb" {...$$restProps} class={classNames(navClass, $$props.class)}>
9
+ <nav aria-label="Breadcrumb" {...$$restProps} class={classNames(classNav, $$props.class)}>
7
10
  <ol class={classNames(olClass, $$props.classOl)}>
8
11
  <slot />
9
12
  </ol>
package/breadcrumbs/Breadcrumb.svelte.d.ts CHANGED
@@ -2,7 +2,9 @@ import { SvelteComponentTyped } from "svelte";
2
2
  declare const __propDef: {
3
3
  props: {
4
4
  [x: string]: any;
5
+ solid?: boolean;
5
6
  navClass?: string;
7
+ solidClass?: string;
6
8
  olClass?: string;
7
9
  };
8
10
  events: {
package/breadcrumbs/BreadcrumbItem.svelte CHANGED
@@ -1,43 +1,51 @@
1
- <script>import { ChevronRight } from 'svelte-heros';
2
- export let icon = null;
3
- export let variation = null;
4
- export let iconSize = 20;
5
- export let iconClass = 'mr-2';
1
+ <script>export let home = false;
2
+ export let linkClass = 'ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white';
3
+ export let spanClass = 'ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400';
4
+ export let homeClass = 'inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white';
6
5
  </script>
7
6
 
8
- <li class="group flex items-center" {...$$props}>
9
- <ChevronRight aria-hidden="true" class="mx-1 h-6 w-6 text-gray-400 group-first:hidden md:mx-2" />
10
- {#if $$props.href}
11
- <a
12
- class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
13
- href={$$props.href}
14
- >
15
- {#if icon}
16
- <svelte:component
17
- this={icon}
18
- {variation}
19
- size={iconSize}
20
- aria-hidden="true"
21
- class={iconClass}
22
- />
7
+ <li class="inline-flex items-center" {...$$props}>
8
+ {#if home}
9
+ <a class={homeClass} href={$$props.href}>
10
+ {#if $$slots.icon}
11
+ <slot name="icon" />
12
+ {:else}
13
+ <svg
14
+ class="w-4 h-4 mr-2"
15
+ fill="currentColor"
16
+ viewBox="0 0 20 20"
17
+ xmlns="http://www.w3.org/2000/svg"
18
+ ><path
19
+ d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"
20
+ /></svg
21
+ >
23
22
  {/if}
24
23
  <slot />
25
24
  </a>
26
25
  {:else}
27
- <span
28
- class="ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400"
29
- data-testid="breadcrumb-item"
30
- >
31
- {#if icon}
32
- <svelte:component
33
- this={icon}
34
- {variation}
35
- size={iconSize}
36
- aria-hidden="true"
37
- class={iconClass}
38
- />
39
- {/if}
40
- <slot />
41
- </span>
26
+ {#if $$slots.icon}
27
+ <slot name="icon" />
28
+ {:else}
29
+ <svg
30
+ class="w-6 h-6 text-gray-400"
31
+ fill="currentColor"
32
+ viewBox="0 0 20 20"
33
+ xmlns="http://www.w3.org/2000/svg"
34
+ ><path
35
+ fill-rule="evenodd"
36
+ d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
37
+ clip-rule="evenodd"
38
+ /></svg
39
+ >
40
+ {/if}
41
+ {#if $$props.href}
42
+ <a class={linkClass} href={$$props.href}>
43
+ <slot />
44
+ </a>
45
+ {:else}
46
+ <span class={spanClass}>
47
+ <slot />
48
+ </span>
49
+ {/if}
42
50
  {/if}
43
51
  </li>
package/breadcrumbs/BreadcrumbItem.svelte.d.ts CHANGED
@@ -1,17 +1,17 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
- import type { SvelteComponent } from 'svelte';
3
2
  declare const __propDef: {
4
3
  props: {
5
4
  [x: string]: any;
6
- icon?: typeof SvelteComponent | null;
7
- variation?: 'solid' | null;
8
- iconSize?: number;
9
- iconClass?: string;
5
+ home?: boolean;
6
+ linkClass?: string;
7
+ spanClass?: string;
8
+ homeClass?: string;
10
9
  };
11
10
  events: {
12
11
  [evt: string]: CustomEvent<any>;
13
12
  };
14
13
  slots: {
14
+ icon: {};
15
15
  default: {};
16
16
  };
17
17
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flowbite-svelte",
3
- "version": "0.25.17",
3
+ "version": "0.25.18",
4
4
  "description": "Flowbite components for Svelte",
5
5
  "main": "index.js",
6
6
  "author": {