]> git.immae.eu Git - github/bastienwirtz/homer.git/blob - src/components/SettingToggle.vue
Merge pull request #311 from Aryess/main
[github/bastienwirtz/homer.git] / src / components / SettingToggle.vue
1 <template>
2 <a v-on:click="toggleSetting()" class="navbar-item is-inline-block-mobile">
3 <span><i :class="['fas', 'fa-fw', value ? icon : secondaryIcon]"></i></span>
4 <slot></slot>
5 </a>
6 </template>
7
8 <script>
9 export default {
10 name: "SettingToggle",
11 props: {
12 name: String,
13 icon: String,
14 iconAlt: String,
15 defaultValue: Boolean,
16 },
17 data: function () {
18 return {
19 secondaryIcon: null,
20 value: true,
21 };
22 },
23 created: function () {
24 this.secondaryIcon = this.iconAlt || this.icon;
25
26 if (this.name in localStorage) {
27 this.value = JSON.parse(localStorage[this.name]);
28 } else {
29 this.value = this.defaultValue;
30 }
31
32 this.$emit("updated", this.value);
33 },
34 methods: {
35 toggleSetting: function () {
36 this.value = !this.value;
37 localStorage[this.name] = this.value;
38 this.$emit("updated", this.value);
39 },
40 },
41 };
42 </script>