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

Codesandbox samples removed

pull/5182/head
tugcekucukoglu 2024-01-30 11:16:35 +03:00
parent 13e5910259
commit b11f12c7ef
217 changed files with 294 additions and 307 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
components/doc/DocSectionCode.vue
View File

@ -18,16 +18,6 @@
</button> </button>
</template> </template>
<template v-if="!hideCodeSandbox">
<button v-tooltip.bottom="{ value: 'Edit in CodeSandbox', class: 'doc-section-code-tooltip' }" type="button" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center" @click="showCodesandbox">
<svg role="img" viewBox="0 0 24 24" width="16" height="16" fill="currentColor" style="display: 'block'">
<path
d="M2 6l10.455-6L22.91 6 23 17.95 12.455 24 2 18V6zm2.088 2.481v4.757l3.345 1.86v3.516l3.972 2.296v-8.272L4.088 8.481zm16.739 0l-7.317 4.157v8.272l3.972-2.296V15.1l3.345-1.861V8.48zM5.134 6.601l7.303 4.144 7.32-4.18-3.871-2.197-3.41 1.945-3.43-1.968L5.133 6.6z"
/>
</svg>
</button>
</template>
<template v-if="!hideStackBlitz"> <template v-if="!hideStackBlitz">
<button v-tooltip.bottom="{ value: 'Edit in StackBlitz', class: 'doc-section-code-tooltip' }" type="button" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center" @click="showStackblitz"> <button v-tooltip.bottom="{ value: 'Edit in StackBlitz', class: 'doc-section-code-tooltip' }" type="button" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center" @click="showStackblitz">
<svg role="img" width="13" height="18" viewBox="0 0 13 19" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style="display: 'block'"> <svg role="img" width="13" height="18" viewBox="0 0 13 19" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style="display: 'block'">
@ -72,7 +62,7 @@
</template> </template>
<script> <script>
import { useCodeSandbox, useStackBlitz } from './codeeditor'; import { useStackBlitz } from './codeeditor';
export default { export default {
inheritAttrs: false, inheritAttrs: false,
@ -91,7 +81,7 @@ export default {
}, },
hideCodeSandbox: { hideCodeSandbox: {
type: Boolean, type: Boolean,
default: false default: true
}, },
hideStackBlitz: { hideStackBlitz: {
type: Boolean, type: Boolean,
@ -142,9 +132,6 @@ export default {
async copyCode() { async copyCode() {
await navigator.clipboard.writeText(this.code[this.codeLang]); await navigator.clipboard.writeText(this.code[this.codeLang]);
}, },
showCodesandbox() {
useCodeSandbox(this.codeLang, this.code[this.codeLang === 'data' ? 'options' : this.codeLang], this.service, this.code.pages, this.dependencies, this.component, this.extFiles);
},
showStackblitz() { showStackblitz() {
useStackBlitz(this.codeLang, this.code[this.codeLang === 'data' ? 'options' : this.codeLang], this.service, this.code.pages, this.dependencies, this.component, this.extFiles); useStackBlitz(this.codeLang, this.code[this.codeLang === 'data' ? 'options' : this.codeLang], this.service, this.code.pages, this.dependencies, this.component, this.extFiles);
} }

2
doc/accordion/ImportDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

4
doc/animateonscroll/ImportDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>
@ -10,7 +10,7 @@ export default {
code: { code: {
basic: ` basic: `
import AnimateOnScroll from 'primevue/animateonscroll'; import AnimateOnScroll from 'primevue/animateonscroll';
app.directive('animateonscroll', AnimateOnScroll); app.directive('animateonscroll', AnimateOnScroll);
` `
} }

2
doc/autocomplete/AccessibilityDoc.vue
View File

@ -12,7 +12,7 @@
element. element.
</p> </p>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" /> <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
<h3>Closed State Keyboard Support</h3> <h3>Closed State Keyboard Support</h3>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">

2
doc/autocomplete/ImportDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"></DocSectionText> <DocSectionText v-bind="$attrs"></DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/autoimport/OverviewDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>PrimeVue components need to be imported and configured individually. In the next section, we'll cleanup the code using auto imports.</p> <p>PrimeVue components need to be imported and configured individually. In the next section, we'll cleanup the code using auto imports.</p>
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

6
doc/autoimport/UnpluginDoc.vue
View File

@ -4,14 +4,14 @@
The <a href="https://github.com/unplugin/unplugin-vue-components" target="_blank" rel="noopener noreferrer">unplugin-vue-components</a> library can automatically import and register PrimeVue components with the built-in resolver. Let's The <a href="https://github.com/unplugin/unplugin-vue-components" target="_blank" rel="noopener noreferrer">unplugin-vue-components</a> library can automatically import and register PrimeVue components with the built-in resolver. Let's
begin with installing the library. begin with installing the library.
</p> </p>
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
<p>Next step would be adding the <i>PrimeVueResolver</i> at vite.config using the <i>Components</i> plugin.</p> <p>Next step would be adding the <i>PrimeVueResolver</i> at vite.config using the <i>Components</i> plugin.</p>
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
<p> <p>
That's it, now the initialization code can be refactored as the following. For configuration like namespacing, visit the That's it, now the initialization code can be refactored as the following. For configuration like namespacing, visit the
<a href="https://github.com/unplugin/unplugin-vue-components?tab=readme-ov-file#configuration" target="_blank" rel="noopener noreferrer">official documentation</a>. <a href="https://github.com/unplugin/unplugin-vue-components?tab=readme-ov-file#configuration" target="_blank" rel="noopener noreferrer">official documentation</a>.
</p> </p>
<DocSectionCode :code="code3" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code3" hideToggleCode importCode hideStackBlitz />
</DocSectionText> </DocSectionText>
</template> </template>

2
doc/avatar/ImportDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"></DocSectionText> <DocSectionText v-bind="$attrs"></DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/badge/ImportDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"></DocSectionText> <DocSectionText v-bind="$attrs"></DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/blockui/ImportDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/breadcrumb/ImportDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

10
doc/breadcrumb/RouterDoc.vue
View File

@ -17,7 +17,7 @@
</template> </template>
</Breadcrumb> </Breadcrumb>
</div> </div>
<DocSectionCode :code="code" hideStackBlitz hideCodeSandbox /> <DocSectionCode :code="code" hideStackBlitz />
</template> </template>
<script> <script>
@ -73,8 +73,8 @@ export default {
route: '/introduction' route: '/introduction'
}, },
items: [ items: [
{ label: 'Components' }, { label: 'Components' },
{ label: 'Form' }, { label: 'Form' },
{ label: 'InputText', route: '/inputtext' } { label: 'InputText', route: '/inputtext' }
] ]
} }
@ -109,8 +109,8 @@ const home = ref({
route: '/introduction' route: '/introduction'
}); });
const items = ref([ const items = ref([
{ label: 'Components' }, { label: 'Components' },
{ label: 'Form' }, { label: 'Form' },
{ label: 'InputText', route: '/inputtext' } { label: 'InputText', route: '/inputtext' }
]); ]);
<\/script> <\/script>

