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

Merge branch 'primefaces:master' into fix/listbox-optiongroup-filter

pull/6275/head
Uros 2024-09-16 23:26:17 +02:00 committed by GitHub
parent d4e44f3bd0 76b3f41189
commit ea76bbb430
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
71 changed files with 1444 additions and 1003 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/showcase/assets/menu/menu.json
View File

@ -433,14 +433,14 @@
"name": "FocusTrap",
"to": "/focustrap"
},
{
"name": "Inplace",
"to": "/inplace"
},
{
"name": "Fluid",
"to": "/fluid"
},
{
"name": "Inplace",
"to": "/inplace"
},
{
"name": "MeterGroup",
"to": "/metergroup"

43
apps/showcase/assets/styles/layout/_doc.scss
View File

@ -432,3 +432,46 @@
}
}
}
.doc-ptviewerwrapper {
display: flex;
flex-direction: row;
padding: 0 !important;
.doc-ptviewer {
display: flex;
align-items: center;
justify-content: center;
border-color: var(--p-content-border-color);
border-width: 0 1px 0 0;
padding: 1rem;
width: 75%;
}
.doc-ptoptions {
display: flex;
flex-direction: column;
gap: .5rem;
padding: .5rem;
width: 25%;
max-height: 720px;
overflow-y: auto;
.doc-ptoption {
display: flex;
flex-direction: column;
padding: .5rem;
cursor: pointer;
&:hover {
background-color: var(--p-content-hover-background);
}
.doc-ptoption-text {
color: var(--p-text-muted-color);
font-size: 0.875rem;
line-height: 1.25rem;
}
}
}
}

14
apps/showcase/assets/styles/layout/_responsive.scss
View File

