<script setup lang="ts">
import { computed, ref, useTemplateRef } from "vue";
import {
FCheckboxField,
FFieldset,
FSelectField,
FTextField,
findHTMLElementFromVueRef,
} from "@fkui/vue";
import { XSortFilterDatasetNg, matchPropertyValue, uniqueValues } from "@fkui/vue-labs";
import { type FruitData, fruits } from "./fruit-data";
const searchRef = useTemplateRef("search");
const actualElement = computed<HTMLInputElement | null>(() => {
const searchEl = findHTMLElementFromVueRef(searchRef);
return searchEl ? searchEl.querySelector("input") : null;
});
const flag = ref(true);
const country = ref<string | null>(null);
const availableCountries = uniqueValues(fruits, "origin");
const matchCountry = matchPropertyValue<FruitData>("origin");
function filter(value: FruitData[]): FruitData[] {
const searchTerm = actualElement.value?.value.toLowerCase();
return value.filter((it) => {
if (flag.value && it.name === "Banan") {
return false;
}
if (!matchCountry(it, country.value)) {
return false;
}
if (searchTerm) {
const name = it.name.toLowerCase();
const description = it.description.toLowerCase();
return name.includes(searchTerm) || description.includes(searchTerm);
}
return true;
});
}
</script>
<template>
<h2 id="frukter">Frukter</h2>
<x-sort-filter-dataset-ng :data="fruits" :filter>
<template #filter="{ update }">
<div class="filters">
<f-fieldset>
<template #label> Inställningar </template>
<template #default>
<f-checkbox-field
v-model="flag"
:value="true"
@update:model-value="update()"
>
<template #default>Bara goda frukter</template>
</f-checkbox-field>
</template>
</f-fieldset>
<f-select-field v-model="country" @update:model-value="update()">
<template #label>Land</template>
<template #default>
<option :value="null">-</option>
<option v-for="value in availableCountries" :key="value">
{{ value }}
</option>
</template>
</f-select-field>
<f-text-field ref="search" maxlength="40" @input="update">
<template #default> Sök </template>
</f-text-field>
</div>
</template>
<template #default="{ result }">
<pre>{{ result }}</pre>
</template>
</x-sort-filter-dataset-ng>
</template>
<style>
.filters {
@media (width > 640px) {
display: flex;
gap: 1rem;
> * {
flex: 0 1 auto;
}
.select-field {
width: 20rem;
}
.text-field {
width: 40rem;
}
label {
white-space: nowrap;
}
}
}
</style>