flowbite-svelte 0.25.16 → 0.25.19

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 (39) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/accordions/AccordionItem.svelte +41 -22
  3. package/accordions/AccordionItem.svelte.d.ts +3 -4
  4. package/breadcrumbs/Breadcrumb.svelte +4 -1
  5. package/breadcrumbs/Breadcrumb.svelte.d.ts +2 -0
  6. package/breadcrumbs/BreadcrumbItem.svelte +43 -35
  7. package/breadcrumbs/BreadcrumbItem.svelte.d.ts +5 -5
  8. package/index.d.ts +0 -13
  9. package/index.js +0 -14
  10. package/package.json +1 -14
  11. package/typography/Hr.svelte +8 -10
  12. package/typography/Hr.svelte.d.ts +6 -8
  13. package/utils/Popper.svelte +1 -0
  14. package/accordions/AccordionFlush.svelte +0 -47
  15. package/accordions/AccordionFlush.svelte.d.ts +0 -27
  16. package/icons/CodeBracket.svelte +0 -38
  17. package/icons/CodeBracket.svelte.d.ts +0 -22
  18. package/icons/Envelope.svelte +0 -37
  19. package/icons/Envelope.svelte.d.ts +0 -22
  20. package/icons/FaceSmile.svelte +0 -38
  21. package/icons/FaceSmile.svelte.d.ts +0 -22
  22. package/icons/Figma.svelte +0 -34
  23. package/icons/Figma.svelte.d.ts +0 -19
  24. package/icons/Home.svelte +0 -37
  25. package/icons/Home.svelte.d.ts +0 -22
  26. package/icons/Map.svelte +0 -38
  27. package/icons/Map.svelte.d.ts +0 -22
  28. package/icons/MapPin.svelte +0 -37
  29. package/icons/MapPin.svelte.d.ts +0 -22
  30. package/icons/PaperAirplane.svelte +0 -37
  31. package/icons/PaperAirplane.svelte.d.ts +0 -22
  32. package/icons/PaperClip.svelte +0 -38
  33. package/icons/PaperClip.svelte.d.ts +0 -22
  34. package/icons/Photo.svelte +0 -38
  35. package/icons/Photo.svelte.d.ts +0 -22
  36. package/icons/QrCode.svelte +0 -37
  37. package/icons/QrCode.svelte.d.ts +0 -22
  38. package/icons/QuoteLeft.svelte +0 -17
  39. package/icons/QuoteLeft.svelte.d.ts +0 -18