@ -128,6 +128,20 @@
.DocSearch-Container {
position: fixed !important;
}
.doc-ptviewerwrapper {
flex-direction: column;
.doc-ptviewer {
width: 100%;
border-width: 0 0 1px 0;
}
.doc-ptoptions {
width: 100%;
padding: 1rem;
}
}
}
@media screen and (max-width: 575px) {

25
apps/showcase/components/doc/DocPTViewer.vue
View File

@ -1,14 +1,14 @@
<template>
<div ref="container" class="card flex flex-col md:flex-row !p-0">
<div class="flex items-center justify-center md:border-r border-b md:border-b-0 border-surface md:w-3/4 w-full p-4">
<div ref="container" class="doc-ptviewerwrapper card">
<div id="doc-ptviewer" class="doc-ptviewer">
<slot />
</div>
<div class="flex flex-col gap-2 p-8 md:p-2 md:w-1/4 w-full max-h-[720px] overflow-y-auto">
<div class="doc-ptoptions">
<template v-if="docs[0].data">
<template v-for="doc of docs" :key="doc.key">
<div v-for="item of handleData(doc.data)" :key="item.value" class="flex flex-col p-2 cursor-pointer hover:bg-emphasis" @mouseenter="enterSection(item, doc.key)" @mouseleave="leaveSection">
<div v-for="item of handleData(doc.data)" :key="item.value" class="doc-ptoption" @mouseenter="enterSection(item, doc.key)" @mouseleave="leaveSection">
<span>{{ item.label }}</span>
<span class="text-muted-color text-sm">{{ item.label }} element of {{ doc.key }} component</span>
<span class="doc-ptoption-text">{{ item.label }} element of {{ doc.key }} component</span>
</div>
</template>
</template>
@ -28,21 +28,26 @@ export default {
},
methods: {
enterSection(item, componentName) {
let selector;
let selector,
cmpName = componentName;
if (item.label === 'root') selector = `[data-pc-name="${componentName.toLowerCase()}"]`;
if (componentName === 'ConfirmDialog') cmpName = 'Dialog';
if (item.label === 'root') selector = `[data-pc-name="${cmpName.toLowerCase()}"]`;
else if (item.label.startsWith('pc')) selector = `[data-pc-name="${item.label.toLowerCase()}"]`;
else selector = `[data-pc-section="${item.label.toLowerCase()}"]`;
this.hoveredElements = find(this.$refs.container, selector);
this.hoveredElements.forEach((el) => {
addClass(el, '!ring !ring-red-500');
if (this.hoveredElements.length === 0) this.hoveredElements = find(document.querySelector('body'), selector); //TODO:
this.hoveredElements?.forEach((el) => {
addClass(el, '!ring !ring-red-500 !z-10');
});
},
leaveSection() {
this.hoveredElements.forEach((el) => {
removeClass(el, '!ring !ring-red-500');
removeClass(el, '!ring !ring-red-500 !z-10');
});
this.hoveredElements = [];

4
apps/showcase/components/landing/samples/OverviewApp.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="flex-1 h-full overflow-y-auto pb-0.5">
<div class="flex flex-wrap gap-4 items-start justify-between">
<div class="flex flex-wrap gap-4 items-start justify-between p-1">
<div class="flex-1">
<div class="text-muted-color font-medium leading-normal">Overview</div>
<div class="text-color text-3xl font-semibold leading-normal">Welcome to PrimeVue</div>
@ -26,7 +26,7 @@
</Button>
</div>
</div>
<div class="mt-4 flex flex-wrap gap-6 items-center justify-between">
<div class="mt-4 flex flex-wrap gap-6 items-center justify-between p-1">
<SelectButton v-model="selectedTime" :options="timeOptions" aria-labelledby="basic" :allowEmpty="false" @change="changeSelect" />
<div class="flex items-center gap-2">
<Button label="Download" icon="pi pi-download" iconPos="right" />

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

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

@ -0,0 +1,63 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<Accordion value="0">
<AccordionPanel value="0">
<AccordionHeader>Header I</AccordionHeader>
<AccordionContent>
<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>
</AccordionContent>
</AccordionPanel>
<AccordionPanel value="1">
<AccordionHeader>Header II</AccordionHeader>
<AccordionContent>
<p class="m-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
</p>
</AccordionContent>
</AccordionPanel>
<AccordionPanel value="2">
<AccordionHeader>Header III</AccordionHeader>
<AccordionContent>
<p class="m-0">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
</p>
</AccordionContent>
</AccordionPanel>
</Accordion>
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
docs: [
{
data: getPTOptions('Accordion'),
key: 'Accordion'
},
{
data: getPTOptions('AccordionPanel'),
key: 'AccordionPanel'
},
{
data: getPTOptions('AccordionHeader'),
key: 'AccordionHeader'
},
{
data: getPTOptions('AccordionContent'),
key: 'AccordionContent'
}
]
};
}
};
</script>

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

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

38
apps/showcase/doc/card/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,38 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<Card style="width: 25rem">
<template #title>Advanced Card</template>
<template #subtitle>Card subtitle</template>
<template #content>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
quas!
</p>
</template>
<template #footer>
<div class="flex gap-4 mt-1">
<Button label="Cancel" severity="secondary" outlined class="w-full" />
<Button label="Save" class="w-full" />
</div>
</template>
</Card>
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
docs: [
{
data: getPTOptions('Card'),
key: 'Card'
}
]
};
}
};
</script>

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

36
apps/showcase/doc/common/apidoc/index.json
View File

