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

Merge branch 'master' into PV4555

pull/4570/head
FlipWarthog 2023-10-06 19:00:02 -04:00
parent f9360b8ade 7607f9e4f0
commit da524fc32b
10 changed files with 345 additions and 257 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
api-generator/build-apidoc.js
View File

@ -385,14 +385,14 @@ if (project) {
child.type?.declaration?.signatures[0]?.parameters.map((param, index) => {
if (index !== 0) functionParameters += `, `;
functionParameters += `<span class="text-800">${param.name}</span>: ${param.type?.name}`;
functionParameters += `<span class="text-primary-700">${param.name}</span>: ${param.type?.name}`;
});
type += `\t <span class="text-900">${child.name}</span>: <span class="text-600">(${functionParameters}) &rArr; ${child.type?.declaration?.signatures[0]?.type?.name}</span>, <span class="text-500">// ${child.type?.declaration?.signatures[0]?.comment.summary[0]?.text}</span>\n`;
type += `\t <span class="ml-3 text-primary-700">${child.name}</span>: <span class="text-primary-500">(${functionParameters}) &rArr; ${child.type?.declaration?.signatures[0]?.type?.name}</span>, <span class="text-primary-300">// ${child.type?.declaration?.signatures[0]?.comment.summary[0]?.text}</span>\n`;
} else {
const childType = child.type.elementType ? child.type.elementType.name : child.type.name;
type += ` \t <span class="text-900">${child.name}</span>: <span class="text-600">${childType}</span>, <span class="text-500">// ${child.comment?.summary[0]?.text}</span>\n `;
type += ` \t <span class="ml-3 text-primary-700">${child.name}</span>: <span class="text-primary-500">${childType}</span>, <span class="text-primary-300">// ${child.comment?.summary[0]?.text}</span>\n `;
}
}
});

3
assets/styles/layout/_code.scss
View File

@ -402,8 +402,7 @@ pre[class*="language-"] {
margin: 0;
color: var(--surface-900);
font-size: 14px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-radius: 10px;
}
}

89
assets/styles/layout/_doc.scss
View File

@ -63,11 +63,12 @@
}
.doc-intro {
margin-bottom: 2rem;
margin-bottom: 1.5rem;
p {
font-size: 1.125rem;
color: var(--surface-900);
margin: 0;
}
}
@ -238,6 +239,10 @@
pre {
margin: 0;
}
&:not(:last-child) {
margin-bottom: 1rem;
}
}
.doc-tablewrapper {
@ -254,7 +259,7 @@
th {
border-bottom: 1px solid var(--surface-border);
padding: 1rem;
padding: .75rem 1rem;
text-align: left;
text-transform: capitalize;
}
@ -265,38 +270,36 @@
}
td {
padding: 1rem;
padding: .75rem 1rem;
border-bottom: 1px solid var(--surface-border);
white-space: pre-wrap;
white-space: pre-line;
line-height: 1.5;
scroll-margin-top: 6.5rem;
&.doc-option-type {
&:first-child {
color: var(--primary-color);
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
}
.doc-option-type {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
color: var(--primary-500);
font-weight: 500;
> a {
color: var(--primary-500);
&:hover {
text-decoration: underline;
}
}
.doc-option-type-options-container {
display: flex;
align-items: center;
}
span.doc-option-type-options {
color: var(--primary-700);
}
}
&:first-child {
color: var(--primary-color);
font-weight: 700;
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
&.doc-option-link {
&:hover {
text-decoration: underline;
}
}
}
.doc-option-name,
@ -308,8 +311,9 @@
color: var(--highlight-text-color);
border-radius: 6px;
padding: 2px 6px;
font-weight: 400;
font-weight: 600;
font-style: normal;
white-space: nowrap;
.doc-option-link {
position: absolute;
@ -322,16 +326,6 @@
}
}
.doc-option-props {
display: flex;
background: var(--bluegray-50);
border-width: 1px;
border-style: solid;
border-radius: 6px;
padding: 2px 6px;
max-width: min-content;
}
&:hover {
.doc-option-name {
.doc-option-link {
@ -343,6 +337,43 @@
}
}
}
.doc-option-default,
.doc-option-returnType {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
font-weight: 400;
font-style: normal;
display: flex;
border-width: 1px;
border-style: solid;
border-radius: 6px;
padding: 2px 6px;
max-width: min-content;
}
.doc-option-parameter-name {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
color: var(--primary-700);
}
.doc-option-parameter-type {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
color: var(--primary-500);
}
.doc-option-params {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
}
.doc-option-light {
background: var(--bluegray-50);
border-color: var(--bluegray-100);
}
.doc-option-dark {
background: var(--bluegray-800);
border-color: var(--bluegray-800);
}
}
}
}

