Pitcher Filter Tab

PFileCard is used to present files as cards, based on Pitcher file data.

General Info

Mapping item props for text/value

If you have any other model than this for your text or value, you can easily use :itemText="PROP_NAME" :itemValue="PROP_NAME" to map your specific attributes as text/value

Changing emit return type

This behaviour is default. If you need to emit the whole object on input, use :returnObject: true

Editing tab, badge components externally

To be able to edit v-tab and v-badge, you can use :tabProps="{ ...V-Tab Props }", :badgeProps="{ ...V-Badge Props }"

WARNING

Keep in mind, by overriding these values, you will be overriding default values of the component. Check the default values in API section.

Object model for item (button)

attribute	type	description
text	string	required
value	string	required
icon	string	not required, any FA icon, e.g. fa fa-user
description	string	not required, description is the text inside badge

Example

items: [
  {
    text: 'New',
    value: 'new',
    icon: 'fa fa-sparkles',
    description: '5',
  },
  {
    text: 'Popular',
    value: 'popular',
    icon: 'fa fa-fire',
    description: '23',
  },
  {
    text: 'Following',
    value: 'following',
    icon: 'fa fa-share-alt',
    description: '48',
  },
]

Simple usage

Simple usage example of PFilterTab.

Show Code

<template>
  <VRow noGutters>
    <VCol cols="12">
      <PFilterTab v-model="selectedFilter" :items="filters" />
    </VCol>
    <VCol cols="12" class="mt-8 text-center">
      <code>selectedFilter:</code>
      <span class="secondary--text">
        {{ selectedFilter }}
      </span>
    </VCol>
  </VRow>
</template>

<script>
import { PFilterTab } from '@pitcher/pitcherify'
import { defineComponent, ref } from '@vue/composition-api'

export default defineComponent({
  name: 'ExampleComponent',
  components: {
    PFilterTab,
  },
  setup() {
    const selectedFilter = ref(undefined)

    const filters = ref([
      {
        text: 'New',
        value: 'new',
        icon: 'fa fa-sparkles',
        description: '5',
      },
      {
        text: 'Popular',
        value: 'popular',
        icon: 'fa fa-fire',
        description: '23',
      },
      {
        text: 'Following',
        value: 'following',
        icon: 'fa fa-share-alt',
        description: '48',
      },
    ])

    return { selectedFilter, filters }
  },
})
</script>

Usage with String Array

Example usage of PFilterTab with a String Array.

Show Code

<template>
  <VRow noGutters>
    <VCol cols="12">
      <PFilterTab v-model="selectedFilter" :items="filters" />
    </VCol>
    <VCol cols="12" class="mt-8 text-center">
      <code>selectedFilter:</code>
      <span class="secondary--text">
        {{ selectedFilter }}
      </span>
    </VCol>
  </VRow>
</template>

<script>
import { PFilterTab } from '@pitcher/pitcherify'
import { defineComponent, ref } from '@vue/composition-api'

export default defineComponent({
  name: 'ExampleComponent',
  components: {
    PFilterTab,
  },
  setup() {
    const selectedFilter = ref(undefined)
    const filters = ref(['New', 'Popular', 'Following'])

    return { selectedFilter, filters }
  },
})
</script>

Color Variants

Another usage example with different colors.

Show Code

<template>
  <VRow noGutters>
    <h4 class="mb-2">Deep orange (light variant)</h4>
    <PFilterTab v-model="selectedFilterDeepOrangeLight" :items="filters" activeColor="deepOrange" />

    <h4 class="mb-2 mt-6">Deep orange (dark variant)</h4>
    <PFilterTab
      v-model="selectedFilterDeepOrange"
      :items="filters"
      backgroundColor="deep-orange"
      activeColor="deepOrange"
      dark
    />

    <h4 class="mb-2 mt-6">Indigo (dark variant)</h4>
    <PFilterTab v-model="selectedFilterIndigo" :items="filters" backgroundColor="indigo" activeColor="indigo" dark />

    <h4 class="mb-2 mt-6">Blue grey (dark variant)</h4>
    <PFilterTab
      v-model="selectedFilterBlueGrey"
      :items="filters"
      backgroundColor="blue-grey"
      activeColor="blueGrey"
      dark
    />
  </VRow>
</template>

<script>
import { PFilterTab } from '@pitcher/pitcherify'
import { defineComponent, ref } from '@vue/composition-api'

export default defineComponent({
  name: 'ExampleComponent',
  components: {
    PFilterTab,
  },
  setup() {
    const selectedFilterIndigo = ref(undefined)
    const selectedFilterBlueGrey = ref(undefined)
    const selectedFilterDeepOrange = ref(undefined)
    const selectedFilterDeepOrangeLight = ref(undefined)

    const filters = ref([
      {
        text: 'New',
        value: 'new',
        icon: 'fa fa-sparkles',
        description: '5',
      },
      {
        text: 'Popular',
        value: 'popular',
        icon: 'fa fa-fire',
        description: '23',
      },
      {
        text: 'Following',
        value: 'following',
        icon: 'fa fa-share-alt',
        description: '48',
      },
    ])

    return {
      selectedFilterIndigo,
      selectedFilterBlueGrey,
      selectedFilterDeepOrange,
      selectedFilterDeepOrangeLight,
      filters,
    }
  },
})
</script>

Mandatory

Using mandatory: false prop allows user to de-select a tab.

Show Code

<template>
  <VRow noGutters>
    <VCol cols="12">
      <PFilterTab v-model="selectedFilter" :items="filters" :mandatory="false" />
    </VCol>
    <VCol cols="12" class="mt-8 text-center">
      <code>selectedFilter:</code>
      <span class="secondary--text">
        {{ selectedFilter }}
      </span>
    </VCol>
  </VRow>
</template>

<script>
import { PFilterTab } from '@pitcher/pitcherify'
import { defineComponent, ref } from '@vue/composition-api'

export default defineComponent({
  name: 'ExampleComponent',
  components: {
    PFilterTab,
  },
  setup() {
    const selectedFilter = ref(undefined)

    const filters = ref([
      {
        text: 'New',
        value: 'new',
        icon: 'fa fa-sparkles',
        description: '5',
      },
      {
        text: 'Popular',
        value: 'popular',
        icon: 'fa fa-fire',
        description: '23',
      },
      {
        text: 'Following',
        value: 'following',
        icon: 'fa fa-share-alt',
        description: '48',
      },
    ])

    return { selectedFilter, filters }
  },
})
</script>

API

src: pitcherify/src/components/PFilterTab/PFilterTab.vue fa fa-external-link

Pitcher props

Vuetify props

Inherits attributes from vuetify component: VTabs

Pass props at: *   (* means root level as Pitcher props on the <VTabs />)

Props listed below can be used on <PFilterTab />

Events