<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/zircle"></script>
<link href="https://unpkg.com/zircle/dist/zircle.css" rel="stylesheet">
<div id="app">
  <z-canvas :views='$options.components' style="background-color: #34495e">
  </z-canvas>
</div>
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
const store = {
  debug: true,
  state: {
    fruits: [
      { name: "Apple", color: "red" },
      { name: "Banana", color: "yellow" },
      { name: "Orange", color: "orange" },
      { name: "Kiwi", color: "green" },
      { name: "papa", color: "accent" },
      { name: "sandia", color: "purple" }
    ],
    results: [],
    query: ""
  }
};

const item = {
  name: "item",
  template: `<z-view>
  {{ item }}
  </z-view>`,
  data() {
    return {
      sharedState: store.state,
      item: this.$zircle.getParams().name
    };
  }
};
const results = {
  name: "results",
  template: `<z-view view="results">
  <z-list
    slot="extension"
    :items="myresults"
    :per-page="3">
      <z-spot slot-scope="props"
      :index='props.index'
      :label="props.name"
      :distance=60
      image-path="https://zircleui.github.io/zircleUI/examples/imageslider/one.jpg"
      :to-view="{name: 'item', params: {name: props.name}}"
      >
      </z-spot>
  </z-list>
</z-view>`,
  data() {
    return {
      sharedState: store.state
    };
  },
  computed: {
    myresults() {
      // clone array before put en collection prop
      return this.sharedState.results;
    }
  },
  methods: {
    storeItem(data) {
      console.log(data);
    }
  }
};
const search = {
  name: "search",
  template: `<z-view view="search">
  <input class="z-input"type="text" placeholder="Try with letter 'a'" :value="fruitVal"
  @input="searchFruit($event.target.value)">
  <div slot="extension">
   <section v-show="sharedState.results.length > 0" >
    <z-spot 
      :angle="45"
      size="medium"
      to-view="results"
      label='Results'>
      {{ sharedState.results.length }}
    </z-spot>
    <z-spot 
      button
      :angle="15"
      size="small"
      @click.native="reset"
      ><i class="fa fa-refresh"></i></z-spot>
      </section>
    </div>
  </z-view>`,
  data() {
    return {
      sharedState: store.state
    };
  },
  computed: {
    fruitVal() {
      return this.sharedState.query;
    }
  },
  methods: {
    searchFruit(e) {
      if (e !== "") {
        this.sharedState.results = this.sharedState.fruits.filter(function(el) {
          return el.name.indexOf(e) > -1;
        });
        this.sharedState.query = e;
      } else {
        this.sharedState.query = "";
        this.sharedState.results = [];
      }
    },
    reset() {
      this.sharedState.query = "";
      this.sharedState.results = [];
    }
  }
};
const home = {
  name: "home",
  template: `<z-view view="home">
  You have {{ sharedState.fruits.length }} fruits!
    <z-spot 
      slot="extension"
      :angle="45"
      size="small"
      to-view="search">
      <i class="fa fa-search"></i>
    </z-spot>
  </z-view>`,
  data() {
    return {
      sharedState: store.state
    };
  }
};

new Vue({
  el: "#app",
  components: {
    home,
    search,
    results,
    item
  },
  created () {
     this.$zircle.config({
       style: {
         theme: 'white',
         mode: 'light'
       }
     })
  },
  mounted() {
    this.$zircle.setView("home");
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.