vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Components added. Build issues fixed

Browse source
This commit is contained in:
Bahadir Sofuoglu 2022-09-14 14:26:01 +03:00
parent 5b66ed1093
commit 18c3721848
344 changed files with 12446 additions and 8758 deletions
Download patch file Download diff file Expand all files Collapse all files

54
components/steps/Steps.vue
View file

@ -1,18 +1,18 @@
<template>
<div :id="id" :class="containerClass">
<ul role="tablist">
<template v-for="(item,index) of model" :key="item.to">
<template v-for="(item, index) of model" :key="item.to">
<li v-if="visible(item)" :class="getItemClass(item)" :style="item.style" role="tab" :aria-selected="isActive(item)" :aria-expanded="isActive(item)">
<template v-if="!$slots.item">
<router-link :to="item.to" v-if="!isItemDisabled(item)" custom v-slot="{navigate, href, isActive, isExactActive}">
<a :href="href" :class="linkClass({isActive, isExactActive})" @click="onItemClick($event, item, navigate)" role="presentation">
<span class="p-steps-number">{{index + 1}}</span>
<span class="p-steps-title">{{label(item)}}</span>
<router-link v-if="!isItemDisabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
<a :href="href" :class="linkClass({ isActive, isExactActive })" @click="onItemClick($event, item, navigate)" role="presentation">
<span class="p-steps-number">{{ index + 1 }}</span>
<span class="p-steps-title">{{ label(item) }}</span>
</a>
</router-link>
<span v-else :class="linkClass()" role="presentation">
<span class="p-steps-number">{{index + 1}}</span>
<span class="p-steps-title">{{label(item)}}</span>
<span class="p-steps-number">{{ index + 1 }}</span>
<span class="p-steps-title">{{ label(item) }}</span>
</span>
</template>
<component v-else :is="$slots.item" :item="item"></component>
@ -23,7 +23,7 @@
</template>
<script>
import {UniqueComponentId} from 'primevue/utils';
import { UniqueComponentId } from 'primevue/utils';
export default {
name: 'Steps',
@ -32,7 +32,7 @@ export default {
type: String,
default: UniqueComponentId()
},
model: {
model: {
type: Array,
default: null
},
@ -49,6 +49,7 @@ export default {
onItemClick(event, item, navigate) {
if (this.disabled(item) || this.readonly) {
event.preventDefault();
return;
}
@ -67,36 +68,43 @@ export default {
return item.to ? this.$router.resolve(item.to).path === this.$route.path : false;
},
getItemClass(item) {
return ['p-steps-item', item.class, {
'p-highlight p-steps-current': this.isActive(item),
'p-disabled': this.isItemDisabled(item)
}];
return [
'p-steps-item',
item.class,
{
'p-highlight p-steps-current': this.isActive(item),
'p-disabled': this.isItemDisabled(item)
}
];
},
linkClass(routerProps) {
return ['p-menuitem-link', {
'router-link-active': routerProps && routerProps.isActive,
'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
}];
return [
'p-menuitem-link',
{
'router-link-active': routerProps && routerProps.isActive,
'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
}
];
},
isItemDisabled(item) {
return (this.disabled(item) || (this.readonly && !this.isActive(item)));
return this.disabled(item) || (this.readonly && !this.isActive(item));
},
visible(item) {
return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
},
disabled(item) {
return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
},
label(item) {
return (typeof item.label === 'function' ? item.label() : item.label);
return typeof item.label === 'function' ? item.label() : item.label;
}
},
computed: {
containerClass() {
return ['p-steps p-component', {'p-readonly': this.readonly}];
return ['p-steps p-component', { 'p-readonly': this.readonly }];
}
}
}
};
</script>
<style>