mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 17:02:38 +00:00
Steps router docs fixed
This commit is contained in:
Tuğçe Küçükoğlu
parent
f67812b61c
commit
71fe5e55d0
3 changed files with 297 additions and 13 deletions
|
|
@ -3,7 +3,16 @@
|
|||
<p>Steps requires a collection of menuitems as its <i>model</i>.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<Steps :model="items" aria-label="Form Steps" :readonly="false">
|
||||
<Steps
|
||||
:model="items"
|
||||
aria-label="Form Steps"
|
||||
:readonly="false"
|
||||
:pt="{
|
||||
menuitem: ({ context }) => ({
|
||||
class: isActive(context.item) && 'p-highlight p-steps-current'
|
||||
})
|
||||
}"
|
||||
>
|
||||
<template #item="{ label, item, index, props }">
|
||||
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
|
||||
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
|
||||
|
|
@ -11,10 +20,6 @@
|
|||
<span v-bind="props.label">{{ label }}</span>
|
||||
</a>
|
||||
</router-link>
|
||||
<span v-else v-bind="props.action">
|
||||
<span v-bind="props.step">{{ index + 1 }}</span>
|
||||
<span v-bind="props.label">{{ label }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</Steps>
|
||||
</div>
|
||||
|
|
@ -44,7 +49,12 @@ export default {
|
|||
}
|
||||
],
|
||||
code: {
|
||||
basic: `<Steps :model="items" aria-label="Form Steps" :readonly="false">
|
||||
basic: `<Steps :model="items" aria-label="Form Steps" :readonly="false"
|
||||
:pt="{
|
||||
menuitem: ({ context }) => ({
|
||||
class: isActive(context.item) && 'p-highlight p-steps-current'
|
||||
})
|
||||
}">
|
||||
<template #item="{ label, item, index, props }">
|
||||
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
|
||||
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
|
||||
|
|
@ -61,7 +71,12 @@ export default {
|
|||
options: `<template>
|
||||
<div>
|
||||
<div class="card">
|
||||
<Steps :model="items" aria-label="Form Steps" :readonly="false">
|
||||
<Steps :model="items" aria-label="Form Steps" :readonly="false"
|
||||
:pt="{
|
||||
menuitem: ({ context }) => ({
|
||||
class: isActive(context.item) && 'p-highlight p-steps-current'
|
||||
})
|
||||
}">
|
||||
<template #item="{ label, item, index, props }">
|
||||
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
|
||||
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
|
||||
|
|
@ -102,13 +117,23 @@ export default {
|
|||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isActive(item) {
|
||||
return item.route ? this.$router.resolve(item.route).path === this.$route.path : false;
|
||||
}
|
||||
}
|
||||
}
|
||||
<\/script>`,
|
||||
composition: `<template>
|
||||
<div>
|
||||
<div class="card">
|
||||
<Steps :model="items" aria-label="Form Steps" :readonly="false">
|
||||
<Steps :model="items" aria-label="Form Steps" :readonly="false"
|
||||
:pt="{
|
||||
menuitem: ({ context }) => ({
|
||||
class: isActive(context.item) && 'p-highlight p-steps-current'
|
||||
})
|
||||
}">
|
||||
<template #item="{ label, item, index, props }">
|
||||
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
|
||||
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
|
||||
|
|
@ -128,6 +153,10 @@ export default {
|
|||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const items = ref([
|
||||
{
|
||||
|
|
@ -147,9 +176,18 @@ const items = ref([
|
|||
route: "/confirmation",
|
||||
}
|
||||
]);
|
||||
|
||||
const isActive = (item) => {
|
||||
return item.route ? router.resolve(item.route).path === route.path : false;
|
||||
}
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
isActive(item) {
|
||||
return item.route ? this.$router.resolve(item.route).path === this.$route.path : false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,15 @@
|
|||
<p>In order to add interactivity to the component, disable <i>readonly</i> to control the Steps.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<Steps :model="items" aria-label="Form Steps">
|
||||
<Steps
|
||||
:model="items"
|
||||
aria-label="Form Steps"
|
||||
:pt="{
|
||||
menuitem: ({ context }) => ({
|
||||
class: isActive(context.item) && 'p-highlight p-steps-current'
|
||||
})
|
||||
}"
|
||||
>
|
||||
<template #item="{ label, item, index, props }">
|
||||
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
|
||||
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
|
||||
|
|
@ -49,7 +57,15 @@ export default {
|
|||
formObject: {},
|
||||
code: {
|
||||
basic: `<div class="card">
|
||||
<Steps :model="items" aria-label="Form Steps">
|
||||
<Steps
|
||||
:model="items"
|
||||
aria-label="Form Steps"
|
||||
:pt="{
|
||||
menuitem: ({ context }) => ({
|
||||
class: isActive(context.item) && 'p-highlight p-steps-current'
|
||||
})
|
||||
}"
|
||||
>
|
||||
<template #item="{ label, item, index, props }">
|
||||
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
|
||||
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
|
||||
|
|
@ -69,7 +85,15 @@ export default {
|
|||
options: `<template>
|
||||
<div>
|
||||
<div class="card">
|
||||
<Steps :model="items" aria-label="Form Steps">
|
||||
<Steps
|
||||
:model="items"
|
||||
aria-label="Form Steps"
|
||||
:pt="{
|
||||
menuitem: ({ context }) => ({
|
||||
class: isActive(context.item) && 'p-highlight p-steps-current'
|
||||
})
|
||||
}"
|
||||
>
|
||||
<template #item="{ label, item, index, props }">
|
||||
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
|
||||
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
|
||||
|
|
@ -128,6 +152,9 @@ export default {
|
|||
},
|
||||
complete() {
|
||||
this.$toast.add({severity:'success', summary:'Order submitted', detail: 'Dear, ' + this.formObject.firstname + ' ' + this.formObject.lastname + ' your order completed.'});
|
||||
},
|
||||
isActive(item) {
|
||||
return item.route ? this.$router.resolve(item.route).path === this.$route.path : false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -145,7 +172,15 @@ export default {
|
|||
composition: `<template>
|
||||
<div>
|
||||
<div class="card">
|
||||
<Steps :model="items" aria-label="Form Steps">
|
||||
<Steps
|
||||
:model="items"
|
||||
aria-label="Form Steps"
|
||||
:pt="{
|
||||
menuitem: ({ context }) => ({
|
||||
class: isActive(context.item) && 'p-highlight p-steps-current'
|
||||
})
|
||||
}"
|
||||
>
|
||||
<template #item="{ label, item, index, props }">
|
||||
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
|
||||
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
|
||||
|
|
@ -206,6 +241,10 @@ const prevPage = (event) => {
|
|||
const complete = () => {
|
||||
toast.add({severity:'success', summary:'Order submitted', detail: 'Dear, ' + formObject.value.firstname + ' ' + formObject.value.lastname + ' your order completed.'});
|
||||
};
|
||||
|
||||
const isActive = (item) => {
|
||||
return item.route ? router.resolve(item.route).path === route.path : false;
|
||||
};
|
||||
<\/script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -537,6 +576,9 @@ export default {
|
|||
},
|
||||
complete() {
|
||||
this.$toast.add({ severity: 'success', summary: 'Order submitted', detail: 'Dear, ' + this.formObject.firstname + ' ' + this.formObject.lastname + ' your order completed.' });
|
||||
},
|
||||
isActive(item) {
|
||||
return item.route ? this.$router.resolve(item.route).path === this.$route.path : false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,7 +2,211 @@
|
|||
<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>. Here is an <NuxtLink to="/steps/#basic">example</NuxtLink> with vue-router.
|
||||
<i>NuxtLink</i> or <i>router-link</i>. Here is an example with vue-router.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<Steps
|
||||
:model="items"
|
||||
aria-label="Form Steps"
|
||||
:readonly="false"
|
||||
:pt="{
|
||||
menuitem: ({ context }) => ({
|
||||
class: isActive(context.item) && 'p-highlight p-steps-current'
|
||||
})
|
||||
}"
|
||||
>
|
||||
<template #item="{ label, item, index, props }">
|
||||
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
|
||||
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
|
||||
<span v-bind="props.step">{{ index + 1 }}</span>
|
||||
<span v-bind="props.label">{{ label }}</span>
|
||||
</a>
|
||||
</router-link>
|
||||
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
|
||||
<span v-bind="props.step">{{ index + 1 }}</span>
|
||||
<span v-bind="props.label">{{ label }}</span>
|
||||
</a>
|
||||
</template>
|
||||
</Steps>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Personal',
|
||||
route: '/steps'
|
||||
},
|
||||
{
|
||||
label: 'Seat',
|
||||
route: '/steps/seat'
|
||||
},
|
||||
{
|
||||
label: 'Payment',
|
||||
route: '/steps/payment'
|
||||
},
|
||||
{
|
||||
label: 'Confirmation',
|
||||
route: '/steps/confirmation'
|
||||
},
|
||||
{
|
||||
label: 'File Upload',
|
||||
url: '/fileupload'
|
||||
}
|
||||
],
|
||||
code: {
|
||||
basic: `<Steps :model="items" aria-label="Form Steps" :readonly="false"
|
||||
:pt="{
|
||||
menuitem: ({ context }) => ({
|
||||
class: isActive(context.item) && 'p-highlight p-steps-current'
|
||||
})
|
||||
}">
|
||||
<template #item="{ label, item, index, props }">
|
||||
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
|
||||
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
|
||||
<span v-bind="props.step">{{ index + 1 }}</span>
|
||||
<span v-bind="props.label">{{ label }}</span>
|
||||
</a>
|
||||
</router-link>
|
||||
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
|
||||
<span v-bind="props.step">{{ index + 1 }}</span>
|
||||
<span v-bind="props.label">{{ label }}</span>
|
||||
</a>
|
||||
</template>
|
||||
</Steps>`,
|
||||
options: `<template>
|
||||
<div>
|
||||
<div class="card">
|
||||
<Steps :model="items" aria-label="Form Steps" :readonly="false"
|
||||
:pt="{
|
||||
menuitem: ({ context }) => ({
|
||||
class: isActive(context.item) && 'p-highlight p-steps-current'
|
||||
})
|
||||
}">
|
||||
<template #item="{ label, item, index, props }">
|
||||
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
|
||||
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
|
||||
<span v-bind="props.step">{{ index + 1 }}</span>
|
||||
<span v-bind="props.label">{{ label }}</span>
|
||||
</a>
|
||||
</router-link>
|
||||
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
|
||||
<span v-bind="props.step">{{ index + 1 }}</span>
|
||||
<span v-bind="props.label">{{ label }}</span>
|
||||
</a>
|
||||
</template>
|
||||
</Steps>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Personal',
|
||||
route: '/steps'
|
||||
},
|
||||
{
|
||||
label: 'Seat',
|
||||
route: '/steps/seat'
|
||||
},
|
||||
{
|
||||
label: 'Payment',
|
||||
route: '/steps/payment'
|
||||
},
|
||||
{
|
||||
label: 'Confirmation',
|
||||
route: '/steps/confirmation'
|
||||
},
|
||||
{
|
||||
label: 'File Upload',
|
||||
url: '/fileupload'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isActive(item) {
|
||||
return item.route ? this.$router.resolve(item.route).path === this.$route.path : false;
|
||||
}
|
||||
}
|
||||
}
|
||||
<\/script>`,
|
||||
composition: `<template>
|
||||
<div>
|
||||
<div class="card">
|
||||
<Steps :model="items" aria-label="Form Steps" :readonly="false"
|
||||
:pt="{
|
||||
menuitem: ({ context }) => ({
|
||||
class: isActive(context.item) && 'p-highlight p-steps-current'
|
||||
})
|
||||
}">
|
||||
<template #item="{ label, item, index, props }">
|
||||
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
|
||||
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
|
||||
<span v-bind="props.step">{{ index + 1 }}</span>
|
||||
<span v-bind="props.label">{{ label }}</span>
|
||||
</a>
|
||||
</router-link>
|
||||
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
|
||||
<span v-bind="props.step">{{ index + 1 }}</span>
|
||||
<span v-bind="props.label">{{ label }}</span>
|
||||
</a>
|
||||
</template>
|
||||
</Steps>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const items = ref([
|
||||
{
|
||||
label: 'Personal',
|
||||
route: "/"
|
||||
},
|
||||
{
|
||||
label: 'Seat',
|
||||
route: "/seat",
|
||||
},
|
||||
{
|
||||
label: 'Payment',
|
||||
route: "/payment",
|
||||
},
|
||||
{
|
||||
label: 'Confirmation',
|
||||
route: "/confirmation",
|
||||
},
|
||||
{
|
||||
label: 'File Upload',
|
||||
url: '/fileupload'
|
||||
}
|
||||
]);
|
||||
|
||||
const isActive = (item) => {
|
||||
return item.route ? router.resolve(item.route).path === route.path : false;
|
||||
}
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
isActive(item) {
|
||||
return item.route ? this.$router.resolve(item.route).path === this.$route.path : false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue