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

Added new docs

pull/6687/head
Cagatay Civici 2024-10-29 12:24:51 +03:00
parent 5e771cf979
commit 16b84cbe7f
15 changed files with 218 additions and 1655 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1597
apps/showcase/doc/theming/styled/PresetsDoc.vue
View File

File diff suppressed because it is too large Load Diff

35
apps/showcase/doc/theming/unstyled/ArchitectureDoc.vue
View File

@ -1,13 +1,38 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p> <p>
Unstyled mode consists of two solutions. First part is removal of the component specific style classes from the DOM, when <i>unstyled</i> setting is enabled components do not include any CSS selectors while core functionality is still The term <i>unstyled</i> is used to define an alternative styling approach instead of the default theming with design tokens. PrimeVue offers two options for styling the components with your own css; the <i>hybrid</i> mode and the
available. For example, in the default styled mode, the select component adds <i>.p-select</i> style class to the root element and includes CSS to corresponding style. In unstyled setting, this style class is not added to the root element <i>pure</i> mode.
and the CSS is not included in the page.
</p> </p>
<p> <p>
The second part is custom styling as components are displayed as transparent without their styles. <NuxtLink to="/passthrough">Pass Through Props</NuxtLink> feature is the key of since it also supports a global configuration to create In both options, the css variables of the design tokens and the css rule sets that utilize them are not included. The main difference is, the <i>hybrid</i> mode keeps the selectors in the DOM such as <i>p-select</i> whereas the
themes in unstyled mode. In fact, the upcoming Tailwind theme is basically a custom <i>pt</i> configuration. <i>pure</i> mode do not include them. Unstyled components still need to be styled on your end, in the next sections, we'll cover the styling solutions for both modes.
</p> </p>
</DocSectionText> </DocSectionText>
<table class="doc-table table-fixed">
<thead>
<tr>
<th></th>
<th>Hybrid</th>
<th>Pure</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-* selectors in DOM</td>
<td><i class="pi pi-check ms-4" /></td>
<td><i class="pi pi-times ms-4" /></td>
</tr>
<tr>
<td>CSS rule sets</td>
<td><i class="pi pi-times ms-4" /></td>
<td><i class="pi pi-times ms-4" /></td>
</tr>
<tr>
<td>CSS variables</td>
<td><i class="pi pi-times ms-4" /></td>
<td><i class="pi pi-times ms-4" /></td>
</tr>
</tbody>
</table>
</template> </template>

13
apps/showcase/doc/theming/unstyled/ComparisonDoc.vue Normal file
View File

@ -0,0 +1,13 @@
<template>
<DocSectionText v-bind="$attrs">
<p>It may be confusing which styling approach to choose from due to the amount of options such as Styled, Pure and Hybrid. We've created a short video that discusses the pros and cons of each approach.</p>
<p>
In summary, the styled mode is a powerful API to learn with first class support for Figma, as a result when working with a UI Designer that utilizes the PrimeVue Figma UI Kit, the development flow would be productive. The unstyled mode is
beneficial when you do not prefer to learn the default theming API, want full control over the styles or require Tailwind CSS as the only library for styling in your application. The downside of unstyled mode is that it requires the
styles need to be maintained in the application.
</p>
</DocSectionText>
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/5M6xM4tTMQU?si=FzeuOeJOaGBoM-yK" frameborder="0" allowfullscreen></iframe>
</div>
</template>

61
apps/showcase/doc/theming/unstyled/hybrid/HybridExampleDoc.vue Normal file
View File

@ -0,0 +1,61 @@
<template>
<DocSectionText v-bind="$attrs">
<p>In hybrid mode, the default css rules and variables are not included however the css selectors reside in the DOM so that you may use them to build your own rules.</p>
<div class="card flex justify-center">
<Button label="Search" icon="pi pi-search" />
</div>
<DocSectionCode :code="code" hideToggleCode hideStackBlitz />
</DocSectionText>
</template>
<script>
export default {
data() {
return {
code: {
basic: `
.p-button {
background: #a855f7;
border: 0 none !important;
color: white;
padding: 0.5rem 0.75rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
border-radius: 24px;
}
.p-button:enabled:hover {
background: #a855f7;
}
.p-button:enabled:active {
background: #9333ea;
}
`
}
};
}
};
</script>
<style lang="css" scoped>
.p-button {
background: #a855f7;
border: 0 none !important;
color: white;
padding: 0.5rem 0.75rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
border-radius: 24px;
}
.p-button:enabled:hover {
background: #a855f7;
}
.p-button:enabled:active {
background: #9333ea;
}
</style>

