feat: f7-components

Author: Pooya Parsa

Diff for: lib/module.js

@@ -120,6 +120,13 @@ module.exports = function nuxt7 (moduleOptions) {
     options
   })
 
+  // Framework 7 components
+  this.addPlugin({
+    src: resolvePath('templates/f7-components.js'),
+    fileName: 'f7-components.js',
+    options
+  })
+
   // Enable IOS specific meta for web app
   if (!this.options.meta) this.options.meta = {}
   this.options.meta.mobileAppIOS = true

Diff for: lib/templates/f7-components.js

@@ -0,0 +1,143 @@
+import {
+  f7AccordionContent,
+  f7AccordionItem,
+  f7AccordionToggle,
+  f7Accordion,
+  f7Badge,
+  f7BlockFooter,
+  f7BlockHeader,
+  f7BlockTitle,
+  f7Block,
+  f7Button,
+  f7CardContent,
+  f7CardFooter,
+  f7CardHeader,
+  f7Card,
+  f7Checkbox,
+  f7Chip,
+  f7Col,
+  f7FabButton,
+  f7FabButtons,
+  f7Fab,
+  f7Icon,
+  f7Input,
+  f7Label,
+  f7Link,
+  f7ListButton,
+  f7ListGroup,
+  f7ListItemCell,
+  f7ListItemContent,
+  f7ListItemRow,
+  f7ListItem,
+  f7List,
+  f7LoginScreenTitle,
+  f7Message,
+  f7MessagebarAttachment,
+  f7MessagebarAttachments,
+  f7MessagebarSheetImage,
+  f7MessagebarSheetItem,
+  f7MessagebarSheet,
+  f7Messagebar,
+  f7MessagesTitle,
+  f7Messages,
+  f7NavLeft,
+  f7NavRight,
+  f7NavTitle,
+  f7Navbar,
+  f7PageContent,
+  f7Page,
+  f7Panel,
+  f7Preloader,
+  f7Progressbar,
+  f7Radio,
+  f7Range,
+  f7Row,
+  f7Segmented,
+  f7Statusbar,
+  f7Subnavbar,
+  f7SwipeoutActions,
+  f7SwipeoutButton,
+  f7SwiperSlide,
+  f7Swiper,
+  f7Tab,
+  f7Tabs,
+  f7Toggle,
+  f7Toolbar,
+  f7View,
+  f7Views,
+} from 'framework7-vue'
+
+export default {
+  install(Vue) {
+    Vue.mixin({
+      components: {
+        f7AccordionContent,
+        f7AccordionItem,
+        f7AccordionToggle,
+        f7Accordion,
+        f7Badge,
+        f7BlockFooter,
+        f7BlockHeader,
+        f7BlockTitle,
+        f7Block,
+        f7Button,
+        f7CardContent,
+        f7CardFooter,
+        f7CardHeader,
+        f7Card,
+        f7Checkbox,
+        f7Chip,
+        f7Col,
+        f7FabButton,
+        f7FabButtons,
+        f7Fab,
+        f7Icon,
+        f7Input,
+        f7Label,
+        f7Link,
+        f7ListButton,
+        f7ListGroup,
+        f7ListItemCell,
+        f7ListItemContent,
+        f7ListItemRow,
+        f7ListItem,
+        f7List,
+        f7LoginScreenTitle,
+        f7Message,
+        f7MessagebarAttachment,
+        f7MessagebarAttachments,
+        f7MessagebarSheetImage,
+        f7MessagebarSheetItem,
+        f7MessagebarSheet,
+        f7Messagebar,
+        f7MessagesTitle,
+        f7Messages,
+        f7NavLeft,
+        f7NavRight,
+        f7NavTitle,
+        f7Navbar,
+        f7PageContent,
+        f7Page,
+        f7Panel,
+        f7Preloader,
+        f7Progressbar,
+        f7Radio,
+        f7Range,
+        f7Row,
+        f7Segmented,
+        f7Statusbar,
+        f7Subnavbar,
+        f7SwipeoutActions,
+        f7SwipeoutButton,
+        f7SwiperSlide,
+        f7Swiper,
+        f7Tab,
+        f7Tabs,
+        f7Toggle,
+        f7Toolbar,
+        f7View,
+        f7Views,
+      },
+    })
+  }
+}

Diff for: lib/templates/f7.js

@@ -5,15 +5,14 @@ import Vue from 'vue'
 import Framework7 from 'framework7'
 
 // Import F7 Vue Plugin
-import { Framework7Vue, f7View, f7Navbar, f7Page } from 'framework7-vue'
+import { Framework7Vue } from 'framework7-vue'
 
 // Init F7 Vue Plugin
 Vue.use(Framework7Vue, Framework7)
 
-// Register common components
-Vue.component('f7-view', f7View)
-Vue.component('f7-navbar', f7Navbar)
-Vue.component('f7-page', f7Page)
+// Register F7 Vue Components
+import Framework7VueComponents from './f7-components'
+Vue.use(Framework7VueComponents)
 
 // Routes
 import { routes } from './f7-router'