├── _config.yml
├── favicon.ico
├── .eslintignore
├── config
    ├── prod.env.js
    ├── test.env.js
    ├── dev.env.js
    └── index.js
├── Documentation
    ├── logo.png
    └── index.md
├── dist
    ├── assets
    │   ├── favicon.d3dcea2d.ico
    │   ├── main.8bea553f.css
    │   ├── main.793bb65e.js
    │   └── vendor.5582453e.js
    ├── index.html
    ├── Vue-Responsive.min.js
    └── Vue-Responsive.js
├── src
    ├── index.d.ts.map
    ├── mainDemo.js
    ├── index.d.ts
    ├── main.js
    ├── components
    │   ├── DemoFour.vue
    │   ├── DemoFive.vue
    │   ├── DemoTwo.vue
    │   ├── DemoThree.vue
    │   ├── TopInfo.vue
    │   ├── DemoSix.vue
    │   ├── Routes.vue
    │   └── DemoOne.vue
    ├── App.vue
    └── index.js
├── .editorconfig
├── .gitignore
├── .npmignore
├── demo-spa.html
├── .babelrc
├── vite.config.js
├── Vite.html
├── .eslintrc.js
├── LICENSE
├── package.json
├── code-of-conduct.md
└── README.md


/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-leap-day


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reinerBa/Vue-Responsive/HEAD/favicon.ico


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | /build/
2 | /config/
3 | /dist/
4 | /*.js
5 | /test/unit/coverage/
6 | 


--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | module.exports = {
3 |   NODE_ENV: '"production"'
4 | }
5 | 


--------------------------------------------------------------------------------
/Documentation/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reinerBa/Vue-Responsive/HEAD/Documentation/logo.png


--------------------------------------------------------------------------------
/dist/assets/favicon.d3dcea2d.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reinerBa/Vue-Responsive/HEAD/dist/assets/favicon.d3dcea2d.ico


--------------------------------------------------------------------------------
/src/index.d.ts.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":";;IAqNA;;;;;;OAMG;IACH,+CAKC"}


--------------------------------------------------------------------------------
/config/test.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const merge = require('webpack-merge')
3 | const devEnv = require('./dev.env')
4 | 
5 | module.exports = merge(devEnv, {
6 |   NODE_ENV: '"testing"'
7 | })
8 | 


--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const merge = require('webpack-merge')
3 | const prodEnv = require('./prod.env')
4 | 
5 | module.exports = merge(prodEnv, {
6 |   NODE_ENV: '"development"'
7 | })
8 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | npm-debug.log*
 4 | yarn-debug.log*
 5 | yarn-error.log*
 6 | /test/unit/coverage/
 7 | 
 8 | # Editor directories and files
 9 | .idea
10 | .vscode
11 | *.suo
12 | *.ntvs*
13 | *.njsproj
14 | *.sln
15 | *.css.map
16 | *.tgz


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | demo-spa.html
 2 | Demo.html
 3 | gulpfile.js
 4 | _config.yml
 5 | config/
 6 | static/
 7 | test/
 8 | .git/
 9 | .babelrc
10 | .eslintignore
11 | .eslintrc.js
12 | .postcssrc.js
13 | .editorconfig
14 | src/assets/
15 | build/
16 | src/
17 | !src/index.js
18 | *.tgz
19 | dist/static/
20 | dist/index.html
21 | Documentation/logo.png


--------------------------------------------------------------------------------
/src/mainDemo.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import App from './App.vue'
 3 | import responsive from './index'
 4 | import VuePrism from 'vue-prism'
 5 | import 'prismjs/themes/prism.css'
 6 | let Vue = window.Vue
 7 | 
 8 | Vue.use(VuePrism)
 9 | Vue.use(responsive)
10 | Vue.config.productionTip = false
11 | 
12 | new Vue({
13 |   render: (h) => h(App),
14 | }).$mount('#app')
15 | 


--------------------------------------------------------------------------------
/demo-spa.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 |     <script src="https://unpkg.com/vue@2.5.16/dist/vue.min.js"></script>
 7 |     <title>Vue-Responsive examples</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <!-- built files will be auto injected -->
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/index.d.ts:
--------------------------------------------------------------------------------
 1 | export default vueResponsive;
 2 | export namespace vueResponsive {
 3 |     /**
 4 |      * Install vue-responsive globally to Vue.js
 5 |      *
 6 |      * @param  {object} Vue     the constructor of the framework
 7 |      * @param  {object} options parameter to modify the behavior of the plugin
 8 |      * @return {void}         returns nothing
 9 |      */
10 |     function install(Vue: any, options: any): void;
11 | }
12 | //# sourceMappingURL=index.d.ts.map


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false,
 5 |       "targets": {
 6 |         "browsers": ["> 1%", "last 2 versions", "not ie <= 10"]
 7 |       }
 8 |     }],
 9 |     "stage-2"
10 |   ],
11 |   "plugins": ["transform-vue-jsx", "transform-runtime"],
12 |   "env": {
13 |     "test": {
14 |       "presets": ["env", "stage-2"],
15 |       "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
16 |     }
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | const { createVuePlugin } = require('vite-plugin-vue2')
 2 | const { resolve } = require('path')
 3 | 
 4 | module.exports = {
 5 |   base: "./",
 6 |   publicDir: false, 
 7 |   plugins: [createVuePlugin()],
 8 |   server: {
 9 |     open: '/Vite.html'
10 |   },
11 |   build: {
12 |     minify: false,
13 |     assetsDir: 'assets/',
14 |     outDir: 'dist/',
15 |     rollupOptions: {
16 |       input: {
17 |         main: resolve(__dirname, 'Vite.html')
18 |       }
19 |     }
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/Vite.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |   	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
 8 |     <title>Vue Responsive</title>
 9 |   </head>
10 |   <body>
11 |     <div id="app"></div>
12 |     <script type="module" src="/src/mainDemo.js"></script>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | // The Vue build version to load with the `import` command
 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 | import App from './App'
 4 | import responsive from './index'
 5 | import VuePrism from 'vue-prism'
 6 | import 'prismjs/themes/prism.css'
 7 | let Vue = window.Vue
 8 | 
 9 | Vue.use(VuePrism)
10 | Vue.use(responsive)
11 | Vue.config.productionTip = false
12 | 
13 | /* eslint-disable no-new */
14 | new Vue({
15 |   el: '#app',
16 |   components: { App },
17 |   template: '<App/>'
18 | })
19 | 


--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="shortcut icon" type="image/x-icon" href="./assets/favicon.d3dcea2d.ico">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |   	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
 8 |     <title>Vue Responsive</title>
 9 |     <script type="module" crossorigin src="./assets/main.793bb65e.js"></script>
10 |     <link rel="modulepreload" href="./assets/vendor.5582453e.js">
11 |     <link rel="stylesheet" href="./assets/main.8bea553f.css">
12 |   </head>
13 |   <body>
14 |     <div id="app"></div>
15 |     
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | // https://eslint.org/docs/user-guide/configuring
 2 | 
 3 | module.exports = {
 4 |   root: true,
 5 |   parserOptions: {
 6 |     parser: 'babel-eslint'
 7 |   },
 8 |   env: {
 9 |     browser: true,
10 |   },
11 |   extends: [
12 |     // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
13 |     // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
14 |     'plugin:vue/essential', 
15 |     // https://github.com/standard/standard/blob/master/docs/RULES-en.md
16 |     'standard'
17 |   ],
18 |   // required to lint *.vue files
19 |   plugins: [
20 |     'vue'
21 |   ],
22 |   // add your custom rules here
23 |   rules: {
24 |     // allow async-await
25 |     'generator-star-spacing': 'off',
26 |     // allow debugger during development
27 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2016-present Reiner Bamberger
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/components/DemoFour.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="demoFour">
 3 |     <p>
 4 |       Just use <strong>v-responsive</strong> + <strong>[xs, sm, md, lg, xl]</strong> to make elements visible on specific breakpoints and hide them on all others.
 5 |     </p>
 6 |     <pre v-responsive.lg.xl class="language-html"><code v-text="panels[0]"></code></pre>
 7 |     <pre v-responsive.md class="language-html"><code v-text="panels[1]"></code></pre>
 8 |     <pre v-responsive.sm.xs class="language-html"><code v-text="panels[2]"></code></pre>
 9 |     <pre v-responsive.lg.md.sm class="language-html"><code v-text="panels[3]"></code></pre>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | export default {
15 |   name: 'DemoFour',
16 |   data () {
17 |     return {
18 |       panels: [
19 |         `<span v-responsive.lg.xl>
20 |   1. large and extra-large
21 | </span>`,
22 |         `<span v-responsive.md>
23 |   2. medium
24 | </span>`,
25 |         `<span v-responsive.sm.xs>
26 |   3. small and extra-small
27 | </span>`,
28 |         `<span v-responsive.lg.md.sm>
29 |   4. large + medium + small
30 | </span>`
31 |       ]
32 |     }
33 |   }
34 | }
35 | </script>
36 | 
37 | <style scoped>
38 | .demoFour{
39 |   margin: auto;
40 |   margin-left: 100px;
41 | }
42 | .demo-block{
43 |   width: 40%;
44 |   border: 1px solid blue;
45 |   padding: 1rem;
46 |   position: relative;
47 |   display: inline-block;
48 |   margin: 1rem;
49 | }
50 | </style>
51 | 


--------------------------------------------------------------------------------
/src/components/DemoFive.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="demoFive">
 3 |     <pre v-responsive="-543" class="language-html demo-block"><code v-text="text1"></code></pre>
 4 |     <pre v-responsive="-1024" class="language-html demo-block"><code v-text="text2"></code></pre>
 5 |     <pre v-responsive="+1024 && -1440" class="language-html demo-block"><code v-text="text3"></code></pre>
 6 |     <pre v-responsive="+1440" class="language-html demo-block"><code v-text="text4"></code></pre>
 7 |     <pre v-responsive="992" class="language-html demo-block"><code v-text="text5"></code></pre>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   name: 'DemoFive',
14 |   data () {
15 |     return {
16 |       text1: `<span v-responsive="-543">
17 |   Visible@ <543px
18 | </span>`,
19 |       text2: `<span v-responsive="-1024">
20 |   Visible@ <1024px
21 | </span>`,
22 |       text3: `<span v-responsive="+1024 && -1440">
23 |   Visible@ >=1024 and <1440px
24 | </span>`,
25 |       text4: `<span v-responsive="+1440">
26 |   Visible@ >=1440px
27 | </span>`,
28 |       text5: `<span v-responsive="992">
29 |   Visible@ >=992px
30 | </span>`
31 |     }
32 |   }
33 | }
34 | </script>
35 | 
36 | <style scoped>
37 | .demoFive{
38 |   margin: auto;
39 |   margin-left: 100px;
40 | }
41 | .demo-block{
42 |   width: 40%;
43 |   border: 1px solid blue;
44 |   padding: 1rem;
45 |   position: relative;
46 |   display: inline-block;
47 |   margin: 1rem;
48 | }
49 | </style>
50 | 


--------------------------------------------------------------------------------
/src/components/DemoTwo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="demoTwo">
 3 |     <div>
 4 |         <p v-responsive="'hidden-xs'">I am hidden on extra small device screens</p>
 5 |         <p v-responsive="['hidden-sm', 'hidden-xs']">I am hidden on small device screens</p>
 6 |         <p v-responsive="respObj">This elements visibility is controlled by an object</p>
 7 |     </div>
 8 |     <pre class="language-html"><code v-text="codeHtml"></code></pre>
 9 |     <pre class="language-js"><code v-text="codeJs"></code></pre>
10 | 
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |   name: 'DemoTwo',
17 |   data () {
18 |     return {
19 |       respObj: { 'hidden-md': true, 'hidden-lg': true, 'hidden-xl': true },
20 |       codeHtml: `<p v-responsive="'hidden-xs'">I am hidden on extra small device screens</p>
21 | <p v-responsive="['hidden-sm', 'hidden-xs']">I am hidden on small device screens</p>
22 | <span v-responsive="respObj">This elements visibility is controlled by an object</span>`,
23 |       codeJs: `data () { return {
24 |   respObj: { "hidden-md": true, "hidden-lg": true, "hidden-xl": true },
25 | `
26 |     }
27 |   }
28 | }
29 | </script>
30 | 
31 | <style scoped>
32 | p {
33 |   padding: 5px;
34 |   background-color: rgba(76, 255, 0,.4);
35 |   width: fit-content;
36 |   margin-left: auto;
37 |   margin-right: auto;
38 | }
39 | code {
40 |   text-align: left;
41 | }
42 | .demoTwo {
43 |   max-width: 850px;
44 |   margin: 0 auto;
45 | }
46 | </style>
47 | 


--------------------------------------------------------------------------------
/src/components/DemoThree.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="demoThree">
 3 |     <h4 class="title">This example shows how easy you can use the Breakpoints of Bootstrap 3, which are different of the default Bootstrap 4 breakpoints</h4>
 4 | 
 5 |     <p v-responsive:bs3="['hidden-all','xs']">Extra small<br /><img src="http://lorempixel.com/360/240/animals" /></p>
 6 |     <p v-responsive:bs3="['hidden-all','sm']">Small <br /><img src="http://lorempixel.com/540/360/animals" /></p>
 7 |     <p v-responsive:bs3="['hidden-all','md']">Middle<br /><img src="http://lorempixel.com/720/360/animals" /></p>
 8 |     <p v-responsive:bs3="['hidden-all','lg']">Large <br /><img src="http://lorempixel.com/780/360/animals" /></p>
 9 | 
10 |     <h4>
11 |       The sourcecode of the lines above:
12 |     </h4>
13 |     <pre class="language-html"><code v-text="code"></code></pre>
14 | 
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | export default {
20 |   name: 'DemoThree',
21 |   data () {
22 |     return {
23 |       code: `<p v-responsive:bs3="['hidden-all','xs']"> Extra small <img src=".../360/240/animals" /></p>
24 | <p v-responsive:bs3="['hidden-all','sm']"> Small <img src=".../540/360/animals" /></p>
25 | <p v-responsive:bs3="['hidden-all','md']"> Middle <img src=".../720/360/animals" /></p>
26 | <p v-responsive:bs3="['hidden-all','lg']"> Large <img src=".../780/360/animals" /></p>
27 | `
28 |     }
29 |   }
30 | }
31 | </script>
32 | 
33 | <style scoped>
34 | .demoThree {
35 |   max-width: 850px;
36 |   margin: 0 auto;
37 | }
38 | h4.title {
39 |   margin-left: 6em;
40 | }
41 | </style>
42 | 


--------------------------------------------------------------------------------
/Documentation/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | permalink: "/Documentation/"
 3 | ---
 4 | 
 5 | # Documentation for Vue-Responsive
 6 | (WIP)
 7 | 
 8 | ## Introduction
 9 | 
10 | This Plugin adds the ability to hide or show html-elements relative to the screen width. To specify when an element should be hidden it's necessary to define screen-widths as hidden or visible. As default everything is visible, possible parameters for bootstrap 4 breakpoints are:
11 | 
12 | - **hiden-all**: This parameter hides the element in every resolution and has to be overriden in certain widths. Which results in combinations like: `"['hidden-all','xs']"` => The element is only visible at an extra small width (smartphones).
13 | 
14 | - **hidden-xs**: The element is only hidden when the screen width is extra small but not on any larger width.
15 | 
16 | - **hidden-sm**: The element is only hidden when the screen width is small but not on any smaller or larger width.
17 | 
18 | - **hidden-md**: The element is only hidden when the screen width is medium but not on any smaller or larger width.
19 | 
20 | - **hidden-lg**: The element is only hidden when the screen width is large but not on any smaller or larger width.
21 | 
22 | - **hidden-xl**: The element is only hidden when the screen width is extra large but not on any smaller width. This parameter is not available when using bootstrap 3 breakpoints.
23 | 
24 | - The parameter name without hidden makes the element visible, hidden-all is necessary in that case.
25 |   
26 | Of course the parameters can be combined. For instance:
27 | 
28 | ```javascript
29 | 
30 | <p v-responsiveness ="['hidden-sm',  'hidden-md', 'hidden-lg', 'hidden-xl']">
31 |   Text for extra small
32 | </p>
33 |     
34 | ```
35 | 


--------------------------------------------------------------------------------
/src/components/TopInfo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="topInfo">
 3 |     <div id="topInfo">
 4 |       <i v-responsive="['hidden-all','xs']">Extra small</i>
 5 |       <i v-responsive="['hidden-all','sm']">Small </i>
 6 |       <i v-responsive="['hidden-all','md']">Middle</i>
 7 |       <i v-responsive="['hidden-all','lg']">Large </i>
 8 |       <i v-responsive="['hidden-all','xl']">Extra large</i>
 9 |     </div>
10 |     <div class="source-toggle">
11 |       <label><input v-model="showSource" type="checkbox"/>Show Sourcecode</label>
12 |       <pre v-show="showSource" class="language-js"><code v-text="code"></code>
13 |   </pre>
14 | 
15 |     </div>
16 |   </div>
17 | </template>
18 | 
19 | <script>
20 | export default {
21 |   name: 'TopInfo',
22 |   data () {
23 |     return {
24 |       showSource: false,
25 |       code: `<i v-responsive="['hidden-all','xs']">Extra small</i>
26 | <i v-responsive="['hidden-all','sm']">Small </i>
27 | <i v-responsive="['hidden-all','md']">Middle</i>
28 | <i v-responsive="['hidden-all','lg']">Large </i>
29 | <i v-responsive="['hidden-all','xl']">Extra large</i>`
30 |     }
31 |   }
32 | }
33 | </script>
34 | 
35 | <style scoped>
36 | .topInfo{
37 |   position: fixed;
38 |   top: 0;
39 |   left: 0;
40 |   width: 75px;
41 | }
42 | .source-toggle {
43 |   margin-top: .25rem;
44 | }
45 | #topInfo {
46 |   padding: 4px;
47 |   border: 3px dashed orange;
48 |   background-color: rgba(76, 255, 0,.4);
49 |   color: darkturquoise;
50 | }
51 | label {
52 |   font-size: small;
53 | }
54 | pre {
55 |   background-color: #f5f5f5e8;
56 |   border: 1px solid black;
57 |   padding: .25rem;
58 |   font-size: smaller;
59 |   width: fit-content;
60 |   text-align: left;
61 | }
62 | </style>
63 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <routes></routes>
 4 | 
 5 |     <top-info></top-info>
 6 |     <footer>
 7 |       This is a demonstration site for the Open-Source plugin <a href="https://github.com/reinerBa/Vue-Responsive">vue-responsive</a> hosted at Github.com
 8 |     </footer>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | import Routes from './components/Routes.vue'
14 | import TopInfo from './components/TopInfo.vue'
15 | 
16 | export default {
17 |   name: 'App',
18 |   components: {
19 |     Routes,
20 |     TopInfo
21 |   }
22 | }
23 | </script>
24 | 
25 | <style>
26 | footer {
27 |   position: fixed;
28 |   bottom: 0;
29 |   padding: 2px;
30 |   width: 100%;
31 |   text-align: center;
32 |   background-color: antiquewhite;
33 | }
34 | #app {
35 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
36 |   -webkit-font-smoothing: antialiased;
37 |   -moz-osx-font-smoothing: grayscale;
38 |   text-align: center;
39 |   color: #2c3e50;
40 | }
41 | body {
42 |   margin-bottom: 1em;
43 |   background-color: ghostwhite;
44 |   margin-top: 0;
45 |   text-align: center;
46 |   font-family:'Segoe UI','Franklin Gothic Medium', Arial
47 | }
48 | .hljs{display:block;overflow-x:auto;padding:0.5em;background:#F0F0F0}.hljs,.hljs-subst{color:#444}.hljs-comment{color:#888888}.hljs-keyword,.hljs-attribute,.hljs-selector-tag,.hljs-meta-keyword,.hljs-doctag,.hljs-name{font-weight:bold}.hljs-type,.hljs-string,.hljs-number,.hljs-selector-id,.hljs-selector-class,.hljs-quote,.hljs-template-tag,.hljs-deletion{color:#880000}.hljs-title,.hljs-section{color:#880000;font-weight:bold}.hljs-regexp,.hljs-symbol,.hljs-variable,.hljs-template-variable,.hljs-link,.hljs-selector-attr,.hljs-selector-pseudo{color:#BC6060}.hljs-literal{color:#78A960}.hljs-built_in,.hljs-bullet,.hljs-code,.hljs-addition{color:#397300}.hljs-meta{color:#1f7199}.hljs-meta-string{color:#4d99bf}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}
49 | </style>
50 | 


--------------------------------------------------------------------------------
/src/components/DemoSix.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="demoSix">
 3 |     <h4>This example shows how you can use classes instead of only hide/show elements</h4>
 4 |   <p>
 5 |     Just add "v-responsive.class" into an element and it will always have class on it, consisting of the prefix of the choosen set of breakpoints and the current breakpoint.
 6 |     Bootstrap 4 and a middle size Scren will add the class "bs4-md".
 7 |   </p>
 8 |     <div class="ul">
 9 |       <div v-for="(p, idx) in panels" :key="idx" v-responsive.class><span>A responsive panel</span></div>
10 |     </div>
11 |     <br />
12 |     <span>The template code</span>
13 |     <pre class="language-html"><code v-text="codeHtml"></code></pre>
14 |     <span>The style code</span>
15 |     <pre class="language-css"><code v-text="codeStyle"></code></pre>
16 | 
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | export default {
22 |   name: 'DemoSix',
23 |   data () {
24 |     return {
25 |       codeHtml: `<div v-for="(p, idx) in panels" v-responsive.class>
26 |   <span>A responsive panel</span>
27 | </div>`,
28 |       codeStyle: `.bs4-lg, .bs4-xl {
29 |   color: darkblue;
30 |   width: 33%;
31 | }
32 | .bs4-xl {
33 |   width: 25%
34 | }
35 | .bs4-md {
36 |   color: green;
37 |   width: 50%;
38 | }
39 | .bs4-sm, .bs4-xs {
40 |   color: red;
41 |   font-weight: bold;
42 |   width: 100%;
43 | }
44 | `,
45 |       panels: '0000000'.split('0')
46 |     }
47 |   }
48 | }
49 | </script>
50 | 
51 | <style scoped>
52 | .ul{
53 |   display: flex;
54 |   flex-wrap: wrap;
55 | }
56 | .ul > div {
57 |   margin: 3px 0;
58 | }
59 | .ul > div > span {
60 |   width: 75%;
61 |   background-color: lightblue;
62 |   padding: 0 15%;
63 | }
64 | .bs4-lg, .bs4-xl {
65 |   color: darkblue;
66 |   width: 33%;
67 | }
68 | .bs4-xl {
69 |   width: 25%
70 | }
71 | .bs4-md {
72 |   color: green;
73 |   width: 50%;
74 | }
75 | .bs4-sm, .bs4-xs {
76 |   color: red;
77 |   font-weight: bold;
78 |   width: 100%;
79 | }
80 | 
81 | p {
82 |   padding: 5px;
83 |   width: fit-content;
84 |   margin-left: auto;
85 |   margin-right: auto;
86 | }
87 | code {
88 |   text-align: left;
89 | }
90 | .demoSix {
91 |   max-width: 850px;
92 |   margin: 0 auto;
93 |   margin-left: 6em;
94 | }
95 | </style>
96 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-responsive",
 3 |   "version": "1.3.1",
 4 |   "description": "A plugin for responsive design without media querys for Vue.js 2.x",
 5 |   "main": "src/index.js",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build && node -e \"require('fs').rename('dist/Vite.html', 'dist/index.html', () =>{})\" && npm run dist",
 9 |     "serve": "vite preview",
10 |     "live": "live-server --open=Demo.html",
11 |     "dist": "node build/babel.release.js",
12 |     "build:types": "tsc src/index.js -d --declarationDir src/ --declarationMap --emitDeclarationOnly --allowJs"
13 |   },
14 |   "repository": {
15 |     "type": "git",
16 |     "url": "git+https://github.com/reinerBa/Vue-Responsive.git"
17 |   },
18 |   "keywords": [
19 |     "vuejs",
20 |     "responsive"
21 |   ],
22 |   "author": "Reiner Bamberger",
23 |   "license": "MIT",
24 |   "bugs": {
25 |     "url": "https://github.com/reinerBa/Vue-Responsive/issues"
26 |   },
27 |   "homepage": "https://reinerba.github.io/Vue-Responsive/",
28 |   "peerDependencies": {
29 |     "vue": "2.x"
30 |   },
31 |   "devDependencies": {
32 |     "autoprefixer": "^10.4.2",
33 |     "babel-core": "^6.26.3",
34 |     "babel-helper-vue-jsx-merge-props": "^2.0.3",
35 |     "babel-plugin-dynamic-import-node": "^1.2.0",
36 |     "babel-plugin-syntax-jsx": "^6.18.0",
37 |     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
38 |     "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
39 |     "babel-plugin-transform-runtime": "^6.22.0",
40 |     "babel-plugin-transform-vue-jsx": "^3.5.0",
41 |     "babel-preset-env": "^1.7.0",
42 |     "babel-preset-stage-2": "^6.22.0",
43 |     "chalk": "^2.4.2",
44 |     "fs-extra": "^5.0.0",
45 |     "node-notifier": "^10.0.0",
46 |     "ora": "^1.2.0",
47 |     "portfinder": "^1.0.28",
48 |     "rimraf": "^2.7.1",
49 |     "semver": "^5.7.1",
50 |     "shelljs": "^0.8.5",
51 |     "typescript": "^4.5.4",
52 |     "uglify-js": "^3.14.5",
53 |     "vite": "^2.0.5",
54 |     "vite-plugin-vue2": "^1.4.0",
55 |     "vue": "^2.6.12",
56 |     "vue-prism": "^1.0.5",
57 |     "vue-template-compiler": "^2.6.14"
58 |   },
59 |   "engines": {
60 |     "node": ">= 6.0.0",
61 |     "npm": ">= 3.0.0"
62 |   },
63 |   "browserslist": [
64 |     "> 1%",
65 |     "last 2 versions",
66 |     "not ie <= 8"
67 |   ],
68 |   "dependencies": {}
69 | }
70 | 


