PTViewer added to Data components II

pull/6439/head
tugcekucukoglu 2024-09-19 10:01:02 +03:00
parent ed054ffb1d
commit f8c7e9f188
23 changed files with 214 additions and 127 deletions

View File

@ -1,8 +0,0 @@
<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>

View File

@ -0,0 +1,31 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<IconField>
<InputIcon class="pi pi-search" />
<InputText v-model="value" placeholder="Search" />
</IconField>
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
value: null,
docs: [
{
data: getPTOptions('IconField'),
key: 'IconField'
},
{
data: getPTOptions('InputIcon'),
key: 'InputIcon'
}
]
};
}
};
</script>

View File

@ -11,16 +11,16 @@
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue';
import PTViewer from './PTViewer.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
id: 'pt.viewer',
label: 'Viewer',
component: PTViewer
},
{
id: 'pt.doc.iconfield',

View File

@ -1,8 +0,0 @@
<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>

View File

@ -1,35 +0,0 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>IconField Pass Through</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
},
{
id: 'pt.doc.iconfield',
label: 'IconField PT Options',
component: DocApiTable,
data: getPTOptions('IconField')
}
]
};
}
};
</script>

View File

@ -1,8 +0,0 @@
<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>

View File

@ -0,0 +1,27 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<IftaLabel>
<InputText id="username" v-model="value" autocomplete="off" />
<label for="username">Username</label>
</IftaLabel>
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
value: null,
docs: [
{
data: getPTOptions('IftaLabel'),
key: 'IftaLabel'
}
]
};
}
};
</script>

View File

@ -11,16 +11,16 @@
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue';
import PTViewer from './PTViewer.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
id: 'pt.viewer',
label: 'Viewer',
component: PTViewer
},
{
id: 'pt.doc.iftalabel',

View File

@ -1,8 +0,0 @@
<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>

View File

@ -0,0 +1,32 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<InputGroup>
<InputGroupAddon>$</InputGroupAddon>
<InputNumber v-model="value" placeholder="Price" />
<InputGroupAddon>.00</InputGroupAddon>
</InputGroup>
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
value: null,
docs: [
{
data: getPTOptions('InputGroup'),
key: 'InputGroup'
},
{
data: getPTOptions('InputGroupAddon'),
key: 'InputGroupAddon'
}
]
};
}
};
</script>

View File

@ -12,16 +12,16 @@
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
// import PtDoc from './PTDoc.vue';
import PTImage from './PTImage.vue';
import PTViewer from './PTViewer.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
id: 'pt.viewer',
label: 'Viewer',
component: PTViewer
},
{
id: 'pt.doc.inputgroup',

View File

@ -1,8 +0,0 @@
<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/inputmask.jpg" />
</div>
</template>

View File

@ -0,0 +1,24 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
value: null,
docs: [
{
data: getPTOptions('InputMask'),
key: 'InputMask'
}
]
};
}
};
</script>

View File

@ -11,16 +11,16 @@
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue';
import PTViewer from './PTViewer.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
id: 'pt.viewer',
label: 'Viewer',
component: PTViewer
},
{
id: 'pt.doc.inputmask',

View File

@ -1,8 +0,0 @@
<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/inputnumber.jpg" />
</div>
</template>

View File

@ -0,0 +1,24 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<InputNumber v-model="value" inputId="stacked-buttons" showButtons mode="currency" currency="USD" />
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
value: 20,
docs: [
{
data: getPTOptions('InputNumber'),
key: 'InputNumber'
}
]
};
}
};
</script>

View File

@ -11,16 +11,16 @@
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue';
import PTViewer from './PTViewer.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
id: 'pt.viewer',
label: 'Viewer',
component: PTViewer
},
{
id: 'pt.doc.inputnumber',

View File

@ -1,8 +0,0 @@
<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>

View File

@ -0,0 +1,24 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<InputOtp v-model="value" />
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
value: null,
docs: [
{
data: getPTOptions('InputOtp'),
key: 'InputOtp'
}
]
};
}
};
</script>

View File

@ -11,16 +11,16 @@
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue';
import PTViewer from './PTViewer.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
id: 'pt.viewer',
label: 'Viewer',
component: PTViewer
},
{
id: 'pt.doc.inputotp',

View File

@ -1,8 +0,0 @@
<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/inputtext.jpg" />
</div>
</template>

View File

@ -0,0 +1,24 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<InputText v-model="value" placeholder="Username" />
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
value: null,
docs: [
{
data: getPTOptions('InputText'),
key: 'InputText'
}
]
};
}
};
</script>

View File

@ -11,16 +11,16 @@
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue';
import PTViewer from './PTViewer.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
id: 'pt.viewer',
label: 'Viewer',
component: PTViewer
},
{
id: 'pt.doc.inputtext',