38
components/doc/DocApiTable.vue
View File

@ -19,45 +19,47 @@
</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' || k === 'options', 'doc-option-default': k === 'defaultValue' }"
:style="{ 'max-width': k === 'default' || k === 'returnType' ? '200px' : undefined }"
>
<td v-for="[k, v] in Object.entries(prop)" :key="k" :style="{ 'max-width': k === 'default' || k === 'returnType' ? '200px' : undefined }">
<template v-if="k !== 'readonly' && k !== 'optional' && k !== 'deprecated'">
<span v-if="k === 'name'" :id="id + '.' + v" class="doc-option-name" :class="{ 'line-through cursor-pointer': !!prop.deprecated }" :title="prop.deprecated">
{{ v }}<NuxtLink :to="`/${$router.currentRoute.value.name}/#${id}.${v}`" :class="['doc-option-link', optionLinkClass]"> <i class="pi pi-link"></i> </NuxtLink>
{{ v }}<NuxtLink :to="`/${$router.currentRoute.value.name}/#${id}.${v}`" class="doc-option-link"> <i class="pi pi-link"></i> </NuxtLink>
</span>
<template v-else-if="k === 'type'">
<template v-for="(value, i) in getType(v)" :key="value">
{{ i !== 0 ? ' | ' : '' }}<NuxtLink v-if="isLinkType(value)" :to="setLinkPath(value)" :class="['doc-option-link', optionLinkClass]">{{ value }}</NuxtLink
><span v-else>{{ value }}</span>
<span v-if="i !== 0" class="doc-option-type">{{ ' | ' }}</span>
<NuxtLink v-if="isLinkType(value)" :to="setLinkPath(value)" class="doc-option-type doc-option-link">{{ value }}</NuxtLink
><span v-else class="doc-option-type">{{ value }}</span>
</template>
</template>
<template v-else-if="k === 'options'">
<template v-for="val in v" :key="val.name">
<div class="doc-option-type-options-container">
{{ val.name }}: <span class="doc-option-type-options">{{ val.type }}</span>
{{ val.name }}: <span class="doc-option-type-options doc-option-type">{{ val.type }}</span>
</div>
</template>
</template>
<template v-else-if="k === 'parameters'">
<span v-if="v.name" :class="{ 'font-medium text-600': label === 'Slots' }"> {{ v.name }} : </span>
<div class="doc-option-params">
<span v-if="v.name" :class="{ 'text-primary-700': label === 'Slots', 'doc-option-parameter-name': label === 'Emits' }"> {{ v.name }} : </span>
<template v-for="(value, i) in getType(v.type)" :key="value">
{{ i !== 0 ? ' | ' : '' }}<NuxtLink v-if="isLinkType(value)" :to="setLinkPath(value)" :class="['doc-option-link', optionLinkClass]"> {{ value }} </NuxtLink>
<span v-else v-html="value"> </span>
{{ i !== 0 ? ' | ' : '' }}<NuxtLink v-if="isLinkType(value)" :to="setLinkPath(value)" class="doc-option-link doc-option-parameter-type"> {{ value }} </NuxtLink>
<span v-else :class="{ 'doc-option-parameter-type': label === 'Emits' }" v-html="value"> </span>
</template>
</div>
</template>
<div v-else-if="k === 'default' || k === 'returnType'" :id="id + '.' + k" :class="['doc-option-props', optionPropClass]">
<div v-else-if="k === 'default'" :id="id + '.' + k" :class="['doc-option-default', $appState.darkTheme ? 'doc-option-dark' : 'doc-option-light']">
{{ v === '' || v === undefined ? 'null' : v }}
</div>
<span v-else :id="id + '.' + k"> {{ v }} </span>
<div v-else-if="k === 'returnType'" :id="id + '.' + k" :class="['doc-option-returnType', $appState.darkTheme ? 'doc-option-dark' : 'doc-option-light']">
{{ v }}
</div>
<span v-else :id="id + '.' + k" class="doc-option-description"> {{ v }} </span>
</template>
</td>
</tr>
@ -165,12 +167,6 @@ export default {
}
return this.data[0].data ? 1 : 2;
},
optionLinkClass() {
return this.$appState.darkTheme ? 'text-primary-400' : 'text-primary-600';
},
optionPropClass() {
return this.$appState.darkTheme ? 'border-bluegray-800 bg-bluegray-800' : 'border-bluegray-100 bg-bluegray-50';
}
}
};

