flowbite-svelte 0.22.27 → 0.22.28

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 (62) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/breadcrumbs/Breadcrumb.svelte +1 -1
  3. package/buttongroups/ButtonGroupItem.svelte +2 -2
  4. package/buttons/Button.svelte +1 -1
  5. package/drawers/Drawer.svelte +44 -0
  6. package/drawers/Drawer.svelte.d.ts +26 -0
  7. package/forms/FloatingLabelInput.svelte +1 -1
  8. package/forms/Input.svelte +1 -1
  9. package/forms/Select.svelte +1 -1
  10. package/forms/SimpleSearch.svelte +2 -2
  11. package/forms/Toggle.svelte +10 -1
  12. package/index.d.ts +3 -14
  13. package/index.js +4 -14
  14. package/modals/Modal.svelte.d.ts +1 -1
  15. package/navbar/NavDropdown.svelte +3 -3
  16. package/navbar/NavUl.svelte +0 -1
  17. package/package.json +2 -18
  18. package/paginations/Next.svelte +12 -2
  19. package/paginations/Pagination.svelte +29 -9
  20. package/paginations/Previous.svelte +12 -2
  21. package/paginations/TableData.svelte +3 -3
  22. package/progressbars/Progressbar.svelte +17 -28
  23. package/spinners/Spinner.svelte +1 -1
  24. package/tables/TableHeadCell.svelte +1 -1
  25. package/tabs/InteractiveTabHead.svelte +17 -2
  26. package/tabs/InteractiveTabs.svelte +16 -3
  27. package/tabs/UnderlineTabs.svelte +8 -1
  28. package/tooltips/Tooltip.svelte +23 -26
  29. package/types.d.ts +10 -0
  30. package/cards/CtaCard.svelte +0 -49
  31. package/cards/CtaCard.svelte.d.ts +0 -22
  32. package/cards/HorizontalCard.svelte +0 -23
  33. package/cards/HorizontalCard.svelte.d.ts +0 -27
  34. package/cards/InteractiveCard.svelte +0 -73
  35. package/cards/InteractiveCard.svelte.d.ts +0 -25
  36. package/cards/ListCard.svelte +0 -40
  37. package/cards/ListCard.svelte.d.ts +0 -20
  38. package/footer/LogoFooter.svelte +0 -34
  39. package/footer/LogoFooter.svelte.d.ts +0 -29
  40. package/footer/SimpleFooter.svelte +0 -22
  41. package/footer/SimpleFooter.svelte.d.ts +0 -24
  42. package/footer/SitemapFooter.svelte +0 -45
  43. package/footer/SitemapFooter.svelte.d.ts +0 -31
  44. package/footer/SocialMediaFooter.svelte +0 -63
  45. package/footer/SocialMediaFooter.svelte.d.ts +0 -39
  46. package/forms/SingleCheckbox.svelte +0 -18
  47. package/forms/SingleCheckbox.svelte.d.ts +0 -22
  48. package/modals/ExtraLargeModal.svelte +0 -182
  49. package/modals/ExtraLargeModal.svelte.d.ts +0 -29
  50. package/modals/LargeModal.svelte +0 -182
  51. package/modals/LargeModal.svelte.d.ts +0 -29
  52. package/modals/MediumModal.svelte +0 -185
  53. package/modals/MediumModal.svelte.d.ts +0 -29
  54. package/modals/ModalButton.svelte +0 -52
  55. package/modals/ModalButton.svelte.d.ts +0 -21
  56. package/modals/SignInModal.svelte +0 -102
  57. package/modals/SignInModal.svelte.d.ts +0 -26
  58. package/modals/SmallModal.svelte +0 -184
  59. package/modals/SmallModal.svelte.d.ts +0 -29
  60. package/modals/modalStores.js +0 -3
  61. package/navbar/DropdownNavbar.svelte +0 -95
  62. package/navbar/DropdownNavbar.svelte.d.ts +0 -31
@@ -1,6 +1,6 @@
1
1
  <script>import classNames from 'classnames';
2
2
  </script>
3
3
 
4
- <th {...$$props} class={classNames('px-6 py-3', $$props.class)}>
4
+ <th {...$$restProps} class={classNames('px-6 py-3', $$props.class)}>
5
5
  <slot />
