Workflow

Workflows show the steps in some sort of process or UX flow.

Usage

Use the workflow prop to pass in an array of your workflow items. Use v-model to keep track of the active step. v-model value must be contained in workflow array

<template>
  <div>
    <ci-button @click="advance">
      Programmatic change
    </ci-button>
    <ci-workflow
      v-model="currentStep"
      :workflow="myWorkflow"
    />
  </div>
</template>
<script>
export default {
  data() {
    const workflows = [
      {
        id: 1,
        type: 'trigger',
        text: 'Starting point'
      },
      {
        id: 2,
        icon: 'calendar',
        title: 'Step One',
        text: 'Lorem ipsum dolor sit amet consectetur',
        pxClass: 'Workflow,CustomStepPX,Button'
      },
      {
        id: 3,
        type: 'trigger',
        text: 'Some Trigger'
      },
      {
        id: 4,
        icon: 'clock',
        title: 'Step Three',
        text: 'Lorem ipsum dolor sit amet consectetur'
      },
      {
        id: 5,
        icon: 'file',
        title: 'Step Four',
        text: 'Lorem ipsum dolor sit amet consectetur'
      },
      {
        id: 6,
        icon: 'calendar-check',
        title: 'Step Five',
        text: 'Lorem ipsum dolor sit amet consectetur'
      },
    ]
    return {
      currentStep: workflows[1],
      myWorkflow: workflows
    }
  },
  methods: {
    advance(){
      let currentIndex = this.myWorkflow.indexOf(this.currentStep)
      let newIndex = (currentIndex + 1)%this.myWorkflow.length
      this.currentStep = ['trigger', 'create'].includes(this.myWorkflow[newIndex].type)
        ? this.myWorkflow[newIndex + 1]
        : this.myWorkflow[newIndex]
    }
  }
}
</script>

CiWorkflowItem Interface

Each WorkflowItem can have the following properties.

Property	Type	Description	Required
id	number | string	a unique descriptor for the item	true
type	'trigger' | 'step' | 'create'	The type of item. Default is 'step'.	false
icon	string	The icon to render in the step	true
title	string	The title of the step	true
text	string	The text of the step	true
tooltip	object	The tooltip of create step	false

Step variants

Use the variant option for workflow steps to change variant of the step. Default is normal, but available options are normal and optional. If optional is set for step it adds delete button to right side of step.

<template>
  <ci-workflow
    v-model="currentStep"
    :workflow="myWorkflow"
    @create="createStep"
    @delete="deleteStep"
  />
</template>
<script>
export default {
  data() {
    const availableWorkflows = [
      {
        id: 1,
        type: 'trigger',
        text: 'Starting point'
      },
      {
        id: 2,
        type: 'create',
        stepToAddId: 3,
        pxClass: 'Workflow,CustomCreateStepPX,Button',
        tooltip: {
          text: 'Custom step tooltip',
          placement: 'right'
        }
      },
      {
        id: 3,
        icon: 'calendar',
        title: 'Step Two',
        variant: 'optional',
        text: 'Lorem ipsum dolor sit amet consectetur'
      },
      {
        id: 4,
        type: 'create',
        tooltip: {
          text: 'This is tooltip two',
          placement: 'left'
        }
      },
      {
        id: 5,
        type: 'trigger',
        text: 'Some Trigger'
      },
      {
        id: 6,
        icon: 'clock',
        title: 'Step Three',
        text: 'Lorem ipsum dolor sit amet consectetur'
      },
      {
        id: 7,
        icon: 'file',
        title: 'Step Four',
        text: 'Lorem ipsum dolor sit amet consectetur'
      },
      {
        id: 8,
        icon: 'calendar-check',
        title: 'Step Five',
        text: 'Lorem ipsum dolor sit amet consectetur'
      },
    ]

    const workflows = [
      {
        id: 1,
        type: 'trigger',
        text: 'Starting point'
      },
      {
        id: 2,
        type: 'create',
        stepToAddId: 3,
        tooltip: {
          text: 'Custom step tooltip',
          placement: 'right'
        }
      },
      {
        id: 5,
        type: 'trigger',
        text: 'Some Trigger'
      },
      {
        id: 6,
        icon: 'clock',
        title: 'Step Three',
        text: 'Lorem ipsum dolor sit amet consectetur'
      },
      {
        id: 7,
        icon: 'file',
        title: 'Step Four',
        text: 'Lorem ipsum dolor sit amet consectetur'
      },
      {
        id: 8,
        icon: 'calendar-check',
        title: 'Step Five',
        text: 'Lorem ipsum dolor sit amet consectetur'
      },
    ]
    return {
      currentStep: workflows[1],
      myWorkflow: workflows,
      availableWorkflows
    }
  },
  methods: {
    createStep(item) {
      const findItemIndex = this.myWorkflow.findIndex(u => u.id === item.id)

      if(findItemIndex !== -1) {
        this.$set(this.myWorkflow, findItemIndex, this.availableWorkflows.find(u => u.id === item.stepToAddId))
        this.currentStep = this.myWorkflow[findItemIndex]
      }
    },
    deleteStep(item) {
      const findItemIndex = this.myWorkflow.findIndex(u => u.id === item.id)
      if(findItemIndex !== -1) {
         this.$set(this.myWorkflow, findItemIndex, this.availableWorkflows.find(u => u.id === 2))
      }
    }
  }
}
</script>