24
apps/showcase/doc/theming/unstyled/hybrid/HybridSetupDoc.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Hybrid mode is enabled for the whole suite by setting the <i>theme</i> option as <i>none</i>.</p>
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</DocSectionText>
</template>
<script>
export default {
data() {
return {
code: {
basic: `
import { createApp } from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);
app.use(PrimeVue, { theme: 'none' });
`
}
};
}
};
</script>

8
apps/showcase/doc/theming/unstyled/hybrid/HybridTailwindDoc.vue Normal file
View File

@ -0,0 +1,8 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
PrimeTek offers the Tailwind CSS version of the entire PrimeVue UI suite based on the <i>@apply</i> directive with IntelliSense support. Visit the
<a href="https://github.com/cagataycivici/primevue-tailwindcss-presets" target="_blank" rel="noopener noreferrer">Tailwind version of PrimeVue</a> for the documentation, demos and additional resources.
</p>
</DocSectionText>
</template>

7
apps/showcase/doc/theming/unstyled/libraries/TailwindDoc.vue
View File

@ -1,7 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Tailwind CSS is perfect fit for the unstyled mode, visit the dedicated <NuxtLink to="/tailwind">Tailwind CSS</NuxtLink> documentation for the first-class integration.</p>
</DocSectionText>
</template>
<script></script>

11
apps/showcase/doc/theming/unstyled/libraries/UnoCSSDoc.vue
View File

@ -1,11 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
To get started, UnoCSS should already be available in your application, if not visit the UnoCSS <a href="https://unocss.dev/integrations/">documentation</a> for the installation in various environments. Theming of PrimeVue components with
UnoCSS is mainly achieved with unstyled mode either using global setting or for a particular component only.
</p>
<p>For a sample, visit the <a href="https://github.com/primefaces/primevue-examples/tree/main/unstyled-unocss" target="_blank" rel="noopener noreferrer">example repository</a>.</p>
</DocSectionText>
</template>
<script></script>

7
apps/showcase/doc/theming/unstyled/ExampleDoc.vue → apps/showcase/doc/theming/unstyled/pure/PureExampleDoc.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p> <p>
Here is a sample that provides a style using Tailwind CSS. Before beginning, head over to the pass through section <NuxtLink to="/button">button</NuxtLink> documentation to learn more about the components internals. We'll be using the Here is a sample that styles a button component with Tailwind CSS using <NuxtLink to="/passthrough">pass through</NuxtLink> attributes. Before beginning, head over to the the pass through section at
<i>root</i>, <i>label</i> and <i>icon</i> elements to add a custom style. <NuxtLink to="/button">button</NuxtLink> documentation to learn more about the components internals section. We'll be using the <i>root</i>, <i>label</i> and <i>icon</i> elements to add a custom style.
</p> </p>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Button <Button
@ -30,7 +30,8 @@ export default {
unstyled unstyled
pt:root="bg-teal-500 hover:bg-teal-700 active:bg-teal-900 cursor-pointer py-2 px-4 rounded-full border-0 flex gap-2" pt:root="bg-teal-500 hover:bg-teal-700 active:bg-teal-900 cursor-pointer py-2 px-4 rounded-full border-0 flex gap-2"
pt:label="text-white font-bold text-lg" pt:label="text-white font-bold text-lg"
pt:icon="text-white text-xl" pt:icon="
"
/> />
` `
} }

