responsive menus

assets/src/components/ASwitch.vue

@@ -0,0 +1,75 @@
+<template>
+    <button :title="ariaLabel"
+            :aria-label="ariaLabel || label" :aria-description="ariaDescription"
+            @click="toggle" :class="buttonClass">
+        <slot name="default" :active="active">
+            <span class="icon">
+                <i :class="icon"></i>
+            </span>
+            <label v-if="label">{{ label }}</label>
+        </slot>
+    </button>
+</template>
+<script>
+export default {
+    props: {
+        initialActive: {type: Boolean, default: null},
+        el: {type: String, default: ""},
+        label: {type: String, default: ""},
+        icon: {type: String, default: "fa fa-bars"},
+        ariaLabel: {type: String, default: ""},
+        ariaDescription: {type: String, default: ""},
+        activeClass: {type: String, default:"active"},
+        /// switch toggle of all items of this group.
+        group: {type: String, default: ""},
+    },
+
+    data() {
+        return {
+            active: this.initialActive,
+        }
+    },
+
+    computed: {
+        groupClass() {
+            return this.group && "a-switch-" + this.group || ''
+        },
+
+        buttonClass() {
+            return [
+                this.active && 'active' || '',
+                this.groupClass
+            ]
+        }
+    },
+
+    methods: {
+        toggle() {
+            this.set(!this.active)
+        },
+
+        set(active) {
+            const el = document.querySelector(this.el)
+            if(active)
+                el.classList.add(this.activeClass)
+            else
+                el.classList.remove(this.activeClass)
+            this.active = active
+            if(active)
+                this.resetGroup()
+        },
+
+        resetGroup() {
+            const els = document.querySelectorAll("." + this.groupClass)
+            for(var el of els)
+                if(el != this.$el)
+                    el.__vnode.ctx.ctx.set(false)
+        },
+    },
+
+    mounted() {
+        if(this.initialActive !== null)
+            this.set(this.initialActive)
+    },
+}
+</script>

assets/src/components/index.js

@@ -9,6 +9,7 @@ import APlaylist from './APlaylist.vue'
 import APlaylistEditor from './APlaylistEditor.vue'
 import AProgress from './AProgress.vue'
 import ASoundItem from './ASoundItem.vue'
+import ASwitch from './ASwitch.vue'
 import AStatistics from './AStatistics.vue'
 import AStreamer from './AStreamer.vue'
 
@@ -17,7 +18,7 @@ import AStreamer from './AStreamer.vue'
  */
 export const base = {
     AAutocomplete, ACarousel, ADropdown, AEpisode, AList, APage, APlayer, APlaylist,
-    AProgress, ASoundItem,
+    AProgress, ASoundItem, ASwitch
 }
 
 export default base