Code section fixes

pull/3689/head
Tuğçe Küçükoğlu 2023-02-28 20:40:48 +03:00
parent d74b3a20c5
commit fc61cdad4f
159 changed files with 226 additions and 185 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

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.
</p>
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
<h3>Keyboard Support</h3>
<div class="doc-tablewrapper">
<table class="doc-table">

View File

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

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>
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
<h3>Choose Date Button Keyboard Support</h3>
<div class="doc-tablewrapper">

View File

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

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.
</p>
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
<h3>Keyboard Support</h3>
<p>Component does not include any interactive elements.</p>

View File

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

View File

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

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.
</p>
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
<h3>Closed State Keyboard Support</h3>
<div class="doc-tablewrapper">

View File

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

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.
</p>
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
</DocSectionText>
</template>

View File

@ -2,7 +2,7 @@
<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>
</DocSectionText>
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
</template>
<script>

View File

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

View File

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

View File

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

View File

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

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.
</p>
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
<h3>Input Field Keyboard Support</h3>
<div class="doc-tablewrapper">

View File

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

View File

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

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(--primary-color)', color: 'var(--primary-color-text)', borderRadius: 'var(--border-radius)', padding: '3rem' }">Primary Color</div>
</div>
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
</template>
<script>

View File

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

View File

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

View File

@ -5,12 +5,12 @@
<h6>nuxt.config.js</h6>
<p>Open the nuxt configuration file and add the css dependencies.</p>
<DocSectionCode :code="code1" hideToggleCode import hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<h6>primevue.js</h6>
<p>Create a file like <i>primevue.js</i> under the plugins directory for the configuration.</p>
<DocSectionCode :code="code2" hideToggleCode import hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
</DocSectionText>
</template>

View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Component prop names are described as camel case throughout the documentation however camel-case is also fully supported. Events on the other hand should always be camel-case.</p>
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
</DocSectionText>
</template>

View File

@ -2,7 +2,7 @@
<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>
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
</DocSectionText>
</template>

View File

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

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
trigger and the dialog is defined.
</p>
<DocSectionCode :code="code1" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
<DocSectionCode :code="code2" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
<DocSectionCode :code="code1" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
<DocSectionCode :code="code2" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
<h3>Overlay Keyboard Support</h3>
<div class="doc-tablewrapper">
<table class="doc-table">

View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application instance is created.</p>
</DocSectionText>
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
</template>
<script>

View File

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

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, 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.
</p>
<DocSectionCode :code="code1" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
<DocSectionCode :code="code2" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
<DocSectionCode :code="code1" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
<DocSectionCode :code="code2" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
<h3>Overlay Keyboard Support</h3>
<div class="doc-tablewrapper">
<table class="doc-table">

View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application instance is created.</p>
</DocSectionText>
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
</template>
<script>

View File

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

View File

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

View File

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

View File

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

View File

@ -2,8 +2,8 @@
<DocSectionText v-bind="$attrs">
<p>DataView depends on PrimeFlex Grid functionality so it needs to be installed and imported.</p>
</DocSectionText>
<DocSectionCode :code="code1" hideToggleCode import hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code2" hideToggleCode import hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
</template>
<script>

View File

@ -5,14 +5,24 @@
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>.
</p>
<pre v-code><code>
&lt;DeferredContent role="region" aria-live="polite" aria-label="Content loaded after page scrolled down"&gt;
Content
&lt;/DeferredContent&gt;
</code></pre>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
<h3>Keyboard Support</h3>
<p>Component does not include any interactive elements.</p>
</DocSectionText>
</template>
<script>
export default {
data() {
return {
code: {
basic: `
<DeferredContent role="region" aria-live="polite" aria-label="Content loaded after page scrolled down>
Content
</DeferredContent>`
}
};
}
};
</script>

View File

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

View File

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

View File

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

View File

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

View File

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

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>
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
<h3>Closed State Keyboard Support</h3>
<div class="doc-tablewrapper">

View File

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

View File

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

View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Dynamic dialogs require the <i>DialogService</i> to be configured globally.</p>
</DocSectionText>
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
</template>
<script>

View File

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

View File

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

View File

@ -2,7 +2,7 @@
<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>
</DocSectionText>
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
</template>
<script>

View File

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

View File

@ -4,6 +4,6 @@
<p>FileUpload uses a hidden native <i>input</i> element with <i>type="file"</i> for screen readers.</p>
<h3>Keyboard Support</h3>
<p>Interactive elements of the uploader are buttons, visit the <Link href="/button#accessibility">Button</Link> accessibility section for more information.</p>
<p>Interactive elements of the uploader are buttons, visit the <NuxtLink to="/button/#accessibility">Button</NuxtLink> accessibility section for more information.</p>
</DocSectionText>
</template>

View File

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

View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>FilterService can be extended by adding new constraints using the register function.</p>
</DocSectionText>
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
</template>
<script>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -6,7 +6,7 @@
<i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes.
</p>
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
<h3>Keyboard Support</h3>
<div class="doc-tablewrapper">

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>PrimeVue is available for download at <a href="https://www.npmjs.com/package/primevue">npm</a>.</p>
</DocSectionText>
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
</template>
<script>

View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Theme, core and icons are the necessary css files of the components, visit the <NuxtLink to="/theming#themes">Themes</NuxtLink> section for the complete list of available themes to choose from.</p>
</DocSectionText>
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
</template>
<script>

View File

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

View File

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

View File

@ -7,7 +7,7 @@
</p>
<p>If filtering is enabled, <i>filterInputProps</i> can be defined to give <i>aria-*</i> props to the input element. Alternatively <i>filterPlaceholder</i> is usually utilized by the screen readers as well.</p>
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
<h3>Keyboard Support</h3>
<div class="doc-tablewrapper">

View File

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

View File

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

View File

@ -2,11 +2,11 @@
<DocSectionText v-bind="$attrs">
<p>Second parameter of the use function can be used to initiate the locale during PrimeVue installation.</p>
<DocSectionCode :code="code1" hideToggleCode import hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox 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>
<DocSectionCode :code="code2" hideToggleCode import hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
</DocSectionText>
</template>

View File

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

View File

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

View File

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

View File

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

View File

@ -16,7 +16,7 @@
<p>Close button uses <i>close</i> key of the <i>aria</i> property from the <NuxtLink to="/locale">locale</NuxtLink> API as the <i>aria-label</i> by default, this can be overriden with the <i>closeButtonProps</i>.</p>
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
<h3>Closed State Keyboard Support</h3>
<div class="doc-tablewrapper">
@ -252,10 +252,10 @@ export default {
return {
code: {
basic: `
<span id="dd1"></span>Options</span>
<MultiSelect aria-labelledby="dd1" />
<span id="dd1"></span>Options</span>
<MultiSelect aria-labelledby="dd1" />
<MultiSelect aria-label="Options" />`
<MultiSelect aria-label="Options" />`
}
};
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

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