mirror of https://github.com/sveltejs/svelte
feat: improve `bind:group` behavior (#7892)
track all `#each` variables that could result in a change to the inputs and also update the `$$binding_groups` variable which holds the references to the inputs of each group accordingly. Fixes #7633 Fixes #6112 Fixes #7884pull/8349/head
Tan Li Hau
2 years ago
committed by
GitHub
parent
6476e9b34f
commit
0966d1d282
@ -0,0 +1,52 @@
|
||||
// https://github.com/sveltejs/svelte/issues/7633
|
||||
export default {
|
||||
async test({ assert, target, component, window }) {
|
||||
let inputs = target.querySelectorAll('input');
|
||||
|
||||
assert.equal(inputs[0].checked, true);
|
||||
assert.equal(inputs[1].checked, false);
|
||||
assert.equal(inputs[2].checked, false);
|
||||
|
||||
component.moveDown(0);
|
||||
component.moveDown(1);
|
||||
await Promise.resolve();
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<div class="item">
|
||||
b <label><input name="current" type="radio" value="b"> current</label>
|
||||
</div>
|
||||
<div class="item">
|
||||
c <label><input name="current" type="radio" value="c"> current</label>
|
||||
</div>
|
||||
<div class="item">
|
||||
a <label><input name="current" type="radio" value="a"> current</label>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
|
||||
// after shifting order, should still keep the correct radio checked
|
||||
inputs = target.querySelectorAll('input');
|
||||
assert.equal(inputs[0].checked, false);
|
||||
assert.equal(inputs[1].checked, false);
|
||||
assert.equal(inputs[2].checked, true);
|
||||
|
||||
(component.current = 'b');
|
||||
await Promise.resolve();
|
||||
|
||||
inputs = target.querySelectorAll('input');
|
||||
assert.equal(inputs[0].checked, true);
|
||||
assert.equal(inputs[1].checked, false);
|
||||
assert.equal(inputs[2].checked, false);
|
||||
|
||||
component.moveDown(1);
|
||||
await Promise.resolve();
|
||||
|
||||
// after shifting order, should still keep the correct radio checked
|
||||
inputs = target.querySelectorAll('input');
|
||||
assert.equal(inputs[0].checked, true);
|
||||
assert.equal(inputs[1].checked, false);
|
||||
assert.equal(inputs[2].checked, false);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,36 @@
|
||||
<script>
|
||||
export let list = [
|
||||
{ name: "a", text: "This is a test." },
|
||||
{ name: "b", text: "This is another test." },
|
||||
{ name: "c", text: "This is also a test." },
|
||||
];
|
||||
export let current = "a";
|
||||
export function moveUp(i) {
|
||||
list = [
|
||||
...list.slice(0, Math.max(i - 1, 0)),
|
||||
list[i],
|
||||
list[i - 1],
|
||||
...list.slice(i + 1),
|
||||
];
|
||||
}
|
||||
export function moveDown(i) {
|
||||
moveUp(i + 1);
|
||||
}
|
||||
</script>
|
||||
|
||||
{#each list as item (item.name)}
|
||||
<div class="item">
|
||||
{item.name}
|
||||
{#if true}
|
||||
<label
|
||||
><input
|
||||
type="radio"
|
||||
name="current"
|
||||
bind:group={current}
|
||||
value={item.name}
|
||||
/> current</label
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
@ -0,0 +1,88 @@
|
||||
// https://github.com/sveltejs/svelte/issues/6112
|
||||
export default {
|
||||
async test({ assert, target, component, window }) {
|
||||
let inputs = target.querySelectorAll('input');
|
||||
|
||||
const check = (set) => {
|
||||
for (let i = 0; i < inputs.length; i++) {
|
||||
assert.equal(inputs[i].checked, set.has(i));
|
||||
}
|
||||
};
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<div>1</div>
|
||||
<div>2
|
||||
<div class="arg">
|
||||
<input type="radio" value="a">
|
||||
<input type="radio" value="b">
|
||||
</div>
|
||||
<div class="arg">
|
||||
<input type="radio" value="c">
|
||||
<input type="radio" value="d">
|
||||
</div>
|
||||
</div>
|
||||
<div>3
|
||||
<div class="arg">
|
||||
<input type="radio" value="a">
|
||||
<input type="radio" value="b">
|
||||
</div>
|
||||
<div class="arg">
|
||||
<input type="radio" value="c">
|
||||
<input type="radio" value="d">
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
|
||||
check(new Set([0, 2, 5, 6]));
|
||||
|
||||
const event = new window.Event('change');
|
||||
|
||||
// dom to value
|
||||
inputs[3].checked = true;
|
||||
await inputs[3].dispatchEvent(event);
|
||||
|
||||
check(new Set([0, 3, 5, 6]));
|
||||
assert.equal(component.pipelineOperations[1].operation.args[1].value, 'd');
|
||||
|
||||
// remove item
|
||||
component.pipelineOperations = component.pipelineOperations.slice(1);
|
||||
await Promise.resolve();
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<div>2
|
||||
<div class="arg">
|
||||
<input type="radio" value="a">
|
||||
<input type="radio" value="b">
|
||||
</div>
|
||||
<div class="arg">
|
||||
<input type="radio" value="c">
|
||||
<input type="radio" value="d">
|
||||
</div>
|
||||
</div>
|
||||
<div>3
|
||||
<div class="arg">
|
||||
<input type="radio" value="a">
|
||||
<input type="radio" value="b">
|
||||
</div>
|
||||
<div class="arg">
|
||||
<input type="radio" value="c">
|
||||
<input type="radio" value="d">
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
|
||||
inputs = target.querySelectorAll('input');
|
||||
check(new Set([0, 3, 5, 6]));
|
||||
|
||||
inputs[2].checked = true;
|
||||
await inputs[2].dispatchEvent(event);
|
||||
|
||||
check(new Set([0, 2, 5, 6]));
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,60 @@
|
||||
<script>
|
||||
export let pipelineOperations = [
|
||||
{
|
||||
operation: {
|
||||
name: "foo",
|
||||
args: [],
|
||||
},
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
operation: {
|
||||
name: "bar",
|
||||
args: [
|
||||
{
|
||||
name: "bar_1",
|
||||
value: "a",
|
||||
options: [{ value: "a" }, { value: "b" }],
|
||||
},
|
||||
{
|
||||
name: "bar_2",
|
||||
value: "c",
|
||||
options: [{ value: "c" }, { value: "d" }],
|
||||
},
|
||||
],
|
||||
},
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
operation: {
|
||||
name: "baz",
|
||||
args: [
|
||||
{
|
||||
name: "baz_1",
|
||||
value: "b",
|
||||
options: [{ value: "a" }, { value: "b" }],
|
||||
},
|
||||
{
|
||||
name: "baz_2",
|
||||
value: "c",
|
||||
options: [{ value: "c" }, { value: "d" }],
|
||||
},
|
||||
],
|
||||
},
|
||||
id: 3,
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
{#each pipelineOperations as { operation, id } (id)}
|
||||
<div>
|
||||
{id}
|
||||
{#each operation.args as arg}
|
||||
<div class="arg">
|
||||
{#each arg.options as { value }}
|
||||
<input type="radio" bind:group={arg.value} {value} />
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
@ -0,0 +1,89 @@
|
||||
// https://github.com/sveltejs/svelte/issues/6112
|
||||
export default {
|
||||
async test({ assert, target, component, window }) {
|
||||
let inputs = target.querySelectorAll('input');
|
||||
|
||||
const check = (set) => {
|
||||
for (let i = 0; i < inputs.length; i++) {
|
||||
assert.equal(inputs[i].checked, set.has(i));
|
||||
}
|
||||
};
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<div>1</div>
|
||||
<div>2
|
||||
<div class="arg">
|
||||
<input type="checkbox" value="a">
|
||||
<input type="checkbox" value="b">
|
||||
</div>
|
||||
<div class="arg">
|
||||
<input type="checkbox" value="c">
|
||||
<input type="checkbox" value="d">
|
||||
</div>
|
||||
</div>
|
||||
<div>3
|
||||
<div class="arg">
|
||||
<input type="checkbox" value="a">
|
||||
<input type="checkbox" value="b">
|
||||
</div>
|
||||
<div class="arg">
|
||||
<input type="checkbox" value="c">
|
||||
<input type="checkbox" value="d">
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
|
||||
check(new Set([0, 2]));
|
||||
|
||||
const event = new window.Event('change');
|
||||
|
||||
// dom to value
|
||||
inputs[3].checked = true;
|
||||
await inputs[3].dispatchEvent(event);
|
||||
|
||||
check(new Set([0, 2, 3]));
|
||||
assert.deepEqual(component.pipelineOperations[1].operation.args[1].value, ['c', 'd']);
|
||||
|
||||
// remove item
|
||||
component.pipelineOperations = component.pipelineOperations.slice(1);
|
||||
await Promise.resolve();
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<div>2
|
||||
<div class="arg">
|
||||
<input type="checkbox" value="a">
|
||||
<input type="checkbox" value="b">
|
||||
</div>
|
||||
<div class="arg">
|
||||
<input type="checkbox" value="c">
|
||||
<input type="checkbox" value="d">
|
||||
</div>
|
||||
</div>
|
||||
<div>3
|
||||
<div class="arg">
|
||||
<input type="checkbox" value="a">
|
||||
<input type="checkbox" value="b">
|
||||
</div>
|
||||
<div class="arg">
|
||||
<input type="checkbox" value="c">
|
||||
<input type="checkbox" value="d">
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
|
||||
inputs = target.querySelectorAll('input');
|
||||
check(new Set([0, 2, 3]));
|
||||
|
||||
inputs[5].checked = true;
|
||||
await inputs[5].dispatchEvent(event);
|
||||
|
||||
check(new Set([0, 2, 3, 5]));
|
||||
assert.deepEqual(component.pipelineOperations[1].operation.args[0].value, ['b']);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,60 @@
|
||||
<script>
|
||||
export let pipelineOperations = [
|
||||
{
|
||||
operation: {
|
||||
name: "foo",
|
||||
args: [],
|
||||
},
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
operation: {
|
||||
name: "bar",
|
||||
args: [
|
||||
{
|
||||
name: "bar_1",
|
||||
value: ["a"],
|
||||
options: [{ value: "a" }, { value: "b" }],
|
||||
},
|
||||
{
|
||||
name: "bar_2",
|
||||
value: ["c"],
|
||||
options: [{ value: "c" }, { value: "d" }],
|
||||
},
|
||||
],
|
||||
},
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
operation: {
|
||||
name: "baz",
|
||||
args: [
|
||||
{
|
||||
name: "baz_1",
|
||||
value: [],
|
||||
options: [{ value: "a" }, { value: "b" }],
|
||||
},
|
||||
{
|
||||
name: "baz_2",
|
||||
value: [],
|
||||
options: [{ value: "c" }, { value: "d" }],
|
||||
},
|
||||
],
|
||||
},
|
||||
id: 3,
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
{#each pipelineOperations as { operation, id } (id)}
|
||||
<div>
|
||||
{id}
|
||||
{#each operation.args as arg}
|
||||
<div class="arg">
|
||||
{#each arg.options as { value }}
|
||||
<input type="checkbox" bind:group={arg.value} {value} />
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
@ -0,0 +1,30 @@
|
||||
export default {
|
||||
async test({ assert, target, window }) {
|
||||
const [input1, input2] = target.querySelectorAll('input[type=text]');
|
||||
const radio = target.querySelector('input[type=radio]');
|
||||
|
||||
assert.equal(radio.checked, false);
|
||||
|
||||
const event = new window.Event('input');
|
||||
|
||||
input1.value = 'world';
|
||||
await input1.dispatchEvent(event);
|
||||
assert.equal(radio.checked, true);
|
||||
|
||||
input2.value = 'foo';
|
||||
await input2.dispatchEvent(event);
|
||||
assert.equal(radio.checked, false);
|
||||
|
||||
input1.value = 'foo';
|
||||
await input1.dispatchEvent(event);
|
||||
assert.equal(radio.checked, true);
|
||||
|
||||
input1.value = 'bar';
|
||||
await input1.dispatchEvent(event);
|
||||
assert.equal(radio.checked, false);
|
||||
|
||||
input2.value = 'bar';
|
||||
await input2.dispatchEvent(event);
|
||||
assert.equal(radio.checked, true);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,10 @@
|
||||
<script>
|
||||
let name = 'world';
|
||||
let current = '';
|
||||
</script>
|
||||
|
||||
<input type="radio" name="current" bind:group={current} value={name}>
|
||||
|
||||
<input type="text" bind:value={current} />
|
||||
|
||||
<input type="text" bind:value={name} />
|
||||
@ -0,0 +1,78 @@
|
||||
// https://github.com/sveltejs/svelte/issues/7884
|
||||
export default {
|
||||
async test({ assert, target, component, window }) {
|
||||
let inputs = target.querySelectorAll('input');
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<p>{"foo":[],"bar":[]}</p>
|
||||
<h2>foo</h2>
|
||||
<ul>
|
||||
<li><label><input name="foo" type="checkbox" value="1"> 1</label></li>
|
||||
<li><label><input name="foo" type="checkbox" value="2"> 2</label></li>
|
||||
<li><label><input name="foo" type="checkbox" value="3"> 3</label></li>
|
||||
</ul>
|
||||
<h2>bar</h2>
|
||||
<ul>
|
||||
<li><label><input name="bar" type="checkbox" value="1"> 1</label></li>
|
||||
<li><label><input name="bar" type="checkbox" value="2"> 2</label></li>
|
||||
<li><label><input name="bar" type="checkbox" value="3"> 3</label></li>
|
||||
</ul>
|
||||
`);
|
||||
|
||||
const event = new window.Event('change');
|
||||
|
||||
inputs[0].checked = true;
|
||||
await inputs[0].dispatchEvent(event);
|
||||
inputs[2].checked = true;
|
||||
await inputs[2].dispatchEvent(event);
|
||||
inputs[3].checked = true;
|
||||
await inputs[3].dispatchEvent(event);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<p>{"foo":[1,3],"bar":[1]}</p>
|
||||
<h2>foo</h2>
|
||||
<ul>
|
||||
<li><label><input name="foo" type="checkbox" value="1"> 1</label></li>
|
||||
<li><label><input name="foo" type="checkbox" value="2"> 2</label></li>
|
||||
<li><label><input name="foo" type="checkbox" value="3"> 3</label></li>
|
||||
</ul>
|
||||
<h2>bar</h2>
|
||||
<ul>
|
||||
<li><label><input name="bar" type="checkbox" value="1"> 1</label></li>
|
||||
<li><label><input name="bar" type="checkbox" value="2"> 2</label></li>
|
||||
<li><label><input name="bar" type="checkbox" value="3"> 3</label></li>
|
||||
</ul>
|
||||
`);
|
||||
|
||||
await component.update();
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<p>{"foo":[1,3],"bar":[1],"qux":[]}</p>
|
||||
<h2>qux</h2>
|
||||
<ul>
|
||||
<li><label><input name="qux" type="checkbox" value="4"> 4</label></li>
|
||||
<li><label><input name="qux" type="checkbox" value="5"> 5</label></li>
|
||||
<li><label><input name="qux" type="checkbox" value="6"> 6</label></li>
|
||||
</ul>
|
||||
`);
|
||||
|
||||
inputs = target.querySelectorAll('input');
|
||||
inputs[0].checked = true;
|
||||
await inputs[0].dispatchEvent(event);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<p>{"foo":[1,3],"bar":[1],"qux":[4]}</p>
|
||||
<h2>qux</h2>
|
||||
<ul>
|
||||
<li><label><input name="qux" type="checkbox" value="4"> 4</label></li>
|
||||
<li><label><input name="qux" type="checkbox" value="5"> 5</label></li>
|
||||
<li><label><input name="qux" type="checkbox" value="6"> 6</label></li>
|
||||
</ul>
|
||||
`);
|
||||
assert.equal(inputs[0].checked, true);
|
||||
assert.equal(inputs[1].checked, false);
|
||||
assert.equal(inputs[2].checked, false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -0,0 +1,36 @@
|
||||
<script>
|
||||
let keys = ["foo", "bar"];
|
||||
let values = [1, 2, 3];
|
||||
|
||||
const object = {};
|
||||
|
||||
$: keys.forEach((key) => {
|
||||
// Make sure Svelte has an array to bind to
|
||||
if (!object[key]) {
|
||||
object[key] = [];
|
||||
}
|
||||
});
|
||||
|
||||
export function update() {
|
||||
keys = ["qux"];
|
||||
values = [4, 5, 6];
|
||||
}
|
||||
</script>
|
||||
|
||||
<p>
|
||||
{JSON.stringify(object)}
|
||||
</p>
|
||||
|
||||
{#each keys as key (key)}
|
||||
<h2>{key}</h2>
|
||||
<ul>
|
||||
{#each values as value (value)}
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox" name={key} {value} bind:group={object[key]} />
|
||||
{value}
|
||||
</label>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/each}
|
||||
@ -0,0 +1,49 @@
|
||||
// https://github.com/sveltejs/svelte/issues/7633
|
||||
export default {
|
||||
async test({ assert, target, component, window }) {
|
||||
let inputs = target.querySelectorAll('input');
|
||||
|
||||
assert.equal(inputs[0].checked, true);
|
||||
assert.equal(inputs[1].checked, false);
|
||||
assert.equal(inputs[2].checked, false);
|
||||
|
||||
await component.moveDown(0);
|
||||
await component.moveDown(1);
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<div class="item">
|
||||
b <label><input name="current" type="radio" value="b"> current</label>
|
||||
</div>
|
||||
<div class="item">
|
||||
c <label><input name="current" type="radio" value="c"> current</label>
|
||||
</div>
|
||||
<div class="item">
|
||||
a <label><input name="current" type="radio" value="a"> current</label>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
|
||||
// after shifting order, should still keep the correct radio checked
|
||||
inputs = target.querySelectorAll('input');
|
||||
assert.equal(inputs[0].checked, false);
|
||||
assert.equal(inputs[1].checked, false);
|
||||
assert.equal(inputs[2].checked, true);
|
||||
|
||||
await (component.current = 'b');
|
||||
|
||||
inputs = target.querySelectorAll('input');
|
||||
assert.equal(inputs[0].checked, true);
|
||||
assert.equal(inputs[1].checked, false);
|
||||
assert.equal(inputs[2].checked, false);
|
||||
|
||||
await component.moveDown(1);
|
||||
|
||||
// after shifting order, should still keep the correct radio checked
|
||||
inputs = target.querySelectorAll('input');
|
||||
assert.equal(inputs[0].checked, true);
|
||||
assert.equal(inputs[1].checked, false);
|
||||
assert.equal(inputs[2].checked, false);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,36 @@
|
||||
<script>
|
||||
export let list = [
|
||||
{ name: "a", text: "This is a test." },
|
||||
{ name: "b", text: "This is another test." },
|
||||
{ name: "c", text: "This is also a test." },
|
||||
];
|
||||
export let current = "a";
|
||||
export function moveUp(i) {
|
||||
list = [
|
||||
...list.slice(0, Math.max(i - 1, 0)),
|
||||
list[i],
|
||||
list[i - 1],
|
||||
...list.slice(i + 1),
|
||||
];
|
||||
}
|
||||
export function moveDown(i) {
|
||||
moveUp(i + 1);
|
||||
}
|
||||
</script>
|
||||
|
||||
{#each list as item}
|
||||
<div class="item">
|
||||
{item.name}
|
||||
{#if true}
|
||||
<label
|
||||
><input
|
||||
type="radio"
|
||||
name="current"
|
||||
bind:group={current}
|
||||
value={item.name}
|
||||
/> current</label
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
Loading…
Reference in new issue