flowbite-svelte 0.22.30 → 0.23.0

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 (9) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/README.md +6 -0
  3. package/datepicker/Calender.svelte +12 -0
  4. package/datepicker/Calender.svelte.d.ts +19 -0
  5. package/datepicker/Datepicker.svelte +71 -0
  6. package/datepicker/Datepicker.svelte.d.ts +25 -0
  7. package/index.d.ts +1 -0
  8. package/index.js +2 -0
  9. package/package.json +3 -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.23.0](https://github.com/themesberg/flowbite-svelte/compare/v0.22.30...v0.23.0) (2022-08-04)
6
+
7
+
8
+ ### ⚠ BREAKING CHANGES
9
+
10
+ * add datepicker
11
+
12
+ ### Features
13
+
14
+ * add datepicker ([a8b70e6](https://github.com/themesberg/flowbite-svelte/commit/a8b70e67b61e4e038520cc66238861e368716e60))
15
+ * add datepicker ([32f8889](https://github.com/themesberg/flowbite-svelte/commit/32f88899256bed9effe6b23b4d24cd8380ce2aff))
16
+ * add datepicker examples ([590ec66](https://github.com/themesberg/flowbite-svelte/commit/590ec660f27e43b18c588d44c0899aa16a3fc870))
17
+ * add datepicker examples ([68e2462](https://github.com/themesberg/flowbite-svelte/commit/68e2462567838816ef116c3ed5b389e8de52f643))
18
+ * working on datepicker ([4fedccf](https://github.com/themesberg/flowbite-svelte/commit/4fedccfc3f04308b53712cc87849098a7e502d2a))
19
+
5
20
  ### [0.22.30](https://github.com/themesberg/flowbite-svelte/compare/v0.22.29...v0.22.30) (2022-08-03)
6
21
 
7
22
 
package/README.md CHANGED
@@ -302,6 +302,7 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
302
302
  </tr>
303
303
  <tr>
304
304
  <td width="33.3333%">Floating Label</td>
305
+ <td width="33.3333%">Datepicker</td>
305
306
  </tr>
306
307
  <tr>
307
308
  <td width="33.3333%">
@@ -309,6 +310,11 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
309
310
  <img alt="Tailwind CSS Floating Label" src="https://flowbite.s3.amazonaws.com/github/floating-label.jpg">
310
311
  </a>
311
312
  </td>
313
+ <td width="33.3333%">
314
+ <a href="https://flowbite-svelte.com/datepicker/">
315
+ <img alt="Tailwind CSS Datepicker" src="https://flowbite.s3.amazonaws.com/github/datepicker.jpg">
316
+ </a>
317
+ </td>
312
318
  </tr>
313
319
  </table>
314
320
 
package/datepicker/Calender.svelte ADDED
@@ -0,0 +1,12 @@
1
+ <svg
2
+ aria-hidden="true"
3
+ class="w-5 h-5 text-gray-500 dark:text-gray-400"
4
+ fill="currentColor"
5
+ viewBox="0 0 20 20"
6
+ xmlns="http://www.w3.org/2000/svg"
7
+ ><path
8
+ fill-rule="evenodd"
9
+ d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
10
+ clip-rule="evenodd"
11
+ /></svg
12
+ >
package/datepicker/Calender.svelte.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ /** @typedef {typeof __propDef.props} CalenderProps */
2
+ /** @typedef {typeof __propDef.events} CalenderEvents */
3
+ /** @typedef {typeof __propDef.slots} CalenderSlots */
4
+ export default class Calender extends SvelteComponentTyped<{}, {
5
+ [evt: string]: CustomEvent<any>;
6
+ }, {}> {
7
+ }
8
+ export type CalenderProps = typeof __propDef.props;
9
+ export type CalenderEvents = typeof __propDef.events;
10
+ export type CalenderSlots = typeof __propDef.slots;
11
+ import { SvelteComponentTyped } from "svelte";
12
+ declare const __propDef: {
13
+ props: {};
14
+ events: {
15
+ [evt: string]: CustomEvent<any>;
16
+ };
17
+ slots: {};
18
+ };
19
+ export {};
package/datepicker/Datepicker.svelte ADDED
@@ -0,0 +1,71 @@
1
+ <script>// import { onMount } from 'svelte';
2
+ import Calendar from './Calender.svelte';
3
+ export let range = false;
4
+ // autoHide not working
5
+ // export let autoHide: boolean = false;
6
+ export let datepickerButtons = false;
7
+ export let datepickerFormat = 'mm/dd/yyyy';
8
+ export let datepickerOrientation = 'bottom';
9
+ export let datepickerTitle = 'Flowbite datepicker';
10
+ export let attribute = '';
11
+ export let inputClass = 'bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
12
+ $: setAttribute = (node, params) => {
13
+ node.setAttribute(params, '');
14
+ };
15
+ </script>
16
+
17
+ <svelte:head>
18
+ <link rel="stylesheet" href="https://unpkg.com/flowbite@1.5.1/dist/flowbite.min.css" />
19
+ <script src="https://unpkg.com/flowbite@1.5.1/dist/datepicker.js"></script>
20
+ </svelte:head>
21
+
22
+ {#if range}
23
+ <div date-rangepicker class="flex items-center">
24
+ <div class="relative">
25
+ <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
26
+ <Calendar />
27
+ </div>
28
+ <input name="start" type="text" class={inputClass} placeholder="Select date start" />
29
+ </div>
30
+ <span class="mx-4 text-gray-500">to</span>
31
+ <div class="relative">
32
+ <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
33
+ <Calendar />
34
+ </div>
35
+ <input name="end" type="text" class={inputClass} placeholder="Select date end" />
36
+ </div>
37
+ </div>
38
+ {:else}
39
+ <div class="relative">
40
+ <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
41
+ <Calendar />
42
+ </div>
43
+ {#if datepickerButtons}
44
+ <input
45
+ {...$$restProps}
46
+ datepicker
47
+ datepicker-buttons
48
+ datepicker-format={datepickerFormat}
49
+ datepicker-orientation={datepickerOrientation}
50
+ datepicker-title={datepickerTitle}
51
+ use:setAttribute={attribute}
52
+ type="text"
53
+ class={inputClass}
54
+ placeholder="Select date"
55
+ />
56
+ {:else}
57
+ <input
58
+ {...$$restProps}
59
+ datepicker
60
+ datepicker-format={datepickerFormat}
61
+ datepicker-orientation={datepickerOrientation}
62
+ datepicker-title={datepickerTitle}
63
+ use:setAttribute={attribute}
64
+ type="text"
65
+ class={inputClass}
66
+ placeholder="Select date"
67
+ />
68
+ {/if}
69
+ <slot />
70
+ </div>
71
+ {/if}
package/datepicker/Datepicker.svelte.d.ts ADDED
@@ -0,0 +1,25 @@
1
+ import { SvelteComponentTyped } from "svelte";
2
+ declare const __propDef: {
3
+ props: {
4
+ [x: string]: any;
5
+ range?: boolean;
6
+ datepickerButtons?: boolean;
7
+ datepickerFormat?: string;
8
+ datepickerOrientation?: string;
9
+ datepickerTitle?: string;
10
+ attribute?: string;
11
+ inputClass?: string;
12
+ };
13
+ events: {
14
+ [evt: string]: CustomEvent<any>;
15
+ };
16
+ slots: {
17
+ default: {};
18
+ };
19
+ };
20
+ export declare type DatepickerProps = typeof __propDef.props;
21
+ export declare type DatepickerEvents = typeof __propDef.events;
22
+ export declare type DatepickerSlots = typeof __propDef.slots;
23
+ export default class Datepicker extends SvelteComponentTyped<DatepickerProps, DatepickerEvents, DatepickerSlots> {
24
+ }
25
+ export {};
package/index.d.ts CHANGED
@@ -14,6 +14,7 @@ export { default as SignInCard } from './cards/SignInCard.svelte';
14
14
  export { default as Carousel } from './carousels/Carousel.svelte';
15
15
  export { default as CarouselTransition } from './carousels/CarouselTransition.svelte';
16
16
  export { default as DarkMode } from './darkmode/DarkMode.svelte';
17
+ export { default as Datepicker } from './datepicker/Datepicker.svelte';
17
18
  export { default as Drawer } from './drawers/Drawer.svelte';
18
19
  export { default as Dropdown } from './dropdowns/Dropdown.svelte';
19
20
  export { default as DropdownDivider } from './dropdowns/DropdownDivider.svelte';
package/index.js CHANGED
@@ -24,6 +24,8 @@ export { default as Carousel } from './carousels/Carousel.svelte';
24
24
  export { default as CarouselTransition } from './carousels/CarouselTransition.svelte';
25
25
  // Dark mode
26
26
  export { default as DarkMode } from './darkmode/DarkMode.svelte';
27
+ // Datepicker
28
+ export { default as Datepicker } from './datepicker/Datepicker.svelte';
27
29
  // Drawer
28
30
  export { default as Drawer } from './drawers/Drawer.svelte';
29
31
  // Dropdown
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flowbite-svelte",
3
- "version": "0.22.30",
3
+ "version": "0.23.0",
4
4
  "description": "Flowbite components for Svelte",
5
5
  "main": "index.js",
6
6
  "author": {
@@ -119,6 +119,8 @@
119
119
  "./carousels/Slide.svelte": "./carousels/Slide.svelte",
120
120
  "./carousels/Thumbnail.svelte": "./carousels/Thumbnail.svelte",
121
121
  "./darkmode/DarkMode.svelte": "./darkmode/DarkMode.svelte",
122
+ "./datepicker/Calender.svelte": "./datepicker/Calender.svelte",
123
+ "./datepicker/Datepicker.svelte": "./datepicker/Datepicker.svelte",
122
124
  "./drawers/Drawer.svelte": "./drawers/Drawer.svelte",
123
125
  "./dropdowns/Dropdown.svelte": "./dropdowns/Dropdown.svelte",
124
126
  "./dropdowns/DropdownDivider.svelte": "./dropdowns/DropdownDivider.svelte",