2
doc/button/AccessibilityDoc.vue
View File

@ -6,7 +6,7 @@
icon only or custom templating is used, it is recommended to use <i>aria-label</i> so that screen readers would be able to read the element properly. icon only or custom templating is used, it is recommended to use <i>aria-label</i> so that screen readers would be able to read the element properly.
</p> </p>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" /> <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
<h3>Keyboard Support</h3> <h3>Keyboard Support</h3>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">

2
doc/button/ImportDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/calendar/AccessibilityDoc.vue
View File

@ -28,7 +28,7 @@
<p>Calendar also includes a hidden section that is only available to screen readers with <i>aria-live</i> as "polite". This element is updated when the selected date changes to instruct the user about the current date selected.</p> <p>Calendar also includes a hidden section that is only available to screen readers with <i>aria-live</i> as "polite". This element is updated when the selected date changes to instruct the user about the current date selected.</p>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" /> <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
<h3>Choose Date Button Keyboard Support</h3> <h3>Choose Date Button Keyboard Support</h3>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">

2
doc/calendar/ImportDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/card/AccessibilityDoc.vue
View File

@ -6,7 +6,7 @@
to use one of the <a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">landmark</a> roles like <i>region</i>, you may use the <i>role</i> property. to use one of the <a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">landmark</a> roles like <i>region</i>, you may use the <i>role</i> property.
</p> </p>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" /> <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
<h3>Keyboard Support</h3> <h3>Keyboard Support</h3>
<p>Component does not include any interactive elements.</p> <p>Component does not include any interactive elements.</p>

