add usage with MqLayout component

AlexandreBonaventure · Nov 20, 2017 · 692820a · 692820a
1 parent 9cd8b42
commit 692820a
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -93,6 +93,19 @@ new Vue({
 })
 ```
 
+#### MqLayout component
+In addition to `$mq` property this plugin provide a wrapper component to facilitate conditional rendering with media queries.
+
+**Usage**:
+```
+<mq-layout mq="lg">
+  <span> Display on large screen </span>
+</mq-layout>
+
+```
+**Props**
+mq => required | String
+
 ## Browser Support
 This plugin relies on matchMedia API to detect screensize change. So for older browsers and IE, you should polyfill this out:
 Paul Irish: [matchMedia polyfill](https://github.com/paulirish/matchMedia.js)

diff --git a/examples/index.html b/examples/index.html
@@ -3,6 +3,9 @@
 <head>
 	<script src="https://unpkg.com/getlibs"></script>
   <link rel="stylesheet" href="https://unpkg.com/tachyons">
+  <link rel="stylesheet" href="https://unpkg.com/prismjs/themes/prism.css" />
+  <script src="https://unpkg.com/prismjs"></script>
+  <script src="https://unpkg.com/vue-prism-component"></script>
 </head>
 <body>
 	<div id="app">Loading..</div>

diff --git a/examples/index.js b/examples/index.js
@@ -4,10 +4,21 @@ import Plugin from '../src/index.js'
 Vue.use(Plugin)
 
 new Vue({
+  components: {
+    Prism: window.PrismComponent,
+  },
   template: `
     <div class="helvetica tc pa4">
       <h1 class="f4 silver">currentBreakpoint: {{$mq}}</h1>
       <h1>{{$mq | mq({ sm: 'small and medium', lg: 'large'})}}</h1>
+      <div class="center measure-wide tc">
+        <mq-layout mq="lg">
+          <prism language="html" code="&lt;mq-layout mq=&quot;lg&quot;&gt; only large &lt;/mq-layout&gt;"/>
+        </mq-layout>
+        <mq-layout mq="md+">
+          <prism language="html" code="&lt;mq-layout mq=&quot;md+&quot;&gt; md and larger &lt;/mq-layout&gt;"/>
+        </mq-layout>
+      </div>
     </div>
   `,
 }).$mount('#app')
diff --git a/src/component.js b/src/component.js
@@ -0,0 +1,28 @@
+// USAGE
+// mq-layout(mq="lg")
+//   p I’m lg
+import { selectBreakpoints } from './helpers'
+const component = {
+  props: {
+    mq: {
+      required: true,
+      type: String,
+    }
+  },
+  computed: {
+    plusModifier() { return this.mq.slice(-1) === '+' },
+    activeBreakpoints() {
+      const breakpoints = Object.keys(this.$mqAvailableBreakpoints)
+      const mq = this.plusModifier ? this.mq.slice(0, -1) : this.mq
+      return this.plusModifier
+        ? selectBreakpoints(breakpoints, mq)
+        : [this.mq]
+    }
+  },
+  render(h, props) {
+    const shouldRenderChildren = this.activeBreakpoints.includes(this.$mq)
+    return shouldRenderChildren ? h('div', this.$slots.default) : h()
+  },
+}
+
+export default component
diff --git a/src/helpers.js b/src/helpers.js
@@ -31,3 +31,8 @@ export function transformValuesFromBreakpoints(breakpoints, values, currentBreak
   const result = values[currentBreakpoint] || findClosestValue(currentBreakpoint)
   return result
 }
+
+export function selectBreakpoints(breakpoints, currentBreakpoint) {
+  const index = breakpoints.findIndex(b => b === currentBreakpoint)
+  return breakpoints.slice(index)
+}
diff --git a/src/index.js b/src/index.js
@@ -1,4 +1,5 @@
 import { convertBreakpointsToMediaQueries, transformValuesFromBreakpoints } from './helpers.js'
+import MqLayout from './component.js'
 
 const DEFAULT_BREAKPOINT = {
   sm: 450,
@@ -40,6 +41,8 @@ const install = function (Vue, { breakpoints = DEFAULT_BREAKPOINT } = {}) {
       },
     }
   })
+  Vue.prototype.$mqAvailableBreakpoints = breakpoints
+  Vue.component('MqLayout', MqLayout)
 }
 
 export default { install }
diff --git a/test/specs/helpers.spec.js b/test/specs/helpers.spec.js
@@ -1,5 +1,5 @@
 import test from 'tape'
-import { convertBreakpointsToMediaQueries, transformValuesFromBreakpoints } from '../../src/helpers.js'
+import { convertBreakpointsToMediaQueries, transformValuesFromBreakpoints, selectBreakpoints } from '../../src/helpers.js'
 
 test('should transform breakpoints correctly', (t) => {
   t.plan(1)
@@ -45,3 +45,10 @@ test('transformValuesFromBreakpoints should return values with mobile-first over
   const result2 = transformValuesFromBreakpoints(breakpoints, values, 'md')
   t.equal(result2, 1)
 })
+
+test('selectBreakpoints', (t) => {
+  t.plan(1)
+  const breakpoints = ['sm', 'md', 'lg']
+  const result = selectBreakpoints(breakpoints, 'md')
+  t.deepEqual(result, ['md', 'lg'])
+})