core

// don't forget to take a look at the Storybook https://ui-predicate.fgribreau.com/ui-predicate-vue/latest#/examples
{
// first define the operator list available along with what type of argument they need
operators: [
  {
    operator_id: 'is',
    label: 'is',
    argumentType_id: 'smallString',
  },
  {
    operator_id: 'contains',
    label: 'Contains',
    argumentType_id: 'smallString',
  },
  {
    operator_id: 'isLowerThan',
    label: '<',
    argumentType_id: 'number',
  },
  {
    operator_id: 'isEqualTo',
    label: '=',
    argumentType_id: 'number',
  },
  {
    operator_id: 'isHigherThan',
    label: '>',
    argumentType_id: 'number',
  },
  {
    operator_id: 'is_date',
    label: 'is',
    argumentType_id: 'datepicker',
  },
  {
    operator_id: 'isBetween_date',
    label: 'is between',
    argumentType_id: 'daterangepicker',
  },
],
// then define the type, think of them as aggregate of operators so you can attach them to targets
types: [
  {
    type_id: 'int',
    operator_ids: ['isLowerThan', 'isEqualTo', 'isHigherThan'],
  },
  {
    type_id: 'string',
    operator_ids: ['is', 'contains'],
  },
  {
    type_id: 'datetime',
    operator_ids: ['is', 'isBetween'],
  },
],
// finally define targets, don't forget to specify their associated `type_id`
targets: [
  {
    target_id: 'title',
    label: 'Title',
    type_id: 'string',
  },
  {
    target_id: 'videoCount',
    label: 'Video count',
    type_id: 'int',
  },
  {
    target_id: 'publishedAt',
    label: 'Created at',
    type_id: 'datetime',
  },
],
// define supported logical type
logicalTypes: [
  {
    logicalType_id: 'any',
    label: 'Any',
  },
  {
    logicalType_id: 'all',
    label: 'All',
  },
  {
    logicalType_id: 'none',
    label: 'None',
  },
],
// (optional) finally define how to display each argumentType_id
argumentTypes: [
  // here we don't define `component` because it depends on the UI Framework you are using (e.g. Vue, React, Angular, ...)
  // since we are in ui-predicate-core here we don't know the UI Framework library that will be used
  // read your UI Framework adapter (e.g. ui-predicate-vue) on how to set the component.
  // if no argumentType is defined for argumentType_id, then UIPredicateCore will fallback on the default UI component (thanks to getDefaultArgumentComponent)
  // { argumentType_id: 'datepicker', component: ? },
  // { argumentType_id: 'daterangepicker', component: ? },
  // { argumentType_id: 'smallString', component: ? },
  // { argumentType_id: 'number', component: ? },
]}

resolved promise yield Predicate Core public API, rejected promise yield an error errors

// don't forget to take a look at the Storybook https://ui-predicate.fgribreau.com/ui-predicate-vue/latest#/examples
{
// first define the operator list available along with what type of argument they need
operators: [
  {
    operator_id: 'is',
    label: 'is',
    argumentType_id: 'smallString',
  },
  {
    operator_id: 'contains',
    label: 'Contains',
    argumentType_id: 'smallString',
  },
  {
    operator_id: 'isLowerThan',
    label: '<',
    argumentType_id: 'number',
  },
  {
    operator_id: 'isEqualTo',
    label: '=',
    argumentType_id: 'number',
  },
  {
    operator_id: 'isHigherThan',
    label: '>',
    argumentType_id: 'number',
  },
  {
    operator_id: 'is_date',
    label: 'is',
    argumentType_id: 'datepicker',
  },
  {
    operator_id: 'isBetween_date',
    label: 'is between',
    argumentType_id: 'daterangepicker',
  },
],
// then define the type, think of them as aggregate of operators so you can attach them to targets
types: [
  {
    type_id: 'int',
    operator_ids: ['isLowerThan', 'isEqualTo', 'isHigherThan'],
  },
  {
    type_id: 'string',
    operator_ids: ['is', 'contains'],
  },
  {
    type_id: 'datetime',
    operator_ids: ['is', 'isBetween'],
  },
],
// finally define targets, don't forget to specify their associated `type_id`
targets: [
  {
    target_id: 'title',
    label: 'Title',
    type_id: 'string',
  },
  {
    target_id: 'videoCount',
    label: 'Video count',
    type_id: 'int',
  },
  {
    target_id: 'publishedAt',
    label: 'Created at',
    type_id: 'datetime',
  },
],
// define supported logical type
logicalTypes: [
  {
    logicalType_id: 'any',
    label: 'Any',
  },
  {
    logicalType_id: 'all',
    label: 'All',
  },
  {
    logicalType_id: 'none',
    label: 'None',
  },
],
// (optional) finally define how to display each argumentType_id
argumentTypes: [
  // here we don't define `component` because it depends on the UI Framework you are using (e.g. Vue, React, Angular, ...)
  // since we are in ui-predicate-core here we don't know the UI Framework library that will be used
  // read your UI Framework adapter (e.g. ui-predicate-vue) on how to set the component.
  // if no argumentType is defined for argumentType_id, then UIPredicateCore will fallback on the default UI component (thanks to getDefaultArgumentComponent)
  // { argumentType_id: 'datepicker', component: ? },
  // { argumentType_id: 'daterangepicker', component: ? },
  // { argumentType_id: 'smallString', component: ? },
  // { argumentType_id: 'number', component: ? },
]}

resolved promise yield Predicate Core public API, rejected promise yield an error errors