[github/bastienwirtz/homer.git] / src / components / SettingToggle.vue

<template>
  <a v-on:click="toggleSetting()" class="navbar-item is-inline-block-mobile">
    <span><i :class="['fas', 'fa-fw', value ? icon : secondaryIcon]"></i></span>
    <slot></slot>
  </a>
</template>

<script>
export default {
  name: "SettingToggle",
  props: {
    name: String,
    icon: String,
    iconAlt: String,
  },
  data: function () {
    return {
      secondaryIcon: null,
      value: true,
    };
  },
  created: function () {
    this.secondaryIcon = this.iconAlt || this.icon;

    if (this.name in localStorage) {
      this.value = JSON.parse(localStorage[this.name]);
    }

    this.$emit("updated", this.value);
  },
  methods: {
    toggleSetting: function () {
      this.value = !this.value;
      localStorage[this.name] = this.value;
      this.$emit("updated", this.value);
    },
  },
};
</script>
Commit	Line	Data
	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	},
	16	data: function () {
	17	return {
	18	secondaryIcon: null,
	19	value: true,
	20	};
	21	},
	22	created: function () {
	23	this.secondaryIcon = this.iconAlt \|\| this.icon;
	24
	25	if (this.name in localStorage) {
	26	this.value = JSON.parse(localStorage[this.name]);
	27	}
	28
	29	this.$emit("updated", this.value);
	30	},
	31	methods: {
	32	toggleSetting: function () {
	33	this.value = !this.value;
	34	localStorage[this.name] = this.value;
	35	this.$emit("updated", this.value);
	36	},
	37	},
	38	};
	39	</script>