Merge ButtonOnOff and ButtonOnOffCustom into ToggleButton

javascripts/components/reality/glyphs/glyph-levels-and-weights.js

@@ -1,12 +1,12 @@
 import "../../common/ad-slider-component.js";
-import ButtonOnOff from "@/components/ButtonOnOff";
+import ToggleButton from "@/components/ToggleButton";
 
 // The things inside player.celestials.effarig.glyphWeights
 const _GLYPH_WEIGHT_FIELDS = ["ep", "repl", "dt", "eternities"];
 
 Vue.component("glyph-levels-and-weights", {
   components: {
-    ButtonOnOff
+    ToggleButton
   },
   data() {
     return {
@@ -323,11 +323,11 @@ Vue.component("glyph-levels-and-weights", {
           </div>
         </div>
         <div class="l-glyph-levels-and-weights__adjust-auto">
-          <ButtonOnOff
+          <ToggleButton
             v-if="showAutoAdjustWeights"
             v-model="isAutoAdjustWeightsOn"
             class="c-glyph-levels-and-weights__auto-btn"
-            text="Auto adjustment:"
+            label="Auto adjustment:"
           />
         </div>
         <div class="l-glyph-levels-and-weights__slider" :style="rowStyle('ep')">

javascripts/components/reality/glyphs/sidebar/glyph-autosort-button-group.js

@@ -1,9 +1,9 @@
-import ButtonOnOff from "@/components/ButtonOnOff";
+import ToggleButton from "@/components/ToggleButton";
 import ButtonCycle from "@/components/ButtonCycle";
 
 Vue.component("glyph-autosort-button-group", {
   components: {
-    ButtonOnOff,
+    ToggleButton,
     ButtonCycle
   },
   data() {
@@ -57,16 +57,16 @@ Vue.component("glyph-autosort-button-group", {
         text="Auto-sort Mode:"
         :labels="sortModes"
       />
-      <ButtonOnOff
+      <ToggleButton
         v-model="autoCollapse"
         class="c-glyph-inventory-option"
-        text="Auto-collapse space:"
+        label="Auto-collapse space:"
       />
-      <ButtonOnOff
+      <ToggleButton
         v-if="showAutoAutoClean"
         v-model="autoAutoClean"
         class="c-glyph-inventory-option"
-        text="Auto Purge on Realities:"
+        label="Auto Purge on Realities:"
       />
     </div>`
 });

javascripts/components/reality/glyphs/sidebar/glyph-protected-row-button-group.js

@@ -1,8 +1,8 @@
-import ButtonOnOff from "@/components/ButtonOnOff";
+import ToggleButton from "@/components/ToggleButton";
 
 Vue.component("glyph-protected-row-button-group", {
   components: {
-    ButtonOnOff
+    ToggleButton
   },
   data() {
     return {
@@ -52,10 +52,10 @@ Vue.component("glyph-protected-row-button-group", {
       >
         Remove a protected row
       </button>
-      <ButtonOnOff
+      <ToggleButton
         v-model="moveGlyphs"
         class="c-glyph-inventory-option"
-        text="Move Glyphs on changing row count:"
+        label="Move Glyphs on changing row count:"
       />
     </div>`
 });

javascripts/components/reality/glyphs/sidebar/glyph-set-save-panel.js

@@ -1,9 +1,9 @@
 import "../glyph-set-preview.js";
-import ButtonOnOffCustom from "@/components/ButtonOnOffCustom";
+import ToggleButton from "@/components/ToggleButton";
 
 Vue.component("glyph-set-save-panel", {
   components: {
-    ButtonOnOffCustom
+    ToggleButton
   },
   data() {
     return {
@@ -97,23 +97,26 @@ Vue.component("glyph-set-save-panel", {
         <button class="c-glyph-set-save-setting-button c-glyph-set-save-setting-button--disabled">
           Type: Exact (always)
         </button>
-        <ButtonOnOffCustom
+        <ToggleButton
           class="c-glyph-set-save-setting-button"
           v-model="effects"
-          on="Effects: Including"
-          off="Effects: Exact"
+          label="Effects:"
+          on="Including"
+          off="Exact"
         />
-        <ButtonOnOffCustom
+        <ToggleButton
           class="c-glyph-set-save-setting-button"
           v-model="level"
-          on="Level: Increased"
-          off="Level: Exact"
+          label="Level:"
+          on="Increased"
+          off="Exact"
         />
-        <ButtonOnOffCustom
+        <ToggleButton
           class="c-glyph-set-save-setting-button"
           v-model="rarity"
-          on="Rarity: Increased"
-          off="Rarity: Exact"
+          label="Rarity:"
+          on="Increased"
+          off="Exact"
         />
       </div>
       Your saved Glyph sets:

src/components/ButtonOnOffCustom.vue

@@ -1,28 +0,0 @@
-<script>
-export default {
-  props: {
-    on: {
-      type: String,
-      required: true
-    },
-    off: {
-      type: String,
-      required: true
-    },
-    value: {
-      type: Boolean,
-      required: true
-    },
-  }
-};
-</script>
-
-<template>
-  <button
-    v-bind="$attrs"
-    @click="emitInput(!value)"
-  >
-    {{ value ? on : off }}
-  </button>
-</template>
-

src/components/ToggleButton.vue

@@ -1,9 +1,20 @@
 <script>
 export default {
   props: {
-    text: {
+    label: {
       type: String,
-      required: true
+      required: false,
+      default: ""
+    },
+    on: {
+      type: String,
+      required: false,
+      default: "ON"
+    },
+    off: {
+      type: String,
+      required: false,
+      default: "OFF"
     },
     value: {
       type: Boolean,
@@ -12,7 +23,7 @@ export default {
   },
   computed: {
     displayText() {
-      return `${this.text} ${this.value ? "ON" : "OFF"}`.trim();
+      return `${this.label} ${this.value ? this.on : this.off}`.trim();
     }
   },
 };