vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Checkbox rtl demo updates

pull/6620/head^2
tugcekucukoglu 2024-10-24 17:45:31 +03:00
parent 3317ebbb23
commit 3fef2836e2
3 changed files with 69 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/showcase/doc/checkbox/DynamicDoc.vue
View File

@ -4,9 +4,9 @@
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<div v-for="category of categories" :key="category.key" class="flex items-center"> <div v-for="category of categories" :key="category.key" class="flex items-center gap-2">
<Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" /> <Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
<label :for="category.key" class="ml-2">{{ category.name }}</label> <label :for="category.key">{{ category.name }}</label>
</div> </div>
</div> </div>
</div> </div>
@ -26,7 +26,7 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<div v-for="category of categories" :key="category.key" class="flex items-center"> <div v-for="category of categories" :key="category.key" class="flex items-center gap-2">
<Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" /> <Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
<label :for="category.key">{{ category.name }}</label> <label :for="category.key">{{ category.name }}</label>
</div> </div>
@ -35,7 +35,7 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<div v-for="category of categories" :key="category.key" class="flex items-center"> <div v-for="category of categories" :key="category.key" class="flex items-center gap-2">
<Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" /> <Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
<label :for="category.key">{{ category.name }}</label> <label :for="category.key">{{ category.name }}</label>
</div> </div>
@ -63,7 +63,7 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<div v-for="category of categories" :key="category.key" class="flex items-center"> <div v-for="category of categories" :key="category.key" class="flex items-center gap-2">
<Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" /> <Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
<label :for="category.key">{{ category.name }}</label> <label :for="category.key">{{ category.name }}</label>
</div> </div>

64
apps/showcase/doc/checkbox/FormsDoc.vue
View File

@ -6,21 +6,21 @@
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<CheckboxGroup name="checkbox" class="flex flex-wrap gap-4"> <CheckboxGroup name="checkbox" class="flex flex-wrap gap-4">
<div class="flex items-center"> <div class="flex items-center gap-2">
<Checkbox inputId="cheese" value="Cheese" /> <Checkbox inputId="cheese" value="Cheese" />
<label for="cheese" class="ml-2"> Cheese </label> <label for="cheese"> Cheese </label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<Checkbox inputId="mushroom" value="Mushroom" /> <Checkbox inputId="mushroom" value="Mushroom" />
<label for="mushroom" class="ml-2"> Mushroom </label> <label for="mushroom"> Mushroom </label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<Checkbox inputId="pepper" value="Pepper" /> <Checkbox inputId="pepper" value="Pepper" />
<label for="pepper" class="ml-2"> Pepper </label> <label for="pepper"> Pepper </label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<Checkbox inputId="onion" value="Onion" /> <Checkbox inputId="onion" value="Onion" />
<label for="onion" class="ml-2"> Onion </label> <label for="onion"> Onion </label>
</div> </div>
</CheckboxGroup> </CheckboxGroup>
@ -52,21 +52,21 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<CheckboxGroup name="checkbox" class="flex flex-wrap gap-4"> <CheckboxGroup name="checkbox" class="flex flex-wrap gap-4">
<div class="flex items-center"> <div class="flex items-center gap-2">
<Checkbox inputId="cheese" value="Cheese" /> <Checkbox inputId="cheese" value="Cheese" />
<label for="cheese" class="ml-2"> Cheese </label> <label for="cheese"> Cheese </label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<Checkbox inputId="mushroom" value="Mushroom" /> <Checkbox inputId="mushroom" value="Mushroom" />
<label for="mushroom" class="ml-2"> Mushroom </label> <label for="mushroom"> Mushroom </label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<Checkbox inputId="pepper" value="Pepper" /> <Checkbox inputId="pepper" value="Pepper" />
<label for="pepper" class="ml-2"> Pepper </label> <label for="pepper"> Pepper </label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<Checkbox inputId="onion" value="Onion" /> <Checkbox inputId="onion" value="Onion" />
<label for="onion" class="ml-2"> Onion </label> <label for="onion"> Onion </label>
</div> </div>
</CheckboxGroup> </CheckboxGroup>
@ -81,21 +81,21 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<CheckboxGroup name="checkbox" class="flex flex-wrap gap-4"> <CheckboxGroup name="checkbox" class="flex flex-wrap gap-4">
<div class="flex items-center"> <div class="flex items-center gap-2">
<Checkbox inputId="cheese" value="Cheese" /> <Checkbox inputId="cheese" value="Cheese" />
<label for="cheese" class="ml-2"> Cheese </label> <label for="cheese"> Cheese </label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<Checkbox inputId="mushroom" value="Mushroom" /> <Checkbox inputId="mushroom" value="Mushroom" />
<label for="mushroom" class="ml-2"> Mushroom </label> <label for="mushroom"> Mushroom </label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<Checkbox inputId="pepper" value="Pepper" /> <Checkbox inputId="pepper" value="Pepper" />
<label for="pepper" class="ml-2"> Pepper </label> <label for="pepper"> Pepper </label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<Checkbox inputId="onion" value="Onion" /> <Checkbox inputId="onion" value="Onion" />
<label for="onion" class="ml-2"> Onion </label> <label for="onion"> Onion </label>
</div> </div>
</CheckboxGroup> </CheckboxGroup>
@ -141,21 +141,21 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<CheckboxGroup name="checkbox" class="flex flex-wrap gap-4"> <CheckboxGroup name="checkbox" class="flex flex-wrap gap-4">
<div class="flex items-center"> <div class="flex items-center gap-2">
<Checkbox inputId="cheese" value="Cheese" /> <Checkbox inputId="cheese" value="Cheese" />
<label for="cheese" class="ml-2"> Cheese </label> <label for="cheese"> Cheese </label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<Checkbox inputId="mushroom" value="Mushroom" /> <Checkbox inputId="mushroom" value="Mushroom" />
<label for="mushroom" class="ml-2"> Mushroom </label> <label for="mushroom"> Mushroom </label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<Checkbox inputId="pepper" value="Pepper" /> <Checkbox inputId="pepper" value="Pepper" />
<label for="pepper" class="ml-2"> Pepper </label> <label for="pepper"> Pepper </label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<Checkbox inputId="onion" value="Onion" /> <Checkbox inputId="onion" value="Onion" />
<label for="onion" class="ml-2"> Onion </label> <label for="onion"> Onion </label>
</div> </div>
</CheckboxGroup> </CheckboxGroup>

