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

Unified link colors for accessibility and easier maintenance

pull/5018/head
Cagatay Civici 2023-12-31 11:35:02 +03:00
parent 65c6403acc
commit 69d9c0875b
21 changed files with 272 additions and 267 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -395,18 +395,18 @@ if (project) {
child.type?.declaration?.signatures[0]?.parameters.map((param, index) => {
if (index !== 0) functionParameters += `, `;
functionParameters += `<span class="text-primary-700">${param.name}</span>: ${param.type?.name}`;
functionParameters += `<span class="doc-option-parameter-name">${param.name}</span>: ${param.type?.name}`;
});
if (child.type?.declaration?.signatures[0]?.comment?.getTag('@deprecated')?.content[0]?.text) {
type += `\t <span class="ml-3 text-primary-700 line-through">${child.name}</span>: <span class="text-primary-500 line-through">(${functionParameters}) &rArr; ${child.type?.declaration?.signatures[0]?.type?.name}</span>, <span class="text-primary-300 line-through">// ${child.type?.declaration?.signatures[0]?.comment.summary[0]?.text}</span>\n`;
type += `\t <span class="ml-3 doc-option-parameter-name line-through">${child.name}</span>: <span class="doc-option-parameter-type line-through">(${functionParameters}) &rArr; ${child.type?.declaration?.signatures[0]?.type?.name}</span>, <span class="doc-option-parameter-type line-through">// ${child.type?.declaration?.signatures[0]?.comment.summary[0]?.text}</span>\n`;
} else {
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`;
type += `\t <span class="ml-3 doc-option-parameter-name">${child.name}</span>: <span class="doc-option-parameter-type">(${functionParameters}) &rArr; ${child.type?.declaration?.signatures[0]?.type?.name}</span>, <span class="doc-option-parameter-type">// ${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="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 `;
type += ` \t <span class="ml-3 doc-option-parameter-name">${child.name}</span>: <span class="doc-option-parameter-type">${childType}</span>, <span class="doc-option-parameter-type">// ${child.comment?.summary[0]?.text}</span>\n `;
}
}
});

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

@ -50,8 +50,8 @@
&.doc-tabmenu-active {
button {
border-bottom-color: var(--primary-color);
color: var(--primary-color);
border-bottom-color: var(--primary-color-default);
color: var(--primary-color-default);
}
}
}
@ -80,16 +80,24 @@
font-size: 1.125rem;
color: var(--surface-900);
margin: 0;
a {
@include doc-link();
}
}
}
.doc-link {
@include doc-link();
}
.doc-section-label {
display: flex;
align-items: center;
scroll-margin-top: 6.5rem;
> a {
color: var(--primary-color);
color: var(--primary-color-default);
opacity: 0.7;
margin-left: 1rem;
display: none;
@ -125,15 +133,7 @@
}
a {
color: var(--primary-color);
font-weight: 500;
transition: all .2s;
border-radius: var(--border-radius);
@include focus-visible();
&:hover {
text-decoration: underline;
}
@include doc-link();
}
}
@ -197,10 +197,10 @@
&.active-navbar-item {
> .navbar-item-content {
border-color: var(--primary-color);
border-color: var(--primary-color-default);
.px-link {
color: var(--primary-color);
color: var(--primary-color-default);
}
}
}
@ -312,14 +312,14 @@
scroll-margin-top: 6.5rem;
&:first-child {
color: var(--primary-color);
color: var(--primary-color-default);
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
font-weight: 600;
}
.doc-option-type {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
color: var(--primary-500);
color: var(--primary-color-default);
font-weight: 500;
.doc-option-type-options-container {
@ -355,7 +355,7 @@
position: absolute;
top: 0;
right: -1.5rem;
color: var(--primary-color);
color: var(--primary-color-default);
opacity: 0.7;
display: none;
transition: opacity 0.3s, colors 0.3s;
@ -389,12 +389,11 @@
.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);
color: var(--primary-color-default);
}
.doc-option-params {

2
assets/styles/layout/_footer.scss
View File

@ -10,7 +10,7 @@
border-top: 1px solid var(--surface-border);
a {
color: var(--primary-color);
color: var(--primary-color-default);
font-weight: 700;
transition: all .3s;
border-radius: var(--border-radius);

12
assets/styles/layout/_mixins.scss
View File

@ -4,4 +4,16 @@
outline-offset: 0;
box-shadow: $type var(--focus-ring);
}
}
@mixin doc-link() {
color: var(--primary-color-default);
font-weight: 500;
transition: all .2s;
border-radius: var(--border-radius);
@include focus-visible();
&:hover {
text-decoration: underline;
}
}

