flowbite-svelte 0.44.5 → 0.44.6
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.
|
@@ -7,6 +7,13 @@ export let hoverable = false;
|
|
|
7
7
|
export let placeholder = 'Search';
|
|
8
8
|
export let customColor = '';
|
|
9
9
|
export let color = 'default';
|
|
10
|
+
export let innerDivClass = 'p-4';
|
|
11
|
+
export let searchClass = 'relative mt-1';
|
|
12
|
+
export let svgDivClass = 'absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none';
|
|
13
|
+
export let svgClass = 'w-5 h-5 text-gray-500 dark:text-gray-400';
|
|
14
|
+
export let inputClass = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 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';
|
|
15
|
+
let inputCls = twMerge(inputClass, $$props.classInput);
|
|
16
|
+
let svgDivCls = twMerge(svgDivClass, $$props.classSvgDiv);
|
|
10
17
|
const colors = {
|
|
11
18
|
default: 'text-gray-500 dark:text-gray-400',
|
|
12
19
|
blue: 'text-blue-100 dark:text-blue-100',
|
|
@@ -22,20 +29,24 @@ $: setContext('color', color);
|
|
|
22
29
|
</script>
|
|
23
30
|
|
|
24
31
|
<div class={divClass}>
|
|
25
|
-
<div class=
|
|
32
|
+
<div class={innerDivClass}>
|
|
26
33
|
<label for="table-search" class="sr-only">Search</label>
|
|
27
|
-
<div class=
|
|
28
|
-
<div class=
|
|
29
|
-
<
|
|
30
|
-
<
|
|
31
|
-
|
|
34
|
+
<div class={searchClass}>
|
|
35
|
+
<div class={svgDivCls}>
|
|
36
|
+
<slot name="svgSearch">
|
|
37
|
+
<svg class={svgClass} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
|
38
|
+
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
|
|
39
|
+
</svg>
|
|
40
|
+
</slot>
|
|
32
41
|
</div>
|
|
33
|
-
<input bind:value={inputValue} type="text" id="table-search" class=
|
|
42
|
+
<input bind:value={inputValue} type="text" id="table-search" class={inputCls} {placeholder} />
|
|
34
43
|
</div>
|
|
44
|
+
<slot name="header" />
|
|
35
45
|
</div>
|
|
36
46
|
<table {...$$restProps} class={twMerge('w-full text-left text-sm', colors[color], $$props.class)}>
|
|
37
47
|
<slot />
|
|
38
48
|
</table>
|
|
49
|
+
<slot name="footer" />
|
|
39
50
|
</div>
|
|
40
51
|
|
|
41
52
|
<!--
|
|
@@ -49,4 +60,9 @@ $: setContext('color', color);
|
|
|
49
60
|
@prop export let placeholder: string = 'Search';
|
|
50
61
|
@prop export let customColor: string = '';
|
|
51
62
|
@prop export let color: 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'default' | 'custom' = 'default';
|
|
63
|
+
@prop export let innerDivClass: string = 'p-4';
|
|
64
|
+
@prop export let searchClass: string = 'relative mt-1';
|
|
65
|
+
@prop export let svgDivClass: string = 'absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none';
|
|
66
|
+
@prop export let svgClass: string = 'w-5 h-5 text-gray-500 dark:text-gray-400';
|
|
67
|
+
@prop export let inputClass: string = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 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';
|
|
52
68
|
-->
|
|
@@ -9,12 +9,20 @@ declare const __propDef: {
|
|
|
9
9
|
placeholder?: string | undefined;
|
|
10
10
|
customColor?: string | undefined;
|
|
11
11
|
color?: "red" | "yellow" | "green" | "purple" | "blue" | "default" | "custom" | undefined;
|
|
12
|
+
innerDivClass?: string | undefined;
|
|
13
|
+
searchClass?: string | undefined;
|
|
14
|
+
svgDivClass?: string | undefined;
|
|
15
|
+
svgClass?: string | undefined;
|
|
16
|
+
inputClass?: string | undefined;
|
|
12
17
|
};
|
|
13
18
|
events: {
|
|
14
19
|
[evt: string]: CustomEvent<any>;
|
|
15
20
|
};
|
|
16
21
|
slots: {
|
|
22
|
+
svgSearch: {};
|
|
23
|
+
header: {};
|
|
17
24
|
default: {};
|
|
25
|
+
footer: {};
|
|
18
26
|
};
|
|
19
27
|
};
|
|
20
28
|
export type TableSearchProps = typeof __propDef.props;
|
|
@@ -30,6 +38,11 @@ export type TableSearchSlots = typeof __propDef.slots;
|
|
|
30
38
|
* @prop export let placeholder: string = 'Search';
|
|
31
39
|
* @prop export let customColor: string = '';
|
|
32
40
|
* @prop export let color: 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'default' | 'custom' = 'default';
|
|
41
|
+
* @prop export let innerDivClass: string = 'p-4';
|
|
42
|
+
* @prop export let searchClass: string = 'relative mt-1';
|
|
43
|
+
* @prop export let svgDivClass: string = 'absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none';
|
|
44
|
+
* @prop export let svgClass: string = 'w-5 h-5 text-gray-500 dark:text-gray-400';
|
|
45
|
+
* @prop export let inputClass: string = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 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';
|
|
33
46
|
*/
|
|
34
47
|
export default class TableSearch extends SvelteComponentTyped<TableSearchProps, TableSearchEvents, TableSearchSlots> {
|
|
35
48
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableSearch.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/tables/TableSearch.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;
|
|
1
|
+
{"version":3,"file":"TableSearch.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/tables/TableSearch.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgED,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}
|