64
apps/showcase/doc/checkbox/GroupDoc.vue
View File

@ -3,21 +3,21 @@
<p>Multiple checkboxes can be grouped together.</p> <p>Multiple checkboxes can be grouped together.</p>
</DocSectionText> </DocSectionText>
<div class="card flex flex-wrap justify-center gap-4"> <div class="card flex flex-wrap justify-center gap-4">
<div class="flex items-center"> <div class="flex items-center gap-2">
<Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" /> <Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
<label for="ingredient1" class="ml-2"> Cheese </label> <label for="ingredient1"> Cheese </label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" /> <Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
<label for="ingredient2" class="ml-2"> Mushroom </label> <label for="ingredient2"> Mushroom </label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" /> <Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
<label for="ingredient3" class="ml-2"> Pepper </label> <label for="ingredient3"> Pepper </label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" /> <Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
<label for="ingredient4" class="ml-2"> Onion </label> <label for="ingredient4"> Onion </label>
</div> </div>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -31,42 +31,42 @@ export default {
code: { code: {
basic: ` basic: `
<div class="card flex flex-wrap justify-center gap-4"> <div class="card flex flex-wrap justify-center gap-4">
<div class="flex items-center"> <div class="flex items-center gap-2">
<Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" /> <Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
<label for="ingredient1" class="ml-2"> Cheese </label> <label for="ingredient1"> Cheese </label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" /> <Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
<label for="ingredient2" class="ml-2"> Mushroom </label> <label for="ingredient2"> Mushroom </label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" /> <Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
<label for="ingredient3" class="ml-2"> Pepper </label> <label for="ingredient3"> Pepper </label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" /> <Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
<label for="ingredient4" class="ml-2"> Onion </label> <label for="ingredient4"> Onion </label>
</div> </div>
</div> </div>
`, `,
options: ` options: `
<template> <template>
<div class="card flex flex-wrap justify-center gap-4"> <div class="card flex flex-wrap justify-center gap-4">
<div class="flex items-center"> <div class="flex items-center gap-2">
<Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" /> <Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
<label for="ingredient1" class="ml-2"> Cheese </label> <label for="ingredient1"> Cheese </label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" /> <Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
<label for="ingredient2" class="ml-2"> Mushroom </label> <label for="ingredient2"> Mushroom </label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" /> <Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
<label for="ingredient3" class="ml-2"> Pepper </label> <label for="ingredient3"> Pepper </label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" /> <Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
<label for="ingredient4" class="ml-2"> Onion </label> <label for="ingredient4"> Onion </label>
</div> </div>
</div> </div>
</template> </template>
@ -84,21 +84,21 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex flex-wrap justify-center gap-4"> <div class="card flex flex-wrap justify-center gap-4">
<div class="flex items-center"> <div class="flex items-center gap-2">
<Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" /> <Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
<label for="ingredient1" class="ml-2"> Cheese </label> <label for="ingredient1"> Cheese </label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" /> <Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
<label for="ingredient2" class="ml-2"> Mushroom </label> <label for="ingredient2"> Mushroom </label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" /> <Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
<label for="ingredient3" class="ml-2"> Pepper </label> <label for="ingredient3"> Pepper </label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" /> <Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
<label for="ingredient4" class="ml-2"> Onion </label> <label for="ingredient4"> Onion </label>
</div> </div>
</div> </div>
</template> </template>