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

Refactor on some demo

pull/4186/head
mertsincan 2023-07-12 00:14:34 +01:00
parent 5f09ecd0a0
commit 8af7127be8
4 changed files with 43 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
doc/passthrough/BasicDoc.vue
View File

@ -1,8 +1,9 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p> <p>
Each component has a special <i>pt</i> property to define an object with keys corresponding to the available DOM elements. Each value can either be an object or a function that returns an object to define the arbitrary properties to apply Each component has a special <i>pt</i> property to define an object with keys corresponding to the available DOM elements. Each value can either be a string, an object or a function that returns a string or an object to define the
to the element such as styling, aria, data-* or custom attributes. Every component documentation has a dedicated section to document the available section names exposed via PT. arbitrary properties to apply to the element such as styling, aria, data-* or custom attributes. If the value is a string or a function that returns a string, it is considered as a class definition and added to the class attribute of the
element. Every component documentation has a dedicated section to document the available section names exposed via PT.
</p> </p>
<p>Most common usage of <i>pt</i> is styling and customization, example below styles a Panel component with PrimeFlex CSS library.</p> <p>Most common usage of <i>pt</i> is styling and customization, example below styles a Panel component with PrimeFlex CSS library.</p>
</DocSectionText> </DocSectionText>
@ -13,6 +14,10 @@
toggleable toggleable
:pt="{ :pt="{
header: (options) => ({ header: (options) => ({
id: 'myPanelHeader',
style: {
'user-select': 'none'
},
class: [ class: [
'border-primary', 'border-primary',
{ {
@ -22,8 +27,8 @@
] ]
}), }),
content: { class: 'border-primary text-lg text-primary-700' }, content: { class: 'border-primary text-lg text-primary-700' },
title: { class: 'text-xl' }, title: 'text-xl',
toggler: { class: 'bg-primary hover:bg-primary-reverse' } toggler: () => 'bg-primary hover:bg-primary-reverse'
}" }"
> >
<p class="m-0"> <p class="m-0">
@ -44,6 +49,10 @@ export default {
<Panel header="Header" toggleable <Panel header="Header" toggleable
:pt="{ :pt="{
header: (options) => ({ header: (options) => ({
id: 'myPanelHeader',
style: {
'user-select': 'none'
},
class: [ class: [
'border-primary', 'border-primary',
{ {
@ -53,8 +62,8 @@ export default {
] ]
}), }),
content: { class: 'border-primary text-lg text-primary-700' }, content: { class: 'border-primary text-lg text-primary-700' },
title: { class: 'text-xl' }, title: 'text-xl', // OR { class: 'text-xl' }
toggler: { class: 'bg-primary hover:bg-primary-reverse' } toggler: () => 'bg-primary hover:bg-primary-reverse' // OR { class: 'bg-primary hover:bg-primary-reverse' }
}"> }">
<p class="m-0"> <p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@ -67,6 +76,10 @@ export default {
<Panel header="Header" toggleable <Panel header="Header" toggleable
:pt="{ :pt="{
header: (options) => ({ header: (options) => ({
id: 'myPanelHeader',
style: {
'user-select': 'none'
},
class: [ class: [
'border-primary', 'border-primary',
{ {
@ -76,8 +89,8 @@ export default {
] ]
}), }),
content: { class: 'border-primary text-lg text-primary-700' }, content: { class: 'border-primary text-lg text-primary-700' },
title: { class: 'text-xl' }, title: 'text-xl', // OR { class: 'text-xl' }
toggler: { class: 'bg-primary hover:bg-primary-reverse' } toggler: () => 'bg-primary hover:bg-primary-reverse' // OR { class: 'bg-primary hover:bg-primary-reverse' }
}"> }">
<p class="m-0"> <p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@ -95,6 +108,10 @@ export default {
<Panel header="Header" toggleable <Panel header="Header" toggleable
:pt="{ :pt="{
header: (options) => ({ header: (options) => ({
id: 'myPanelHeader',
style: {
'user-select': 'none'
},
class: [ class: [
'border-primary', 'border-primary',
{ {
@ -104,8 +121,8 @@ export default {
] ]
}), }),
content: { class: 'border-primary text-lg text-primary-700' }, content: { class: 'border-primary text-lg text-primary-700' },
title: { class: 'text-xl' }, title: 'text-xl', // OR { class: 'text-xl' }
toggler: { class: 'bg-primary hover:bg-primary-reverse' } toggler: () => 'bg-primary hover:bg-primary-reverse' // OR { class: 'bg-primary hover:bg-primary-reverse' }
}"> }">
<p class="m-0"> <p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

8
doc/passthrough/GlobalDoc.vue
View File

@ -21,10 +21,14 @@ const app = createApp(App);
app.use(PrimeVue, { app.use(PrimeVue, {
pt: { pt: {
panel: { panel: {
header: { class: 'bg-primary' } header: {
class: 'bg-primary'
}
}, },
autocomplete: { autocomplete: {
input: { root: { class: 'w-16rem' } } input: {
root: 'w-16rem' // OR { class: 'w-16rem' }
}
} }
} }
});` });`

8
doc/unstyled/ExampleDoc.vue
View File

@ -12,7 +12,7 @@
:pt="{ :pt="{
root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' }, root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
label: { class: 'text-white font-bold text-xl' }, label: { class: 'text-white font-bold text-xl' },
icon: { class: 'text-white text-2xl' } icon: 'text-white text-2xl'
}" }"
/> />
</div> </div>
@ -30,7 +30,7 @@ export default {
:pt="{ :pt="{
root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' }, root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
label: { class: 'text-white font-bold text-xl' }, label: { class: 'text-white font-bold text-xl' },
icon: { class: 'text-white text-2xl' } icon: 'text-white text-2xl' // OR { class: 'text-white text-2xl' }
}" }"
/>`, />`,
options: ` options: `
@ -40,7 +40,7 @@ export default {
:pt="{ :pt="{
root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' }, root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
label: { class: 'text-white font-bold text-xl' }, label: { class: 'text-white font-bold text-xl' },
icon: { class: 'text-white text-2xl' } icon: 'text-white text-2xl' // OR { class: 'text-white text-2xl' }
}" }"
/> />
</div> </div>
@ -54,7 +54,7 @@ export default {
:pt="{ :pt="{
root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' }, root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
label: { class: 'text-white font-bold text-xl' }, label: { class: 'text-white font-bold text-xl' },
icon: { class: 'text-white text-2xl' } icon: 'text-white text-2xl' // OR { class: 'text-white text-2xl' }
}" }"
/> />
</template> </template>

12
doc/unstyled/ThemeDoc.vue
View File

@ -22,14 +22,14 @@ app.use(PrimeVue, {
pt: { pt: {
button: { button: {
root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' }, root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
label: { class: 'text-white font-bold text-xl' }, label: 'text-white font-bold text-xl', // OR { class: 'text-white font-bold text-xl' }
icon: { class: 'text-white text-2xl' } icon: 'text-white text-2xl'
}, },
panel: { panel: {
header: { class: 'bg-primary border-primary' }, header: 'bg-primary border-primary',
content: { class: 'border-primary text-lg text-primary-700' }, content: 'border-primary text-lg text-primary-700',
title: { class: 'bg-primary text-xl' }, title: 'bg-primary text-xl',
toggler: { class: 'bg-primary hover:bg-primary-reverse' } toggler: 'bg-primary hover:bg-primary-reverse'
} }
} }
});` });`