123456789101112131415161718192021222324252627282930313233343536 |
- import {PreviewComponent} from './preview-component';
- import {ThemeSelect} from './theme-select';
-
- export const CategoryPage = {
- props: ['components', 'categories', 'id', 'query'],
- template: `
- <div class="pv-content">
-
- <h2 class="pv-content__header">{{category.name}} Components</h2>
-
- <theme-select :theme="query.theme" :query="query" />
-
- <div class="pv-components">
- <css-component v-for="component in filterComponents()" :component="component" :key="component.id" />
- </div>
- </div>
- `,
- components: {
- 'css-component': PreviewComponent,
- 'theme-select': ThemeSelect
- },
- computed: {
- category() {
- return this.categories.filter(category => category.hash === this.id)[0];
- }
- },
- methods: {
- filterComponents() {
- const category = this.category;
- const components = this.components.filter(component => {
- return component.category === category.name;
- });
- return components;
- },
- }
- };
|