34 lines
819 B
JavaScript
34 lines
819 B
JavaScript
import {ThemeSelect} from './theme-select';
|
|
|
|
export const PatternPage = {
|
|
props: ['id', 'query'],
|
|
data() {
|
|
const pattern = window.patterns.filter(pattern => {
|
|
return pattern.id == this.id;
|
|
})[0];
|
|
|
|
return {pattern};
|
|
},
|
|
components: {
|
|
'theme-select': ThemeSelect
|
|
},
|
|
template: `
|
|
<div class="pv-content">
|
|
<div v-if="pattern">
|
|
<h2 class="pv-content__header">{{pattern.name}} Pattern</h2>
|
|
|
|
<theme-select :theme="query.theme" :query="query" />
|
|
|
|
<h3 class="pv-title-label">Example</h3>
|
|
<div>
|
|
<div class="pv-pattern__example"><div style="position: static" v-html="pattern.markup"></div></div>
|
|
</div>
|
|
|
|
<h3 class="pv-title-label">HTML</h3>
|
|
|
|
<pre class="pv-markup">{{pattern.markup}}</pre>
|
|
</div>
|
|
</div>
|
|
`,
|
|
};
|