From ffbc27b7f374664608f8f00d8779cc97290067c6 Mon Sep 17 00:00:00 2001 From: cagataycivici Date: Tue, 30 Jun 2020 17:07:01 +0300 Subject: [PATCH] Update checkbox and radio demos --- src/views/checkbox/CheckboxDemo.vue | 14 +++++------ src/views/checkbox/CheckboxDoc.vue | 30 +++++++++++------------ src/views/radiobutton/RadioButtonDemo.vue | 14 +++++------ src/views/radiobutton/RadioButtonDoc.vue | 30 +++++++++++------------ 4 files changed, 44 insertions(+), 44 deletions(-) diff --git a/src/views/checkbox/CheckboxDemo.vue b/src/views/checkbox/CheckboxDemo.vue index f49fc59dc..27f30dff5 100755 --- a/src/views/checkbox/CheckboxDemo.vue +++ b/src/views/checkbox/CheckboxDemo.vue @@ -36,11 +36,11 @@

Selected Cities : {{cities}}

Dynamic Values, Preselection, Value Binding and Disabled Option
-
- - +
+ +
-

Selected Themes: {{this.selectedThemes}}

+

Selected Categories: {{this.selectedCategories}}

@@ -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'}], - selectedThemes: [] + categories: [{name: 'Accounting', key: 'A'}, {name: 'Marketing', key: 'M'}, {name: 'Production', key: 'P'}, {name: 'Research', key: 'R'}], + selectedCategories: [] } }, created() { - this.selectedThemes = this.themes.slice(1,3); + this.selectedCategories = this.categories.slice(1,3); }, components: { 'CheckboxDoc': CheckboxDoc diff --git a/src/views/checkbox/CheckboxDoc.vue b/src/views/checkbox/CheckboxDoc.vue index 8718d5a7d..4a3e94d35 100755 --- a/src/views/checkbox/CheckboxDoc.vue +++ b/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"> - <Checkbox :id="theme.key" name="theme" :value="theme" v-model="selectedThemes" :disabled="theme.key === 'U'"/> - <label :for="theme.key">{{theme.name}}</label> +<div v-for="category of categories" :key="category.key" class="p-field-checkbox"> + <Checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"/> + <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> export default { - data() { - return { - checked: false, - cities: [], - themes: [{name: 'Apollo', key: 'A'}, {name: 'Babylon', key: 'B'}, {name: 'Serenity', key: 'S'}, {name: 'Ultima', key: 'U'}], - selectedThemes: [] - } - }, - created() { - this.selectedThemes = this.themes.slice(1,3); - } + data() { + return { + checked: false, + cities: [], + categories: [{name: 'Accounting', key: 'A'}, {name: 'Marketing', key: 'M'}, {name: 'Production', key: 'P'}, {name: 'Research', key: 'R'}], + selectedCategories: [] + } + }, + created() { + this.selectedCategories = this.categories.slice(1,3); + } } diff --git a/src/views/radiobutton/RadioButtonDemo.vue b/src/views/radiobutton/RadioButtonDemo.vue index b9479f3f7..2dda52517 100755 --- a/src/views/radiobutton/RadioButtonDemo.vue +++ b/src/views/radiobutton/RadioButtonDemo.vue @@ -30,11 +30,11 @@

Selected City: {{this.city}}

Dynamic Values, Preselection, Value Binding and Disabled Option
-
- - +
+ +
-

Selected Theme: {{this.selectedTheme}}

+

Selected Category: {{this.selectedCategory}}

@@ -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'}], - selectedTheme: null + categories: [{name: 'Accounting', key: 'A'}, {name: 'Marketing', key: 'M'}, {name: 'Production', key: 'P'}, {name: 'Research', key: 'R'}], + selectedCategory: null } }, created() { - this.selectedTheme = this.themes[1]; + this.selectedCategory = this.categories[1]; }, components: { 'RadioButtonDoc': RadioButtonDoc diff --git a/src/views/radiobutton/RadioButtonDoc.vue b/src/views/radiobutton/RadioButtonDoc.vue index 540bdeba0..89f5d58aa 100755 --- a/src/views/radiobutton/RadioButtonDoc.vue +++ b/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> -<div v-for="theme of themes" :key="theme.key" class="p-field-radiobutton"> - <RadioButton :id="theme.key" name="theme" :value="theme" v-model="selectedTheme" :disabled="theme.key === 'U'" /> - <label :for="theme.key">{{theme.name}}</label> +<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5> +<div v-for="category of categories" :key="category.key" class="p-field-radiobutton"> + <RadioButton :id="category.key" name="category" :value="category" v-model="selectedCategory" :disabled="category.key === 'R'" /> + <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> export default { - data() { - return { - city: null, - themes: [{name: 'Apollo', key: 'A'}, {name: 'Babylon', key: 'B'}, {name: 'Serenity', key: 'S'}, {name: 'Ultima', key: 'U'}], - selectedTheme: null - } - }, - created() { - this.selectedTheme = this.themes[1]; - } + data() { + return { + city: null, + categories: [{name: 'Accounting', key: 'A'}, {name: 'Marketing', key: 'M'}, {name: 'Production', key: 'P'}, {name: 'Research', key: 'R'}], + selectedCategory: null + } + }, + created() { + this.selectedCategory = this.categories[1]; + } }