primevue-mirror/components/doc/DocApiTable.vue

165 lines
6.3 KiB
Vue
Raw Normal View History

2023-02-28 08:29:30 +00:00
<template>
2023-03-06 10:59:56 +00:00
<DocSectionText :id="id" :label="label" :level="componentLevel">
{{ description || null }}
<p v-if="relatedProp" class="inline-block">
2023-03-06 13:43:19 +00:00
See <NuxtLink :to="setRelatedPropPath(relatedProp)" class="doc-option-link"> {{ relatedPropValue(relatedProp) }} </NuxtLink>
2023-03-06 10:59:56 +00:00
</p>
</DocSectionText>
2023-02-28 08:29:30 +00:00
2023-03-06 10:59:56 +00:00
<div v-if="!data[0].data" class="doc-tablewrapper mt-3">
<table class="doc-table">
<thead>
<tr>
<th v-for="header in Object.keys(data[0])" :key="header">
<template v-if="header !== 'readonly' && header !== 'optional' && header !== 'deprecated'">
{{ header }}
</template>
</th>
</tr>
</thead>
<tbody>
<tr v-for="prop in data" :key="prop">
<td v-for="[k, v] in Object.entries(prop)" :key="k" :class="{ 'doc-option-type': k === 'type', 'doc-option-default': k === 'defaultValue' }">
<template v-if="k !== 'readonly' && k !== 'optional' && k !== 'deprecated'">
2023-03-27 10:48:54 +00:00
<span v-if="k === 'name'" :id="id + '.' + v" class="doc-option-name" :class="{ 'line-through cursor-pointer': !!prop.deprecated }" :title="prop.deprecated">
2023-03-06 13:43:19 +00:00
{{ v
}}<NuxtLink :to="`/${$router.currentRoute.value.name}/#${id}.${v}`" class="doc-option-link">
2023-03-06 10:59:56 +00:00
<i class="pi pi-link"></i>
</NuxtLink>
</span>
<template v-else-if="k === 'type'">
<template v-for="(value, i) in getType(v)" :key="value">
2023-03-06 21:50:56 +00:00
{{ i !== 0 ? ' |' : '' }}<NuxtLink v-if="isLinkType(value)" :to="setLinkPath(value)" class="doc-option-link">{{ value }}</NuxtLink
><span v-else>{{ value }}</span>
</template>
2023-03-06 10:59:56 +00:00
</template>
2023-02-28 08:29:30 +00:00
2023-03-06 10:59:56 +00:00
<template v-else-if="k === 'parameters'">
2023-03-06 21:50:56 +00:00
<span v-if="v.name" :class="{ 'parameter-bold': label === 'Slots' }"> {{ v.name }} : </span>
2023-03-06 10:59:56 +00:00
<template v-for="(value, i) in getType(v.type)" :key="value">
2023-03-06 21:50:56 +00:00
{{ i !== 0 ? ' |' : '' }}<NuxtLink v-if="isLinkType(value)" :to="setLinkPath(value)" class="doc-option-link"> {{ value }} </NuxtLink>
<span v-else v-html="value"> </span>
2023-03-06 10:59:56 +00:00
</template>
2023-02-28 08:29:30 +00:00
</template>
2023-03-06 10:59:56 +00:00
2023-03-12 11:06:00 +00:00
<span v-else :id="id + '.' + k">
2023-03-06 10:59:56 +00:00
{{ v }}
</span>
</template>
</td>
</tr>
</tbody>
</table>
</div>
<template v-if="data[0].data && data[0].data.length > 0">
<template v-for="childData in data" :key="childData">
<DocApiTable :id="childData.id" :data="childData.data" :label="childData.label" :description="childData.description" :relatedProp="childData.relatedProp" :level="3" />
2023-02-28 08:29:30 +00:00
</template>
2023-03-06 10:59:56 +00:00
</template>
2023-02-28 08:29:30 +00:00
</template>
<script>
export default {
props: {
id: {
type: String
},
label: {
type: String
},
data: {
type: Array,
default: () => []
},
description: {
type: String
},
relatedProp: {
type: String
},
level: {
type: Number,
default: 1
2023-02-28 08:29:30 +00:00
}
},
methods: {
getType(value) {
2023-03-06 21:50:56 +00:00
if (this.label === 'Slots') {
return value?.split('|');
}
2023-03-06 21:50:56 +00:00
return value?.split('|').map((item) => {
return item.replace(/(\[|\]|<|>).*$/gm, '').trim();
});
},
isLinkType(value) {
2023-03-06 10:59:56 +00:00
if (this.label === 'Slots') return false;
2023-03-12 11:06:00 +00:00
const validValues = ['confirmationoptions', 'toastmessageoptions'];
2023-03-06 10:59:56 +00:00
2023-03-12 11:06:00 +00:00
return value.toLowerCase().includes(this.id.split('.')[1]) || validValues.includes(value.toLowerCase());
2023-02-28 08:29:30 +00:00
},
2023-03-06 10:59:56 +00:00
setLinkPath(value, type) {
2023-02-28 08:29:30 +00:00
const currentRoute = this.$router.currentRoute.value.name;
2023-03-12 11:06:00 +00:00
let componentName = this.id.split('.')[1];
2023-03-06 10:59:56 +00:00
2023-03-12 11:06:00 +00:00
const validValues = ['menuitem', 'confirmationoptions'];
let definationType = type ? type : value.includes('Type') ? 'types' : value.includes('Event') ? 'events' : validValues.includes(value.toLowerCase()) ? 'options' : 'interfaces';
2023-03-07 22:49:05 +00:00
2023-03-12 11:06:00 +00:00
if (componentName.includes('toast')) {
componentName = 'toast';
}
2023-03-06 10:59:56 +00:00
2023-03-12 11:06:00 +00:00
return definationType === 'options' ? `/${currentRoute}/#api.${definationType}.${value}` : `/${currentRoute}/#api.${componentName}.${definationType}.${value}`;
2023-03-06 10:59:56 +00:00
},
2023-03-06 13:43:19 +00:00
relatedPropValue(value) {
return this.findRelatedProps(value).secondPart;
},
2023-03-06 10:59:56 +00:00
setRelatedPropPath(value) {
2023-03-06 13:43:19 +00:00
let { firstPart, secondPart } = this.findRelatedProps(value);
const docName = this.$route.name;
firstPart = firstPart.toLowerCase().replace(docName, '');
return this.setLinkPath(secondPart, firstPart);
},
findRelatedProps(value) {
2023-03-06 10:59:56 +00:00
let firstPart = '';
let secondPart = '';
if (value.includes('.')) {
const parts = value.split('.');
firstPart = parts[0].trim();
secondPart = parts[1].trim();
} else if (value.includes('[')) {
const start = value.indexOf("['") + 2;
const end = value.indexOf("']");
firstPart = value.slice(0, start - 2).trim();
secondPart = value.slice(start, end).trim();
}
2023-03-06 13:43:19 +00:00
return { firstPart, secondPart };
2023-02-28 08:29:30 +00:00
}
},
computed: {
componentLevel() {
if (this.label === 'Interfaces' || this.label === 'Events') {
return 2;
} else if (this.level === 3) {
return 3;
}
return this.data[0].data ? 1 : 2;
}
2023-02-28 08:29:30 +00:00
}
};
</script>
2023-03-06 21:50:56 +00:00
<style scoped>
.parameter-bold {
font-weight: bold;
}
</style>