12
assets/styles/layout/_sidebar.scss
View File

@ -67,7 +67,7 @@
&:hover {
.menu-icon {
i {
color: var(--primary-color);
color: var(--primary-color-default);
}
}
@ -77,11 +77,11 @@
}
&.router-link-active {
color: var(--primary-color);
color: var(--primary-color-default);
> .menu-icon {
i {
color: var(--primary-color);
color: var(--primary-color-default);
}
}
}
@ -117,8 +117,8 @@
}
&.router-link-active {
color: var(--primary-color);
border-left-color: var(--primary-color);
color: var(--primary-color-default);
border-left-color: var(--primary-color-default);
}
}
@ -127,8 +127,6 @@
padding: 0;
}
&:has(.menu-child-category) {
margin-top: 1rem;
}

2
assets/styles/layout/variables/main/_dark.scss
View File

@ -1,4 +1,6 @@
.layout-dark {
--primary-color-default:var(--primary-400);
--primary-color-inverse-default:var(--gray-900);
--topbar-sticky-bg:rgba(0,0,0,.3);
--card-border: 0 none;
--card-bg: var(--surface-card);

2
assets/styles/layout/variables/main/_light.scss
View File

@ -1,4 +1,6 @@
.layout-light {
--primary-color-default:var(--primary-600);
--primary-color-inverse-default:var(--surface-0);
--topbar-sticky-bg:rgba(255,255,255,.7);
--card-border: 1px solid var(--surface-border);
--card-bg: var(--surface-card);

2
components/doc/DocApiTable.vue
View File

@ -43,7 +43,7 @@
<template v-else-if="k === 'parameters'">
<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>
<span v-if="v.name" class="doc-option-parameter-name"> {{ 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 doc-option-parameter-type"> {{ value }} </NuxtLink>
<span v-else :class="{ 'doc-option-parameter-type': label === 'Emits' }" v-html="value"> </span>

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

File diff suppressed because it is too large Load Diff

9
doc/introduction/OverviewDoc.vue
View File

@ -5,11 +5,10 @@
tune and customize as an in-house library.
</p>
<p class="mb-0">
The project has been created by <a href="https://www.primetek.com.tr" class="text-primary hover:underline font-medium">PrimeTek</a> a world-renowned vendor of popular UI Component suites, including
<a href="https://primefaces.org" class="text-primary hover:underline font-medium">PrimeFaces</a>, <a href="https://primeng.org" class="text-primary hover:underline font-medium">PrimeNG</a>, and
<a href="https://primereact.org" class="text-primary hover:underline font-medium">PrimeReact.</a> All the members in <NuxtLink to="/team">our team</NuxtLink> are full time employees of PrimeTek who share the same passion and vision for
open source to create awesome UI libraries. Depending on a 3rd party library may introduce risks if the library maintainers decide not to work on the project, however, this is not the case with PrimeVue as the track record of PrimeTek
shows. For example, PrimeFaces has been maintained actively since 2008.
The project has been created by <a href="https://www.primetek.com.tr">PrimeTek</a> a world-renowned vendor of popular UI Component suites, including <a href="https://primefaces.org">PrimeFaces</a>,
<a href="https://primeng.org">PrimeNG</a>, and <a href="https://primereact.org">PrimeReact.</a> All the members in <NuxtLink to="/team">our team</NuxtLink> are full time employees of PrimeTek who share the same passion and vision for open
source to create awesome UI libraries. Depending on a 3rd party library may introduce risks if the library maintainers decide not to work on the project, however, this is not the case with PrimeVue as the track record of PrimeTek shows.
For example, PrimeFaces has been maintained actively since 2008.
</p>
</DocSectionText>
</template>

2
doc/introduction/PassThroughDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p class="mb-0">
PassThrough is an innovative API to provide access to the internal DOM elements to add arbitrary attributes. In general, traditional UI component libraries encapsulate UI and logic with limited APIs that makes the developers dependant on
the library maintainer to extend this API by adding new props or events. With <NuxtLink to="/passthrough">PassThrough</NuxtLink> this limitation has been eliminated since, you'll be able to access the internal of the components to add
the library maintainer to extend this API by adding new props or events. With <NuxtLink to="/passthrough">Pass Through</NuxtLink> this limitation has been eliminated since, you'll be able to access the internal of the components to add
events and attributes. Some common use-cases are adding test attributes, additional aria attributes, custom events and styling.
</p>
</DocSectionText>

7
doc/introduction/SupportDoc.vue
View File

@ -1,10 +1,9 @@
<template>
<DocSectionText v-bind="$attrs">
<p class="mb-0">
<a href="https://github.com/orgs/primefaces/discussions" class="font-medium hover:underline text-primary">Forum</a> and <a href="https://discord.gg/gzKFYnpmCY" class="font-medium hover:underline text-primary">Discord</a> are the open
environments for the community users to seek support, post topics and discuss the technology. GitHub issue tracker is the channel where community users can create tickets however PrimeTek cannot guarantee an instant response time although
they are monitored and maintained by our staff regularly. If you need to secure our response within 1 business day in addition to other benefits, you may consider the optional <NuxtLink to="/support">PRO support</NuxtLink> service
instead.
<a href="https://github.com/orgs/primefaces/discussions">Forum</a> and <a href="https://discord.gg/gzKFYnpmCY">Discord</a> are the open environments for the community users to seek support, post topics and discuss the technology. GitHub
issue tracker is the channel where community users can create tickets however PrimeTek cannot guarantee an instant response time although they are monitored and maintained by our staff regularly. If you need to secure our response within
1 business day in addition to other benefits, you may consider the optional <NuxtLink to="/support">PRO support</NuxtLink> service instead.
</p>
</DocSectionText>
</template>

2
pages/bootstrap/index.vue
View File

@ -9,7 +9,7 @@
<div class="doc-main">
<div class="doc-intro">
<h1>Bootstrap</h1>
<p><a href="https://getbootstrap.com" class="font-medium hover:underline text-primary">Bootstrap</a> is a well-known CSS library to build responsive and mobile first web projects.</p>
<p><a href="https://getbootstrap.com">Bootstrap</a> is a well-known CSS library to build responsive and mobile first web projects.</p>
</div>
<DocSections :docs="docs" />
</div>

2
pages/bulma/index.vue
View File

@ -9,7 +9,7 @@
<div class="doc-main">
<div class="doc-intro">
<h1>Bulma</h1>
<p><a href="https://bulma.io/" class="font-medium hover:underline text-primary">Bulma</a> is a free, open source framework that provides ready-to-use frontend copmponents and utilities.</p>
<p><a href="https://bulma.io/">Bulma</a> is a free, open source framework that provides ready-to-use frontend copmponents and utilities.</p>
</div>
<DocSections :docs="docs" />
</div>

2
pages/icons/index.vue
View File

@ -10,7 +10,7 @@
<div class="doc-intro">
<h1>Icons</h1>
<p>
<a href="https://github.com/primefaces/primeicons" class="text-primary hover:underline font-medium"> PrimeIcons </a>
<a href="https://github.com/primefaces/primeicons"> PrimeIcons </a>
is the default icon library of PrimeVue with over 250 open source icons developed by PrimeTek. PrimeIcons library is optional as PrimeVue components can use any icon with templating.
</p>
</div>

2
pages/introduction/index.vue
View File

@ -39,7 +39,7 @@ export default {
},
{
id: 'passthrough',
label: 'PassThrough',
label: 'Pass Through',
component: PassThroughDoc
},
{

4
pages/roadmap/index.vue
View File

@ -8,8 +8,8 @@
<div class="doc-intro">
<h1>Roadmap</h1>
<p>
At <a href="https://www.primetek.com.tr/" class="font-medium hover:underline text-primary">PrimeTek</a>, we are passionate about improving PrimeVue and would like to share our ideas for 2024 with the community. These are planned to be
implemented in parallel to the regular maintenance work of the library involving review of issue tickets, PRs and PrimeVue PRO support.
At <a href="https://www.primetek.com.tr/">PrimeTek</a>, we are passionate about improving PrimeVue and would like to share our ideas for 2024 with the community. These are planned to be implemented in parallel to the regular
maintenance work of the library involving review of issue tickets, PRs and PrimeVue PRO support.
</p>
</div>

6
pages/support/index.vue
View File

@ -7,9 +7,9 @@
<i class="pi pi-github absolute text-200" style="bottom: -50px; right: -50px; font-size: 200px; transform: rotateX(45deg) rotateY(0deg) rotateZ(-45deg)"></i>
<div class="text-2xl text-900 font-semibold mb-3 relative">Community Support</div>
<p class="m-0 line-height-3 relative text-lg text-800">
<a href="https://github.com/orgs/primefaces/discussions" class="font-medium hover:underline text-primary">Forum</a> and <a href="https://discord.gg/gzKFYnpmCY" class="font-medium hover:underline text-primary">Discord</a> are where
the community users gather to seek support, post topics and discuss the technology. GitHub issue tracker is the channel where community users can create tickets however PrimeTek does not guarantee a response time although they are
monitored and maintained by our staff. If you need to secure our response within 1 business day, you may consider PRO support instead.
<a href="https://github.com/orgs/primefaces/discussions" class="doc-link">Forum</a> and <a href="https://discord.gg/gzKFYnpmCY" class="doc-link">Discord</a> are where the community users gather to seek support, post topics and
discuss the technology. GitHub issue tracker is the channel where community users can create tickets however PrimeTek does not guarantee a response time although they are monitored and maintained by our staff. If you need to
secure our response within 1 business day, you may consider PRO support instead.
</p>
</div>
<div class="card m-0 xl:w-9 text-white bg-cover" style="background-image: url('https://primefaces.org/cdn/primevue/images/support/card-pro.jpg')">

7
pages/team/index.vue
View File

@ -3,10 +3,9 @@
<div class="doc-intro">
<h1>Meet the Team</h1>
<p>
<a href="https://www.primetek.com.tr" class="text-primary hover:underline font-medium"> PrimeTek </a> is a world renowned vendor of popular UI Component suites including
<a href="https://primefaces.org" class="text-primary hover:underline font-medium"> PrimeFaces </a>, <a href="https://primeng.org" class="text-primary hover:underline font-medium"> PrimeNG </a>,
<a href="https://primereact.org" class="text-primary hover:underline font-medium"> PrimeReact </a> and
<a href="https://primevue.org" class="text-primary hover:underline font-medium"> PrimeVue </a>
<a href="https://www.primetek.com.tr"> PrimeTek </a> is a world renowned vendor of popular UI Component suites including <a href="https://primefaces.org"> PrimeFaces </a>, <a href="https://primeng.org"> PrimeNG </a>,
<a href="https://primereact.org"> PrimeReact </a> and
<a href="https://primevue.org"> PrimeVue </a>
. All the members in our team are full time employees of PrimeTek who share the same passion and vision for open source to create awesome UI libraries.
</p>
</div>

8
pages/uikit/index.vue
View File

@ -147,7 +147,7 @@
<div class="card mb-5" style="border-radius: 50px">
<div class="text-900 font-bold text-5xl mb-4 text-center">Pricing</div>
<div class="mb-2 text-center line-height-3 text-lg">Choose the right plan for your business. Whether you are an individual or a member of a team, UI Kit is available for affordable prices.</div>
<a href="https://www.primefaces.org/uikit/licenses" class="mb-6 text-primary font-medium hover:underline text-center block">View License Details</a>
<a href="https://www.primefaces.org/uikit/licenses" class="mb-6 doc-link text-center block">View License Details</a>
<div class="grid">
<div class="col-12 lg:col-4">
@ -302,9 +302,7 @@
</div>
<div class="col-12 lg:col-4 px-2 lg:px-5">
<div class="text-xl text-900 line-height-3 mb-2 text-900">We're a reseller, are we able to purchase a license on behalf of our client?</div>
<p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">
Yes, after the purchase, please <a href="mailto:contact@primetek.com.tr" class="text-primary font-medium hover:underline">contact us</a> so we can transfer the license to your client.
</p>
<p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">Yes, after the purchase, please <a href="mailto:contact@primetek.com.tr" class="doc-link">contact us</a> so we can transfer the license to your client.</p>
<div class="text-xl text-900 line-height-3 mb-2 font-medium text-900">Does the enterprise license include contractors within the organization?</div>
<p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">Yes, contractors are also able to use the UI Kit within your company.</p>
@ -319,7 +317,7 @@
<div class="text-xl text-900 line-height-3 mb-2 font-medium text-900">How can I get support?</div>
<p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">
Support is provided by PrimeTek via
<a href="https://github.com/orgs/primefaces/discussions/categories/figma-ui-kit" class="text-primary font-medium hover:underline">a dedicated forum channel monitored</a> by PrimeTek support staff.
<a href="https://github.com/orgs/primefaces/discussions/categories/figma-ui-kit" class="doc-link">a dedicated forum channel monitored</a> by PrimeTek support staff.
</p>
<div class="text-xl text-900 line-height-3 mb-2 font-medium text-900">What does lifetime support mean?</div>

5
pages/unocss/index.vue
View File

@ -9,10 +9,7 @@
<div class="doc-main">
<div class="doc-intro">
<h1>UnoCSS</h1>
<p>
<a href="https://unocss.dev" class="font-medium hover:underline text-primary">UnoCSS</a> is an instant atomic CSS engine designed to be flexible and extensible. The core is un-opinionated and all the CSS utilities are provided
via presets.
</p>
<p><a href="https://unocss.dev">UnoCSS</a> is an instant atomic CSS engine designed to be flexible and extensible. The core is un-opinionated and all the CSS utilities are provided via presets.</p>
</div>
<DocSections :docs="docs" />
</div>