6
6
  </th>
@@ -26,10 +26,25 @@ Header part of Interactive tab component. Use with TabContent.
26
26
  ```
27
27
  -->
28
28
  <div class="mb-4 border-b border-gray-200">
29
- <ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id={tabId} data-tabs-toggle="#myTabContent" role="tablist">
29
+ <ul
30
+ class="flex flex-wrap -mb-px text-sm font-medium text-center"
31
+ id={tabId}
32
+ data-tabs-toggle="#myTabContent"
33
+ role="tablist"
34
+ >
30
35
  {#each tabs as { name, id }}
31
36
  <li class="mr-2" role="presentation">
32
- <button on:click={handleClick(id)} class="inline-block py-4 px-4 text-sm font-medium text-center text-gray-500 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300" id="{name}-tab" data-tabs-target="#{name}" type="button" role="tab" class:active={activeTabValue === id} aria-controls={name} aria-selected="false">{name}</button>
37
+ <button
38
+ on:click={handleClick(id)}
39
+ class="inline-block py-4 px-4 text-sm font-medium text-center text-gray-500 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300"
40
+ id="{name}-tab"
41
+ data-tabs-target="#{name}"
42
+ type="button"
43
+ role="tab"
44
+ class:active={activeTabValue === id}
45
+ aria-controls={name}
46
+ aria-selected="false">{name}</button
47
+ >
33
48
  </li>
34
49
  {/each}
35
50
  </ul>
@@ -1,14 +1,22 @@
1
1
  <script>export let tabId = 'myTab';
2
2
  export let activeTabValue = 1;
3
- const handleClick = (tabValue) => () => (activeTabValue = tabValue);
4
3
  export let tabs;
4
+ const handleClick = (tabValue) => () => (activeTabValue = tabValue);
5
5
  </script>
6
6
 
7
7
  <div class="mb-4 border-b border-gray-200 dark:border-gray-700">
8
8
  <ul class="flex flex-wrap -mb-px" id={tabId} role="tablist">
9
9
  {#each tabs as { name, id }}
10
10
  <li class="mr-2" role="presentation">
11
- <button on:click={handleClick(id)} class="inline-block py-4 px-4 text-sm font-medium text-center text-gray-500 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300" id="{name}-tab" type="button" role="tab" class:active={activeTabValue === id} aria-controls={name}>{name}</button>
11
+ <button
12
+ on:click={handleClick(id)}
13
+ class="inline-block py-4 px-4 text-sm font-medium text-center text-gray-500 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300"
14
+ id="{name}-tab"
15
+ type="button"
16
+ role="tab"
17
+ class:active={activeTabValue === id}
18
+ aria-controls={name}>{name}</button
19
+ >
12
20
  </li>
13
21
  {/each}
14
22
  </ul>
@@ -16,7 +24,12 @@ export let tabs;
16
24
  <div id="{tabId}Content">
17
25
  {#each tabs as { name, content, id }}
18
26
  {#if activeTabValue === id}
19
- <div class="p-4 bg-gray-50 rounded-lg dark:bg-gray-800" id={name} role="tabpanel" aria-labelledby="{name}-tab">
27
+ <div
28
+ class="p-4 bg-gray-50 rounded-lg dark:bg-gray-800"
29
+ id={name}
30
+ role="tabpanel"
31
+ aria-labelledby="{name}-tab"
32
+ >
20
33
  {#if typeof content === 'string'}
21
34
  <p class="text-sm text-gray-500 dark:text-gray-400">
22
35
  {@html content}
@@ -6,7 +6,14 @@ export let tabs;
6
6
  <ul class="flex flex-wrap -mb-px">
7
7
  {#each tabs as { name, active, href, rel }}
8
8
  <li class="mr-2">
9
- <a {href} {rel} class={active ? 'inline-block p-4 text-blue-600 rounded-t-lg border-b-2 border-blue-600 active dark:text-blue-500 dark:border-blue-500' : ' inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 '}>{name}</a>
9
+ <a
10
+ {href}
11
+ {rel}
12
+ class={active
13
+ ? 'inline-block p-4 text-blue-600 rounded-t-lg border-b-2 border-blue-600 active dark:text-blue-500 dark:border-blue-500'
14
+ : ' inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 '}
15
+ >{name}</a
16
+ >
10
17
  </li>
11
18
  {/each}
12
19
  </ul>
@@ -1,7 +1,7 @@
1
- <script>import classNames from 'classnames';
1
+ <script>import { onMount } from 'svelte';
2
+ import classNames from 'classnames';
2
3
  import { clickOutside } from '../utils/clickOutside';
3
4
  import { computePosition, flip, shift, offset, autoPlacement, arrow as arrowFloat } from '@floating-ui/dom';
4
- import { onDestroy } from 'svelte';
5
5
  export let placement = 'top';
6
6
  export let trigger = 'hover';
7
7
  export let style = 'dark';
@@ -23,25 +23,26 @@ const floatingArrowPlacement = ({ placement }) => {
23
23
  left: 'right'
24
24
  }[placement.split('-')[0]];
25
25
  };
26
- const floatingMiddleware = ({ arrowRef, placement }) => {
27
- const middleware = [];
28
- middleware.push(offset(8));
29
- middleware.push(placement === 'auto' ? autoPlacement() : flip());
30
- middleware.push(shift({ padding: 8 }));
31
- if (arrowRef) {
32
- middleware.push(arrowFloat({ element: arrowRef }));
33
- }
34
- return middleware;
35
- };
36
26
  let placementData;
37
27
  let tooltipRef, triggerRef, arrowRef;
38
- const updatePosition = () => computePosition(triggerRef, tooltipRef, {
39
- middleware: floatingMiddleware({ arrowRef, placement }),
40
- placement: floatingPlacement({ placement })
41
- }).then((data) => (placementData = data));
42
28
  let attachedScroll = false;
43
- $: tooltipRef && open && updatePosition();
44
- $: {
29
+ onMount(async () => {
30
+ // dynamic import, to access 'window', since ace use it directly,
31
+ const floatingMiddleware = ({ arrowRef, placement }) => {
32
+ const middleware = [];
33
+ middleware.push(offset(8));
34
+ middleware.push(placement === 'auto' ? autoPlacement() : flip());
35
+ middleware.push(shift({ padding: 8 }));
36
+ if (arrowRef) {
37
+ middleware.push(arrowFloat({ element: arrowRef }));
38
+ }
39
+ return middleware;
40
+ };
41
+ const updatePosition = () => computePosition(triggerRef, tooltipRef, {
42
+ middleware: floatingMiddleware({ arrowRef, placement }),
43
+ placement: floatingPlacement({ placement })
44
+ }).then((data) => (placementData = data));
45
+ tooltipRef && open && updatePosition();
45
46
  if (open && !attachedScroll) {
46
47
  attachedScroll = true;
47
48
  window.addEventListener('scroll', updatePosition, true);
@@ -50,17 +51,13 @@ $: {
50
51
  attachedScroll = false;
51
52
  window.removeEventListener('scroll', updatePosition, true);
52
53
  }
53
- }
54
- onDestroy(() => {
55
- if (attachedScroll) {
56
- attachedScroll = false;
57
- window.removeEventListener('scroll', updatePosition, true);
58
- }
54
+ // console.log('updatePosition', updatePosition());
55
+ // console.log('floatingMiddleware', floatingMiddleware({ arrowRef, placement }));
59
56
  });
57
+ // console.log('placement', placement);
58
+ // console.log('floatingPlacement', floatingPlacement({ placement }));
60
59
  </script>
61
60
 
62
- <svelte:window on:resize={() => open && updatePosition()} />
63
-
64
61
  <div
65
62
  use:clickOutside={() => {
66
63
  if (open) {
package/types.d.ts CHANGED
@@ -66,6 +66,16 @@ export interface DotType {
66
66
  top?: boolean;
67
67
  color?: string;
68
68
  }
69
+ export interface drawerTransitionParamTypes {
70
+ amount?: number;
71
+ delay?: number;
72
+ duration?: number;
73
+ easing?: (t: number) => number;
74
+ opacity?: number;
75
+ x?: number;
76
+ y?: number;
77
+ }
78
+ export declare type drawerTransitionTypes = 'fade' | 'fly' | 'slide' | 'blur' | 'in:fly' | 'out:fly' | 'in:slide' | 'out:slide' | 'in:fade' | 'out:fade' | 'in:blur' | 'out:blur' | undefined;
69
79
  export declare type DropdownColorType = 'blue' | 'blue-outline' | 'dark' | 'dark-outline' | 'light' | 'green' | 'green-outline' | 'red' | 'red-outline' | 'yellow' | 'yellow-outline' | 'purple' | 'purple-outline';
70
80
  export interface DropdownType {
71
81
  name: string;
@@ -1,49 +0,0 @@
1
- <script>import Button from '../buttons/Button.svelte';
2
- export let title = 'Work fast from anywhere';
3
- export let headColor = 'gray';
4
- export let btns;
5
- export let divClass = 'p-4 w-full text-center bg-white rounded-lg border shadow-md sm:p-8 dark:bg-gray-800 dark:border-gray-700';
6
- let headClass = 'mb-2 text-3xl font-bold dark:text-white ';
7
- if (headColor === 'blue') {
8
- headClass += 'text-blue-900';
9
- }
10
- else if (headColor === 'gray') {
11
- headClass += 'text-gray-900';
12
- }
13
- else if (headColor === 'red') {
14
- headClass += 'text-red-900';
15
- }
16
- else if (headColor === 'yellow') {
17
- headClass += 'text-yellow-900';
18
- }
19
- else if (headColor === 'green') {
20
- headClass += 'text-green-900';
21
- }
22
- else if (headColor === 'indigo') {
23
- headClass += 'text-indigo-900';
24
- }
25
- else if (headColor === 'purple') {
26
- headClass += 'text-purple-900';
27
- }
28
- else if (headColor === 'pink') {
29
- headClass += 'text-pink-900';
30
- }
31
- </script>
32
-
33
- <div class={divClass}>
34
- <h3 class={headClass}>
35
- {title}
36
- </h3>
37
- <p class="mb-5 text-base text-gray-500 sm:text-lg dark:text-gray-400">
38
- <slot />
39
- </p>
40
- <div class="justify-center items-center space-y-4 sm:flex sm:space-y-0 sm:space-x-4">
41
- {#if btns}
42
- {#each btns as { name, textSize, type, href, rel, rounded }}
43
- <a {href} {rel}>
44
- <Button {rounded} {type} {textSize}>{name}</Button>
45
- </a>
46
- {/each}
47
- {/if}
48
- </div>
49
- </div>
@@ -1,22 +0,0 @@
1
- import { SvelteComponentTyped } from "svelte";
2
- import type { CardButtonType, Colors } from '../types';
3
- declare const __propDef: {
4
- props: {
5
- title?: string;
6
- headColor?: Colors;
7
- btns: CardButtonType[];
8
- divClass?: string;
9
- };
10
- events: {
11
- [evt: string]: CustomEvent<any>;
12
- };
13
- slots: {
14
- default: {};
15
- };
16
- };
17
- export declare type CtaCardProps = typeof __propDef.props;
18
- export declare type CtaCardEvents = typeof __propDef.events;
19
- export declare type CtaCardSlots = typeof __propDef.slots;
20
- export default class CtaCard extends SvelteComponentTyped<CtaCardProps, CtaCardEvents, CtaCardSlots> {
21
- }
22
- export {};
@@ -1,23 +0,0 @@
1
- <script>export let link = '';
2
- export let rel = '';
3
- export let img = '/images/image-4.jpeg';
4
- export let alt = '';
5
- export let header = 'Lorem ipsum dolor sit ametit.';
6
- export let linkClass = 'flex flex-col items-center bg-white rounded-lg border shadow-md md:flex-row md:max-w-xl hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700';
7
- export let imgClass = 'object-cover w-full h-96 rounded-t-lg md:h-auto md:w-48 md:rounded-none md:rounded-l-lg';
8
- export let textClass = 'flex flex-col justify-between p-4 leading-normal';
9
- export let h3Class = 'mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white';
10
- export let pClass = 'mb-3 font-normal text-gray-700 dark:text-gray-400';
11
- </script>
12
-
13
- <a href={link} {rel} class={linkClass}>
14
- <img class={imgClass} src={img} {alt} />
15
- <div class={textClass}>
16
- <h3 class={h3Class}>
17
- {header}
18
- </h3>
19
- <p class={pClass}>
20
- <slot />
21
- </p>
22
- </div>
23
- </a>
@@ -1,27 +0,0 @@
1
- import { SvelteComponentTyped } from "svelte";
2
- declare const __propDef: {
3
- props: {
4
- link?: string;
5
- rel?: string;
6
- img?: string;
7
- alt?: string;
8
- header?: string;
9
- linkClass?: string;
10
- imgClass?: string;
11
- textClass?: string;
12
- h3Class?: string;
13
- pClass?: string;
14
- };
15
- events: {
16
- [evt: string]: CustomEvent<any>;
17
- };
18
- slots: {
19
- default: {};
20
- };
21
- };
22
- export declare type HorizontalCardProps = typeof __propDef.props;
23
- export declare type HorizontalCardEvents = typeof __propDef.events;
24
- export declare type HorizontalCardSlots = typeof __propDef.slots;
25
- export default class HorizontalCard extends SvelteComponentTyped<HorizontalCardProps, HorizontalCardEvents, HorizontalCardSlots> {
26
- }
27
- export {};
@@ -1,73 +0,0 @@
1
- <script>let isOpen = true;
2
- const toggleDropdown = () => {
3
- isOpen = !isOpen;
4
- };
5
- export let dropdownLinks;
6
- export let img;
7
- export let header = 'Lorem ipsum';
8
- export let content = 'Proin efficitur purus felis.';
9
- export let buttonColor = 'blue';
10
- export let link1;
11
- export let link2;
12
- export let headerClass = 'mb-1 text-xl font-medium text-gray-900 dark:text-white';
13
- export let divClass = 'max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700';
14
- let linkClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white focus:ring-4 ';
15
- if (buttonColor === 'gray') {
16
- linkClass += 'bg-gray-700 rounded-lg hover:bg-gray-800 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
17
- }
18
- else if (buttonColor === 'red') {
19
- linkClass += 'bg-red-700 rounded-lg hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
20
- }
21
- else if (buttonColor === 'yellow') {
22
- linkClass += 'bg-yellow-700 rounded-lg hover:bg-yellow-800 focus:ring-yellow-300 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
23
- }
24
- else if (buttonColor === 'green') {
25
- linkClass += 'bg-green-700 rounded-lg hover:bg-green-800 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
26
- }
27
- else if (buttonColor === 'indigo') {
28
- linkClass += 'bg-indigo-700 rounded-lg hover:bg-indigo-800 focus:ring-indigo-300 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
29
- }
30
- else if (buttonColor === 'purple') {
31
- linkClass += 'bg-purple-700 rounded-lg hover:bg-purple-800 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
32
- }
33
- else if (buttonColor === 'pink') {
34
- linkClass += 'bg-pink-700 rounded-lg hover:bg-pink-800 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
35
- }
36
- else {
37
- linkClass += 'bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
38
- }
39
- </script>
40
-
41
- <div class={divClass}>
42
- <div class="flex justify-end px-4 pt-4 relative">
43
- <button id="dropdownButton" on:click={toggleDropdown} class="hidden sm:inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:outline-none focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-1.5" type="button">
44
- <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" /></svg>
45
- </button>
46
-
47
- <div id="dropdown" class:hidden={isOpen} class:block={!isOpen} class="hidden z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 absolute top-16 -right-16">
48
- <ul class="py-1" aria-labelledby="dropdownButton">
49
- {#each dropdownLinks as { href, name, rel }}
50
- <li>
51
- <a {href} {rel} class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">{name}</a>
52
- </li>
53
- {/each}
54
- </ul>
55
- </div>
56
- </div>
57
-
58
- <div class="flex flex-col items-center pb-10">
59
- <img class="mb-3 w-24 h-24 rounded-full shadow-lg" src={img.src} alt={img.alt} />
60
- <h3 class={headerClass}>
61
- {header}
62
- </h3>
63
- <span class="text-sm text-gray-500 dark:text-gray-400">{content}</span>
64
- <div class="flex mt-4 space-x-3 lg:mt-6">
65
- {#if link1.href}
66
- <a href={link1.href} rel={link1.rel} class={linkClass}>{link1.name}</a>
67
- {/if}
68
- {#if link2.href}
69
- <a href={link2.href} rel={link2.rel} 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">{link2.name}</a>
70
- {/if}
71
- </div>
72
- </div>
73
- </div>
@@ -1,25 +0,0 @@
1
- import { SvelteComponentTyped } from "svelte";
2
- import type { LinkType, ImgType, Colors } from '../types';
3
- declare const __propDef: {
4
- props: {
5
- dropdownLinks: LinkType[];
6
- img: ImgType;
7
- header?: string;
8
- content?: string;
9
- buttonColor?: Colors;
10
- link1: LinkType;
11
- link2: LinkType;
12
- headerClass?: string;
13
- divClass?: string;
14
- };
15
- events: {
16
- [evt: string]: CustomEvent<any>;
17
- };
18
- slots: {};
19
- };
20
- export declare type InteractiveCardProps = typeof __propDef.props;
21
- export declare type InteractiveCardEvents = typeof __propDef.events;
22
- export declare type InteractiveCardSlots = typeof __propDef.slots;
23
- export default class InteractiveCard extends SvelteComponentTyped<InteractiveCardProps, InteractiveCardEvents, InteractiveCardSlots> {
24
- }
25
- export {};
@@ -1,40 +0,0 @@
1
- <script>export let lists;
2
- export let title = 'Latest Customers';
3
- export let action;
4
- export let divClass = 'p-4 max-w-md bg-white rounded-lg border shadow-md sm:p-8 dark:bg-gray-800 dark:border-gray-700';
5
- </script>
6
-
7
- <div class={divClass}>
8
- <div class="flex justify-between items-center mb-4">
9
- <h3 class="text-xl font-bold leading-none text-gray-900 dark:text-white">
10
- {title}
11
- </h3>
12
- <a href={action.href} rel={action.rel} class="text-sm font-medium text-blue-600 hover:underline dark:text-blue-500">
13
- {action.name}
14
- </a>
15
- </div>
16
- <div class="flow-root">
17
- <ul class="divide-y divide-gray-200 dark:divide-gray-700">
18
- {#each lists as { img, field1, field2, field3 }}
19
- <li class="py-3 sm:py-4">
20
- <div class="flex items-center space-x-4">
21
- <div class="flex-shrink-0">
22
- <img class="w-8 h-8 rounded-full" src={img.src} alt={img.alt} />
23
- </div>
24
- <div class="flex-1 min-w-0">
25
- <p class="text-sm font-medium text-gray-900 truncate dark:text-white">
26
- {field1}
27
- </p>
28
- <p class="text-sm text-gray-500 truncate dark:text-gray-400">
29
- {field2}
30
- </p>
31
- </div>
32
- <div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">
33
- {field3}
34
- </div>
35
- </div>
36
- </li>
37
- {/each}
38
- </ul>
39
- </div>
40
- </div>
@@ -1,20 +0,0 @@
1
- import { SvelteComponentTyped } from "svelte";
2
- import type { LinkType, ListCardType } from '../types';
3
- declare const __propDef: {
4
- props: {
5
- lists: ListCardType[];
6
- title?: string;
7
- action: LinkType;
8
- divClass?: string;
9
- };
10
- events: {
11
- [evt: string]: CustomEvent<any>;
12
- };
13
- slots: {};
14
- };
15
- export declare type ListCardProps = typeof __propDef.props;
16
- export declare type ListCardEvents = typeof __propDef.events;
17
- export declare type ListCardSlots = typeof __propDef.slots;
18
- export default class ListCard extends SvelteComponentTyped<ListCardProps, ListCardEvents, ListCardSlots> {
19
- }
20
- export {};
@@ -1,34 +0,0 @@
1
- <script>import classNames from 'classnames';
2
- export let site;
3
- export let links;
4
- export let divClass = 'sm:flex sm:items-center sm:justify-between';
5
- export let siteNameClass = 'self-center text-2xl font-semibold whitespace-nowrap dark:text-white';
6
- export let ulClass = 'flex flex-wrap items-center mb-6 text-sm text-gray-500 sm:mb-0 dark:text-gray-400';
7
- export let aClass = 'mr-4 hover:underline md:mr-6';
8
- export let siteNameLinkClass = 'flex items-center mb-4 sm:mb-0';
9
- export let imgClass = 'mr-3 h-8';
10
- export let hrClass = 'my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8';
11
- export let copyRightSpanClass = 'block text-sm text-gray-500 sm:text-center dark:text-gray-400';
12
- export let copyRightLinkClass = 'hover:underline';
13
- export let copyrightYear = '© 2022';
14
- export let allRightsReserved = 'All Rights Reserved.';
15
- </script>
16
-
17
- <div class={divClass}>
18
- <a href={site.href} class={siteNameLinkClass}>
19
- <img src={site.img} class={imgClass} alt={site.name} />
20
- <span class={siteNameClass}>{site.name}</span>
21
- </a>
22
- <ul class={ulClass}>
23
- {#each links as { name, href, rel }}
24
- <li>
25
- <a {href} {rel} class={aClass}>{name}</a>
26
- </li>
27
- {/each}
28
- </ul>
29
- </div>
30
- <hr class={hrClass} />
31
- <span class={copyRightSpanClass}
32
- >{copyrightYear}
33
- <a href={site.href} class={copyRightLinkClass}>{site.name}</a>. {allRightsReserved}
34
- </span>
@@ -1,29 +0,0 @@
1
- import { SvelteComponentTyped } from "svelte";
2
- import type { LinkType, SiteType } from '../types';
3
- declare const __propDef: {
4
- props: {
5
- site: SiteType;
6
- links: LinkType[];
7
- divClass?: string;
8
- siteNameClass?: string;
9
- ulClass?: string;
10
- aClass?: string;
11
- siteNameLinkClass?: string;
12
- imgClass?: string;
13
- hrClass?: string;
14
- copyRightSpanClass?: string;
15
- copyRightLinkClass?: string;
16
- copyrightYear?: string;
17
- allRightsReserved?: string;
18
- };
19
- events: {
20
- [evt: string]: CustomEvent<any>;
21
- };
22
- slots: {};
23
- };
24
- export declare type LogoFooterProps = typeof __propDef.props;
25
- export declare type LogoFooterEvents = typeof __propDef.events;
26
- export declare type LogoFooterSlots = typeof __propDef.slots;
27
- export default class LogoFooter extends SvelteComponentTyped<LogoFooterProps, LogoFooterEvents, LogoFooterSlots> {
28
- }
29
- export {};
@@ -1,22 +0,0 @@
1
- <script>import classNames from 'classnames';
2
- export let site;
3
- export let links;
4
- export let siteNameClass = 'text-sm text-gray-500 sm:text-center dark:text-gray-400';
5
- export let ulClass = 'flex flex-wrap items-center mt-3 sm:mt-0';
6
- export let aClass = 'mr-4 text-sm text-gray-500 hover:underline md:mr-6 dark:text-gray-400';
7
- export let siteNameLinkClass = 'hover:underline';
8
- export let copyrightYear = '© 2022';
9
- export let allRightsReserved = 'All Rights Reserved.';
10
- </script>
11
-
12
- <span class={siteNameClass}
13
- >{copyrightYear}
14
- <a href={site.href} class={siteNameLinkClass} target="_blank">{site.name}</a>. {allRightsReserved}
15
- </span>
16
- <ul class={ulClass}>
17
- {#each links as { name, href, rel }}
18
- <li>
19
- <a {href} {rel} class={aClass}>{name}</a>
20
- </li>
21
- {/each}
22
- </ul>
@@ -1,24 +0,0 @@
1
- import { SvelteComponentTyped } from "svelte";
2
- import type { LinkType, SiteType } from '../types';
3
- declare const __propDef: {
4
- props: {
5
- site: SiteType;
6
- links: LinkType[];
7
- siteNameClass?: string;
8
- ulClass?: string;
9
- aClass?: string;
10
- siteNameLinkClass?: string;
11
- copyrightYear?: string;
12
- allRightsReserved?: string;
13
- };
14
- events: {
15
- [evt: string]: CustomEvent<any>;
16
- };
17
- slots: {};
18
- };
19
- export declare type SimpleFooterProps = typeof __propDef.props;
20
- export declare type SimpleFooterEvents = typeof __propDef.events;
21
- export declare type SimpleFooterSlots = typeof __propDef.slots;
22
- export default class SimpleFooter extends SvelteComponentTyped<SimpleFooterProps, SimpleFooterEvents, SimpleFooterSlots> {
23
- }
24
- export {};
@@ -1,45 +0,0 @@
1
- <script>export let site;
2
- export let links;
3
- export let socialMedia;
4
- export let linksClass = 'grid grid-cols-2 gap-8 py-8 px-6 md:grid-cols-4';
5
- export let parentClass = 'mb-6 text-sm font-semibold dark:text-gray-400 uppercase';
6
- export let ulClass = 'text-gray-900 dark:text-gray-300';
7
- export let liClass = 'mb-4';
8
- export let linkClass = 'hover:underline';
9
- export let copyrightDivClass = 'py-6 px-4 text-gray-900 dark:bg-gray-700 md:flex md:items-center md:justify-between';
10
- export let copyrightClass = 'text-sm text-gray-900 dark:text-gray-300 sm:text-center';
11
- export let socialMediaDivClass = 'flex mt-4 space-x-6 sm:justify-center md:mt-0';
12
- export let socialMediaLinkClass = 'text-gray-900 dark:text-gray-400 hover:text-gray-300 dark:hover:text-white';
13
- export let iconClass = 'h-5 w-5 mr-2';
14
- export let copyrightYear = '© 2022';
15
- export let allRightsReserved = 'All Rights Reserved.';
16
- </script>
17
-
18
- <div class={linksClass}>
19
- {#each links as { parent, children }}
20
- <div>
21
- <h2 class={parentClass}>
22
- {parent}
23
- </h2>
24
- <ul class={ulClass}>
25
- {#each children as { name, href }}
26
- <li class={liClass}>
27
- <a {href} class={linkClass}>{name}</a>
28
- </li>
29
- {/each}
30
- </ul>
31
- </div>
32
- {/each}
33
- </div>
34
- <div class={copyrightDivClass}>
35
- <span class={copyrightClass}
36
- >{copyrightYear} <a href={site.href}>{site.name}</a>. {allRightsReserved}
37
- </span>
38
- <div class={socialMediaDivClass}>
39
- {#each socialMedia as { href, icon }}
40
- <a {href} class={socialMediaLinkClass}>
41
- <svelte:component this={icon} className={iconClass} />
42
- </a>
43
- {/each}
44
- </div>
45
- </div>
@@ -1,31 +0,0 @@
1
- import { SvelteComponentTyped } from "svelte";
2
- import type { SiteType, SocialMediaType, SocialMediaLinkType } from '../types';
3
- declare const __propDef: {
4
- props: {
5
- site: SiteType;
6
- links: SocialMediaLinkType[];
7
- socialMedia: SocialMediaType[];
8
- linksClass?: string;
9
- parentClass?: string;
10
- ulClass?: string;
11
- liClass?: string;
12
- linkClass?: string;
13
- copyrightDivClass?: string;
14
- copyrightClass?: string;
15
- socialMediaDivClass?: string;
16
- socialMediaLinkClass?: string;
17
- iconClass?: string;
18
- copyrightYear?: string;
19
- allRightsReserved?: string;
20
- };
21
- events: {
22
- [evt: string]: CustomEvent<any>;
23
- };
24
- slots: {};
25
- };
26
- export declare type SitemapFooterProps = typeof __propDef.props;
27
- export declare type SitemapFooterEvents = typeof __propDef.events;
28
- export declare type SitemapFooterSlots = typeof __propDef.slots;
29
- export default class SitemapFooter extends SvelteComponentTyped<SitemapFooterProps, SitemapFooterEvents, SitemapFooterSlots> {
30
- }
31
- export {};