JSFiddle - React, Tailwind, and code Playground

author(s): Tao Xin

by Sirenko

HTML

<script src="https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-1.5.3.nomodule.min.js"></script>

JavaScript 1.7

const {option, select, div} = van.tags

const allFilter = van.state({
	size: ['', 'Small', 'Medium', 'Large'],
  color: ['', 'Blue', 'Red', 'White']
});

const chosenFilter = van.state({})

const allItems = van.state([
	{ size: 'Small', color: 'Blue', sku: 'SB' },
  { size: 'Medium', color: 'Red', sku: 'MR' },
	{ size: 'Large', color: 'White', sku: 'LW' },
  { size: 'Medium', color: 'Blue', sku: 'MB' },
  { size: 'Medium', color: 'White', sku: 'MW' }
]);

const filteredItems = van.derive(() => {
	const filters = chosenFilter.val;
	return allItems.val.filter(e => {
  	for (let [k, v] of Object.entries(filters)) {
    	if (e[k] !== v) { return false }
    }
    return true;
  });
})

const FontPreview = () => {
  return div(
    Object.keys(allFilter.val).map(filter => select({
    	oninput: e => {
      	if (e.target.value) {
       		chosenFilter.val = {...chosenFilter.val, [filter]: e.target.value};
        } else {
        	chosenFilter.val = {...chosenFilter.val};
          delete chosenFilter.val[filter];
        }
      }},
      allFilter.val[filter].map(c => option({selected: () => chosenFilter.val[filter] === c}, c)),
    )),
    () => div('Items:', filteredItems.val.map(e => div(e.sku)))
  )
}

van.add(document.body, FontPreview())