package/CHANGELOG.md CHANGED
@@ -2,6 +2,33 @@
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.19](https://github.com/themesberg/flowbite-svelte/compare/v0.25.18...v0.25.19) (2022-08-27)
6
+
7
+
8
+ ### Bug Fixes
9
+
10
+ * remove Home icons from all pages ([7ac0e7a](https://github.com/themesberg/flowbite-svelte/commit/7ac0e7aa3edc5486d597a61775a5694c76b4bb35))
11
+ * removed Home icon from BreadcrumbItem ([66f00dd](https://github.com/themesberg/flowbite-svelte/commit/66f00dd9e024d97c2b9766e30b03b775f227c672))
12
+
13
+ ### [0.25.18](https://github.com/themesberg/flowbite-svelte/compare/v0.25.17...v0.25.18) (2022-08-27)
14
+
15
+
16
+ ### Bug Fixes
17
+
18
+ * change BreadcrumbItem home for all pages ([f5f895f](https://github.com/themesberg/flowbite-svelte/commit/f5f895f6157b03e435975c5735329f8dfc984485))
19
+
20
+ ### [0.25.17](https://github.com/themesberg/flowbite-svelte/compare/v0.25.16...v0.25.17) (2022-08-27)
21
+
22
+
23
+ ### Features
24
+
25
+ * combine Accordionflush and AccordionItem ([e53fa64](https://github.com/themesberg/flowbite-svelte/commit/e53fa6421ca747ed46d6432b67715b3eedf4cbba))
26
+
27
+
28
+ ### Bug Fixes
29
+
30
+ * textarea docs ([133b933](https://github.com/themesberg/flowbite-svelte/commit/133b9334841ac13d82c3a86bc24b3375de0972ff))
31
+
5
32
  ### [0.25.16](https://github.com/themesberg/flowbite-svelte/compare/v0.25.15...v0.25.16) (2022-08-25)
6
33
 
7
34
 
@@ -1,34 +1,25 @@
1
1
  <script>import classNames from 'classnames';
2
2
  import { slide } from 'svelte/transition';
3
- import { onMount } from 'svelte';
4
- import { ChevronDown, ChevronUp } from 'svelte-heros';
3
+ export let flush = false;
5
4
  export let id = '';
6
- export let slotClass = 'p-5 border border-t-0 border-gray-200 dark:border-gray-700';
5
+ export let slotClass = 'border-gray-200 dark:border-gray-700';
6
+ let classSlot = classNames(slotClass, flush ? 'py-5 border-b' : 'p-5 border border-t-0');
7
7
  export let isOpen = false;
8
8
  export let color = false;
9
- export let icons = {
10
- up: ChevronUp,
11
- down: ChevronDown
12
- };
13
- export let iconSize = 24;
14
- export let iconClass = 'text-gray-500 sm:w-6 sm:h-6 dark:text-gray-300';
15
- export let btnClass = 'flex items-center focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 justify-between p-5 w-full font-medium border border-gray-200 dark:border-gray-700 text-left text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800';
16
- export let colorClass = 'focus:ring-blue-200 dark:focus:ring-blue-800 hover:bg-blue-100 text-blue-500 bg-blue-200 text-blue-700';
17
- $: btnClass;
18
- onMount(() => {
19
- if (isOpen) {
20
- isOpen = true;
21
- }
22
- });
9
+ export let btnClass = 'flex items-center justify-between w-full font-medium text-left text-gray-500 border-gray-200 dark:border-gray-700 dark:text-gray-400';
10
+ let classBtn = classNames(btnClass, flush
11
+ ? 'py-5 border-b'
12
+ : 'focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 p-5 border hover:bg-gray-100 dark:hover:bg-gray-800');
13
+ export let colorClass = 'focus:ring-blue-200 dark:focus:ring-blue-800 hover:bg-blue-100 text-blue-500 bg-blue-200 text-blue-700';
23
14
  const handleToggle = (id) => {
24
15
  isOpen = !isOpen;
25
16
  };
26
17
  let buttonClass;
27
18
  $: if (color && isOpen) {
28
- buttonClass = btnClass + colorClass;
19
+ buttonClass = classBtn + colorClass;
29
20
  }
30
21
  else {
31
- buttonClass = btnClass;
22
+ buttonClass = classBtn;
32
23
  }
33
24
  </script>
34
25
 
@@ -42,15 +33,43 @@ else {
42
33
  >
43
34
  <slot name="header" />
44
35
  {#if isOpen}
45
- <svelte:component this={icons.up} size={iconSize} class="mr-2 {iconClass}" />
36
+ {#if $$slots.arrowup}
37
+ <slot name="arrowup" />
38
+ {:else}
39
+ <svg
40
+ data-accordion-icon
41
+ class="w-6 h-6 rotate-180 shrink-0"
42
+ fill="currentColor"
43
+ viewBox="0 0 20 20"
44
+ xmlns="http://www.w3.org/2000/svg"
45
+ ><path
46
+ fill-rule="evenodd"
47
+ d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
48
+ clip-rule="evenodd"
49
+ /></svg
50
+ >
51
+ {/if}
52
+ {:else if $$slots.arrowdown}
53
+ <slot name="arrowdown" />
46
54
  {:else}
47
- <svelte:component this={icons.down} size={iconSize} class="mr-2 {iconClass}" />
55
+ <svg
56
+ data-accordion-icon
57
+ class="w-6 h-6 shrink-0"
58
+ fill="currentColor"
59
+ viewBox="0 0 20 20"
60
+ xmlns="http://www.w3.org/2000/svg"
61
+ ><path
62
+ fill-rule="evenodd"
63
+ d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
64
+ clip-rule="evenodd"
65
+ /></svg
66
+ >
48
67
  {/if}
49
68
  </button>
50
69
  </h2>
51
70
  {#if isOpen}
52
71
  <div transition:slide={{ duration: 500 }}>
53
- <div class={slotClass}>
72
+ <div class={classSlot}>
54
73
  <slot name="body" />
55
74
  </div>
56
75
  </div>
@@ -1,15 +1,12 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
- import type { AccordionIconType } from '../types';
3
2
  declare const __propDef: {
4
3
  props: {
5
4
  [x: string]: any;
5
+ flush?: boolean;
6
6
  id?: string;
7
7
  slotClass?: string;
8
8
  isOpen?: boolean;
9
9
  color?: boolean;
10
- icons?: AccordionIconType;
11
- iconSize?: number;
12
- iconClass?: string;
13
10
  btnClass?: string;
14
11
  colorClass?: string;
15
12
  };
@@ -18,6 +15,8 @@ declare const __propDef: {
18
15
  };
19
16
  slots: {
20
17
  header: {};
18
+ arrowup: {};
19
+ arrowdown: {};
21
20
  body: {};
22
21
  };
23
22
  };
@@ -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>
@@ -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: {
@@ -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>
@@ -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/index.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  export { default as AccordionItem } from './accordions/AccordionItem.svelte';
2
- export { default as AccordionFlush } from './accordions/AccordionFlush.svelte';
3
2
  export { default as Alert } from './alerts/Alert.svelte';
4
3
  export { default as Avatar } from './avatar/Avatar.svelte';
5
4
  export { default as Badge } from './badges/Badge.svelte';
@@ -39,18 +38,6 @@ export { default as SimpleSearch } from './forms/SimpleSearch.svelte';
39
38
  export { default as Textarea } from './forms/Textarea.svelte';
40
39
  export { default as Toggle } from './forms/Toggle.svelte';
41
40
  export { default as VoiceSearch } from './forms/VoiceSearch.svelte';
42
- export { default as CodeBracket } from './icons/CodeBracket.svelte';
43
- export { default as Envelope } from './icons/Envelope.svelte';
44
- export { default as FaceSmile } from './icons/FaceSmile.svelte';
45
- export { default as Figma } from './icons/Figma.svelte';
46
- export { default as Home } from './icons/Home.svelte';
47
- export { default as Map } from './icons/Map.svelte';
48
- export { default as MapPin } from './icons/MapPin.svelte';
49
- export { default as PaperAirplane } from './icons/PaperAirplane.svelte';
50
- export { default as PaperClip } from './icons/PaperClip.svelte';
51
- export { default as Photo } from './icons/Photo.svelte';
52
- export { default as QrCode } from './icons/QrCode.svelte';
53
- export { default as QuoteLeft } from './icons/QuoteLeft.svelte';
54
41
  export { default as Kbd } from './kbd/Kbd.svelte';
55
42
  export { default as ArrowKeyDown } from './kbd/ArrowKeyDown.svelte';
56
43
  export { default as ArrowKeyLeft } from './kbd/ArrowKeyLeft.svelte';
package/index.js CHANGED
@@ -1,6 +1,5 @@
1
1
  // Accordion
2
2
  export { default as AccordionItem } from './accordions/AccordionItem.svelte';
3
- export { default as AccordionFlush } from './accordions/AccordionFlush.svelte';
4
3
  // Alerts
5
4
  export { default as Alert } from './alerts/Alert.svelte';
6
5
  // Avatar
@@ -53,19 +52,6 @@ export { default as SimpleSearch } from './forms/SimpleSearch.svelte';
53
52
  export { default as Textarea } from './forms/Textarea.svelte';
54
53
  export { default as Toggle } from './forms/Toggle.svelte';
55
54
  export { default as VoiceSearch } from './forms/VoiceSearch.svelte';
56
- // Icons
57
- export { default as CodeBracket } from './icons/CodeBracket.svelte';
58
- export { default as Envelope } from './icons/Envelope.svelte';
59
- export { default as FaceSmile } from './icons/FaceSmile.svelte';
60
- export { default as Figma } from './icons/Figma.svelte';
61
- export { default as Home } from './icons/Home.svelte';
62
- export { default as Map } from './icons/Map.svelte';
63
- export { default as MapPin } from './icons/MapPin.svelte';
64
- export { default as PaperAirplane } from './icons/PaperAirplane.svelte';
65
- export { default as PaperClip } from './icons/PaperClip.svelte';
66
- export { default as Photo } from './icons/Photo.svelte';
67
- export { default as QrCode } from './icons/QrCode.svelte';
68
- export { default as QuoteLeft } from './icons/QuoteLeft.svelte';
69
55
  // Kbd
70
56
  export { default as Kbd } from './kbd/Kbd.svelte';
71
57
  export { default as ArrowKeyDown } from './kbd/ArrowKeyDown.svelte';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flowbite-svelte",
3
- "version": "0.25.16",
3
+ "version": "0.25.19",
4
4
  "description": "Flowbite components for Svelte",
5
5
  "main": "index.js",
6
6
  "author": {
@@ -100,7 +100,6 @@
100
100
  "exports": {
101
101
  "./package.json": "./package.json",
102
102
  "./.DS_Store": "./.DS_Store",
103
- "./accordions/AccordionFlush.svelte": "./accordions/AccordionFlush.svelte",
104
103
  "./accordions/AccordionItem.svelte": "./accordions/AccordionItem.svelte",
105
104
  "./alerts/Alert.svelte": "./alerts/Alert.svelte",
106
105
  "./avatar/Avatar.svelte": "./avatar/Avatar.svelte",
@@ -148,18 +147,6 @@
148
147
  "./forms/Textarea.svelte": "./forms/Textarea.svelte",
149
148
  "./forms/Toggle.svelte": "./forms/Toggle.svelte",
150
149
  "./forms/VoiceSearch.svelte": "./forms/VoiceSearch.svelte",
151
- "./icons/CodeBracket.svelte": "./icons/CodeBracket.svelte",
152
- "./icons/Envelope.svelte": "./icons/Envelope.svelte",
153
- "./icons/FaceSmile.svelte": "./icons/FaceSmile.svelte",
154
- "./icons/Figma.svelte": "./icons/Figma.svelte",
155
- "./icons/Home.svelte": "./icons/Home.svelte",
156
- "./icons/Map.svelte": "./icons/Map.svelte",
157
- "./icons/MapPin.svelte": "./icons/MapPin.svelte",
158
- "./icons/PaperAirplane.svelte": "./icons/PaperAirplane.svelte",
159
- "./icons/PaperClip.svelte": "./icons/PaperClip.svelte",
160
- "./icons/Photo.svelte": "./icons/Photo.svelte",
161
- "./icons/QrCode.svelte": "./icons/QrCode.svelte",
162
- "./icons/QuoteLeft.svelte": "./icons/QuoteLeft.svelte",
163
150
  ".": "./index.js",
164
151
  "./kbd/ArrowKeyDown.svelte": "./kbd/ArrowKeyDown.svelte",
165
152
  "./kbd/ArrowKeyLeft.svelte": "./kbd/ArrowKeyLeft.svelte",
@@ -1,27 +1,25 @@
1
1
  <script>import classNames from 'classnames';
2
- export let divClass = 'inline-flex justify-center items-center w-full';
3
- export let hrClass = 'bg-gray-200 rounded border-0 dark:bg-gray-700';
4
- // bg-gray-200 rounded border-0 dark:bg-gray-700
2
+ export let icon = false;
5
3
  export let width = 'w-full';
6
4
  export let height = 'h-px';
7
- export let iconSize = 24;
8
- export let iconClass = 'text-gray-700 dark:text-gray-300';
9
- export let icon;
10
- export let text;
5
+ export let divClass = 'inline-flex justify-center items-center w-full';
6
+ export let hrClass = 'bg-gray-200 rounded border-0 dark:bg-gray-700';
11
7
  export let iconDivClass = 'absolute left-1/2 px-4 bg-white -translate-x-1/2 dark:bg-gray-900';
12
8
  export let textSpanClass = 'absolute left-1/2 px-3 font-medium text-gray-900 bg-white -translate-x-1/2 dark:text-white dark:bg-gray-900';
13
9
  let horizontalClass = classNames(hrClass, width, height, $$props.class);
14
10
  </script>
15
11
 
16
- {#if icon || text}
12
+ {#if $$slots}
17
13
  <div class={classNames(divClass, $$props.classDiv)}>
18
14
  <hr class={horizontalClass} />
19
15
  {#if icon}
20
16
  <div class={iconDivClass}>
21
- <svelte:component this={icon} size={iconSize} class={iconClass} />
17
+ <slot />
22
18
  </div>
23
19
  {:else}
24
- <span class={textSpanClass}>or</span>
20
+ <span class={textSpanClass}>
21
+ <slot />
22
+ </span>
25
23
  {/if}
26
24
  </div>
27
25
  {:else}
@@ -1,23 +1,21 @@
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
- divClass?: string;
7
- hrClass?: string;
5
+ icon?: boolean;
8
6
  width?: string;
9
7
  height?: string;
10
- iconSize?: number;
11
- iconClass?: string;
12
- icon: typeof SvelteComponent;
13
- text: string;
8
+ divClass?: string;
9
+ hrClass?: string;
14
10
  iconDivClass?: string;
15
11
  textSpanClass?: string;
16
12
  };
17
13
  events: {
18
14
  [evt: string]: CustomEvent<any>;
19
15
  };
20
- slots: {};
16
+ slots: {
17
+ default: {};
18
+ };
21
19
  };
22
20
  export declare type HrProps = typeof __propDef.props;
23
21
  export declare type HrEvents = typeof __propDef.events;
@@ -77,6 +77,7 @@ $: divClass = classNames('z-10', animation && `transition-opacity ${animation}`,
77
77
  on:focusout={activeContent ? hideHandler : undefined}
78
78
  on:mouseenter={activeContent && !clickable ? showHandler : undefined}
79
79
  on:mouseleave={activeContent && !clickable ? hideHandler : undefined}
80
+ style="position: absolute;"
80
81
  >
81
82
  <slot />
82
83
  {#if arrow}<div data-popper-arrow />{/if}
@@ -1,47 +0,0 @@
1
- <script>import classNames from 'classnames';
2
- import { slide } from 'svelte/transition';
3
- import { onMount } from 'svelte';
4
- import { ChevronDown, ChevronUp } from 'svelte-heros';
5
- export let id = '';
6
- export let btnClass = 'flex justify-between items-center py-5 w-full font-medium text-left text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400';
7
- export let slotClass = 'py-5 border-b border-gray-200 dark:border-gray-700';
8
- export let iconSize = 24;
9
- export let iconClass = 'text-gray-500 sm:w-6 sm:h-6 dark:text-gray-300';
10
- export let isOpen = false;
11
- export let icons = {
12
- up: ChevronUp,
13
- down: ChevronDown
14
- };
15
- onMount(() => {
16
- if (isOpen) {
17
- isOpen = true;
18
- }
19
- });
20
- const handleToggle = (id) => {
21
- isOpen = !isOpen;
22
- };
23
- </script>
24
-
25
- <h2 aria-expanded={isOpen}>
26
- <button
27
- on:click={() => handleToggle(id)}
28
- type="button"
29
- class:rounded-t-xl={id === '1'}
30
- class:border-t-0={id !== '1'}
31
- class={classNames(btnClass, $$props.class)}
32
- >
33
- <slot name="header" />
34
- {#if isOpen}
35
- <svelte:component this={icons.up} size={iconSize} class="mr-2 {iconClass}" />
36
- {:else}
37
- <svelte:component this={icons.down} size={iconSize} class="mr-2 {iconClass}" />
38
- {/if}
39
- </button>
40
- </h2>
41
- {#if isOpen}
42
- <div transition:slide={{ duration: 500 }}>
43
- <div class={slotClass}>
44
- <slot name="body" />
45
- </div>
46
- </div>
47
- {/if}
@@ -1,27 +0,0 @@
1
- import { SvelteComponentTyped } from "svelte";
2
- import type { AccordionIconType } from '../types';
3
- declare const __propDef: {
4
- props: {
5
- [x: string]: any;
6
- id?: string;
7
- btnClass?: string;
8
- slotClass?: string;
9
- iconSize?: number;
10
- iconClass?: string;
11
- isOpen?: boolean;
12
- icons?: AccordionIconType;
13
- };
14
- events: {
15
- [evt: string]: CustomEvent<any>;
16
- };
17
- slots: {
18
- header: {};
19
- body: {};
20
- };
21
- };
22
- export declare type AccordionFlushProps = typeof __propDef.props;
23
- export declare type AccordionFlushEvents = typeof __propDef.events;
24
- export declare type AccordionFlushSlots = typeof __propDef.slots;
25
- export default class AccordionFlush extends SvelteComponentTyped<AccordionFlushProps, AccordionFlushEvents, AccordionFlushSlots> {
26
- }
27
- export {};
@@ -1,38 +0,0 @@
1
- <script>// https://github.com/shinokada/svelte-heros-v2
2
- export let size = '24';
3
- export let color = 'currentColor';
4
- export let variation = 'outline';
5
- let viewBox;
6
- let svgpath;
7
- let svgoutline = `<path d="M17.25 6.75L22.5 12L17.25 17.25M6.75 17.25L1.5 12L6.75 6.75M14.25 3.75L9.75 20.25" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
8
- let svgsolid = `<path fill-rule="evenodd" clip-rule="evenodd" d="M14.4473 3.02662C14.847 3.1356 15.0826 3.54791 14.9736 3.94753L10.4736 20.4475C10.3646 20.8471 9.95228 21.0827 9.55266 20.9738C9.15304 20.8648 8.91744 20.4525 9.02643 20.0529L13.5264 3.55285C13.6354 3.15323 14.0477 2.91763 14.4473 3.02662ZM16.7197 6.21986C17.0126 5.92696 17.4874 5.92696 17.7803 6.21986L23.0303 11.4699C23.3232 11.7628 23.3232 12.2376 23.0303 12.5305L17.7803 17.7805C17.4874 18.0734 17.0126 18.0734 16.7197 17.7805C16.4268 17.4876 16.4268 17.0128 16.7197 16.7199L21.4393 12.0002L16.7197 7.28052C16.4268 6.98762 16.4268 6.51275 16.7197 6.21986ZM7.28033 6.21986C7.57322 6.51275 7.57322 6.98763 7.28033 7.28052L2.56066 12.0002L7.28033 16.7199C7.57322 17.0128 7.57322 17.4876 7.28033 17.7805C6.98744 18.0734 6.51256 18.0734 6.21967 17.7805L0.96967 12.5305C0.676777 12.2376 0.676777 11.7628 0.96967 11.4699L6.21967 6.21986C6.51256 5.92697 6.98744 5.92697 7.28033 6.21986Z" fill="${color}"/> `;
9
- $: switch (variation) {
10
- case 'outline':
11
- svgpath = svgoutline;
12
- viewBox = '0 0 24 24';
13
- break;
14
- case 'solid':
15
- svgpath = svgsolid;
16
- viewBox = '0 0 24 24';
17
- break;
18
- default:
19
- svgpath = svgoutline;
20
- viewBox = '0 0 24 24';
21
- }
22
- export let ariaLabel = 'code bracket';
23
- </script>
24
-
25
- <svg
26
- xmlns="http://www.w3.org/2000/svg"
27
- width={size}
28
- height={size}
29
- class={$$props.class}
30
- {...$$restProps}
31
- aria-label={ariaLabel}
32
- fill="none"
33
- {viewBox}
34
- stroke-width="2"
35
- on:click
36
- >
37
- {@html svgpath}
38
- </svg>
@@ -1,22 +0,0 @@
1
- import { SvelteComponentTyped } from "svelte";
2
- declare const __propDef: {
3
- props: {
4
- [x: string]: any;
5
- size?: string;
6
- color?: string;
7
- variation?: 'solid' | 'outline';
8
- ariaLabel?: string;
9
- };
10
- events: {
11
- click: MouseEvent;
12
- } & {
13
- [evt: string]: CustomEvent<any>;
14
- };
15
- slots: {};
16
- };
17
- export declare type CodeBracketProps = typeof __propDef.props;
18
- export declare type CodeBracketEvents = typeof __propDef.events;
19
- export declare type CodeBracketSlots = typeof __propDef.slots;
20
- export default class CodeBracket extends SvelteComponentTyped<CodeBracketProps, CodeBracketEvents, CodeBracketSlots> {
21
- }
22
- export {};
@@ -1,37 +0,0 @@
1
- <script>export let size = '24';
2
- export let color = 'currentColor';
3
- export let variation = 'outline';
4
- let viewBox;
5
- let svgpath;
6
- let svgoutline = `<path d="M21.75 6.75V17.25C21.75 18.4926 20.7426 19.5 19.5 19.5H4.5C3.25736 19.5 2.25 18.4926 2.25 17.25V6.75M21.75 6.75C21.75 5.50736 20.7426 4.5 19.5 4.5H4.5C3.25736 4.5 2.25 5.50736 2.25 6.75M21.75 6.75V6.99271C21.75 7.77405 21.3447 8.49945 20.6792 8.90894L13.1792 13.5243C12.4561 13.9694 11.5439 13.9694 10.8208 13.5243L3.32078 8.90894C2.65535 8.49945 2.25 7.77405 2.25 6.99271V6.75" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
7
- let svgsolid = `<path d="M1.5 8.6691V17.25C1.5 18.9069 2.84315 20.25 4.5 20.25H19.5C21.1569 20.25 22.5 18.9069 22.5 17.25V8.6691L13.5723 14.1631C12.6081 14.7564 11.3919 14.7564 10.4277 14.1631L1.5 8.6691Z" fill="${color}"/> <path d="M22.5 6.90783V6.75C22.5 5.09315 21.1569 3.75 19.5 3.75H4.5C2.84315 3.75 1.5 5.09315 1.5 6.75V6.90783L11.2139 12.8856C11.696 13.1823 12.304 13.1823 12.7861 12.8856L22.5 6.90783Z" fill="${color}"/> `;
8
- $: switch (variation) {
9
- case 'outline':
10
- svgpath = svgoutline;
11
- viewBox = '0 0 24 24';
12
- break;
13
- case 'solid':
14
- svgpath = svgsolid;
15
- viewBox = '0 0 24 24';
16
- break;
17
- default:
18
- svgpath = svgoutline;
19
- viewBox = '0 0 24 24';
20
- }
21
- export let ariaLabel = 'envelope';
22
- </script>
23
-
24
- <svg
25
- xmlns="http://www.w3.org/2000/svg"
26
- width={size}
27
- height={size}
28
- class={$$props.class}
29
- {...$$restProps}
30
- aria-label={ariaLabel}
31
- fill="none"
32
- {viewBox}
33
- stroke-width="2"
34
- on:click
35
- >
36
- {@html svgpath}
37
- </svg>
@@ -1,22 +0,0 @@
1
- import { SvelteComponentTyped } from "svelte";
2
- declare const __propDef: {
3
- props: {
4
- [x: string]: any;
5
- size?: string;
6
- color?: string;
7
- variation?: 'solid' | 'outline';
8
- ariaLabel?: string;
9
- };
10
- events: {
11
- click: MouseEvent;
12
- } & {
13
- [evt: string]: CustomEvent<any>;
14
- };
15
- slots: {};
16
- };
17
- export declare type EnvelopeProps = typeof __propDef.props;
18
- export declare type EnvelopeEvents = typeof __propDef.events;
19
- export declare type EnvelopeSlots = typeof __propDef.slots;
20
- export default class Envelope extends SvelteComponentTyped<EnvelopeProps, EnvelopeEvents, EnvelopeSlots> {
21
- }
22
- export {};