filters

next-ui/src/components/filter/List.stories.ts

@@ -22,6 +22,7 @@ const meta = {
   },
   args: {
     'onUpdate:modelValue': fn(),
+    'onUpdate:mode': fn(),
     items: [
       { title: 'Tag 1', value: '+tag1', valueExclude: '-tag1' },
       { title: 'Tag 2', value: '+tag2', valueExclude: '-tag2' },
@@ -41,16 +42,18 @@ export const Default: Story = {
 export const InitialValue: Story = {
   args: {
     modelValue: ['+tag1', '-tag2', 'crap'],
+    mode: 'allOf',
   },
 }
 
 export const Color: Story = {
   args: {
+    modelValue: ['+tag1', '-tag2', 'crap'],
     color: 'red',
   },
 }
 
-export const Objects: Story = {
+export const ValueObjects: Story = {
   args: {
     items: [
       { title: 'Tag 1', value: { include: 'tag1' }, valueExclude: { exclude: 'tag1' } },

next-ui/src/components/filter/List.vue

@@ -19,8 +19,12 @@
 <script setup lang="ts">
 import { syncRef } from '@vueuse/core'
 import type { AnyAll } from '@/types/filter'
+import type { IncludeExclude } from '@/components/filter/TriState.vue'
 
 const model = defineModel<unknown[]>({ default: [] })
+/**
+ * Selection mode.
+ */
 const anyAll = defineModel<AnyAll>('mode', { default: 'anyOf' })
 
 //TODO: handle mode better
@@ -36,12 +40,12 @@ const { items = [], color } = defineProps<{
 }>()
 
 function initializeInternalModel() {
-  const c: Record<number, string | undefined> = {}
+  const c: Record<number, IncludeExclude> = {}
   items.forEach((_it, i) => (c[i] = undefined))
   return c
 }
 
-const internalModel = ref<Record<number, string | undefined>>(initializeInternalModel())
+const internalModel = ref<Record<number, IncludeExclude>>(initializeInternalModel())
 
 syncRef(model, internalModel, {
   direction: 'both',
@@ -68,7 +72,7 @@ syncRef(model, internalModel, {
           }
 
         return acc
-      }, {}) as Record<number, string | undefined>,
+      }, {}) as Record<number, IncludeExclude>,
     rtl: (right) =>
       items
         .map((it, i) =>

next-ui/src/components/filter/TriState.stories.ts

@@ -46,12 +46,6 @@ export const ValidModel: Story = {
   },
 }
 
-export const InvalidModel: Story = {
-  args: {
-    modelValue: 'nope',
-  },
-}
-
 export const BiState: Story = {
   args: {
     label: 'bi state',

next-ui/src/components/filter/TriState.vue

@@ -10,7 +10,9 @@
 </template>
 
 <script setup lang="ts">
-const model = defineModel<string>()
+export type IncludeExclude = 'include' | 'exclude' | undefined
+
+const model = defineModel<IncludeExclude>()
 
 const icon = computed(() => states.value.find((it) => it.value === model.value)?.icon)
 
@@ -19,8 +21,17 @@ const {
   triState = true,
   color,
 } = defineProps<{
+  /**
+   * Label shown next to the checkbox.
+   */
   label: string
+  /**
+   * Whether the component can handle tri-state. Default to `true`.
+   */
   triState?: boolean
+  /**
+   * Base color. Applies to the checkbox when the value is not `undefined`.
+   */
   color?: string
 }>()