Skip to main content

Examples

App.svelte
<!-- https://eugenkiss.github.io/7guis/tasks#crud -->

<script>
let people = [
{ first: 'Hans', last: 'Emil' },
{ first: 'Max', last: 'Mustermann' },
{ first: 'Roman', last: 'Tisch' }
];

let prefix = '';
let first = '';
let last = '';
let i = 0;

$: filteredPeople = prefix
? people.filter((person) => {
const name = `${person.last}, ${person.first}`;
return name.toLowerCase().startsWith(prefix.toLowerCase());
})
: people;

$: selected = filteredPeople[i];

$: reset_inputs(selected);

function create() {
people = people.concat({ first, last });
i = people.length - 1;
first = last = '';
}

function update() {
selected.first = first;
selected.last = last;
people = people;
}

function remove() {
// Remove selected person from the source array (people), not the filtered array
const index = people.indexOf(selected);
people = [...people.slice(0, index), ...people.slice(index + 1)];

first = last = '';
i = Math.min(i, filteredPeople.length - 2);
}

function reset_inputs(person) {
first = person ? person.first : '';
last = person ? person.last : '';
}
</script>

<input placeholder="filter prefix" bind:value={prefix} />

<select bind:value={i} size={5}>
{#each filteredPeople as person, i}
<option value={i}>{person.last}, {person.first}</option>
{/each}
</select>

<label><input bind:value={first} placeholder="first" /></label>
<label><input bind:value={last} placeholder="last" /></label>

<div class="buttons">
<button on:click={create} disabled={!first || !last}>create</button>
<button on:click={update} disabled={!first || !last || !selected}>update</button>
<button on:click={remove} disabled={!selected}>delete</button>
</div>

<style>
* {
font-family: inherit;
font-size: inherit;
}

input {
display: block;
margin: 0 0 0.5em 0;
}

select {
float: left;
margin: 0 1em 1em 0;
width: 14em;
}

.buttons {
clear: both;
}
</style>

/* App.svelte generated by Svelte v4.2.19 */
import {
SvelteComponent,
add_render_callback,
append,
append_styles,
attr,
destroy_each,
detach,
element,
ensure_array_like,
init,
insert,
listen,
noop,
run_all,
safe_not_equal,
select_option,
select_value,
set_data,
set_input_value,
space,
text
} from "svelte/internal";

import "svelte/internal/disclose-version";

function add_css(target) {
append_styles(target, "svelte-lxvsk7", ".svelte-lxvsk7{font-family:inherit;font-size:inherit}input.svelte-lxvsk7{display:block;margin:0 0 0.5em 0}select.svelte-lxvsk7{float:left;margin:0 1em 1em 0;width:14em}.buttons.svelte-lxvsk7{clear:both}");
}

function get_each_context(ctx, list, i) {
const child_ctx = ctx.slice();
child_ctx[15] = list[i];
child_ctx[3] = i;
return child_ctx;
}

// (56:1) {#each filteredPeople as person, i}
function create_each_block(ctx) {
let option;
let t0_value = /*person*/ ctx[15].last + "";
let t0;
let t1;
let t2_value = /*person*/ ctx[15].first + "";
let t2;
let option_value_value;

return {
c() {
option = element("option");
t0 = text(t0_value);
t1 = text(", ");
t2 = text(t2_value);
option.__value = option_value_value = /*i*/ ctx[3];
set_input_value(option, option.__value);
attr(option, "class", "svelte-lxvsk7");
},
m(target, anchor) {
insert(target, option, anchor);
append(option, t0);
append(option, t1);
append(option, t2);
},
p(ctx, dirty) {
if (dirty & /*filteredPeople*/ 2 && t0_value !== (t0_value = /*person*/ ctx[15].last + "")) set_data(t0, t0_value);
if (dirty & /*filteredPeople*/ 2 && t2_value !== (t2_value = /*person*/ ctx[15].first + "")) set_data(t2, t2_value);
},
d(detaching) {
if (detaching) {
detach(option);
}
}
};
}

function create_fragment(ctx) {
let input0;
let t0;
let select;
let select_size_value;
let t1;
let label0;
let input1;
let t2;
let label1;
let input2;
let t3;
let div;
let button0;
let t4;
let button0_disabled_value;
let t5;
let button1;
let t6;
let button1_disabled_value;
let t7;
let button2;
let t8;
let button2_disabled_value;
let mounted;
let dispose;
let each_value = ensure_array_like(/*filteredPeople*/ ctx[1]);
let each_blocks = [];

for (let i = 0; i < each_value.length; i += 1) {
each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
}
result = svelte.compile(source, {
generate:
css:
});
.svelte-lxvsk7{font-family:inherit;font-size:inherit}input.svelte-lxvsk7{display:block;margin:0 0 0.5em 0}select.svelte-lxvsk7{float:left;margin:0 1em 1em 0;width:14em}.buttons.svelte-lxvsk7{clear:both}