add spectre PR#9

flatanimals · Apr 29, 2019 · 96c0b4d · 96c0b4d
1 parent a75d2f2
commit 96c0b4d
Show file tree

Hide file tree

Showing 5 changed files with 304 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -47,6 +47,7 @@ Currently, supported framework are:
 - [Bulma](https://bulma.io).
 - [Materialize](https://materializecss.com/).
 - [Tailwind](https://tailwindcss.com).
+- [Spectre](https://picturepan2.github.io/spectre/).
 
 PRs are welcome.
 
@@ -134,3 +135,21 @@ new Vue({
   mixins: [CommonBands.Tailwind.mixin]
 });
 ```
+##### Spectre
+
+```javascript
+import Vue from 'vue';
+import {MediaQueries, CommonBands} from 'vue-media-queries';
+import App from './App';
+const mediaQueries = new MediaQueries({
+  bands: CommonBands.Spectre
+});
+Vue.use(mediaQueries);
+new Vue({
+  el: '#app',
+  template: '<App/>',
+  components: { App },
+  mediaQueries: mediaQueries,
+  mixins: [CommonBands.Spectre.mixin]
+});
+```
diff --git a/dist/vue-media-queries.js b/dist/vue-media-queries.js
@@ -507,15 +507,18 @@
   var lodash_throttle = throttle;
 
   // Bulma (http://bulma.io)
+  // Breakpoint document: https://bulma.io/documentation/overview/responsiveness/
   var Bulma = {
     // Named Media Queries
     mobile: '(max-width: 768px)',
     tablet: '(min-width: 769px)',
-    tabletOnly: '(min-width: 769px) and (max-width: 999px)',
-    touch: '(max-width: 999px)',
-    desktop: '(min-width: 1000px) ',
-    desktopOnly: '(min-width: 1000px) and (max-width: 1191px)',
-    wideScreen: '(min-width: 1192px)',
+    tabletOnly: '(min-width: 769px) and (max-width: 1023px)',
+    touch: '(max-width: 1023px)',
+    desktop: '(min-width: 1024px) ',
+    desktopOnly: '(min-width: 1024px) and (max-width: 1215px)',
+    wideScreen: '(min-width: 1216px)',
+    wideScreenOnly: '(min-width: 1216px) and (max-width: 1407px)',
+    fullHD: '(min-width: 1408px)',
     // Media Query Helpers mixin. Use globally or per component
     mixin: {
       computed: {
@@ -539,6 +542,12 @@
         },
         isWideScreen: function isWideScreen() {
           return this.$resize && this.$mq.expr(this.$mq.bands.wideScreen);
+        },
+        isWideScreenOnly: function isWideScreenOnly() {
+          return this.$resize && this.$mq.expr(this.$mq.bands.wideScreenOnly);
+        },
+        isFullHD: function isFullHD() {
+          return this.$resize && this.$mq.expr(this.$mq.bands.fullHD);
         }
       }
     }
@@ -689,12 +698,76 @@
         }
       }
     }
+  }; // Spectre (https://picturepan2.github.io/spectre/)
+
+  var Spectre = {
+    // Named Media Queries
+    xsDown: '(max-width: 479.98px)',
+    xsOnly: '(max-width: 479.98px)',
+    xsUp: '(min-width: 480px)',
+    smDown: '(max-width: 599.98px)',
+    smOnly: '(min-width: 480px) and (max-width: 599.98px)',
+    smUp: '(min-width: 600px)',
+    mdDown: '(max-width: 839.98px)',
+    mdOnly: '(min-width: 600px) and (max-width: 839.98px)',
+    mdUp: '(min-width: 840px)',
+    lgDown: '(max-width: 959.98px)',
+    lgOnly: '(min-width: 840px) and (max-width: 959.98px)',
+    lgUp: '(min-width: 960px)',
+    xlDown: '(max-width: 1279.98px)',
+    xlOnly: '(min-width: 960px) and (max-width: 1279.98px)',
+    xlUp: '(min-width: 1280px)',
+    // Media Query Helpers mixin. Use globally or per component
+    mixin: {
+      computed: {
+        isXsDown: function isXsDown() {
+          return this.$resize && this.$mq.expr(this.$mq.bands.xsDown);
+        },
+        isXsOnly: function isXsOnly() {
+          return this.$resize && this.$mq.expr(this.$mq.bands.xsOnly);
+        },
+        isSmUp: function isSmUp() {
+          return this.$resize && this.$mq.expr(this.$mq.bands.smUp);
+        },
+        isSmDown: function isSmDown() {
+          return this.$resize && this.$mq.expr(this.$mq.bands.smDown);
+        },
+        isSmOnly: function isSmOnly() {
+          return this.$resize && this.$mq.expr(this.$mq.bands.smOnly);
+        },
+        isMdUp: function isMdUp() {
+          return this.$resize && this.$mq.expr(this.$mq.bands.mdUp);
+        },
+        isMdDown: function isMdDown() {
+          return this.$resize && this.$mq.expr(this.$mq.bands.mdDown);
+        },
+        isMdOnly: function isMdOnly() {
+          return this.$resize && this.$mq.expr(this.$mq.bands.mdOnly);
+        },
+        isLgUp: function isLgUp() {
+          return this.$resize && this.$mq.expr(this.$mq.bands.lgUp);
+        },
+        isLgDown: function isLgDown() {
+          return this.$resize && this.$mq.expr(this.$mq.bands.lgDown);
+        },
+        isLgOnly: function isLgOnly() {
+          return this.$resize && this.$mq.expr(this.$mq.bands.lgOnly);
+        },
+        isXlUp: function isXlUp() {
+          return this.$resize && this.$mq.expr(this.$mq.bands.xlUp);
+        },
+        isXlOnly: function isXlOnly() {
+          return this.$resize && this.$mq.expr(this.$mq.bands.xlOnly);
+        }
+      }
+    }
   };
   var bands = {
     Bulma: Bulma,
     Materialize: Materialize,
     Bootstrap4: Bootstrap4,
-    Tailwind: Tailwind
+    Tailwind: Tailwind,
+    Spectre: Spectre
   };
 
   var MediaQueries =

diff --git a/dist/vue-media-queries.mjs b/dist/vue-media-queries.mjs
@@ -501,15 +501,18 @@ function toNumber(value) {
 var lodash_throttle = throttle;
 
 // Bulma (http://bulma.io)
+// Breakpoint document: https://bulma.io/documentation/overview/responsiveness/
 var Bulma = {
   // Named Media Queries
   mobile: '(max-width: 768px)',
   tablet: '(min-width: 769px)',
-  tabletOnly: '(min-width: 769px) and (max-width: 999px)',
-  touch: '(max-width: 999px)',
-  desktop: '(min-width: 1000px) ',
-  desktopOnly: '(min-width: 1000px) and (max-width: 1191px)',
-  wideScreen: '(min-width: 1192px)',
+  tabletOnly: '(min-width: 769px) and (max-width: 1023px)',
+  touch: '(max-width: 1023px)',
+  desktop: '(min-width: 1024px) ',
+  desktopOnly: '(min-width: 1024px) and (max-width: 1215px)',
+  wideScreen: '(min-width: 1216px)',
+  wideScreenOnly: '(min-width: 1216px) and (max-width: 1407px)',
+  fullHD: '(min-width: 1408px)',
   // Media Query Helpers mixin. Use globally or per component
   mixin: {
     computed: {
@@ -533,6 +536,12 @@ var Bulma = {
       },
       isWideScreen: function isWideScreen() {
         return this.$resize && this.$mq.expr(this.$mq.bands.wideScreen);
+      },
+      isWideScreenOnly: function isWideScreenOnly() {
+        return this.$resize && this.$mq.expr(this.$mq.bands.wideScreenOnly);
+      },
+      isFullHD: function isFullHD() {
+        return this.$resize && this.$mq.expr(this.$mq.bands.fullHD);
       }
     }
   }
@@ -683,12 +692,76 @@ var Tailwind = {
       }
     }
   }
+}; // Spectre (https://picturepan2.github.io/spectre/)
+
+var Spectre = {
+  // Named Media Queries
+  xsDown: '(max-width: 479.98px)',
+  xsOnly: '(max-width: 479.98px)',
+  xsUp: '(min-width: 480px)',
+  smDown: '(max-width: 599.98px)',
+  smOnly: '(min-width: 480px) and (max-width: 599.98px)',
+  smUp: '(min-width: 600px)',
+  mdDown: '(max-width: 839.98px)',
+  mdOnly: '(min-width: 600px) and (max-width: 839.98px)',
+  mdUp: '(min-width: 840px)',
+  lgDown: '(max-width: 959.98px)',
+  lgOnly: '(min-width: 840px) and (max-width: 959.98px)',
+  lgUp: '(min-width: 960px)',
+  xlDown: '(max-width: 1279.98px)',
+  xlOnly: '(min-width: 960px) and (max-width: 1279.98px)',
+  xlUp: '(min-width: 1280px)',
+  // Media Query Helpers mixin. Use globally or per component
+  mixin: {
+    computed: {
+      isXsDown: function isXsDown() {
+        return this.$resize && this.$mq.expr(this.$mq.bands.xsDown);
+      },
+      isXsOnly: function isXsOnly() {
+        return this.$resize && this.$mq.expr(this.$mq.bands.xsOnly);
+      },
+      isSmUp: function isSmUp() {
+        return this.$resize && this.$mq.expr(this.$mq.bands.smUp);
+      },
+      isSmDown: function isSmDown() {
+        return this.$resize && this.$mq.expr(this.$mq.bands.smDown);
+      },
+      isSmOnly: function isSmOnly() {
+        return this.$resize && this.$mq.expr(this.$mq.bands.smOnly);
+      },
+      isMdUp: function isMdUp() {
+        return this.$resize && this.$mq.expr(this.$mq.bands.mdUp);
+      },
+      isMdDown: function isMdDown() {
+        return this.$resize && this.$mq.expr(this.$mq.bands.mdDown);
+      },
+      isMdOnly: function isMdOnly() {
+        return this.$resize && this.$mq.expr(this.$mq.bands.mdOnly);
+      },
+      isLgUp: function isLgUp() {
+        return this.$resize && this.$mq.expr(this.$mq.bands.lgUp);
+      },
+      isLgDown: function isLgDown() {
+        return this.$resize && this.$mq.expr(this.$mq.bands.lgDown);
+      },
+      isLgOnly: function isLgOnly() {
+        return this.$resize && this.$mq.expr(this.$mq.bands.lgOnly);
+      },
+      isXlUp: function isXlUp() {
+        return this.$resize && this.$mq.expr(this.$mq.bands.xlUp);
+      },
+      isXlOnly: function isXlOnly() {
+        return this.$resize && this.$mq.expr(this.$mq.bands.xlOnly);
+      }
+    }
+  }
 };
 var bands = {
   Bulma: Bulma,
   Materialize: Materialize,
   Bootstrap4: Bootstrap4,
-  Tailwind: Tailwind
+  Tailwind: Tailwind,
+  Spectre: Spectre
 };
 
 var MediaQueries =

diff --git a/examples/spectre.html b/examples/spectre.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Spectre Example - Vue 2 Media Queries</title>
+</head>
+
+<body>
+  <p>
+    Resize window to observe functionality
+  </p>
+  <div id="app"></div>
+
+  <script type="text/x-template" id="what-is-my-size">
+    <div>
+        <div><strong>Current Screen Size(s):</strong></div>
+        <div v-show="isXsDown">is <code>xs</code> And Down</div>
+        <div v-show="isXsOnly">is <code>xs</code> And Only</div>
+
+        <div v-show="isSmUp">is <code>sm</code> And Up</div>
+        <div v-show="isSmDown">is <code>sm</code> And Down</div>
+        <div v-show="isSmOnly">is <code>sm</code> And Only</div>
+
+        <div v-show="isMdUp">is <code>md</code> And Up</div>
+        <div v-show="isMdDown">is <code>md</code> And Down</div>
+        <div v-show="isMdOnly">is <code>md</code> And Only</div>
+
+        <div v-show="isLgUp">is <code>lg</code> And Up</div>
+        <div v-show="isLgDown">is <code>lg</code> And Down</div>
+        <div v-show="isLgOnly">is <code>lg</code> And Only</div>
+
+        <div v-show="isXlUp">is <code>xl</code> And Up</div>
+        <div v-show="isXlOnly">is <code>xl</code> And Only</div>
+    </div>
+</script>
+
+  <script src="https://unpkg.com/vue"></script>
+  <script src="../dist/vue-media-queries.js"></script>
+  <script>
+    var spectreBands = vueMediaQueries.CommonBands.Spectre;
+    var mediaQueries = new vueMediaQueries.MediaQueries({
+      bands: spectreBands
+    });
+    Vue.use(mediaQueries);
+    var vm = new Vue({
+      el: '#app',
+      template: '#what-is-my-size',
+      mediaQueries: mediaQueries,
+      mixins: [spectreBands.mixin]
+    });
+  </script>
+
+</body>
+
+</html>
diff --git a/src/bands.js b/src/bands.js
@@ -208,9 +208,79 @@ const Tailwind = {
   }
 };
 
+// Spectre (https://picturepan2.github.io/spectre/)
+const Spectre = {
+  // Named Media Queries
+  xsDown: '(max-width: 479.98px)',
+  xsOnly: '(max-width: 479.98px)',
+  xsUp: '(min-width: 480px)',
+  smDown: '(max-width: 599.98px)',
+  smOnly: '(min-width: 480px) and (max-width: 599.98px)',
+  smUp: '(min-width: 600px)',
+  mdDown: '(max-width: 839.98px)',
+  mdOnly: '(min-width: 600px) and (max-width: 839.98px)',
+  mdUp: '(min-width: 840px)',
+  lgDown: '(max-width: 959.98px)',
+  lgOnly: '(min-width: 840px) and (max-width: 959.98px)',
+  lgUp: '(min-width: 960px)',
+  xlDown: '(max-width: 1279.98px)',
+  xlOnly: '(min-width: 960px) and (max-width: 1279.98px)',
+  xlUp: '(min-width: 1280px)',
+
+  // Media Query Helpers mixin. Use globally or per component
+  mixin: {
+    computed: {
+      isXsDown() {
+        return this.$resize && this.$mq.expr(this.$mq.bands.xsDown);
+      },
+      isXsOnly() {
+        return this.$resize && this.$mq.expr(this.$mq.bands.xsOnly);
+      },
+
+      isSmUp() {
+        return this.$resize && this.$mq.expr(this.$mq.bands.smUp);
+      },
+      isSmDown() {
+        return this.$resize && this.$mq.expr(this.$mq.bands.smDown);
+      },
+      isSmOnly() {
+        return this.$resize && this.$mq.expr(this.$mq.bands.smOnly);
+      },
+
+      isMdUp() {
+        return this.$resize && this.$mq.expr(this.$mq.bands.mdUp);
+      },
+      isMdDown() {
+        return this.$resize && this.$mq.expr(this.$mq.bands.mdDown);
+      },
+      isMdOnly() {
+        return this.$resize && this.$mq.expr(this.$mq.bands.mdOnly);
+      },
+
+      isLgUp() {
+        return this.$resize && this.$mq.expr(this.$mq.bands.lgUp);
+      },
+      isLgDown() {
+        return this.$resize && this.$mq.expr(this.$mq.bands.lgDown);
+      },
+      isLgOnly() {
+        return this.$resize && this.$mq.expr(this.$mq.bands.lgOnly);
+      },
+
+      isXlUp() {
+        return this.$resize && this.$mq.expr(this.$mq.bands.xlUp);
+      },
+      isXlOnly() {
+        return this.$resize && this.$mq.expr(this.$mq.bands.xlOnly);
+      },
+    }
+  }
+};
+
 export default {
   Bulma,
   Materialize,
   Bootstrap4,
-  Tailwind
+  Tailwind,
+  Spectre
 };