Some content for the card.
' 10 | } 11 | }, 12 | { 13 | name: 'cta', 14 | label: 'Call to action', 15 | props: { 16 | title: 'Sign up now', 17 | content: 'Click the button below to do this thing.
', 18 | cta: { 19 | text: 'Click me' 20 | } 21 | } 22 | }, 23 | { 24 | name: 'image', 25 | label: 'With image', 26 | props: { 27 | title: 'A kitten', 28 | content: 'Because every example needs a kitten in there somewhere.
', 29 | image: { 30 | src: 'http://placekitten.com/900/600', 31 | alt: 'Meow' 32 | } 33 | } 34 | } 35 | ] 36 | }; 37 | -------------------------------------------------------------------------------- /demos/nunjucks/src/components/02-patterns/card/card.scss: -------------------------------------------------------------------------------- 1 | .card { 2 | border: 1px solid #ddd; 3 | padding: 15px; 4 | max-width: 600px; 5 | box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); 6 | 7 | &__title { 8 | font-size: 20px; 9 | margin-bottom: 20px; 10 | } 11 | 12 | &__content + .button { 13 | margin-top: 20px; 14 | } 15 | 16 | &__image { 17 | width: 100%; 18 | } 19 | 20 | .figure + &__content { 21 | margin-top: 20px; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /demos/nunjucks/src/components/02-patterns/card/notes.md: -------------------------------------------------------------------------------- 1 | This is a card component. 2 | 3 | It uses the [Button]({component:button}) component inside of it. 4 | 5 | This file is generated from the contents of the [notes.md]({file:card/notes.md}) file. 6 | -------------------------------------------------------------------------------- /demos/nunjucks/src/components/02-patterns/card/view.njk: -------------------------------------------------------------------------------- 1 | {# 2 | # The Nunjucks adapter supports importing of child components 3 | # via the {% component %} tag. 4 | # 5 | # Some examples of how it can be used: 6 | # 7 | # {% component 'component-name' %} 8 | # {% component 'component-name/scenario-name' %} 9 | # {% component 'component-name', props %} 10 | # {% component 'component-name/scenario-name', props %} 11 | # 12 | # Note that `props` above can be a variable or an inline-object of property values. 13 | # If a scenario name *and* props are specified then the two objects are merged. 14 | # 15 | # In the example below, the 'button' component is rendered using the props from 16 | # the 'next' scenario merged with data from the `cta` object. 17 | #} 18 |This is the landing page. You can override this page to customise your styleguide.
6 | -------------------------------------------------------------------------------- /packages/fractalite/src/client/app.js: -------------------------------------------------------------------------------- 1 | /* global window, document */ 2 | 3 | import Vue from 'vue/dist/vue'; 4 | import VueSocketio from 'vue-socket.io-extended'; 5 | import io from 'socket.io-client'; 6 | import Navigation from './components/navigation'; 7 | import Search from './components/search'; 8 | import Error from './components/error'; 9 | import JSONExplorer from './components/json-explorer'; 10 | import SourceCode from './components/source-code'; 11 | import AppLink from './components/app-link'; 12 | import Split from './components/split'; 13 | import router from './router'; 14 | import store from './store'; 15 | import eventBus from './events'; 16 | 17 | Vue.use(VueSocketio, io(), { store }); 18 | 19 | Vue.component('split-pane', Split); 20 | Vue.component('app-link', AppLink); 21 | Vue.component('json-explorer', JSONExplorer); 22 | Vue.component('source-code', SourceCode); 23 | 24 | window.app = new Vue({ 25 | el: '#app', 26 | props: { 27 | loading: false 28 | }, 29 | components: { 30 | Error, 31 | Navigation, 32 | Search 33 | }, 34 | router, 35 | store, 36 | methods: { 37 | resetSearch() { 38 | this.$refs.search.resetSearch(); 39 | } 40 | }, 41 | computed: { 42 | navItems() { 43 | return this.$store.state.nav.items; 44 | }, 45 | searchTargets() { 46 | return this.$store.state.search.targets; 47 | } 48 | }, 49 | async mounted() { 50 | document.querySelector('body').classList.remove('loading'); 51 | 52 | eventBus.$on('loading.start', () => { 53 | this.loading = true; 54 | }); 55 | 56 | eventBus.$on('loading.stop', () => { 57 | this.loading = false; 58 | }); 59 | 60 | await this.$store.dispatch('updateState'); 61 | 62 | /* 63 | * Capture clicks in outside of Vue code and determine 64 | * whether to re-route them via vue-router. 65 | */ 66 | window.addEventListener('click', event => { 67 | const { target } = event; 68 | if (target && target.matches("a:not([href*='://'])") && target.href) { 69 | if (target.matches('[href^="/preview/"]')) return; 70 | const { altKey, ctrlKey, metaKey, shiftKey, button, defaultPrevented } = event; 71 | if (metaKey || altKey || ctrlKey || shiftKey) return; 72 | if (defaultPrevented) return; 73 | if (button !== undefined && button !== 0) return; 74 | if (target && target.getAttribute) { 75 | const linkTarget = target.getAttribute('target'); 76 | if (/\b_blank\b/i.test(linkTarget)) return; 77 | } 78 | const url = new URL(target.href); 79 | const to = url.pathname; 80 | const parts = target.href.split('/'); 81 | if (window.location.pathname === to) { 82 | event.preventDefault(); 83 | } 84 | if (parts[parts.length - 1].split('.').length === 1 && event.preventDefault) { 85 | event.preventDefault(); 86 | this.$router.push(to); 87 | } 88 | } 89 | }); 90 | } 91 | }); 92 | -------------------------------------------------------------------------------- /packages/fractalite/src/client/components/app-link.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'app-link', 3 | template: `${h.value}${escape(str)}{{ error.stack }}
10 | {% endif %}
11 |