@swr-data-lab/components 1.0.11 → 1.1.0
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/.storybook/preview.ts
CHANGED
package/package.json
CHANGED
|
@@ -43,6 +43,7 @@
|
|
|
43
43
|
"storybook": "^8.3.0",
|
|
44
44
|
"svelte": "^4.2.7",
|
|
45
45
|
"svelte-check": "^4.0.0",
|
|
46
|
+
"svelte-select": "^5.8.3",
|
|
46
47
|
"typescript": "^5.0.0",
|
|
47
48
|
"vite": "^5.0.3",
|
|
48
49
|
"wait-on": "^8.0.1"
|
|
@@ -60,5 +61,5 @@
|
|
|
60
61
|
"svelte": "./src/index.js"
|
|
61
62
|
}
|
|
62
63
|
},
|
|
63
|
-
"version": "1.0
|
|
64
|
+
"version": "1.1.0"
|
|
64
65
|
}
|
|
@@ -0,0 +1,249 @@
|
|
|
1
|
+
<script context="module">
|
|
2
|
+
import Select from './Select.svelte';
|
|
3
|
+
import jobsData from './mock_data/jobs.json';
|
|
4
|
+
|
|
5
|
+
export const meta = {
|
|
6
|
+
title: 'Input Components/Select',
|
|
7
|
+
component: Select,
|
|
8
|
+
|
|
9
|
+
// FIXME: remove this manual documentation when autodocs are fixed
|
|
10
|
+
parameters: {
|
|
11
|
+
docs: {
|
|
12
|
+
description: {
|
|
13
|
+
component:
|
|
14
|
+
'This component is a select input with a search feature and various options such as grouped items, multi-select etc. based on https://github.com/rob-balfre/svelte-select'
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
argTypes: {
|
|
19
|
+
inputId: {
|
|
20
|
+
description: "The input field's ID",
|
|
21
|
+
control: 'text',
|
|
22
|
+
type: { name: 'string', required: false },
|
|
23
|
+
defaultValue: 'select'
|
|
24
|
+
},
|
|
25
|
+
placeholder: {
|
|
26
|
+
description: "The input field's placeholder text",
|
|
27
|
+
control: 'text',
|
|
28
|
+
type: { name: 'string', required: false },
|
|
29
|
+
defaultValue: 'Bitte auswählen'
|
|
30
|
+
},
|
|
31
|
+
groupHeaderSelectable: {
|
|
32
|
+
description: 'Whether the group names should be selectable as well',
|
|
33
|
+
type: { name: 'boolean', required: false },
|
|
34
|
+
defaultValue: 'false'
|
|
35
|
+
},
|
|
36
|
+
value: {
|
|
37
|
+
description: 'The currently selected option',
|
|
38
|
+
type: { name: 'any', required: false }
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
</script>
|
|
43
|
+
|
|
44
|
+
<script>
|
|
45
|
+
import { Story, Template } from '@storybook/addon-svelte-csf';
|
|
46
|
+
import {
|
|
47
|
+
userEvent,
|
|
48
|
+
within,
|
|
49
|
+
expect,
|
|
50
|
+
getByTestId,
|
|
51
|
+
getAllByLabelText,
|
|
52
|
+
getByText
|
|
53
|
+
} from '@storybook/test';
|
|
54
|
+
import { hasContext } from 'svelte';
|
|
55
|
+
import Input from '../Input/Input.svelte';
|
|
56
|
+
|
|
57
|
+
let selectedItem;
|
|
58
|
+
let component;
|
|
59
|
+
</script>
|
|
60
|
+
|
|
61
|
+
<Template let:args>
|
|
62
|
+
<label for={args.inputId}>Select</label>
|
|
63
|
+
|
|
64
|
+
<Select {...args} bind:this={component} bind:value={selectedItem} />
|
|
65
|
+
|
|
66
|
+
{#if selectedItem}
|
|
67
|
+
<code class="output">
|
|
68
|
+
{JSON.stringify(selectedItem)}
|
|
69
|
+
</code>
|
|
70
|
+
{/if}
|
|
71
|
+
</Template>
|
|
72
|
+
|
|
73
|
+
<Story
|
|
74
|
+
name="Simple"
|
|
75
|
+
args={{
|
|
76
|
+
inputId: 'select',
|
|
77
|
+
items: [
|
|
78
|
+
{ value: 'chocolate', label: 'Chocolate' },
|
|
79
|
+
{ value: 'cake', label: 'Cake' },
|
|
80
|
+
{ value: 'ice-cream', label: 'Ice Cream' }
|
|
81
|
+
]
|
|
82
|
+
}}
|
|
83
|
+
play={async ({ canvasElement, step }) => {
|
|
84
|
+
const canvas = within(canvasElement);
|
|
85
|
+
const select = canvas.getByLabelText('Select');
|
|
86
|
+
|
|
87
|
+
await step('Clicking an option selects that item', async () => {
|
|
88
|
+
await userEvent.click(select);
|
|
89
|
+
await userEvent.click(canvas.getByText('Cake'));
|
|
90
|
+
expect(selectedItem).toEqual({ value: 'cake', label: 'Cake' });
|
|
91
|
+
});
|
|
92
|
+
|
|
93
|
+
await step('Entering a complete label selects that item', async () => {
|
|
94
|
+
await userEvent.type(select, 'Chocolate{enter}');
|
|
95
|
+
expect(selectedItem).toEqual({ value: 'chocolate', label: 'Chocolate' });
|
|
96
|
+
});
|
|
97
|
+
|
|
98
|
+
await step('Entering a unique part of a label selects the matching item', async () => {
|
|
99
|
+
await userEvent.type(select, 'Ice{enter}');
|
|
100
|
+
expect(selectedItem).toEqual({ value: 'ice-cream', label: 'Ice Cream' });
|
|
101
|
+
});
|
|
102
|
+
}}
|
|
103
|
+
/>
|
|
104
|
+
|
|
105
|
+
<Story
|
|
106
|
+
name="Grouped"
|
|
107
|
+
args={{
|
|
108
|
+
items: [
|
|
109
|
+
{ value: 'chocolate', label: 'Chocolate', group: 'Sweet' },
|
|
110
|
+
{ value: 'pizza', label: 'Pizza', group: 'Savory' },
|
|
111
|
+
{ value: 'cake', label: 'Cake', group: 'Sweet' },
|
|
112
|
+
{ value: 'chips', label: 'Chips', group: 'Savory' },
|
|
113
|
+
{ value: 'ice-cream', label: 'Ice Cream', group: 'Sweet' }
|
|
114
|
+
]
|
|
115
|
+
}}
|
|
116
|
+
/>
|
|
117
|
+
|
|
118
|
+
<Story
|
|
119
|
+
name="Grouped (group header selectable)"
|
|
120
|
+
args={{
|
|
121
|
+
inputId: 'job-select',
|
|
122
|
+
placeholder: 'Ihr Beruf',
|
|
123
|
+
groupHeaderSelectable: true,
|
|
124
|
+
items: [
|
|
125
|
+
{ value: 'chocolate', label: 'Chocolate', group: 'Sweet' },
|
|
126
|
+
{ value: 'pizza', label: 'Pizza', group: 'Savory' },
|
|
127
|
+
{ value: 'cake', label: 'Cake', group: 'Sweet' },
|
|
128
|
+
{ value: 'chips', label: 'Chips', group: 'Savory' },
|
|
129
|
+
{ value: 'ice-cream', label: 'Ice Cream', group: 'Sweet' }
|
|
130
|
+
]
|
|
131
|
+
}}
|
|
132
|
+
play={async ({ canvasElement, step }) => {
|
|
133
|
+
const canvas = within(canvasElement);
|
|
134
|
+
const select = canvas.getByLabelText('Select');
|
|
135
|
+
|
|
136
|
+
await step('Clicking an option header selects that header item', async () => {
|
|
137
|
+
await userEvent.click(select);
|
|
138
|
+
await userEvent.click(canvas.getByText('Savory'));
|
|
139
|
+
expect(selectedItem).toEqual({
|
|
140
|
+
groupHeader: true,
|
|
141
|
+
id: 'Savory',
|
|
142
|
+
label: 'Savory',
|
|
143
|
+
selectable: true,
|
|
144
|
+
value: 'Savory'
|
|
145
|
+
});
|
|
146
|
+
});
|
|
147
|
+
|
|
148
|
+
await step('Entering a label text selects its group header', async () => {
|
|
149
|
+
await userEvent.type(select, 'Chocolate{enter}');
|
|
150
|
+
expect(selectedItem).toEqual({
|
|
151
|
+
groupHeader: true,
|
|
152
|
+
id: 'Sweet',
|
|
153
|
+
label: 'Sweet',
|
|
154
|
+
selectable: true,
|
|
155
|
+
value: 'Sweet'
|
|
156
|
+
});
|
|
157
|
+
});
|
|
158
|
+
}}
|
|
159
|
+
/>
|
|
160
|
+
|
|
161
|
+
<Story
|
|
162
|
+
name="Custom items"
|
|
163
|
+
play={async ({ canvasElement, step }) => {
|
|
164
|
+
const canvas = within(canvasElement);
|
|
165
|
+
const select = canvas.getByLabelText('Berufe');
|
|
166
|
+
|
|
167
|
+
await step('Render custom list item with the supplied data', async () => {
|
|
168
|
+
await userEvent.type(select, 'Journalismus');
|
|
169
|
+
expect(canvas.getByTestId('custom-item-title').innerText).toEqual('Journalismus');
|
|
170
|
+
expect(canvas.getByTestId('custom-item-addon').innerText).toContain('Redakteur/in');
|
|
171
|
+
await userEvent.type(select, '{enter}');
|
|
172
|
+
expect(selectedItem.details.title).toEqual('Journalismus');
|
|
173
|
+
});
|
|
174
|
+
|
|
175
|
+
await step('Entering an item\'s "title" selects that item', async () => {
|
|
176
|
+
await userEvent.type(select, 'Tierpflege{enter}');
|
|
177
|
+
expect(selectedItem.details.title).toEqual('Tierpflege');
|
|
178
|
+
});
|
|
179
|
+
|
|
180
|
+
await step('Entering an item\'s "addon" selects that item', async () => {
|
|
181
|
+
await userEvent.type(select, 'Zirkuskünstler{enter}');
|
|
182
|
+
expect(selectedItem.details.title).toEqual('Schauspiel und Tanz');
|
|
183
|
+
});
|
|
184
|
+
}}
|
|
185
|
+
>
|
|
186
|
+
<label for="job-select">Berufe</label>
|
|
187
|
+
|
|
188
|
+
<Select
|
|
189
|
+
bind:value={selectedItem}
|
|
190
|
+
inputId="job-select"
|
|
191
|
+
placeholder="z.B. Taxifahrer/in"
|
|
192
|
+
items={jobsData
|
|
193
|
+
.sort((a, b) => a.label.localeCompare(b.label))
|
|
194
|
+
.map((item) => ({
|
|
195
|
+
value: item.value,
|
|
196
|
+
label: `${item.label}: ${item.add_on}`, // used for filtering
|
|
197
|
+
details: {
|
|
198
|
+
title: item.label, // used for display
|
|
199
|
+
addon: item.add_on // used for display
|
|
200
|
+
}
|
|
201
|
+
}))}
|
|
202
|
+
groupHeaderSelectable={false}
|
|
203
|
+
>
|
|
204
|
+
<div slot="item" let:item class="custom-item">
|
|
205
|
+
<h4 class="custom-item-title" data-testid="custom-item-title">
|
|
206
|
+
{item.details.title}
|
|
207
|
+
</h4>
|
|
208
|
+
<p class="custom-item-addon" data-testid="custom-item-addon">{item.details.addon}</p>
|
|
209
|
+
</div>
|
|
210
|
+
<div slot="selection" let:selection class="selection">
|
|
211
|
+
{selection.details.title}
|
|
212
|
+
</div>
|
|
213
|
+
</Select>
|
|
214
|
+
|
|
215
|
+
{#if selectedItem}
|
|
216
|
+
<code class="output">
|
|
217
|
+
{JSON.stringify(selectedItem)}
|
|
218
|
+
</code>
|
|
219
|
+
{/if}
|
|
220
|
+
</Story>
|
|
221
|
+
|
|
222
|
+
<style>
|
|
223
|
+
.output {
|
|
224
|
+
display: block;
|
|
225
|
+
margin-top: 1rem;
|
|
226
|
+
padding: 1rem;
|
|
227
|
+
background: #dadada;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.custom-item {
|
|
231
|
+
font-family: sans-serif;
|
|
232
|
+
font-size: 0.9rem;
|
|
233
|
+
margin-top: 0.2rem;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.custom-item-title {
|
|
237
|
+
margin: 0 0 0 -0.8rem;
|
|
238
|
+
padding: 0;
|
|
239
|
+
line-height: 1.4;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.custom-item-addon {
|
|
243
|
+
margin: 0 0 0 -0.8rem;
|
|
244
|
+
padding: 0;
|
|
245
|
+
line-height: 1;
|
|
246
|
+
opacity: 0.6;
|
|
247
|
+
font-size: 0.8rem;
|
|
248
|
+
}
|
|
249
|
+
</style>
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import Select from 'svelte-select';
|
|
3
|
+
|
|
4
|
+
// FUTURE: is it possible to highlight match in select options?
|
|
5
|
+
|
|
6
|
+
/** FIXME:
|
|
7
|
+
* NOTE: Storybook autodocs are not working for this component
|
|
8
|
+
* because of the Select import. Set the docs manually instead. */
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* The interface for select options
|
|
12
|
+
*/
|
|
13
|
+
interface Option {
|
|
14
|
+
value: string;
|
|
15
|
+
label: string;
|
|
16
|
+
group?: string;
|
|
17
|
+
details?: any;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* The input field's ID
|
|
22
|
+
*/
|
|
23
|
+
export let inputId: string = 'select';
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* The input field's placeholder text
|
|
27
|
+
*/
|
|
28
|
+
export let placeholder: string = 'Bitte auswählen';
|
|
29
|
+
|
|
30
|
+
/**
|
|
31
|
+
* The list of select options
|
|
32
|
+
*/
|
|
33
|
+
export let items: Option[] = [];
|
|
34
|
+
|
|
35
|
+
let groupBy: ((item: Option) => string) | undefined;
|
|
36
|
+
$: groupBy =
|
|
37
|
+
items.length > 0 && items.every((item) => item.group)
|
|
38
|
+
? (item: Option) => item.group as string
|
|
39
|
+
: undefined;
|
|
40
|
+
|
|
41
|
+
/**
|
|
42
|
+
* Whether the group names should be selectable as well
|
|
43
|
+
*/
|
|
44
|
+
export let groupHeaderSelectable: boolean = false;
|
|
45
|
+
|
|
46
|
+
export let value: Option | undefined;
|
|
47
|
+
</script>
|
|
48
|
+
|
|
49
|
+
<!--
|
|
50
|
+
This component is a select input with search feature
|
|
51
|
+
and various options such as grouped items, multi-select etc.
|
|
52
|
+
based on https://github.com/rob-balfre/svelte-select
|
|
53
|
+
@component
|
|
54
|
+
-->
|
|
55
|
+
|
|
56
|
+
<Select {items} {groupBy} id={inputId} {placeholder} {groupHeaderSelectable} bind:value>
|
|
57
|
+
<svelte:fragment slot="item" let:item>
|
|
58
|
+
<slot name="item" {item}>
|
|
59
|
+
{item.label}
|
|
60
|
+
</slot>
|
|
61
|
+
</svelte:fragment>
|
|
62
|
+
<svelte:fragment slot="selection" let:selection>
|
|
63
|
+
<slot name="selection" {selection}>
|
|
64
|
+
{selection.label}
|
|
65
|
+
</slot>
|
|
66
|
+
</svelte:fragment>
|
|
67
|
+
</Select>
|
|
68
|
+
|
|
69
|
+
<style lang="scss">
|
|
70
|
+
@import '../styles/base.scss';
|
|
71
|
+
|
|
72
|
+
// TODO: styling (font etc.)
|
|
73
|
+
// .svelte-select, .svelte-select-list {
|
|
74
|
+
// @extend %copy;
|
|
75
|
+
// }
|
|
76
|
+
// --border: 3px solid blue;
|
|
77
|
+
// --border-radius: 10px;
|
|
78
|
+
// --placeholder-color: blue;
|
|
79
|
+
</style>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
[{"value": "111", "label": "Landwirtschaft", "add_on": "Landwirt/in, Erntehelfer/in, Agraringenieur/in, Agrartechniker/in, Pflanzentechnolog/in"}, {"value": "112", "label": "Tierwirtschaft", "add_on": "Tierz\u00fcchter/in, Tierwirt/in, Imker/in"}, {"value": "113", "label": "Pferdewirtschaft", "add_on": "Pferdewirt/in, Pferdezucht, Hufschmied/in, Kutscher/in, Reitsportler/in"}, {"value": "114", "label": "Fischwirtschaft", "add_on": "Fischer/in, Fischz\u00fcchter/in, Fischereitechniker/in, Teichbauer/in"}, {"value": "115", "label": "Tierpflege", "add_on": "Tierpfleger/in, Hundetrainer/in, Zootiermeister/in"}, {"value": "116", "label": "Weinbau", "add_on": "Weinbauer/in, Winzer/in, Rebentechniker/in"}, {"value": "117", "label": "Forstwirtschaft und Landschaftspflege", "add_on": "Waldarbeiter/in, Forstwirt/in, Landschaftspfleger/in, Naturschutzbeauftragte/r, J\u00e4ger/in"}, {"value": "121", "label": "Gartenbau", "add_on": "Gartenbauer/in, G\u00e4rtner/in, Gem\u00fcse-/Obstbauer/in, Landschaftsarchitekt/in, Landschaftsplaner/in"}, {"value": "122", "label": "Floristik", "add_on": "Florist/in, Blumenbinder/in"}, {"value": "211", "label": "Berg- und Tagebau", "add_on": "Bergbautechnolog/in, Bergmechaniker/in, Sprenger/in, Bohrmeister/in"}, {"value": "212", "label": "Naturstein-, Mineral- und Baustoffherstellung", "add_on": "Aufbereitungsmechaniker/in, Steinmetz/in, Baustoffmaschinist/in, Betonwerker/in"}, {"value": "213", "label": "Industrielle Glasherstellung und -verarbeitung", "add_on": "Glas- und Fensterbautechniker/in, Glastechniker/in, Brillenoptiker/in"}, {"value": "214", "label": "Industrielle Keramikherstellung und -verarbeitung", "add_on": "Keramiktechniker/in, Gipsmodelleur/in"}, {"value": "221", "label": "Kunststoff- und Kautschukherstellung und -verarbeitung", "add_on": "Plastverarbeiter/in, Gummiverarbeiter/in, Reifenbauer/in"}, {"value": "222", "label": "Farb- und Lacktechnik", "add_on": "Lackierer/in, Farbfachlaborant/in"}, {"value": "223", "label": "Holzbearbeitung und -verarbeitung", "add_on": "Schreiner/in, Tischler/in, Rastaurator/in, Montageleiter/in"}, {"value": "231", "label": "Papier- und Verpackungstechnik", "add_on": "Papieretechniker/in, Kartonagehersteller/in, Verpackungsingenieur/in"}, {"value": "232", "label": "Technische Mediengestaltung", "add_on": "Mediengestalter/in, Grafikdesigner/in, Webdesigner/in, Kreativ-Direktor/in"}, {"value": "233", "label": "Fototechnik und Fotografie", "add_on": "Fotograf/in, Film- und Videolaborant/in"}, {"value": "234", "label": "Drucktechnik, -weiterverarbeitung und Buchbinderei", "add_on": "Buchbinder/in, Drucker/in, Drucktechniker/in"}, {"value": "241", "label": "Metallerzeugung", "add_on": "Stahlarbeiter/in, Industrieschmied/in, Gie\u00dfereimechaniker/in, Kabelarbeiter/in"}, {"value": "242", "label": "Metallbearbeitung", "add_on": "Metallwerker/in, Blechschneider/in, Drahtverarbeiter/in"}, {"value": "243", "label": "Metalloberfl\u00e4chenbehandlung", "add_on": "Metallf\u00e4rber/in, Metalloberfl\u00e4chenveredler/in"}, {"value": "244", "label": "Metallbau und Schwei\u00dftechnik", "add_on": "Schlosser/in, Schmied/in, Schwei\u00dfer/in, Industrietaucher/in"}, {"value": "245", "label": "Feinwerk- und Werkzeugtechnik", "add_on": "Feinmechaniker/in, Werkzeugmechaniker/in, Uhrmacher/in"}, {"value": "251", "label": "Maschinenbau- und Betriebstechnik", "add_on": "Monteur/in, Servicetechniker/in, Kundendienstmechaniker/in, Aufzugsbauer/in, Ableser/in"}, {"value": "252", "label": "Fahrzeug-, Luft-, Raumfahrttechnik und Schiffbautechnik", "add_on": "Kfz-Mechaniker/in, Land- und Baumaschinenmechaniker/in, Luftfahrtingenieur/in, Schiffbauer/in, Zweiradmechaniker/in"}, {"value": "261", "label": "Mechatronik und Automatisierungstechnik", "add_on": "Industrieelektroniker/in, Automatisierungsingenieur/in"}, {"value": "262", "label": "Energietechnik", "add_on": "Elektriker/in, Energie- und Geb\u00e4udetechniker/in, Solartechniker/in, Kabelmonteur/in, Kraftwerksmeister/in"}, {"value": "263", "label": "Elektrotechnik", "add_on": "Elektroniker/in, IT-Servicetechniker/in, Batteriehersteller/in, Chipentwickler/in, Ingenieur/in Elektromobilit\u00e4t"}, {"value": "271", "label": "Technische Forschung und Entwicklung", "add_on": "Produktingenieur/in, Berechnungsingenieur/in, Patentpr\u00fcfer/in, Innovationsmanager/in"}, {"value": "272", "label": "Technisches Zeichnen, Konstruktion, Modellbau", "add_on": "Bauzeichner/in, Technische/r Zeichner/in, CAD-Fachkraft, Konstruktionstechniker/in, Modellbauer/in, Sportger\u00e4tebauer/in"}, {"value": "273", "label": "Technische Produktionsplanung und -steuerung", "add_on": "Arbeits\u00f6konom/in, Betriebsingingenieur/in, Produktionsingenieur/in, Qualit\u00e4tskontrolleur/in"}, {"value": "281", "label": "Textiltechnik und -produktion", "add_on": "Textigestalter/in, Textilmechaniker/in, Textilmaschinenf\u00fchrer/in, Sticker/in, Seiler/in"}, {"value": "282", "label": "Textilverarbeitung", "add_on": "Mode-Designer/in, Bekleidungstechniker/in, \u00c4nderungsschneider/in, N\u00e4her/in, Segelmacher/in, Polsterer/Polsterin"}, {"value": "283", "label": "Leder-, Pelzherstellung und -verarbeitung", "add_on": "Gerber/in, Sattler/in, Schuhmacher/in, Pelzn\u00e4her/in"}, {"value": "291", "label": "Getr\u00e4nkeherstellung", "add_on": "Getr\u00e4nketechnolog/in, Brauer/in, Brenner/in, Weintester/in"}, {"value": "292", "label": "Lebensmittel- und Genussmittelherstellung", "add_on": "B\u00e4cker/in, Konditor/in, Metzger/in, Molkereifacharbeiter/in, Getreidefacharbeiter/in"}, {"value": "293", "label": "Speisenzubereitung", "add_on": "Koch/K\u00f6chin, K\u00fcchenhelfer/in, Chefkoch/Chefk\u00f6chin"}, {"value": "311", "label": "Bauplanung und -\u00fcberwachung, Architektur", "add_on": "Architekt/in, Statitker/in, Bauleiter/in, Bauingenieur/in, Stadt- und Regionalplaner/in, Stra\u00dfen-/Verkehrs-/Br\u00fcckentechniker/in"}, {"value": "312", "label": "Vermessung und Kartografie", "add_on": "Vermessungsfacharbeiter/in, Kartograf/in, Geovisualisierer/in"}, {"value": "321", "label": "Hochbau", "add_on": "Betonbauer/in, Maurer/in, Dachdecker/in, Fassadenbauer/in, Ger\u00fcstbauer/in, Bauleiter/in Hochbau"}, {"value": "322", "label": "Tiefbau", "add_on": "Pflasterer/Pflasterin, Stra\u00dfenbauarbeiter/in, Asphalteur/in, Gleisbauer/in, Bohrarbeiter/in, Kanalbauer/in, Bauleiter/in Tiefbau"}, {"value": "331", "label": "Bodenverlegung", "add_on": "Bodenleger/in, Fliesenleger/in"}, {"value": "332", "label": "Malerei, Stuckateurarbeiten, Bauwerksabdichtung und Bautenschutz", "add_on": "Maler/in, Lackierer/in, Verputzer/in, Gipser/in, Holzschutzsachverst\u00e4ndiger/in"}, {"value": "333", "label": "Aus- und Trockenbau, Isolierung, Zimmerei, Glaserei, Rolladenbau", "add_on": "Trockenbauer/in, Zimmermann/-frau, Bautischler/in, Vollw\u00e4rmeschutz-, Brandschutzfachkraft"}, {"value": "341", "label": "Geb\u00e4udetechnik", "add_on": "Hausmeister/in, Fachkraft Geb\u00e4udetechnik, Sportplatzwart/in"}, {"value": "342", "label": "Klempnerei, Sanit\u00e4r-, Heizungs- und Klimatechnik", "add_on": "Heizungsbauer/in, Klempner/in, Gas- und Wasserinstallateur/in, L\u00fcftungs- und Klimaanlagenbauer/in"}, {"value": "343", "label": "Ver- und Entsorgung", "add_on": "M\u00fcllarbeiter/in, Abfalltechniker/in, Kl\u00e4rwerkfacharbeiter/in, Rohrleger/in, Recycling-Fachkraft"}, {"value": "411", "label": "Mathematik und Statistik", "add_on": "Mathematiker/in, Statistiker/in, Wirtschaftsanalytiker/in"}, {"value": "412", "label": "Biologie", "add_on": "Biologe/Biologin, Biologielaborant/in, Virolog/in, Genetiker/in"}, {"value": "413", "label": "Chemie", "add_on": "Chemiker/in, Chemielaborant/in, Lebensmittellaborant/in, Textillaborant/in"}, {"value": "414", "label": "Physik", "add_on": "Physiker/in, Werkstoffpr\u00fcfer/in, Baustoffpr\u00fcfer/in, Akustiker/in, Astronom/in"}, {"value": "421", "label": "Geologie, Geografie und Meteorologie", "add_on": "Geotechniker/in, Geologe/Geologin, Meeresforscher/in, Meteorologe/Meteorologin"}, {"value": "422", "label": "Umweltschutztechnik", "add_on": "Umweltschutzlabortechniker/in, Wasser- und Bodenprobennehmer/in, Schornsteinfeger/in"}, {"value": "423", "label": "Umweltmanagement und -beratung", "add_on": "Energieberater/in, Umweltgutachter/in, Umweltschutzbeauftragte/r, Strahlenschutztechniker/in"}, {"value": "431", "label": "Informatik", "add_on": "Informatiker/in, Entwickler/in, Data Scientist, KI-Engineer, IT-Fachwirt/in"}, {"value": "432", "label": "IT-Systemanalyse, -Anwendungsberatung und -Vertrieb", "add_on": "Systemarchitekt/in, IT-Support, IT-Berater/in"}, {"value": "433", "label": "IT-Netzwerktechnik, -Koordination, -Administration und -Organisation", "add_on": "Netzwerktechniker/in, IT-Projektkoordinator/in, IT-Administrator/in, Datenbankentwickler/in, Spezialist/in f\u00fcr IT-Sicherheit"}, {"value": "434", "label": "Softwareentwicklung und Programmierung", "add_on": "Backend-Entwickler/in, Frontend-Entwickler/in, Fullstack-Entwickler/in, Software Engineer, Mobile Developer, Game Programmer"}, {"value": "511", "label": "Techischer Eisenbahn-, Luft- und Schiffsverkehrsbetrieb", "add_on": "Stellwerkschlosser/in, Flugzeugabfertiger/in, Matrose/Matrosin, Schiffsmaschinist/in, Funker/in"}, {"value": "512", "label": "\u00dcberwachung und Wartung von Verkehrsinfrastruktur", "add_on": "Stra\u00dfenw\u00e4rter/in, Ingenieur/in Bahnbetrieb, Verkehrsflusssteuerung, Flugsicherung, Hafenaufseher/in, Leuchtturmw\u00e4rter/in"}, {"value": "513", "label": "Lagerwirtschaft, Post, Zustellung, G\u00fcterumschlag", "add_on": "Lagerarbeiter/in, M\u00f6belpacker/in, Plakatierer/in, Brieftr\u00e4ger/in, Paketbote/-botin, Hafenumschlagmeister/in"}, {"value": "514", "label": "Servicekr\u00e4fte im Personenverkehr", "add_on": "Fahrkartenkontrolleur/in, Flugbegleiter/in, Schaffner/in, Reiseberater/in"}, {"value": "515", "label": "\u00dcberwachung und Steuerung Verkehrsbetrieb", "add_on": "Fahrplanplaner/in, Verkehrsmanagement, Fluglotse/Fluglotsin, Fuhrparkverwalter/in"}, {"value": "516", "label": "Kaufleute in Verkehr und Logistik", "add_on": "Verkehrsfachwirt/in, Speditionskaufmann/-frau, Logistiker/in, Taxiunternehmer/in"}, {"value": "521", "label": "Fahrzeugf\u00fchrung im Stra\u00dfenverkehr", "add_on": "Taxifahrer/in, LKW-Fahrer/in, Bus-Fahrer/in, Stra\u00dfenbahnf\u00fchrer/in, Chauffeur/in, Krankentransporteur/in"}, {"value": "522", "label": "Lokf\u00fchrer/innen", "add_on": "Lokf\u00fchrer/in"}, {"value": "523", "label": "Fahrzeugf\u00fchrung im Flugverkehr", "add_on": "Pilot/in, Hubschrauberf\u00fchrer/in"}, {"value": "524", "label": "Fahrzeugf\u00fchrung im Schiffsverkehr", "add_on": "Kapit\u00e4n/in, Nautische/r Schiffsoffizier/in, Binnenschiffer/in"}, {"value": "525", "label": "Bau- und Transportger\u00e4tef\u00fchrung", "add_on": "Baggerfahrer/in, Tiefbaumaschinist/in, Staplerfahrer/in, Kranf\u00fchrer/in, Traktorfahrer/in"}, {"value": "531", "label": "Objekt-, Personen-, Brandschutz und Arbeitssicherheit", "add_on": "Pf\u00f6rtner/in, T\u00fcrsteher/in, Wachmann/-frau, Arbeitsschutzinspektor/in, Feuerwehrmann/-frau, Rettungsschwimmer/in, Detektiv/in, Hundef\u00fchrer/in"}, {"value": "532", "label": "Angestellte Polizist/innen, Gerichtsvollzieher/innen und Gef\u00e4ngnisw\u00e4rter/innen", "add_on": "Kriminaltechniker/in, Fornesiker/in, Gerichtsvollzieher/in, Justizaushelfer/in"}, {"value": "533", "label": "Gewerbe- und Gesundheitsaufsichticht, Desinfektion", "add_on": "Hygienekontrolleur/in, Lebensmittelkontrollassistent/in, Kammerj\u00e4ger/in"}, {"value": "541", "label": "Reinigung", "add_on": "Reinigungskraft, Fahrzeugw\u00e4scher/in, Geb\u00e4udereiniger/in, Textilreiniger/in"}, {"value": "611", "label": "Einkauf und Vertrieb", "add_on": "Eink\u00e4ufer/in, Vertriebsleiter/in, Pfandleiher/in, Autovermieter/in"}, {"value": "612", "label": "Handel", "add_on": "Handelskaufmann/-frau, Exporteur/in, Gro\u00dfh\u00e4ndler/in, Gebrauchtwarenh\u00e4ndler/in"}, {"value": "613", "label": "Immobilienwirtschaft, Facility-Management", "add_on": "Immobilienkaufmann/-frau, Makler/in, Immobilienberater/in, Immobilienverwalter/in, Geb\u00e4udemanager/in"}, {"value": "621", "label": "Verkauf (ohne Produktspezialisierung)", "add_on": "Kassierer/in, Filialleiter/in, Einzelhandelskaufmann/-frau (ohne Produktspezialisierung)"}, {"value": "622", "label": "Verkauf von Bekleidung, Elektrowaren, KFZ, Hartwaren", "add_on": "Bekleidungsverk\u00e4ufer/in, B\u00fcrobedarfverk\u00e4ufer/in, Elektrofachverk\u00e4ufer/in, M\u00f6belverk\u00e4ufer/in, Juwelier/in, Baumarktfachberater/in, Autoh\u00e4ndler/in"}, {"value": "623", "label": "Verkauf von Lebensmitteln", "add_on": "B\u00e4ckereifachverk\u00e4ufer/in, Metzgereifachverk\u00e4ufer/in, Imbissverk\u00e4ufer/in"}, {"value": "624", "label": "Verkauf von drogerie- und apotheken\u00fcblichen Waren und Medizinbedarf", "add_on": "Drogerieverk\u00e4ufer/in, Fachberater/in Medizintechnik"}, {"value": "625", "label": "Buch-, Kunst-, Antiquit\u00e4ten- und Musikfachhandel", "add_on": "Buchh\u00e4ndler/in, Antiquit\u00e4tenh\u00e4ndler/in, Galerist/in, Musikfachh\u00e4ndler/in"}, {"value": "631", "label": "Tourismus und Sport", "add_on": "Reiseb\u00fcrokaufmann/-frau, Fachwirt/in Tourismus, Sport\u00f6konom/in, Fitnessstudioleiter/in, Animateur/in, Reisef\u00fchrer/in"}, {"value": "632", "label": "Hotellerie", "add_on": "Hotelkaufmann/-frau, Hotelfachkraft, Hotelmanager/in, Zimmerm\u00e4dchen/Roomboy"}, {"value": "633", "label": "Gastronomie", "add_on": "Kellner/in, Servicekraft Gastronomie, Geschirrsp\u00fcler/in, Barkeeper/in, Barista, Caterer/Caterin, Kantinenleiter/in"}, {"value": "634", "label": "Veranstaltungsservice, -management", "add_on": "Host/Hostess, Event-Manager/in, Kulturmanager/in, Fachwirt/in Messe- und Kongresswesen"}, {"value": "711", "label": "Gesch\u00e4ftsf\u00fchrung und Vorstand", "add_on": "Gesch\u00e4ftsf\u00fchrer/in, Vorstand/Vorst\u00e4ndin"}, {"value": "712", "label": "Angeh\u00f6hrige gesetzgebender K\u00f6rperschaften, Interessenorganisationen", "add_on": "Betriebsrat/-r\u00e4tin, Personalrat/-r\u00e4tin, Gleichstellungsbeauftragte/r, B\u00fcrgermeister/in, Stadtrat/-r\u00e4tin"}, {"value": "713", "label": "Unternehmensorganisation und -strategie", "add_on": "Betriebswirt/in, Unternehmensberater/in, Projektleiter/in, CTO, CPO"}, {"value": "714", "label": "B\u00fcro und Sekretariat", "add_on": "B\u00fcrokaufmann/-frau, Sachbearbeiter/in, Sekret\u00e4r/in, Fremdsprachenkorrespondent/in, \u00dcbersetzer/in, Korrekturleser/in"}, {"value": "715", "label": "Personalwesen und -dienstleistung", "add_on": "Personalmanager/in, Personalvermittler/in, Recruiter/in"}, {"value": "721", "label": "Versicherungs- und Finanzdienstleistungen", "add_on": "Bankkaufmann/-frau, Kreditberater/in, Verm\u00f6gensberater/in, Versicherungsmakler/in, Financial Analyst/in"}, {"value": "722", "label": "Rechnungswesen, Controlling und Revision", "add_on": "Buchhalter/in, Lohnbuchhalter/in, \u00d6konom/in, Controller/in, Wirtschaftspr\u00fcfer/in"}, {"value": "723", "label": "Steuerberatung", "add_on": "Steuerberater/in, Steuerfachangestellte/r"}, {"value": "731", "label": "Rechtsberatung, -sprechung und -ordnung", "add_on": "Angestellte/r Anwalt/Anw\u00e4ltin, Rechtsanwaltsfachangestellte/r, Angestellte/r Notar/in"}, {"value": "732", "label": "Angestellte in der Verwaltung", "add_on": "Gesundheitskaufmann/-frau, Praxismanager/in, Sozialversicherungsfachangestellte/r"}, {"value": "733", "label": "Medien-Dokumentations- und -Informationsdienst", "add_on": "Archivar/in, Bibliothekar/in, Informationswissenschaftler/in, Dokumentar/in"}, {"value": "811", "label": "Arzt- und Praxishilfe", "add_on": "Medizinische/r Fachangestellte/r, Tiermedizinische/r Fachangestellte/r"}, {"value": "812", "label": "Medizinisches Laboratorium", "add_on": "Laborarzt/-\u00e4rztin, Medizinische/r Laborant/in, Biomedizinische/r Fachanalytiker/in"}, {"value": "813", "label": "Pflegekr\u00e4fte und Notfallsanit\u00e4ter/innen", "add_on": "Krankenpfleger/in, Notfallsanit\u00e4ter/in, OP-Helfer/in, Hebamme/Entbindungshelfer"}, {"value": "814", "label": "\u00c4rzte/\u00c4rztinnen", "add_on": "Arzt/\u00c4rztin, Hausarzt/-\u00e4rztin, Facharzt/-\u00e4rztin, Psychiater/in"}, {"value": "815", "label": "Tiermedizin", "add_on": "Tierarzt/ Tier\u00e4rztin, Veterin\u00e4r/in"}, {"value": "816", "label": "Nicht-\u00e4rztliche Psychotherapie", "add_on": "Psychologische/r Berater/in, Betriebspsycholog/in, Gutachter/in, Psychologe/Psychologin, Therapeut/in"}, {"value": "817", "label": "Nicht-\u00e4rztliche Therapie und Heilkunde", "add_on": "Masseur/in, Chiropraktiker/in, Spieltherapeut/in, Logop\u00e4de/Logop\u00e4din, Heilpraktiker/in, Osteopath/in"}, {"value": "818", "label": "Pharmazie", "add_on": "Fachapotheker/in, Pharmalaborant/in, Pharmazeut/in"}, {"value": "821", "label": "Besch\u00e4ftigte in der Altenpflege", "add_on": "Senionrenbetreuer/in, Altenpfleger/in, Heimleiter/in"}, {"value": "822", "label": "Ern\u00e4hrungs- und Gesundheitsbewertung", "add_on": "Gesundheitsberater/in, Di\u00e4tberater/in, Ern\u00e4hrungswissenschaftler/in"}, {"value": "823", "label": "K\u00f6rperpflege", "add_on": "Friseur/in, Kosmetiker/in, T\u00e4towierer/in, Maskenbildner/in"}, {"value": "824", "label": "Bestattungswesen", "add_on": "Bestatter/in, Sargtr\u00e4ger/in"}, {"value": "825", "label": "Medizintechnik", "add_on": "R\u00f6ntgentechniker/in, Augenoptiker/in, Zahntechnicker/in"}, {"value": "831", "label": "Sozialarbeiter/innen und Erzieher/innen", "add_on": "Erzieher/in, Sozialarbeiter/in, Jugendleiter/in, Heilerzieher/in"}, {"value": "832", "label": "Hauswirtschaft", "add_on": "Haushaltshilfe, Verbraucherberater/in, Hauswirtschafter/in"}, {"value": "833", "label": "Theologie und Gemeindearbeit", "add_on": "Pfarrer/in, Theolog/in, Seelsorger/in, M\u00f6nch, Nonne"}, {"value": "841", "label": "Angestellte Lehrkr\u00e4fte an allgemeinbildenden Schulen", "add_on": "Lehrer/in, Schulleiter/in"}, {"value": "842", "label": "Angestellte Berufsschullehrkr\u00e4fte", "add_on": "Fachlehrer/in, Ausbilder/in, Berufsp\u00e4dagoge/Berufspadagogin"}, {"value": "843", "label": "Lehre und Forschung an Hochschulen", "add_on": "Hochschuldozent/in, Professor/in, wissenschaftliche/r Mitarbeiter/in"}, {"value": "844", "label": "Au\u00dferschullische Bildungseinrichtungen", "add_on": "Bildungsreferent/in, Musiklehrer/in, Kunstlehrer/in, Fremdsprachenlehrer/in"}, {"value": "845", "label": "Au\u00dferschulliche Bildung", "add_on": "\u00dcbungsleiter/in, Fahrleher/in, Tanzlehrer/in, Trainer/in"}, {"value": "911", "label": "Sprach- und Literaturwissenschaften", "add_on": "Linguist/in, Philologe/Philologin, Literaturwissenschaftler/in"}, {"value": "912", "label": "Geisteswissenschaften", "add_on": "Philosoph/in, Historiker/in, Arch\u00e4olog/in, Medienforscher/in"}, {"value": "913", "label": "Gesellschaftswissenschaften", "add_on": "Erzieher/in, Leherer/in, Politologe/Politologin, Soziologe/Soziologin, P\u00e4dagoge/P\u00e4dagogin"}, {"value": "914", "label": "Wirtschaftswissenschaften", "add_on": "Volkswirt/in, Sozial\u00f6konom/in, Marktwirtschaftler/in"}, {"value": "921", "label": "Werbung und Marketing", "add_on": "Produktmanager/in, Werbetexter/in, Callcenteragent/in, Account-Manager/in, Kundenmanager/in"}, {"value": "922", "label": "\u00d6ffentlichkeitsarbeit", "add_on": "Lobbyist/in, Pressesprecher/in, Fundraiser/in, PR-Berater/in"}, {"value": "923", "label": "Verlags- und Medienwirtschaft", "add_on": "Verleger/in, Autorenagent/in, Medienmanager/in, Medienfachwirt/in, Verlagsfachkraft"}, {"value": "924", "label": "Journalismus", "add_on": "Redakteur/in, Lektor/in, Autor/in, Reporter/in, Schriftsteller/in"}, {"value": "931", "label": "Produktdesign ", "add_on": "Autodesigner/in, M\u00f6beldesigner/in"}, {"value": "932", "label": "Innenarchitektur und Raumausstattung", "add_on": "Innenarchitekt/in, Innenausstatter/in, Polsterer/ Polsterin, Ausstellungsdesigner/in"}, {"value": "933", "label": "Kunsthandwerk", "add_on": "Bildene/r K\u00fcnstler/in, Bildhauer/in, Schnitzer/in, Restaurator/in, Spielzeugmacher/in"}, {"value": "934", "label": "Keramik und Glasgestaltung", "add_on": "T\u00f6pfer/in, Keramik- Gold-, Glasmaler/in, Gasbl\u00e4ser/in"}, {"value": "935", "label": "Kunsthandwerkliche Metallgestaltung", "add_on": "Kunstschmied/in, Edelsteinschleifer/in, Goldschmied/in, Graveur/in"}, {"value": "936", "label": "Musikinstrumentenbau", "add_on": "Klavierbauer/in, Restaurateur/in, Stimmer/in"}, {"value": "941", "label": "Musikt\u00e4tigkeiten", "add_on": "Berufsmusiker/in, S\u00e4nger/in, Dirigent/in, Komponist/in, Sounddesigner/in "}, {"value": "942", "label": "Schauspiel und Tanz", "add_on": "Darsteller/in, Synchronsprecher/in, T\u00e4nzer/in, Model, Berufssportler/in, Zirkusk\u00fcnstler/in, Prostituierte/r"}, {"value": "943", "label": "Moderation und Unterhaltung", "add_on": "Kaberettist/in, Comedian, Magier/in, Ansaager/in, Moderator/in"}, {"value": "944", "label": "Theater- und Filmproduktion", "add_on": "Filmproduzent/in, Fernsehproduzent/in, Dramaturg/in, Innpizient/in, Regisseur/in, Theaterdirektor/in, Agent/in"}, {"value": "945", "label": "Veranstaltungstechnik", "add_on": "Filmvorf\u00fcherr/in, Kameraman/-frau, Cutter, Pyrotechnicker/in, Lichtmeister/in"}, {"value": "946", "label": "B\u00fchnen- und Kost\u00fcmbildnerei", "add_on": "Requisiteur/in, Set-Dresser, Fundusverwaltter/in, Szenograf/in"}, {"value": "947", "label": "Museum", "add_on": "Kunsthistoriker/in, Konservator/in, Museumsleiter/in, Kunstsachverst\u00e4ndigerr/in"}]
|
package/src/index.js
CHANGED
|
@@ -3,4 +3,5 @@ export { default as Container } from './Container/Container.svelte';
|
|
|
3
3
|
export { default as Autocomplete } from './Autocomplete/Autocomplete.svelte';
|
|
4
4
|
export { default as Switcher } from './Switcher/Switcher.svelte';
|
|
5
5
|
export { default as Input } from './Input/Input.svelte';
|
|
6
|
-
export { default as Button } from './Button/Button.svelte';
|
|
6
|
+
export { default as Button } from './Button/Button.svelte';
|
|
7
|
+
export { default as Select } from './Select/Select.svelte'
|