11
apps/showcase/doc/theming/unstyled/ThemeDoc.vue → apps/showcase/doc/theming/unstyled/pure/PureGlobalDoc.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p> <p>
An unstyled theme is basically a global <i>pt</i> configuration so that it can be defined only once from a single location, still a particular component can override a global configuration since the <i>pt</i> props of a component and the A global configuration can be created at application level to avoid repetition via the global <i>pt</i> option so that the styles can be shared from a single location. A particular component can still override a global configuration with
global setting is merged with component having higher precedencee. its own <i>pt</i> property.
</p> </p>
</DocSectionText> </DocSectionText>
@ -20,11 +20,12 @@ import PrimeVue from "primevue/config";
const app = createApp(App); const app = createApp(App);
app.use(PrimeVue, { app.use(PrimeVue, {
unstyled: true,
pt: { pt: {
button: { button: {
root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-4 rounded border-0 flex gap-2' }, root: 'bg-teal-500 hover:bg-teal-700 active:bg-teal-900 cursor-pointer py-2 px-4 rounded-full border-0 flex gap-2',
label: 'text-white font-bold text-xl', // OR { class: 'text-white font-bold text-xl' } label: 'text-white font-bold text-lg',
icon: 'text-white text-2xl' icon: 'text-white text-xl'
}, },
panel: { panel: {
header: 'bg-primary text-primary-contrast border-primary', header: 'bg-primary text-primary-contrast border-primary',

2
apps/showcase/doc/theming/unstyled/SetupDoc.vue → apps/showcase/doc/theming/unstyled/pure/PureSetupDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Unstyled mode is enabled for the whole suite by setting <i>unstyled</i> as true during PrimeVue installation.</p> <p>Pure mode is enabled for the whole suite by enabling <i>unstyled</i> option during PrimeVue installation.</p>
<DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz /> <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
<p>Alternatively even in the default styled mode, a particular component can still be used as unstyled by adding the <i>unstyled</i> prop of the component.</p> <p>Alternatively even in the default styled mode, a particular component can still be used as unstyled by adding the <i>unstyled</i> prop of the component.</p>
<div class="card flex justify-center"> <div class="card flex justify-center">

9
apps/showcase/doc/theming/unstyled/pure/PureTailwindDoc.vue Normal file
View File

@ -0,0 +1,9 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
Tailwind CSS is perfect fit for the pure mode, our team has initiated the reference implementation of the global <i>pt</i> configuration to style the entire UI suite called the
<a href="https://github.com/cagataycivici/primevue-tailwindcss-presets" target="_blank" rel="noopener noreferrer">Tailwind CSS presets</a>. This add-on project is currently looking for community contributors to take over the ownership as
it requires significant bandwidth for PrimeTek to maintain both the styled mode and the unstyled mode presets via pass-through.
</p>
</DocSectionText>
</template>

2
apps/showcase/doc/vite/VerifyDoc.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p> <p>
Verify your setup by adding a component such as <NuxtLink to="/button">Button</NuxtLink>. Each component can be imported and registered individually so that you only include what you use for bundle optimizization. Import path is available Verify your setup by adding a component such as <NuxtLink to="/button">Button</NuxtLink>. Each component can be imported and registered individually so that you only include what you use for bundle optimization. Import path is available
in the documentation of the corresponding component. in the documentation of the corresponding component.
</p> </p>
</DocSectionText> </DocSectionText>

6
apps/showcase/pages/support/index.vue
View File

@ -53,7 +53,7 @@
</li> </li>
<li class="flex items-center mb-4"> <li class="flex items-center mb-4">
<i class="pi pi-check-circle mr-4 text-green-500"></i> <i class="pi pi-check-circle mr-4 text-green-500"></i>
<span class="leading-normal">Up to 5 accounts</span> <span class="leading-normal">Shared account per organization</span>
</li> </li>
<li class="flex items-center mb-4"> <li class="flex items-center mb-4">
<i class="pi pi-check-circle mr-4 text-green-500"></i> <i class="pi pi-check-circle mr-4 text-green-500"></i>
@ -85,7 +85,7 @@
</li> </li>
<li> <li>
<div class="font-semibold mb-1">2. Setup</div> <div class="font-semibold mb-1">2. Setup</div>
<span class="leading-normal">A private repository with an exclusive issue tracker is created for you at GitHub.</span> <span class="leading-normal">An account is created for you in our exclusive JIRA issue tracker.</span>
</li> </li>
<li> <li>
<div class="font-semibold mb-1">3. Request Support</div> <div class="font-semibold mb-1">3. Request Support</div>
@ -200,7 +200,7 @@
<div class="flex-1 flex flex-col gap-8"> <div class="flex-1 flex flex-col gap-8">
<div> <div>
<div class="leading-normal mb-2 font-semibold">How many issue tracker accounts do we get?</div> <div class="leading-normal mb-2 font-semibold">How many issue tracker accounts do we get?</div>
<p class="!m-0 leading-normal">We provide at most 5 accounts per organization.</p> <p class="!m-0 leading-normal">We provide 1 shared account per organization.</p>
</div> </div>
<div> <div>
<div class="leading-normal mb-2 font-semibold">What is the duration of the service?</div> <div class="leading-normal mb-2 font-semibold">What is the duration of the service?</div>

80
apps/showcase/pages/theming/unstyled/index.vue
View File

@ -2,14 +2,14 @@
<div> <div>
<Head> <Head>
<Title>Unstyled - PrimeVue</Title> <Title>Unstyled - PrimeVue</Title>
<Meta name="description" content="Styling PrimeVue with your favorite CSS library." /> <Meta name="description" content="Theming PrimeVue with your own styles." />
</Head> </Head>
<div class="doc"> <div class="doc">
<div class="doc-main"> <div class="doc-main">
<div class="doc-intro"> <div class="doc-intro">
<h1>Unstyled Mode</h1> <h1>Unstyled Mode</h1>
<p>Styling PrimeVue with your favorite CSS library.</p> <p>Theming PrimeVue with your own styles.</p>
</div> </div>
<DocSections :docs="docs" /> <DocSections :docs="docs" />
</div> </div>
@ -20,11 +20,14 @@
<script> <script>
import ArchitectureDoc from '@/doc/theming/unstyled/ArchitectureDoc.vue'; import ArchitectureDoc from '@/doc/theming/unstyled/ArchitectureDoc.vue';
import ExampleDoc from '@/doc/theming/unstyled/ExampleDoc.vue'; import ComparisonDoc from '@/doc/theming/unstyled/ComparisonDoc.vue';
import SetupDoc from '@/doc/theming/unstyled/SetupDoc.vue'; import HybridExampleDoc from '@/doc/theming/unstyled/hybrid/HybridExampleDoc.vue';
import ThemeDoc from '@/doc/theming/unstyled/ThemeDoc.vue'; import HybridSetupDoc from '@/doc/theming/unstyled/hybrid/HybridSetupDoc.vue';
import TailwindDoc from '@/doc/theming/unstyled/libraries/TailwindDoc.vue'; import HybridTailwindDoc from '@/doc/theming/unstyled/hybrid/HybridTailwindDoc.vue';
import UnoCSSDoc from '@/doc/theming/unstyled/libraries/UnoCSSDoc.vue'; import PureExampleDoc from '@/doc/theming/unstyled/pure/PureExampleDoc.vue';
import PureGlobalDoc from '@/doc/theming/unstyled/pure/PureGlobalDoc.vue';
import PureSetupDoc from '@/doc/theming/unstyled/pure/PureSetupDoc.vue';
import PureTailwindDoc from '@/doc/theming/unstyled/pure/PureTailwindDoc.vue';
export default { export default {
data() { data() {
@ -36,33 +39,54 @@ export default {
component: ArchitectureDoc component: ArchitectureDoc
}, },
{ {
id: 'setup', id: 'comparison',
label: 'Setup', label: 'Comparison',
component: SetupDoc component: ComparisonDoc
}, },
{ {
id: 'example', id: 'pure',
label: 'Example', label: 'Pure',
component: ExampleDoc
},
{
id: 'theme',
label: 'Theme',
component: ThemeDoc
},
{
id: 'libraries',
label: 'Libraries',
children: [ children: [
{ {
id: 'tailwind', id: 'pure-setup',
label: 'Tailwind', label: 'Setup',
component: TailwindDoc component: PureSetupDoc
}, },
{ {
id: 'unocss', id: 'pure-example',
label: 'UnoCSS', label: 'Example',
component: UnoCSSDoc component: PureExampleDoc
},
{
id: 'pure-global',
label: 'Global',
component: PureGlobalDoc
},
{
id: 'pure-tailwind',
label: 'Tailwind Presets',
component: PureTailwindDoc
}
]
},
{
id: 'hybrid',
label: 'Hybrid',
children: [
{
id: 'hybrid-setup',
label: 'Setup',
component: HybridSetupDoc
},
{
id: 'hybrid-example',
label: 'Example',
component: HybridExampleDoc
},
{
id: 'hybrid-tailwind',
label: 'Tailwind Version',
component: HybridTailwindDoc
} }
] ]
} }