RadioButton, Rating, SelectButton, Slider unstyled demo updates
parent
bcbfb54ac2
commit
e9623c4484
|
@ -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>
|
|
@ -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,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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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,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>
|
|
@ -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>
|
|
@ -1,5 +1,13 @@
|
||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -9,9 +17,9 @@ import DynamicDoc from '@/doc/radiobutton/DynamicDoc.vue';
|
||||||
import GroupDoc from '@/doc/radiobutton/GroupDoc.vue';
|
import GroupDoc from '@/doc/radiobutton/GroupDoc.vue';
|
||||||
import ImportDoc from '@/doc/radiobutton/ImportDoc.vue';
|
import ImportDoc from '@/doc/radiobutton/ImportDoc.vue';
|
||||||
import InvalidDoc from '@/doc/radiobutton/InvalidDoc.vue';
|
import InvalidDoc from '@/doc/radiobutton/InvalidDoc.vue';
|
||||||
import StyleDoc from '@/doc/radiobutton/StyleDoc.vue';
|
|
||||||
import VeeValidateDoc from '@/doc/radiobutton/form/VeeValidateDoc.vue';
|
import VeeValidateDoc from '@/doc/radiobutton/form/VeeValidateDoc.vue';
|
||||||
import PTComponent from '@/doc/radiobutton/pt/index.vue';
|
import PTComponent from '@/doc/radiobutton/pt/index.vue';
|
||||||
|
import ThemingDoc from '@/doc/radiobutton/theming/index.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
|
@ -54,18 +62,14 @@ export default {
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
|
||||||
id: 'style',
|
|
||||||
label: 'Style',
|
|
||||||
component: StyleDoc
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: 'accessibility',
|
id: 'accessibility',
|
||||||
label: 'Accessibility',
|
label: 'Accessibility',
|
||||||
component: AccessibilityDoc
|
component: AccessibilityDoc
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
ptComponent: PTComponent
|
ptComponent: PTComponent,
|
||||||
|
themingDoc: ThemingDoc
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -9,10 +9,10 @@ import DisabledDoc from '@/doc/rating/DisabledDoc.vue';
|
||||||
import ImportDoc from '@/doc/rating/ImportDoc.vue';
|
import ImportDoc from '@/doc/rating/ImportDoc.vue';
|
||||||
import NumberOfStarsDoc from '@/doc/rating/NumberOfStarsDoc.vue';
|
import NumberOfStarsDoc from '@/doc/rating/NumberOfStarsDoc.vue';
|
||||||
import ReadOnlyDoc from '@/doc/rating/ReadOnlyDoc.vue';
|
import ReadOnlyDoc from '@/doc/rating/ReadOnlyDoc.vue';
|
||||||
import StyleDoc from '@/doc/rating/StyleDoc.vue';
|
|
||||||
import TemplateDoc from '@/doc/rating/TemplateDoc.vue';
|
import TemplateDoc from '@/doc/rating/TemplateDoc.vue';
|
||||||
import WithoutCancelDoc from '@/doc/rating/WithoutCancelDoc.vue';
|
import WithoutCancelDoc from '@/doc/rating/WithoutCancelDoc.vue';
|
||||||
import PTComponent from '@/doc/rating/pt/index.vue';
|
import PTComponent from '@/doc/rating/pt/index.vue';
|
||||||
|
import ThemingDoc from '@/doc/rating/theming/index.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
|
@ -53,18 +53,14 @@ export default {
|
||||||
label: 'Disabled',
|
label: 'Disabled',
|
||||||
component: DisabledDoc
|
component: DisabledDoc
|
||||||
},
|
},
|
||||||
{
|
|
||||||
id: 'style',
|
|
||||||
label: 'Style',
|
|
||||||
component: StyleDoc
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: 'accessibility',
|
id: 'accessibility',
|
||||||
label: 'Accessibility',
|
label: 'Accessibility',
|
||||||
component: AccessibilityDoc
|
component: AccessibilityDoc
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
ptComponent: PTComponent
|
ptComponent: PTComponent,
|
||||||
|
themingDoc: ThemingDoc
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,17 +1,26 @@
|
||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import AccessibilityDoc from '@/doc/selectbutton/AccessibilityDoc';
|
import AccessibilityDoc from '@/doc/selectbutton/AccessibilityDoc';
|
||||||
import BasicDoc from '@/doc/selectbutton/BasicDoc';
|
import BasicDoc from '@/doc/selectbutton/BasicDoc';
|
||||||
import DisabledDoc from '@/doc/selectbutton/DisabledDoc';
|
import DisabledDoc from '@/doc/selectbutton/DisabledDoc';
|
||||||
import VeeValidateDoc from '@/doc/selectbutton/form/VeeValidateDoc';
|
|
||||||
import ImportDoc from '@/doc/selectbutton/ImportDoc';
|
import ImportDoc from '@/doc/selectbutton/ImportDoc';
|
||||||
import InvalidDoc from '@/doc/selectbutton/InvalidDoc';
|
import InvalidDoc from '@/doc/selectbutton/InvalidDoc';
|
||||||
import MultipleDoc from '@/doc/selectbutton/MultipleDoc';
|
import MultipleDoc from '@/doc/selectbutton/MultipleDoc';
|
||||||
import TemplateDoc from '@/doc/selectbutton/TemplateDoc';
|
import TemplateDoc from '@/doc/selectbutton/TemplateDoc';
|
||||||
|
import VeeValidateDoc from '@/doc/selectbutton/form/VeeValidateDoc';
|
||||||
import PTComponent from '@/doc/selectbutton/pt/index.vue';
|
import PTComponent from '@/doc/selectbutton/pt/index.vue';
|
||||||
|
import ThemingDoc from '@/doc/selectbutton/theming/index.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
|
@ -65,7 +74,8 @@ export default {
|
||||||
component: AccessibilityDoc
|
component: AccessibilityDoc
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
ptComponent: PTComponent
|
ptComponent: PTComponent,
|
||||||
|
themingDoc: ThemingDoc
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -9,9 +9,9 @@ import ImportDoc from '@/doc/slider/ImportDoc';
|
||||||
import InputDoc from '@/doc/slider/InputDoc';
|
import InputDoc from '@/doc/slider/InputDoc';
|
||||||
import RangeDoc from '@/doc/slider/RangeDoc';
|
import RangeDoc from '@/doc/slider/RangeDoc';
|
||||||
import StepDoc from '@/doc/slider/StepDoc';
|
import StepDoc from '@/doc/slider/StepDoc';
|
||||||
import StyleDoc from '@/doc/slider/StyleDoc';
|
|
||||||
import VerticalDoc from '@/doc/slider/VerticalDoc';
|
import VerticalDoc from '@/doc/slider/VerticalDoc';
|
||||||
import PTComponent from '@/doc/slider/pt/index.vue';
|
import PTComponent from '@/doc/slider/pt/index.vue';
|
||||||
|
import ThemingDoc from '@/doc/slider/theming/index.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
|
@ -47,18 +47,14 @@ export default {
|
||||||
label: 'Vertical',
|
label: 'Vertical',
|
||||||
component: VerticalDoc
|
component: VerticalDoc
|
||||||
},
|
},
|
||||||
{
|
|
||||||
id: 'style',
|
|
||||||
label: 'Style',
|
|
||||||
component: StyleDoc
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: 'accessibility',
|
id: 'accessibility',
|
||||||
label: 'Accessibility',
|
label: 'Accessibility',
|
||||||
component: AccessibilityDoc
|
component: AccessibilityDoc
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
ptComponent: PTComponent
|
ptComponent: PTComponent,
|
||||||
|
themingDoc: ThemingDoc
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue