flowbite-svelte 0.37.2 → 0.37.3

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 (7) hide show
  1. package/dist/darkmode/DarkMode.svelte +14 -18
  2. package/dist/darkmode/DarkMode.svelte.d.ts +0 -1
  3. package/dist/darkmode/DarkMode.svelte.d.ts.map +1 -1
  4. package/dist/dropdowns/Dropdown.svelte +1 -1
  5. package/dist/utils/focusTrap.d.ts.map +1 -1
  6. package/dist/utils/focusTrap.js +2 -2
  7. package/package.json +17 -20
package/dist/darkmode/DarkMode.svelte CHANGED
@@ -1,7 +1,4 @@
1
- <script>import { onMount } from 'svelte';
2
- import classNames from 'classnames';
3
- // declare initialTheme as a prop with a default value of 'light'
4
- export let initialTheme = 'light';
1
+ <script>import classNames from 'classnames';
5
2
  export let btnClass = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5';
6
3
  export let size = 'md';
7
4
  const sizes = {
@@ -9,22 +6,21 @@ const sizes = {
9
6
  md: 'w-5 h-5',
10
7
  lg: 'w-6 h-6'
11
8
  };
12
- let toggleTheme;
13
- onMount(() => {
14
- if (localStorage.getItem('color-theme')) {
15
- initialTheme = localStorage.getItem('color-theme') || 'light';
16
- }
17
- localStorage.getItem('color-theme') === initialTheme ||
18
- (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
19
- ? window.document.documentElement.classList.add(initialTheme)
20
- : window.document.documentElement.classList.remove(initialTheme);
21
- toggleTheme = () => {
22
- const isDark = window.document.documentElement.classList.toggle('dark');
23
- localStorage.setItem('color-theme', isDark ? 'dark' : 'light');
24
- };
25
- });
9
+ const toggleTheme = () => {
10
+ const isDark = window.document.documentElement.classList.toggle('dark');
11
+ localStorage.setItem('color-theme', isDark ? 'dark' : 'light');
12
+ };
26
13
  </script>
27
14
 
15
+ <svelte:head>
16
+ <script>
17
+ localStorage.getItem('color-theme') === 'dark' ||
18
+ (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
19
+ ? window.document.documentElement.classList.add('dark')
20
+ : window.document.documentElement.classList.remove('dark');
21
+ </script>
22
+ </svelte:head>
23
+
28
24
  <button
29
25
  on:click={toggleTheme}
30
26
  aria-label="Dark mode"
package/dist/darkmode/DarkMode.svelte.d.ts CHANGED
@@ -2,7 +2,6 @@ import { SvelteComponentTyped } from "svelte";
2
2
  declare const __propDef: {
3
3
  props: {
4
4
  [x: string]: any;
5
- initialTheme?: string | undefined;
6
5
  btnClass?: string | undefined;
7
6
  size?: "sm" | "lg" | "md" | undefined;
8
7
  };
package/dist/darkmode/DarkMode.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DarkMode.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/darkmode/DarkMode.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA4DD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}
1
+ {"version":3,"file":"DarkMode.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/darkmode/DarkMode.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgDD,QAAA,MAAM,SAAS;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}
package/dist/dropdowns/Dropdown.svelte CHANGED
@@ -24,7 +24,7 @@ $: popoverClass = classNames('divide-y divide-gray-100 dark:divide-gray-600', fr
24
24
  <slot name="header" />
25
25
  </div>
26
26
  {/if}
27
- <ul class={$$props.class ?? { ulClass }}>
27
+ <ul class={$$props.class ?? ulClass}>
28
28
  <slot />
29
29
  </ul>
30
30
  {#if $$slots.footer}
package/dist/utils/focusTrap.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"focusTrap.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/focusTrap.js"],"names":[],"mappings":"AA0Cm4B,oJAA2G"}
1
+ {"version":3,"file":"focusTrap.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/focusTrap.js"],"names":[],"mappings":"AA0Ci4B,oJAA2G"}
package/dist/utils/focusTrap.js CHANGED
@@ -12,8 +12,6 @@ const selectorTabbable = `
12
12
 
13
13
  /** @type {import('svelte/action').Action} */
14
14
  export default function focusTrap(node) {
15
- const tabbable = Array.from(node.querySelectorAll(selectorTabbable));
16
-
17
15
  /** @type {(e:KeyboardEvent)=>void} */
18
16
  function handleFocusTrap(e) {
19
17
  let isTabPressed = e.key === 'Tab' || e.keyCode === 9;
@@ -22,6 +20,8 @@ export default function focusTrap(node) {
22
20
  return;
23
21
  }
24
22
 
23
+ const tabbable = Array.from(node.querySelectorAll(selectorTabbable));
24
+
25
25
  let index = tabbable.indexOf(document.activeElement ?? node);
26
26
  if (index === -1 && e.shiftKey) index = 0;
27
27
  index += tabbable.length + (e.shiftKey ? -1 : 1);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flowbite-svelte",
3
- "version": "0.37.2",
3
+ "version": "0.37.3",
4
4
  "description": "Flowbite components for Svelte",
5
5
  "main": "dist/index.js",
6
6
  "author": {
@@ -28,20 +28,14 @@
28
28
  "package:publish": "standard-version && git push --follow-tags origin main && npm run package && npm run add-exports && npm run write-package-json && npm publish",
29
29
  "gen:props": "createprops && npm run format"
30
30
  },
31
- "peerDependencies": {
32
- "@popperjs/core": "^2.11.6",
33
- "classnames": "^2.3.2",
34
- "flowbite": "^1.6.3",
35
- "svelte": "^3.55.1"
36
- },
37
31
  "devDependencies": {
38
- "@docsearch/js": "^3.3.5",
39
- "@playwright/test": "^1.34.0",
32
+ "@docsearch/js": "^3.4.0",
33
+ "@playwright/test": "^1.34.3",
40
34
  "@sveltejs/adapter-vercel": "^3.0.0",
41
- "@sveltejs/kit": "^1.18.0",
35
+ "@sveltejs/kit": "^1.20.0",
42
36
  "@sveltejs/package": "2.0.2",
43
- "@typescript-eslint/eslint-plugin": "^5.59.6",
44
- "@typescript-eslint/parser": "^5.59.6",
37
+ "@typescript-eslint/eslint-plugin": "^5.59.8",
38
+ "@typescript-eslint/parser": "^5.59.8",
45
39
  "autoprefixer": "^10.4.14",
46
40
  "createprops": "^0.5.5",
47
41
  "esbuild": "0.17.19",
@@ -50,22 +44,25 @@
50
44
  "eslint-plugin-svelte3": "^4.0.0",
51
45
  "mdsvex": "^0.10.6",
52
46
  "mdsvexamples": "^0.3.3",
53
- "postcss": "^8.4.23",
47
+ "postcss": "^8.4.24",
54
48
  "postcss-load-config": "^4.0.1",
55
49
  "prettier": "^2.8.8",
56
- "prettier-plugin-svelte": "^2.10.0",
50
+ "prettier-plugin-svelte": "^2.10.1",
57
51
  "prism-themes": "^1.9.0",
58
52
  "publint": "^0.1.12",
59
53
  "svelte": "^3.59.1",
60
- "svelte-check": "^3.3.2",
54
+ "svelte-check": "^3.4.3",
61
55
  "svelte-meta-tags": "^2.7.2",
62
- "svelte-preprocess": "^5.0.3",
63
- "svelte2tsx": "^0.6.14",
56
+ "svelte-preprocess": "^5.0.4",
57
+ "svelte2tsx": "^0.6.15",
64
58
  "tailwindcss": "^3.3.2",
65
59
  "tslib": "^2.5.2",
66
60
  "typescript": "^5.0.4",
67
- "vite": "^4.3.8",
68
- "vitest": "^0.31.1"
61
+ "vite": "^4.3.9",
62
+ "vitest": "^0.31.3"
63
+ },
64
+ "peerDependencies": {
65
+ "svelte": "^3.55.1 || ^4.0.0"
69
66
  },
70
67
  "type": "module",
71
68
  "keywords": [
@@ -111,7 +108,7 @@
111
108
  "url": "https://github.com/themesberg/flowbite-svelte"
112
109
  },
113
110
  "dependencies": {
114
- "@popperjs/core": "^2.11.7",
111
+ "@popperjs/core": "^2.11.8",
115
112
  "classnames": "^2.3.2",
116
113
  "flowbite": "^1.6.5"
117
114
  },