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

Revert "global pt doc" 

This reverts commit fb157c4fde.
pull/4087/head
Tuğçe Küçükoğlu 2023-06-26 10:35:00 +03:00
parent fb157c4fde
commit a34e9e285b
4 changed files with 1 additions and 299 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
doc/passthrough/BasicDoc.vue
View File

@ -1,73 +0,0 @@
<template>
<DocSectionText v-bind="$attrs" />
<div class="card">
<Panel header="Header" :pt="{ header: { class: 'bg-primary' }, title: { class: 'text-white' }, toggler: { class: 'text-white hover:bg-primary-reverse' } }" toggleable>
<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.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</Panel>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
code: {
basic: `
<Panel header="Header" toggleable
:pt="{
header: { class: 'bg-primary' },
title: { class: 'text-white' },
toggler: { class: 'text-white hover:bg-primary-reverse' }
}">
<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.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</Panel>`,
options: `
<template>
<div class="card">
<Panel header="Header" toggleable
:pt="{
header: { class: 'bg-primary' },
title: { class: 'text-white' },
toggler: { class: 'text-white hover:bg-primary-reverse' }
}">
<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.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</Panel>
</div>
</template>
<script>
<\/script>`,
composition: `
<template>
<div class="card">
<Panel header="Header" toggleable
:pt="{
header: { class: 'bg-primary' },
title: { class: 'text-white' },
toggler: { class: 'text-white hover:bg-primary-reverse' }
}">
<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.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</Panel>
</div>
</template>
<script setup>
<\/script>`
}
};
}
};
</script>

34
doc/passthrough/GlobalPTDoc.vue
View File

@ -1,34 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
PrimeVue components can be globally managed through a single location using the global <i>pt</i> object. Before using the pt state from <i>PrimeVueContext</i>, it is essential to encapsulate your application with <i>PrimeVueProvider</i>.
For more details, <PrimeVueNuxtLink to="/installation/#plugin">click</PrimeVueNuxtLink> here.
</p>
</DocSectionText>
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
</template>
<script>
export default {
data() {
return {
code: {
basic: `
// main.js
const pt = {
panel: {
header: { class: 'bg-primary' }
},
autocomplete: {
input: { root: { class: 'w-16rem' } }
}
}
const app = createApp(App);
app.use(PrimeVue, { pt });
`
}
};
}
};
</script>

33
pages/passthrough/index.vue
View File

@ -1,33 +0,0 @@
<template>
<DocComponent
title="PrimeVue PassThrough"
header="PassThrough"
description="The Pass Through feature enables direct implementation of all relevant attributes (e.g., style, class) within the respective HTML tag."
:componentDocs="docs"
:apiDocs="['Config']"
/>
</template>
<script>
import BasicDoc from '@/doc/passthrough/BasicDoc.vue';
import GlobalPTDoc from '@/doc/passthrough/GlobalPTDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'basic',
label: 'Basic',
component: BasicDoc
},
{
id: 'globalpt',
label: 'Global PassThrough Options',
component: GlobalPTDoc
}
]
};
}
};
</script>

160
plugins/primeVue.js
View File

@ -107,166 +107,8 @@ import DocSectionText from '@/components/doc/DocSectionText';
import CodeHighlight from '@/components/layout/CodeHighlight';
import DevelopmentSection from '@/components/layout/DevelopmentSection';
const pt = {
avatargroup: {
root: {
class: 'flex'
}
},
avatar: {
root: ({ parent }) => ({
style: parent.instance !== undefined ? 'margin-left: -1rem' : null
})
},
button: {
root: ({ context }) => {
// context.disabled
}
},
checkbox: {
root: ({ context }) => {
// context.checked
// context.focused
// context.disabled
}
},
datatable: {
root: { class: 'ddddd1' },
columnGroup: {
root: { class: 'deneme88' }
},
headerRow: { class: 'xxx' },
row: {
root: ({ row }) => ({ class: row.context.index === 1 ? 'xxxx4' : 'xxxx5' })
},
column: {
root: { class: 'column333' }
}
},
accordion: {
root:
// console.log(instance),
{
class: 'root'
},
tab: {
root: {
class: 'tab-root'
},
header: {
class: 'tab-header'
},
headerAction: {
class: 'tab-header-action'
}
}
// header: {
// class: 'header-class'
// },
// headerAction: ({ instance }) => {
// console.log('jwkdhuv');
// console.log(instance);
// }
},
// accordiontab: {
// root: {
// class: 'tab-root'
// },
// header: {
// class: 'root-header'
// }
// },
directives: {
ripple: {
css: {
root: {
class: 'deneme',
style: {
// display: 'block',
// position: 'absolute',
background: 'rgba(75, 175, 80, 0.9)'
// borderRadius: '100%',
// transform: 'scale(0)',
// pointerEvents: 'none'
}
}
},
hooks: {
mounted: ($el, el, binding) => {
// console.log('mounted', $el);
},
unmounted: (el) => {
// console.log('unmounted', el);
}
}
},
badge: {
css: {
root: {
class: 'bg-cyan-500'
}
},
hooks: {
mounted: ($el) => {
// console.log($el);
},
updated: ($el) => {
// console.log($el);
}
}
},
tooltip: {
hooks: {
beforeMount: (el, binding) => {},
unmounted: (el) => {
// console.log('unmounted');
},
beforeUpdate() {
// console.log('before update');
},
updated: (el, options) => {
// console.log('global updated');
}
},
css: {
// root: {
// class: 'deneme',
// style: {
// position: 'absolute'
// }
// },
text: {
class: 'text-2xl'
}
}
},
focustrap: {
css: {
root: {
class: 'xxxxxx'
},
firstFocusableElement: {
class: 'yyyyyy'
}
},
hooks: {
mounted: ($el) => {
// console.log($el);
}
}
},
styleclass: {
hooks: {
mounted(a, b, c, d, e) {
// console.log(e);
}
}
}
}
};
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(PrimeVue, { ripple: true, pt });
nuxtApp.vueApp.use(PrimeVue, { ripple: true });
nuxtApp.vueApp.use(ToastService);
nuxtApp.vueApp.use(ConfirmationService);