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

PTViewer added to Form components I

pull/6439/head
tugcekucukoglu 2024-09-19 09:55:07 +03:00
parent b242b6df1f
commit ed054ffb1d
21 changed files with 281 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/showcase/doc/autocomplete/pt/PTImage.vue
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/autocomplete.jpg" />
</div>
</template>

32
apps/showcase/doc/autocomplete/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,32 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" appendTo="self" />
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
value: '',
items: [],
docs: [
{
data: getPTOptions('AutoComplete'),
key: 'AutoComplete'
}
]
};
},
methods: {
search(event) {
let _items = [...Array(10).keys()];
this.items = event.query ? [...Array(10).keys()].map((item) => event.query + '-' + item) : _items;
}
}
};
</script>

8
apps/showcase/doc/autocomplete/pt/index.vue
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.autocomplete',

8
apps/showcase/doc/cascadeselect/pt/PTImage.vue
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/cascadeselect.jpg" />
</div>
</template>

98
apps/showcase/doc/cascadeselect/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,98 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="ptViewerDoc">
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
selectedCity: null,
countries: [
{
name: 'Australia',
code: 'AU',
states: [
{
name: 'New South Wales',
cities: [
{ cname: 'Sydney', code: 'A-SY' },
{ cname: 'Newcastle', code: 'A-NE' },
{ cname: 'Wollongong', code: 'A-WO' }
]
},
{
name: 'Queensland',
cities: [
{ cname: 'Brisbane', code: 'A-BR' },
{ cname: 'Townsville', code: 'A-TO' }
]
}
]
},
{
name: 'Canada',
code: 'CA',
states: [
{
name: 'Quebec',
cities: [
{ cname: 'Montreal', code: 'C-MO' },
{ cname: 'Quebec City', code: 'C-QU' }
]
},
{
name: 'Ontario',
cities: [
{ cname: 'Ottawa', code: 'C-OT' },
{ cname: 'Toronto', code: 'C-TO' }
]
}
]
},
{
name: 'United States',
code: 'US',
states: [
{
name: 'California',
cities: [
{ cname: 'Los Angeles', code: 'US-LA' },
{ cname: 'San Diego', code: 'US-SD' },
{ cname: 'San Francisco', code: 'US-SF' }
]
},
{
name: 'Florida',
cities: [
{ cname: 'Jacksonville', code: 'US-JA' },
{ cname: 'Miami', code: 'US-MI' },
{ cname: 'Tampa', code: 'US-TA' },
{ cname: 'Orlando', code: 'US-OR' }
]
},
{
name: 'Texas',
cities: [
{ cname: 'Austin', code: 'US-AU' },
{ cname: 'Dallas', code: 'US-DA' },
{ cname: 'Houston', code: 'US-HO' }
]
}
]
}
],
ptViewerDoc: [
{
data: getPTOptions('CascadeSelect'),
key: 'CascadeSelect'
}
]
};
}
};
</script>

8
apps/showcase/doc/cascadeselect/pt/index.vue
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.cascadeselect',

8
apps/showcase/doc/checkbox/pt/PTImage.vue
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/checkbox.jpg" />
</div>
</template>

24
apps/showcase/doc/checkbox/pt/PTViewer.vue Normal file
View File

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

8
apps/showcase/doc/checkbox/pt/index.vue
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.checkbox',

8
apps/showcase/doc/colorpicker/pt/PTImage.vue
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/colorpicker.jpg" />
</div>
</template>

24
apps/showcase/doc/colorpicker/pt/PTViewer.vue Normal file
View File

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

8
apps/showcase/doc/colorpicker/pt/index.vue
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.colorpicker',

8
apps/showcase/doc/datepicker/pt/PTImage.vue
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>

24
apps/showcase/doc/datepicker/pt/PTViewer.vue Normal file
View File

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

8
apps/showcase/doc/datepicker/pt/index.vue
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.datepicker',

8
apps/showcase/doc/editor/pt/PTImage.vue
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/editor.jpg" />
</div>
</template>

24
apps/showcase/doc/editor/pt/PTViewer.vue Normal file
View File

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

8
apps/showcase/doc/editor/pt/index.vue
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.editor',

8
apps/showcase/doc/floatlabel/pt/PTImage.vue
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>

27
apps/showcase/doc/floatlabel/pt/PTViewer.vue Normal file
View File

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

8
apps/showcase/doc/floatlabel/pt/index.vue
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.floatlabel',