Request: Introduce target hierarchy

[regexj]

Please allow target to be a string or an array of strings.

If array of strings is passed please iterate over those attempting to target each one in order till a target is found. Once target is found continue. Only stop the tour if all targets fail.

In making things mobile friendly we have components that are visible or not depending on whether user is on a desktop, tablet or mobile. Menu's appear different on mobile vs desktop. The UX for a user logging in for the very first time is different to a person triggering the tour after returning to the site and so we load different components accordingly. The vue-tour could naturally just allow us to pass a hierarchy of targets to attempt.

My current workaround is this:

{
  target: '.not-found-wrapper',
  content: this.$t('vueTour.welcome.page.home.step2') as string,
  params: {
    placement: VueTourPlacement.Top
  },
  before: () => new Promise((resolve) => {
    // set target to collection container if new member box doesn't exists
    const step = this.getCurrentStep() + 1; //+1 as we're in the before
    if (!document.querySelector('.not-found-wrapper')) {
      this.vueTour.steps[step].target = '.vue-virtual-collection-container';
    }
    resolve(true);
  })
},

I have to do this for every step where the target may be different according to device or user state. A much more elegant solution would be to pass an array of strings and then the tour could iterate over those targets and continue when the first target is found:

{
  target: ['.not-found-wrapper', '.vue-virtual-collection-container'],
  content: this.$t('vueTour.welcome.page.home.step2') as string,
  params: {
    placement: VueTourPlacement.Top
  }
},