@ -13921,29 +13921,21 @@
"description": "Used to pass attributes to the header title's DOM element."
},
{
"name": "icons",
"name": "headerActions",
"optional": true,
"readonly": false,
"type": "ConfirmDialogPassThroughOptionType",
"default": "",
"description": "Used to pass attributes to the header icons' DOM element."
"description": "Used to pass attributes to the header actions' DOM element."
},
{
"name": "closeButton",
"name": "pcCloseButton",
"optional": true,
"readonly": false,
"type": "ConfirmDialogPassThroughOptionType",
"default": "",
"description": "Used to pass attributes to the close button's component."
},
{
"name": "closeButtonIcon",
"optional": true,
"readonly": false,
"type": "ConfirmDialogPassThroughOptionType",
"default": "",
"description": "Used to pass attributes to the close button icon's component."
},
{
"name": "content",
"optional": true,
@ -25810,12 +25802,12 @@
"description": "Used to pass attributes to the legend's DOM element."
},
{
"name": "toggler",
"name": "toggleButton",
"optional": true,
"readonly": false,
"type": "FieldsetPassThroughOptionType",
"default": "",
"description": "Used to pass attributes to the toggler's DOM element."
"description": "Used to pass attributes to the toggle button's DOM element."
},
{
"name": "toggleIcon",
@ -25825,14 +25817,6 @@
"default": "",
"description": "Used to pass attributes to the toggle icon's DOM element."
},
{
"name": "toggleButton",
"optional": true,
"readonly": false,
"type": "FieldsetPassThroughOptionType",
"default": "",
"description": "Used to pass attributes to the legend label's DOM element."
},
{
"name": "legendLabel",
"optional": true,
@ -50637,15 +50621,7 @@
"readonly": false,
"type": "any",
"default": "",
"description": "Used to pass attributes to the previous button's DOM element."
},
{
"name": "button",
"optional": true,
"readonly": false,
"type": "any",
"default": "",
"description": "Used to pass attributes to the previous button's DOM element."
"description": "Used to pass attributes to the root's DOM element."
},
{
"name": "hooks",

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

47
apps/showcase/doc/confirmpopup/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,47 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="ptViewerDoc">
<ConfirmPopup group="ptviewer"></ConfirmPopup>
<Button ref="btn" @click="confirm1($event)" label="Open Popup" outlined></Button>
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
ptViewerDoc: [
{
data: getPTOptions('ConfirmPopup'),
key: 'ConfirmPopup'
}
]
};
},
methods: {
confirm1(event) {
this.$confirm.require({
target: event.currentTarget,
message: 'Are you sure you want to proceed?',
icon: 'pi pi-exclamation-triangle',
rejectProps: {
label: 'Cancel',
severity: 'secondary',
outlined: true
},
acceptProps: {
label: 'Save'
},
accept: () => {
this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
},
reject: () => {
this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
}
});
}
}
};
</script>

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

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

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

@ -0,0 +1,25 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<DeferredContent>
<img src="https://primefaces.org/cdn/primevue/images/nature/nature4.jpg" alt="Nature" />
</DeferredContent>
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
docs: [
{
data: getPTOptions('DeferredContent'),
key: 'DeferredContent'
}
]
};
}
};
</script>

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

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

40
apps/showcase/doc/dialog/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,40 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="ptViewerDoc">
<Dialog v-model:visible="visible" appendTo="#doc-ptviewer" header="Edit Profile" maximizable pt:mask="!relative" :draggable="false" class="!my-auto" :style="{ width: '25rem' }">
<span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
<div class="flex items-center gap-4 mb-4">
<label for="username" class="font-semibold w-24">Username</label>
<InputText id="username" class="flex-auto" autocomplete="off" />
</div>
<div class="flex items-center gap-4 mb-8">
<label for="email" class="font-semibold w-24">Email</label>
<InputText id="email" class="flex-auto" autocomplete="off" />
</div>
<template #footer>
<div class="flex justify-end gap-2">
<Button type="button" label="Cancel" severity="secondary"></Button>
<Button type="button" label="Save"></Button>
</div>
</template>
</Dialog>
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
visible: true,
ptViewerDoc: [
{
data: getPTOptions('Dialog'),
key: 'Dialog'
}
]
};
}
};
</script>

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

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

5
apps/showcase/doc/dynamicdialog/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,5 @@
<template>
<DocSectionText v-bind="$attrs">
<p>For more information visit <PrimeVueNuxtLink to="/dialog/#pt.viewer">Dialog PT</PrimeVueNuxtLink>.</p>
</DocSectionText>
</template>

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

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

28
apps/showcase/doc/fieldset/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,28 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<Fieldset legend="Header" 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>
</Fieldset>
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
docs: [
{
data: getPTOptions('Fieldset'),
key: 'Fieldset'
}
]
};
}
};
</script>

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

20
apps/showcase/doc/megamenu/TemplateDoc.vue
View File