10
components/doc/DocSectionCode.vue
View File

@ -1,6 +1,10 @@
<template>
<div v-if="!embedded" class="surface-card mb-4" :class="scrollable ? '' : 'relative'" style="border-radius: 10px">
<div class="flex doc-section-code-buttons surface-card align-items-center justify-content-end z-1" :style="scrollable ? { position: 'sticky', padding: '0.75rem 0.75rem 0 0' } : { position: 'absolute', top: '0.75rem', right: '0.75rem' }">
<div v-if="!embedded" :class="scrollable ? 'doc-section-code' : 'relative doc-section-code'">
<div
class="flex doc-section-code-buttons surface-card align-items-center justify-content-end z-1"
:style="scrollable ? { position: 'sticky', padding: '0.75rem 0.75rem 0 0' } : { position: 'absolute', top: '0.75rem', right: '0.75rem' }"
style="gap: 0.75rem"
>
<template v-if="codeMode !== 'basic' && !hideToggleCode">
<Button
:class="['p-button-rounded p-button-text p-button-plain p-0 inline-flex align-items-center justify-content-center', { 'doc-section-code-buttons-active text-primary': codeLang === 'composition' }]"
@ -76,7 +80,7 @@
></Button>
</div>
<div class="relative doc-section-code overflow-auto" :style="scrollable ? { 'max-height': '40rem' } : undefined" style="border-radius: 10px">
<div :style="scrollable ? { 'max-height': '40rem' } : undefined">
<template v-if="codeMode === 'basic' && importCode">
<pre v-code.script><code>{{ code.basic }}
</code></pre>

2
components/doc/DocSections.vue
View File

@ -1,6 +1,6 @@
<template>
<template v-for="(doc, i) of docs" :key="doc.label + '_' + i">
<section class="py-3">
<section class="py-4">
<template v-if="doc.children">
<div :id="doc.id">
<DocSectionText :id="doc.id" :label="doc.label">

2
components/lib/scrollpanel/style/ScrollPanelStyle.js
View File

@ -16,7 +16,7 @@ const css = `
width: calc(100% + 18px);
padding: 0 18px 18px 0;
position: relative;
overflow: scroll;
overflow: auto;
box-sizing: border-box;
scrollbar-width: none;
}

20
components/lib/splitter/Splitter.d.ts vendored
View File

@ -55,6 +55,21 @@ export interface SplitterResizeStartEvent {
sizes: number[];
}
/**
* Custom resize event.
* @see {@link SplitterEmits.resize}
*/
export interface SplitterResizeEvent {
/**
* Browser event
*/
originalEvent: Event;
/**
* Sizes of the panels
*/
sizes: number[];
}
/**
* Custom resize end event.
* @see {@link SplitterEmits.resizeend}
@ -185,6 +200,11 @@ export interface SplitterEmits {
* @param {SplitterResizeStartEvent} event - Custom resize start event.
*/
resizestart(event: SplitterResizeStartEvent): void;
/**
* Callback to invoke during the resizing process.
* @param {SplitterResizeEvent} event - Custom resize event.
*/
resize(event: SplitterResizeEvent): void;
/**
* Callback to invoke when resize ends.
* @param {SplitterResizeEndEvent} event - Custom resize end event.

4
components/lib/splitter/Splitter.vue
View File

@ -28,7 +28,7 @@ import BaseSplitter from './BaseSplitter.vue';
export default {
name: 'Splitter',
extends: BaseSplitter,
emits: ['resizestart', 'resizeend'],
emits: ['resizestart', 'resizeend', 'resize'],
dragging: false,
mouseMoveListener: null,
mouseUpListener: null,
@ -141,6 +141,8 @@ export default {
this.panelSizes[this.prevPanelIndex] = newPrevPanelSize;
this.panelSizes[this.prevPanelIndex + 1] = newNextPanelSize;
}
this.$emit('resize', { originalEvent: event, sizes: this.panelSizes });
},
onResizeEnd(event) {
if (this.isStateful()) {

424
doc/common/apidoc/index.json
View File

File diff suppressed because it is too large Load Diff