Steps docs for router
Tuğçe Küçükoğlu
parent
637b3b398c
commit
81b2102c56
|
|
@ -3,7 +3,20 @@
|
|||
<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">
|
||||
<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>
|
||||
<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>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -15,27 +28,53 @@ export default {
|
|||
items: [
|
||||
{
|
||||
label: 'Personal',
|
||||
to: '/steps'
|
||||
route: '/steps'
|
||||
},
|
||||
{
|
||||
label: 'Seat',
|
||||
to: '/steps/seat'
|
||||
route: '/steps/seat'
|
||||
},
|
||||
{
|
||||
label: 'Payment',
|
||||
to: '/steps/payment'
|
||||
route: '/steps/payment'
|
||||
},
|
||||
{
|
||||
label: 'Confirmation',
|
||||
to: '/steps/confirmation'
|
||||
route: '/steps/confirmation'
|
||||
}
|
||||
],
|
||||
code: {
|
||||
basic: `<Steps :model="items" aria-label="Form Steps" />`,
|
||||
basic: `<Steps :model="items" aria-label="Form Steps" :readonly="false">
|
||||
<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>
|
||||
<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>`,
|
||||
options: `<template>
|
||||
<div>
|
||||
<div class="card">
|
||||
<Steps :model="items" :readonly="false" aria-label="Form Steps" />
|
||||
<Steps :model="items" aria-label="Form Steps" :readonly="false">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -47,19 +86,19 @@ export default {
|
|||
items: [
|
||||
{
|
||||
label: 'Personal',
|
||||
to: '/'
|
||||
route: '/steps'
|
||||
},
|
||||
{
|
||||
label: 'Seat',
|
||||
to: '/seat'
|
||||
route: '/steps/seat'
|
||||
},
|
||||
{
|
||||
label: 'Payment',
|
||||
to: '/payment'
|
||||
route: '/steps/payment'
|
||||
},
|
||||
{
|
||||
label: 'Confirmation',
|
||||
to: '/confirmation'
|
||||
route: '/steps/confirmation'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -69,7 +108,20 @@ export default {
|
|||
composition: `<template>
|
||||
<div>
|
||||
<div class="card">
|
||||
<Steps :model="items" :readonly="false" aria-label="Form Steps" />
|
||||
<Steps :model="items" aria-label="Form Steps" :readonly="false">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -80,19 +132,19 @@ import { ref } from "vue";
|
|||
const items = ref([
|
||||
{
|
||||
label: 'Personal',
|
||||
to: "/"
|
||||
route: "/"
|
||||
},
|
||||
{
|
||||
label: 'Seat',
|
||||
to: "/seat",
|
||||
route: "/seat",
|
||||
},
|
||||
{
|
||||
label: 'Payment',
|
||||
to: "/payment",
|
||||
route: "/payment",
|
||||
},
|
||||
{
|
||||
label: 'Confirmation',
|
||||
to: "/confirmation",
|
||||
route: "/confirmation",
|
||||
}
|
||||
]);
|
||||
<\/script>`
|
||||
|
|
|
|||
|
|
@ -3,7 +3,16 @@
|
|||
<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">
|
||||
<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>
|
||||
</template>
|
||||
</Steps>
|
||||
</div>
|
||||
|
||||
<NuxtPage v-slot="{ Component }" :formData="formObject" @prev-page="prevPage($event)" @next-page="nextPage($event)" @complete="complete">
|
||||
|
|
@ -22,25 +31,34 @@ export default {
|
|||
items: [
|
||||
{
|
||||
label: 'Personal',
|
||||
to: '/steps'
|
||||
route: '/steps'
|
||||
},
|
||||
{
|
||||
label: 'Seat',
|
||||
to: '/steps/seat'
|
||||
route: '/steps/seat'
|
||||
},
|
||||
{
|
||||
label: 'Payment',
|
||||
to: '/steps/payment'
|
||||
route: '/steps/payment'
|
||||
},
|
||||
{
|
||||
label: 'Confirmation',
|
||||
to: '/steps/confirmation'
|
||||
route: '/steps/confirmation'
|
||||
}
|
||||
],
|
||||
formObject: {},
|
||||
code: {
|
||||
basic: `<div class="card">
|
||||
<Steps :model="items" aria-label="Form Steps" />
|
||||
<Steps :model="items" aria-label="Form Steps">
|
||||
<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>
|
||||
</template>
|
||||
</Steps>
|
||||
</div>
|
||||
|
||||
<router-view v-slot="{ Component }" :formData="formObject" @prev-page="prevPage($event)" @next-page="nextPage($event)" @complete="complete">
|
||||
|
|
@ -50,11 +68,19 @@ export default {
|
|||
</router-view>`,
|
||||
options: `<template>
|
||||
<div>
|
||||
<Toast />
|
||||
|
||||
<div class="card">
|
||||
<Steps :model="items" aria-label="Form Steps" />
|
||||
<Steps :model="items" aria-label="Form Steps">
|
||||
<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>
|
||||
</template>
|
||||
</Steps>
|
||||
</div>
|
||||
<Toast />
|
||||
|
||||
<router-view v-slot="{Component}" :formData="formObject" @prevPage="prevPage($event)" @nextPage="nextPage($event)" @complete="complete">
|
||||
<keep-alive>
|
||||
|
|
@ -71,19 +97,19 @@ export default {
|
|||
items: [
|
||||
{
|
||||
label: 'Personal',
|
||||
to: '/'
|
||||
route: '/'
|
||||
},
|
||||
{
|
||||
label: 'Seat',
|
||||
to: '/seat'
|
||||
route: '/seat'
|
||||
},
|
||||
{
|
||||
label: 'Payment',
|
||||
to: '/payment'
|
||||
route: '/payment'
|
||||
},
|
||||
{
|
||||
label: 'Confirmation',
|
||||
to: '/confirmation'
|
||||
route: '/confirmation'
|
||||
}
|
||||
],
|
||||
formObject: {}
|
||||
|
|
@ -118,11 +144,19 @@ export default {
|
|||
</style>`,
|
||||
composition: `<template>
|
||||
<div>
|
||||
<Toast />
|
||||
|
||||
<div class="card">
|
||||
<Steps :model="items" aria-label="Form Steps" />
|
||||
<Steps :model="items" aria-label="Form Steps">
|
||||
<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>
|
||||
</template>
|
||||
</Steps>
|
||||
</div>
|
||||
<Toast />
|
||||
|
||||
<router-view v-slot="{Component}" :formData="formObject" @prevPage="prevPage($event)" @nextPage="nextPage($event)" @complete="complete">
|
||||
<keep-alive>
|
||||
|
|
@ -142,19 +176,19 @@ const toast = useToast();
|
|||
const items = ref([
|
||||
{
|
||||
label: 'Personal',
|
||||
to: "/"
|
||||
route: "/"
|
||||
},
|
||||
{
|
||||
label: 'Seat',
|
||||
to: "/seat",
|
||||
route: "/seat",
|
||||
},
|
||||
{
|
||||
label: 'Payment',
|
||||
to: "/payment",
|
||||
route: "/payment",
|
||||
},
|
||||
{
|
||||
label: 'Confirmation',
|
||||
to: "/confirmation",
|
||||
route: "/confirmation",
|
||||
}
|
||||
]);
|
||||
const formObject = ref({});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
<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>. Here is an <NuxtLink to="/steps/#basic">example</NuxtLink> with vue-router.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
<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>.
|
||||
<i>NuxtLink</i> or <i>router-link</i>. Here is an example with vue-router.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ import AccessibilityDoc from '@/doc/steps/AccessibilityDoc';
|
|||
import BasicDoc from '@/doc/steps/BasicDoc';
|
||||
import ImportDoc from '@/doc/steps/ImportDoc';
|
||||
import InteractiveDoc from '@/doc/steps/InteractiveDoc';
|
||||
import RouterDoc from '@/doc/steps/RouterDoc';
|
||||
import PTComponent from '@/doc/steps/pt/index.vue';
|
||||
import ThemingDoc from '@/doc/steps/theming/index.vue';
|
||||
|
||||
|
|
@ -37,6 +38,11 @@ export default {
|
|||
label: 'Interactive',
|
||||
component: InteractiveDoc
|
||||
},
|
||||
{
|
||||
id: 'router',
|
||||
label: 'Router',
|
||||
component: RouterDoc
|
||||
},
|
||||
{
|
||||
id: 'accessibility',
|
||||
label: 'Accessibility',
|
||||
|
|
|
|||
Loading…
Reference in New Issue