@ -19,9 +19,8 @@
</svg>
</template>
<template #item="{ item }">
<a v-if="item.root" v-ripple class="flex items-center cursor-pointer px-4 py-2 overflow-hidden relative font-semibold text-lg uppercase" style="border-radius: 2rem">
<span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span>
<a v-if="item.root" class="flex items-center cursor-pointer px-4 py-2 overflow-hidden relative font-semibold text-lg uppercase" style="border-radius: 2rem">
<span>{{ item.label }}</span>
</a>
<a v-else-if="!item.image" class="flex items-center p-4 cursor-pointer mb-2 gap-3">
<span class="inline-flex items-center justify-center rounded-full bg-primary text-primary-contrast w-12 h-12">
@ -108,9 +107,8 @@ export default {
</svg>
</template>
<template #item="{ item }">
<a v-if="item.root" v-ripple class="flex items-center cursor-pointer px-4 py-2 overflow-hidden relative font-semibold text-lg uppercase" style="border-radius: 2rem">
<span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span>
<a v-if="item.root" class="flex items-center cursor-pointer px-4 py-2 overflow-hidden relative font-semibold text-lg uppercase" style="border-radius: 2rem">
<span>{{ item.label }}</span>
</a>
<a v-else-if="!item.image" class="flex items-center p-4 cursor-pointer mb-2 gap-3">
<span class="inline-flex items-center justify-center rounded-full bg-primary text-primary-contrast w-12 h-12">
@ -149,9 +147,8 @@ export default {
</svg>
</template>
<template #item="{ item }">
<a v-if="item.root" v-ripple class="flex items-center cursor-pointer px-4 py-2 overflow-hidden relative font-semibold text-lg uppercase" style="border-radius: 2rem">
<span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span>
<a v-if="item.root" class="flex items-center cursor-pointer px-4 py-2 overflow-hidden relative font-semibold text-lg uppercase" style="border-radius: 2rem">
<span>{{ item.label }}</span>
</a>
<a v-else-if="!item.image" class="flex items-center p-4 cursor-pointer mb-2 gap-3">
<span class="inline-flex items-center justify-center rounded-full bg-primary text-primary-contrast w-12 h-12">
@ -249,9 +246,8 @@ export default {
</svg>
</template>
<template #item="{ item }">
<a v-if="item.root" v-ripple class="flex items-center cursor-pointer px-4 py-2 overflow-hidden relative font-semibold text-lg uppercase" style="border-radius: 2rem">
<span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span>
<a v-if="item.root" class="flex items-center cursor-pointer px-4 py-2 overflow-hidden relative font-semibold text-lg uppercase" style="border-radius: 2rem">
<span>{{ item.label }}</span>
</a>
<a v-else-if="!item.image" class="flex items-center p-4 cursor-pointer mb-2 gap-3">
<span class="inline-flex items-center justify-center rounded-full bg-primary text-primary-contrast w-12 h-12">

0
apps/showcase/doc/panel/pt/PTImage.vue → apps/showcase/doc/panel/pt/PTViewer.vue
View File

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

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

69
apps/showcase/doc/popover/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,69 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="ptViewerDoc">
<Button ref="btn" type="button" icon="pi pi-share-alt" label="Share" @click="toggle" />
<Popover ref="op" appendTo="self">
<div class="flex flex-col gap-4 w-[25rem]">
<div>
<span class="font-medium block mb-2">Share this document</span>
<InputGroup>
<InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-[25rem]"></InputText>
<InputGroupAddon>
<i class="pi pi-copy"></i>
</InputGroupAddon>
</InputGroup>
</div>
<div>
<span class="font-medium block mb-2">Invite Member</span>
<InputGroup>
<InputText disabled></InputText>
<Button label="Invite" icon="pi pi-users"></Button>
</InputGroup>
</div>
<div>
<span class="font-medium block mb-2">Team Members</span>
<ul class="list-none p-0 m-0 flex flex-col gap-4">
<li v-for="member in members" :key="member.name" class="flex items-center gap-2">
<img :src="`https://primefaces.org/cdn/primevue/images/avatar/${member.image}`" style="width: 32px" />
<div>
<span class="font-medium">{{ member.name }}</span>
<div class="text-sm text-surface-500 dark:text-surface-400">{{ member.email }}</div>
</div>
<div class="flex items-center gap-2 text-surface-500 dark:text-surface-400 ml-auto text-sm">
<span>{{ member.role }}</span>
<i class="pi pi-angle-down"></i>
</div>
</li>
</ul>
</div>
</div>
</Popover>
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
members: [
{ name: 'Amy Elsner', image: 'amyelsner.png', email: 'amy@email.com', role: 'Owner' },
{ name: 'Bernardo Dominic', image: 'bernardodominic.png', email: 'bernardo@email.com', role: 'Editor' },
{ name: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' }
],
ptViewerDoc: [
{
data: getPTOptions('Popover'),
key: 'Popover'
}
]
};
},
methods: {
toggle(event) {
this.$refs.op.show(event);
}
}
};
</script>

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

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

40
apps/showcase/doc/scrollpanel/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,40 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<ScrollPanel style="width: 100%; height: 200px" pt:bary="!visible !opacity-100">
<p>
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>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
</p>
<p>
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
</p>
<p class="m-0">
Quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non
recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat
</p>
</ScrollPanel>
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
docs: [
{
data: getPTOptions('ScrollPanel'),
key: 'ScrollPanel'
}
]
};
}
};
</script>

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

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

