From 02bd4e761550ec0ac505347af66e319de5f4b7b1 Mon Sep 17 00:00:00 2001
From: Radu Suciu <radusuciu@gmail.com>
Date: Mon, 1 Jul 2024 11:09:27 -0700
Subject: [PATCH] add missing components

---
 examples/vue/filters/src/DebouncedInput.vue | 34 +++++++++
 examples/vue/filters/src/Filter.vue         | 82 +++++++++++++++++++++
 2 files changed, 116 insertions(+)
 create mode 100644 examples/vue/filters/src/DebouncedInput.vue
 create mode 100644 examples/vue/filters/src/Filter.vue

diff --git a/examples/vue/filters/src/DebouncedInput.vue b/examples/vue/filters/src/DebouncedInput.vue
new file mode 100644
index 0000000000..7a924ba4ba
--- /dev/null
+++ b/examples/vue/filters/src/DebouncedInput.vue
@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import { computed, onBeforeUnmount, ref } from 'vue'
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    required: true,
+  },
+  debounce: {
+    type: Number,
+    default: 500,
+  },
+})
+const emit = defineEmits(['update:modelValue'])
+const timeout = ref<number>()
+const localValue = computed({
+  get() {
+    return props.modelValue
+  },
+  set(newValue) {
+    if (timeout.value) {
+      clearTimeout(timeout.value)
+    }
+    timeout.value = setTimeout(
+      () => emit('update:modelValue', newValue),
+      props.debounce
+    )
+  },
+})
+onBeforeUnmount(() => clearTimeout(timeout.value))
+</script>
+
+<template>
+  <input v-model="localValue" v-bind="$attrs" />
+</template>
diff --git a/examples/vue/filters/src/Filter.vue b/examples/vue/filters/src/Filter.vue
new file mode 100644
index 0000000000..71bb83e48c
--- /dev/null
+++ b/examples/vue/filters/src/Filter.vue
@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import type { Column, Table } from '@tanstack/vue-table'
+import { computed, PropType } from 'vue'
+import DebouncedInput from './DebouncedInput.vue'
+const props = defineProps({
+  column: {
+    type: Object as PropType<Column<any, unknown>>,
+    required: true,
+  },
+  table: {
+    type: Object as PropType<Table<any>>,
+    required: true,
+  },
+})
+const firstValue = computed(() =>
+  props.table.getPreFilteredRowModel().flatRows[0]?.getValue(props.column.id)
+)
+const columnFilterValue = computed(() => props.column.getFilterValue())
+const sortedUniqueValues = computed(() =>
+  typeof firstValue.value === 'number'
+    ? []
+    : Array.from(props.column.getFacetedUniqueValues().keys()).sort()
+)
+</script>
+
+<template>
+  <div v-if="typeof firstValue === 'number'">
+    <div class="flex space-x-2">
+      <DebouncedInput
+        type="number"
+        :min="Number(column.getFacetedMinMaxValues()?.[0] ?? '')"
+        :max="Number(column.getFacetedMinMaxValues()?.[1] ?? '')"
+        :modelValue="(columnFilterValue as [number, number])?.[0] ?? ''"
+        @update:modelValue="
+          value =>
+            column.setFilterValue((old: [number, number]) => [value, old?.[1]])
+        "
+        :placeholder="`Min ${
+          column.getFacetedMinMaxValues()?.[0]
+            ? `(${column.getFacetedMinMaxValues()?.[0]})`
+            : ''
+        }`"
+        class="w-24 border shadow rounded"
+      />
+      <DebouncedInput
+        type="number"
+        :min="Number(column.getFacetedMinMaxValues()?.[0] ?? '')"
+        :max="Number(column.getFacetedMinMaxValues()?.[1] ?? '')"
+        :modelValue="(columnFilterValue as [number, number])?.[1] ?? ''"
+        @update:modelValue="
+          value =>
+            column.setFilterValue((old: [number, number]) => [old?.[0], value])
+        "
+        :placeholder="`Max ${
+          column.getFacetedMinMaxValues()?.[1]
+            ? `(${column.getFacetedMinMaxValues()?.[1]})`
+            : ''
+        }`"
+        class="w-24 border shadow rounded"
+      />
+    </div>
+    <div class="h-1" />
+  </div>
+  <div v-else>
+    <datalist :id="column.id + 'list'">
+      <option
+        v-for="value in sortedUniqueValues.slice(0, 5000)"
+        :key="value"
+        :value="value"
+      />
+    </datalist>
+    <DebouncedInput
+      type="text"
+      :modelValue="(columnFilterValue ?? '') as string"
+      @update:modelValue="value => column.setFilterValue(value)"
+      :placeholder="`Search... (${column.getFacetedUniqueValues().size})`"
+      class="w-36 border shadow rounded"
+      :list="column.id + 'list'"
+    />
+    <div class="h-1" />
+  </div>
+</template>