2
doc/card/ImportDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/carousel/ImportDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/cascadeselect/AccessibilityDoc.vue
View File

@ -10,7 +10,7 @@
<i>aria-expanded</i> attributes. The container element of a treenode has the <i>group</i> role. The <i>aria-setsize</i>, <i>aria-posinset</i> and <i>aria-level</i> attributes are calculated implicitly and added to each treeitem. <i>aria-expanded</i> attributes. The container element of a treenode has the <i>group</i> role. The <i>aria-setsize</i>, <i>aria-posinset</i> and <i>aria-level</i> attributes are calculated implicitly and added to each treeitem.
</p> </p>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" /> <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
<h3>Closed State Keyboard Support</h3> <h3>Closed State Keyboard Support</h3>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">

2
doc/cascadeselect/ImportDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/cdn/ComponentDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Include the component to use with a script tag.</p> <p>Include the component to use with a script tag.</p>
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/cdn/CreateAppDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Create an app container element and setup the application using <i>createApp</i>.</p> <p>Create an app container element and setup the application using <i>createApp</i>.</p>
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/cdn/ExampleDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>A complete example using a PrimeVue DatePicker. You can also view this sample live at <a href="https://stackblitz.com/edit/web-platform-xceybs?file=index.html" target="_blank" rel="noopener noreferrer">Stackblitz</a>.</p> <p>A complete example using a PrimeVue DatePicker. You can also view this sample live at <a href="https://stackblitz.com/edit/web-platform-xceybs?file=index.html" target="_blank" rel="noopener noreferrer">Stackblitz</a>.</p>
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/cdn/PluginDoc.vue
View File

@ -5,7 +5,7 @@
application. application.
</p> </p>
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/cdn/ScriptDoc.vue
View File

@ -6,7 +6,7 @@
<a href="https://cdnjs.com" target="_blank" rel="noopener noreferrer">cdnjs</a> can also be used. <a href="https://cdnjs.com" target="_blank" rel="noopener noreferrer">cdnjs</a> can also be used.
</p> </p>
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/cdn/ThemingDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Include the theme file with a link element, see <NuxtLink to="/theming/#themes">themes</NuxtLink> section for the complete list of available themes to choose from.</p> <p>Include the theme file with a link element, see <NuxtLink to="/theming/#themes">themes</NuxtLink> section for the complete list of available themes to choose from.</p>
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/chart/AccessibilityDoc.vue
View File

@ -6,7 +6,7 @@
<i>canvasProps</i> property to define aria roles and properties, in addition any content inside the component is directly passed as a child of the canvas to be able to provide fallback content like a table. <i>canvasProps</i> property to define aria roles and properties, in addition any content inside the component is directly passed as a child of the canvas to be able to provide fallback content like a table.
</p> </p>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" /> <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
</DocSectionText> </DocSectionText>
</template> </template>

2
doc/chart/ChartJSDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Chart component uses <a href="https://chartjs.org/">Chart.JS</a> underneath so it needs to be installed as a dependency.</p> <p>Chart component uses <a href="https://chartjs.org/">Chart.JS</a> underneath so it needs to be installed as a dependency.</p>
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/chart/ImportDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/checkbox/AccessibilityDoc.vue
View File

@ -6,7 +6,7 @@
<i>aria-labelledby</i>, <i>aria-label</i> props. <i>aria-labelledby</i>, <i>aria-label</i> props.
</p> </p>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" /> <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
<h3>Keyboard Support</h3> <h3>Keyboard Support</h3>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">

2
doc/checkbox/ImportDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/chip/ImportDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/chips/AccessibilityDoc.vue
View File

@ -6,7 +6,7 @@
horizontal whereas each chip has the <i>option</i> role with <i>aria-label</i> set to the label of the chip. horizontal whereas each chip has the <i>option</i> role with <i>aria-label</i> set to the label of the chip.
</p> </p>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" /> <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
<h3>Input Field Keyboard Support</h3> <h3>Input Field Keyboard Support</h3>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">

