Components

CriterionInput

A component used to compose and edit filters.

Usage

Loading preview...

 <template>
  <MeCriterionInput
    :fields="[
      { key: 'string', label: 'String', type: 'string' },
      { key: 'date', label: 'Date', type: 'date' }
    ]"
    :criterion="{
      field: { key: 'string', label: 'String', type: 'string' },
      operatorKey: 'equal',
      value: 'Value'
    }"
    deletable
  />
</template>

Fields

Provide an array of fields to allow filter composition.

type MeField = {
  key: string,
  label: string,
  type: 'boolean' | 'date' | 'number' | 'object' | 'string'
}

 <template>
  <MeCriterionInput
    :fields="[
      { key: 'string', label: 'String', type: 'string' },
      { key: 'boolean', label: 'Boolean', type: 'boolean' }
    ]"
  >
</template>

Use the operators prop to customize the available operators. Note that inactive operators are not displayed by default; to include them, you must add them to the list along with the other operators.

enum MeOperatorKeys = {
  After = 'after',
  Before = 'before',
  Between = 'between', // inactive for 'number' field type
  Contain = 'contain', // inactive for 'string' field type
  ContainAnd = 'contain_and',
  ContainOr = 'contain_or',
  Different = 'different',
  Empty = 'empty',
  Equal = 'equal',
  Filled = 'filled',
  GreaterOrEqualThan = 'greater_or_equal_than',
  GreaterThan = 'greater_than',
  Last = 'last',
  LessOrEqualThan = 'less_or_equal_than',
  LessThan = 'less_than',
  Next = 'next',
  NotContain = 'not_contain', // inactive for 'string' field type
  NotContainAnd = 'not_contain_and',
  NotContainOr = 'not_contain_or',
  StartsWith = 'starts_with'
}

<template>
  <MeCriterionInput
    :fields="[
      { key: 'string', label: 'String', type: 'string' },
      { key: 'boolean', label: 'Boolean', type: 'boolean' }
    ]"
    :operators="['equal', 'different', 'empty']"
  />
</template>

Criterion

Use the criterion to display a complete criterion.

type MeCriterionField = {
  field: MeField,
  operatorKey: MeOperatorKeys,
  value?: any,
  options?: {
    maxLength?: number, // Maximum length for multiple value operators
    delimiter?: string | RegExp, // Delimiter for multiple value operators
    items?: any[] // Options for 'object' field type
  }
}

<template>
  <MeCriterionInput
    :fields="[{ key: 'string', label: 'String', type: 'string' }]"
    :criterion="{
      field: { key: 'string', label: 'String', type: 'string' },
      operatorKey: 'equal',
      value: 'Criterion'
    }"
  />
</template>

Static list

For fields of type object, use field.options.items for static options

<template>
  <MeCriterionInput
    :fields="statusFields"
    :criterion="criterion"
  />
</template>

<script setup lang="ts">
const statusFields = [
  {
    key: 'status',
    label: 'Status',
    type: 'object',
    options: {
      items: [
        { label: 'Open', value: 'open' },
        { label: 'In progress', value: 'in_progress' },
        { label: 'Done', value: 'done' }
      ]
    }
  }
]

const criterion = ref({
  field: statusFields[0],
  operatorKey: 'equal',
  value: 'open'
})
</script>

Async list

For object fields, field.options.items can be a function that returns a Promise instead of a static array.

<template>
  <MeCriterionInput
    :fields="[
      { key: 'string', label: 'String', type: 'object' },
      { key: 'date', label: 'Date', type: 'date' }
    ]"
    :criterion="{
      field: { key: 'string', label: 'String', type: 'object', options: { items: itemsProvider } },
      operatorKey: 'equal'
    }"
    deletable
  />
</template>

<script setup lang="ts">

function itemsProvider() {
  return new Promise((resolve) => {
    const options: SelectMenuItem[] = []

    for (let i = 0; i < 10; i++) options.push({ label: `Option ${i}`, id: `${i}` })

    setTimeout(() => resolve(options), 1000)
  })
}
</script>

Deletable

Use the deletable prop to allow criterion deletion.

<template>
  <MeCriterionInput
    :fields="[{ key: 'string', label: 'String', type: 'string' }]"
    :criterion="{
      field: { key: 'string', label: 'String', type: 'string' },
      operatorKey: 'equal',
      value: 'Criterion'
    }"
    deletable
  />
</template>

Disabled

The disabled prop prevents the criterion from being edited.

<template>
  <MeCriterionInput
    :fields="[{ key: 'string', label: 'String', type: 'string' }]"
    :criterion="{
      field: { key: 'string', label: 'String', type: 'string' },
      operatorKey: 'equal',
      value: 'Criterion'
    }"
    disabled
  />
</template>

Compact

The compact prop renders the component in a condensed, space-efficient layout. Please note that the deletable prop has no effect when the compact mode is enabled.

<template>
  <MeCriterionInput
    :fields="[{ key: 'string', label: 'String', type: 'string' }]"
    :criterion="{
      field: { key: 'string', label: 'String', type: 'string' },
      operatorKey: 'equal',
      value: 'Criterion'
    }"
    compact
  />
</template>

API

Props

Prop	Default	Type
`fields`	`[]`	`MeCriterionField[]` Array of possible fields to compose a filter.
`operators`	`[]`	`MeOperatorKeys[]` Customize the available operators.
`criterion`		`MeCriterion` Displays a complete criterion.
`deletable`	`false`	`Boolean` Displays a delete button.
`disabled`	`false`	`Boolean` Prevents criterion edition.
`compact`	`false`	`Boolean` Displays compact mode.
`hideField`	`false`	`Boolean` Hides field selector.
`hideOperator`	`false`	`Boolean` Hides operator selector.
`size`	`'md'`	`'sm' \| 'md' \| 'lg'` Component size.

Emits

Event	Type
`fieldChange`	`MeCriterionField`
`operatorChange`	`MeOperatorKeys`
`valueInput`	`any`
`remove`

ButtonBar

Action buttons with overflow menu, optional options dropdown, and tooltips.

DualList

A double list used to pick items from one list to another