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

View File

@ -18,16 +18,6 @@
</button>
</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">
<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'">
@ -72,7 +62,7 @@
</template>
<script>
import { useCodeSandbox, useStackBlitz } from './codeeditor';
import { useStackBlitz } from './codeeditor';
export default {
inheritAttrs: false,
@ -91,7 +81,7 @@ export default {
},
hideCodeSandbox: {
type: Boolean,
default: false
default: true
},
hideStackBlitz: {
type: Boolean,
@ -142,9 +132,6 @@ export default {
async copyCode() {
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() {
useStackBlitz(this.codeLang, this.code[this.codeLang === 'data' ? 'options' : this.codeLang], this.service, this.code.pages, this.dependencies, this.component, this.extFiles);
}

View File

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

View File

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

View File

@ -12,7 +12,7 @@
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>
<div class="doc-tablewrapper">

View File

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

View File

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

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
begin with installing the library.
</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>
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
<p>
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>.
</p>
<DocSectionCode :code="code3" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code3" hideToggleCode importCode hideStackBlitz />
</DocSectionText>
</template>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -6,7 +6,7 @@
<i>aria-labelledby</i>, <i>aria-label</i> props.
</p>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode 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 importCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template>
<script>

View File

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

View File

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

View File

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

View File

@ -2,7 +2,7 @@
<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>
</DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template>
<script>
@ -15,12 +15,12 @@ import { createApp } from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);
app.use(PrimeVue, {
app.use(PrimeVue, {
pt: {
slider: {
handle: { class: 'bg-primary' }
}
}
}
});
`
}

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.
</p>
</DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template>
<script>
@ -22,7 +22,7 @@ app.use(PrimeVue, {
ptOptions: {
mergeSections: true,
mergeProps: false
}
}
});
`
}

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

View File

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

View File

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

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 importCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code" hideToggleCode importCode 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 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>
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
</DocSectionText>
</template>

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

View File

@ -2,11 +2,11 @@
<DocSectionText v-bind="$attrs">
<p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed as an application plugin.</p>
</DocSectionText>
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
<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>
</div>
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
</template>
<script>

View File

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

View File

@ -2,11 +2,11 @@
<DocSectionText v-bind="$attrs">
<p>ConfirmPopup is controlled via the <i>ConfirmationService</i> that needs to be installed as an application plugin.</p>
</DocSectionText>
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
<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>
</div>
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
</template>
<script>

View File

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

View File

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

View File

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

View File

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

View File

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

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
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>
<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>
</DocSectionText>
</template>

View File

@ -14,7 +14,7 @@
<div class="card flex justify-content-center">
<InputSwitch v-model="checked" :pt="{ slider: 'my-switch-slider' }" />
</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>
</DocSectionText>
</template>

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
and make sure primevue layer comes after the base.
</p>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code" hideToggleCode hideStackBlitz />
</DocSectionText>
</template>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

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
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>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode 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 importCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template>
<script>

View File

@ -11,7 +11,7 @@
element and override the default <i>aria-label</i>.
</p>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode 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 importCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template>
<script>

View File

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

View File

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

View File

@ -2,7 +2,7 @@
<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>
</DocSectionText>
<DocSectionCode :code="code" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code" importCode hideToggleCode 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 about the available props.</p>
</DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template>
<script>

View File

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

View File

@ -2,8 +2,8 @@
<DocSectionText v-bind="$attrs">
<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="code2" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
<DocSectionCode :code="code2" importCode hideToggleCode hideStackBlitz />
</DocSectionText>
</template>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,6 +1,6 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code" hideToggleCode importCode 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 importCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template>
<script>
@ -19,7 +19,7 @@ FilterService.register('isPrimeNumber', (value, filter): boolean => {
if (value === undefined || value === null) {
return false;
}
return value.toString() === filter.toString();
});

View File

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

View File

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

View File

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

View File

@ -5,7 +5,7 @@
<div class="card flex justify-content-center">
<Menu :model="items" />
</div>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code" hideToggleCode importCode 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 importCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code" hideToggleCode importCode 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 <i>styles.scss</i> of your application.</p>
</DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code" hideToggleCode importCode 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 importCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code" hideToggleCode importCode 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 importCode hideCodeSandbox hideStackBlitz />
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template>
<script>

View File

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

View File

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

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