F7-V4 + Vue Accordion as notification

by Maiki Nahara

HTML

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/4.2.2/css/framework7.bundle.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/4.2.2/js/framework7.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/framework7-vue.bundle.min.js"></script>
<div id="app">
  <f7-app :params="f7params">
    <f7-statusbar></f7-statusbar>

    <!-- Main View -->
    <f7-view id="main-view" main class="safe-areas">
      <f7-page>
        <f7-navbar>
          <f7-nav-left>
            <f7-link icon-if-ios="f7:menu" icon-if-md="material:menu" panel-open="left"></f7-link>
          </f7-nav-left>
          <f7-nav-title>My App</f7-nav-title>
          <f7-nav-right>
            <f7-link icon-if-ios="f7:menu" icon-if-md="material:menu" panel-open="right"></f7-link>
          </f7-nav-right>
        </f7-navbar>
        <f7-list>
          <f7-list-item link="/page1/" title="Accordion Notification"></f7-list-item>
        </f7-list>
      </f7-page>
    </f7-view>
  </f7-app>
</div>

<!-- Page 1 Template -->
<template id="page1">
    <f7-page>
      <f7-navbar title="Page 1" back-link="Back"></f7-navbar>
<f7-list accordion-list>
  <f7-list-item v-for='item in acList' :key='item.id' accordion-item :title="item.title" :class='{"not-read": !item.read}' @accordion:opened='setRead($event, item)'>
    <f7-accordion-content>
      <f7-block>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.
        </p>
      </f7-block>
    </f7-accordion-content>
  </f7-list-item>
  </f7-list>
    </f7-page>
  </template>

<!-- Page Not Found Template...

CSS

.not-read {
  border-left: 5px solid yellow;
}

JavaScript

// Init F7 Vue Plugin
Framework7.use(Framework7Vue);

// Init Page Components
Vue.component('page1', {
  template: '#page1',
  data() {
    return {
      acList: [{
          id: 1,
          read: false,
          title: 'Notificacion 1'
        },
        {
          id: 2,
          read: true,
          title: 'Notificacion 2'
        },
        {
          id: 3,
          read: false,
          title: 'Notificacion 3'
        },
        {
          id: 4,
          read: true,
          title: 'Notificacion 4'
        },
        {
          id: 5,
          read: true,
          title: 'Notificacion 5'
        },
        {
          id: 6,
          read: true,
          title: 'Notificacion 6'
        },
        {
          id: 7,
          read: false,
          title: 'Notificacion 7'
        }
      ]
    }
  },
  methods: {
    setRead(e, itm) {
      itm.read = true
      this.$nextTick(() => {
        if (!this.Dom7(e.target).hasClass('accordion-item-opened')) this.Dom7(e.target).addClass('accordion-item-opened')
      })
    }
  }
});



Vue.component('page-not-found', {
  template: '#page-not-found'
});

// Init App
new Vue({
  el: '#app',
  data: function() {
    return {
      f7params: {
        root: '#app',
        id: 'io.framework7.testapp',
        name: 'Framework7',
        theme: 'ios',
        view: {
          stackPages: false,
          allowDuplicateUrls: false
        },
        routes: [{
            path: '/page1/',
            component: 'page1'
          },
          {
            path: '(.*)',
            component: 'page-not-found',
          },
        ],
      }
    }
  },
});