2
doc/chips/ImportDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/colorpicker/ImportDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/colors/OverviewDoc.vue
View File

@ -63,7 +63,7 @@
<div :style="{ backgroundColor: 'var(--highlight-bg)', color: 'var(--highlight-text-color)', borderRadius: 'var(--border-radius)', padding: '3rem' }">Highlighted Item</div> <div :style="{ backgroundColor: 'var(--highlight-bg)', color: 'var(--highlight-text-color)', borderRadius: 'var(--border-radius)', padding: '3rem' }">Highlighted Item</div>
<div :style="{ backgroundColor: 'var(--primary-color)', color: 'var(--primary-color-text)', borderRadius: 'var(--border-radius)', padding: '3rem' }">Primary Color</div> <div :style="{ backgroundColor: 'var(--primary-color)', color: 'var(--primary-color-text)', borderRadius: 'var(--border-radius)', padding: '3rem' }">Primary Color</div>
</div> </div>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/configuration/ImportDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Configuration is managed by the <i>PrimeVue</i> instance imported from <i>primevue/config</i>.</p> <p>Configuration is managed by the <i>PrimeVue</i> instance imported from <i>primevue/config</i>.</p>
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/configuration/InputStyleDoc.vue
View File

@ -7,7 +7,7 @@
PrimeVue configuration as well. PrimeVue configuration as well.
</p> </p>
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

6
doc/configuration/PTDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Defines the shared pass through properties per component type. Visit the <NuxtLink to="/passthrough">Pass Through Props</NuxtLink> documentation for more information.</p> <p>Defines the shared pass through properties per component type. Visit the <NuxtLink to="/passthrough">Pass Through Props</NuxtLink> documentation for more information.</p>
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>
@ -15,12 +15,12 @@ import { createApp } from "vue";
import PrimeVue from "primevue/config"; import PrimeVue from "primevue/config";
const app = createApp(App); const app = createApp(App);
app.use(PrimeVue, { app.use(PrimeVue, {
pt: { pt: {
slider: { slider: {
handle: { class: 'bg-primary' } handle: { class: 'bg-primary' }
} }
} }
}); });
` `
} }

4
doc/configuration/PTOptionsDoc.vue
View File

@ -5,7 +5,7 @@
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>. Visit the <NuxtLink to="/passthrough">Pass Through Props</NuxtLink> documentation for more information.
</p> </p>
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>
@ -22,7 +22,7 @@ app.use(PrimeVue, {
ptOptions: { ptOptions: {
mergeSections: true, mergeSections: true,
mergeProps: false mergeProps: false
} }
}); });
` `
} }

2
doc/configuration/RippleDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at your app's entry file (e.g. main.js) during the PrimeVue setup.</p> <p>Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at your app's entry file (e.g. main.js) during the PrimeVue setup.</p>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</DocSectionText> </DocSectionText>
</template> </template>

2
doc/configuration/UnstyledDoc.vue
View File

@ -5,7 +5,7 @@
<NuxtLink to="/unstyled">Unstyled mode</NuxtLink> documentation for more information. <NuxtLink to="/unstyled">Unstyled mode</NuxtLink> documentation for more information.
</p> </p>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</DocSectionText> </DocSectionText>
</template> </template>

2
doc/configuration/ZIndexDoc.vue
View File

@ -6,7 +6,7 @@
default values for components categories. Default values are described below and can be customized when setting up PrimeVue. default values for components categories. Default values are described below and can be customized when setting up PrimeVue.
</p> </p>
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/configuration/csp/NonceDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP">nonce</a> value to use on dynamically generated style elements in core.</p> <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP">nonce</a> value to use on dynamically generated style elements in core.</p>
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
</DocSectionText> </DocSectionText>
</template> </template>

2
doc/configuration/locale/ImportDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Locale values are stored in the global configuration that becomes accessible after installing the PrimeVue.</p> <p>Locale values are stored in the global configuration that becomes accessible after installing the PrimeVue.</p>
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

4
doc/configuration/locale/SetLocaleDoc.vue
View File

