RadioButton pt demo added
parent
21133d5b94
commit
802714768b
|
@ -0,0 +1,126 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||||
|
<div class="card flex justify-content-center">
|
||||||
|
<div class="flex flex-column gap-3">
|
||||||
|
<div v-for="(category, index) in categories" :key="category.key" class="flex align-items-center">
|
||||||
|
<RadioButton
|
||||||
|
v-model="selectedCategory"
|
||||||
|
:inputId="category.key"
|
||||||
|
name="pizza"
|
||||||
|
:value="category.name"
|
||||||
|
:pt="{
|
||||||
|
input: ({ props }) => ({
|
||||||
|
class: props.modelValue === categories[index].name ? 'bg-orange-500 border-orange-500' : undefined
|
||||||
|
})
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
<label :for="category.key" class="ml-2">{{ category.name }}</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DocSectionCode :code="code" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
categories: [
|
||||||
|
{ name: 'Accounting', key: 'A' },
|
||||||
|
{ name: 'Marketing', key: 'M' },
|
||||||
|
{ name: 'Production', key: 'P' },
|
||||||
|
{ name: 'Research', key: 'R' }
|
||||||
|
],
|
||||||
|
selectedCategory: 'Production',
|
||||||
|
code: {
|
||||||
|
basic: `
|
||||||
|
<div v-for="(category, index) in categories" :key="category.key" class="flex align-items-center">
|
||||||
|
<RadioButton
|
||||||
|
v-model="selectedCategory"
|
||||||
|
:inputId="category.key"
|
||||||
|
name="pizza"
|
||||||
|
:value="category.name"
|
||||||
|
:pt="{
|
||||||
|
input: ({ props }) => ({
|
||||||
|
class: props.modelValue === categories[index].name ? 'bg-orange-500 border-orange-500' : undefined
|
||||||
|
})
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
<label :for="category.key" class="ml-2">{{ category.name }}</label>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
options: `
|
||||||
|
<template>
|
||||||
|
<div class="card flex justify-content-center">
|
||||||
|
<div class="flex flex-column gap-3">
|
||||||
|
<div v-for="(category, index) in categories" :key="category.key" class="flex align-items-center">
|
||||||
|
<RadioButton
|
||||||
|
v-model="selectedCategory"
|
||||||
|
:inputId="category.key"
|
||||||
|
name="pizza"
|
||||||
|
:value="category.name"
|
||||||
|
:pt="{
|
||||||
|
input: ({ props }) => ({
|
||||||
|
class: props.modelValue === categories[index].name ? 'bg-orange-500 border-orange-500' : undefined
|
||||||
|
})
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
<label :for="category.key" class="ml-2">{{ category.name }}</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
selectedCategory: 'Production',
|
||||||
|
categories: [
|
||||||
|
{ name: 'Accounting', key: 'A' },
|
||||||
|
{ name: 'Marketing', key: 'M' },
|
||||||
|
{ name: 'Production', key: 'P' },
|
||||||
|
{ name: 'Research', key: 'R' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
<\/script>`,
|
||||||
|
composition: `
|
||||||
|
<template>
|
||||||
|
<div class="card flex justify-content-center">
|
||||||
|
<div class="flex flex-column gap-3">
|
||||||
|
<div v-for="(category, index) in categories" :key="category.key" class="flex align-items-center">
|
||||||
|
<RadioButton
|
||||||
|
v-model="selectedCategory"
|
||||||
|
:inputId="category.key"
|
||||||
|
name="pizza"
|
||||||
|
:value="category.name"
|
||||||
|
:pt="{
|
||||||
|
input: ({ props }) => ({
|
||||||
|
class: props.modelValue === categories[index].name ? 'bg-orange-500 border-orange-500' : undefined
|
||||||
|
})
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
<label :for="category.key" class="ml-2">{{ category.name }}</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const selectedCategory = ref('Production');
|
||||||
|
const categories = ref([
|
||||||
|
{ name: 'Accounting', key: 'A' },
|
||||||
|
{ name: 'Marketing', key: 'M' },
|
||||||
|
{ name: 'Production', key: 'P' },
|
||||||
|
{ name: 'Research', key: 'R' }
|
||||||
|
]);
|
||||||
|
<\/script>`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
|
@ -0,0 +1,8 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>{{ $attrs.description }}</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<div class="card">
|
||||||
|
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
|
||||||
|
</div>
|
||||||
|
</template>
|
|
@ -0,0 +1,41 @@
|
||||||
|
<template>
|
||||||
|
<div class="doc-main">
|
||||||
|
<div class="doc-intro">
|
||||||
|
<h1>RadioButton Pass Through</h1>
|
||||||
|
</div>
|
||||||
|
<DocSections :docs="docs" />
|
||||||
|
</div>
|
||||||
|
<DocSectionNav :docs="docs" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||||
|
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||||
|
import PtDoc from './PTDoc.vue';
|
||||||
|
import PTImage from './PTImage.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
docs: [
|
||||||
|
{
|
||||||
|
id: 'pt.image',
|
||||||
|
label: 'Wireframe',
|
||||||
|
component: PTImage
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'pt.doc.radiobutton',
|
||||||
|
label: 'RadioButton PT Options',
|
||||||
|
component: DocApiTable,
|
||||||
|
data: getPTOption('RadioButton')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'pt.demo',
|
||||||
|
label: 'Demo',
|
||||||
|
component: PtDoc
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
|
@ -1,16 +1,18 @@
|
||||||
<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']" />
|
<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" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import AccessibilityDoc from '@/doc/radiobutton/AccessibilityDoc.vue';
|
import AccessibilityDoc from '@/doc/radiobutton/AccessibilityDoc.vue';
|
||||||
import DisabledDoc from '@/doc/radiobutton/DisabledDoc.vue';
|
import DisabledDoc from '@/doc/radiobutton/DisabledDoc.vue';
|
||||||
import DynamicDoc from '@/doc/radiobutton/DynamicDoc.vue';
|
import DynamicDoc from '@/doc/radiobutton/DynamicDoc.vue';
|
||||||
import VeeValidateDoc from '@/doc/radiobutton/form/VeeValidateDoc.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 StyleDoc from '@/doc/radiobutton/StyleDoc.vue';
|
||||||
|
import VeeValidateDoc from '@/doc/radiobutton/form/VeeValidateDoc.vue';
|
||||||
|
import PTComponent from '@/doc/radiobutton/pt/index.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
@ -62,7 +64,8 @@ export default {
|
||||||
label: 'Accessibility',
|
label: 'Accessibility',
|
||||||
component: AccessibilityDoc
|
component: AccessibilityDoc
|
||||||
}
|
}
|
||||||
]
|
],
|
||||||
|
ptComponent: PTComponent
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue