Skip to content

Commit 6eaaec0

Browse files
siddacoolsiddacool
committed
Search added
1 parent 229ad9b commit 6eaaec0

File tree

18 files changed

+748
-8
lines changed

18 files changed

+748
-8
lines changed

‎src/lib/index.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export type { ComponentWeight } from './types/weight.js';
1212

1313
export type { PositionY, PositionX } from './types/position.js';
1414

15-
export type { DropdownArrowPosition } from './types/special.js';
15+
export type { IconPosition } from './types/special.js';
1616

1717
/** developer tools: helpers: logger */
1818
export { default as createLogger } from '$lib/stories/developer tools/helpers/logger/logger.js';
@@ -134,6 +134,10 @@ export type { CheckboxProps } from '$lib/stories/components/Form/Checkbox/Checkb
134134
export { default as Radio } from '$lib/stories/components/Form/Radio/Radio.svelte';
135135
export type { RadioProps } from '$lib/stories/components/Form/Radio/Radio.svelte';
136136

137+
/** Form: Search */
138+
export { default as Search } from '$lib/stories/components/Form/Search/Search.svelte';
139+
export type { SearchProps } from '$lib/stories/components/Form/Search/Search.svelte';
140+
137141
/** Layout: Paper */
138142
export { default as Paper } from '$lib/stories/components/Layout/Paper/Paper.svelte';
139143
export type { PaperColor, PaperProps } from '$lib/stories/components/Layout/Paper/Paper.svelte';