@ -2,11 +2,11 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Second parameter of the use function can be used to initiate the locale during PrimeVue installation.</p> <p>Second parameter of the use function can be used to initiate the locale during PrimeVue installation.</p>
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
<p>The locale configuration is reactive so that any changes are instantly reflected in the UI. Suppose you are doing a multi language application and need to change the language dynamically.</p> <p>The locale configuration is reactive so that any changes are instantly reflected in the UI. Suppose you are doing a multi language application and need to change the language dynamically.</p>
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
</DocSectionText> </DocSectionText>
</template> </template>

4
doc/confirmdialog/AccessibilityDoc.vue
View File

@ -10,8 +10,8 @@
When <i>require</i> method of the <i>$confirm</i> instance is used and a trigger is passed as a parameter, ConfirmDialog adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between the When <i>require</i> method of the <i>$confirm</i> instance is used and a trigger is passed as a parameter, ConfirmDialog adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between the
trigger and the dialog is defined. trigger and the dialog is defined.
</p> </p>
<DocSectionCode :code="code1" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" /> <DocSectionCode :code="code1" hideToggleCode hideStackBlitz v-bind="$attrs" />
<DocSectionCode :code="code2" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" /> <DocSectionCode :code="code2" hideToggleCode hideStackBlitz v-bind="$attrs" />
<h3>Overlay Keyboard Support</h3> <h3>Overlay Keyboard Support</h3>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">

4
doc/confirmdialog/ConfirmationServiceDoc.vue
View File

@ -2,11 +2,11 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed as an application plugin.</p> <p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed as an application plugin.</p>
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
<div class="doc-section-description"> <div class="doc-section-description">
<p>The service is available with the <i>useConfirm</i> function for Composition API or using the <i>$confirm</i> property of the application for Options API.</p> <p>The service is available with the <i>useConfirm</i> function for Composition API or using the <i>$confirm</i> property of the application for Options API.</p>
</div> </div>
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/confirmdialog/ImportDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

4
doc/confirmpopup/AccessibilityDoc.vue
View File

@ -9,8 +9,8 @@
When <i>require</i> method of the <i>$confirm</i> instance is used and a trigger is passed as a parameter, ConfirmPopup adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between the When <i>require</i> method of the <i>$confirm</i> instance is used and a trigger is passed as a parameter, ConfirmPopup adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between the
trigger and the dialog is defined. trigger and the dialog is defined.
</p> </p>
<DocSectionCode :code="code1" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" /> <DocSectionCode :code="code1" hideToggleCode hideStackBlitz v-bind="$attrs" />
<DocSectionCode :code="code2" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" /> <DocSectionCode :code="code2" hideToggleCode hideStackBlitz v-bind="$attrs" />
<h3>Overlay Keyboard Support</h3> <h3>Overlay Keyboard Support</h3>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">

4
doc/confirmpopup/ConfirmationServiceDoc.vue
View File

@ -2,11 +2,11 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>ConfirmPopup is controlled via the <i>ConfirmationService</i> that needs to be installed as an application plugin.</p> <p>ConfirmPopup is controlled via the <i>ConfirmationService</i> that needs to be installed as an application plugin.</p>
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
<div class="doc-section-description"> <div class="doc-section-description">
<p>The service is available with the <i>useConfirm</i> function for Composition API or using the <i>$confirm</i> property of the application for Options API.</p> <p>The service is available with the <i>useConfirm</i> function for Composition API or using the <i>$confirm</i> property of the application for Options API.</p>
</div> </div>
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/confirmpopup/ImportDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/contextmenu/ImportDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/contextmenu/RouterDoc.vue
View File

@ -30,7 +30,7 @@
</template> </template>
</ContextMenu> </ContextMenu>
</div> </div>
<DocSectionCode :code="code" hideStackBlitz hideCodeSandbox /> <DocSectionCode :code="code" hideStackBlitz />
</template> </template>
<script> <script>

2
doc/csslayer/BootstrapDoc.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Bootstrap has a <i>reboot</i> utility to reset the CSS of the standard elements. If you are including this utility, you may give it a layer while importing it.</p> <p>Bootstrap has a <i>reboot</i> utility to reset the CSS of the standard elements. If you are including this utility, you may give it a layer while importing it.</p>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
</DocSectionText> </DocSectionText>
</template> </template>

2
doc/csslayer/NormalizeDoc.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Normalize is another utility to reset CSS of the standard elements. While importing the CSS file, assign it to a layer and define the layer order with primevue coming after the normalized layer.</p> <p>Normalize is another utility to reset CSS of the standard elements. While importing the CSS file, assign it to a layer and define the layer order with primevue coming after the normalized layer.</p>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
</DocSectionText> </DocSectionText>
</template> </template>

2
doc/csslayer/ResetDoc.vue
View File

@ -5,7 +5,7 @@
override the PrimeVue components leading to unexpected results. A common use case for global styles applying to standard HTML elements is CSS reset utilities to remove the default styling of the browsers. In this case, best practice is override the PrimeVue components leading to unexpected results. A common use case for global styles applying to standard HTML elements is CSS reset utilities to remove the default styling of the browsers. In this case, best practice is
wrapping your CSS in a layer like <i>reset</i> and make sure <i>primevue</i> comes after your layer since layers defined after has higher precedence. This way, your Reset CSS does not get in the way of PrimeVue components. wrapping your CSS in a layer like <i>reset</i> and make sure <i>primevue</i> comes after your layer since layers defined after has higher precedence. This way, your Reset CSS does not get in the way of PrimeVue components.
</p> </p>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
<p>If you are using Nuxt, use the built-in <i>cssLayerOrder</i> property of the PrimeVue nuxt module instead.</p> <p>If you are using Nuxt, use the built-in <i>cssLayerOrder</i> property of the PrimeVue nuxt module instead.</p>
</DocSectionText> </DocSectionText>
</template> </template>

2
doc/csslayer/SpecificityDoc.vue
View File

@ -14,7 +14,7 @@
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<InputSwitch v-model="checked" :pt="{ slider: 'my-switch-slider' }" /> <InputSwitch v-model="checked" :pt="{ slider: 'my-switch-slider' }" />
</div> </div>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
<p>Layers also make it possible to use CSS Modules, view the <NuxtLink to="/theming/#cssmodules">CSS Modules</NuxtLink> guide for examples.</p> <p>Layers also make it possible to use CSS Modules, view the <NuxtLink to="/theming/#cssmodules">CSS Modules</NuxtLink> guide for examples.</p>
</DocSectionText> </DocSectionText>
</template> </template>

2
doc/csslayer/TailwindDoc.vue
View File

@ -4,7 +4,7 @@
Tailwind CSS includes a reset utility in base called <a href="https://tailwindcss.com/docs/preflight" target="_blank" rel="noopener noreferrer">preflight</a>. If you are using this feature, wrap the base and utilities in separate layers Tailwind CSS includes a reset utility in base called <a href="https://tailwindcss.com/docs/preflight" target="_blank" rel="noopener noreferrer">preflight</a>. If you are using this feature, wrap the base and utilities in separate layers
and make sure primevue layer comes after the base. and make sure primevue layer comes after the base.
</p> </p>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
</DocSectionText> </DocSectionText>
</template> </template>

2
doc/customicons/FontAwesomeDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p><a href="https://fontawesome.com/">Font Awesome</a> is a popular icon library with a wide range of icons.</p> <p><a href="https://fontawesome.com/">Font Awesome</a> is a popular icon library with a wide range of icons.</p>
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/customicons/ImageDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Any type of image can be used as an icon.</p> <p>Any type of image can be used as an icon.</p>
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/customicons/MaterialDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p><a href="https://fonts.google.com/icons">Material icons</a> is the official icon library based on Google Material Design.</p> <p><a href="https://fonts.google.com/icons">Material icons</a> is the official icon library based on Google Material Design.</p>
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/customicons/SVGDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Inline SVGs are embedded inside the dom.</p> <p>Inline SVGs are embedded inside the dom.</p>
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/datatable/ImportDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/dataview/ImportDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/deferredcontent/AccessibilityDoc.vue
View File

@ -5,7 +5,7 @@
DeferredContent can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so you DeferredContent can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so you
have full control over the roles like <a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">landmark</a> and attributes like <i>aria-live</i>. have full control over the roles like <a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">landmark</a> and attributes like <i>aria-live</i>.
</p> </p>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" /> <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
<h3>Keyboard Support</h3> <h3>Keyboard Support</h3>
<p>Component does not include any interactive elements.</p> <p>Component does not include any interactive elements.</p>

2
doc/deferredcontent/ImportDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/dialog/AccessibilityDoc.vue
View File

@ -11,7 +11,7 @@
element and override the default <i>aria-label</i>. element and override the default <i>aria-label</i>.
</p> </p>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" /> <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
<h3>Overlay Keyboard Support</h3> <h3>Overlay Keyboard Support</h3>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">

2
doc/dialog/ImportDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/divider/ImportDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/dock/ImportDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/dropdown/AccessibilityDoc.vue
View File

@ -13,7 +13,7 @@
<p>If filtering is enabled, <i>filterInputProps</i> can be defined to give <i>aria-*</i> props to the filter input element.</p> <p>If filtering is enabled, <i>filterInputProps</i> can be defined to give <i>aria-*</i> props to the filter input element.</p>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" /> <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
<h3>Closed State Keyboard Support</h3> <h3>Closed State Keyboard Support</h3>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">

2
doc/dropdown/ImportDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"></DocSectionText> <DocSectionText v-bind="$attrs"></DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/dynamicdialog/CloseDialogDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>The <i>close</i> function is available through a <i>dialogRef</i> that is injected to the component loaded by the dialog.</p> <p>The <i>close</i> function is available through a <i>dialogRef</i> that is injected to the component loaded by the dialog.</p>
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code" importCode hideToggleCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" importCode hideToggleCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/dynamicdialog/CustomizationDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>DynamicDialog uses the Dialog component internally, visit <NuxtLink to="/dialog">dialog</NuxtLink> for more information about the available props.</p> <p>DynamicDialog uses the Dialog component internally, visit <NuxtLink to="/dialog">dialog</NuxtLink> for more information about the available props.</p>
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

6
doc/dynamicdialog/DialogServiceDoc.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>A single shared dialog instance is required in the application, ideal location would be defining it once at the main application template.</p> <p>A single shared dialog instance is required in the application, ideal location would be defining it once at the main application template.</p>
<DocSectionCode :code="code1" hideToggleCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code1" hideToggleCode hideStackBlitz />
<p>A dynamic dialog is controlled via the <i>DialogService</i> that needs to be installed as an application plugin.</p> <p>A dynamic dialog is controlled via the <i>DialogService</i> that needs to be installed as an application plugin.</p>
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
<p>The service is available with the <i>useDialog</i> function for Composition API or using the <i>$dialog</i> property of the application for Options API.</p> <p>The service is available with the <i>useDialog</i> function for Composition API or using the <i>$dialog</i> property of the application for Options API.</p>
<DocSectionCode :code="code3" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code3" hideToggleCode importCode hideStackBlitz />
</DocSectionText> </DocSectionText>
</template> </template>

4
doc/dynamicdialog/EventsDoc.vue
View File

@ -2,8 +2,8 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>The <i>emits</i> object defines callbacks to handle events emitted by the component within the Dialog.</p> <p>The <i>emits</i> object defines callbacks to handle events emitted by the component within the Dialog.</p>
<DocSectionCode :code="code1" importCode hideToggleCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
<DocSectionCode :code="code2" importCode hideToggleCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code2" importCode hideToggleCode hideStackBlitz />
</DocSectionText> </DocSectionText>
</template> </template>

2
doc/dynamicdialog/ImportDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

4
doc/dynamicdialog/OpenDialogDoc.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>The <i>open</i> function of the <i>DialogService</i> is used to open a Dialog. First parameter is the component to load and second one is the configuration object to customize the Dialog.</p> <p>The <i>open</i> function of the <i>DialogService</i> is used to open a Dialog. First parameter is the component to load and second one is the configuration object to customize the Dialog.</p>
<DocSectionCode :code="code1" importCode hideToggleCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
<p>The component can also be loaded asynchronously, this approach is useful in conditional cases and to improve initial load times as well.</p> <p>The component can also be loaded asynchronously, this approach is useful in conditional cases and to improve initial load times as well.</p>
<DocSectionCode :code="code2" importCode hideToggleCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code2" importCode hideToggleCode hideStackBlitz />
</DocSectionText> </DocSectionText>
</template> </template>

