flowbite-svelte 0.48.3 → 0.48.4
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.
package/dist/forms/Input.svelte
CHANGED
|
@@ -16,6 +16,7 @@ export let color = "base";
|
|
|
16
16
|
export let floatClass = "flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400";
|
|
17
17
|
export let classLeft = "";
|
|
18
18
|
export let classRight = "";
|
|
19
|
+
export let wrapperClass = "relative w-auto";
|
|
19
20
|
const dispatcher = createEventDispatcher();
|
|
20
21
|
const borderClasses = {
|
|
21
22
|
base: "border border-gray-300 dark:border-gray-600",
|
|
@@ -53,7 +54,7 @@ const clearAll = (e) => {
|
|
|
53
54
|
};
|
|
54
55
|
</script>
|
|
55
56
|
|
|
56
|
-
<Wrapper class=
|
|
57
|
+
<Wrapper class={wrapperClass} show={$$slots.left || $$slots.right || !!clearable}>
|
|
57
58
|
{#if $$slots.left}
|
|
58
59
|
<div class="{twMerge(floatClass, classLeft)} start-0 ps-2.5 pointer-events-none">
|
|
59
60
|
<slot name="left" />
|
|
@@ -63,12 +64,12 @@ const clearAll = (e) => {
|
|
|
63
64
|
<input {...$$restProps} bind:value on:blur on:change on:click on:contextmenu on:focus on:keydown on:keypress on:keyup on:mouseover on:mouseenter on:mouseleave on:paste on:input {...{ type }} class={inputClass} />
|
|
64
65
|
</slot>
|
|
65
66
|
{#if $$slots.right}
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
67
|
+
<div class="{twMerge(floatClass, classRight)} end-0 pe-2.5">
|
|
68
|
+
<slot name="right"></slot>
|
|
69
|
+
</div>
|
|
69
70
|
{/if}
|
|
70
71
|
{#if clearable && value && `${value}`.length > 0}
|
|
71
|
-
<CloseButton {size} on:click={clearAll} color="none" class="
|
|
72
|
+
<CloseButton {size} on:click={clearAll} color="none" class="{twMerge(floatClass, classRight)} focus:ring-0 end-1" tabindex={-1} />
|
|
72
73
|
{/if}
|
|
73
74
|
</Wrapper>
|
|
74
75
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { getContext } from "svelte";
|
|
3
3
|
export let color = getContext("color");
|
|
4
4
|
const colors = {
|
|
5
|
-
default: "bg-white dark:bg-gray-800 dark:border-gray-700",
|
|
5
|
+
default: "bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700",
|
|
6
6
|
blue: "bg-blue-500 border-blue-400",
|
|
7
7
|
green: "bg-green-500 border-green-400",
|
|
8
8
|
red: "bg-red-500 border-red-400",
|