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

Updated docs

pull/5806/head
Cagatay Civici 2024-05-27 12:56:08 +03:00
parent 438bc8a45e
commit 8c3bc59fbe
12 changed files with 136 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
doc/cdn/ExampleDoc.vue
View File

@ -20,8 +20,8 @@ export default {
</head> </head>
<body> <body>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"><\/script> <script src="https://unpkg.com/vue@3/dist/vue.global.js"><\/script>
<script src="https://unpkg.com/primevue/umd/primevue.min.js"><\/script> <script src="https://unpkg.com/primevue@4.0.0-rc.1/umd/primevue.min.js"><\/script>
<script src="https://unpkg.com/primevue/umd/themes/aura.min.js"><\/script> <script src="https://unpkg.com/primevue@4.0.0-rc.1/umd/themes/aura.min.js"><\/script>
<div id="app"> <div id="app">
<p-datepicker v-model="date"></p-datepicker> <p-datepicker v-model="date"></p-datepicker>

5
doc/cdn/PluginDoc.vue
View File

@ -1,9 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p> <p>PrimeVue plugin is required to be installed as an application plugin to set up the default <NuxtLink to="/configuration">configuration</NuxtLink>.</p>
PrimeVue plugin is required to be installed as an application plugin to set up the default <NuxtLink to="/configuration">configuration</NuxtLink>. The plugin is lightweight, only sets up the configuration object without affecting your
application.
</p>
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>

4
doc/cdn/ScriptDoc.vue
View File

@ -16,8 +16,8 @@ export default {
code: { code: {
basic: ` basic: `
https://unpkg.com/vue@3/dist/vue.global.js https://unpkg.com/vue@3/dist/vue.global.js
https://unpkg.com/primevue/umd/primevue.min.js https://unpkg.com/primevue@4.0.0-rc.1/umd/primevue.min.js
https://unpkg.com/primevue/umd/themes/{preset}.min.js // Optional, see theming section. https://unpkg.com/primevue@4.0.0-rc.1/umd/themes/aura.min.js // see theming for alternatives
` `
} }
}; };

8
doc/cdn/ThemingDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Include the theme preset via a script element after adding PrimeVue, see <NuxtLink to="/theming/styled/#presets">preset</NuxtLink> section for the complete list of available presets to choose from.</p> <p>Include the theme preset via a script element after adding PrimeVue, valid options are Aura, Lara and Nora.</p>
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code" hideToggleCode hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
</template> </template>
@ -11,9 +11,11 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
<!-- <script src="https://unpkg.com/primevue/umd/themes/{preset}.min.js"><\/script> --> <!-- <script src="https://unpkg.com/primevue@4.0.0-rc.1/umd/themes/{preset}.min.js"><\/script> -->
<script src="https://unpkg.com/primevue/umd/themes/aura.min.js"><\/script> <script src="https://unpkg.com/primevue@4.0.0-rc.1/umd/themes/aura.min.js"><\/script>
<script src="https://unpkg.com/primevue@4.0.0-rc.1/umd/themes/lara.min.js"><\/script>
<script src="https://unpkg.com/primevue@4.0.0-rc.1/umd/themes/nora.min.js"><\/script>
` `
} }
}; };

2
doc/configuration/PTOptionsDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p> <p>
Used to configure the <i>ptOptions</i> properties of components and the <i>usePassThrough</i> method. The <i>mergeSections</i> defines whether the sections from the main configuration gets added and the <i>mergeProps</i> controls whether Used to configure the <i>ptOptions</i> properties of components and the <i>usePassThrough</i> method. The <i>mergeSections</i> defines whether the sections from the main configuration gets added and the <i>mergeProps</i> controls whether
to override or merge the defined props. Defaults are <i>true</i> for <i>mergeSections</i> and <i>false</i> for <i>mergeProps</i>. Visit the <NuxtLink to="/passthrough">Pass Through Props</NuxtLink> documentation for more information. to override or merge the defined props. Defaults are <i>true</i> for <i>mergeSections</i> and <i>false</i> for <i>mergeProps</i>.
</p> </p>
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />

35
doc/configuration/ThemeDoc.vue Normal file
View File

@ -0,0 +1,35 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Style mode offers theming based on a design token based architecture. See the <NuxtLink to="/theming/styled">styled mode</NuxtLink> documentation for details such as building your own theme.</p>
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</DocSectionText>
</template>
<script>
export default {
data() {
return {
code: {
basic: `
import PrimeVue from 'primevue/config';
import Aura from 'primevue/themes/aura';
const app = createApp(App);
app.use(PrimeVue, {
theme: {
preset: Aura,
options: {
prefix: 'p',
darkModeSelector: 'system',
cssLayer: false
}
}
});
`
}
};
}
};
</script>

6
doc/vite/DownloadDoc.vue
View File

@ -12,13 +12,13 @@ export default {
code: { code: {
basic: ` basic: `
# Using npm # Using npm
npm install primevue npm install primevue@4.0.0-rc.1
# Using yarn # Using yarn
yarn add primevue yarn add primevue@4.0.0-rc.1
# Using pnpm # Using pnpm
pnpm add primevue pnpm add primevue@4.0.0-rc.1
` `
} }
}; };