8
doc/dynamicdialog/PassingDataDoc.vue
View File

@ -2,12 +2,12 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Use the <i>data</i> property to pass parameters when opening a Dialog, the internal component can later access this data using <i>dialogRef</i>.</p> <p>Use the <i>data</i> property to pass parameters when opening a Dialog, the internal component can later access this data using <i>dialogRef</i>.</p>
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
<p>Similarly when hiding a Dialog, any parameter passed to the <i>close</i> function is received from the <i>onClose</i> callback.</p> <p>Similarly when hiding a Dialog, any parameter passed to the <i>close</i> function is received from the <i>onClose</i> callback.</p>
<DocSectionCode :code="code3" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code3" hideToggleCode importCode hideStackBlitz />
<DocSectionCode :code="code4" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code4" hideToggleCode importCode hideStackBlitz />
</DocSectionText> </DocSectionText>
</template> </template>

2
doc/dynamicdialog/pt/PTDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"></DocSectionText> <DocSectionText v-bind="$attrs"></DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/editor/ImportDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/editor/QuillDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Editor uses <a href="https://quilljs.com/">Quill</a> editor underneath so it needs to be installed as a dependency.</p> <p>Editor uses <a href="https://quilljs.com/">Quill</a> editor underneath so it needs to be installed as a dependency.</p>
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/fieldset/ImportDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/fileupload/ImportDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

4
doc/filterservice/CustomConstraintDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>FilterService can be extended by adding new constraints using the register function.</p> <p>FilterService can be extended by adding new constraints using the register function.</p>
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>
@ -19,7 +19,7 @@ FilterService.register('isPrimeNumber', (value, filter): boolean => {
if (value === undefined || value === null) { if (value === undefined || value === null) {
return false; return false;
} }
return value.toString() === filter.toString(); return value.toString() === filter.toString();
}); });

2
doc/filterservice/ImportDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/filterservice/UsageDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Filters are accessed with <i>FilterService.filters</i>.</p> <p>Filters are accessed with <i>FilterService.filters</i>.</p>
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/focustrap/ImportDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/galleria/ImportDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"></DocSectionText> <DocSectionText v-bind="$attrs"></DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/icons/BasicDoc.vue
View File

@ -8,7 +8,7 @@
<span class="pi pi-search"></span> <span class="pi pi-search"></span>
<span class="pi pi-user"></span> <span class="pi pi-user"></span>
</div> </div>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/icons/ColorDoc.vue
View File

@ -8,7 +8,7 @@
<i class="pi pi-search" style="color: 'var(--primary-color)'"></i> <i class="pi pi-search" style="color: 'var(--primary-color)'"></i>
<i class="pi pi-user" style="color: #708090"></i> <i class="pi pi-user" style="color: #708090"></i>
</div> </div>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/icons/ConstantsDoc.vue
View File

@ -5,7 +5,7 @@
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Menu :model="items" /> <Menu :model="items" />
</div> </div>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/icons/DownloadDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>PrimeIcons is available at npm, run the following command to download it to your project.</p> <p>PrimeIcons is available at npm, run the following command to download it to your project.</p>
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/icons/ImportDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>CSS file of the icon library needs to be imported in <i>styles.scss</i> of your application.</p> <p>CSS file of the icon library needs to be imported in <i>styles.scss</i> of your application.</p>
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/icons/SizeDoc.vue
View File

@ -8,7 +8,7 @@
<i class="pi pi-search" style="font-size: 2rem"></i> <i class="pi pi-search" style="font-size: 2rem"></i>
<i class="pi pi-user" style="font-size: 2.5rem"></i> <i class="pi pi-user" style="font-size: 2.5rem"></i>
</div> </div>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/icons/SpinDoc.vue
View File

@ -6,7 +6,7 @@
<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i> <i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
<i class="pi pi-spin pi-cog" style="font-size: 2rem"></i> <i class="pi pi-spin pi-cog" style="font-size: 2rem"></i>
</div> </div>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/image/ImportDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"></DocSectionText> <DocSectionText v-bind="$attrs"></DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

2
doc/inlinemessage/ImportDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
<script> <script>

Some files were not shown because too many files have changed in this diff Show More