‎src/lib/stories/components/Form/DatePicker/DatePicker.svelte‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -557,6 +557,7 @@
557557
: getMoment(value, undefined, { timezone, utc }).format(format)}
558558
{readonly}
559559
variant={editable ? 'input' : 'button'}
560+
{size}
560561
>
561562
{#snippet customInputContent()}
562563
{#if customInputContentTyped}

‎src/lib/stories/components/Form/NumericInput/NumericInput.svelte‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -281,6 +281,7 @@
281281
{readonly}
282282
variant="input"
283283
bind:value
284+
{size}
284285
/>
285286
</InputEnclosure>
286287
</div>

‎src/lib/stories/components/Form/PasswordInput/PasswordInput.svelte‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,7 @@
179179
bind:value
180180
{readonly}
181181
variant="input"
182+
{size}
182183
/>
183184

184185
{#if passwordToggle && !disabled}

‎src/lib/stories/components/Form/Search/Events/Events.stories.svelte‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
<script module lang="ts">
2+
import { defineMeta } from '@storybook/addon-svelte-csf';
3+
import { storySearchArgTypes } from '../Search.stories.svelte';
4+
import Search from '../Search.svelte';
5+
import type {
6+
TextInputFocusEvent,
7+
TextInputClipboardEvent,
8+
TextInputKeyboardEvent,
9+
} from '../../TextInput/TextInput.svelte';
10+
11+
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
12+
const { Story } = defineMeta({
13+
component: Search,
14+
tags: ['autodocs'],
15+
argTypes: storySearchArgTypes,
16+
});
17+
</script>
18+
19+
<Story
20+
name="Search"
21+
args={{
22+
onsearch: () => {
23+
console.log('Search Event');
24+
},
25+
}}
26+
/>
27+
28+
<Story
29+
name="Clear"
30+
args={{
31+
onclear: () => {
32+
console.log('Clear Event');
33+
},
34+
}}
35+
/>
36+
37+
<Story
38+
name="Input"
39+
args={{
40+
oninput: (e: Event) => {
41+
const target = e.target as HTMLInputElement;
42+
43+
console.log('Input Event', target.value);
44+
},
45+
}}
46+
/>
47+
48+
<Story
49+
name="Change"
50+
args={{
51+
onchange: (e: Event) => {
52+
const target = e.target as HTMLInputElement;
53+
54+
console.log('onChange Event', target.value);
55+
},
56+
}}
57+
/>
58+
59+
<!-- `e: TextInputFocusEvent` -->
60+
<Story
61+
name="Focus"
62+
args={{
63+
onfocus: (e: TextInputFocusEvent) => {
64+
const target = e.target as HTMLInputElement;
65+
66+
console.log('onfocus Event', target);
67+
},
68+
}}
69+
/>
70+
71+
<!-- `e: TextInputFocusEvent` -->
72+
<Story
73+
name="Blur"
74+
args={{
75+
onblur: (e: TextInputFocusEvent) => {
76+
const target = e.target as HTMLInputElement;
77+
78+
console.log('onblur Event', target);
79+
},
80+
}}
81+
/>
82+
83+
<!-- `e: TextInputClipboardEvent` -->
84+
<Story
85+
name="Copy"
86+
args={{
87+
oncopy: (e: TextInputClipboardEvent) => {
88+
const target = e.target as HTMLInputElement;
89+
90+
console.log('oncopy Event', target);
91+
},
92+
}}
93+
/>
94+
95+
<!-- `e: TextInputClipboardEvent` -->
96+
<Story
97+
name="Cut"
98+
args={{
99+
oncut: (e: TextInputClipboardEvent) => {
100+
const target = e.target as HTMLInputElement;
101+
102+
console.log('oncut Event', target);
103+
},
104+
}}
105+
/>
106+
107+
<!-- `e: TextInputClipboardEvent` -->
108+
<Story
109+
name="Paste"
110+
args={{
111+
onpaste: (e: TextInputClipboardEvent) => {
112+
const target = e.target as HTMLInputElement;
113+
114+
console.log('onpaste Event', target);
115+
},
116+
}}
117+
/>
118+
119+
<Story
120+
name="KeyDown"
121+
args={{
122+
onkeydown: (e: TextInputKeyboardEvent) => {
123+
console.log('onkeydown Event', e.key);
124+
},
125+
}}
126+
/>
127+
128+
<Story
129+
name="KeyPress"
130+
args={{
131+
onkeypress: (e: TextInputKeyboardEvent) => {
132+
console.log('onkeypress Event', e.key);
133+
},
134+
}}
135+
/>
136+
137+
<Story
138+
name="KeyUp"
139+
args={{
140+
onkeyup: (e: TextInputKeyboardEvent) => {
141+
console.log('onkeyup Event', e.key);
142+
},
143+
}}
144+
/>

‎src/lib/stories/components/Form/Search/Roundness/Roundness.stories.svelte‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script module>
2+
import { defineMeta } from '@storybook/addon-svelte-csf';
3+
import Search from '../Search.svelte';
4+
import { storySearchArgTypes } from '../Search.stories.svelte';
5+
6+
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
7+
const { Story } = defineMeta({
8+
component: Search,
9+
tags: ['autodocs'],
10+
argTypes: storySearchArgTypes,
11+
args: { value: 'Hello world!' },
12+
});
13+
</script>
14+
15+
<Story name="Roundness 1" />
16+
17+
<Story name="Roundness 2" args={{ roundness: 2 }} />
18+
19+
<Story name="Roundness 3" args={{ roundness: 3 }} />
20+
21+
<Story name="Roundness 0" args={{ roundness: 0 }} />

‎src/lib/stories/components/Form/Search/Search.stories.svelte‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<script module lang="ts">
2+
import { defineMeta } from '@storybook/addon-svelte-csf';
3+
import Search from './Search.svelte';
4+
import type { StoryBookArgTypes } from '$lib/storybook-types.js';
5+
import { componentRoundnessArray } from '$lib/types/roundness.js';
6+
import { componentSizeArray } from '$lib/types/size.js';
7+
8+
export const storySearchArgTypes: StoryBookArgTypes = {
9+
roundness: {
10+
control: { type: 'select' },
11+
options: componentRoundnessArray,
12+
},
13+
size: {
14+
control: { type: 'select' },
15+
options: componentSizeArray,
16+
},
17+
};
18+
19+
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
20+
const { Story } = defineMeta({
21+
component: Search,
22+
tags: ['autodocs'],
23+
argTypes: storySearchArgTypes,
24+
args: { value: 'Hello world!' },
25+
});
26+
27+
let value = $state('Something');
28+
</script>
29+
30+
<!-- Search with default style -->
31+
<Story name="Default" />
32+
33+
<Story name="Clearable" asChild>
34+
<Search bind:value onclear={() => (value = '')} />
35+
</Story>
36+
37+
<Story name="Placeholder" args={{ value: '', placeholder: 'Type something...' }} />
38+
39+
<Story name="No Outline" args={{ outline: false }} />
40+
41+
<Story name="Error" args={{ error: true }} />
42+
43+
<Story name="Disabled" args={{ disabled: true }} />
44+
45+
<Story name="Read only" args={{ readonly: true }} />

0 commit comments

Comments
 (0)