--------------------------------------------------------------------------------
/src/components/Routes.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="routes">
 3 |     <div class="header">
 4 |     <span v-if="!r.hide" v-for="(r, idx) in routes" :key="idx">
 5 |       <label :for="'route'+idx" :class="{marked: marked === r.component}">{{r.title}}</label>
 6 |       <input v-model="marked" :id="'route'+idx" :value="r.component" name="route" type="radio"/>
 7 |     </span>
 8 |   </div>
 9 |   <div>
10 |     <component :is="marked"></component>
11 |   </div>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | import DemoOne from './DemoOne.vue'
17 | import DemoTwo from './DemoTwo.vue'
18 | import DemoThree from './DemoThree.vue'
19 | import DemoFour from './DemoFour.vue'
20 | import DemoFive from './DemoFive.vue'
21 | import DemoSix from './DemoSix.vue'
22 | 
23 | export default {
24 |   name: 'Routes',
25 |   components: {DemoOne, DemoTwo, DemoThree, DemoFour, DemoFive, DemoSix},
26 |   data () {
27 |     return {
28 |       marked: 'demoFour',
29 |       routes: [
30 |         {
31 |           component: 'demoOne',
32 |           title: 'Overview'
33 |         },
34 |         {
35 |           component: 'demoTwo',
36 |           title: 'Formats'
37 |         },
38 |         {
39 |           component: 'demoThree',
40 |           title: 'Bootstrap 3'
41 |         },
42 |         {
43 |           component: 'demoFour',
44 |           title: 'Tokens'
45 |         },
46 |         {
47 |           component: 'demoFive',
48 |           title: 'Numbers',
49 |           hide: true
50 |         },
51 |         {
52 |           component: 'demoSix',
53 |           title: 'Classes',
54 |           hide: 0
55 |         }
56 |       ]
57 |     }
58 |   },
59 |   mounted () {
60 |     let lastVisited = window.location.hash.substr(1)
61 |     if (lastVisited && this.routes.find(e => e.component === lastVisited)) this.marked = lastVisited
62 |     else window.location.hash = '#' + this.marked
63 |   },
64 |   watch: {
65 |     marked (newVal) {
66 |       window.location.hash = '#' + newVal
67 |     }
68 |   }
69 | }
70 | </script>
71 | 
72 | <style scoped>
73 | .header{
74 |   position: sticky;
75 |   top: 0;
76 |   border: 1px solid black;
77 |   padding: .5rem;
78 |   margin-left: 100px;
79 |   background-color: white;
80 | }
81 | .header > span {
82 |   margin: 3px;
83 | }
84 | .marked{
85 |   background-color: darkorange;
86 |   border-radius: 10%;
87 |   padding: 3px;
88 | }
89 | input[type="radio"] {
90 |     display: none;
91 | }
92 | </style>
93 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | // Template version: 1.3.1
 3 | // see http://vuejs-templates.github.io/webpack for documentation.
 4 | 
 5 | const path = require('path')
 6 | 
 7 | module.exports = {
 8 |   dev: {
 9 | 
10 |     // Paths
11 |     assetsSubDirectory: 'static',
12 |     assetsPublicPath: '/',
13 |     proxyTable: {},
14 | 
15 |     // Various Dev Server settings
16 |     host: 'localhost', // can be overwritten by process.env.HOST
17 |     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
18 |     autoOpenBrowser: false,
19 |     errorOverlay: true,
20 |     notifyOnErrors: true,
21 |     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
22 | 
23 |     // Use Eslint Loader?
24 |     // If true, your code will be linted during bundling and
25 |     // linting errors and warnings will be shown in the console.
26 |     useEslint: true,
27 |     // If true, eslint errors and warnings will also be shown in the error overlay
28 |     // in the browser.
29 |     showEslintErrorsInOverlay: false,
30 | 
31 |     /**
32 |      * Source Maps
33 |      */
34 | 
35 |     // https://webpack.js.org/configuration/devtool/#development
36 |     devtool: 'cheap-module-eval-source-map',
37 | 
38 |     // If you have problems debugging vue-files in devtools,
39 |     // set this to false - it *may* help
40 |     // https://vue-loader.vuejs.org/en/options.html#cachebusting
41 |     cacheBusting: true,
42 | 
43 |     cssSourceMap: true
44 |   },
45 | 
46 |   build: {
47 |     // Template for index.html
48 |     index: path.resolve(__dirname, '../dist/index.html'),
49 | 
50 |     // Paths
51 |     assetsRoot: path.resolve(__dirname, '../dist'),
52 |     assetsSubDirectory: 'static/',
53 |     assetsPublicPath: '',
54 | 
55 |     /**
56 |      * Source Maps
57 |      */
58 | 
59 |     productionSourceMap: true,
60 |     // https://webpack.js.org/configuration/devtool/#production
61 |     devtool: '#source-map',
62 | 
63 |     // Gzip off by default as many popular static hosts such as
64 |     // Surge or Netlify already gzip all static assets for you.
65 |     // Before setting to `true`, make sure to:
66 |     // npm install --save-dev compression-webpack-plugin
67 |     productionGzip: false,
68 |     productionGzipExtensions: ['js', 'css'],
69 | 
70 |     // Run the build command with an extra argument to
71 |     // View the bundle analyzer report after build finishes:
72 |     // `npm run build --report`
73 |     // Set to `true` or `false` to always turn it on or off
74 |     bundleAnalyzerReport: process.env.npm_config_report
75 |   }
76 | }
77 | 


--------------------------------------------------------------------------------
/src/components/DemoOne.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="demoOne">
 3 |     <h1 v-responsive="['hidden-all','xl']">A Vue.js responsivity plugin</h1>
 4 |     <h2 v-responsive="['hidden-all','lg']">A Vue.js responsivity plugin</h2>
 5 |     <h3 v-responsive="['hidden-all','md']">A Vue.js responsivity plugin</h3>
 6 |     <h4 v-responsive="['hidden-all','sm']">A Vue.js responsivity plugin</h4>
 7 |     <h5 v-responsive="['hidden-all','xs']">A Vue.js responsivity plugin</h5>
 8 | 
 9 |     <h1 v-responsive="['hidden-all','xl']">extra large</h1>
10 |     <h2 v-responsive="['hidden-all','lg']">large</h2>
11 |     <h3 v-responsive="['hidden-all','md']">medium</h3>
12 |     <h4 v-responsive="['hidden-all','sm']">small</h4>
13 |     <h5 v-responsive="['hidden-all','xs']">extra small</h5>
14 | 
15 |     <table style="margin:15px auto;border-spacing:0;">
16 |       <tr><th>v-responsive=</th><th>XS</th><th>SM</th><th>MD</th><th>LG</th><th>XL</th></tr>
17 |       <tr><td>['hidden-all', 'xs', 'xl']</td><td>.</td><td></td><td></td><td></td><td>.</td></tr>
18 |       <tr><td>['hidden-xs']</td><td></td><td>.</td><td>.</td><td>.</td><td>.</td></tr>
19 |       <tr><td>['hidden-xs', 'hidden-sm']</td><td><td><td>.</td><td>.</td><td>.</td></tr>
20 |       <tr><td>['hidden-all', 'lg', 'xl']</td><td></td><td></td><td></td><td>.</td><td>.</td></tr>
21 |       <tr><td>['hidden-all', 'xl']</td><td></td><td></td><td></td><td></td><td>.</td></tr>
22 |       <tr><td>['hidden-all', 'xs', 'md', 'xl']</td><td>.</td><td></td><td>.</td><td></td><td>.</td></tr>
23 |     </table>
24 | <h4>
25 |   The sourcecode of the two lines above:
26 | </h4>
27 | <pre class="language-html"><code v-text="code"></code></pre>
28 | 
29 |   </div>
30 | </template>
31 | 
32 | <script>
33 | export default {
34 |   name: 'DemoOne',
35 |   data () {
36 |     return {
37 |       code: `<h1 v-responsive="['hidden-all','xl']">A Vue.js responsivity plugin</h1>
38 | <h2 v-responsive="['hidden-all','lg']">A Vue.js responsivity plugin</h2>
39 | <h3 v-responsive="['hidden-all','md']">A Vue.js responsivity plugin</h3>
40 | <h4 v-responsive="['hidden-all','sm']">A Vue.js responsivity plugin</h4>
41 | <h5 v-responsive="['hidden-all','xs']">A Vue.js responsivity plugin</h5>
42 | 
43 | <h1 v-responsive="['hidden-all','xl']">extra large</h1>
44 | <h2 v-responsive="['hidden-all','lg']">large</h2>
45 | <h3 v-responsive="['hidden-all','md']">medium</h3>
46 | <h4 v-responsive="['hidden-all','sm']">small</h4>
47 | <h5 v-responsive="['hidden-all','xs']">extra small</h5>`
48 |     }
49 |   }
50 | }
51 | </script>
52 | 
53 | <style scoped>
54 |   table td, table th {
55 |     border: 1px solid black;
56 |     padding: 3px;
57 |   }
58 |   td:not(:empty):not(:first-of-type){background-color:lime;color:transparent;}
59 | 
60 | .demoOne{
61 |   max-width: 850px;
62 |   margin: 0 auto;
63 | }
64 | </style>
65 | 


--------------------------------------------------------------------------------
/code-of-conduct.md:
--------------------------------------------------------------------------------
 1 | # Contributor Covenant Code of Conduct
 2 | 
 3 | ## Our Pledge
 4 | 
 5 | In the interest of fostering an open and welcoming environment, we as
 6 | contributors and maintainers pledge to making participation in our project and
 7 | our community a harassment-free experience for everyone, regardless of age, body
 8 | size, disability, ethnicity, gender identity and expression, level of experience,
 9 | nationality, personal appearance, race, religion, or sexual identity and
