Skip to content

Commit dfc46b6

Browse files
shinokadashinokada
authored
Merge pull request #317 from shinokada/iconinput-update
fix: add events to IconInput and on:input to Input components #312 #316
2 parents a9025c4 + fffb65c commit dfc46b6

File tree

3 files changed

+131
-105
lines changed

3 files changed

+131
-105
lines changed

‎src/lib/forms/Iconinput.svelte‎

Lines changed: 79 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,86 @@
11
<script lang="ts">
2-
import classNames from 'classnames';
2+
import classNames from 'classnames';
33
4-
export let value: string = '';
5-
export let size: 'sm' | 'md' | 'lg' = 'md';
6-
export let noBorder: boolean = false;
7-
export let inputClass: string =
8-
'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';
9-
export let spanClass: string =
10-
'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';
11-
export let noBorderInputClass: string =
12-
'bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full 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';
13-
export let pointerEvent: boolean = false;
14-
export let noBorderDivClass: string = 'flex absolute inset-y-0 left-0 items-center pl-3';
4+
export let value: string = '';
5+
export let size: 'sm' | 'md' | 'lg' = 'md';
6+
export let noBorder: boolean = false;
7+
export let inputClass: string =
8+
'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';
9+
export let spanClass: string =
10+
'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';
11+
export let noBorderInputClass: string =
12+
'bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full 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';
13+
export let pointerEvent: boolean = false;
14+
export let noBorderDivClass: string = 'flex absolute inset-y-0 left-0 items-center pl-3';
1515
</script>
1616

