mirror of https://github.com/sveltejs/svelte
fix bind:group in each (#4868)
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