29
doc/vite/StyledModeDoc.vue Normal file
View File

@ -0,0 +1,29 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Styled mode provides pre-skinned components, default theme is Aura with emerald as the primary color. See the <NuxtLink to="/theming/styled">styled mode</NuxtLink> documentation for details.</p>
</DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template>
<script>
export default {
data() {
return {
code: {
basic: `
import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
import Aura from 'primevue/themes/aura';
const app = createApp(App);
app.use(PrimeVue, {
theme: {
preset: Aura
}
});
`
}
};
}
};
</script>

33
doc/vite/UnstyledModeDoc.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
In unstyled mode, the components do not include any CSS so you'd need to style the components on your end, this is especially useful when building your own UI library on top of PrimeVue. Visit the
<NuxtLink to="/theming/unstyled">Unstyled mode</NuxtLink> documentation for more information and examples.
</p>
<p>
If you are using Tailwind CSS and prefer to have full control over the component styling, visit the <a href="https://tailwind.primevue.org/vite/">Tailwind CSS Presets</a> project to get you started with styling the components with
Tailwind utility classes.
</p>
<DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
</DocSectionText>
</template>
<script>
export default {
data() {
return {
code1: {
basic: `
import { createApp } from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);
app.use(PrimeVue, {
unstyled: true
});
`
}
};
}
};
</script>

4
doc/vite/UsageDoc.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p> <p>
Each component can be imported and registered individually so that you only bundle what you use. Import path is available in the documentation of the corresponding component. You may also use Each component can be imported and registered individually so that you only bundle what you use. Import path is available in the documentation of the corresponding component. In a future update with a vite plugin, components would be
<NuxtLink to="/autoimport">auto imports</NuxtLink> via the unplugin-vue-components plugin. imported automatically and optimized with tree shaking at build time.
</p> </p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">

8
pages/configuration/index.vue
View File

@ -7,7 +7,7 @@
<div class="doc-main"> <div class="doc-main">
<div class="doc-intro"> <div class="doc-intro">
<h1>Configuration</h1> <h1>Configuration</h1>
<p>Global configuration options of the components.</p> <p>Application widge configuration for PrimeVue.</p>
</div> </div>
<DocSections :docs="docs" /> <DocSections :docs="docs" />
</div> </div>
@ -21,6 +21,7 @@ import InputStyleDoc from '@/doc/configuration/InputStyleDoc.vue';
import PTDoc from '@/doc/configuration/PTDoc.vue'; import PTDoc from '@/doc/configuration/PTDoc.vue';
import PTOptionsDoc from '@/doc/configuration/PTOptionsDoc.vue'; import PTOptionsDoc from '@/doc/configuration/PTOptionsDoc.vue';
import RippleDoc from '@/doc/configuration/RippleDoc.vue'; import RippleDoc from '@/doc/configuration/RippleDoc.vue';
import ThemeDoc from '@/doc/configuration/ThemeDoc.vue';
import UnstyledDoc from '@/doc/configuration/UnstyledDoc.vue'; import UnstyledDoc from '@/doc/configuration/UnstyledDoc.vue';
import ZIndexDoc from '@/doc/configuration/ZIndexDoc.vue'; import ZIndexDoc from '@/doc/configuration/ZIndexDoc.vue';
import NonceDoc from '@/doc/configuration/csp/NonceDoc.vue'; import NonceDoc from '@/doc/configuration/csp/NonceDoc.vue';
@ -37,6 +38,11 @@ export default {
label: 'Import', label: 'Import',
component: ImportDoc component: ImportDoc
}, },
{
id: 'theme',
label: 'Theme',
component: ThemeDoc
},
{ {
id: 'unstyled', id: 'unstyled',
label: 'Unstyled', label: 'Unstyled',

18
pages/vite/index.vue
View File

@ -18,7 +18,8 @@
<script> <script>
import DownloadDoc from '@/doc/vite/DownloadDoc.vue'; import DownloadDoc from '@/doc/vite/DownloadDoc.vue';
import ExamplesDoc from '@/doc/vite/ExamplesDoc.vue'; import ExamplesDoc from '@/doc/vite/ExamplesDoc.vue';
import PluginDoc from '@/doc/vite/PluginDoc.vue'; import StyledModeDoc from '@/doc/vite/StyledModeDoc.vue';
import UnstyledModeDoc from '@/doc/vite/UnstyledModeDoc.vue';
import UsageDoc from '@/doc/vite/UsageDoc.vue'; import UsageDoc from '@/doc/vite/UsageDoc.vue';
export default { export default {
@ -33,7 +34,20 @@ export default {
{ {
id: 'plugin', id: 'plugin',
label: 'Plugin', label: 'Plugin',
component: PluginDoc description:
'PrimeVue plugin is required to be installed as an application plugin to set up the default configuration. The plugin is lightweight, only sets up the configuration object without affecting your application. PrimeVue has two styling modes; Styled and Unstyled. If you are just getting started, begin with the styled mode.',
children: [
{
id: 'styled',
label: 'Styled Mode',
component: StyledModeDoc
},
{
id: 'unstyled',
label: 'Unstyled Mode',
component: UnstyledModeDoc
}
]
}, },
{ {
id: 'usage', id: 'usage',