1717
{#if noBorder}
18-
<div class="relative">
19-
<div
20-
class={classNames(
21-
noBorderDivClass,
22-
{
23-
'p-2 sm:text-xs': size === 'sm',
24-
'p-2.5 text-sm': size === 'md',
25-
'sm:text-md p-4': size === 'lg'
26-
},
27-
pointerEvent ? 'cursor-pointer' : 'pointer-events-none'
28-
)}>
29-
<slot />
30-
</div>
31-
<input
32-
{...$$restProps}
33-
bind:value
34-
class={classNames(
35-
noBorderInputClass,
36-
{
37-
'p-2 sm:text-xs pl-9': size === 'sm',
38-
'p-2.5 text-sm pl-10': size === 'md',
39-
'sm:text-md p-4 pl-11': size === 'lg'
40-
},
41-
$$props.class
42-
)} />
43-
</div>
18+
<div class="relative">
19+
<div
20+
class={classNames(
21+
noBorderDivClass,
22+
{
23+
'p-2 sm:text-xs': size === 'sm',
24+
'p-2.5 text-sm': size === 'md',
25+
'sm:text-md p-4': size === 'lg'
26+
},
27+
pointerEvent ? 'cursor-pointer' : 'pointer-events-none'
28+
)}>
29+
<slot />
30+
</div>
31+
<input
32+
{...$$restProps}
33+
bind:value
34+
on:blur
35+
on:change
36+
on:click
37+
on:focus
38+
on:keydown
39+
on:keypress
40+
on:keyup
41+
on:mouseover
42+
on:mouseenter
43+
on:mouseleave
44+
on:paste
45+
on:input
46+
class={classNames(
47+
noBorderInputClass,
48+
{
49+
'p-2 sm:text-xs pl-9': size === 'sm',
50+
'p-2.5 text-sm pl-10': size === 'md',
51+
'sm:text-md p-4 pl-11': size === 'lg'
52+
},
53+
$$props.class
54+
)} />
55+
</div>
4456
{:else}
45-
<div class="flex">
46-
<span class={spanClass}>
47-
<slot />
48-
</span>
49-
<input
50-
{...$$restProps}
51-
bind:value
52-
class={classNames(
53-
inputClass,
54-
{
55-
'p-2 sm:text-xs': size === 'sm',
56-
'p-2.5 text-sm': size === 'md',
57-
'sm:text-md p-4': size === 'lg'
58-
},
59-
$$props.class
60-
)} />
61-
</div>
57+
<div class="flex">
58+
<span class={spanClass}>
59+
<slot />
60+
</span>
61+
<input
62+
{...$$restProps}
63+
bind:value
64+
on:blur
65+
on:change
66+
on:click
67+
on:focus
68+
on:keydown
69+
on:keypress
70+
on:keyup
71+
on:mouseover
72+
on:mouseenter
73+
on:mouseleave
74+
on:paste
75+
on:input
76+
class={classNames(
77+
inputClass,
78+
{
79+
'p-2 sm:text-xs': size === 'sm',
80+
'p-2.5 text-sm': size === 'md',
81+
'sm:text-md p-4': size === 'lg'
82+
},
83+
$$props.class
84+
)} />
85+
</div>
6286
{/if}

‎src/lib/forms/Input.svelte‎

Lines changed: 50 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,58 @@
11
<script lang="ts">
2-
import classNames from 'classnames';
3-
import { getContext } from 'svelte';
4-
import type { InputType } from '../types';
2+
import classNames from 'classnames';
3+
import { getContext } from 'svelte';
4+
import type { InputType } from '../types';
55
6-
export let type: InputType = 'text';
7-
export let value: string = '';
8-
export let size: 'sm' | 'md' | 'lg' = 'md';
9-
export let inputClass: string =
10-
'block w-full border disabled:cursor-not-allowed disabled:opacity-50 rounded-lg';
11-
export let color: 'base' | 'green' | 'red' = 'base';
6+
export let type: InputType = 'text';
7+
export let value: string = '';
8+
export let size: 'sm' | 'md' | 'lg' = 'md';
9+
export let inputClass: string =
10+
'block w-full border disabled:cursor-not-allowed disabled:opacity-50 rounded-lg';
11+
export let color: 'base' | 'green' | 'red' = 'base';
1212
13-
const colorClasses = {
14-
base: 'bg-gray-50 border-gray-300 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500',
15-
green:
16-
'border-green-500 bg-green-50 text-green-900 placeholder-green-700 focus:border-green-500 focus:ring-green-500 dark:border-green-400 dark:bg-green-100 dark:focus:border-green-500 dark:focus:ring-green-500',
17-
red: 'border-red-500 bg-red-50 text-red-900 placeholder-red-700 focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:bg-red-100 dark:focus:border-red-500 dark:focus:ring-red-500'
18-
};
13+
const colorClasses = {
14+
base: 'bg-gray-50 border-gray-300 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500',
15+
green:
16+
'border-green-500 bg-green-50 text-green-900 placeholder-green-700 focus:border-green-500 focus:ring-green-500 dark:border-green-400 dark:bg-green-100 dark:focus:border-green-500 dark:focus:ring-green-500',
17+
red: 'border-red-500 bg-red-50 text-red-900 placeholder-red-700 focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:bg-red-100 dark:focus:border-red-500 dark:focus:ring-red-500'
18+
};
1919
20-
// tinted if put in component having its own background
21-
let background: boolean = getContext('background');
20+
// tinted if put in component having its own background
21+
let background: boolean = getContext('background');
2222
23-
// you need to this to avoid 2-way binding
24-
const setType = (node) => {
25-
node.type = type;
26-
};
23+
// you need to this to avoid 2-way binding
24+
const setType = (node) => {
25+
node.type = type;
26+
};
2727
</script>
2828

2929
<input
30-
{...$$restProps}
31-
bind:value
32-
on:blur
33-
on:change
34-
on:click
35-
on:focus
36-
on:keydown
37-
on:keypress
38-
on:keyup
39-
on:mouseover
40-
on:mouseenter
41-
on:mouseleave
42-
on:paste
43-
use:setType
44-
class={classNames(
45-
inputClass,
46-
colorClasses[color],
47-
color === 'base' &&
48-
(background
49-
? 'dark:bg-gray-600 dark:border-gray-500'
50-
: 'dark:bg-gray-700 dark:border-gray-600'),
51-
{
52-
'p-2 sm:text-xs': size === 'sm',
53-
'p-2.5 text-sm': size === 'md',
54-
'sm:text-md p-4': size === 'lg'
55-
},
56-
$$props.class
57-
)} />
30+
{...$$restProps}
31+
bind:value
32+
on:blur
33+
on:change
34+
on:click
35+
on:focus
36+
on:keydown
37+
on:keypress
38+
on:keyup
39+
on:mouseover
40+
on:mouseenter
41+
on:mouseleave
42+
on:paste
43+
on:input
44+
use:setType
45+
class={classNames(
46+
inputClass,
47+
colorClasses[color],
48+
color === 'base' &&
49+
(background
50+
? 'dark:bg-gray-600 dark:border-gray-500'
51+
: 'dark:bg-gray-700 dark:border-gray-600'),
52+
{
53+
'p-2 sm:text-xs': size === 'sm',
54+
'p-2.5 text-sm': size === 'md',
55+
'sm:text-md p-4': size === 'lg'
56+
},
57+
$$props.class
58+
)} />

‎src/routes/forms/input-field.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -264,7 +264,7 @@ The component has the following props, type, and default values. See <a href="/p
264264
<TableDefaultRow items={items2} rowState='hover' />
265265
</TableProp>
266266

267-
<Htwo label="Forwarded Events: DropdownItem" />
267+
<Htwo label="Forwarded Events: Input, Iconinput" />
268268

269269
<div class="flex flex-wrap gap-2">
270270
<Badge large={true}>on:blur</Badge>
@@ -278,4 +278,5 @@ The component has the following props, type, and default values. See <a href="/p
278278
<Badge large={true}>on:mouseleave</Badge>
279279
<Badge large={true}>on:mouseover</Badge>
280280
<Badge large={true}>on:paste</Badge>
281+
<Badge large={true}>on:input</Badge>
281282
</div>

0 commit comments

Comments
 (0)