flowbite-svelte 0.27.17 → 0.28.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 (6) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/darkmode/DarkMode.svelte +21 -11
  3. package/darkmode/DarkMode.svelte.d.ts +5 -1
  4. package/forms/Checkbox.svelte +1 -1
  5. package/forms/FloatingLabelInput.svelte +9 -3
  6. package/package.json +18 -18
package/CHANGELOG.md CHANGED
@@ -2,6 +2,20 @@
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.28.0](https://github.com/themesberg/flowbite-svelte/compare/v0.27.17...v0.28.0) (2022-11-20)
6
+
7
+
8
+ ### Features
9
+
10
+ * enhance DarkMode ([#437](https://github.com/themesberg/flowbite-svelte/issues/437)) ([9afd3e1](https://github.com/themesberg/flowbite-svelte/commit/9afd3e11bec5bc4416537d7d371f970dd414a394))
11
+
12
+
13
+ ### Bug Fixes
14
+
15
+ * checkbox initial checked ([#434](https://github.com/themesberg/flowbite-svelte/issues/434)) ([43663cf](https://github.com/themesberg/flowbite-svelte/commit/43663cf165f249c7e3fa7e7dc8ccfaccc7e467a6))
16
+ * floatinginput type changes ([#436](https://github.com/themesberg/flowbite-svelte/issues/436)) ([5af9ecf](https://github.com/themesberg/flowbite-svelte/commit/5af9ecf598800e4cbcf27e413ba0b63d82926219))
17
+ * og:image and twitter:image to replace spaces with - ([#441](https://github.com/themesberg/flowbite-svelte/issues/441)) ([25ad6d0](https://github.com/themesberg/flowbite-svelte/commit/25ad6d09816e1df3a5a8ddd9a901186d2a36f4ee))
18
+
5
19
  ### [0.27.17](https://github.com/themesberg/flowbite-svelte/compare/v0.27.16...v0.27.17) (2022-11-18)
6
20
 
7
21
 
package/darkmode/DarkMode.svelte CHANGED
@@ -1,4 +1,5 @@
1
- <script>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 fixed left-0 top-8 z-50';
1
+ <script>import classNames from 'classnames';
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';
2
3
  const toggleTheme = () => {
3
4
  const isDark = window.document.documentElement.classList.toggle('dark');
4
5
  localStorage.setItem('color-theme', isDark ? 'dark' : 'light');
@@ -16,19 +17,28 @@ const toggleTheme = () => {
16
17
  </script>
17
18
  </svelte:head>
18
19
 
19
- <button on:click={toggleTheme} aria-label="Dark mode" type="button" class={btnClass}>
20
+ <button
21
+ on:click={toggleTheme}
22
+ aria-label="Dark mode"
23
+ type="button"
24
+ {...$$restProps}
25
+ class={classNames(btnClass, $$props.class)}>
20
26
  <span class="hidden dark:block">
21
- <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
22
- <path
23
- d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1
27
+ <slot name="lightIcon">
28
+ <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
29
+ <path
30
+ d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1
24
31
  0 100-2H3a1 1 0 000 2h1z"
25
- fill-rule="evenodd"
26
- clip-rule="evenodd" />
27
- </svg>
32
+ fill-rule="evenodd"
33
+ clip-rule="evenodd" />
34
+ </svg>
35
+ </slot>
28
36
  </span>
29
37
  <span class="dark:hidden">
30
- <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
31
- <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
32
- </svg>
38
+ <slot name="darkIcon">
39
+ <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
40
+ <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
41
+ </svg>
42
+ </slot>
33
43
  </span>
34
44
  </button>
package/darkmode/DarkMode.svelte.d.ts CHANGED
@@ -1,12 +1,16 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
2
  declare const __propDef: {
3
3
  props: {
4
+ [x: string]: any;
4
5
  btnClass?: string | undefined;
5
6
  };
6
7
  events: {
7
8
  [evt: string]: CustomEvent<any>;
8
9
  };
9
- slots: {};
10
+ slots: {
11
+ lightIcon: {};
12
+ darkIcon: {};
13
+ };
10
14
  };
11
15
  export declare type DarkModeProps = typeof __propDef.props;
12
16
  export declare type DarkModeEvents = typeof __propDef.events;
package/forms/Checkbox.svelte CHANGED
@@ -12,7 +12,7 @@ export let checked = false;
12
12
  let background = getContext('background');
13
13
  // react on external group changes
14
14
  function init(_, _group) {
15
- checked = _group.includes(value);
15
+ checked = checked || _group.includes(value);
16
16
  return {
17
17
  update(_group) {
18
18
  checked = _group.includes(value);
package/forms/FloatingLabelInput.svelte CHANGED
@@ -61,9 +61,15 @@ const labelColorClasses = {
61
61
  red: 'text-red-600 dark:text-red-500'
62
62
  };
63
63
  // you need to this to avoid 2-way binding
64
- function setType(node) {
65
- node.type = type;
64
+ function setType(node, _type) {
65
+ node.type = _type;
66
+ return {
67
+ update(_type) {
68
+ node.type = _type;
69
+ }
70
+ };
66
71
  }
72
+ ;
67
73
  </script>
68
74
 
69
75
  <div class={divClasses[style]}>
@@ -82,7 +88,7 @@ function setType(node) {
82
88
  on:mouseleave
83
89
  on:mouseover
84
90
  on:paste
85
- use:setType
91
+ use:setType={type}
86
92
  placeholder=" "
87
93
  class={classNames(
88
94
  inputClasses[style],
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flowbite-svelte",
3
- "version": "0.27.17",
3
+ "version": "0.28.0",
4
4
  "description": "Flowbite components for Svelte",
5
5
  "main": "index.js",
6
6
  "author": {
@@ -12,33 +12,33 @@
12
12
  "homepage": "https://flowbite-svelte.com/",
13
13
  "license": "MIT",
14
14
  "devDependencies": {
15
- "@playwright/test": "^1.25.0",
15
+ "@playwright/test": "^1.27.1",
16
16
  "@sveltejs/adapter-vercel": "1.0.0-next.78",
17
- "@sveltejs/kit": "1.0.0-next.484",
17
+ "@sveltejs/kit": "next",
18
18
  "@sveltejs/package": "1.0.0-next.3",
19
- "@typescript-eslint/eslint-plugin": "^5.27.0",
20
- "@typescript-eslint/parser": "^5.27.0",
21
- "autoprefixer": "^10.4.7",
19
+ "@typescript-eslint/eslint-plugin": "^5.43.0",
20
+ "@typescript-eslint/parser": "^5.43.0",
21
+ "autoprefixer": "^10.4.13",
22
22
  "createprops": "^0.4.9",
23
- "eslint": "^8.16.0",
24
- "eslint-config-prettier": "^8.3.0",
23
+ "eslint": "^8.27.0",
24
+ "eslint-config-prettier": "^8.5.0",
25
25
  "eslint-plugin-svelte3": "^4.0.0",
26
26
  "mdsvex": "^0.10.6",
27
27
  "mdsvexamples": "^0.3.2",
28
- "postcss": "^8.4.14",
28
+ "postcss": "^8.4.19",
29
29
  "postcss-load-config": "^4.0.1",
30
- "prettier": "^2.6.2",
31
- "prettier-plugin-svelte": "^2.7.0",
30
+ "prettier": "^2.7.1",
31
+ "prettier-plugin-svelte": "^2.8.0",
32
32
  "prism-themes": "^1.9.0",
33
- "svelte": "^3.44.0",
34
- "svelte-check": "^2.7.1",
33
+ "svelte": "^3.53.1",
34
+ "svelte-check": "^2.9.2",
35
35
  "svelte-meta-tags": "^2.6.3",
36
36
  "svelte-preprocess": "^4.10.7",
37
- "svelte2tsx": "^0.5.18",
38
- "tailwindcss": "^3.1.5",
39
- "tslib": "^2.3.1",
40
- "typescript": "^4.7.4",
41
- "vite": "^3.1.0"
37
+ "svelte2tsx": "^0.5.20",
38
+ "tailwindcss": "^3.2.4",
39
+ "tslib": "^2.4.1",
40
+ "typescript": "^4.8.4",
41
+ "vite": "^3.2.3"
42
42
  },
43
43
  "type": "module",
44
44
  "keywords": [