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>

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`

Button

A button element that can act as a link or trigger an action.

Forehead

A document header component used to structure and emphasize important information.