10 | orientation.
11 | 
12 | ## Our Standards
13 | 
14 | Examples of behavior that contributes to creating a positive environment
15 | include:
16 | 
17 | * Using welcoming and inclusive language
18 | * Being respectful of differing viewpoints and experiences
19 | * Gracefully accepting constructive criticism
20 | * Focusing on what is best for the community
21 | * Showing empathy towards other community members
22 | 
23 | Examples of unacceptable behavior by participants include:
24 | 
25 | * The use of sexualized language or imagery and unwelcome sexual attention or
26 | advances
27 | * Trolling, insulting/derogatory comments, and personal or political attacks
28 | * Public or private harassment
29 | * Publishing others' private information, such as a physical or electronic
30 |   address, without explicit permission
31 | * Other conduct which could reasonably be considered inappropriate in a
32 |   professional setting
33 | 
34 | ## Our Responsibilities
35 | 
36 | Project maintainers are responsible for clarifying the standards of acceptable
37 | behavior and are expected to take appropriate and fair corrective action in
38 | response to any instances of unacceptable behavior.
39 | 
40 | Project maintainers have the right and responsibility to remove, edit, or
41 | reject comments, commits, code, wiki edits, issues, and other contributions
42 | that are not aligned to this Code of Conduct, or to ban temporarily or
43 | permanently any contributor for other behaviors that they deem inappropriate,
44 | threatening, offensive, or harmful.
45 | 
46 | ## Scope
47 | 
48 | This Code of Conduct applies both within project spaces and in public spaces
49 | when an individual is representing the project or its community. Examples of
50 | representing a project or community include using an official project e-mail
51 | address, posting via an official social media account, or acting as an appointed
52 | representative at an online or offline event. Representation of a project may be
53 | further defined and clarified by project maintainers.
54 | 
55 | ## Enforcement
56 | 
57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
58 | reported by contacting the project team of the github repository. All
59 | complaints will be reviewed and investigated and will result in a response that
60 | is deemed necessary and appropriate to the circumstances. The project team is
61 | obligated to maintain confidentiality with regard to the reporter of an incident.
62 | Further details of specific enforcement policies may be posted separately.
63 | 
64 | Project maintainers who do not follow or enforce the Code of Conduct in good
65 | faith may face temporary or permanent repercussions as determined by other
66 | members of the project's leadership.
67 | 
68 | ## Attribution
69 | 
70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
71 | available at [http://contributor-covenant.org/version/1/4][version]
72 | 
73 | [homepage]: http://contributor-covenant.org
74 | [version]: http://contributor-covenant.org/version/1/4/
75 | 


--------------------------------------------------------------------------------
/dist/Vue-Responsive.min.js:
--------------------------------------------------------------------------------
1 | /*! Vue-Responsive v1.3.1
2 | * @Url: https://github.com/reinerBa/Vue-Responsive
3 | * @License: MIT, Reiner Bamberger
4 | */
5 | !function(e,s){"function"==typeof define&&define.amd?define(["exports","babel-runtime/helpers/typeof","babel-runtime/helpers/toConsumableArray"],s):"undefined"!=typeof exports?s(exports,require("babel-runtime/helpers/typeof"),require("babel-runtime/helpers/toConsumableArray")):(s(s={},e._typeof,e.toConsumableArray),e.index=s)}(this,function(e,s,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.vueResponsive=void 0;var r=n(s),P=n(i);function n(e){return e&&e.__esModule?e:{default:e}}var t,_={idIncrement:1,resizeListeners:null,init:!1,_rPermissions:{bs4:{xs:{min:-1,max:543},sm:{min:544,max:767},md:{min:768,max:991},lg:{min:992,max:1199},xl:{min:1200,max:1/0}},bs3:{xs:{min:-1,max:767},sm:{min:768,max:991},md:{min:992,max:1199},lg:{min:1200,max:1/0}}},allProperties:{}},a={bind:function(e,s,i){var r=!!_._rPermissions.default,n=!!s.modifiers.class;if(!_.init){for(var t in i.context.$data){if(0===t.indexOf("responsiveMarks$$")){var a,o=String(t).replace("responsiveMarks$$","").toLowerCase();for(a in _._rPermissions[o]={},i.context.$data[t])_._rPermissions[o][a]=i.context.$data[t][a]}"responsiveDefault$$"===t&&(r=i.context.$data[t])}_._rPermissions.undefined=r?_._rPermissions[r]:_._rPermissions.bs4,_.init++}var l,d=["hidden-all"],p=[],u=r?_._rPermissions.defaultName:s.arg||"bs4";for(l in _._rPermissions[s.arg])d.push(l),p.push(l),d.push("hidden-"+l);_.resizeListeners||(_.resizeListeners={},window.addEventListener("resize",function(){for(var e in _.resizeListeners)isNaN(e)||_.resizeListeners[e]()})),e.style.display&&(e.dataset.initialDisplay=e.style.display||getComputedStyle(e,null).display);var f=[],m=window.Object.keys(s.modifiers);if(!n)if(m.some(function(e){return~p.indexOf(e.replace(/\+|-/g,""))}))m.forEach(function(e){}),f.push.apply(f,(0,P.default)(m)),f.push("hidden-all"),f.sort();else if(Array.isArray(s.value)||"string"==typeof s.expression&&s.expression.match(/[*]/))(f=Array.isArray(s.value)?s.value:(m=s.expression.replace(/'/g,'"'),JSON.parse(m))).sort();else if(s.value instanceof Object)for(var c in s.value)s.value[c]&&f.push(c);else{if("string"!=typeof s.value&&"string"!=typeof s.expression)return;var v=s.value||s.expression.replace(/'"/g,"");(f=new Array(v)).sort()}v=String(_.idIncrement++);e.dataset.responsives=v;var y={lastBp:"",bpSet:u,useClass:n},n=f.indexOf("hidden-all");if(~n)for(var x in f.splice(n,1),_._rPermissions[s.arg])y[x]=0;else for(var b in _._rPermissions[s.arg])y[b]=1;for(var h=0;h<f.length;h++){var g=f[h];~d.indexOf(g)&&(0===g.indexOf("hidden")?y[g.split("-")[1]]=0:y[g]=1)}_.allProperties[v]=y},inserted:function(t,a,e){var o;function s(){var e,s=_.allProperties[o],i=window.innerWidth,r=t.dataset.initialDisplay||"",n=_._rPermissions[a.arg];for(e in n)if(i>=n[e].min&&i<=n[e].max){s.lastBp!==e&&(_.allProperties[o].useClass?(t.classList.add(s.bpSet+"-"+e),t.classList.remove(s.bpSet+"-"+s.lastBp)):s[e]?t.style.display=r:t.style.setProperty("display","none","important"),_.allProperties[o].lastBp=e);break}}null!=t.dataset.responsives&&(o=t.dataset.responsives,s(),_.resizeListeners[o]=s)},unbind:function(e,s,i){e=e.dataset.responsives;delete _.resizeListeners[e]},install:function(e,s){"object"===(void 0===s?"undefined":(0,r.default)(s))&&s.breakpoints&&(_._rPermissions.default=s.breakpoints),e.directive("responsive",a)}};e.vueResponsive=a,e.default=a;try{var o=(o=document.currentScript)||(t=document.getElementsByTagName("script"))[t.length-1];Boolean(o.getAttribute("notGlobal"))||"undefined"==typeof window||"function"!=typeof window.Vue||window.Vue.use(a)}catch(e){console.error(e)}});


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <p align="center">
  2 |   <img src="Documentation/logo.png" />
  3 | </p>
  4 | 
  5 | # Vue-Responsive
  6 | 
  7 | <a href="https://standardjs.com" style="float: right; padding: 0 0 20px 20px;"><img src="https://cdn.rawgit.com/feross/standard/master/sticker.svg" alt="JavaScript Standard Style" width="100" align="right"></a>
  8 | 
  9 | [![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)
 10 | [![npm](https://img.shields.io/npm/v/vue-responsive.svg)](https://www.npmjs.com/package/vue-responsive)
 11 | [![Npm package yearly downloads](https://badgen.net/npm/dy/vue-responsive)](https://npmjs.com/package/vue-responsive)
 12 | [![license](https://img.shields.io/github/license/reinerBa/Vue-Responsive.svg)](https://github.com/reinerBa/vue-responsive/blob/master/LICENSE)
 13 | [![Github file size](https://img.shields.io/github/size/reinerBa/Vue-Responsive/dist/Vue-Responsive.min.js.svg)](https://raw.githubusercontent.com/reinerBa/Vue-Responsive/master/dist/Vue-Responsive.min.js)
 14 | [![GitHub stars](https://img.shields.io/github/stars/reinerBa/vue-responsive.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/reinerBa/vue-responsive/stargazers/)
 15 | 
 16 | 
 17 | [![NPM](https://nodei.co/npm/vue-responsive.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/vue-responsive/)
 18 | 
 19 | **Breaking Changes for verison 1.x:** 
 20 | 
 21 | - **Tag is now `v-responsive` the old `v-responsiveness` is no longer supported.**
 22 | - **The file `Vue_Responsive.common.js` does no longer exist** 
 23 | 
 24 | Is a directive to use responsive breakpoints on html elements. Because sometimes it's nice to have a chance to let the view do resolution specific things.
 25 | 
 26 | - **No further Dependencies** 
 27 | - **🔧 Chrome, Firefox, IE11+**
 28 | 
 29 | 
 30 | 📺 Check the [Demo](https://reinerba.github.io/Vue-Responsive/dist/)-link (IE11-[Demo](http://reinerba.github.io/Vue-Responsive/Demo.html) without webpack)
 31 | 
 32 | 📖 [Docs](https://reinerba.github.io/Vue-Responsive/Documentation/)
 33 | 
 34 | ## 🔧  Install
 35 | `npm install vue-responsive`
 36 | 
 37 | ```javascript
 38 | 
 39 | import responsive from 'vue-responsive'
 40 | Vue.use(responsive)
 41 | ```
 42 | 
 43 | or in your Browser as **CDN**: <br/>
 44 | `<script src="https://unpkg.com/vue-responsive@1.3.1/dist/Vue-Responsive.min.js"></script>`
 45 | 
 46 | ## 👈 Shortest usecase
 47 | 
 48 | Just put the breakpoint identifiers behind the directive with dots:
 49 | 
 50 | ```html
 51 | 
 52 |    <div v-responsive.lg.xl >Only visible on desktop !</div>
 53 | 
 54 |    <div v-responsive.md    >Visible on tablet ☺</div>
 55 | 
 56 |    <div v-responsive.sm.xs >Only visible on smartphone!</div>
 57 | ```
 58 | 
 59 | ## 👈 Small usage example
 60 | 
 61 | ```javascript
 62 | 
 63 | <template>
 64 |   <div>
 65 |     <h1 v-responsive="'hidden-xs'">Big Title</h1>
 66 |     <div v-responsive="['hidden-all','xs','sm']">
 67 |       Only visible in small and extra-small windows
 68 |     </div>
 69 | 
 70 |     <h1 v-responsive="middleSize">Big Jumbotron</h1>
 71 |   </div>
 72 | </template>
 73 | 
 74 | <script>
 75 |   import vueResponsive from 'vue-responsive'
 76 |   Vue.directive('responsive', vueResponsive)
 77 |   ...
 78 |   data:{
 79 | 	middleSize: ['hidden-all','lg','xl']
 80 |   } 
 81 | </script>
 82 | ```
 83 | 
 84 | # Features
 85 | 
 86 | This directive adds responsive Feautures to single HTML-Elements without CSS or @Media.
 87 | 
 88 | The default Responsive breaks follow Bootstrap 4 [Responsive Utils](https://v4-alpha.getbootstrap.com/layout/responsive-utilities/).
 89 | 
 90 | The Bootstrap 3 breakpoints are includes as well.
 91 | 
 92 | ## Do you miss a feature?
 93 | Take charge and file an issue or [add your idea](http://feathub.com/reinerBa/Vue-Responsive/features/new) or [vote for your favorite feature](http://feathub.com/reinerBa/Vue-Responsive) to be implemented:
 94 | 
 95 | [![Feature Requests](http://feathub.com/reinerBa/Vue-Responsive?format=svg)](http://feathub.com/reinerBa/Vue-Responsive)
 96 | 
 97 | # Usage
 98 | 
 99 | In the browser just include the script and use the directive on a Html-Element inside a Vue Element
100 | 
101 |     <script src="Vue-Responsive.min.js"></script>
102 | 
103 | **Advanced:** If you do not want the directive to be globally available just add the attribute *notGlobal* with a not empty value in the script tag and define it the components with:
104 | 
105 | 
106 | ```html
107 | 
108 |     <script src="Vue-Responsive.min.js" notGlobal="true" ></script>	
109 | 	...
110 | 	directives:{
111 | 		// the global variable is 'index.vueResponsive'
112 | 		responsive: index.vueResponsive
113 | 	}
114 | ```
115 | 
116 | ## For Bootstrap 4 breakpoints
117 | At default every resolution is visible, the hidden-all tag changes this to everything hidden (display:none). These tags are valid **hidden-all**, **xs**, **sm**, **md**, **lg**, **xl**, **hidden-xs**,...,**hidden-xl**.
118 | 
119 | ```javascript
120 | 
121 |   <h1 v-responsive="'hidden-xs'">Big Title</h1>
122 |   <div v-responsive="['hidden-all','md','lg']">Only visible in Middle and large Size View</div>
123 |   <div v-responsive="['hidden-lg']">Only hidden at lg</div>
124 | 
125 |   <h1 v-responsive="middleSize">Jumbotron</h1>
126 |   ...	//in the vue object
127 |   data:{
128 |     middleSize:['hidden-all','lg','xl']
129 |   } 
130 | 
131 | ```
132 | 
133 | ## For Bootstrap 3 breakpoints
134 | Just add **:bs3** after the directive to use bootstrap 3 breakpoints:
135 | 
136 | ```javascript
137 | 
138 |   <p v-responsive:bs3="['hidden-xs']">
139 |     As you can see on the big picture below.<br /><img ... />
140 |   </p>
141 | 
142 | ```
143 | 
144 | In this defintion the **xl** breakpoint doesn't exist.
145 | 
146 | ## For self defined breakpoints 
147 | First you have to declar your own breakpoints in the component/root wich wraps the html-elements with the directive. Every definition must start with **responsiveMarks$$** and a following name. So you can easily create breakpoints to differentiate between desktop and smartphones for instance, as you can see in the demo.html:
148 | 	
149 | ```javascript
150 | 
151 |   <p v-responsive:twoMarks="'hidden-desktop'">
152 |     Visible on smartphone<br />
153 |     <img src="http://lorempixel.com/360/240/animals" />
154 |   </p>
155 | 
156 |   ... //in the vue object
157 |   data:{
158 |     responsiveMarks$$twoMarks: {  //set a custom breakpoint with the name "twoMarks"
159 |       smartphone: { 
160 |         show: true, 
161 |         min: -1, 
162 |         max: 767 
163 |       }, 
164 |       desktop: { 
165 |         show: true, 
166 |         min: 768, 
167 |         max: Infinity 
168 |       } 
169 |     }
170 |   } 
171 | 
172 | ```
173 | 
174 | You can declar as much own definitions as you wish. Every defintion should have **min:-1** for its smalles breakpoint and **max:Infinity** for its biggest.
175 | 
176 | 
177 | ### Planned 
178 |   - Mixin to trigger methods on breakpoint change
179 |   - Add and remove classes instead of changing only the style
180 | 
181 | # License
182 | MIT [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](/LICENSE.md)
183 | 


--------------------------------------------------------------------------------
/dist/assets/main.8bea553f.css:
--------------------------------------------------------------------------------
  1 | 
  2 | table td[data-v-46488d3e], table th[data-v-46488d3e] {
  3 |     border: 1px solid black;
  4 |     padding: 3px;
  5 | }
  6 | td[data-v-46488d3e]:not(:empty):not(:first-of-type){background-color:lime;color:transparent;}
  7 | .demoOne[data-v-46488d3e]{
  8 |   max-width: 850px;
  9 |   margin: 0 auto;
 10 | }
 11 | 
 12 | p[data-v-5c23a6f4] {
 13 |   padding: 5px;
 14 |   background-color: rgba(76, 255, 0,.4);
 15 |   width: fit-content;
 16 |   margin-left: auto;
 17 |   margin-right: auto;
 18 | }
 19 | code[data-v-5c23a6f4] {
 20 |   text-align: left;
 21 | }
 22 | .demoTwo[data-v-5c23a6f4] {
 23 |   max-width: 850px;
 24 |   margin: 0 auto;
 25 | }
 26 | 
 27 | .demoThree[data-v-7313f052] {
 28 |   max-width: 850px;
 29 |   margin: 0 auto;
 30 | }
 31 | h4.title[data-v-7313f052] {
 32 |   margin-left: 6em;
 33 | }
 34 | 
 35 | .demoFour[data-v-f98d1a6c]{
 36 |   margin: auto;
 37 |   margin-left: 100px;
 38 | }
 39 | .demo-block[data-v-f98d1a6c]{
 40 |   width: 40%;
 41 |   border: 1px solid blue;
 42 |   padding: 1rem;
 43 |   position: relative;
 44 |   display: inline-block;
 45 |   margin: 1rem;
 46 | }
 47 | 
 48 | .demoFive[data-v-42ef45ee]{
 49 |   margin: auto;
 50 |   margin-left: 100px;
 51 | }
 52 | .demo-block[data-v-42ef45ee]{
 53 |   width: 40%;
 54 |   border: 1px solid blue;
 55 |   padding: 1rem;
 56 |   position: relative;
 57 |   display: inline-block;
 58 |   margin: 1rem;
 59 | }
 60 | 
 61 | .ul[data-v-7d57b4ce]{
 62 |   display: flex;
 63 |   flex-wrap: wrap;
 64 | }
 65 | .ul > div[data-v-7d57b4ce] {
 66 |   margin: 3px 0;
 67 | }
 68 | .ul > div > span[data-v-7d57b4ce] {
 69 |   width: 75%;
 70 |   background-color: lightblue;
 71 |   padding: 0 15%;
 72 | }
 73 | .bs4-lg[data-v-7d57b4ce], .bs4-xl[data-v-7d57b4ce] {
 74 |   color: darkblue;
 75 |   width: 33%;
 76 | }
 77 | .bs4-xl[data-v-7d57b4ce] {
 78 |   width: 25%
 79 | }
 80 | .bs4-md[data-v-7d57b4ce] {
 81 |   color: green;
 82 |   width: 50%;
 83 | }
 84 | .bs4-sm[data-v-7d57b4ce], .bs4-xs[data-v-7d57b4ce] {
 85 |   color: red;
 86 |   font-weight: bold;
 87 |   width: 100%;
 88 | }
 89 | p[data-v-7d57b4ce] {
 90 |   padding: 5px;
 91 |   width: fit-content;
 92 |   margin-left: auto;
 93 |   margin-right: auto;
 94 | }
 95 | code[data-v-7d57b4ce] {
 96 |   text-align: left;
 97 | }
 98 | .demoSix[data-v-7d57b4ce] {
 99 |   max-width: 850px;
100 |   margin: 0 auto;
101 |   margin-left: 6em;
102 | }
103 | 
104 | .header[data-v-308776dc]{
105 |   position: sticky;
106 |   top: 0;
107 |   border: 1px solid black;
108 |   padding: .5rem;
109 |   margin-left: 100px;
110 |   background-color: white;
111 | }
112 | .header > span[data-v-308776dc] {
113 |   margin: 3px;
114 | }
115 | .marked[data-v-308776dc]{
116 |   background-color: darkorange;
117 |   border-radius: 10%;
118 |   padding: 3px;
119 | }
120 | input[type="radio"][data-v-308776dc] {
121 |     display: none;
122 | }
123 | 
124 | .topInfo[data-v-4013c930]{
125 |   position: fixed;
126 |   top: 0;
127 |   left: 0;
128 |   width: 75px;
129 | }
130 | .source-toggle[data-v-4013c930] {
131 |   margin-top: .25rem;
132 | }
133 | #topInfo[data-v-4013c930] {
134 |   padding: 4px;
135 |   border: 3px dashed orange;
136 |   background-color: rgba(76, 255, 0,.4);
137 |   color: darkturquoise;
138 | }
139 | label[data-v-4013c930] {
140 |   font-size: small;
141 | }
142 | pre[data-v-4013c930] {
143 |   background-color: #f5f5f5e8;
144 |   border: 1px solid black;
145 |   padding: .25rem;
146 |   font-size: smaller;
147 |   width: fit-content;
148 |   text-align: left;
149 | }
150 | 
151 | footer {
152 |   position: fixed;
153 |   bottom: 0;
154 |   padding: 2px;
155 |   width: 100%;
156 |   text-align: center;
157 |   background-color: antiquewhite;
158 | }
159 | #app {
160 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
161 |   -webkit-font-smoothing: antialiased;
162 |   -moz-osx-font-smoothing: grayscale;
163 |   text-align: center;
164 |   color: #2c3e50;
165 | }
166 | body {
167 |   margin-bottom: 1em;
168 |   background-color: ghostwhite;
169 |   margin-top: 0;
170 |   text-align: center;
171 |   font-family:'Segoe UI','Franklin Gothic Medium', Arial
172 | }
173 | .hljs{display:block;overflow-x:auto;padding:0.5em;background:#F0F0F0}.hljs,.hljs-subst{color:#444}.hljs-comment{color:#888888}.hljs-keyword,.hljs-attribute,.hljs-selector-tag,.hljs-meta-keyword,.hljs-doctag,.hljs-name{font-weight:bold}.hljs-type,.hljs-string,.hljs-number,.hljs-selector-id,.hljs-selector-class,.hljs-quote,.hljs-template-tag,.hljs-deletion{color:#880000}.hljs-title,.hljs-section{color:#880000;font-weight:bold}.hljs-regexp,.hljs-symbol,.hljs-variable,.hljs-template-variable,.hljs-link,.hljs-selector-attr,.hljs-selector-pseudo{color:#BC6060}.hljs-literal{color:#78A960}.hljs-built_in,.hljs-bullet,.hljs-code,.hljs-addition{color:#397300}.hljs-meta{color:#1f7199}.hljs-meta-string{color:#4d99bf}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}
174 | /**
175 |  * prism.js default theme for JavaScript, CSS and HTML
176 |  * Based on dabblet (http://dabblet.com)
177 |  * @author Lea Verou
178 |  */
179 | 
180 | code[class*="language-"],
181 | pre[class*="language-"] {
182 | 	color: black;
183 | 	background: none;
184 | 	text-shadow: 0 1px white;
185 | 	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
186 | 	font-size: 1em;
187 | 	text-align: left;
188 | 	white-space: pre;
189 | 	word-spacing: normal;
190 | 	word-break: normal;
191 | 	word-wrap: normal;
192 | 	line-height: 1.5;
193 | 
194 | 	-moz-tab-size: 4;
195 | 	-o-tab-size: 4;
196 | 	tab-size: 4;
197 | 
198 | 	-webkit-hyphens: none;
199 | 	-moz-hyphens: none;
200 | 	-ms-hyphens: none;
201 | 	hyphens: none;
202 | }
203 | 
204 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
205 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
206 | 	text-shadow: none;
207 | 	background: #b3d4fc;
208 | }
209 | 
210 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
211 | code[class*="language-"]::selection, code[class*="language-"] ::selection {
212 | 	text-shadow: none;
213 | 	background: #b3d4fc;
214 | }
215 | 
216 | @media print {
217 | 	code[class*="language-"],
218 | 	pre[class*="language-"] {
219 | 		text-shadow: none;
220 | 	}
221 | }
222 | 
223 | /* Code blocks */
224 | pre[class*="language-"] {
225 | 	padding: 1em;
226 | 	margin: .5em 0;
227 | 	overflow: auto;
228 | }
229 | 
230 | :not(pre) > code[class*="language-"],
231 | pre[class*="language-"] {
232 | 	background: #f5f2f0;
233 | }
234 | 
235 | /* Inline code */
236 | :not(pre) > code[class*="language-"] {
237 | 	padding: .1em;
238 | 	border-radius: .3em;
239 | 	white-space: normal;
240 | }
241 | 
242 | .token.comment,
243 | .token.prolog,
244 | .token.doctype,
245 | .token.cdata {
246 | 	color: slategray;
247 | }
248 | 
249 | .token.punctuation {
250 | 	color: #999;
251 | }
252 | 
253 | .token.namespace {
254 | 	opacity: .7;
255 | }
256 | 
257 | .token.property,
258 | .token.tag,
259 | .token.boolean,
260 | .token.number,
261 | .token.constant,
262 | .token.symbol,
263 | .token.deleted {
264 | 	color: #905;
265 | }
266 | 
267 | .token.selector,
268 | .token.attr-name,
269 | .token.string,
270 | .token.char,
271 | .token.builtin,
272 | .token.inserted {
273 | 	color: #690;
274 | }
275 | 
276 | .token.operator,
277 | .token.entity,
278 | .token.url,
279 | .language-css .token.string,
280 | .style .token.string {
281 | 	color: #9a6e3a;
282 | 	/* This background color was intended by the author of this theme. */
283 | 	background: hsla(0, 0%, 100%, .5);
284 | }
285 | 
286 | .token.atrule,
287 | .token.attr-value,
288 | .token.keyword {
289 | 	color: #07a;
290 | }
291 | 
292 | .token.function,
293 | .token.class-name {
294 | 	color: #DD4A68;
295 | }
296 | 
297 | .token.regex,
298 | .token.important,
299 | .token.variable {
300 | 	color: #e90;
301 | }
302 | 
303 | .token.important,
304 | .token.bold {
305 | 	font-weight: bold;
306 | }
307 | .token.italic {
308 | 	font-style: italic;
309 | }
310 | 
311 | .token.entity {
312 | 	cursor: help;
313 | }
314 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
  1 | // For Bootstrap 4
  2 | const bootstrap4Breakpoints = {
  3 |   xs: {
  4 |     min: -1,
  5 |     max: 543
  6 |   },
  7 |   sm: {
  8 |     min: 544,
  9 |     max: 767
 10 |   },
 11 |   md: {
 12 |     min: 768,
 13 |     max: 991
 14 |   },
 15 |   lg: {
 16 |     min: 992,
 17 |     max: 1199
 18 |   },
 19 |   xl: {
 20 |     min: 1200,
 21 |     max: Infinity
 22 |   }
 23 | }
 24 | 
 25 | // For Bootstrap 3
 26 | const bootstrap3Breakpoints = {
 27 |   xs: {
 28 |     min: -1,
 29 |     max: 767
 30 |   },
 31 |   sm: {
 32 |     min: 768,
 33 |     max: 991
 34 |   },
 35 |   md: {
 36 |     min: 992,
 37 |     max: 1199
 38 |   },
 39 |   lg: {
 40 |     min: 1200,
 41 |     max: Infinity
 42 |   }
 43 | }
 44 | 
 45 | const self = {
 46 |   idIncrement: 1,
 47 |   resizeListeners: null,
 48 |   init: false,
 49 |   _rPermissions: {
 50 |     bs4: bootstrap4Breakpoints,
 51 |     bs3: bootstrap3Breakpoints
 52 |   },
 53 |   allProperties: {} // id: {lastBp:'', pointsName: '', dataset: {}}
 54 | }
 55 | 
 56 | var vueResponsive = {
 57 |   bind: function (el, binding, vnode) {
 58 |     // Bootstrap 4 Repsonsive Utils default
 59 |     var componentHasDefault = !!self._rPermissions.default
 60 |     let useClass = !!binding.modifiers.class
 61 |     if (!self.init) {
 62 |       for (let i in vnode.context.$data) {
 63 |         if (i.indexOf('responsiveMarks$$') === 0) {
 64 |           var name = String(i).replace('responsiveMarks$$', '').toLowerCase()
 65 |           self._rPermissions[name] = {}
 66 | 
 67 |           for (let ii in vnode.context.$data[i]) self._rPermissions[name][ii] = vnode.context.$data[i][ii]
 68 |         }
 69 |         if (i === 'responsiveDefault$$') componentHasDefault = vnode.context.$data[i]
 70 |       }
 71 |       // Set bs4 as default if not default is explicitly set
 72 |       self._rPermissions.undefined = componentHasDefault ? self._rPermissions[componentHasDefault] : self._rPermissions.bs4
 73 |       self.init++
 74 |     }
 75 |     var validInputs = ['hidden-all']
 76 |     let validPositiv = []
 77 |     let choosenBPointsName = componentHasDefault ? self._rPermissions.defaultName : (binding.arg || 'bs4')
 78 |     for (let key in self._rPermissions[binding.arg]) {
 79 |       validInputs.push(key)
 80 |       validPositiv.push(key)
 81 |       validInputs.push('hidden-' + key)
 82 |     }
 83 | 
 84 |     // if this is the first element with this directive that gets bound add the resize listener
 85 |     if (!self.resizeListeners) {
 86 |       self.resizeListeners = {}
 87 | 
 88 |       // adds a single resize listener for all elements
 89 |       window.addEventListener('resize', function () {
 90 |         // calls the checkDisplay function for all elements that are active in the DOM and use this directive
 91 |         for (let i in self.resizeListeners) if (!isNaN(i)) self.resizeListeners[i]()
 92 |       })
 93 |     }
 94 | 
 95 |     // if the element has a user defined css-value, save it!
 96 |     if (el.style.display) el.dataset.initialDisplay = el.style.display ? el.style.display : getComputedStyle(el, null).display
 97 | 
 98 |     let preParams = []
 99 | 
100 |     // need a case for the short syntax
101 |     // are the modifiers decisive?
102 |     let modifiers = window.Object.keys(binding.modifiers)
103 |     if (useClass);
104 |     else if (modifiers.some(k => ~validPositiv.indexOf(k.replace(/\+|-/g, '')))) {
105 |       modifiers.forEach(m => {
106 |         // if (/^(\+|-)|(\+|-)$/g.test(modifiers))
107 |       })
108 |       preParams.push(...modifiers)
109 |       preParams.push('hidden-all')
110 |       preParams.sort()
111 |     } else if (Array.isArray(binding.value) || (typeof binding.expression === 'string' && binding.expression.match(/[*]/))) {
112 |       if (Array.isArray(binding.value)) {
113 |         preParams = binding.value
114 |       } else {
115 |         var stringArray = binding.expression.replace(/'/g, '"')
116 |         preParams = JSON.parse(stringArray)
117 |       }
118 |       preParams.sort()
119 |     } else if (binding.value instanceof Object) {
120 |       for (let i in binding.value) {
121 |         if (binding.value[i]) preParams.push(i)
122 |       }
123 |     } else if (typeof binding.value === 'string' || typeof binding.expression === 'string') { // a single parameter
124 |       var val = binding.value || binding.expression.replace(/'"/g, '')
125 |       preParams = new Array(val)
126 |       preParams.sort()
127 |     } else {
128 |       return // no parameter given, no work :/
129 |     }
130 |     // init the permission object with an id
131 |     let rId = String(self.idIncrement++)
132 | 
133 |     // save the settings for this element in it's dataset
134 |     el.dataset.responsives = rId
135 |     var rPermissions = { lastBp: '', bpSet: choosenBPointsName, useClass }
136 | 
137 |     let hiddenAllIndex = preParams.indexOf('hidden-all')
138 |     if (~hiddenAllIndex) {
139 |       preParams.splice(hiddenAllIndex, 1)
140 |       // disallow all breakpoints as initial value
141 |       for (let i in self._rPermissions[binding.arg]) rPermissions[i] = 0
142 |     } else {
143 |       // allow all breakpoints as initial value
144 |       for (let k in self._rPermissions[binding.arg]) rPermissions[k] = 1
145 |     }
146 | 
147 |     for (let i = 0; i < preParams.length; i++) {
148 |       let item = preParams[i]
149 |       if (!~validInputs.indexOf(item)) continue
150 |       if (item.indexOf('hidden') === 0) { // hidden-..
151 |         var key = item.split('-')[1]
152 |         rPermissions[key] = 0 // show = false
153 |       } else {
154 |         rPermissions[item] = 1 // show = true
155 |       }
156 |     }
157 | 
158 |     self.allProperties[rId] = rPermissions
159 |   },
160 | 
161 |   /**
162 |    * Is callend when the element is inserted into the DOM
163 |    *
164 |    * @param  {object} el      html element
165 |    * @param  {object} binding the parameters of the mixin
166 |    * @param  {object} vnode   the virtual html elment
167 |    */
168 |   inserted: function (el, binding, vnode) {
169 |     if (el.dataset.responsives == null) return
170 |     // todo: throw error if isNaN
171 |     let resizeListenerId = el.dataset.responsives
172 | 
173 |     /**
174 |      * This function checks the current breakpoint constraints for this element
175 |      */
176 |     function checkDisplay () {
177 |       var myPermissions = self.allProperties[resizeListenerId] // JSON.parse(el.dataset.responsives)
178 |       var curWidth = window.innerWidth
179 |       var initial = el.dataset.initialDisplay ? el.dataset.initialDisplay : ''
180 |       var parameters = self._rPermissions[binding.arg]
181 |       for (let i in parameters) {
182 |         if (curWidth >= parameters[i].min && curWidth <= parameters[i].max) {
183 |           if (myPermissions.lastBp !== i) {
184 |             if (self.allProperties[resizeListenerId].useClass) {
185 |               el.classList.add(myPermissions.bpSet + '-' + i)
186 |               el.classList.remove(myPermissions.bpSet + '-' + myPermissions.lastBp)
187 |             } else {
188 |               if (myPermissions[i]) el.style.display =  initial
189 |               else el.style.setProperty('display', 'none', 'important');
190 |             }
191 | 
192 |             self.allProperties[resizeListenerId].lastBp = i
193 |           }
194 |           break
195 |         }
196 |       }
197 |     }
198 |     checkDisplay()
199 |     self.resizeListeners[resizeListenerId] = checkDisplay
200 |   },
201 | 
202 |   /**
203 |    * Is called when the html element is removed from DOM
204 |    *
205 |    * @param  {object} el      html element
206 |    * @param  {object} binding the parameters of the mixin
207 |    * @param  {object} vnode   the virtual html elment
208 |    */
209 |   unbind: function (el, binding, vnode) {
210 |     let resizeListenerId = el.dataset.responsives
211 |     delete self.resizeListeners[resizeListenerId]
212 |   }
213 | }
214 | 
215 | /**
216 |  * Install vue-responsive globally to Vue.js
217 |  *
218 |  * @param  {object} Vue     the constructor of the framework
219 |  * @param  {object} options parameter to modify the behavior of the plugin
220 |  * @return {void}         returns nothing
221 |  */
222 | vueResponsive.install = function (Vue, options) {
223 |   if (typeof (options) === 'object' && options.breakpoints) {
224 |     self._rPermissions.default = options.breakpoints
225 |   }
226 |   Vue.directive('responsive', vueResponsive)
227 | }
228 | 
229 | // https://babeljs.io/docs/plugins/transform-es2015-modules-umd/
230 | export {vueResponsive}
231 | export default vueResponsive
232 | 
233 | // Check if the directive should be used globally
234 | try {
235 |   var notGlobal = false
236 |   var currScriptFn = document.currentScript
237 |   currScriptFn = currScriptFn || (function () {
238 |     var scripts = document.getElementsByTagName('script')
239 |     return scripts[scripts.length - 1]
240 |   })()
241 |   notGlobal = Boolean(currScriptFn.getAttribute('notGlobal'))
242 |   if (!notGlobal && typeof window !== 'undefined' && typeof window.Vue === 'function') window.Vue.use(vueResponsive)
243 | } catch (idk) { console.error(idk) }
244 | 


--------------------------------------------------------------------------------
/dist/Vue-Responsive.js:
--------------------------------------------------------------------------------
  1 | /*! Vue-Responsive v1.3.1
  2 | * @Url: https://github.com/reinerBa/Vue-Responsive
  3 | * @License: MIT, Reiner Bamberger
  4 | */
  5 | (function (global, factory) {
  6 |   if (typeof define === "function" && define.amd) {
  7 |     define(['exports', 'babel-runtime/helpers/typeof', 'babel-runtime/helpers/toConsumableArray'], factory);
  8 |   } else if (typeof exports !== "undefined") {
  9 |     factory(exports, require('babel-runtime/helpers/typeof'), require('babel-runtime/helpers/toConsumableArray'));
 10 |   } else {
 11 |     var mod = {
 12 |       exports: {}
 13 |     };
 14 |     factory(mod.exports, global._typeof, global.toConsumableArray);
 15 |     global.index = mod.exports;
 16 |   }
 17 | })(this, function (exports, _typeof2, _toConsumableArray2) {
 18 |   'use strict';
 19 | 
 20 |   Object.defineProperty(exports, "__esModule", {
 21 |     value: true
 22 |   });
 23 |   exports.vueResponsive = undefined;
 24 | 
 25 |   var _typeof3 = _interopRequireDefault(_typeof2);
 26 | 
 27 |   var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
 28 | 
 29 |   function _interopRequireDefault(obj) {
 30 |     return obj && obj.__esModule ? obj : {
 31 |       default: obj
 32 |     };
 33 |   }
 34 | 
 35 |   // For Bootstrap 4
 36 |   var bootstrap4Breakpoints = {
 37 |     xs: {
 38 |       min: -1,
 39 |       max: 543
 40 |     },
 41 |     sm: {
 42 |       min: 544,
 43 |       max: 767
 44 |     },
 45 |     md: {
 46 |       min: 768,
 47 |       max: 991
 48 |     },
 49 |     lg: {
 50 |       min: 992,
 51 |       max: 1199
 52 |     },
 53 |     xl: {
 54 |       min: 1200,
 55 |       max: Infinity
 56 |     }
 57 | 
 58 |     // For Bootstrap 3
 59 |   };var bootstrap3Breakpoints = {
 60 |     xs: {
 61 |       min: -1,
 62 |       max: 767
 63 |     },
 64 |     sm: {
 65 |       min: 768,
 66 |       max: 991
 67 |     },
 68 |     md: {
 69 |       min: 992,
 70 |       max: 1199
 71 |     },
 72 |     lg: {
 73 |       min: 1200,
 74 |       max: Infinity
 75 |     }
 76 |   };
 77 | 
 78 |   var self = {
 79 |     idIncrement: 1,
 80 |     resizeListeners: null,
 81 |     init: false,
 82 |     _rPermissions: {
 83 |       bs4: bootstrap4Breakpoints,
 84 |       bs3: bootstrap3Breakpoints
 85 |     },
 86 |     allProperties: {} // id: {lastBp:'', pointsName: '', dataset: {}}
 87 |   };
 88 | 
 89 |   var vueResponsive = {
 90 |     bind: function bind(el, binding, vnode) {
 91 |       // Bootstrap 4 Repsonsive Utils default
 92 |       var componentHasDefault = !!self._rPermissions.default;
 93 |       var useClass = !!binding.modifiers.class;
 94 |       if (!self.init) {
 95 |         for (var i in vnode.context.$data) {
 96 |           if (i.indexOf('responsiveMarks$$') === 0) {
 97 |             var name = String(i).replace('responsiveMarks$$', '').toLowerCase();
 98 |             self._rPermissions[name] = {};
 99 | 
100 |             for (var ii in vnode.context.$data[i]) {
101 |               self._rPermissions[name][ii] = vnode.context.$data[i][ii];
102 |             }
103 |           }
104 |           if (i === 'responsiveDefault$$') componentHasDefault = vnode.context.$data[i];
105 |         }
106 |         // Set bs4 as default if not default is explicitly set
107 |         self._rPermissions.undefined = componentHasDefault ? self._rPermissions[componentHasDefault] : self._rPermissions.bs4;
108 |         self.init++;
109 |       }
110 |       var validInputs = ['hidden-all'];
111 |       var validPositiv = [];
112 |       var choosenBPointsName = componentHasDefault ? self._rPermissions.defaultName : binding.arg || 'bs4';
113 |       for (var _key in self._rPermissions[binding.arg]) {
114 |         validInputs.push(_key);
115 |         validPositiv.push(_key);
116 |         validInputs.push('hidden-' + _key);
117 |       }
118 | 
119 |       // if this is the first element with this directive that gets bound add the resize listener
120 |       if (!self.resizeListeners) {
121 |         self.resizeListeners = {};
122 | 
123 |         // adds a single resize listener for all elements
124 |         window.addEventListener('resize', function () {
125 |           // calls the checkDisplay function for all elements that are active in the DOM and use this directive
126 |           for (var _i in self.resizeListeners) {
127 |             if (!isNaN(_i)) self.resizeListeners[_i]();
128 |           }
129 |         });
130 |       }
131 | 
132 |       // if the element has a user defined css-value, save it!
133 |       if (el.style.display) el.dataset.initialDisplay = el.style.display ? el.style.display : getComputedStyle(el, null).display;
134 | 
135 |       var preParams = [];
136 | 
137 |       // need a case for the short syntax
138 |       // are the modifiers decisive?
139 |       var modifiers = window.Object.keys(binding.modifiers);
140 |       if (useClass) ;else if (modifiers.some(function (k) {
141 |         return ~validPositiv.indexOf(k.replace(/\+|-/g, ''));
142 |       })) {
143 |         var _preParams;
144 | 
145 |         modifiers.forEach(function (m) {
146 |           // if (/^(\+|-)|(\+|-)$/g.test(modifiers))
147 |         });
148 |         (_preParams = preParams).push.apply(_preParams, (0, _toConsumableArray3.default)(modifiers));
149 |         preParams.push('hidden-all');
150 |         preParams.sort();
151 |       } else if (Array.isArray(binding.value) || typeof binding.expression === 'string' && binding.expression.match(/[*]/)) {
152 |         if (Array.isArray(binding.value)) {
153 |           preParams = binding.value;
154 |         } else {
155 |           var stringArray = binding.expression.replace(/'/g, '"');
156 |           preParams = JSON.parse(stringArray);
157 |         }
158 |         preParams.sort();
159 |       } else if (binding.value instanceof Object) {
160 |         for (var _i2 in binding.value) {
161 |           if (binding.value[_i2]) preParams.push(_i2);
162 |         }
163 |       } else if (typeof binding.value === 'string' || typeof binding.expression === 'string') {
164 |         // a single parameter
165 |         var val = binding.value || binding.expression.replace(/'"/g, '');
166 |         preParams = new Array(val);
167 |         preParams.sort();
168 |       } else {
169 |         return; // no parameter given, no work :/
170 |       }
171 |       // init the permission object with an id
172 |       var rId = String(self.idIncrement++);
173 | 
174 |       // save the settings for this element in it's dataset
175 |       el.dataset.responsives = rId;
176 |       var rPermissions = { lastBp: '', bpSet: choosenBPointsName, useClass: useClass };
177 | 
178 |       var hiddenAllIndex = preParams.indexOf('hidden-all');
179 |       if (~hiddenAllIndex) {
180 |         preParams.splice(hiddenAllIndex, 1);
181 |         // disallow all breakpoints as initial value
182 |         for (var _i3 in self._rPermissions[binding.arg]) {
183 |           rPermissions[_i3] = 0;
184 |         }
185 |       } else {
186 |         // allow all breakpoints as initial value
187 |         for (var k in self._rPermissions[binding.arg]) {
188 |           rPermissions[k] = 1;
189 |         }
190 |       }
191 | 
192 |       for (var _i4 = 0; _i4 < preParams.length; _i4++) {
193 |         var item = preParams[_i4];
194 |         if (!~validInputs.indexOf(item)) continue;
195 |         if (item.indexOf('hidden') === 0) {
196 |           // hidden-..
197 |           var key = item.split('-')[1];
198 |           rPermissions[key] = 0; // show = false
199 |         } else {
200 |           rPermissions[item] = 1; // show = true
201 |         }
202 |       }
203 | 
204 |       self.allProperties[rId] = rPermissions;
205 |     },
206 | 
207 |     /**
208 |      * Is callend when the element is inserted into the DOM
209 |      *
210 |      * @param  {object} el      html element
211 |      * @param  {object} binding the parameters of the mixin
212 |      * @param  {object} vnode   the virtual html elment
213 |      */
214 |     inserted: function inserted(el, binding, vnode) {
215 |       if (el.dataset.responsives == null) return;
216 |       // todo: throw error if isNaN
217 |       var resizeListenerId = el.dataset.responsives;
218 | 
219 |       /**
220 |        * This function checks the current breakpoint constraints for this element
221 |        */
222 |       function checkDisplay() {
223 |         var myPermissions = self.allProperties[resizeListenerId]; // JSON.parse(el.dataset.responsives)
224 |         var curWidth = window.innerWidth;
225 |         var initial = el.dataset.initialDisplay ? el.dataset.initialDisplay : '';
226 |         var parameters = self._rPermissions[binding.arg];
227 |         for (var i in parameters) {
228 |           if (curWidth >= parameters[i].min && curWidth <= parameters[i].max) {
229 |             if (myPermissions.lastBp !== i) {
230 |               if (self.allProperties[resizeListenerId].useClass) {
231 |                 el.classList.add(myPermissions.bpSet + '-' + i);
232 |                 el.classList.remove(myPermissions.bpSet + '-' + myPermissions.lastBp);
233 |               } else {
234 |                 if (myPermissions[i]) el.style.display = initial;else el.style.setProperty('display', 'none', 'important');
235 |               }
236 | 
237 |               self.allProperties[resizeListenerId].lastBp = i;
238 |             }
239 |             break;
240 |           }
241 |         }
242 |       }
243 |       checkDisplay();
244 |       self.resizeListeners[resizeListenerId] = checkDisplay;
245 |     },
246 | 
247 |     /**
248 |      * Is called when the html element is removed from DOM
249 |      *
250 |      * @param  {object} el      html element
251 |      * @param  {object} binding the parameters of the mixin
252 |      * @param  {object} vnode   the virtual html elment
253 |      */
254 |     unbind: function unbind(el, binding, vnode) {
255 |       var resizeListenerId = el.dataset.responsives;
256 |       delete self.resizeListeners[resizeListenerId];
257 |     }
258 | 
259 |     /**
260 |      * Install vue-responsive globally to Vue.js
261 |      *
262 |      * @param  {object} Vue     the constructor of the framework
263 |      * @param  {object} options parameter to modify the behavior of the plugin
264 |      * @return {void}         returns nothing
265 |      */
266 |   };vueResponsive.install = function (Vue, options) {
267 |     if ((typeof options === 'undefined' ? 'undefined' : (0, _typeof3.default)(options)) === 'object' && options.breakpoints) {
268 |       self._rPermissions.default = options.breakpoints;
269 |     }
270 |     Vue.directive('responsive', vueResponsive);
271 |   };
272 | 
273 |   // https://babeljs.io/docs/plugins/transform-es2015-modules-umd/
274 |   exports.vueResponsive = vueResponsive;
275 |   exports.default = vueResponsive;
276 | 
277 | 
278 |   // Check if the directive should be used globally
279 |   try {
280 |     var notGlobal = false;
281 |     var currScriptFn = document.currentScript;
282 |     currScriptFn = currScriptFn || function () {
283 |       var scripts = document.getElementsByTagName('script');
284 |       return scripts[scripts.length - 1];
285 |     }();
286 |     notGlobal = Boolean(currScriptFn.getAttribute('notGlobal'));
287 |     if (!notGlobal && typeof window !== 'undefined' && typeof window.Vue === 'function') window.Vue.use(vueResponsive);
288 |   } catch (idk) {
289 |     console.error(idk);
290 |   }
291 | });


--------------------------------------------------------------------------------
/dist/assets/main.793bb65e.js:
--------------------------------------------------------------------------------
  1 | import { V as VuePrism } from "./vendor.5582453e.js";
  2 | const p = function polyfill() {
  3 |   const relList = document.createElement("link").relList;
  4 |   if (relList && relList.supports && relList.supports("modulepreload")) {
  5 |     return;
  6 |   }
  7 |   for (const link of document.querySelectorAll('link[rel="modulepreload"]')) {
  8 |     processPreload(link);
  9 |   }
 10 |   new MutationObserver((mutations) => {
 11 |     for (const mutation of mutations) {
 12 |       if (mutation.type !== "childList") {
 13 |         continue;
 14 |       }
 15 |       for (const node of mutation.addedNodes) {
 16 |         if (node.tagName === "LINK" && node.rel === "modulepreload")
 17 |           processPreload(node);
 18 |       }
 19 |     }
 20 |   }).observe(document, { childList: true, subtree: true });
 21 |   function getFetchOpts(script) {
 22 |     const fetchOpts = {};
 23 |     if (script.integrity)
 24 |       fetchOpts.integrity = script.integrity;
 25 |     if (script.referrerpolicy)
 26 |       fetchOpts.referrerPolicy = script.referrerpolicy;
 27 |     if (script.crossorigin === "use-credentials")
 28 |       fetchOpts.credentials = "include";
 29 |     else if (script.crossorigin === "anonymous")
 30 |       fetchOpts.credentials = "omit";
 31 |     else
 32 |       fetchOpts.credentials = "same-origin";
 33 |     return fetchOpts;
 34 |   }
 35 |   function processPreload(link) {
 36 |     if (link.ep)
 37 |       return;
 38 |     link.ep = true;
 39 |     const fetchOpts = getFetchOpts(link);
 40 |     fetch(link.href, fetchOpts);
 41 |   }
 42 | };
 43 | p();
 44 | var render$8 = function() {
 45 |   var _vm = this;
 46 |   var _h = _vm.$createElement;
 47 |   var _c = _vm._self._c || _h;
 48 |   return _c("div", { staticClass: "demoOne" }, [_c("h1", { directives: [{ name: "responsive", rawName: "v-responsive", value: ["hidden-all", "xl"], expression: "['hidden-all','xl']" }] }, [_vm._v("A Vue.js responsivity plugin")]), _c("h2", { directives: [{ name: "responsive", rawName: "v-responsive", value: ["hidden-all", "lg"], expression: "['hidden-all','lg']" }] }, [_vm._v("A Vue.js responsivity plugin")]), _c("h3", { directives: [{ name: "responsive", rawName: "v-responsive", value: ["hidden-all", "md"], expression: "['hidden-all','md']" }] }, [_vm._v("A Vue.js responsivity plugin")]), _c("h4", { directives: [{ name: "responsive", rawName: "v-responsive", value: ["hidden-all", "sm"], expression: "['hidden-all','sm']" }] }, [_vm._v("A Vue.js responsivity plugin")]), _c("h5", { directives: [{ name: "responsive", rawName: "v-responsive", value: ["hidden-all", "xs"], expression: "['hidden-all','xs']" }] }, [_vm._v("A Vue.js responsivity plugin")]), _c("h1", { directives: [{ name: "responsive", rawName: "v-responsive", value: ["hidden-all", "xl"], expression: "['hidden-all','xl']" }] }, [_vm._v("extra large")]), _c("h2", { directives: [{ name: "responsive", rawName: "v-responsive", value: ["hidden-all", "lg"], expression: "['hidden-all','lg']" }] }, [_vm._v("large")]), _c("h3", { directives: [{ name: "responsive", rawName: "v-responsive", value: ["hidden-all", "md"], expression: "['hidden-all','md']" }] }, [_vm._v("medium")]), _c("h4", { directives: [{ name: "responsive", rawName: "v-responsive", value: ["hidden-all", "sm"], expression: "['hidden-all','sm']" }] }, [_vm._v("small")]), _c("h5", { directives: [{ name: "responsive", rawName: "v-responsive", value: ["hidden-all", "xs"], expression: "['hidden-all','xs']" }] }, [_vm._v("extra small")]), _vm._m(0), _c("h4", [_vm._v(" The sourcecode of the two lines above: ")]), _c("pre", { staticClass: "language-html" }, [_c("code", { domProps: { "textContent": _vm._s(_vm.code) } })])]);
 49 | };
 50 | var staticRenderFns$8 = [function() {
 51 |   var _vm = this;
 52 |   var _h = _vm.$createElement;
 53 |   var _c = _vm._self._c || _h;
 54 |   return _c("table", { staticStyle: { "margin": "15px auto", "border-spacing": "0" } }, [_c("tr", [_c("th", [_vm._v("v-responsive=")]), _c("th", [_vm._v("XS")]), _c("th", [_vm._v("SM")]), _c("th", [_vm._v("MD")]), _c("th", [_vm._v("LG")]), _c("th", [_vm._v("XL")])]), _c("tr", [_c("td", [_vm._v("['hidden-all', 'xs', 'xl']")]), _c("td", [_vm._v(".")]), _c("td"), _c("td"), _c("td"), _c("td", [_vm._v(".")])]), _c("tr", [_c("td", [_vm._v("['hidden-xs']")]), _c("td"), _c("td", [_vm._v(".")]), _c("td", [_vm._v(".")]), _c("td", [_vm._v(".")]), _c("td", [_vm._v(".")])]), _c("tr", [_c("td", [_vm._v("['hidden-xs', 'hidden-sm']")]), _c("td"), _c("td"), _c("td", [_vm._v(".")]), _c("td", [_vm._v(".")]), _c("td", [_vm._v(".")])]), _c("tr", [_c("td", [_vm._v("['hidden-all', 'lg', 'xl']")]), _c("td"), _c("td"), _c("td"), _c("td", [_vm._v(".")]), _c("td", [_vm._v(".")])]), _c("tr", [_c("td", [_vm._v("['hidden-all', 'xl']")]), _c("td"), _c("td"), _c("td"), _c("td"), _c("td", [_vm._v(".")])]), _c("tr", [_c("td", [_vm._v("['hidden-all', 'xs', 'md', 'xl']")]), _c("td", [_vm._v(".")]), _c("td"), _c("td", [_vm._v(".")]), _c("td"), _c("td", [_vm._v(".")])])]);
 55 | }];
 56 | var DemoOne_vue_vue_type_style_index_0_scoped_true_lang = "";
 57 | function normalizeComponent(scriptExports, render2, staticRenderFns2, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
 58 |   var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
 59 |   if (render2) {
 60 |     options.render = render2;
 61 |     options.staticRenderFns = staticRenderFns2;
 62 |     options._compiled = true;
 63 |   }
 64 |   if (functionalTemplate) {
 65 |     options.functional = true;
 66 |   }
 67 |   if (scopeId) {
 68 |     options._scopeId = "data-v-" + scopeId;
 69 |   }
 70 |   var hook;
 71 |   if (moduleIdentifier) {
 72 |     hook = function(context) {
 73 |       context = context || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
 74 |       if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") {
 75 |         context = __VUE_SSR_CONTEXT__;
 76 |       }
 77 |       if (injectStyles) {
 78 |         injectStyles.call(this, context);
 79 |       }
 80 |       if (context && context._registeredComponents) {
 81 |         context._registeredComponents.add(moduleIdentifier);
 82 |       }
 83 |     };
 84 |     options._ssrRegister = hook;
 85 |   } else if (injectStyles) {
 86 |     hook = shadowMode ? function() {
 87 |       injectStyles.call(this, (options.functional ? this.parent : this).$root.$options.shadowRoot);
 88 |     } : injectStyles;
 89 |   }
 90 |   if (hook) {
 91 |     if (options.functional) {
 92 |       options._injectStyles = hook;
 93 |       var originalRender = options.render;
 94 |       options.render = function renderWithStyleInjection(h, context) {
 95 |         hook.call(context);
 96 |         return originalRender(h, context);
 97 |       };
 98 |     } else {
 99 |       var existing = options.beforeCreate;
100 |       options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
101 |     }
102 |   }
103 |   return {
104 |     exports: scriptExports,
105 |     options
106 |   };
107 | }
108 | const __vue2_script$8 = {
109 |   name: "DemoOne",
110 |   data() {
111 |     return {
112 |       code: `<h1 v-responsive="['hidden-all','xl']">A Vue.js responsivity plugin</h1>
113 | <h2 v-responsive="['hidden-all','lg']">A Vue.js responsivity plugin</h2>
114 | <h3 v-responsive="['hidden-all','md']">A Vue.js responsivity plugin</h3>
115 | <h4 v-responsive="['hidden-all','sm']">A Vue.js responsivity plugin</h4>
116 | <h5 v-responsive="['hidden-all','xs']">A Vue.js responsivity plugin</h5>
117 | 
118 | <h1 v-responsive="['hidden-all','xl']">extra large</h1>
119 | <h2 v-responsive="['hidden-all','lg']">large</h2>
120 | <h3 v-responsive="['hidden-all','md']">medium</h3>
121 | <h4 v-responsive="['hidden-all','sm']">small</h4>
122 | <h5 v-responsive="['hidden-all','xs']">extra small</h5>`
123 |     };
124 |   }
125 | };
126 | const __cssModules$8 = {};
127 | var __component__$8 = /* @__PURE__ */ normalizeComponent(__vue2_script$8, render$8, staticRenderFns$8, false, __vue2_injectStyles$8, "46488d3e", null, null);
128 | function __vue2_injectStyles$8(context) {
129 |   for (let o in __cssModules$8) {
130 |     this[o] = __cssModules$8[o];
131 |   }
132 | }
133 | var DemoOne = /* @__PURE__ */ function() {
134 |   return __component__$8.exports;
135 | }();
136 | var render$7 = function() {
137 |   var _vm = this;
138 |   var _h = _vm.$createElement;
139 |   var _c = _vm._self._c || _h;
140 |   return _c("div", { staticClass: "demoTwo" }, [_c("div", [_c("p", { directives: [{ name: "responsive", rawName: "v-responsive", value: "hidden-xs", expression: "'hidden-xs'" }] }, [_vm._v("I am hidden on extra small device screens")]), _c("p", { directives: [{ name: "responsive", rawName: "v-responsive", value: ["hidden-sm", "hidden-xs"], expression: "['hidden-sm', 'hidden-xs']" }] }, [_vm._v("I am hidden on small device screens")]), _c("p", { directives: [{ name: "responsive", rawName: "v-responsive", value: _vm.respObj, expression: "respObj" }] }, [_vm._v("This elements visibility is controlled by an object")])]), _c("pre", { staticClass: "language-html" }, [_c("code", { domProps: { "textContent": _vm._s(_vm.codeHtml) } })]), _c("pre", { staticClass: "language-js" }, [_c("code", { domProps: { "textContent": _vm._s(_vm.codeJs) } })])]);
141 | };
142 | var staticRenderFns$7 = [];
143 | var DemoTwo_vue_vue_type_style_index_0_scoped_true_lang = "";
144 | const __vue2_script$7 = {
145 |   name: "DemoTwo",
146 |   data() {
147 |     return {
148 |       respObj: { "hidden-md": true, "hidden-lg": true, "hidden-xl": true },
149 |       codeHtml: `<p v-responsive="'hidden-xs'">I am hidden on extra small device screens</p>
150 | <p v-responsive="['hidden-sm', 'hidden-xs']">I am hidden on small device screens</p>
151 | <span v-responsive="respObj">This elements visibility is controlled by an object</span>`,
152 |       codeJs: `data () { return {
153 |   respObj: { "hidden-md": true, "hidden-lg": true, "hidden-xl": true },
154 | `
155 |     };
156 |   }
157 | };
158 | const __cssModules$7 = {};
159 | var __component__$7 = /* @__PURE__ */ normalizeComponent(__vue2_script$7, render$7, staticRenderFns$7, false, __vue2_injectStyles$7, "5c23a6f4", null, null);
160 | function __vue2_injectStyles$7(context) {
161 |   for (let o in __cssModules$7) {
162 |     this[o] = __cssModules$7[o];
163 |   }
164 | }
165 | var DemoTwo = /* @__PURE__ */ function() {
166 |   return __component__$7.exports;
167 | }();
168 | var render$6 = function() {
169 |   var _vm = this;
170 |   var _h = _vm.$createElement;
171 |   var _c = _vm._self._c || _h;
172 |   return _c("div", { staticClass: "demoThree" }, [_c("h4", { staticClass: "title" }, [_vm._v("This example shows how easy you can use the Breakpoints of Bootstrap 3, which are different of the default Bootstrap 4 breakpoints")]), _c("p", { directives: [{ name: "responsive", rawName: "v-responsive:bs3", value: ["hidden-all", "xs"], expression: "['hidden-all','xs']", arg: "bs3" }] }, [_vm._v("Extra small"), _c("br"), _c("img", { attrs: { "src": "http://lorempixel.com/360/240/animals" } })]), _c("p", { directives: [{ name: "responsive", rawName: "v-responsive:bs3", value: ["hidden-all", "sm"], expression: "['hidden-all','sm']", arg: "bs3" }] }, [_vm._v("Small "), _c("br"), _c("img", { attrs: { "src": "http://lorempixel.com/540/360/animals" } })]), _c("p", { directives: [{ name: "responsive", rawName: "v-responsive:bs3", value: ["hidden-all", "md"], expression: "['hidden-all','md']", arg: "bs3" }] }, [_vm._v("Middle"), _c("br"), _c("img", { attrs: { "src": "http://lorempixel.com/720/360/animals" } })]), _c("p", { directives: [{ name: "responsive", rawName: "v-responsive:bs3", value: ["hidden-all", "lg"], expression: "['hidden-all','lg']", arg: "bs3" }] }, [_vm._v("Large "), _c("br"), _c("img", { attrs: { "src": "http://lorempixel.com/780/360/animals" } })]), _c("h4", [_vm._v(" The sourcecode of the lines above: ")]), _c("pre", { staticClass: "language-html" }, [_c("code", { domProps: { "textContent": _vm._s(_vm.code) } })])]);
173 | };
174 | var staticRenderFns$6 = [];
175 | var DemoThree_vue_vue_type_style_index_0_scoped_true_lang = "";
176 | const __vue2_script$6 = {
177 |   name: "DemoThree",
178 |   data() {
179 |     return {
180 |       code: `<p v-responsive:bs3="['hidden-all','xs']"> Extra small <img src=".../360/240/animals" /></p>
181 | <p v-responsive:bs3="['hidden-all','sm']"> Small <img src=".../540/360/animals" /></p>
182 | <p v-responsive:bs3="['hidden-all','md']"> Middle <img src=".../720/360/animals" /></p>
183 | <p v-responsive:bs3="['hidden-all','lg']"> Large <img src=".../780/360/animals" /></p>
184 | `
185 |     };
186 |   }
187 | };
188 | const __cssModules$6 = {};
189 | var __component__$6 = /* @__PURE__ */ normalizeComponent(__vue2_script$6, render$6, staticRenderFns$6, false, __vue2_injectStyles$6, "7313f052", null, null);
190 | function __vue2_injectStyles$6(context) {
191 |   for (let o in __cssModules$6) {
192 |     this[o] = __cssModules$6[o];
193 |   }
194 | }
195 | var DemoThree = /* @__PURE__ */ function() {
196 |   return __component__$6.exports;
197 | }();
198 | var render$5 = function() {
199 |   var _vm = this;
200 |   var _h = _vm.$createElement;
201 |   var _c = _vm._self._c || _h;
202 |   return _c("div", { staticClass: "demoFour" }, [_vm._m(0), _c("pre", { directives: [{ name: "responsive", rawName: "v-responsive.lg.xl", modifiers: { "lg": true, "xl": true } }], staticClass: "language-html" }, [_c("code", { domProps: { "textContent": _vm._s(_vm.panels[0]) } })]), _c("pre", { directives: [{ name: "responsive", rawName: "v-responsive.md", modifiers: { "md": true } }], staticClass: "language-html" }, [_c("code", { domProps: { "textContent": _vm._s(_vm.panels[1]) } })]), _c("pre", { directives: [{ name: "responsive", rawName: "v-responsive.sm.xs", modifiers: { "sm": true, "xs": true } }], staticClass: "language-html" }, [_c("code", { domProps: { "textContent": _vm._s(_vm.panels[2]) } })]), _c("pre", { directives: [{ name: "responsive", rawName: "v-responsive.lg.md.sm", modifiers: { "lg": true, "md": true, "sm": true } }], staticClass: "language-html" }, [_c("code", { domProps: { "textContent": _vm._s(_vm.panels[3]) } })])]);
203 | };
204 | var staticRenderFns$5 = [function() {
205 |   var _vm = this;
206 |   var _h = _vm.$createElement;
207 |   var _c = _vm._self._c || _h;
208 |   return _c("p", [_vm._v(" Just use "), _c("strong", [_vm._v("v-responsive")]), _vm._v(" + "), _c("strong", [_vm._v("[xs, sm, md, lg, xl]")]), _vm._v(" to make elements visible on specific breakpoints and hide them on all others. ")]);
209 | }];
210 | var DemoFour_vue_vue_type_style_index_0_scoped_true_lang = "";
211 | const __vue2_script$5 = {
212 |   name: "DemoFour",
213 |   data() {
214 |     return {
215 |       panels: [
216 |         `<span v-responsive.lg.xl>
217 |   1. large and extra-large
218 | </span>`,
219 |         `<span v-responsive.md>
220 |   2. medium
221 | </span>`,
222 |         `<span v-responsive.sm.xs>
223 |   3. small and extra-small
224 | </span>`,
225 |         `<span v-responsive.lg.md.sm>
226 |   4. large + medium + small
227 | </span>`
228 |       ]
229 |     };
230 |   }
231 | };
232 | const __cssModules$5 = {};
233 | var __component__$5 = /* @__PURE__ */ normalizeComponent(__vue2_script$5, render$5, staticRenderFns$5, false, __vue2_injectStyles$5, "f98d1a6c", null, null);
234 | function __vue2_injectStyles$5(context) {
235 |   for (let o in __cssModules$5) {
236 |     this[o] = __cssModules$5[o];
237 |   }
238 | }
239 | var DemoFour = /* @__PURE__ */ function() {
240 |   return __component__$5.exports;
241 | }();
242 | var render$4 = function() {
243 |   var _vm = this;
244 |   var _h = _vm.$createElement;
245 |   var _c = _vm._self._c || _h;
246 |   return _c("div", { staticClass: "demoFive" }, [_c("pre", { directives: [{ name: "responsive", rawName: "v-responsive", value: -543, expression: "-543" }], staticClass: "language-html demo-block" }, [_c("code", { domProps: { "textContent": _vm._s(_vm.text1) } })]), _c("pre", { directives: [{ name: "responsive", rawName: "v-responsive", value: -1024, expression: "-1024" }], staticClass: "language-html demo-block" }, [_c("code", { domProps: { "textContent": _vm._s(_vm.text2) } })]), _c("pre", { directives: [{ name: "responsive", rawName: "v-responsive", value: -1440, expression: "+1024 && -1440" }], staticClass: "language-html demo-block" }, [_c("code", { domProps: { "textContent": _vm._s(_vm.text3) } })]), _c("pre", { directives: [{ name: "responsive", rawName: "v-responsive", value: 1440, expression: "+1440" }], staticClass: "language-html demo-block" }, [_c("code", { domProps: { "textContent": _vm._s(_vm.text4) } })]), _c("pre", { directives: [{ name: "responsive", rawName: "v-responsive", value: 992, expression: "992" }], staticClass: "language-html demo-block" }, [_c("code", { domProps: { "textContent": _vm._s(_vm.text5) } })])]);
247 | };
248 | var staticRenderFns$4 = [];
249 | var DemoFive_vue_vue_type_style_index_0_scoped_true_lang = "";
250 | const __vue2_script$4 = {
251 |   name: "DemoFive",
252 |   data() {
253 |     return {
254 |       text1: `<span v-responsive="-543">
255 |   Visible@ <543px
256 | </span>`,
257 |       text2: `<span v-responsive="-1024">
258 |   Visible@ <1024px
259 | </span>`,
260 |       text3: `<span v-responsive="+1024 && -1440">
261 |   Visible@ >=1024 and <1440px
262 | </span>`,
263 |       text4: `<span v-responsive="+1440">
264 |   Visible@ >=1440px
265 | </span>`,
266 |       text5: `<span v-responsive="992">
267 |   Visible@ >=992px
268 | </span>`
269 |     };
270 |   }
271 | };
272 | const __cssModules$4 = {};
273 | var __component__$4 = /* @__PURE__ */ normalizeComponent(__vue2_script$4, render$4, staticRenderFns$4, false, __vue2_injectStyles$4, "42ef45ee", null, null);
274 | function __vue2_injectStyles$4(context) {
275 |   for (let o in __cssModules$4) {
276 |     this[o] = __cssModules$4[o];
277 |   }
278 | }
279 | var DemoFive = /* @__PURE__ */ function() {
280 |   return __component__$4.exports;
281 | }();
282 | var render$3 = function() {
283 |   var _vm = this;
284 |   var _h = _vm.$createElement;
285 |   var _c = _vm._self._c || _h;
286 |   return _c("div", { staticClass: "demoSix" }, [_c("h4", [_vm._v("This example shows how you can use classes instead of only hide/show elements")]), _c("p", [_vm._v(' Just add "v-responsive.class" into an element and it will always have class on it, consisting of the prefix of the choosen set of breakpoints and the current breakpoint. Bootstrap 4 and a middle size Scren will add the class "bs4-md". ')]), _c("div", { staticClass: "ul" }, _vm._l(_vm.panels, function(p2, idx) {
287 |     return _c("div", { directives: [{ name: "responsive", rawName: "v-responsive.class", modifiers: { "class": true } }], key: idx }, [_c("span", [_vm._v("A responsive panel")])]);
288 |   }), 0), _c("br"), _c("span", [_vm._v("The template code")]), _c("pre", { staticClass: "language-html" }, [_c("code", { domProps: { "textContent": _vm._s(_vm.codeHtml) } })]), _c("span", [_vm._v("The style code")]), _c("pre", { staticClass: "language-css" }, [_c("code", { domProps: { "textContent": _vm._s(_vm.codeStyle) } })])]);
289 | };
290 | var staticRenderFns$3 = [];
291 | var DemoSix_vue_vue_type_style_index_0_scoped_true_lang = "";
292 | const __vue2_script$3 = {
293 |   name: "DemoSix",
294 |   data() {
295 |     return {
296 |       codeHtml: `<div v-for="(p, idx) in panels" v-responsive.class>
297 |   <span>A responsive panel</span>
298 | </div>`,
299 |       codeStyle: `.bs4-lg, .bs4-xl {
300 |   color: darkblue;
301 |   width: 33%;
302 | }
303 | .bs4-xl {
304 |   width: 25%
305 | }
306 | .bs4-md {
307 |   color: green;
308 |   width: 50%;
309 | }
310 | .bs4-sm, .bs4-xs {
311 |   color: red;
312 |   font-weight: bold;
313 |   width: 100%;
314 | }
315 | `,
316 |       panels: "0000000".split("0")
317 |     };
318 |   }
319 | };
320 | const __cssModules$3 = {};
321 | var __component__$3 = /* @__PURE__ */ normalizeComponent(__vue2_script$3, render$3, staticRenderFns$3, false, __vue2_injectStyles$3, "7d57b4ce", null, null);
322 | function __vue2_injectStyles$3(context) {
323 |   for (let o in __cssModules$3) {
324 |     this[o] = __cssModules$3[o];
325 |   }
326 | }
327 | var DemoSix = /* @__PURE__ */ function() {
328 |   return __component__$3.exports;
329 | }();
330 | var render$2 = function() {
331 |   var _vm = this;
332 |   var _h = _vm.$createElement;
333 |   var _c = _vm._self._c || _h;
334 |   return _c("div", { staticClass: "routes" }, [_c("div", { staticClass: "header" }, _vm._l(_vm.routes, function(r, idx) {
335 |     return !r.hide ? _c("span", { key: idx }, [_c("label", { class: { marked: _vm.marked === r.component }, attrs: { "for": "route" + idx } }, [_vm._v(_vm._s(r.title))]), _c("input", { directives: [{ name: "model", rawName: "v-model", value: _vm.marked, expression: "marked" }], attrs: { "id": "route" + idx, "name": "route", "type": "radio" }, domProps: { "value": r.component, "checked": _vm._q(_vm.marked, r.component) }, on: { "change": function($event) {
336 |       _vm.marked = r.component;
337 |     } } })]) : _vm._e();
338 |   }), 0), _c("div", [_c(_vm.marked, { tag: "component" })], 1)]);
339 | };
340 | var staticRenderFns$2 = [];
341 | var Routes_vue_vue_type_style_index_0_scoped_true_lang = "";
342 | const __vue2_script$2 = {
343 |   name: "Routes",
344 |   components: { DemoOne, DemoTwo, DemoThree, DemoFour, DemoFive, DemoSix },
345 |   data() {
346 |     return {
347 |       marked: "demoFour",
348 |       routes: [
349 |         {
350 |           component: "demoOne",
351 |           title: "Overview"
352 |         },
353 |         {
354 |           component: "demoTwo",
355 |           title: "Formats"
356 |         },
357 |         {
358 |           component: "demoThree",
359 |           title: "Bootstrap 3"
360 |         },
361 |         {
362 |           component: "demoFour",
363 |           title: "Tokens"
364 |         },
365 |         {
366 |           component: "demoFive",
367 |           title: "Numbers",
368 |           hide: true
369 |         },
370 |         {
371 |           component: "demoSix",
372 |           title: "Classes",
373 |           hide: 0
374 |         }
375 |       ]
376 |     };
377 |   },
378 |   mounted() {
379 |     let lastVisited = window.location.hash.substr(1);
380 |     if (lastVisited && this.routes.find((e) => e.component === lastVisited))
381 |       this.marked = lastVisited;
382 |     else
383 |       window.location.hash = "#" + this.marked;
384 |   },
385 |   watch: {
386 |     marked(newVal) {
387 |       window.location.hash = "#" + newVal;
388 |     }
389 |   }
390 | };
391 | const __cssModules$2 = {};
392 | var __component__$2 = /* @__PURE__ */ normalizeComponent(__vue2_script$2, render$2, staticRenderFns$2, false, __vue2_injectStyles$2, "308776dc", null, null);
393 | function __vue2_injectStyles$2(context) {
394 |   for (let o in __cssModules$2) {
395 |     this[o] = __cssModules$2[o];
396 |   }
397 | }
398 | var Routes = /* @__PURE__ */ function() {
399 |   return __component__$2.exports;
400 | }();
401 | var render$1 = function() {
402 |   var _vm = this;
403 |   var _h = _vm.$createElement;
404 |   var _c = _vm._self._c || _h;
405 |   return _c("div", { staticClass: "topInfo" }, [_c("div", { attrs: { "id": "topInfo" } }, [_c("i", { directives: [{ name: "responsive", rawName: "v-responsive", value: ["hidden-all", "xs"], expression: "['hidden-all','xs']" }] }, [_vm._v("Extra small")]), _c("i", { directives: [{ name: "responsive", rawName: "v-responsive", value: ["hidden-all", "sm"], expression: "['hidden-all','sm']" }] }, [_vm._v("Small ")]), _c("i", { directives: [{ name: "responsive", rawName: "v-responsive", value: ["hidden-all", "md"], expression: "['hidden-all','md']" }] }, [_vm._v("Middle")]), _c("i", { directives: [{ name: "responsive", rawName: "v-responsive", value: ["hidden-all", "lg"], expression: "['hidden-all','lg']" }] }, [_vm._v("Large ")]), _c("i", { directives: [{ name: "responsive", rawName: "v-responsive", value: ["hidden-all", "xl"], expression: "['hidden-all','xl']" }] }, [_vm._v("Extra large")])]), _c("div", { staticClass: "source-toggle" }, [_c("label", [_c("input", { directives: [{ name: "model", rawName: "v-model", value: _vm.showSource, expression: "showSource" }], attrs: { "type": "checkbox" }, domProps: { "checked": Array.isArray(_vm.showSource) ? _vm._i(_vm.showSource, null) > -1 : _vm.showSource }, on: { "change": function($event) {
406 |     var $$a = _vm.showSource, $$el = $event.target, $$c = $$el.checked ? true : false;
407 |     if (Array.isArray($$a)) {
408 |       var $$v = null, $$i = _vm._i($$a, $$v);
409 |       if ($$el.checked) {
410 |         $$i < 0 && (_vm.showSource = $$a.concat([$$v]));
411 |       } else {
412 |         $$i > -1 && (_vm.showSource = $$a.slice(0, $$i).concat($$a.slice($$i + 1)));
413 |       }
414 |     } else {
415 |       _vm.showSource = $$c;
416 |     }
417 |   } } }), _vm._v("Show Sourcecode")]), _c("pre", { directives: [{ name: "show", rawName: "v-show", value: _vm.showSource, expression: "showSource" }], staticClass: "language-js" }, [_c("code", { domProps: { "textContent": _vm._s(_vm.code) } }), _vm._v("\n")])])]);
418 | };
419 | var staticRenderFns$1 = [];
420 | var TopInfo_vue_vue_type_style_index_0_scoped_true_lang = "";
421 | const __vue2_script$1 = {
422 |   name: "TopInfo",
423 |   data() {
424 |     return {
425 |       showSource: false,
426 |       code: `<i v-responsive="['hidden-all','xs']">Extra small</i>
427 | <i v-responsive="['hidden-all','sm']">Small </i>
428 | <i v-responsive="['hidden-all','md']">Middle</i>
429 | <i v-responsive="['hidden-all','lg']">Large </i>
430 | <i v-responsive="['hidden-all','xl']">Extra large</i>`
431 |     };
432 |   }
433 | };
434 | const __cssModules$1 = {};
435 | var __component__$1 = /* @__PURE__ */ normalizeComponent(__vue2_script$1, render$1, staticRenderFns$1, false, __vue2_injectStyles$1, "4013c930", null, null);
436 | function __vue2_injectStyles$1(context) {
437 |   for (let o in __cssModules$1) {
438 |     this[o] = __cssModules$1[o];
439 |   }
440 | }
441 | var TopInfo = /* @__PURE__ */ function() {
442 |   return __component__$1.exports;
443 | }();
444 | var render = function() {
445 |   var _vm = this;
446 |   var _h = _vm.$createElement;
447 |   var _c = _vm._self._c || _h;
448 |   return _c("div", { attrs: { "id": "app" } }, [_c("routes"), _c("top-info"), _vm._m(0)], 1);
449 | };
450 | var staticRenderFns = [function() {
451 |   var _vm = this;
452 |   var _h = _vm.$createElement;
453 |   var _c = _vm._self._c || _h;
454 |   return _c("footer", [_vm._v(" This is a demonstration site for the Open-Source plugin "), _c("a", { attrs: { "href": "https://github.com/reinerBa/Vue-Responsive" } }, [_vm._v("vue-responsive")]), _vm._v(" hosted at Github.com ")]);
455 | }];
456 | var App_vue_vue_type_style_index_0_lang = "";
457 | const __vue2_script = {
458 |   name: "App",
459 |   components: {
460 |     Routes,
461 |     TopInfo
462 |   }
463 | };
464 | const __cssModules = {};
465 | var __component__ = /* @__PURE__ */ normalizeComponent(__vue2_script, render, staticRenderFns, false, __vue2_injectStyles, null, null, null);
466 | function __vue2_injectStyles(context) {
467 |   for (let o in __cssModules) {
468 |     this[o] = __cssModules[o];
469 |   }
470 | }
471 | var App = /* @__PURE__ */ function() {
472 |   return __component__.exports;
473 | }();
474 | const bootstrap4Breakpoints = {
475 |   xs: {
476 |     min: -1,
477 |     max: 543
478 |   },
479 |   sm: {
480 |     min: 544,
481 |     max: 767
482 |   },
483 |   md: {
484 |     min: 768,
485 |     max: 991
486 |   },
487 |   lg: {
488 |     min: 992,
489 |     max: 1199
490 |   },
491 |   xl: {
492 |     min: 1200,
493 |     max: Infinity
494 |   }
495 | };
496 | const bootstrap3Breakpoints = {
497 |   xs: {
498 |     min: -1,
499 |     max: 767
500 |   },
501 |   sm: {
502 |     min: 768,
503 |     max: 991
504 |   },
505 |   md: {
506 |     min: 992,
507 |     max: 1199
508 |   },
509 |   lg: {
510 |     min: 1200,
511 |     max: Infinity
512 |   }
513 | };
514 | const self = {
515 |   idIncrement: 1,
516 |   resizeListeners: null,
517 |   init: false,
518 |   _rPermissions: {
519 |     bs4: bootstrap4Breakpoints,
520 |     bs3: bootstrap3Breakpoints
521 |   },
522 |   allProperties: {}
523 | };
524 | var vueResponsive = {
525 |   bind: function(el, binding, vnode) {
526 |     var componentHasDefault = !!self._rPermissions.default;
527 |     let useClass = !!binding.modifiers.class;
528 |     if (!self.init) {
529 |       for (let i in vnode.context.$data) {
530 |         if (i.indexOf("responsiveMarks$$") === 0) {
531 |           var name = String(i).replace("responsiveMarks$$", "").toLowerCase();
532 |           self._rPermissions[name] = {};
533 |           for (let ii in vnode.context.$data[i])
534 |             self._rPermissions[name][ii] = vnode.context.$data[i][ii];
535 |         }
536 |         if (i === "responsiveDefault$$")
537 |           componentHasDefault = vnode.context.$data[i];
538 |       }
539 |       self._rPermissions.undefined = componentHasDefault ? self._rPermissions[componentHasDefault] : self._rPermissions.bs4;
540 |       self.init++;
541 |     }
542 |     var validInputs = ["hidden-all"];
543 |     let validPositiv = [];
544 |     let choosenBPointsName = componentHasDefault ? self._rPermissions.defaultName : binding.arg || "bs4";
545 |     for (let key2 in self._rPermissions[binding.arg]) {
546 |       validInputs.push(key2);
547 |       validPositiv.push(key2);
548 |       validInputs.push("hidden-" + key2);
549 |     }
550 |     if (!self.resizeListeners) {
551 |       self.resizeListeners = {};
552 |       window.addEventListener("resize", function() {
553 |         for (let i in self.resizeListeners)
554 |           if (!isNaN(i))
555 |             self.resizeListeners[i]();
556 |       });
557 |     }
558 |     if (el.style.display)
559 |       el.dataset.initialDisplay = el.style.display ? el.style.display : getComputedStyle(el, null).display;
560 |     let preParams = [];
561 |     let modifiers = window.Object.keys(binding.modifiers);
562 |     if (useClass)
563 |       ;
564 |     else if (modifiers.some((k) => ~validPositiv.indexOf(k.replace(/\+|-/g, "")))) {
565 |       modifiers.forEach((m) => {
566 |       });
567 |       preParams.push(...modifiers);
568 |       preParams.push("hidden-all");
569 |       preParams.sort();
570 |     } else if (Array.isArray(binding.value) || typeof binding.expression === "string" && binding.expression.match(/[*]/)) {
571 |       if (Array.isArray(binding.value)) {
572 |         preParams = binding.value;
573 |       } else {
574 |         var stringArray = binding.expression.replace(/'/g, '"');
575 |         preParams = JSON.parse(stringArray);
576 |       }
577 |       preParams.sort();
578 |     } else if (binding.value instanceof Object) {
579 |       for (let i in binding.value) {
580 |         if (binding.value[i])
581 |           preParams.push(i);
582 |       }
583 |     } else if (typeof binding.value === "string" || typeof binding.expression === "string") {
584 |       var val = binding.value || binding.expression.replace(/'"/g, "");
585 |       preParams = new Array(val);
586 |       preParams.sort();
587 |     } else {
588 |       return;
589 |     }
590 |     let rId = String(self.idIncrement++);
591 |     el.dataset.responsives = rId;
592 |     var rPermissions = { lastBp: "", bpSet: choosenBPointsName, useClass };
593 |     let hiddenAllIndex = preParams.indexOf("hidden-all");
594 |     if (~hiddenAllIndex) {
595 |       preParams.splice(hiddenAllIndex, 1);
596 |       for (let i in self._rPermissions[binding.arg])
597 |         rPermissions[i] = 0;
598 |     } else {
599 |       for (let k in self._rPermissions[binding.arg])
600 |         rPermissions[k] = 1;
601 |     }
602 |     for (let i = 0; i < preParams.length; i++) {
603 |       let item = preParams[i];
604 |       if (!~validInputs.indexOf(item))
605 |         continue;
606 |       if (item.indexOf("hidden") === 0) {
607 |         var key = item.split("-")[1];
608 |         rPermissions[key] = 0;
609 |       } else {
610 |         rPermissions[item] = 1;
611 |       }
612 |     }
613 |     self.allProperties[rId] = rPermissions;
614 |   },
615 |   inserted: function(el, binding, vnode) {
616 |     if (el.dataset.responsives == null)
617 |       return;
618 |     let resizeListenerId = el.dataset.responsives;
619 |     function checkDisplay() {
620 |       var myPermissions = self.allProperties[resizeListenerId];
621 |       var curWidth = window.innerWidth;
622 |       var initial = el.dataset.initialDisplay ? el.dataset.initialDisplay : "";
623 |       var parameters = self._rPermissions[binding.arg];
624 |       for (let i in parameters) {
625 |         if (curWidth >= parameters[i].min && curWidth <= parameters[i].max) {
626 |           if (myPermissions.lastBp !== i) {
627 |             if (self.allProperties[resizeListenerId].useClass) {
628 |               el.classList.add(myPermissions.bpSet + "-" + i);
629 |               el.classList.remove(myPermissions.bpSet + "-" + myPermissions.lastBp);
630 |             } else {
631 |               if (myPermissions[i])
632 |                 el.style.display = initial;
633 |               else
634 |                 el.style.setProperty("display", "none", "important");
635 |             }
636 |             self.allProperties[resizeListenerId].lastBp = i;
637 |           }
638 |           break;
639 |         }
640 |       }
641 |     }
642 |     checkDisplay();
643 |     self.resizeListeners[resizeListenerId] = checkDisplay;
644 |   },
645 |   unbind: function(el, binding, vnode) {
646 |     let resizeListenerId = el.dataset.responsives;
647 |     delete self.resizeListeners[resizeListenerId];
648 |   }
649 | };
650 | vueResponsive.install = function(Vue2, options) {
651 |   if (typeof options === "object" && options.breakpoints) {
652 |     self._rPermissions.default = options.breakpoints;
653 |   }
654 |   Vue2.directive("responsive", vueResponsive);
655 | };
656 | try {
657 |   var notGlobal = false;
658 |   var currScriptFn = document.currentScript;
659 |   currScriptFn = currScriptFn || function() {
660 |     var scripts = document.getElementsByTagName("script");
661 |     return scripts[scripts.length - 1];
662 |   }();
663 |   notGlobal = Boolean(currScriptFn.getAttribute("notGlobal"));
664 |   if (!notGlobal && typeof window !== "undefined" && typeof window.Vue === "function")
665 |     window.Vue.use(vueResponsive);
666 | } catch (idk) {
667 |   console.error(idk);
668 | }
669 | var prism = "";
670 | let Vue = window.Vue;
671 | Vue.use(VuePrism);
672 | Vue.use(vueResponsive);
673 | Vue.config.productionTip = false;
674 | new Vue({
675 |   render: (h) => h(App)
676 | }).$mount("#app");
677 | 


--------------------------------------------------------------------------------
/dist/assets/vendor.5582453e.js:
--------------------------------------------------------------------------------
   1 | var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
   2 | var prism = { exports: {} };
   3 | (function(module) {
   4 |   var _self = typeof window !== "undefined" ? window : typeof WorkerGlobalScope !== "undefined" && self instanceof WorkerGlobalScope ? self : {};
   5 |   /**
   6 |    * Prism: Lightweight, robust, elegant syntax highlighting
   7 |    *
   8 |    * @license MIT <https://opensource.org/licenses/MIT>
   9 |    * @author Lea Verou <https://lea.verou.me>
  10 |    * @namespace
  11 |    * @public
  12 |    */
  13 |   var Prism2 = function(_self2) {
  14 |     var lang = /(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i;
  15 |     var uniqueId = 0;
  16 |     var plainTextGrammar = {};
  17 |     var _ = {
  18 |       manual: _self2.Prism && _self2.Prism.manual,
  19 |       disableWorkerMessageHandler: _self2.Prism && _self2.Prism.disableWorkerMessageHandler,
  20 |       util: {
  21 |         encode: function encode(tokens) {
  22 |           if (tokens instanceof Token) {
  23 |             return new Token(tokens.type, encode(tokens.content), tokens.alias);
  24 |           } else if (Array.isArray(tokens)) {
  25 |             return tokens.map(encode);
  26 |           } else {
  27 |             return tokens.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/\u00a0/g, " ");
  28 |           }
  29 |         },
  30 |         type: function(o) {
  31 |           return Object.prototype.toString.call(o).slice(8, -1);
  32 |         },
  33 |         objId: function(obj) {
  34 |           if (!obj["__id"]) {
  35 |             Object.defineProperty(obj, "__id", { value: ++uniqueId });
  36 |           }
  37 |           return obj["__id"];
  38 |         },
  39 |         clone: function deepClone(o, visited) {
  40 |           visited = visited || {};
  41 |           var clone;
  42 |           var id;
  43 |           switch (_.util.type(o)) {
  44 |             case "Object":
  45 |               id = _.util.objId(o);
  46 |               if (visited[id]) {
  47 |                 return visited[id];
  48 |               }
  49 |               clone = {};
  50 |               visited[id] = clone;
  51 |               for (var key in o) {
  52 |                 if (o.hasOwnProperty(key)) {
  53 |                   clone[key] = deepClone(o[key], visited);
  54 |                 }
  55 |               }
  56 |               return clone;
  57 |             case "Array":
  58 |               id = _.util.objId(o);
  59 |               if (visited[id]) {
  60 |                 return visited[id];
  61 |               }
  62 |               clone = [];
  63 |               visited[id] = clone;
  64 |               o.forEach(function(v, i) {
  65 |                 clone[i] = deepClone(v, visited);
  66 |               });
  67 |               return clone;
  68 |             default:
  69 |               return o;
  70 |           }
  71 |         },
  72 |         getLanguage: function(element) {
  73 |           while (element) {
  74 |             var m = lang.exec(element.className);
  75 |             if (m) {
  76 |               return m[1].toLowerCase();
  77 |             }
  78 |             element = element.parentElement;
  79 |           }
  80 |           return "none";
  81 |         },
  82 |         setLanguage: function(element, language) {
  83 |           element.className = element.className.replace(RegExp(lang, "gi"), "");
  84 |           element.classList.add("language-" + language);
  85 |         },
  86 |         currentScript: function() {
  87 |           if (typeof document === "undefined") {
  88 |             return null;
  89 |           }
  90 |           if ("currentScript" in document && 1 < 2) {
  91 |             return document.currentScript;
  92 |           }
  93 |           try {
  94 |             throw new Error();
  95 |           } catch (err) {
  96 |             var src = (/at [^(\r\n]*\((.*):[^:]+:[^:]+\)$/i.exec(err.stack) || [])[1];
  97 |             if (src) {
  98 |               var scripts = document.getElementsByTagName("script");
  99 |               for (var i in scripts) {
 100 |                 if (scripts[i].src == src) {
 101 |                   return scripts[i];
 102 |                 }
 103 |               }
 104 |             }
 105 |             return null;
 106 |           }
 107 |         },
 108 |         isActive: function(element, className, defaultActivation) {
 109 |           var no = "no-" + className;
 110 |           while (element) {
 111 |             var classList = element.classList;
 112 |             if (classList.contains(className)) {
 113 |               return true;
 114 |             }
 115 |             if (classList.contains(no)) {
 116 |               return false;
 117 |             }
 118 |             element = element.parentElement;
 119 |           }
 120 |           return !!defaultActivation;
 121 |         }
 122 |       },
 123 |       languages: {
 124 |         plain: plainTextGrammar,
 125 |         plaintext: plainTextGrammar,
 126 |         text: plainTextGrammar,
 127 |         txt: plainTextGrammar,
 128 |         extend: function(id, redef) {
 129 |           var lang2 = _.util.clone(_.languages[id]);
 130 |           for (var key in redef) {
 131 |             lang2[key] = redef[key];
 132 |           }
 133 |           return lang2;
 134 |         },
 135 |         insertBefore: function(inside, before, insert, root) {
 136 |           root = root || _.languages;
 137 |           var grammar = root[inside];
 138 |           var ret = {};
 139 |           for (var token in grammar) {
 140 |             if (grammar.hasOwnProperty(token)) {
 141 |               if (token == before) {
 142 |                 for (var newToken in insert) {
 143 |                   if (insert.hasOwnProperty(newToken)) {
 144 |                     ret[newToken] = insert[newToken];
 145 |                   }
 146 |                 }
 147 |               }
 148 |               if (!insert.hasOwnProperty(token)) {
 149 |                 ret[token] = grammar[token];
 150 |               }
 151 |             }
 152 |           }
 153 |           var old = root[inside];
 154 |           root[inside] = ret;
 155 |           _.languages.DFS(_.languages, function(key, value) {
 156 |             if (value === old && key != inside) {
 157 |               this[key] = ret;
 158 |             }
 159 |           });
 160 |           return ret;
 161 |         },
 162 |         DFS: function DFS(o, callback, type, visited) {
 163 |           visited = visited || {};
 164 |           var objId = _.util.objId;
 165 |           for (var i in o) {
 166 |             if (o.hasOwnProperty(i)) {
 167 |               callback.call(o, i, o[i], type || i);
 168 |               var property = o[i];
 169 |               var propertyType = _.util.type(property);
 170 |               if (propertyType === "Object" && !visited[objId(property)]) {
 171 |                 visited[objId(property)] = true;
 172 |                 DFS(property, callback, null, visited);
 173 |               } else if (propertyType === "Array" && !visited[objId(property)]) {
 174 |                 visited[objId(property)] = true;
 175 |                 DFS(property, callback, i, visited);
 176 |               }
 177 |             }
 178 |           }
 179 |         }
 180 |       },
 181 |       plugins: {},
 182 |       highlightAll: function(async, callback) {
 183 |         _.highlightAllUnder(document, async, callback);
 184 |       },
 185 |       highlightAllUnder: function(container, async, callback) {
 186 |         var env = {
 187 |           callback,
 188 |           container,
 189 |           selector: 'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'
 190 |         };
 191 |         _.hooks.run("before-highlightall", env);
 192 |         env.elements = Array.prototype.slice.apply(env.container.querySelectorAll(env.selector));
 193 |         _.hooks.run("before-all-elements-highlight", env);
 194 |         for (var i = 0, element; element = env.elements[i++]; ) {
 195 |           _.highlightElement(element, async === true, env.callback);
 196 |         }
 197 |       },
 198 |       highlightElement: function(element, async, callback) {
 199 |         var language = _.util.getLanguage(element);
 200 |         var grammar = _.languages[language];
 201 |         _.util.setLanguage(element, language);
 202 |         var parent = element.parentElement;
 203 |         if (parent && parent.nodeName.toLowerCase() === "pre") {
 204 |           _.util.setLanguage(parent, language);
 205 |         }
 206 |         var code = element.textContent;
 207 |         var env = {
 208 |           element,
 209 |           language,
 210 |           grammar,
 211 |           code
 212 |         };
 213 |         function insertHighlightedCode(highlightedCode) {
 214 |           env.highlightedCode = highlightedCode;
 215 |           _.hooks.run("before-insert", env);
 216 |           env.element.innerHTML = env.highlightedCode;
 217 |           _.hooks.run("after-highlight", env);
 218 |           _.hooks.run("complete", env);
 219 |           callback && callback.call(env.element);
 220 |         }
 221 |         _.hooks.run("before-sanity-check", env);
 222 |         parent = env.element.parentElement;
 223 |         if (parent && parent.nodeName.toLowerCase() === "pre" && !parent.hasAttribute("tabindex")) {
 224 |           parent.setAttribute("tabindex", "0");
 225 |         }
 226 |         if (!env.code) {
 227 |           _.hooks.run("complete", env);
 228 |           callback && callback.call(env.element);
 229 |           return;
 230 |         }
 231 |         _.hooks.run("before-highlight", env);
 232 |         if (!env.grammar) {
 233 |           insertHighlightedCode(_.util.encode(env.code));
 234 |           return;
 235 |         }
 236 |         if (async && _self2.Worker) {
 237 |           var worker = new Worker(_.filename);
 238 |           worker.onmessage = function(evt) {
 239 |             insertHighlightedCode(evt.data);
 240 |           };
 241 |           worker.postMessage(JSON.stringify({
 242 |             language: env.language,
 243 |             code: env.code,
 244 |             immediateClose: true
 245 |           }));
 246 |         } else {
 247 |           insertHighlightedCode(_.highlight(env.code, env.grammar, env.language));
 248 |         }
 249 |       },
 250 |       highlight: function(text, grammar, language) {
 251 |         var env = {
 252 |           code: text,
 253 |           grammar,
 254 |           language
 255 |         };
 256 |         _.hooks.run("before-tokenize", env);
 257 |         env.tokens = _.tokenize(env.code, env.grammar);
 258 |         _.hooks.run("after-tokenize", env);
 259 |         return Token.stringify(_.util.encode(env.tokens), env.language);
 260 |       },
 261 |       tokenize: function(text, grammar) {
 262 |         var rest = grammar.rest;
 263 |         if (rest) {
 264 |           for (var token in rest) {
 265 |             grammar[token] = rest[token];
 266 |           }
 267 |           delete grammar.rest;
 268 |         }
 269 |         var tokenList = new LinkedList();
 270 |         addAfter(tokenList, tokenList.head, text);
 271 |         matchGrammar(text, tokenList, grammar, tokenList.head, 0);
 272 |         return toArray(tokenList);
 273 |       },
 274 |       hooks: {
 275 |         all: {},
 276 |         add: function(name, callback) {
 277 |           var hooks = _.hooks.all;
 278 |           hooks[name] = hooks[name] || [];
 279 |           hooks[name].push(callback);
 280 |         },
 281 |         run: function(name, env) {
 282 |           var callbacks = _.hooks.all[name];
 283 |           if (!callbacks || !callbacks.length) {
 284 |             return;
 285 |           }
 286 |           for (var i = 0, callback; callback = callbacks[i++]; ) {
 287 |             callback(env);
 288 |           }
 289 |         }
 290 |       },
 291 |       Token
 292 |     };
 293 |     _self2.Prism = _;
 294 |     function Token(type, content, alias, matchedStr) {
 295 |       this.type = type;
 296 |       this.content = content;
 297 |       this.alias = alias;
 298 |       this.length = (matchedStr || "").length | 0;
 299 |     }
 300 |     Token.stringify = function stringify(o, language) {
 301 |       if (typeof o == "string") {
 302 |         return o;
 303 |       }
 304 |       if (Array.isArray(o)) {
 305 |         var s = "";
 306 |         o.forEach(function(e) {
 307 |           s += stringify(e, language);
 308 |         });
 309 |         return s;
 310 |       }
 311 |       var env = {
 312 |         type: o.type,
 313 |         content: stringify(o.content, language),
 314 |         tag: "span",
 315 |         classes: ["token", o.type],
 316 |         attributes: {},
 317 |         language
 318 |       };
 319 |       var aliases = o.alias;
 320 |       if (aliases) {
 321 |         if (Array.isArray(aliases)) {
 322 |           Array.prototype.push.apply(env.classes, aliases);
 323 |         } else {
 324 |           env.classes.push(aliases);
 325 |         }
 326 |       }
 327 |       _.hooks.run("wrap", env);
 328 |       var attributes = "";
 329 |       for (var name in env.attributes) {
 330 |         attributes += " " + name + '="' + (env.attributes[name] || "").replace(/"/g, "&quot;") + '"';
 331 |       }
 332 |       return "<" + env.tag + ' class="' + env.classes.join(" ") + '"' + attributes + ">" + env.content + "</" + env.tag + ">";
 333 |     };
 334 |     function matchPattern(pattern, pos, text, lookbehind) {
 335 |       pattern.lastIndex = pos;
 336 |       var match = pattern.exec(text);
 337 |       if (match && lookbehind && match[1]) {
 338 |         var lookbehindLength = match[1].length;
 339 |         match.index += lookbehindLength;
 340 |         match[0] = match[0].slice(lookbehindLength);
 341 |       }
 342 |       return match;
 343 |     }
 344 |     function matchGrammar(text, tokenList, grammar, startNode, startPos, rematch) {
 345 |       for (var token in grammar) {
 346 |         if (!grammar.hasOwnProperty(token) || !grammar[token]) {
 347 |           continue;
 348 |         }
 349 |         var patterns = grammar[token];
 350 |         patterns = Array.isArray(patterns) ? patterns : [patterns];
 351 |         for (var j = 0; j < patterns.length; ++j) {
 352 |           if (rematch && rematch.cause == token + "," + j) {
 353 |             return;
 354 |           }
 355 |           var patternObj = patterns[j];
 356 |           var inside = patternObj.inside;
 357 |           var lookbehind = !!patternObj.lookbehind;
 358 |           var greedy = !!patternObj.greedy;
 359 |           var alias = patternObj.alias;
 360 |           if (greedy && !patternObj.pattern.global) {
 361 |             var flags = patternObj.pattern.toString().match(/[imsuy]*$/)[0];
 362 |             patternObj.pattern = RegExp(patternObj.pattern.source, flags + "g");
 363 |           }
 364 |           var pattern = patternObj.pattern || patternObj;
 365 |           for (var currentNode = startNode.next, pos = startPos; currentNode !== tokenList.tail; pos += currentNode.value.length, currentNode = currentNode.next) {
 366 |             if (rematch && pos >= rematch.reach) {
 367 |               break;
 368 |             }
 369 |             var str = currentNode.value;
 370 |             if (tokenList.length > text.length) {
 371 |               return;
 372 |             }
 373 |             if (str instanceof Token) {
 374 |               continue;
 375 |             }
 376 |             var removeCount = 1;
 377 |             var match;
 378 |             if (greedy) {
 379 |               match = matchPattern(pattern, pos, text, lookbehind);
 380 |               if (!match || match.index >= text.length) {
 381 |                 break;
 382 |               }
 383 |               var from = match.index;
 384 |               var to = match.index + match[0].length;
 385 |               var p = pos;
 386 |               p += currentNode.value.length;
 387 |               while (from >= p) {
 388 |                 currentNode = currentNode.next;
 389 |                 p += currentNode.value.length;
 390 |               }
 391 |               p -= currentNode.value.length;
 392 |               pos = p;
 393 |               if (currentNode.value instanceof Token) {
 394 |                 continue;
 395 |               }
 396 |               for (var k = currentNode; k !== tokenList.tail && (p < to || typeof k.value === "string"); k = k.next) {
 397 |                 removeCount++;
 398 |                 p += k.value.length;
 399 |               }
 400 |               removeCount--;
 401 |               str = text.slice(pos, p);
 402 |               match.index -= pos;
 403 |             } else {
 404 |               match = matchPattern(pattern, 0, str, lookbehind);
 405 |               if (!match) {
 406 |                 continue;
 407 |               }
 408 |             }
 409 |             var from = match.index;
 410 |             var matchStr = match[0];
 411 |             var before = str.slice(0, from);
 412 |             var after = str.slice(from + matchStr.length);
 413 |             var reach = pos + str.length;
 414 |             if (rematch && reach > rematch.reach) {
 415 |               rematch.reach = reach;
 416 |             }
 417 |             var removeFrom = currentNode.prev;
 418 |             if (before) {
 419 |               removeFrom = addAfter(tokenList, removeFrom, before);
 420 |               pos += before.length;
 421 |             }
 422 |             removeRange(tokenList, removeFrom, removeCount);
 423 |             var wrapped = new Token(token, inside ? _.tokenize(matchStr, inside) : matchStr, alias, matchStr);
 424 |             currentNode = addAfter(tokenList, removeFrom, wrapped);
 425 |             if (after) {
 426 |               addAfter(tokenList, currentNode, after);
 427 |             }
 428 |             if (removeCount > 1) {
 429 |               var nestedRematch = {
 430 |                 cause: token + "," + j,
 431 |                 reach
 432 |               };
 433 |               matchGrammar(text, tokenList, grammar, currentNode.prev, pos, nestedRematch);
 434 |               if (rematch && nestedRematch.reach > rematch.reach) {
 435 |                 rematch.reach = nestedRematch.reach;
 436 |               }
 437 |             }
 438 |           }
 439 |         }
 440 |       }
 441 |     }
 442 |     function LinkedList() {
 443 |       var head = { value: null, prev: null, next: null };
 444 |       var tail = { value: null, prev: head, next: null };
 445 |       head.next = tail;
 446 |       this.head = head;
 447 |       this.tail = tail;
 448 |       this.length = 0;
 449 |     }
 450 |     function addAfter(list, node, value) {
 451 |       var next = node.next;
 452 |       var newNode = { value, prev: node, next };
 453 |       node.next = newNode;
 454 |       next.prev = newNode;
 455 |       list.length++;
 456 |       return newNode;
 457 |     }
 458 |     function removeRange(list, node, count) {
 459 |       var next = node.next;
 460 |       for (var i = 0; i < count && next !== list.tail; i++) {
 461 |         next = next.next;
 462 |       }
 463 |       node.next = next;
 464 |       next.prev = node;
 465 |       list.length -= i;
 466 |     }
 467 |     function toArray(list) {
 468 |       var array = [];
 469 |       var node = list.head.next;
 470 |       while (node !== list.tail) {
 471 |         array.push(node.value);
 472 |         node = node.next;
 473 |       }
 474 |       return array;
 475 |     }
 476 |     if (!_self2.document) {
 477 |       if (!_self2.addEventListener) {
 478 |         return _;
 479 |       }
 480 |       if (!_.disableWorkerMessageHandler) {
 481 |         _self2.addEventListener("message", function(evt) {
 482 |           var message = JSON.parse(evt.data);
 483 |           var lang2 = message.language;
 484 |           var code = message.code;
 485 |           var immediateClose = message.immediateClose;
 486 |           _self2.postMessage(_.highlight(code, _.languages[lang2], lang2));
 487 |           if (immediateClose) {
 488 |             _self2.close();
 489 |           }
 490 |         }, false);
 491 |       }
 492 |       return _;
 493 |     }
 494 |     var script = _.util.currentScript();
 495 |     if (script) {
 496 |       _.filename = script.src;
 497 |       if (script.hasAttribute("data-manual")) {
 498 |         _.manual = true;
 499 |       }
 500 |     }
 501 |     function highlightAutomaticallyCallback() {
 502 |       if (!_.manual) {
 503 |         _.highlightAll();
 504 |       }
 505 |     }
 506 |     if (!_.manual) {
 507 |       var readyState = document.readyState;
 508 |       if (readyState === "loading" || readyState === "interactive" && script && script.defer) {
 509 |         document.addEventListener("DOMContentLoaded", highlightAutomaticallyCallback);
 510 |       } else {
 511 |         if (window.requestAnimationFrame) {
 512 |           window.requestAnimationFrame(highlightAutomaticallyCallback);
 513 |         } else {
 514 |           window.setTimeout(highlightAutomaticallyCallback, 16);
 515 |         }
 516 |       }
 517 |     }
 518 |     return _;
 519 |   }(_self);
 520 |   if (module.exports) {
 521 |     module.exports = Prism2;
 522 |   }
 523 |   if (typeof commonjsGlobal !== "undefined") {
 524 |     commonjsGlobal.Prism = Prism2;
 525 |   }
 526 |   Prism2.languages.markup = {
 527 |     "comment": {
 528 |       pattern: /<!--(?:(?!<!--)[\s\S])*?-->/,
 529 |       greedy: true
 530 |     },
 531 |     "prolog": {
 532 |       pattern: /<\?[\s\S]+?\?>/,
 533 |       greedy: true
 534 |     },
 535 |     "doctype": {
 536 |       pattern: /<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,
 537 |       greedy: true,
 538 |       inside: {
 539 |         "internal-subset": {
 540 |           pattern: /(^[^\[]*\[)[\s\S]+(?=\]>$)/,
 541 |           lookbehind: true,
 542 |           greedy: true,
 543 |           inside: null
 544 |         },
 545 |         "string": {
 546 |           pattern: /"[^"]*"|'[^']*'/,
 547 |           greedy: true
 548 |         },
 549 |         "punctuation": /^<!|>$|[[\]]/,
 550 |         "doctype-tag": /^DOCTYPE/i,
 551 |         "name": /[^\s<>'"]+/
 552 |       }
 553 |     },
 554 |     "cdata": {
 555 |       pattern: /<!\[CDATA\[[\s\S]*?\]\]>/i,
 556 |       greedy: true
 557 |     },
 558 |     "tag": {
 559 |       pattern: /<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,
 560 |       greedy: true,
 561 |       inside: {
 562 |         "tag": {
 563 |           pattern: /^<\/?[^\s>\/]+/,
 564 |           inside: {
 565 |             "punctuation": /^<\/?/,
 566 |             "namespace": /^[^\s>\/:]+:/
 567 |           }
 568 |         },
 569 |         "special-attr": [],
 570 |         "attr-value": {
 571 |           pattern: /=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,
 572 |           inside: {
 573 |             "punctuation": [
 574 |               {
 575 |                 pattern: /^=/,
 576 |                 alias: "attr-equals"
 577 |               },
 578 |               /"|'/
 579 |             ]
 580 |           }
 581 |         },
 582 |         "punctuation": /\/?>/,
 583 |         "attr-name": {
 584 |           pattern: /[^\s>\/]+/,
 585 |           inside: {
 586 |             "namespace": /^[^\s>\/:]+:/
 587 |           }
 588 |         }
 589 |       }
 590 |     },
 591 |     "entity": [
 592 |       {
 593 |         pattern: /&[\da-z]{1,8};/i,
 594 |         alias: "named-entity"
 595 |       },
 596 |       /&#x?[\da-f]{1,8};/i
 597 |     ]
 598 |   };
 599 |   Prism2.languages.markup["tag"].inside["attr-value"].inside["entity"] = Prism2.languages.markup["entity"];
 600 |   Prism2.languages.markup["doctype"].inside["internal-subset"].inside = Prism2.languages.markup;
 601 |   Prism2.hooks.add("wrap", function(env) {
 602 |     if (env.type === "entity") {
 603 |       env.attributes["title"] = env.content.replace(/&amp;/, "&");
 604 |     }
 605 |   });
 606 |   Object.defineProperty(Prism2.languages.markup.tag, "addInlined", {
 607 |     value: function addInlined(tagName, lang) {
 608 |       var includedCdataInside = {};
 609 |       includedCdataInside["language-" + lang] = {
 610 |         pattern: /(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,
 611 |         lookbehind: true,
 612 |         inside: Prism2.languages[lang]
 613 |       };
 614 |       includedCdataInside["cdata"] = /^<!\[CDATA\[|\]\]>$/i;
 615 |       var inside = {
 616 |         "included-cdata": {
 617 |           pattern: /<!\[CDATA\[[\s\S]*?\]\]>/i,
 618 |           inside: includedCdataInside
 619 |         }
 620 |       };
 621 |       inside["language-" + lang] = {
 622 |         pattern: /[\s\S]+/,
 623 |         inside: Prism2.languages[lang]
 624 |       };
 625 |       var def = {};
 626 |       def[tagName] = {
 627 |         pattern: RegExp(/(<__[^>]*>)(?:<!\[CDATA\[(?:[^\]]|\](?!\]>))*\]\]>|(?!<!\[CDATA\[)[\s\S])*?(?=<\/__>)/.source.replace(/__/g, function() {
 628 |           return tagName;
 629 |         }), "i"),
 630 |         lookbehind: true,
 631 |         greedy: true,
 632 |         inside
 633 |       };
 634 |       Prism2.languages.insertBefore("markup", "cdata", def);
 635 |     }
 636 |   });
 637 |   Object.defineProperty(Prism2.languages.markup.tag, "addAttribute", {
 638 |     value: function(attrName, lang) {
 639 |       Prism2.languages.markup.tag.inside["special-attr"].push({
 640 |         pattern: RegExp(/(^|["'\s])/.source + "(?:" + attrName + ")" + /\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))/.source, "i"),
 641 |         lookbehind: true,
 642 |         inside: {
 643 |           "attr-name": /^[^\s=]+/,
 644 |           "attr-value": {
 645 |             pattern: /=[\s\S]+/,
 646 |             inside: {
 647 |               "value": {
 648 |                 pattern: /(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,
 649 |                 lookbehind: true,
 650 |                 alias: [lang, "language-" + lang],
 651 |                 inside: Prism2.languages[lang]
 652 |               },
 653 |               "punctuation": [
 654 |                 {
 655 |                   pattern: /^=/,
 656 |                   alias: "attr-equals"
 657 |                 },
 658 |                 /"|'/
 659 |               ]
 660 |             }
 661 |           }
 662 |         }
 663 |       });
 664 |     }
 665 |   });
 666 |   Prism2.languages.html = Prism2.languages.markup;
 667 |   Prism2.languages.mathml = Prism2.languages.markup;
 668 |   Prism2.languages.svg = Prism2.languages.markup;
 669 |   Prism2.languages.xml = Prism2.languages.extend("markup", {});
 670 |   Prism2.languages.ssml = Prism2.languages.xml;
 671 |   Prism2.languages.atom = Prism2.languages.xml;
 672 |   Prism2.languages.rss = Prism2.languages.xml;
 673 |   (function(Prism3) {
 674 |     var string = /(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;
 675 |     Prism3.languages.css = {
 676 |       "comment": /\/\*[\s\S]*?\*\//,
 677 |       "atrule": {
 678 |         pattern: /@[\w-](?:[^;{\s]|\s+(?![\s{]))*(?:;|(?=\s*\{))/,
 679 |         inside: {
 680 |           "rule": /^@[\w-]+/,
 681 |           "selector-function-argument": {
 682 |             pattern: /(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,
 683 |             lookbehind: true,
 684 |             alias: "selector"
 685 |           },
 686 |           "keyword": {
 687 |             pattern: /(^|[^\w-])(?:and|not|only|or)(?![\w-])/,
 688 |             lookbehind: true
 689 |           }
 690 |         }
 691 |       },
 692 |       "url": {
 693 |         pattern: RegExp("\\burl\\((?:" + string.source + "|" + /(?:[^\\\r\n()"']|\\[\s\S])*/.source + ")\\)", "i"),
 694 |         greedy: true,
 695 |         inside: {
 696 |           "function": /^url/i,
 697 |           "punctuation": /^\(|\)$/,
 698 |           "string": {
 699 |             pattern: RegExp("^" + string.source + "$"),
 700 |             alias: "url"
 701 |           }
 702 |         }
 703 |       },
 704 |       "selector": {
 705 |         pattern: RegExp(`(^|[{}\\s])[^{}\\s](?:[^{};"'\\s]|\\s+(?![\\s{])|` + string.source + ")*(?=\\s*\\{)"),
 706 |         lookbehind: true
 707 |       },
 708 |       "string": {
 709 |         pattern: string,
 710 |         greedy: true
 711 |       },
 712 |       "property": {
 713 |         pattern: /(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,
 714 |         lookbehind: true
 715 |       },
 716 |       "important": /!important\b/i,
 717 |       "function": {
 718 |         pattern: /(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,
 719 |         lookbehind: true
 720 |       },
 721 |       "punctuation": /[(){};:,]/
 722 |     };
 723 |     Prism3.languages.css["atrule"].inside.rest = Prism3.languages.css;
 724 |     var markup = Prism3.languages.markup;
 725 |     if (markup) {
 726 |       markup.tag.addInlined("style", "css");
 727 |       markup.tag.addAttribute("style", "css");
 728 |     }
 729 |   })(Prism2);
 730 |   Prism2.languages.clike = {
 731 |     "comment": [
 732 |       {
 733 |         pattern: /(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,
 734 |         lookbehind: true,
 735 |         greedy: true
 736 |       },
 737 |       {
 738 |         pattern: /(^|[^\\:])\/\/.*/,
 739 |         lookbehind: true,
 740 |         greedy: true
 741 |       }
 742 |     ],
 743 |     "string": {
 744 |       pattern: /(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
 745 |       greedy: true
 746 |     },
 747 |     "class-name": {
 748 |       pattern: /(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,
 749 |       lookbehind: true,
 750 |       inside: {
 751 |         "punctuation": /[.\\]/
 752 |       }
 753 |     },
 754 |     "keyword": /\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,
 755 |     "boolean": /\b(?:false|true)\b/,
 756 |     "function": /\b\w+(?=\()/,
 757 |     "number": /\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,
 758 |     "operator": /[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,
 759 |     "punctuation": /[{}[\];(),.:]/
 760 |   };
 761 |   Prism2.languages.javascript = Prism2.languages.extend("clike", {
 762 |     "class-name": [
 763 |       Prism2.languages.clike["class-name"],
 764 |       {
 765 |         pattern: /(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,
 766 |         lookbehind: true
 767 |       }
 768 |     ],
 769 |     "keyword": [
 770 |       {
 771 |         pattern: /((?:^|\})\s*)catch\b/,
 772 |         lookbehind: true
 773 |       },
 774 |       {
 775 |         pattern: /(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,
 776 |         lookbehind: true
 777 |       }
 778 |     ],
 779 |     "function": /#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,
 780 |     "number": {
 781 |       pattern: RegExp(/(^|[^\w$])/.source + "(?:" + (/NaN|Infinity/.source + "|" + /0[bB][01]+(?:_[01]+)*n?/.source + "|" + /0[oO][0-7]+(?:_[0-7]+)*n?/.source + "|" + /0[xX][\dA-Fa-f]+(?:_[\dA-Fa-f]+)*n?/.source + "|" + /\d+(?:_\d+)*n/.source + "|" + /(?:\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\.\d+(?:_\d+)*)(?:[Ee][+-]?\d+(?:_\d+)*)?/.source) + ")" + /(?![\w$])/.source),
 782 |       lookbehind: true
 783 |     },
 784 |     "operator": /--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/
 785 |   });
 786 |   Prism2.languages.javascript["class-name"][0].pattern = /(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/;
 787 |   Prism2.languages.insertBefore("javascript", "keyword", {
 788 |     "regex": {
 789 |       pattern: /((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/,
 790 |       lookbehind: true,
 791 |       greedy: true,
 792 |       inside: {
 793 |         "regex-source": {
 794 |           pattern: /^(\/)[\s\S]+(?=\/[a-z]*$)/,
 795 |           lookbehind: true,
 796 |           alias: "language-regex",
 797 |           inside: Prism2.languages.regex
 798 |         },
 799 |         "regex-delimiter": /^\/|\/$/,
 800 |         "regex-flags": /^[a-z]+$/
 801 |       }
 802 |     },
 803 |     "function-variable": {
 804 |       pattern: /#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,
 805 |       alias: "function"
 806 |     },
 807 |     "parameter": [
 808 |       {
 809 |         pattern: /(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,
 810 |         lookbehind: true,
 811 |         inside: Prism2.languages.javascript
 812 |       },
 813 |       {
 814 |         pattern: /(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,
 815 |         lookbehind: true,
 816 |         inside: Prism2.languages.javascript
 817 |       },
 818 |       {
 819 |         pattern: /(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,
 820 |         lookbehind: true,
 821 |         inside: Prism2.languages.javascript
 822 |       },
 823 |       {
 824 |         pattern: /((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,
 825 |         lookbehind: true,
 826 |         inside: Prism2.languages.javascript
 827 |       }
 828 |     ],
 829 |     "constant": /\b[A-Z](?:[A-Z_]|\dx?)*\b/
 830 |   });
 831 |   Prism2.languages.insertBefore("javascript", "string", {
 832 |     "hashbang": {
 833 |       pattern: /^#!.*/,
 834 |       greedy: true,
 835 |       alias: "comment"
 836 |     },
 837 |     "template-string": {
 838 |       pattern: /`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,
 839 |       greedy: true,
 840 |       inside: {
 841 |         "template-punctuation": {
 842 |           pattern: /^`|`$/,
 843 |           alias: "string"
 844 |         },
 845 |         "interpolation": {
 846 |           pattern: /((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,
 847 |           lookbehind: true,
 848 |           inside: {
 849 |             "interpolation-punctuation": {
 850 |               pattern: /^\$\{|\}$/,
 851 |               alias: "punctuation"
 852 |             },
 853 |             rest: Prism2.languages.javascript
 854 |           }
 855 |         },
 856 |         "string": /[\s\S]+/
 857 |       }
 858 |     },
 859 |     "string-property": {
 860 |       pattern: /((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,
 861 |       lookbehind: true,
 862 |       greedy: true,
 863 |       alias: "property"
 864 |     }
 865 |   });
 866 |   Prism2.languages.insertBefore("javascript", "operator", {
 867 |     "literal-property": {
 868 |       pattern: /((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,
 869 |       lookbehind: true,
 870 |       alias: "property"
 871 |     }
 872 |   });
 873 |   if (Prism2.languages.markup) {
 874 |     Prism2.languages.markup.tag.addInlined("script", "javascript");
 875 |     Prism2.languages.markup.tag.addAttribute(/on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)/.source, "javascript");
 876 |   }
 877 |   Prism2.languages.js = Prism2.languages.javascript;
 878 |   (function() {
 879 |     if (typeof Prism2 === "undefined" || typeof document === "undefined") {
 880 |       return;
 881 |     }
 882 |     if (!Element.prototype.matches) {
 883 |       Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
 884 |     }
 885 |     var LOADING_MESSAGE = "Loading\u2026";
 886 |     var FAILURE_MESSAGE = function(status, message) {
 887 |       return "\u2716 Error " + status + " while fetching file: " + message;
 888 |     };
 889 |     var FAILURE_EMPTY_MESSAGE = "\u2716 Error: File does not exist or is empty";
 890 |     var EXTENSIONS = {
 891 |       "js": "javascript",
 892 |       "py": "python",
 893 |       "rb": "ruby",
 894 |       "ps1": "powershell",
 895 |       "psm1": "powershell",
 896 |       "sh": "bash",
 897 |       "bat": "batch",
 898 |       "h": "c",
 899 |       "tex": "latex"
 900 |     };
 901 |     var STATUS_ATTR = "data-src-status";
 902 |     var STATUS_LOADING = "loading";
 903 |     var STATUS_LOADED = "loaded";
 904 |     var STATUS_FAILED = "failed";
 905 |     var SELECTOR = "pre[data-src]:not([" + STATUS_ATTR + '="' + STATUS_LOADED + '"]):not([' + STATUS_ATTR + '="' + STATUS_LOADING + '"])';
 906 |     function loadFile(src, success, error) {
 907 |       var xhr = new XMLHttpRequest();
 908 |       xhr.open("GET", src, true);
 909 |       xhr.onreadystatechange = function() {
 910 |         if (xhr.readyState == 4) {
 911 |           if (xhr.status < 400 && xhr.responseText) {
 912 |             success(xhr.responseText);
 913 |           } else {
 914 |             if (xhr.status >= 400) {
 915 |               error(FAILURE_MESSAGE(xhr.status, xhr.statusText));
 916 |             } else {
 917 |               error(FAILURE_EMPTY_MESSAGE);
 918 |             }
 919 |           }
 920 |         }
 921 |       };
 922 |       xhr.send(null);
 923 |     }
 924 |     function parseRange(range) {
 925 |       var m = /^\s*(\d+)\s*(?:(,)\s*(?:(\d+)\s*)?)?$/.exec(range || "");
 926 |       if (m) {
 927 |         var start = Number(m[1]);
 928 |         var comma = m[2];
 929 |         var end = m[3];
 930 |         if (!comma) {
 931 |           return [start, start];
 932 |         }
 933 |         if (!end) {
 934 |           return [start, void 0];
 935 |         }
 936 |         return [start, Number(end)];
 937 |       }
 938 |       return void 0;
 939 |     }
 940 |     Prism2.hooks.add("before-highlightall", function(env) {
 941 |       env.selector += ", " + SELECTOR;
 942 |     });
 943 |     Prism2.hooks.add("before-sanity-check", function(env) {
 944 |       var pre = env.element;
 945 |       if (pre.matches(SELECTOR)) {
 946 |         env.code = "";
 947 |         pre.setAttribute(STATUS_ATTR, STATUS_LOADING);
 948 |         var code = pre.appendChild(document.createElement("CODE"));
 949 |         code.textContent = LOADING_MESSAGE;
 950 |         var src = pre.getAttribute("data-src");
 951 |         var language = env.language;
 952 |         if (language === "none") {
 953 |           var extension = (/\.(\w+)$/.exec(src) || [, "none"])[1];
 954 |           language = EXTENSIONS[extension] || extension;
 955 |         }
 956 |         Prism2.util.setLanguage(code, language);
 957 |         Prism2.util.setLanguage(pre, language);
 958 |         var autoloader = Prism2.plugins.autoloader;
 959 |         if (autoloader) {
 960 |           autoloader.loadLanguages(language);
 961 |         }
 962 |         loadFile(src, function(text) {
 963 |           pre.setAttribute(STATUS_ATTR, STATUS_LOADED);
 964 |           var range = parseRange(pre.getAttribute("data-range"));
 965 |           if (range) {
 966 |             var lines = text.split(/\r\n?|\n/g);
 967 |             var start = range[0];
 968 |             var end = range[1] == null ? lines.length : range[1];
 969 |             if (start < 0) {
 970 |               start += lines.length;
 971 |             }
 972 |             start = Math.max(0, Math.min(start - 1, lines.length));
 973 |             if (end < 0) {
 974 |               end += lines.length;
 975 |             }
 976 |             end = Math.max(0, Math.min(end, lines.length));
 977 |             text = lines.slice(start, end).join("\n");
 978 |             if (!pre.hasAttribute("data-start")) {
 979 |               pre.setAttribute("data-start", String(start + 1));
 980 |             }
 981 |           }
 982 |           code.textContent = text;
 983 |           Prism2.highlightElement(code);
 984 |         }, function(error) {
 985 |           pre.setAttribute(STATUS_ATTR, STATUS_FAILED);
 986 |           code.textContent = error;
 987 |         });
 988 |       }
 989 |     });
 990 |     Prism2.plugins.fileHighlight = {
 991 |       highlight: function highlight(container) {
 992 |         var elements = (container || document).querySelectorAll(SELECTOR);
 993 |         for (var i = 0, element; element = elements[i++]; ) {
 994 |           Prism2.highlightElement(element);
 995 |         }
 996 |       }
 997 |     };
 998 |     var logged = false;
 999 |     Prism2.fileHighlight = function() {
1000 |       if (!logged) {
1001 |         console.warn("Prism.fileHighlight is deprecated. Use `Prism.plugins.fileHighlight.highlight` instead.");
1002 |         logged = true;
1003 |       }
1004 |       Prism2.plugins.fileHighlight.highlight.apply(this, arguments);
1005 |     };
1006 |   })();
1007 | })(prism);
1008 | var Prism = prism.exports;
1009 | const VuePrism = {
1010 |   install(Vue, options) {
1011 |     Vue.mixin({
1012 |       mounted() {
1013 |         Prism.highlightAll();
1014 |       }
1015 |     });
1016 |   }
1017 | };
1018 | export { VuePrism as V };
1019 | 


--------------------------------------------------------------------------------