mirror of https://github.com/sveltejs/svelte
fix bind:group in each (#4868)
Tan Li Hau
5 years ago
committed by
GitHub
parent
90794167fe
commit
38de3b2e9f
@ -0,0 +1,24 @@
|
||||
import EachBlock from "../../../nodes/EachBlock";
|
||||
import InlineComponentWrapper from "../InlineComponent";
|
||||
import ElementWrapper from "../Element";
|
||||
import Binding from "../../../nodes/Binding";
|
||||
import get_object from "../../../utils/get_object";
|
||||
|
||||
export default function mark_each_block_bindings(
|
||||
parent: ElementWrapper | InlineComponentWrapper,
|
||||
binding: Binding
|
||||
) {
|
||||
// we need to ensure that the each block creates a context including
|
||||
// the list and the index, if they're not otherwise referenced
|
||||
const object = get_object(binding.expression.node).name;
|
||||
const each_block = parent.node.scope.get_owner(object);
|
||||
(each_block as EachBlock).has_binding = true;
|
||||
|
||||
if (binding.name === "group") {
|
||||
// for `<input bind:group={} >`, we make sure that all the each blocks creates context with `index`
|
||||
for (const name of binding.expression.contextual_dependencies) {
|
||||
const each_block = parent.node.scope.get_owner(name);
|
||||
(each_block as EachBlock).has_index_binding = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,275 @@
|
||||
const values = [
|
||||
{ name: 'Alpha' },
|
||||
{ name: 'Beta' },
|
||||
{ name: 'Gamma' }
|
||||
];
|
||||
|
||||
const selected_array = [
|
||||
[values[1]],
|
||||
[],
|
||||
[values[2]],
|
||||
];
|
||||
|
||||
export default {
|
||||
props: {
|
||||
values,
|
||||
selected_array,
|
||||
},
|
||||
|
||||
html: `
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Alpha
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Beta
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Gamma
|
||||
</label>
|
||||
|
||||
<p>Beta</p>
|
||||
</div>
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Alpha
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Beta
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Gamma
|
||||
</label>
|
||||
|
||||
<p></p>
|
||||
</div>
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Alpha
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Beta
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Gamma
|
||||
</label>
|
||||
|
||||
<p>Gamma</p>
|
||||
</div>
|
||||
`,
|
||||
|
||||
async test({ assert, component, target, window }) {
|
||||
const inputs = target.querySelectorAll('input');
|
||||
assert.equal(inputs[0].checked, false);
|
||||
assert.equal(inputs[1].checked, true);
|
||||
assert.equal(inputs[2].checked, false);
|
||||
assert.equal(inputs[3].checked, false);
|
||||
assert.equal(inputs[4].checked, false);
|
||||
assert.equal(inputs[5].checked, false);
|
||||
assert.equal(inputs[6].checked, false);
|
||||
assert.equal(inputs[7].checked, false);
|
||||
assert.equal(inputs[8].checked, true);
|
||||
|
||||
const event = new window.Event('change');
|
||||
|
||||
inputs[0].checked = true;
|
||||
await inputs[0].dispatchEvent(event);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Alpha
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Beta
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Gamma
|
||||
</label>
|
||||
|
||||
<p>Alpha, Beta</p>
|
||||
</div>
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Alpha
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Beta
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Gamma
|
||||
</label>
|
||||
|
||||
<p></p>
|
||||
</div>
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Alpha
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Beta
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Gamma
|
||||
</label>
|
||||
|
||||
<p>Gamma</p>
|
||||
</div>
|
||||
`);
|
||||
inputs[3].checked = true;
|
||||
await inputs[3].dispatchEvent(event);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Alpha
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Beta
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Gamma
|
||||
</label>
|
||||
|
||||
<p>Alpha, Beta</p>
|
||||
</div>
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Alpha
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Beta
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Gamma
|
||||
</label>
|
||||
|
||||
<p>Alpha</p>
|
||||
</div>
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Alpha
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Beta
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Gamma
|
||||
</label>
|
||||
|
||||
<p>Gamma</p>
|
||||
</div>
|
||||
`);
|
||||
|
||||
inputs[8].checked = false;
|
||||
await inputs[8].dispatchEvent(event);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Alpha
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Beta
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Gamma
|
||||
</label>
|
||||
|
||||
<p>Alpha, Beta</p>
|
||||
</div>
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Alpha
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Beta
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Gamma
|
||||
</label>
|
||||
|
||||
<p>Alpha</p>
|
||||
</div>
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Alpha
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Beta
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Gamma
|
||||
</label>
|
||||
|
||||
<p></p>
|
||||
</div>
|
||||
`);
|
||||
|
||||
component.selected_array = [[values[1], values[2]], [values[2]]];
|
||||
|
||||
assert.equal(inputs[0].checked, false);
|
||||
assert.equal(inputs[1].checked, true);
|
||||
assert.equal(inputs[2].checked, true);
|
||||
assert.equal(inputs[3].checked, false);
|
||||
assert.equal(inputs[4].checked, false);
|
||||
assert.equal(inputs[5].checked, true);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Alpha
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Beta
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Gamma
|
||||
</label>
|
||||
|
||||
<p>Beta, Gamma</p>
|
||||
</div>
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Alpha
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Beta
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Gamma
|
||||
</label>
|
||||
|
||||
<p>Gamma</p>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,15 @@
|
||||
<script>
|
||||
export let selected_array;
|
||||
export let values;
|
||||
</script>
|
||||
|
||||
{#each selected_array as selected}
|
||||
<div>
|
||||
{#each values as value}
|
||||
<label>
|
||||
<input type="checkbox" value="{value}" bind:group={selected} /> {value.name}
|
||||
</label>
|
||||
{/each}
|
||||
<p>{selected.map(v => v.name).join(', ')}</p>
|
||||
</div>
|
||||
{/each}
|
||||
@ -0,0 +1,59 @@
|
||||
export default {
|
||||
html: `
|
||||
<label>
|
||||
<input type="checkbox" value="1"> 1
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" value="2"> 2
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" value="3"> 3
|
||||
</label>
|
||||
|
||||
<p>1, 2, 3</p>`,
|
||||
|
||||
async test({ assert, component, target, window }) {
|
||||
const inputs = target.querySelectorAll('input');
|
||||
assert.equal(inputs[0].checked, true);
|
||||
assert.equal(inputs[1].checked, true);
|
||||
assert.equal(inputs[2].checked, true);
|
||||
|
||||
const event = new window.Event('change');
|
||||
|
||||
inputs[0].checked = false;
|
||||
await inputs[0].dispatchEvent(event);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<label>
|
||||
<input type="checkbox" value="1"> 1
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" value="2"> 2
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" value="3"> 3
|
||||
</label>
|
||||
|
||||
<p>2, 3</p>
|
||||
`);
|
||||
|
||||
component.selected = [[1, 3]];
|
||||
assert.equal(inputs[0].checked, true);
|
||||
assert.equal(inputs[1].checked, false);
|
||||
assert.equal(inputs[2].checked, true);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<label>
|
||||
<input type="checkbox" value="1"> 1
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" value="2"> 2
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" value="3"> 3
|
||||
</label>
|
||||
|
||||
<p>1, 3</p>
|
||||
`);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,17 @@
|
||||
<script>
|
||||
let options = [1,2,3]
|
||||
export let selected = [[1,2,3]];
|
||||
</script>
|
||||
|
||||
{#each options as value}
|
||||
<label>
|
||||
<input
|
||||
type='checkbox'
|
||||
bind:group={selected[0]}
|
||||
value={value}
|
||||
/>
|
||||
{value}
|
||||
</label>
|
||||
{/each}
|
||||
|
||||
<p>{selected[0].join(', ')}</p>
|
||||
@ -0,0 +1,275 @@
|
||||
const values = [
|
||||
{ name: 'Alpha' },
|
||||
{ name: 'Beta' },
|
||||
{ name: 'Gamma' }
|
||||
];
|
||||
|
||||
const selected_array = [
|
||||
[values[1]],
|
||||
[],
|
||||
[values[2]],
|
||||
];
|
||||
|
||||
export default {
|
||||
props: {
|
||||
values,
|
||||
selected_array,
|
||||
},
|
||||
|
||||
html: `
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Alpha
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Beta
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Gamma
|
||||
</label>
|
||||
|
||||
<p>Beta</p>
|
||||
</div>
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Alpha
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Beta
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Gamma
|
||||
</label>
|
||||
|
||||
<p></p>
|
||||
</div>
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Alpha
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Beta
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Gamma
|
||||
</label>
|
||||
|
||||
<p>Gamma</p>
|
||||
</div>
|
||||
`,
|
||||
|
||||
async test({ assert, component, target, window }) {
|
||||
const inputs = target.querySelectorAll('input');
|
||||
assert.equal(inputs[0].checked, false);
|
||||
assert.equal(inputs[1].checked, true);
|
||||
assert.equal(inputs[2].checked, false);
|
||||
assert.equal(inputs[3].checked, false);
|
||||
assert.equal(inputs[4].checked, false);
|
||||
assert.equal(inputs[5].checked, false);
|
||||
assert.equal(inputs[6].checked, false);
|
||||
assert.equal(inputs[7].checked, false);
|
||||
assert.equal(inputs[8].checked, true);
|
||||
|
||||
const event = new window.Event('change');
|
||||
|
||||
inputs[0].checked = true;
|
||||
await inputs[0].dispatchEvent(event);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Alpha
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Beta
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Gamma
|
||||
</label>
|
||||
|
||||
<p>Alpha, Beta</p>
|
||||
</div>
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Alpha
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Beta
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Gamma
|
||||
</label>
|
||||
|
||||
<p></p>
|
||||
</div>
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Alpha
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Beta
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Gamma
|
||||
</label>
|
||||
|
||||
<p>Gamma</p>
|
||||
</div>
|
||||
`);
|
||||
inputs[3].checked = true;
|
||||
await inputs[3].dispatchEvent(event);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Alpha
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Beta
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Gamma
|
||||
</label>
|
||||
|
||||
<p>Alpha, Beta</p>
|
||||
</div>
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Alpha
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Beta
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Gamma
|
||||
</label>
|
||||
|
||||
<p>Alpha</p>
|
||||
</div>
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Alpha
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Beta
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Gamma
|
||||
</label>
|
||||
|
||||
<p>Gamma</p>
|
||||
</div>
|
||||
`);
|
||||
|
||||
inputs[8].checked = false;
|
||||
await inputs[8].dispatchEvent(event);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Alpha
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Beta
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Gamma
|
||||
</label>
|
||||
|
||||
<p>Alpha, Beta</p>
|
||||
</div>
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Alpha
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Beta
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Gamma
|
||||
</label>
|
||||
|
||||
<p>Alpha</p>
|
||||
</div>
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Alpha
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Beta
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Gamma
|
||||
</label>
|
||||
|
||||
<p></p>
|
||||
</div>
|
||||
`);
|
||||
|
||||
component.selected_array = [[values[1], values[2]], [values[2]]];
|
||||
|
||||
assert.equal(inputs[0].checked, false);
|
||||
assert.equal(inputs[1].checked, true);
|
||||
assert.equal(inputs[2].checked, true);
|
||||
assert.equal(inputs[3].checked, false);
|
||||
assert.equal(inputs[4].checked, false);
|
||||
assert.equal(inputs[5].checked, true);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Alpha
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Beta
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Gamma
|
||||
</label>
|
||||
|
||||
<p>Beta, Gamma</p>
|
||||
</div>
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Alpha
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Beta
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" value="[object Object]"> Gamma
|
||||
</label>
|
||||
|
||||
<p>Gamma</p>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,15 @@
|
||||
<script>
|
||||
export let selected_array;
|
||||
export let values;
|
||||
</script>
|
||||
|
||||
{#each selected_array as _, index}
|
||||
<div>
|
||||
{#each values as value}
|
||||
<label>
|
||||
<input type="checkbox" value="{value}" bind:group={selected_array[index]} /> {value.name}
|
||||
</label>
|
||||
{/each}
|
||||
<p>{selected_array[index].map(v => v.name).join(', ')}</p>
|
||||
</div>
|
||||
{/each}
|
||||
@ -0,0 +1,153 @@
|
||||
export default {
|
||||
html: `
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p>1</p>
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p>2</p>
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p></p>
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p>3</p>
|
||||
`,
|
||||
|
||||
async test({ assert, component, target, window }) {
|
||||
const inputs = target.querySelectorAll('input');
|
||||
assert.equal(inputs[0].checked, true);
|
||||
assert.equal(inputs[1].checked, false);
|
||||
assert.equal(inputs[2].checked, false);
|
||||
|
||||
assert.equal(inputs[3].checked, false);
|
||||
assert.equal(inputs[4].checked, true);
|
||||
assert.equal(inputs[5].checked, false);
|
||||
|
||||
assert.equal(inputs[6].checked, false);
|
||||
assert.equal(inputs[7].checked, false);
|
||||
assert.equal(inputs[8].checked, false);
|
||||
|
||||
assert.equal(inputs[9].checked, false);
|
||||
assert.equal(inputs[10].checked, false);
|
||||
assert.equal(inputs[11].checked, true);
|
||||
|
||||
const event = new window.Event('change');
|
||||
|
||||
inputs[2].checked = true;
|
||||
await inputs[2].dispatchEvent(event);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p>1, 3</p>
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p>2</p>
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p></p>
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p>3</p>
|
||||
`);
|
||||
|
||||
inputs[9].checked = true;
|
||||
await inputs[9].dispatchEvent(event);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p>1, 3</p>
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p>2</p>
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p></p>
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p>1, 3</p>
|
||||
`);
|
||||
|
||||
inputs[4].checked = false;
|
||||
await inputs[4].dispatchEvent(event);
|
||||
inputs[5].checked = true;
|
||||
await inputs[5].dispatchEvent(event);
|
||||
inputs[6].checked = true;
|
||||
await inputs[6].dispatchEvent(event);
|
||||
inputs[7].checked = true;
|
||||
await inputs[7].dispatchEvent(event);
|
||||
inputs[11].checked = false;
|
||||
await inputs[11].dispatchEvent(event);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p>1, 3</p>
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p>3</p>
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p>1, 2</p>
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p>1</p>
|
||||
`);
|
||||
|
||||
component.selected_array_1 = [[3], [1]];
|
||||
component.selected_array_2 = [[], [2]];
|
||||
|
||||
assert.equal(inputs[0].checked, false);
|
||||
assert.equal(inputs[1].checked, false);
|
||||
assert.equal(inputs[2].checked, true);
|
||||
|
||||
assert.equal(inputs[3].checked, true);
|
||||
assert.equal(inputs[4].checked, false);
|
||||
assert.equal(inputs[5].checked, false);
|
||||
|
||||
assert.equal(inputs[6].checked, false);
|
||||
assert.equal(inputs[7].checked, false);
|
||||
assert.equal(inputs[8].checked, false);
|
||||
|
||||
assert.equal(inputs[9].checked, false);
|
||||
assert.equal(inputs[10].checked, true);
|
||||
assert.equal(inputs[11].checked, false);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p>3</p>
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p>1</p>
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p></p>
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p>2</p>
|
||||
`);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,33 @@
|
||||
<script>
|
||||
const options = [1, 2, 3];
|
||||
export let selected_array_1 = [[1], [2]];
|
||||
export let selected_array_2 = [[], [3]];
|
||||
</script>
|
||||
|
||||
{#each selected_array_1 as selected}
|
||||
{#each options as value}
|
||||
<label>
|
||||
<input
|
||||
type='checkbox'
|
||||
bind:group={selected}
|
||||
value={value}
|
||||
/>
|
||||
{value}
|
||||
</label>
|
||||
{/each}
|
||||
<p>{selected.join(', ')}</p>
|
||||
{/each}
|
||||
|
||||
{#each selected_array_2 as selected}
|
||||
{#each options as value}
|
||||
<label>
|
||||
<input
|
||||
type='checkbox'
|
||||
bind:group={selected}
|
||||
value={value}
|
||||
/>
|
||||
{value}
|
||||
</label>
|
||||
{/each}
|
||||
<p>{selected.join(', ')}</p>
|
||||
{/each}
|
||||
@ -0,0 +1,160 @@
|
||||
export default {
|
||||
html: `
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p>1</p>
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p>1, 2, 3</p>
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p>2</p>
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p>1</p>
|
||||
`,
|
||||
|
||||
async test({ assert, component, target, window }) {
|
||||
const inputs = target.querySelectorAll('input');
|
||||
assert.equal(inputs[0].checked, true);
|
||||
assert.equal(inputs[1].checked, false);
|
||||
assert.equal(inputs[2].checked, false);
|
||||
|
||||
assert.equal(inputs[3].checked, true);
|
||||
assert.equal(inputs[4].checked, true);
|
||||
assert.equal(inputs[5].checked, true);
|
||||
|
||||
assert.equal(inputs[6].checked, false);
|
||||
assert.equal(inputs[7].checked, true);
|
||||
assert.equal(inputs[8].checked, false);
|
||||
|
||||
assert.equal(inputs[9].checked, true);
|
||||
assert.equal(inputs[10].checked, false);
|
||||
assert.equal(inputs[11].checked, false);
|
||||
|
||||
const event = new window.Event('change');
|
||||
|
||||
inputs[2].checked = true;
|
||||
await inputs[2].dispatchEvent(event);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p>1, 3</p>
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p>1, 2, 3</p>
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p>2</p>
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p>1</p>
|
||||
`);
|
||||
|
||||
inputs[8].checked = true;
|
||||
await inputs[8].dispatchEvent(event);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p>1, 3</p>
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p>1, 2, 3</p>
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p>2, 3</p>
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p>1</p>
|
||||
`);
|
||||
|
||||
component.selected_index = [1, 1];
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p>1, 2, 3</p>
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p>1, 2, 3</p>
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p>1</p>
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p>1</p>
|
||||
`);
|
||||
|
||||
assert.equal(inputs[0].checked, true);
|
||||
assert.equal(inputs[1].checked, true);
|
||||
assert.equal(inputs[2].checked, true);
|
||||
|
||||
assert.equal(inputs[3].checked, true);
|
||||
assert.equal(inputs[4].checked, true);
|
||||
assert.equal(inputs[5].checked, true);
|
||||
|
||||
assert.equal(inputs[6].checked, true);
|
||||
assert.equal(inputs[7].checked, false);
|
||||
assert.equal(inputs[8].checked, false);
|
||||
|
||||
assert.equal(inputs[9].checked, true);
|
||||
assert.equal(inputs[10].checked, false);
|
||||
assert.equal(inputs[11].checked, false);
|
||||
|
||||
inputs[5].checked = false;
|
||||
await inputs[5].dispatchEvent(event);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p>1, 2</p>
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p>1, 2</p>
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p>1</p>
|
||||
<label><input type="checkbox" value="1"> 1</label>
|
||||
<label><input type="checkbox" value="2"> 2</label>
|
||||
<label><input type="checkbox" value="3"> 3</label>
|
||||
<p>1</p>
|
||||
`);
|
||||
|
||||
assert.equal(inputs[0].checked, true);
|
||||
assert.equal(inputs[1].checked, true);
|
||||
assert.equal(inputs[2].checked, false);
|
||||
|
||||
assert.equal(inputs[3].checked, true);
|
||||
assert.equal(inputs[4].checked, true);
|
||||
assert.equal(inputs[5].checked, false);
|
||||
|
||||
assert.equal(inputs[6].checked, true);
|
||||
assert.equal(inputs[7].checked, false);
|
||||
assert.equal(inputs[8].checked, false);
|
||||
|
||||
assert.equal(inputs[9].checked, true);
|
||||
assert.equal(inputs[10].checked, false);
|
||||
assert.equal(inputs[11].checked, false);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,24 @@
|
||||
<script>
|
||||
const options = [1, 2, 3];
|
||||
export let selected_array = [
|
||||
[[1], [1, 2, 3]],
|
||||
[[2], [1]],
|
||||
];
|
||||
export let selected_index = [0, 1];
|
||||
</script>
|
||||
|
||||
{#each selected_array as selected}
|
||||
{#each selected_index as index}
|
||||
{#each options as value}
|
||||
<label>
|
||||
<input
|
||||
type='checkbox'
|
||||
bind:group={selected[index]}
|
||||
value={value}
|
||||
/>
|
||||
{value}
|
||||
</label>
|
||||
{/each}
|
||||
<p>{selected[index].join(', ')}</p>
|
||||
{/each}
|
||||
{/each}
|
||||
Loading…
Reference in new issue