Update checkbox and radio demos

src/views/checkbox/CheckboxDemo.vue

@@ -36,11 +36,11 @@
                 <p>Selected Cities : <span style="font-weight: bold">{{cities}}</span></p>
 
                 <h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
-                <div v-for="theme of themes" :key="theme.key" class="p-field-checkbox">
+                <div v-for="category of categories" :key="category.key" class="p-field-checkbox">
-                    <Checkbox :id="theme.key" name="theme" :value="theme" v-model="selectedThemes" :disabled="theme.key === 'U'"/>
+                    <Checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"/>
-                    <label :for="theme.key">{{theme.name}}</label>
+                    <label :for="category.key">{{category.name}}</label>
                 </div>
-                <p>Selected Themes: <span style="font-weight: bold">{{this.selectedThemes}}</span></p>
+                <p>Selected Categories: <span style="font-weight: bold">{{this.selectedCategories}}</span></p>
             </div>
         </div>
 
@@ -56,12 +56,12 @@ export default {
         return {
             checked: false,
             cities: [],
-            themes: [{name: 'Apollo', key: 'A'}, {name: 'Babylon', key: 'B'}, {name: 'Serenity', key: 'S'}, {name: 'Ultima', key: 'U'}],
+            categories: [{name: 'Accounting', key: 'A'}, {name: 'Marketing', key: 'M'}, {name: 'Production', key: 'P'}, {name: 'Research', key: 'R'}],
-            selectedThemes: []
+            selectedCategories: []
         }
     },
     created() {
-        this.selectedThemes = this.themes.slice(1,3);
+        this.selectedCategories = this.categories.slice(1,3);
     },
     components: {
         'CheckboxDoc': CheckboxDoc

src/views/checkbox/CheckboxDoc.vue

@@ -171,27 +171,27 @@ export default {
 <p>Selected Cities : <span style="font-weight: bold">{{cities}}</span></p>
 
 <h3>Dynamic Values, Preselection, Value Binding and Disabled Option</h3>
-<div v-for="theme of themes" :key="theme.key" class="p-field-checkbox">
+<div v-for="category of categories" :key="category.key" class="p-field-checkbox">
-    <Checkbox :id="theme.key" name="theme" :value="theme" v-model="selectedThemes" :disabled="theme.key === 'U'"/>
+    <Checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"/>
-    <label :for="theme.key">{{theme.name}}</label>
+    <label :for="category.key">{{category.name}}</label>
 </div>
-<p>Selected Themes: <span style="font-weight: bold">{{this.selectedThemes}}</span></p>
+<p>Selected Categories: <span style="font-weight: bold">{{this.selectedCategories}}</span></p>
 </template>
 </CodeHighlight>
 
 <CodeHighlight lang="javascript">
 export default {
-	data() {
+    data() {
-		return {
+        return {
-			checked: false,
+            checked: false,
-			cities: [],
+            cities: [],
-			themes: [{name: 'Apollo', key: 'A'}, {name: 'Babylon', key: 'B'}, {name: 'Serenity', key: 'S'}, {name: 'Ultima', key: 'U'}],
+            categories: [{name: 'Accounting', key: 'A'}, {name: 'Marketing', key: 'M'}, {name: 'Production', key: 'P'}, {name: 'Research', key: 'R'}],
-			selectedThemes: []
+            selectedCategories: []
-		}
+        }
-	},
+    },
-	created() {
+    created() {
-		this.selectedThemes = this.themes.slice(1,3);
+        this.selectedCategories = this.categories.slice(1,3);
-	}
+    }
 }
 </CodeHighlight>
 			</TabPanel>

src/views/radiobutton/RadioButtonDemo.vue

@@ -30,11 +30,11 @@
                 <p>Selected City: <span style="font-weight: bold">{{this.city}}</span></p>
 
                 <h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
-                <div v-for="theme of themes" :key="theme.key" class="p-field-radiobutton">
+                <div v-for="category of categories" :key="category.key" class="p-field-radiobutton">
-                    <RadioButton :id="theme.key" name="theme" :value="theme" v-model="selectedTheme" :disabled="theme.key === 'U'" />
+                    <RadioButton :id="category.key" name="category" :value="category" v-model="selectedCategory" :disabled="category.key === 'R'" />
-                    <label :for="theme.key">{{theme.name}}</label>
+                    <label :for="category.key">{{category.name}}</label>
                 </div>
-                <p>Selected Theme: <span style="font-weight: bold">{{this.selectedTheme}}</span></p>
+                <p>Selected Category: <span style="font-weight: bold">{{this.selectedCategory}}</span></p>
             </div>
         </div>
 
@@ -49,12 +49,12 @@ export default {
     data() {
         return {
             city: null,
-            themes: [{name: 'Apollo', key: 'A'}, {name: 'Babylon', key: 'B'}, {name: 'Serenity', key: 'S'}, {name: 'Ultima', key: 'U'}],
+            categories: [{name: 'Accounting', key: 'A'}, {name: 'Marketing', key: 'M'}, {name: 'Production', key: 'P'}, {name: 'Research', key: 'R'}],
-            selectedTheme: null
+            selectedCategory: null
         }
     },
     created() {
-        this.selectedTheme = this.themes[1];
+        this.selectedCategory = this.categories[1];
     },
     components: {
         'RadioButtonDoc': RadioButtonDoc

src/views/radiobutton/RadioButtonDoc.vue

@@ -156,27 +156,27 @@ export default {
 </div>
 <p>Selected City: <span style="font-weight: bold">{{this.city}}</span></p>
 
-<h3>Dynamic Values, Preselection, Value Binding and Disabled Option</h3>
+<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
-<div v-for="theme of themes" :key="theme.key" class="p-field-radiobutton">
+<div v-for="category of categories" :key="category.key" class="p-field-radiobutton">
-    <RadioButton :id="theme.key" name="theme" :value="theme" v-model="selectedTheme" :disabled="theme.key === 'U'" />
+    <RadioButton :id="category.key" name="category" :value="category" v-model="selectedCategory" :disabled="category.key === 'R'" />
-    <label :for="theme.key">{{theme.name}}</label>
+    <label :for="category.key">{{category.name}}</label>
 </div>
-<p>Selected Theme: <span style="font-weight: bold">{{this.selectedTheme}}</span></p>
+<p>Selected Category: <span style="font-weight: bold">{{this.selectedCategory}}</span></p>
 </template>
 </CodeHighlight>
 
 <CodeHighlight lang="javascript">
 export default {
-	data() {
+    data() {
-		return {
+        return {
-			city: null,
+            city: null,
-			themes: [{name: 'Apollo', key: 'A'}, {name: 'Babylon', key: 'B'}, {name: 'Serenity', key: 'S'}, {name: 'Ultima', key: 'U'}],
+            categories: [{name: 'Accounting', key: 'A'}, {name: 'Marketing', key: 'M'}, {name: 'Production', key: 'P'}, {name: 'Research', key: 'R'}],
-			selectedTheme: null
+            selectedCategory: null
-		}
+        }
-	},
+    },
-	created() {
+    created() {
-		this.selectedTheme = this.themes[1];
+        this.selectedCategory = this.categories[1];
-	}
+    }
 }
 </CodeHighlight>
 			</TabPanel>