flowbite-svelte 0.24.18 → 0.25.2

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.
 
+### [0.24.19](https://github.com/themesberg/flowbite-svelte/compare/v0.24.18...v0.24.19) (2022-08-17)
+
+
+### Features
+
+* add pointerEvent prop to Iconinput to show/hide cursor ([dffa324](https://github.com/themesberg/flowbite-svelte/commit/dffa3247856c7245ecb8a67554ce77b797fe8627))
+
 ### [0.24.18](https://github.com/themesberg/flowbite-svelte/compare/v0.24.17...v0.24.18) (2022-08-16)
 
 

package/forms/Iconinput.svelte

@@ -7,21 +7,23 @@ export let noBorder = false;
 export let inputClass = 'rounded-none rounded-r-lg bg-gray-50 border border-gray-300 text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full border-gray-300 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';
 export let spanClass = 'inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 rounded-l-md border border-r-0 border-gray-300 dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600';
 export let noBorderInputClass = 'bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10   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';
-export let noBorderDivClass = 'flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none';
+export let pointerEvent = false;
+export let noBorderDivClass = 'flex absolute inset-y-0 left-0 items-center pl-3';
 export let iconClass = 'mr-2';
-const setType = (node) => {
-    node.type = type;
-};
 </script>
 
 {#if noBorder}
 	<div class="relative">
-		<div
-			class={classNames(noBorderDivClass, {
-				'p-2 sm:text-xs': size === 'sm',
-				'p-2.5 text-sm': size === 'md',
-				'sm:text-md p-4': size === 'lg'
-			})}
+		<span
+			class={classNames(
+				noBorderDivClass,
+				{
+					'p-2 sm:text-xs': size === 'sm',
+					'p-2.5 text-sm': size === 'md',
+					'sm:text-md p-4': size === 'lg'
+				},
+				pointerEvent ? 'cursor-pointer' : 'pointer-events-none'
+			)}
 		>
 			<svelte:component
 				this={icon}
@@ -33,11 +35,10 @@ const setType = (node) => {
 				})}
 				class={iconClass}
 			/>
-		</div>
+		</span>
 		<input
 			{...$$restProps}
-			bind:value
-			use:setType
+			{type}
 			class={classNames(
 				noBorderInputClass,
 				{
@@ -51,7 +52,7 @@ const setType = (node) => {
 	</div>
 {:else}
 	<div class="flex">
-		<span class={spanClass}>
+		<div class={spanClass}>
 			<svelte:component
 				this={icon}
 				on:click
@@ -60,9 +61,9 @@ const setType = (node) => {
 					18: size === 'md',
 					20: size === 'lg'
 				})}
-				class={iconClass}
+				class={classNames(iconClass, pointerEvent ? 'cursor-pointer' : 'pointer-events-none')}
 			/>
-		</span>
+		</div>
 		<input
 			{...$$restProps}
 			{type}

package/forms/Iconinput.svelte.d.ts

@@ -12,6 +12,7 @@ declare const __propDef: {
         inputClass?: string;
         spanClass?: string;
         noBorderInputClass?: string;
+        pointerEvent?: boolean;
         noBorderDivClass?: string;
         iconClass?: string;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.24.18",
+  "version": "0.25.2",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -12,6 +12,7 @@
   "homepage": "https://flowbite-svelte.com/",
   "license": "MIT",
   "devDependencies": {
+    "@floating-ui/dom": "^1.0.1",
     "@playwright/test": "^1.25.0",
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
@@ -81,7 +82,6 @@
     "url": "https://github.com/themesberg/flowbite-svelte"
   },
   "dependencies": {
-    "@floating-ui/dom": "^0.5.4",
     "classnames": "^2.3.1",
     "flowbite": "^1.5.2"
   },
@@ -225,4 +225,4 @@
     "./utils/generateId": "./utils/generateId.js"
   },
   "svelte": "./index.js"
-}
+}