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

RadioButton, Rating, SelectButton, Slider unstyled demo updates

pull/4224/head
Tuğçe Küçükoğlu 2023-07-26 18:39:58 +03:00
parent bcbfb54ac2
commit e9623c4484
16 changed files with 333 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
doc/radiobutton/StyleDoc.vue → doc/radiobutton/theming/StyledDoc.vue
View File

47
doc/radiobutton/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,47 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
ingredient: '',
code: {
composition: `
<template>
<div class="card flex justify-center">
<div class="flex flex-wrap gap-3">
<div class="flex align-items-center">
<RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" />
<label for="ingredient1" class="ml-2">Cheese</label>
</div>
<div class="flex align-items-center">
<RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" />
<label for="ingredient2" class="ml-2">Mushroom</label>
</div>
<div class="flex align-items-center">
<RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" />
<label for="ingredient3" class="ml-2">Pepper</label>
</div>
<div class="flex align-items-center">
<RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
<label for="ingredient4" class="ml-2">Onion</label>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
const ingredient = ref('');
<\/script>`
}
};
}
};
</script>

33
doc/radiobutton/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>RadioButton Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

0
doc/rating/StyleDoc.vue → doc/rating/theming/StyledDoc.vue
View File

30
doc/rating/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,30 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
value: null,
code: {
composition: `
<template>
<div class="card flex justify-center">
<Rating v-model="value" />
</div>
</template>
<script setup>
import { ref } from 'vue';
const value = ref(null);
<\/script>`
}
};
}
};
</script>

33
doc/rating/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Rating Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

29
doc/selectbutton/theming/StyledDoc.vue Normal file
View File

@ -0,0 +1,29 @@
<template>
<DocSectionText id="style" label="Style" v-bind="$attrs">
<p>List of class names used in the styled mode.</p>
</DocSectionText>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-select-button</td>
<td>SelectButton element</td>
</tr>
<tr>
<td>p-button</td>
<td>Button element</td>
</tr>
<tr>
<td>p-button-label</td>
<td>Label element of the button</td>
</tr>
</tbody>
</table>
</div>
</template>

32
doc/selectbutton/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,32 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
value: 'Off',
options: ['Off', 'On'],
code: {
composition: `
<template>
<div class="card flex justify-center">
<SelectButton v-model="value" :options="options" aria-labelledby="basic" />
</div>
</template>
<script setup>
import { ref } from 'vue';
const value = ref('off');
const options = ref(['Off', 'On']);
<\/script>`
}
};
}
};
</script>

33
doc/selectbutton/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>SelectButton Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

0
doc/slider/StyleDoc.vue → doc/slider/theming/StyledDoc.vue
View File

30
doc/slider/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,30 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
value: null,
code: {
composition: `
<template>
<div class="card flex justify-center">
<Slider v-model="value" class="w-14rem" />
</div>
</template>
<script setup>
import { ref } from 'vue';
const value = ref(null);
<\/script>`
}
};
}
};
</script>

33
doc/slider/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Slider Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

20
pages/radiobutton/index.vue
View File

@ -1,5 +1,13 @@
<template>
<DocComponent title="Vue RadioButton Component" header="RadioButton" description="RadioButton is an extension to standard radio button element with theming." :componentDocs="docs" :apiDocs="['RadioButton']" :ptTabComponent="ptComponent" />
<DocComponent
title="Vue RadioButton Component"
header="RadioButton"
description="RadioButton is an extension to standard radio button element with theming."
:componentDocs="docs"
:apiDocs="['RadioButton']"
:ptTabComponent="ptComponent"
:themingDocs="themingDoc"
/>
</template>
<script>
@ -9,9 +17,9 @@ import DynamicDoc from '@/doc/radiobutton/DynamicDoc.vue';
import GroupDoc from '@/doc/radiobutton/GroupDoc.vue';
import ImportDoc from '@/doc/radiobutton/ImportDoc.vue';
import InvalidDoc from '@/doc/radiobutton/InvalidDoc.vue';
import StyleDoc from '@/doc/radiobutton/StyleDoc.vue';
import VeeValidateDoc from '@/doc/radiobutton/form/VeeValidateDoc.vue';
import PTComponent from '@/doc/radiobutton/pt/index.vue';
import ThemingDoc from '@/doc/radiobutton/theming/index.vue';
export default {
data() {
@ -54,18 +62,14 @@ export default {
}
]
},
{
id: 'style',
label: 'Style',
component: StyleDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
],
ptComponent: PTComponent
ptComponent: PTComponent,
themingDoc: ThemingDoc
};
}
};