30
apps/showcase/doc/splitter/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,30 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<Splitter style="height: 300px" class="w-full">
<SplitterPanel class="flex items-center justify-center"> Panel 1 </SplitterPanel>
<SplitterPanel class="flex items-center justify-center"> Panel 2 </SplitterPanel>
</Splitter>
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
docs: [
{
data: getPTOptions('Splitter'),
key: 'Splitter'
},
{
data: getPTOptions('SplitterPanel'),
key: 'SplitterPanel'
}
]
};
}
};
</script>

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

8
apps/showcase/doc/stepper/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>

72
apps/showcase/doc/stepper/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,72 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<Stepper value="1" class="basis-[50rem]" linear>
<StepList :style="{ overflowX: 'unset' }">
<Step value="1">Header I</Step>
<Step value="2">Header II</Step>
<Step value="3">Header III</Step>
</StepList>
<StepPanels>
<StepPanel value="1">
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
</div>
<div class="flex pt-6 justify-end">
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" />
</div>
</StepPanel>
<StepPanel value="2">
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
</div>
<div class="flex pt-6 justify-between">
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" />
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" />
</div>
</StepPanel>
<StepPanel value="3">
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
</div>
<div class="pt-6">
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" />
</div>
</StepPanel>
</StepPanels>
</Stepper>
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
docs: [
{
data: getPTOptions('Stepper'),
key: 'Stepper'
},
{
data: getPTOptions('StepList'),
key: 'StepList'
},
{
data: getPTOptions('Step'),
key: 'Step'
},
{
data: getPTOptions('StepPanels'),
key: 'StepPanels'
},
{
data: getPTOptions('StepPanel'),
key: 'StepPanel'
}
]
};
}
};
</script>

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

0
apps/showcase/doc/tabs/pt/PTImage.vue → apps/showcase/doc/tabs/pt/PTViewer.vue
View File

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

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

40
apps/showcase/doc/toolbar/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,40 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<Toolbar class="w-full">
<template #start>
<Button icon="pi pi-plus" class="mr-2" severity="secondary" text />
<Button icon="pi pi-print" class="mr-2" severity="secondary" text />
<Button icon="pi pi-upload" severity="secondary" text />
</template>
<template #center>
<IconField>
<InputIcon>
<i class="pi pi-search" />
</InputIcon>
<InputText placeholder="Search" />
</IconField>
</template>
<template #end> <Button label="Save"></Button></template>
</Toolbar>
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
docs: [
{
data: getPTOptions('Toolbar'),
key: 'Toolbar'
}
]
};
}
};
</script>

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

8
apps/showcase/doc/tooltip/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>

23
apps/showcase/doc/tooltip/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,23 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="ptViewerDoc">
<Button v-tooltip="{ value: 'Confirm to proceed', hideDelay: 300000 }" severity="secondary" label="Tooltip" />
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
ptViewerDoc: [
{
data: getPTOptions('Tooltip'),
key: 'Tooltip'
}
]
};
}
};
</script>

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

2
apps/showcase/pages/templates/apollo/index.vue
View File

