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

PTViewer added to Form components III

pull/6439/head
tugcekucukoglu 2024-09-19 10:01:54 +03:00
parent f8c7e9f188
commit f75f3fdf83
24 changed files with 342 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/showcase/doc/knob/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/knob.jpg" />
</div>
</template>

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

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

8
apps/showcase/doc/knob/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.knob',

8
apps/showcase/doc/listbox/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/listbox.jpg" />
</div>
</template>

63
apps/showcase/doc/listbox/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,63 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<Listbox v-model="selectedCity" filter checkmark :highlightOnSelect="false" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" class="w-full md:w-56" listStyle="max-height:250px">
<template #optiongroup="slotProps">
<div class="flex items-center">
<img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
<div>{{ slotProps.option.label }}</div>
</div>
</template>
</Listbox>
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
selectedCity: null,
groupedCities: [
{
label: 'Germany',
code: 'DE',
items: [
{ label: 'Berlin', value: 'Berlin' },
{ label: 'Frankfurt', value: 'Frankfurt' },
{ label: 'Hamburg', value: 'Hamburg' },
{ label: 'Munich', value: 'Munich' }
]
},
{
label: 'USA',
code: 'US',
items: [
{ label: 'Chicago', value: 'Chicago' },
{ label: 'Los Angeles', value: 'Los Angeles' },
{ label: 'New York', value: 'New York' },
{ label: 'San Francisco', value: 'San Francisco' }
]
},
{
label: 'Japan',
code: 'JP',
items: [
{ label: 'Kyoto', value: 'Kyoto' },
{ label: 'Osaka', value: 'Osaka' },
{ label: 'Tokyo', value: 'Tokyo' },
{ label: 'Yokohama', value: 'Yokohama' }
]
}
],
docs: [
{
data: getPTOptions('Listbox'),
key: 'Listbox'
}
]
};
}
};
</script>

8
apps/showcase/doc/listbox/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.listbox',

8
apps/showcase/doc/multiselect/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/multiselect.jpg" />
</div>
</template>

63
apps/showcase/doc/multiselect/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,63 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" filter optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-80">
<template #optiongroup="slotProps">
<div class="flex items-center">
<img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
<div>{{ slotProps.option.label }}</div>
</div>
</template>
</MultiSelect>
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
selectedCities: null,
groupedCities: [
{
label: 'Germany',
code: 'DE',
items: [
{ label: 'Berlin', value: 'Berlin' },
{ label: 'Frankfurt', value: 'Frankfurt' },
{ label: 'Hamburg', value: 'Hamburg' },
{ label: 'Munich', value: 'Munich' }
]
},
{
label: 'USA',
code: 'US',
items: [
{ label: 'Chicago', value: 'Chicago' },
{ label: 'Los Angeles', value: 'Los Angeles' },
{ label: 'New York', value: 'New York' },
{ label: 'San Francisco', value: 'San Francisco' }
]
},
{
label: 'Japan',
code: 'JP',
items: [
{ label: 'Kyoto', value: 'Kyoto' },
{ label: 'Osaka', value: 'Osaka' },
{ label: 'Tokyo', value: 'Tokyo' },
{ label: 'Yokohama', value: 'Yokohama' }
]
}
],
docs: [
{
data: getPTOptions('MultiSelect'),
key: 'MultiSelect'
}
]
};
}
};
</script>

8
apps/showcase/doc/multiselect/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.multiselect',

8
apps/showcase/doc/password/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/password.jpg" />
</div>
</template>

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

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

8
apps/showcase/doc/password/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.password',

8
apps/showcase/doc/radiobutton/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/radiobutton.jpg" />
</div>
</template>

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

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

8
apps/showcase/doc/radiobutton/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.radiobutton',

8
apps/showcase/doc/rating/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/rating.jpg" />
</div>
</template>

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

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

8
apps/showcase/doc/rating/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.rating',

8
apps/showcase/doc/select/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/dropdown.jpg" />
</div>
</template>

63
apps/showcase/doc/select/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,63 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<Select v-model="selectedCity" filter :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-56">
<template #optiongroup="slotProps">
<div class="flex items-center">
<img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`mr-2 flag flag-${slotProps.option.code.toLowerCase()}`" style="width: 18px" />
<div>{{ slotProps.option.label }}</div>
</div>
</template>
</Select>
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
selectedCity: null,
groupedCities: [
{
label: 'Germany',
code: 'DE',
items: [
{ label: 'Berlin', value: 'Berlin' },
{ label: 'Frankfurt', value: 'Frankfurt' },
{ label: 'Hamburg', value: 'Hamburg' },
{ label: 'Munich', value: 'Munich' }
]
},
{
label: 'USA',
code: 'US',
items: [
{ label: 'Chicago', value: 'Chicago' },
{ label: 'Los Angeles', value: 'Los Angeles' },
{ label: 'New York', value: 'New York' },
{ label: 'San Francisco', value: 'San Francisco' }
]
},
{
label: 'Japan',
code: 'JP',
items: [
{ label: 'Kyoto', value: 'Kyoto' },
{ label: 'Osaka', value: 'Osaka' },
{ label: 'Tokyo', value: 'Tokyo' },
{ label: 'Yokohama', value: 'Yokohama' }
]
}
],
docs: [
{
data: getPTOptions('Select'),
key: 'Select'
}
]
};
}
};
</script>

8
apps/showcase/doc/select/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.select',

8
apps/showcase/doc/selectbutton/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/selectbutton.jpg" />
</div>
</template>

25
apps/showcase/doc/selectbutton/pt/PTViewer.vue Normal file
View File

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

8
apps/showcase/doc/selectbutton/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.steps',