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

Merge branch 'prod'

pull/4755/head^2
Cagatay Civici 2023-11-04 13:04:20 +03:00
parent b941287a83 77575168e5
commit edb19d837d
8 changed files with 78 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
doc/breadcrumb/BasicDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Breadcrumb requires a collection of menuitems as its <i>model</i>.</p> <p>Breadcrumb requires a collection of menuitems as its <i>model</i>, the root item is defined with the <i>home</i> property.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Breadcrumb :home="home" :model="items" /> <Breadcrumb :home="home" :model="items" />
@ -13,10 +13,9 @@ export default {
data() { data() {
return { return {
home: { home: {
icon: 'pi pi-home', icon: 'pi pi-home'
to: '/'
}, },
items: [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }], items: [{ label: 'Electronics' }, { label: 'Computer' }, { label: 'Accessories' }, { label: 'Keyboard' }, { label: 'Wireless' }],
code: { code: {
basic: ` basic: `
<Breadcrumb :home="home" :model="items" /> <Breadcrumb :home="home" :model="items" />
@ -33,15 +32,14 @@ export default {
data() { data() {
return { return {
home: { home: {
icon: 'pi pi-home', icon: 'pi pi-home'
to: '/',
}, },
items: [ items: [
{label: 'Computer'}, { label: 'Electronics' },
{label: 'Notebook'}, { label: 'Computer' },
{label: 'Accessories'}, { label: 'Accessories' },
{label: 'Backpacks'}, { label: 'Keyboard' },
{label: 'Item'} { label: 'Wireless' }
] ]
} }
} }
@ -59,15 +57,14 @@ export default {
import { ref } from "vue"; import { ref } from "vue";
const home = ref({ const home = ref({
icon: 'pi pi-home', icon: 'pi pi-home'
to: '/',
}); });
const items = ref([ const items = ref([
{label: 'Computer'}, { label: 'Electronics' },
{label: 'Notebook'}, { label: 'Computer' },
{label: 'Accessories'}, { label: 'Accessories' },
{label: 'Backpacks'}, { label: 'Keyboard' },
{label: 'Item'} { label: 'Wireless' }
]); ]);
<\/script> <\/script>
` `

83
doc/breadcrumb/RouterDoc.vue
View File

@ -1,27 +1,23 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p> <p>Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.</p>
Since v3.33.0 the vue-router dependency of menu components is deprecated and templating should be used to define router links instead. This approach provides flexibility to be able to use any kind of router link component such as
<i>NuxtLink</i> or <i>router-link</i>. Here is an example with vue-router.
</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Breadcrumb :home="home" :model="items"> <Breadcrumb :home="home" :model="items">
<template #item="{ label, item, props }"> <template #item="{ item, props }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom> <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action"> <a :href="href" v-bind="props.action" @click="navigate">
<span v-bind="props.icon" /> <span :class="[item.icon, 'text-color']" />
<span v-bind="props.label">{{ label }}</span> <span class="text-primary font-semibold">{{ item.label }}</span>
</a> </a>
</router-link> </router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action"> <a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-if="item.icon" v-bind="props.icon" /> <span class="text-color">{{ item.label }}</span>
<span v-bind="props.label">{{ label }}</span>
</a> </a>
</template> </template>
</Breadcrumb> </Breadcrumb>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" hideStackBlitz hideCodeSandbox />
</template> </template>
<script> <script>
@ -30,22 +26,21 @@ export default {
return { return {
home: { home: {
icon: 'pi pi-home', icon: 'pi pi-home',
route: '/' route: '/installation'
}, },
items: [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }], items: [{ label: 'Components' }, { label: 'Form' }, { label: 'InputText', route: '/inputtext' }],
code: { code: {
basic: ` basic: `
<Breadcrumb :home="home" :model="items"> <Breadcrumb :home="home" :model="items">
<template #item="{ label, item, props }"> <template #item="{ item, props }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom> <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action"> <a :href="href" v-bind="props.action" @click="navigate">
<span v-bind="props.icon" /> <span :class="[item.icon, 'text-color']" />
<span v-bind="props.label">{{ label }}</span> <span class="text-primary font-semibold">{{ item.label }}</span>
</a> </a>
</router-link> </router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action"> <a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-if="item.icon" v-bind="props.icon" /> <span class="text-color">{{ item.label }}</span>
<span v-bind="props.label">{{ label }}</span>
</a> </a>
</template> </template>
</Breadcrumb> </Breadcrumb>
@ -54,16 +49,15 @@ export default {
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Breadcrumb :home="home" :model="items"> <Breadcrumb :home="home" :model="items">
<template #item="{ label, item, props }"> <template #item="{ item, props }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom> <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action"> <a :href="href" v-bind="props.action" @click="navigate">
<span v-bind="props.icon" /> <span :class="[item.icon, 'text-color']" />
<span v-bind="props.label">{{ label }}</span> <span class="text-primary font-semibold">{{ item.label }}</span>
</a> </a>
</router-link> </router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action"> <a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-if="item.icon" v-bind="props.icon" /> <span class="text-color">{{ item.label }}</span>
<span v-bind="props.label">{{ label }}</span>
</a> </a>
</template> </template>
</Breadcrumb> </Breadcrumb>
@ -76,14 +70,12 @@ export default {
return { return {
home: { home: {
icon: 'pi pi-home', icon: 'pi pi-home',
route: '/' route: '/installation'
}, },
items: [ items: [
{label: 'Computer'}, { label: 'Components' },
{label: 'Notebook'}, { label: 'Form' },
{label: 'Accessories'}, { label: 'InputText', route: '/inputtext' }
{label: 'Backpacks'},
{label: 'Item'}
] ]
} }
} }
@ -94,16 +86,15 @@ export default {
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Breadcrumb :home="home" :model="items"> <Breadcrumb :home="home" :model="items">
<template #item="{ label, item, props }"> <template #item="{ item, props }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom> <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action"> <a :href="href" v-bind="props.action" @click="navigate">
<span v-bind="props.icon" /> <span :class="[item.icon, 'text-color']" />
<span v-bind="props.label">{{ label }}</span> <span class="text-primary font-semibold">{{ item.label }}</span>
</a> </a>
</router-link> </router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action"> <a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-if="item.icon" v-bind="props.icon" /> <span class="text-color">{{ item.label }}</span>
<span v-bind="props.label">{{ label }}</span>
</a> </a>
</template> </template>
</Breadcrumb> </Breadcrumb>
@ -115,14 +106,12 @@ import { ref } from "vue";
const home = ref({ const home = ref({
icon: 'pi pi-home', icon: 'pi pi-home',
route: '/' route: '/installation'
}); });
const items = ref([ const items = ref([
{label: 'Computer'}, { label: 'Components' },
{label: 'Notebook'}, { label: 'Form' },
{label: 'Accessories'}, { label: 'InputText', route: '/inputtext' }
{label: 'Backpacks'},
{label: 'Item'}
]); ]);
<\/script> <\/script>
` `

31
doc/breadcrumb/TemplateDoc.vue
View File

@ -1,14 +1,15 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Custom content can be placed inside the menuitem using the <i>item</i> templating.</p> <p>Custom content can be placed inside the items using the <i>item</i> template. The divider between the items has its own <i>separator</i> template.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Breadcrumb :home="home" :model="items"> <Breadcrumb :home="home" :model="items">
<template #item="{ item }"> <template #item="{ item }">
<a :class="item.class" :href="item.url"> <a class="cursor-pointer" :href="item.url">
<span :class="item.icon"></span> <span :class="item.icon"></span>
</a> </a>
</template> </template>
<template #separator> / </template>
</Breadcrumb> </Breadcrumb>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -18,15 +19,18 @@
export default { export default {
data() { data() {
return { return {
home: { icon: 'pi pi-home', url: 'https://primevue.org/' }, home: { icon: 'pi pi-home' },
items: [{ icon: 'pi pi-sitemap' }, { icon: 'pi pi-book' }, { icon: 'pi pi-wallet' }, { icon: 'pi pi-shopping-bag' }, { icon: 'pi pi-calculator' }], items: [{ icon: 'pi pi-sitemap' }, { icon: 'pi pi-book' }, { icon: 'pi pi-wallet' }, { icon: 'pi pi-shopping-bag' }, { icon: 'pi pi-calculator' }],
code: { code: {
basic: ` basic: `
<Breadcrumb :home="home" :model="items"> <Breadcrumb :home="home" :model="items">
<template #item="item"> <template #item="item">
<a :class="item.class"> <template #item="{ item }">
<span :class="item.icon"></span> <a class="cursor-pointer" :href="item.url">
</a> <span :class="item.icon"></span>
</a>
</template>
<template #separator> / </template>
</template> </template>
</Breadcrumb> </Breadcrumb>
`, `,
@ -34,11 +38,12 @@ export default {
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Breadcrumb :home="home" :model="items"> <Breadcrumb :home="home" :model="items">
<template #item="{item}"> <template #item="{ item }">
<a :class="item.class"> <a class="cursor-pointer" :href="item.url">
<span :class="item.icon"></span> <span :class="item.icon"></span>
</a> </a>
</template> </template>
<template #separator> / </template>
</Breadcrumb> </Breadcrumb>
</div> </div>
</template> </template>
@ -47,7 +52,7 @@ export default {
export default { export default {
data() { data() {
return { return {
home: { icon: 'pi pi-home', url: 'https://primevue.org/' }, home: { icon: 'pi pi-home' },
items: [{ icon: 'pi pi-sitemap' }, { icon: 'pi pi-book' }, { icon: 'pi pi-wallet' }, { icon: 'pi pi-shopping-bag' }, { icon: 'pi pi-calculator' }] items: [{ icon: 'pi pi-sitemap' }, { icon: 'pi pi-book' }, { icon: 'pi pi-wallet' }, { icon: 'pi pi-shopping-bag' }, { icon: 'pi pi-calculator' }]
} }
} }
@ -58,11 +63,12 @@ export default {
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Breadcrumb :home="home" :model="items"> <Breadcrumb :home="home" :model="items">
<template #item="{item}"> <template #item="{ item }">
<a :class="item.class"> <a class="cursor-pointer" :href="item.url">
<span :class="item.icon"></span> <span :class="item.icon"></span>
</a> </a>
</template> </template>
<template #separator> / </template>
</Breadcrumb> </Breadcrumb>
</div> </div>
</template> </template>
@ -70,9 +76,8 @@ export default {
<script setup> <script setup>
import { ref } from "vue"; import { ref } from "vue";
const home = ref({ icon: 'pi pi-home', url: 'https://primevue.org/' }); const home = ref({ icon: 'pi pi-home' });
const items = ref([{ icon: 'pi pi-sitemap' }, { icon: 'pi pi-book' }, { icon: 'pi pi-wallet' }, { icon: 'pi pi-shopping-bag' }, { icon: 'pi pi-calculator' }]); const items = ref([{ icon: 'pi pi-sitemap' }, { icon: 'pi pi-book' }, { icon: 'pi pi-wallet' }, { icon: 'pi pi-shopping-bag' }, { icon: 'pi pi-calculator' }]);
}
<\/script> <\/script>
` `
} }

2
doc/dock/AdvancedDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>A sample macOS implementation using various components.</p> <p>A sample desktop demo using various components.</p>
</DocSectionText> </DocSectionText>
<div class="card dock-demo"> <div class="card dock-demo">
<Toast position="top-center" group="tc" /> <Toast position="top-center" group="tc" />

2
doc/dock/BasicDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Menu requires a collection of menuitems as its <i>model</i>. Default location is <i>bottom</i> and other sides are also available when defined with the <i>position</i> property.</p> <p>Menu requires a collection of menuitems as its <i>model</i> and an <i>icon</i> template. Default location is <i>bottom</i> and other edges are also available when defined with the <i>position</i> property.</p>
</DocSectionText> </DocSectionText>
<div class="card dock-demo"> <div class="card dock-demo">
<div class="flex flex-wrap gap-3 mb-5"> <div class="flex flex-wrap gap-3 mb-5">

8
doc/dock/RouterDoc.vue
View File

@ -1,8 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
Since v3.33.0 the vue-router dependency of menu components is deprecated and templating should be used to define router links instead. This approach provides flexibility to be able to use any kind of router link component such as
<i>NuxtLink</i> or <i>router-link</i>.
</p>
</DocSectionText>
</template>

14
doc/menu/RouterDoc.vue
View File

@ -6,7 +6,7 @@
<Menu :model="items"> <Menu :model="items">
<template #item="{ item, props }"> <template #item="{ item, props }">
<router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom> <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
<a :href="href" v-bind="props.action" @click="navigate"> <a v-ripple :href="href" v-bind="props.action" @click="navigate">
<span :class="item.icon" /> <span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span> <span class="ml-2">{{ item.label }}</span>
</a> </a>
@ -43,7 +43,7 @@ export default {
}, },
{ {
label: 'External', label: 'External',
icon: 'pi pi-external-link', icon: 'pi pi-home',
url: 'https://vuejs.org/' url: 'https://vuejs.org/'
} }
] ]
@ -54,7 +54,7 @@ export default {
<Menu :model="items"> <Menu :model="items">
<template #item="{ item, props }"> <template #item="{ item, props }">
<router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom> <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
<a :href="href" v-bind="props.action" @click="navigate"> <a v-ripple :href="href" v-bind="props.action" @click="navigate">
<span :class="item.icon" /> <span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span> <span class="ml-2">{{ item.label }}</span>
</a> </a>
@ -72,7 +72,7 @@ export default {
<Menu :model="items"> <Menu :model="items">
<template #item="{ item, props }"> <template #item="{ item, props }">
<router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom> <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
<a :href="href" v-bind="props.action" @click="navigate"> <a v-ripple :href="href" v-bind="props.action" @click="navigate">
<span :class="item.icon" /> <span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span> <span class="ml-2">{{ item.label }}</span>
</a> </a>
@ -105,7 +105,7 @@ export default {
}, },
{ {
label: 'External', label: 'External',
icon: 'pi pi-external-link', icon: 'pi pi-home',
url: 'https://vuejs.org/' url: 'https://vuejs.org/'
} }
] ]
@ -120,7 +120,7 @@ export default {
<Menu :model="items"> <Menu :model="items">
<template #item="{ item, props }"> <template #item="{ item, props }">
<router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom> <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
<a :href="href" v-bind="props.action" @click="navigate"> <a v-ripple :href="href" v-bind="props.action" @click="navigate">
<span :class="item.icon" /> <span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span> <span class="ml-2">{{ item.label }}</span>
</a> </a>
@ -155,7 +155,7 @@ const items = ref([
}, },
{ {
label: 'External', label: 'External',
icon: 'pi pi-external-link', icon: 'pi pi-home',
url: 'https://vuejs.org/' url: 'https://vuejs.org/'
} }
]); ]);

6
pages/dock/index.vue
View File

@ -7,7 +7,6 @@ import AccessibilityDoc from '@/doc/dock/AccessibilityDoc.vue';
import AdvancedDoc from '@/doc/dock/AdvancedDoc.vue'; import AdvancedDoc from '@/doc/dock/AdvancedDoc.vue';
import BasicDoc from '@/doc/dock/BasicDoc.vue'; import BasicDoc from '@/doc/dock/BasicDoc.vue';
import ImportDoc from '@/doc/dock/ImportDoc.vue'; import ImportDoc from '@/doc/dock/ImportDoc.vue';
import RouterDoc from '@/doc/dock/RouterDoc.vue';
import PTComponent from '@/doc/dock/pt/index.vue'; import PTComponent from '@/doc/dock/pt/index.vue';
import ThemingDoc from '@/doc/dock/theming/index.vue'; import ThemingDoc from '@/doc/dock/theming/index.vue';
@ -30,11 +29,6 @@ export default {
label: 'Advanced', label: 'Advanced',
component: AdvancedDoc component: AdvancedDoc
}, },
{
id: 'router',
label: 'Router',
component: RouterDoc
},
{ {
id: 'accessibility', id: 'accessibility',
label: 'Accessibility', label: 'Accessibility',