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 => {
|
RouterFactory.configure(factory => {
|
||||||
// Simple routes
|
|
||||||
factory.addRoutes([
|
factory.addRoutes([
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
@@ -51,6 +50,21 @@ RouterFactory.configure(factory => {
|
|||||||
component: TestDialog,
|
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
|
// Not found route has lowest priority
|
||||||
|
|||||||
@@ -7,3 +7,5 @@ const theme = {
|
|||||||
info: "#5C6BC0",
|
info: "#5C6BC0",
|
||||||
success: "#43A047",
|
success: "#43A047",
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export default theme;
|
||||||
|
|||||||
Reference in New Issue
Block a user