Skip to content

Commit

Permalink
RadioButton rtl demo updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@tugcekucukoglu
tugcekucukoglu committed Oct 24, 2024
1 parent 2fc2928 commit caab6a6
Show file tree
Hide file tree
Showing 3 changed files with 72 additions and 72 deletions.
16 changes: 8 additions & 8 deletions apps/showcase/doc/radiobutton/DynamicDoc.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
</DocSectionText>
<div class="card flex justify-center">
<div class="flex flex-col gap-4">
<div v-for="category in categories" :key="category.key" class="flex items-center">
<div v-for="category in categories" :key="category.key" class="flex items-center gap-2">
<RadioButton v-model="selectedCategory" :inputId="category.key" name="dynamic" :value="category.name" />
<label :for="category.key" class="ml-2">{{ category.name }}</label>
<label :for="category.key">{{ category.name }}</label>
</div>
</div>
</div>
Expand All @@ -26,18 +26,18 @@ export default {
selectedCategory: 'Production',
code: {
basic: `
<div v-for="category in categories" :key="category.key" class="flex items-center">
<div v-for="category in categories" :key="category.key" class="flex items-center gap-2">
<RadioButton v-model="selectedCategory" :inputId="category.key" name="dynamic" :value="category.name" />
<label :for="category.key" class="ml-2">{{ category.name }}</label>
<label :for="category.key">{{ category.name }}</label>
</div>
`,
options: `
<template>
<div class="card flex justify-center">
<div class="flex flex-col gap-4">
<div v-for="category in categories" :key="category.key" class="flex items-center">
<div v-for="category in categories" :key="category.key" class="flex items-center gap-2">
<RadioButton v-model="selectedCategory" :inputId="category.key" name="dynamic" :value="category.name" />
<label :for="category.key" class="ml-2">{{ category.name }}</label>
<label :for="category.key">{{ category.name }}</label>
</div>
</div>
</div>
Expand All @@ -63,9 +63,9 @@ export default {
<template>
<div class="card flex justify-center">
<div class="flex flex-col gap-4">
<div v-for="category in categories" :key="category.key" class="flex items-center">
<div v-for="category in categories" :key="category.key" class="flex items-center gap-2">
<RadioButton v-model="selectedCategory" :inputId="category.key" name="dynamic" :value="category.name" />
<label :for="category.key" class="ml-2">{{ category.name }}</label>
<label :for="category.key">{{ category.name }}</label>
</div>
</div>
</div>
Expand Down
64 changes: 32 additions & 32 deletions apps/showcase/doc/radiobutton/FormsDoc.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,21 @@
<div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<RadioButtonGroup name="radiobutton" class="flex flex-wrap gap-4">
<div class="flex items-center">
<div class="flex items-center gap-2">
<RadioButton inputId="ingredient1" value="Cheese" />
<label for="ingredient1" class="ml-2">Cheese</label>
<label for="ingredient1">Cheese</label>
</div>
<div class="flex items-center">
<div class="flex items-center gap-2">
<RadioButton inputId="ingredient2" value="Mushroom" />
<label for="ingredient2" class="ml-2">Mushroom</label>
<label for="ingredient2">Mushroom</label>
</div>
<div class="flex items-center">
<div class="flex items-center gap-2">
<RadioButton inputId="ingredient3" value="Pepper" />
<label for="ingredient3" class="ml-2">Pepper</label>
<label for="ingredient3">Pepper</label>
</div>
<div class="flex items-center">
<div class="flex items-center gap-2">
<RadioButton inputId="ingredient4" value="Onion" />
<label for="ingredient4" class="ml-2">Onion</label>
<label for="ingredient4">Onion</label>
</div>
</RadioButtonGroup>
<Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message>
Expand Down Expand Up @@ -48,21 +48,21 @@ export default {
basic: `
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<RadioButtonGroup name="radiobutton" class="flex flex-wrap gap-4">
<div class="flex items-center">
<div class="flex items-center gap-2">
<RadioButton inputId="ingredient1" value="Cheese" />
<label for="ingredient1" class="ml-2">Cheese</label>
<label for="ingredient1">Cheese</label>
</div>
<div class="flex items-center">
<div class="flex items-center gap-2">
<RadioButton inputId="ingredient2" value="Mushroom" />
<label for="ingredient2" class="ml-2">Mushroom</label>
<label for="ingredient2">Mushroom</label>
</div>
<div class="flex items-center">
<div class="flex items-center gap-2">
<RadioButton inputId="ingredient3" value="Pepper" />
<label for="ingredient3" class="ml-2">Pepper</label>
<label for="ingredient3">Pepper</label>
</div>
<div class="flex items-center">
<div class="flex items-center gap-2">
<RadioButton inputId="ingredient4" value="Onion" />
<label for="ingredient4" class="ml-2">Onion</label>
<label for="ingredient4">Onion</label>
</div>
</RadioButtonGroup>
<Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message>
Expand All @@ -74,21 +74,21 @@ export default {
<div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<RadioButtonGroup name="radiobutton" class="flex flex-wrap gap-4">
<div class="flex items-center">
<div class="flex items-center gap-2">
<RadioButton inputId="ingredient1" value="Cheese" />
<label for="ingredient1" class="ml-2">Cheese</label>
<label for="ingredient1">Cheese</label>
</div>
<div class="flex items-center">
<div class="flex items-center gap-2">
<RadioButton inputId="ingredient2" value="Mushroom" />
<label for="ingredient2" class="ml-2">Mushroom</label>
<label for="ingredient2">Mushroom</label>
</div>
<div class="flex items-center">
<div class="flex items-center gap-2">
<RadioButton inputId="ingredient3" value="Pepper" />
<label for="ingredient3" class="ml-2">Pepper</label>
<label for="ingredient3">Pepper</label>
</div>
<div class="flex items-center">
<div class="flex items-center gap-2">
<RadioButton inputId="ingredient4" value="Onion" />
<label for="ingredient4" class="ml-2">Onion</label>
<label for="ingredient4">Onion</label>
</div>
</RadioButtonGroup>
<Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message>
Expand Down Expand Up @@ -130,21 +130,21 @@ export default {
<div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<RadioButtonGroup name="radiobutton" class="flex flex-wrap gap-4">
<div class="flex items-center">
<div class="flex items-center gap-2">
<RadioButton inputId="ingredient1" value="Cheese" />
<label for="ingredient1" class="ml-2">Cheese</label>
<label for="ingredient1">Cheese</label>
</div>
<div class="flex items-center">
<div class="flex items-center gap-2">
<RadioButton inputId="ingredient2" value="Mushroom" />
<label for="ingredient2" class="ml-2">Mushroom</label>
<label for="ingredient2">Mushroom</label>
</div>
<div class="flex items-center">
<div class="flex items-center gap-2">
<RadioButton inputId="ingredient3" value="Pepper" />
<label for="ingredient3" class="ml-2">Pepper</label>
<label for="ingredient3">Pepper</label>
</div>
<div class="flex items-center">
<div class="flex items-center gap-2">
<RadioButton inputId="ingredient4" value="Onion" />
<label for="ingredient4" class="ml-2">Onion</label>
<label for="ingredient4">Onion</label>
</div>
</RadioButtonGroup>
<Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message>
Expand Down
64 changes: 32 additions & 32 deletions apps/showcase/doc/radiobutton/GroupDoc.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,21 @@
</DocSectionText>
<div class="card flex justify-center">
<div class="flex flex-wrap gap-4">
<div class="flex items-center">
<div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" />
<label for="ingredient1" class="ml-2">Cheese</label>
<label for="ingredient1">Cheese</label>
</div>
<div class="flex items-center">
<div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" />
<label for="ingredient2" class="ml-2">Mushroom</label>
<label for="ingredient2">Mushroom</label>
</div>
<div class="flex items-center">
<div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" />
<label for="ingredient3" class="ml-2">Pepper</label>
<label for="ingredient3">Pepper</label>
</div>
<div class="flex items-center">
<div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
<label for="ingredient4" class="ml-2">Onion</label>
<label for="ingredient4">Onion</label>
</div>
</div>
</div>
Expand All @@ -33,43 +33,43 @@ export default {
code: {
basic: `
<div class="flex flex-wrap gap-4">
<div class="flex items-center">
<div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" />
<label for="ingredient1" class="ml-2">Cheese</label>
<label for="ingredient1">Cheese</label>
</div>
<div class="flex items-center">
<div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" />
<label for="ingredient2" class="ml-2">Mushroom</label>
<label for="ingredient2">Mushroom</label>
</div>
<div class="flex items-center">
<div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" />
<label for="ingredient3" class="ml-2">Pepper</label>
<label for="ingredient3">Pepper</label>
</div>
<div class="flex items-center">
<div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
<label for="ingredient4" class="ml-2">Onion</label>
<label for="ingredient4">Onion</label>
</div>
</div>
`,
options: `
<template>
<div class="card flex justify-center">
<div class="flex flex-wrap gap-4">
<div class="flex items-center">
<div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" />
<label for="ingredient1" class="ml-2">Cheese</label>
<label for="ingredient1">Cheese</label>
</div>
<div class="flex items-center">
<div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" />
<label for="ingredient2" class="ml-2">Mushroom</label>
<label for="ingredient2">Mushroom</label>
</div>
<div class="flex items-center">
<div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" />
<label for="ingredient3" class="ml-2">Pepper</label>
<label for="ingredient3">Pepper</label>
</div>
<div class="flex items-center">
<div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
<label for="ingredient4" class="ml-2">Onion</label>
<label for="ingredient4">Onion</label>
</div>
</div>
</div>
Expand All @@ -89,21 +89,21 @@ export default {
<template>
<div class="card flex justify-center">
<div class="flex flex-wrap gap-4">
<div class="flex items-center">
<div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" />
<label for="ingredient1" class="ml-2">Cheese</label>
<label for="ingredient1">Cheese</label>
</div>
<div class="flex items-center">
<div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" />
<label for="ingredient2" class="ml-2">Mushroom</label>
<label for="ingredient2">Mushroom</label>
</div>
<div class="flex items-center">
<div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" />
<label for="ingredient3" class="ml-2">Pepper</label>
<label for="ingredient3">Pepper</label>
</div>
<div class="flex items-center">
<div class="flex items-center gap-2">
<RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
<label for="ingredient4" class="ml-2">Onion</label>
<label for="ingredient4">Onion</label>
</div>
</div>
</div>
Expand Down

0 comments on commit caab6a6

Please sign in to comment.