BaseVariableColumnGrid

The BaseVariableColumnGrid component is a wrapper of the BaseGrid component that listens to the UserClickedColumnPicker and the ColumnsNumberProvided events and passes the selected number of columns to the grid. It also allows to customize the grid items using the available scopedSlots.

Props

Name	Description	Type	Default
animation	Animation component that will be used to animate the grid.	AnimationProp	'ul'
items	The list of items to be rendered.	ListItem[]
columns	The columns to render by default in the grid. This property is used when the user has not selected any value in the column picker.	number	0

Slots

Name	Description	Bindings (name - type - description)
name	Customized item rendering. The slot name can either be default or the item's model	item GridItem - Item to render.

Example

The BaseVariableColumnGrid component is a wrapper of the BaseGrid component that listens to the ColumnsNumberProvided events and passes the selected amount of columns to the grid. It also allows you to customize the grid items using the available scopedSlots.

<template>
  <section class="results">
    <button @click="setColumns(4)" class="column-picker-selector">
      <span class="column-picker-selector__text">4 columns</span>
    </button>
    <BaseVariableColumnGrid :animation="animation" :items="items">
      <template #default="{ item }">
        <span data-test="default-slot">{{ item.id }}</span>
      </template>
      <template #result="{ item }">
        <span data-test="result-slot">{{ 'Result ' + item.id }}</span>
      </template>
    </BaseVariableColumnGrid>
  </section>
</template>
<script>
import { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components'
export default {
  name: 'ResultsSection',
  components: {
    BaseVariableColumnGrid,
  },
  data() {
    return {
      animation: StaggeredFadeAndSlide,
      items: [
        {
          id: 'res-1',
          modelName: 'Result',
          name: 'Product 1',
        },
        {
          id: 'res-2',
          modelName: 'Result',
          name: 'Product 2',
        },
      ],
    }
  },
  methods: {
    setColumns(columns) {
      this.$x.emit('UserClickedColumnPicker', columns)
    },
  },
}
</script>

Playing with props

Configuring the default columns to be rendered. These columns will be the default value until the ColumnsNumberProvided is emitted and changes the value.

<template>
  <section class="results">
    <button @click="setColumns(5)" class="column-picker-selector">
      <span class="column-picker-selector__text">5 columns</span>
    </button>
    <BaseVariableColumnGrid :animation="animation" :items="items" :columns="3">
      <template #default="{ item }">
        <span data-test="default-slot">{{ item.id }}</span>
      </template>
      <template #result="{ item }">
        <span data-test="result-slot">{{ 'Result ' + item.id }}</span>
      </template>
    </BaseVariableColumnGrid>
  </section>
</template>
<script>
import { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components'
export default {
  name: 'ResultsSection',
  components: {
    BaseVariableColumnGrid,
  },
  data() {
    return {
      animation: StaggeredFadeAndSlide,
      items: [
        {
          id: 'res-1',
          modelName: 'Result',
          name: 'Product 1',
        },
        {
          id: 'res-2',
          modelName: 'Result',
          name: 'Product 2',
        },
      ],
    }
  },
  methods: {
    setColumns(columns) {
      this.$x.emit('UserClickedColumnPicker', columns)
    },
  },
}
</script>

Customizing the items width

The --x-size-min-width-grid-item variable can be used to customize the min width of the grid items.

<template>
  <BaseVariableColumnGrid
    :animation="animation"
    :items="items"
    style="--x-size-min-width-grid-item: 150px"
  >
    <template #default="{ item }">
      {{ `Default slot content: ${item.id}` }}
    </template>
  </BaseVariableColumnGrid>
</template>
<script>
import { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components'
export default {
  name: 'ResultsSection',
  components: {
    BaseVariableColumnGrid,
  },
  data() {
    return {
      animation: StaggeredFadeAndSlide,
      items: [
        {
          id: 'res-1',
          modelName: 'Result',
          name: 'Product 1',
        },
        {
          id: 'res-2',
          modelName: 'Result',
          name: 'Product 2',
        },
      ],
    }
  },
}
</script>