|
|
@@ -1,51 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="w-54 flex flex-col gap-2">
|
|
|
- <InputText
|
|
|
- v-model="model.value"
|
|
|
- fluid
|
|
|
- type="search"
|
|
|
- placeholder="Filter…"
|
|
|
- />
|
|
|
-
|
|
|
- <SelectButton
|
|
|
- v-model="model.matchMode"
|
|
|
- :options="matchModeOptions"
|
|
|
- optionLabel="name"
|
|
|
- optionValue="value"
|
|
|
- :pt="{
|
|
|
- root: `gap-0.25 *:rounded-none *:not-last:border-r-0 *:first:rounded-s-md
|
|
|
- *:last:rounded-e-md *:focus-visible:relative *:focus-visible:z-10`,
|
|
|
- pcToggleButton: {
|
|
|
- root: `grow border-primary bg-primary text-primary-contrast hover:border-primary-emphasis
|
|
|
- hover:bg-primary-emphasis active:border-primary-emphasis-alt
|
|
|
- active:bg-primary-emphasis-alt p-checked:border-primary-emphasis-alt p-checked:bg-primary-emphasis-alt`,
|
|
|
- content: `p-checked:bg-transparent`
|
|
|
- }
|
|
|
- }"
|
|
|
- >
|
|
|
- <!--suppress VueUnrecognizedSlot -->
|
|
|
- <template #option="slotProps">
|
|
|
- {{ slotProps.option.name }}
|
|
|
- </template>
|
|
|
- </SelectButton>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div>{{ model.value }}</div>
|
|
|
- <div>{{ model.matchMode }}</div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup>
|
|
|
-import { FilterMatchMode } from "@primevue/core/api"
|
|
|
-
|
|
|
-const model = ref({ value: "", matchMode: FilterMatchMode.CONTAINS })
|
|
|
-
|
|
|
-const matchModeOptions = ref([
|
|
|
- { name: "lt", value: FilterMatchMode.STARTS_WITH },
|
|
|
- { name: "eq", value: FilterMatchMode.CONTAINS },
|
|
|
- { name: "gt", value: FilterMatchMode.ENDS_WITH }
|
|
|
-])
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
-
|
|
|
-</style>
|