12
pages/rating/index.vue
View File

@ -1,5 +1,5 @@
<template>
<DocComponent title="Vue Rating Component" header="Rating" description="Rating component is a star based selection input." :componentDocs="docs" :apiDocs="['Rating']" :ptTabComponent="ptComponent" />
<DocComponent title="Vue Rating Component" header="Rating" description="Rating component is a star based selection input." :componentDocs="docs" :apiDocs="['Rating']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
</template>
<script>
@ -9,10 +9,10 @@ import DisabledDoc from '@/doc/rating/DisabledDoc.vue';
import ImportDoc from '@/doc/rating/ImportDoc.vue';
import NumberOfStarsDoc from '@/doc/rating/NumberOfStarsDoc.vue';
import ReadOnlyDoc from '@/doc/rating/ReadOnlyDoc.vue';
import StyleDoc from '@/doc/rating/StyleDoc.vue';
import TemplateDoc from '@/doc/rating/TemplateDoc.vue';
import WithoutCancelDoc from '@/doc/rating/WithoutCancelDoc.vue';
import PTComponent from '@/doc/rating/pt/index.vue';
import ThemingDoc from '@/doc/rating/theming/index.vue';
export default {
data() {
@ -53,18 +53,14 @@ export default {
label: 'Disabled',
component: DisabledDoc
},
{
id: 'style',
label: 'Style',
component: StyleDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
],
ptComponent: PTComponent
ptComponent: PTComponent,
themingDoc: ThemingDoc
};
}
};

16
pages/selectbutton/index.vue
View File

@ -1,17 +1,26 @@
<template>
<DocComponent title="Vue SelectButton Component" header="SelectButton" description="Slider is a component to provide input with a drag handle." :componentDocs="docs" :apiDocs="['SelectButton']" :ptTabComponent="ptComponent" />
<DocComponent
title="Vue SelectButton Component"
header="SelectButton"
description="Slider is a component to provide input with a drag handle."
:componentDocs="docs"
:apiDocs="['SelectButton']"
:ptTabComponent="ptComponent"
:themingDocs="themingDoc"
/>
</template>
<script>
import AccessibilityDoc from '@/doc/selectbutton/AccessibilityDoc';
import BasicDoc from '@/doc/selectbutton/BasicDoc';
import DisabledDoc from '@/doc/selectbutton/DisabledDoc';
import VeeValidateDoc from '@/doc/selectbutton/form/VeeValidateDoc';
import ImportDoc from '@/doc/selectbutton/ImportDoc';
import InvalidDoc from '@/doc/selectbutton/InvalidDoc';
import MultipleDoc from '@/doc/selectbutton/MultipleDoc';
import TemplateDoc from '@/doc/selectbutton/TemplateDoc';
import VeeValidateDoc from '@/doc/selectbutton/form/VeeValidateDoc';
import PTComponent from '@/doc/selectbutton/pt/index.vue';
import ThemingDoc from '@/doc/selectbutton/theming/index.vue';
export default {
data() {
@ -65,7 +74,8 @@ export default {
component: AccessibilityDoc
}
],
ptComponent: PTComponent
ptComponent: PTComponent,
themingDoc: ThemingDoc
};
}
};

12
pages/slider/index.vue
View File

@ -1,5 +1,5 @@
<template>
<DocComponent title="Vue Slider Component" header="Slider" description="Slider is a component to provide input with a drag handle." :componentDocs="docs" :apiDocs="['Slider']" :ptTabComponent="ptComponent" />
<DocComponent title="Vue Slider Component" header="Slider" description="Slider is a component to provide input with a drag handle." :componentDocs="docs" :apiDocs="['Slider']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
</template>
<script>
@ -9,9 +9,9 @@ import ImportDoc from '@/doc/slider/ImportDoc';
import InputDoc from '@/doc/slider/InputDoc';
import RangeDoc from '@/doc/slider/RangeDoc';
import StepDoc from '@/doc/slider/StepDoc';
import StyleDoc from '@/doc/slider/StyleDoc';
import VerticalDoc from '@/doc/slider/VerticalDoc';
import PTComponent from '@/doc/slider/pt/index.vue';
import ThemingDoc from '@/doc/slider/theming/index.vue';
export default {
data() {
@ -47,18 +47,14 @@ export default {
label: 'Vertical',
component: VerticalDoc
},
{
id: 'style',
label: 'Style',
component: StyleDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
],
ptComponent: PTComponent
ptComponent: PTComponent,
themingDoc: ThemingDoc
};
}
};