Skip to content

Commit 11283d4

Browse files
shinokadashinokada
committed
fix: class name update
1 parent aef061a commit 11283d4

File tree

9 files changed

+52
-56
lines changed

9 files changed

+52
-56
lines changed

‎src/lib/table/Table.svelte‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
<script context="module" lang="ts">
2+
import type { HTMLTableAttributes } from 'svelte/elements';
3+
24
type TableCtxType = {
35
striped?: boolean;
46
hoverable?: boolean;
@@ -23,7 +25,7 @@
2325
import { twMerge, twJoin } from 'tailwind-merge';
2426
import { setContext } from 'svelte';
2527
26-
interface Props {
28+
interface Props extends HTMLTableAttributes{
2729
children: Snippet;
2830
divClass?: string | undefined | null;
2931
striped?: boolean;
@@ -72,9 +74,7 @@
7274
{...attributes}
7375
class={twMerge('w-full text-left text-sm', colors[color])}
7476
>
75-
76-
{@render children()}
77-
77+
{@render children()}
7878
</table>
7979
</div>
8080

‎src/lib/table/TableBody.svelte‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<script lang="ts">
22
import type { Snippet } from 'svelte';
3-
interface Props {
3+
import type { HTMLAttributes } from 'svelte/elements';
4+
5+
interface Props extends HTMLAttributes<HTMLTableSectionElement>{
46
children?: Snippet;
57
class?: string | undefined;
68
}

‎src/lib/table/TableBodyCell.svelte‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,19 @@
33
import { twMerge } from 'tailwind-merge';
44
import { getContext } from 'svelte';
55
import type TableCtxType from './Table.svelte';
6+
import type { HTMLTdAttributes } from 'svelte/elements';
67
7-
interface Props {
8+
interface Props extends HTMLTdAttributes{
89
children?: Snippet;
910
class?: string | undefined | null;
1011
colspan?: number;
11-
tdclass?: string | undefined | null;
1212
onclick?: () => void;
1313
}
14+
1415
let {
1516
children,
1617
class: className,
1718
colspan,
18-
tdclass = '',
1919
onclick,
2020
...attributes
2121
}: Props = $props();
@@ -27,7 +27,6 @@
2727
let tdCls: string = $state(
2828
twMerge(
2929
'px-6 py-4 whitespace-nowrap font-medium',
30-
tdclass,
3130
color === 'default'
3231
? 'text-gray-900 dark:text-white'
3332
: 'text-blue-50 whitespace-nowrap dark:text-blue-100',
@@ -61,7 +60,6 @@
6160
@prop children
6261
@prop class: className
6362
@prop colspan
64-
@prop tdclass = ''
6563
@prop onclick
6664
@prop ...attributes
6765
-->

‎src/lib/table/TableBodyRow.svelte‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@
33
import { twMerge } from 'tailwind-merge';
44
import { getContext } from 'svelte';
55
import type TableCtxType from './Table.svelte';
6+
import type { HTMLAttributes } from 'svelte/elements';
7+
68
// import type TableColrType from './Table.svelte';
7-
interface Props {
9+
interface Props extends HTMLAttributes<HTMLTableRowElement>{
810
children?: Snippet;
911
class?: string | undefined | null;
1012
color?: string | undefined | null;
11-
onclick?: () => void;
12-
ondblclick?: () => void;
1313
}
14-
let { children, class: className, color, onclick, ondblclick, ...attributes }: Props = $props();
14+
let { children, class: className, color, ...attributes }: Props = $props();
1515
1616
const tableCtx: TableCtxType = getContext('tableCtx');
1717
let rowColor: string = $state(color ? color : tableCtx.color || 'default');
@@ -68,7 +68,7 @@
6868
]);
6969
</script>
7070

71-
<tr {...attributes} class={trClass} {onclick} {ondblclick}>
71+
<tr {...attributes} class={trClass}>
7272
{#if children}
7373
{@render children()}
7474
{/if}

‎src/lib/table/TableHead.svelte‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,17 @@
33
import { twMerge } from 'tailwind-merge';
44
import { getContext } from 'svelte';
55
import type TableCtxType from './Table.svelte';
6+
import type { HTMLAttributes } from 'svelte/elements';
67
7-
interface Props {
8+
interface Props extends HTMLAttributes<HTMLTableSectionElement>{
89
children?: Snippet;
910
defaultRow?: boolean;
10-
theadClass?: string | undefined | null;
1111
class?: string | undefined | null;
1212
}
1313
1414
let {
1515
children,
1616
class: className,
17-
theadClass = '',
1817
defaultRow = true,
1918
...attributes
2019
}: Props = $props();
@@ -53,7 +52,6 @@
5352
5453
let theadCls = twMerge(
5554
'text-xs uppercase',
56-
theadClass,
5755
textColor,
5856
striped && borderColors,
5957
bgColors[color],

‎src/lib/table/TableHeadCell.svelte‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,20 @@
11
<script lang="ts">
22
import type { Snippet } from 'svelte';
33
import { twMerge } from 'tailwind-merge';
4-
interface Props {
4+
import type { HTMLThAttributes } from 'svelte/elements';
5+
6+
interface Props extends HTMLThAttributes{
57
children?: Snippet;
68
class?: string | undefined | null;
7-
padding?: string | undefined | null;
8-
colspan?: number;
9-
rowspan?: number;
109
}
1110
let {
1211
children,
1312
class: className,
14-
padding = '',
15-
colspan,
16-
rowspan,
1713
...attributes
1814
}: Props = $props();
1915
</script>
2016

21-
<th {...attributes} {colspan} {rowspan} class={twMerge('px-6 py-3',padding, className)}>
17+
<th {...attributes} class={twMerge('px-6 py-3', className)}>
2218
{#if children}
2319
{@render children()}
2420
{/if}

‎src/lib/table/TableSearch.svelte‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,14 @@
22
import type { Snippet } from 'svelte';
33
import { twMerge } from 'tailwind-merge';
44
import { setContext } from 'svelte';
5+
import type { HTMLTableAttributes } from 'svelte/elements';
56
67
type TableSearchType = {
78
striped?: boolean;
89
hoverable?: boolean;
910
color?: string | undefined | null;
1011
};
11-
interface Props {
12+
interface Props extends HTMLTableAttributes{
1213
children?: Snippet;
1314
svgSearch?: any;
1415
header?: Snippet;
@@ -17,14 +18,14 @@
1718
inputValue?: string | undefined | null;
1819
striped?: boolean;
1920
hoverable?: boolean;
20-
placeholder?: string | undefined | null;
2121
customColor?: string | undefined;
2222
color?: string | undefined;
2323
innerDivClass?: string | undefined | null;
24-
inputclass?: string | undefined | null;
24+
inputClass?: string | undefined | null;
2525
searchClass?: string | undefined | null;
2626
svgDivClass?: string | undefined | null;
2727
svgClass?: string | undefined | null;
28+
tableClass? : string | undefined | null;
2829
classDiv?: string | undefined | null;
2930
class?: string | undefined | null;
3031
}
@@ -34,26 +35,26 @@
3435
svgSearch,
3536
header,
3637
footer,
37-
divClass = '',
38+
divClass = 'relative overflow-x-auto shadow-md sm:rounded-lg',
3839
inputValue = $bindable(),
3940
striped,
4041
hoverable,
41-
placeholder = 'Search',
4242
customColor = '',
4343
color = 'default',
44-
innerDivClass = '',
45-
inputclass,
46-
searchClass = '',
44+
innerDivClass = 'p-4',
45+
inputClass,
46+
searchClass = 'relative mt-1',
4747
svgDivClass,
48-
svgClass = '',
48+
svgClass = 'w-5 h-5 text-gray-500 dark:text-gray-400',
49+
tableClass = 'w-full text-left text-sm',
4950
classDiv,
5051
class: className,
5152
...attributes
5253
}: Props = $props();
5354
5455
let inputCls = twMerge(
5556
'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 p-2.5 ps-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',
56-
inputclass
57+
inputClass
5758
);
5859
let svgDivCls = twMerge(
5960
'absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none',
@@ -80,13 +81,13 @@
8081
setContext('tableCtx', tableSearchCtx);
8182
</script>
8283

83-
<div class={twMerge('relative overflow-x-auto shadow-md sm:rounded-lg',divClass)}>
84-
<div class={twMerge('p-4',innerDivClass)}>
84+
<div class={divClass}>
85+
<div class={innerDivClass}>
8586
<label for="table-search" class="sr-only">Search</label>
86-
<div class={twMerge('relative mt-1',searchClass)}>
87+
<div class={searchClass}>
8788
<div class={svgDivCls}>
8889
<svg
89-
class={twMerge('w-5 h-5 text-gray-500 dark:text-gray-400',svgClass)}
90+
class={svgClass}
9091
fill="currentColor"
9192
viewBox="0 0 20 20"
9293
xmlns="http://www.w3.org/2000/svg"
@@ -103,7 +104,6 @@
103104
type="text"
104105
id="table-search"
105106
class={inputCls}
106-
{placeholder}
107107
/>
108108
</div>
109109
{#if header}
@@ -112,7 +112,7 @@
112112
</div>
113113
<table
114114
{...attributes}
115-
class={twMerge('w-full text-left text-sm', colors[color], className)}
115+
class={twMerge(tableClass, colors[color], className)}
116116
>
117117
{#if children}
118118
{@render children()}
@@ -139,7 +139,7 @@
139139
@prop customColor = ''
140140
@prop color = 'default'
141141
@prop innerDivClass = ''
142-
@prop inputclass
142+
@prop inputClass
143143
@prop searchClass = ''
144144
@prop svgDivClass
145145
@prop svgClass = ''

‎src/lib/toast/Toast.svelte‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,19 @@
44
import { twMerge } from 'tailwind-merge';
55
import { CloseButton } from '$lib';
66
import type { ColorVariant, ToastPositionType } from '$lib/types';
7+
import type { HTMLAttributes } from 'svelte/elements';
78
89
type TransitionFunc = (node: HTMLElement, params: any) => TransitionConfig;
910
10-
interface Props {
11+
interface Props extends HTMLAttributes<HTMLDivElement>{
1112
children: Snippet;
1213
icon?: any;
1314
dismissable?: boolean;
1415
color?: ColorVariant;
1516
position?: ToastPositionType;
1617
divClass?: string | undefined | null;
17-
div2class?: string | undefined | null;
18-
div3class?: string | undefined | null;
18+
div2Class?: string | undefined | null;
19+
div3Class?: string | undefined | null;
1920
align?: boolean;
2021
transition?: TransitionFunc;
2122
params?: object;
@@ -27,8 +28,8 @@
2728
color = 'primary',
2829
position = 'none',
2930
divClass,
30-
div2class,
31-
div3class,
31+
div2Class,
32+
div3Class,
3233
align = true,
3334
transition = fade,
3435
params,
@@ -80,7 +81,7 @@
8081
'inline-flex items-center justify-center shrink-0 rounded-lg',
8182
colors[color],
8283
defaultIconCls,
83-
div2class
84+
div2Class
8485
);
8586
8687
const clsBtnExtraClass =
@@ -100,7 +101,7 @@
100101
</div>
101102
{/if}
102103

103-
<div class={twMerge(contentCls, div3class)}>
104+
<div class={twMerge(contentCls, div3Class)}>
104105
{@render children()}
105106
</div>
106107

@@ -127,8 +128,8 @@
127128
@prop color = 'primary'
128129
@prop position = 'none'
129130
@prop divClass
130-
@prop div2class
131-
@prop div3class
131+
@prop div2Class
132+
@prop div3Class
132133
@prop align = true
133134
@prop transition = fade
134135
@prop params

‎src/lib/toolbar/ToolbarGroup.svelte‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,21 @@
33
import type { Snippet } from 'svelte';
44
import type { Writable } from 'svelte/store';
55
import { getContext } from 'svelte';
6+
import type { HTMLAttributes } from 'svelte/elements';
67
7-
interface Props {
8+
interface Props extends HTMLAttributes<HTMLDivElement>{
89
children: Snippet;
910
class?: string | undefined | null;
1011
divClass?: string | undefined | null;
1112
}
1213
13-
let { children, class: className, divClass = 'flex items-center space-x-1 rtl:space-x-reverse sm:pe-4 sm:ps-4 first:sm:ps-0 last:sm:pe-0' }: Props = $props();
14+
let { children, class: className, divClass = 'flex items-center space-x-1 rtl:space-x-reverse sm:pe-4 sm:ps-4 first:sm:ps-0 last:sm:pe-0', ...attributes }: Props = $props();
1415
1516
const options: Writable<boolean> = getContext('toolbar');
1617
if (options) $options = true;
1718
</script>
1819

19-
<div class={twMerge(divClass, className)}>
20+
<div class={twMerge(divClass, className)} {...attributes}>
2021
{@render children()}
2122
</div>
2223

0 commit comments

Comments
 (0)