Added A dev-only storybook
This commit is contained in:
46
app/imports/ui/pages/StoryBook.vue
Normal file
46
app/imports/ui/pages/StoryBook.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<template lang="html">
|
||||
<toolbar-layout>
|
||||
<div slot="toolbar">
|
||||
Storybook
|
||||
</div>
|
||||
<v-navigation-drawer right app>
|
||||
<v-toolbar color="primary" dark>
|
||||
Components
|
||||
</v-toolbar>
|
||||
<v-list>
|
||||
<v-list-tile
|
||||
v-for="(component, componentName) in $options.components"
|
||||
v-if="componentName !== 'story-book' && componentName !== 'ToolbarLayout'"
|
||||
:key="componentName"
|
||||
@click=""
|
||||
:to="`/storybook/${componentName}`"
|
||||
>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>{{componentName}}</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
<div class="content">
|
||||
<v-card class="ma-4">
|
||||
<component :is="$route.params.component"></component>
|
||||
</v-card>
|
||||
</div>
|
||||
</toolbar-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ToolbarLayout from "/imports/ui/layouts/ToolbarLayout.vue";
|
||||
import HealthBar from '/imports/ui/components/HealthBar.Story.vue';
|
||||
import SkillListTile from '/imports/ui/components/SkillListTile.Story.vue';
|
||||
export default {
|
||||
components: {
|
||||
ToolbarLayout,
|
||||
HealthBar,
|
||||
SkillListTile,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
</style>
|
||||
@@ -22,7 +22,6 @@ const routerFactory = new RouterFactory({
|
||||
|
||||
|
||||
RouterFactory.configure(factory => {
|
||||
// Simple routes
|
||||
factory.addRoutes([
|
||||
{
|
||||
path: '/',
|
||||
@@ -51,6 +50,21 @@ RouterFactory.configure(factory => {
|
||||
component: TestDialog,
|
||||
},
|
||||
]);
|
||||
//Development routes
|
||||
if (Meteor.isDevelopment){
|
||||
let StoryBook = require('/imports/ui/pages/StoryBook.vue').default;
|
||||
factory.addRoutes([
|
||||
{
|
||||
path: '/storybook/:component',
|
||||
name: 'componentStory',
|
||||
component: StoryBook,
|
||||
},{
|
||||
path: '/storybook',
|
||||
name: 'storybook',
|
||||
component: StoryBook,
|
||||
},
|
||||
]);
|
||||
}
|
||||
});
|
||||
|
||||
// Not found route has lowest priority
|
||||
|
||||
@@ -7,3 +7,5 @@ const theme = {
|
||||
info: "#5C6BC0",
|
||||
success: "#43A047",
|
||||
};
|
||||
|
||||
export default theme;
|
||||
|
||||
Reference in New Issue
Block a user