@ -43,7 +43,7 @@ export default {
license: {
documentLink: 'https://apollo.primevue.org/documentation/',
description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
showDiscount: true,
showDiscount: false,
licenseDetails: [
{
title: 'Basic License',

2
apps/showcase/pages/templates/atlantis/index.vue
View File

@ -42,7 +42,7 @@ export default {
license: {
documentLink: 'https://atlantis.primevue.org/documentation',
description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
showDiscount: true,
showDiscount: false,
licenseDetails: [
{
title: 'Basic License',

2
apps/showcase/pages/templates/avalon/index.vue
View File

@ -44,7 +44,7 @@ export default {
license: {
documentLink: 'https://avalon.primevue.org/documentation',
description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
showDiscount: true,
showDiscount: false,
licenseDetails: [
{
title: 'Basic License',

2
apps/showcase/pages/templates/diamond/index.vue
View File

@ -43,7 +43,7 @@ export default {
license: {
documentLink: 'https://diamond.primevue.org/documentation/',
description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
showDiscount: true,
showDiscount: false,
licenseDetails: [
{
title: 'Basic License',

2
apps/showcase/pages/templates/freya/index.vue
View File

@ -43,7 +43,7 @@ export default {
license: {
documentLink: 'https://freya.primevue.org/documentation',
description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
showDiscount: true,
showDiscount: false,
licenseDetails: [
{
title: 'Basic License',

2
apps/showcase/pages/templates/poseidon/index.vue
View File

@ -43,7 +43,7 @@ export default {
license: {
documentLink: 'https://poseidon.primevue.org/documentation/',
description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
showDiscount: true,
showDiscount: false,
licenseDetails: [
{
title: 'Basic License',

2
apps/showcase/pages/templates/ultima/index.vue
View File

@ -44,7 +44,7 @@ export default {
license: {
documentLink: 'https://ultima.primevue.org/documentation/',
description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
showDiscount: true,
showDiscount: false,
licenseDetails: [
{
title: 'Basic License',

2
apps/showcase/pages/templates/verona/index.vue
View File

@ -43,7 +43,7 @@ export default {
license: {
documentLink: 'https://verona.primevue.org/documentation',
description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
showDiscount: true,
showDiscount: false,
licenseDetails: [
{
title: 'Basic License',

8
apps/showcase/pages/uikit/index.vue
View File

@ -159,8 +159,8 @@
<div class="text-surface-500 dark:text-surface-400 font-medium">For individual designers</div>
<hr class="my-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
<div class="flex flex-wrap gap-4">
<span class="text-2xl text-muted-color line-through">$99</span>
<span class="text-2xl font-bold">$49</span>
<span v-if="false" class="text-2xl text-muted-color line-through">$99</span>
<span class="text-2xl font-bold">$99</span>
</div>
<hr class="my-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
<ul class="list-none p-0 m-0 grow text-lg">
@ -202,8 +202,8 @@
<div class="text-surface-500 dark:text-surface-400 font-medium">For small teams</div>
<hr class="my-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
<div class="flex flex-wrap gap-4">
<span class="text-2xl text-muted-color line-through">$249</span>
<span class="text-2xl font-bold">$149</span>
<span v-if="false" class="text-2xl text-muted-color line-through">$249</span>
<span class="text-2xl font-bold">$249</span>
</div>
<hr class="my-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
<ul class="list-none p-0 m-0 grow text-lg">

4
packages/core/package.json
View File

@ -52,8 +52,8 @@
"dev:link": "pnpm link --global && npm link"
},
"dependencies": {
"@primeuix/styled": "^0.0.5",
"@primeuix/utils": "^0.0.5"
"@primeuix/styled": "^0.1.1",
"@primeuix/utils": "^0.1.1"
},
"peerDependencies": {
"vue": "^3.0.0"

13
packages/core/src/basecomponent/BaseComponent.vue
View File

@ -2,9 +2,9 @@
import { Theme, ThemeService } from '@primeuix/styled';
import { findSingle } from '@primeuix/utils/dom';
import { getKeyValue, isArray, isFunction, isNotEmpty, isString, resolve, toFlatCase } from '@primeuix/utils/object';
import { uuid } from '@primeuix/utils/uuid';
import Base from '@primevue/core/base';
import BaseStyle from '@primevue/core/base/style';
import { UniqueComponentId } from '@primevue/core/utils';
import { mergeProps } from 'vue';
import BaseComponentStyle from './style/BaseComponentStyle';
@ -57,7 +57,9 @@ export default {
},
scopedStyleEl: undefined,
rootEl: undefined,
$attrSelector: undefined,
beforeCreate() {
this.$attrSelector = uuid('pc');
const _usept = this.pt?.['_usept'];
const originalValue = _usept ? this.pt?.originalValue?.[this.$.type.name] : undefined;
const value = _usept ? this.pt?.value?.[this.$.type.name] : this.pt;
@ -82,8 +84,7 @@ export default {
this.rootEl = findSingle(this.$el, `[data-pc-name="${toFlatCase(this.$.type.name)}"]`);
if (this.rootEl) {
this.rootEl.setAttribute(this.$attrSelector, '');
this.rootEl.$pc = { name: this.$.type.name, ...this.$params };
this.rootEl.$pc = { name: this.$.type.name, attrSelector: this.$attrSelector, ...this.$params };
}
this._hook('onMounted');
@ -231,7 +232,8 @@ export default {
key !== 'transition' && {
...(key === 'root' && {
[`${datasetPrefix}name`]: toFlatCase(isExtended ? this.pt?.['data-pc-section'] : this.$.type.name),
...(isExtended && { [`${datasetPrefix}extend`]: toFlatCase(this.$.type.name) })
...(isExtended && { [`${datasetPrefix}extend`]: toFlatCase(this.$.type.name) }),
[`${this.$attrSelector}`]: ''
}),
[`${datasetPrefix}section`]: toFlatCase(key)
}
@ -370,9 +372,6 @@ export default {
return acc;
}, {});
},
$attrSelector() {
return UniqueComponentId('pc');
}
}
};

7
packages/core/src/basedirective/BaseDirective.js
View File

@ -1,9 +1,9 @@
import { Theme, ThemeService } from '@primeuix/styled';
import { getKeyValue, isArray, isEmpty, isFunction, isObject, isString, resolve, toCapitalCase, toFlatCase } from '@primeuix/utils/object';
import { uuid } from '@primeuix/utils/uuid';
import Base from '@primevue/core/base';
import BaseStyle from '@primevue/core/base/style';
import PrimeVueService from '@primevue/core/service';
import { UniqueComponentId } from '@primevue/core/utils';
import { mergeProps } from 'vue';
const BaseDirective = {
@ -166,7 +166,7 @@ const BaseDirective = {
$el: $prevInstance['$el'] || el || undefined,
$style: { classes: undefined, inlineStyles: undefined, load: () => {}, loadCSS: () => {}, loadTheme: () => {}, ...options?.style },
$primevueConfig: config,
$attrSelector: el.$attrSelector,
$attrSelector: el.$pd?.[name]?.attrSelector,
/* computed instance variables */
defaultPT: () => BaseDirective._getPT(config?.pt, undefined, (value) => value?.directives?.[name]),
isUnstyled: () => (el.$instance?.$binding?.value?.unstyled !== undefined ? el.$instance?.$binding?.value?.unstyled : config?.unstyled),
@ -203,10 +203,11 @@ const BaseDirective = {
return {
created: (el, binding, vnode, prevVnode) => {
el.$pd ||= {};
el.$pd[name] = { name, attrSelector: uuid('pd') };
handleHook('created', el, binding, vnode, prevVnode);
},
beforeMount: (el, binding, vnode, prevVnode) => {
el.$attrSelector = UniqueComponentId('pd');
BaseDirective._loadStyles(el, binding, vnode);
handleHook('beforeMount', el, binding, vnode, prevVnode);
handleWatch(el);

2
packages/icons/package.json
View File

@ -39,7 +39,7 @@
"dev:link": "pnpm link --global && npm link"
},
"dependencies": {
"@primeuix/utils": "^0.0.5",
"@primeuix/utils": "^0.1.1",
"@primevue/core": "workspace:*"
},
"engines": {

4
packages/nuxt-module/package.json
View File

@ -68,8 +68,8 @@
},
"dependencies": {
"@nuxt/kit": "^3.7.3",
"@primeuix/styled": "^0.0.5",
"@primeuix/utils": "^0.0.5",
"@primeuix/styled": "^0.1.1",
"@primeuix/utils": "^0.1.1",
"primevue": "workspace:*",
"@primevue/auto-import-resolver": "workspace:*",
"@primevue/metadata": "workspace:*",

4
packages/primevue/package.json
View File

@ -329,8 +329,8 @@
"vitest": "^0.29.8"
},
"dependencies": {
"@primeuix/styled": "^0.0.5",
"@primeuix/utils": "^0.0.5",
"@primeuix/styled": "^0.1.1",
"@primeuix/utils": "^0.1.1",
"@primevue/core": "workspace:*",
"@primevue/icons": "workspace:*"
},

10
packages/primevue/src/confirmdialog/ConfirmDialog.d.ts vendored
View File

@ -78,17 +78,13 @@ export interface ConfirmDialogPassThroughOptions {
*/
title?: ConfirmDialogPassThroughOptionType;
/**
* Used to pass attributes to the header icons' DOM element.
* Used to pass attributes to the header actions' DOM element.
*/
icons?: ConfirmDialogPassThroughOptionType;
headerActions?: ConfirmDialogPassThroughOptionType;
/**
* Used to pass attributes to the close button's component.
*/
closeButton?: ConfirmDialogPassThroughOptionType;
/**
* Used to pass attributes to the close button icon's component.
*/
closeButtonIcon?: ConfirmDialogPassThroughOptionType;
pcCloseButton?: ConfirmDialogPassThroughOptionType;
/**
* Used to pass attributes to the content's DOM element.
*/

8
packages/primevue/src/fieldset/Fieldset.d.ts vendored
View File

@ -75,17 +75,13 @@ export interface FieldsetPassThroughOptions {
*/
legend?: FieldsetPassThroughOptionType;
/**
* Used to pass attributes to the toggler's DOM element.
* Used to pass attributes to the toggle button's DOM element.
*/
toggler?: FieldsetPassThroughOptionType;
toggleButton?: FieldsetPassThroughOptionType;
/**
* Used to pass attributes to the toggle icon's DOM element.
*/
toggleIcon?: FieldsetPassThroughOptionType;
/**
* Used to pass attributes to the legend label's DOM element.
*/
toggleButton?: FieldsetPassThroughOptionType;
/**
* Used to pass attributes to the legend label's DOM element.
*/

7
packages/primevue/src/scrolltop/ScrollTop.d.ts vendored
View File

@ -67,15 +67,10 @@ export interface ScrollTopSharedPassThroughMethodOptions {
*/
export interface ScrollTopPassThroughOptions {
/**
* Used to pass attributes to the previous button's DOM element.
* Used to pass attributes to the root's DOM element.
* @see {@link ButtonPassThroughOptions}
*/
root?: ButtonPassThroughOptions<ScrollTopSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the previous button's DOM element.
* @see {@link ButtonPassThroughOptions}
*/
button?: ButtonPassThroughOptions<ScrollTopSharedPassThroughMethodOptions>;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}

11
packages/primevue/src/scrolltop/ScrollTop.vue
View File

@ -1,9 +1,9 @@
<template>
<transition name="p-scrolltop" appear @enter="onEnter" @after-leave="onAfterLeave" v-bind="ptm('transition')">
<Button v-if="visible" :ref="containerRef" :class="cx('root')" @click="onClick" :aria-label="scrollTopAriaLabel" :unstyled="unstyled" v-bind="buttonProps" :pt="rootPTOptions()">
<Button v-if="visible" :ref="containerRef" :class="cx('root')" @click="onClick" :aria-label="scrollTopAriaLabel" :unstyled="unstyled" v-bind="buttonProps" :pt="pt">
<template #icon="slotProps">
<slot name="icon" :class="cx('icon')">
<component :is="icon ? 'span' : 'ChevronUpIcon'" :class="[cx('icon'), icon, slotProps.class]" v-bind="iconPTOptions" />
<component :is="icon ? 'span' : 'ChevronUpIcon'" :class="[cx('icon'), icon, slotProps.class]" v-bind="ptmi('root')['icon']" />
</slot>
</template>
</Button>
@ -15,7 +15,6 @@ import { getWindowScrollTop } from '@primeuix/utils/dom';
import { ZIndex } from '@primeuix/utils/zindex';
import ChevronUpIcon from '@primevue/icons/chevronup';
import Button from 'primevue/button';
import { mergeProps } from 'vue';
import BaseScrollTop from './BaseScrollTop.vue';
export default {
@ -89,12 +88,6 @@ export default {
},
containerRef(el) {
this.container = el ? el.$el : undefined;
},
rootPTOptions() {
return mergeProps(this.ptmi('root'), this.ptm('button'));
},
iconPTOptions() {
return mergeProps(this.ptmi('root')['icon'], this.ptm('button')['icon']);
}
},
computed: {

2
packages/themes/package.json
View File

@ -73,7 +73,7 @@
"dev:link": "pnpm link --global && npm link"
},
"dependencies": {
"@primeuix/styled": "^0.0.5"
"@primeuix/styled": "^0.1.1"
},
"engines": {
"node": ">=12.11.0"

1443
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff