Query Builder Vue

# Styling

The Query Builder's default markup and styling has been consciously been kept simple for maximum customizability.

Support for styling with slots is available. Below, the following slots may be used for seamless styling.

A slot may be a simple inline template or a dedicated component. While inline templates allow for simplicity, dedicated components allow maintaining an internal state and you may use all of Vue's features, including methods, computed properties and watchers.

TIP

By instinct, you may would like to us v-model on some of the slot props. However, this is not supported by Vue. The props contain a callback which shall be used instead for updating a value.

Often, you'll have to use v-bind:value and v-on:input instead.

# groupOperator Slot

The groupOperator slot may be used for changing the markup of a group's operator.

The slot receives an object with the shape of the GroupOperatorSlotProps object (opens new window).

<template>
  <query-builder
    :config="config"
    v-model="query"
  >
    <template #groupOperator="props">
      <div class="query-builder-group-slot__group-selection">
        Custom #groupOperator slot
        <select
          :value="props.currentOperator"
          @input="props.updateCurrentOperator($event.target.value)"
        >
          <option disabled value>Select an operator</option>
          <option
            v-for="operator in props.operators"
            :key="operator.identifier"
            :value="operator.identifier"
            v-text="operator.name"
          />
        </select>
      </div>
    </template>
  </query-builder>
</template>

<style>
  .query-builder-group-slot__group-selection {
    padding: 16px;
    background-color: hsl(0, 0, 95%);
  }
</style>

# groupControl slot

The groupControl slot allows for creating a new group or adding a new rule.

The slot receives an object with the shape of the GroupCtrlSlotProps object (opens new window).

# rule slot

The rule slot allows for customizing markup around each rule component.

The slot receives an object with the shape of the RuleSlotProps object (opens new window). An exact rule can be identified based on the ruleCtrl.ruleIdentifier for dynamic content.

You'll have to use Vue's Dynamic Component (opens new window) feature for displaying the actual rule component.










 
 
 
 
 



<script>
export default {
  props: ["ruleCtrl"],
};
</script>

<template>
  <div class="rule-slot">
    <span class="slot-text">SLOT #rule</span>
    <component
      :is="ruleCtrl.ruleComponent"
      :value="ruleCtrl.ruleData"
      @input="ruleCtrl.updateRuleData"
    />
  </div>
</template>

← Contributing →