Slots

The Workflow component uses scoped slots that can be leveraged for customizing the content of Workflow Triggers and Workflow Steps.

Use the trigger-ID={item} slot for custom triggers. Replace ID with the id of the trigger you want to modify and item with the variable you want to use for your item data.

Use the step-title-ID={item} slot for custom step titles. Replace ID with the id of the trigger you want to modify and item with the variable you want to use for your item data.

Use the step-ID={item} slot for custom steps. Replace ID with the id of the trigger you want to modify and item with the variable you want to use for your item data.

<template>
  <ci-workflow
    v-model="currentStep"
    :workflow="workflow"
  >
    <template #trigger-kickoff="{item}">
      <span style="margin-right: 5px">{{ item.text }}</span>
      <ci-tooltip :text="item.tooltip" />
    </template>

    <template #step-title-email="{item}">
      <div style="display: flex; align-items: center">
        <span style="margin-right: 5px">{{ item.title }}</span>
        <ci-tooltip :text="item.titleTooltip" />
      </div>
    </template>

    <template #step-email="{item}">
      Schedule a follow up meeting. <span style="text-decoration: underline">Be sure to include devs & designers!</span>
    </template>

    <template #step-celebrate>
      <img
        src="https://media1.giphy.com/media/IwAZ6dvvvaTtdI8SD5/giphy.gif?cid=ecf05e47fqb95um9culi6taa3t0evgx3o23ysdawn7gj0k9t&ep=v1_gifs_search&rid=giphy.gif&ct=g"
        width="100%"
      />
    </template>
  </ci-workflow>
</template>
<script>
export default {
  data() {
    const workflows = [
      {
        id: 'kickoff',
        type: 'trigger',
        text: 'Kickoff',
        tooltip: 'This is a tooltip'
      },
      {
        id: 'call',
        icon: 'phone',
        title: 'Phone Intro',
        text: 'Get the person on the phone for an intro.'
      },
      {
        id: 'email',
        icon: 'email-outline',
        title: 'Follow Up',
        titleTooltip: 'Title tooltip',
      },
      {
        id: 'book',
        type: 'trigger',
        text: 'User books a follow up'
      },
      {
        id: 'meet',
        icon: 'people-group',
        title: 'Meet with the team',
        text: 'Lorem ipsum dolor sit amet consectetur'
      },
      {
        id: 'sell',
        icon: 'task-list',
        title: 'Craft a plan',
        text: 'Lorem ipsum dolor sit amet consectetur'
      },
      {
        id: 'close',
        icon: 'landmark',
        title: 'Close the deal',
        text: 'Lorem ipsum dolor sit amet consectetur'
      },
      {
        id: 'signup',
        type: 'trigger',
        text: 'Customer signs up'
      },
      {
        id: 'celebrate',
        icon: 'star',
      },
    ]
    return {
      currentStep: workflows[1],
      workflow: workflows
    }
  }
}
</script>

Events

Event	Arguments	Description
@delete	Deleted item object	Emitted when optional step delete is clicked
@create	Create item object	Emitted when create step type is clicked