⚡ Radio button component accepts object input for options

src/components/FormElements/Radio.vue

@@ -2,15 +2,15 @@
   <div class="radio-container">
     <label v-if="label" class="radio-label">{{ label }}</label>
     <div class="radio-wrapper">
-      <div v-for="radio in options" :key="radio" class="radio-option">
-        <label :for="`id-${radio}`" class="option-label">{{ radio }}</label>
-        <input
-          :value="radio"
-          :id=" `id-${radio}`"
-          v-model="selectedRadio"
-          type="radio"
+      <div v-for="radio in options" :key="radio.value"
+        :class="`radio-option ${disabled ? 'wrap-disabled' : ''}`">
+        <label :for="`id-${radio.value}`" class="option-label">{{ radio.label }}</label>
+        <input type="radio" class="radio-input"
+          :id=" `id-${radio.value}`"
           :name="makeGroupName"
-          class="radio-input"
+          :value="radio.value"
+          :disabled="disabled || radio.disabled"
+          v-model="selectedRadio"
           v-on:input="updateValue($event.target.value)"
         />
       </div>
@@ -25,10 +25,11 @@ export default {
   name: 'Radio',
   components: {},
   props: {
-    options: Array, // Array of available options
+    options: Array, // Array of objects for available options
     initialOption: String, // Optional default option
     label: String, // Form label for element
     description: String, // Optional description text
+    disabled: Boolean, // Disable all radio buttons
   },
   data() {
     return {
@@ -91,9 +92,12 @@ div.radio-container {
       cursor: pointer;
       border: 1px solid transparent;
       border-radius: var(--curve-factor);
-      &:hover {
+      &:hover:not(.wrap-disabled) {
         border: 1px solid var(--primary);
       }
+      &:disabled {
+        opacity: var(--dimming-factor);
+      }
       label.option-label, input.radio-input {
         cursor: pointer;
         text-transform: capitalize;

src/components/InteractiveEditor/EditItem.vue

@@ -32,7 +32,7 @@
         v-model="formData[index].value"
         :description="row.description"
         :label="row.title || row.name"
-        :options="['true', 'false']"
+        :options="[ ...boolRadioOptions ]"
         :initialOption="boolToStr(formData[index].value)"
       />
       <!-- Select/ dropdown for enum multiple-choice input -->
@@ -90,6 +90,10 @@ export default {
       formData: [], // Array of form fields
       additionalFormData: [], // Array of not-yet-used form fields
       item: {},
+      boolRadioOptions: [
+        { label: 'true', value: 'true' },
+        { label: 'false', value: 'false' },
+      ],
     };
   },
   props: {

src/components/InteractiveEditor/MoveItemTo.vue

@@ -9,7 +9,7 @@
       <!-- Radio, for move or copy -->
       <Radio
         v-model="operation"
-        :options="['Move', 'Copy']"
+        :options="operationRadioOptions"
         label="Operation Type"
         :initialOption="operation"
       />
@@ -23,7 +23,7 @@
       <!-- Radio, for choosing append to beginning or end -->
       <Radio
         v-model="appendTo"
-        :options="['Begining', 'End']"
+        :options="appendToRadioOptions"
         label="Append To"
         :initialOption="appendTo"
       />
@@ -54,9 +54,17 @@ export default {
   data() {
     return {
       selectedSection: '',
-      operation: 'Move',
-      appendTo: 'End',
+      operation: 'move',
+      appendTo: 'end',
       modalName: `${modalNames.MOVE_ITEM_TO}-${this.itemId}`,
+      operationRadioOptions: [
+        { label: 'Move', value: 'move' },
+        { label: 'Copy', value: 'copy' },
+      ],
+      appendToRadioOptions: [
+        { label: 'Beginning', value: 'beginning' },
+        { label: 'End', value: 'end' },
+      ],
     };
   },
   computed: {
@@ -86,7 +94,7 @@ export default {
       const copyPayload = { item, toSection: this.selectedSection, appendTo: this.appendTo };
       this.$store.commit(StoreKeys.COPY_ITEM, copyPayload);
       // Remove item from previous section
-      if (this.operation === 'Move') {
+      if (this.operation === 'move') {
         const payload = { itemId: this.itemId, sectionName: this.currentSection };
         this.$store.commit(StoreKeys.REMOVE_ITEM, payload);
       }