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

Demo updates

pull/5880/head
Cagatay Civici 2024-06-13 00:12:30 +03:00
parent f63c4c7c3f
commit deed42de60
16 changed files with 66 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/showcase/assets/menu/menu.json
View File

@ -33,10 +33,6 @@
{
"name": "CDN",
"to": "/cdn"
},
{
"name": "PrimeCLT",
"to": "/primeclt"
}
]
},

2
apps/showcase/assets/styles/layout/_sidebar.scss
View File

@ -119,7 +119,7 @@
display: flex;
align-items: center;
padding: .5rem .5rem .5rem 1rem;
color: var(--text-color);
color: var(--text-secondary-color);
transition: outline-color 0.2s, border-color .2s;
outline-color: transparent;
position: relative;

5
apps/showcase/doc/accordion/BasicDoc.vue
View File

@ -1,9 +1,6 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
Accordion comprises a combination of <i>AccordionPanel</i>, <i>AccordionHeader</i> and <i>AccordionContent</i> components. Each AccordionPanel must contain a unique <i>value</i> property, and that can be set to Accordion's
<i>value</i> property to extend any panel.
</p>
<p>Accordion is defined using <i>AccordionPanel</i>, <i>AccordionHeader</i> and <i>AccordionContent</i> components. Each AccordionPanel must contain a unique <i>value</i> property to specify the active item.</p>
</DocSectionText>
<div class="card">
<Accordion value="0">

2
apps/showcase/doc/accordion/ControlledDoc.vue
View File

@ -1,6 +1,6 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Accordion can be controlled programmatically using a binding to <i>value</i> along with <i>v-model</i> to update the active value.</p>
<p>Panels can be controlled programmatically using <i>value</i> property as a model.</p>
</DocSectionText>
<div class="card">
<div class="flex mb-4 gap-2 justify-end">

5
apps/showcase/doc/accordion/TemplateDoc.vue
View File

@ -1,6 +1,9 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Header content of a panel is customized with the <i>default</i> slot.</p>
<p>
Custom content for a header is defined with the default slot. The optional <i>as</i> property controls the default container element of a header, for example setting it to a <i>div</i> renders a div for the header instead of a button. The
<i>asChild</i> option enables the headless mode for further customization by passing callbacks and properties to implement your own header.
</p>
</DocSectionText>
<div class="card">
<Accordion value="0" expandIcon="pi pi-plus" collapseIcon="pi pi-minus">

7
apps/showcase/doc/nuxt/configuration/ImportPTDoc.vue
View File

@ -2,6 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Configures the global pass through import path.</p>
<DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
<p><i>mycustompt.js</i> file defines the configuration and exports it.</p>
<DocSectionCode :code="code2" importCode hideToggleCode hideStackBlitz />
</DocSectionText>
</template>
@ -13,13 +14,13 @@ export default {
code1: {
basic: `
primevue: {
importPT: { as: 'MyCustomPreset', from: path.resolve(__dirname, './presets/mypreset.js')}
importPT: { from: '@/passthrough/mycustompt.js')}
}
`
},
code2: {
basic: `
const MyPreset = {
const MyCustomPT = {
...
button: {
root: 'my-button',
@ -28,7 +29,7 @@ const MyPreset = {
...
}
export default MyPreset;
export default MyCustomPT;
`
}
};

1
apps/showcase/doc/nuxt/configuration/ImportThemeDoc.vue
View File

@ -2,6 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>Configures the theme configuration path for the customizations of a theme in styled mode.</p>
<DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
<p>The <i>mytheme.js</i> file contains the theme configuration.</p>
<DocSectionCode :code="code2" importCode hideToggleCode hideStackBlitz />
</DocSectionText>
</template>

28
apps/showcase/doc/stepper/HorizontalDoc.vue
View File

@ -1,8 +1,6 @@
<template>
<DocSectionText v-bind="$attrs">
<DocSectionText v-bind="$attrs">
<p>Stepepr comprises a combination of <i>StepList</i>, <i>Step</i>, <i>StepPanels</i> and <i>StepPanel</i> components. The <i>value</i> property is essential for associating Step and StepPanel with each other.</p>
</DocSectionText>
<p>Stepepr consists of a combination of <i>StepList</i>, <i>Step</i>, <i>StepPanels</i> and <i>StepPanel</i> components. The <i>value</i> property is essential for associating Step and StepPanel with each other.</p>
</DocSectionText>
<div class="card flex justify-center">
<Stepper value="1" class="basis-[50rem]">
@ -16,8 +14,8 @@
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
</div>
<div class="flex pt-6 justify-start">
<Button label="Next" icon="pi pi-arrow-right" @click="activateCallback('2')" />
<div class="flex pt-6 justify-end">
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('2')" />
</div>
</StepPanel>
<StepPanel v-slot="{ activateCallback }" value="2">
@ -33,7 +31,7 @@
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
</div>
<div class="flex pt-6 justify-start">
<div class="pt-6">
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
</div>
</StepPanel>
@ -60,8 +58,8 @@ export default {
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
</div>
<div class="flex pt-6 justify-start">
<Button label="Next" icon="pi pi-arrow-right" @click="activateCallback('2')" />
<div class="flex pt-6 justify-end">
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('2')" />
</div>
</StepPanel>
<StepPanel v-slot="{ activateCallback }" value="2">
@ -77,7 +75,7 @@ export default {
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
</div>
<div class="flex pt-6 justify-start">
<div class="pt-6">
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
</div>
</StepPanel>
@ -98,8 +96,8 @@ export default {
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
</div>
<div class="flex pt-6 justify-start">
<Button label="Next" icon="pi pi-arrow-right" @click="activateCallback('2')" />
<div class="flex pt-6 justify-end">
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('2')" />
</div>
</StepPanel>
<StepPanel v-slot="{ activateCallback }" value="2">
@ -115,7 +113,7 @@ export default {
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
</div>
<div class="flex pt-6 justify-start">
<div class="pt-6">
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
</div>
</StepPanel>
@ -138,8 +136,8 @@ export default {
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
</div>
<div class="flex pt-6 justify-start">
<Button label="Next" icon="pi pi-arrow-right" @click="activateCallback('2')" />
<div class="flex pt-6 justify-end">
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('2')" />
</div>
</StepPanel>
<StepPanel v-slot="{ activateCallback }" value="2">
@ -155,7 +153,7 @@ export default {
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
</div>
<div class="flex pt-6 justify-start">
<div class="pt-6">
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
</div>
</StepPanel>

16
apps/showcase/doc/stepper/LinearDoc.vue
View File

@ -14,7 +14,7 @@
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
</div>
<div class="flex pt-6 justify-start">
<div class="flex pt-6 justify-end">
<Button label="Next" icon="pi pi-arrow-right" @click="activateCallback('2')" />
</div>
</StepPanel>
@ -31,7 +31,7 @@
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
</div>
<div class="flex pt-6 justify-start">
<div class="pt-6">
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
</div>
</StepPanel>
@ -58,7 +58,7 @@ export default {
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
</div>
<div class="flex pt-6 justify-start">
<div class="flex pt-6 justify-end">
<Button label="Next" icon="pi pi-arrow-right" @click="activateCallback('2')" />
</div>
</StepPanel>
@ -75,7 +75,7 @@ export default {
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
</div>
<div class="flex pt-6 justify-start">
<div class="pt-6">
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
</div>
</StepPanel>
@ -96,7 +96,7 @@ export default {
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
</div>
<div class="flex pt-6 justify-start">
<div class="flex pt-6 justify-end">
<Button label="Next" icon="pi pi-arrow-right" @click="activateCallback('2')" />
</div>
</StepPanel>
@ -113,7 +113,7 @@ export default {
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
</div>
<div class="flex pt-6 justify-start">
<div class="pt-6">
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
</div>
</StepPanel>
@ -136,7 +136,7 @@ export default {
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
</div>
<div class="flex pt-6 justify-start">
<div class="flex pt-6 justify-end">
<Button label="Next" icon="pi pi-arrow-right" @click="activateCallback('2')" />
</div>
</StepPanel>
@ -153,7 +153,7 @@ export default {
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
</div>
<div class="flex pt-6 justify-start">
<div class="pt-6">
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
</div>
</StepPanel>

5
apps/showcase/doc/stepper/TemplateDoc.vue
View File

@ -1,6 +1,9 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Custom content for a tab is defined using <i>as</i> or <i>asChild</i> properties.</p>
<p>
Custom content for a step is defined with the default slot. The optional <i>as</i> property controls the default container element of a step, for example setting it to a <i>button</i> renders a button for the header instead of a div. The
<i>asChild</i> option enables the headless mode for further customization by passing callbacks and properties to implement your own step.
</p>
</DocSectionText>
<div class="card flex justify-center">
<Stepper v-model:value="activeStep" class="basis-[40rem]">

34
apps/showcase/doc/stepper/VerticalDoc.vue
View File

@ -1,6 +1,6 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Layout of the Stepper is configured with the <i>StepItem</i> helper component.</p>
<p>Horizontal layout requires <i>StepItem</i> as a wrapper of <i>Step</i> and <i>StepPanel</i> components.</p>
</DocSectionText>
<div class="card">
<Stepper value="1">
@ -10,7 +10,7 @@
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
</div>
<div class="flex pt-6 justify-start">
<div class="py-6">
<Button label="Next" @click="activateCallback('2')" />
</div>
</StepPanel>
@ -21,9 +21,9 @@
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
</div>
<div class="flex pt-6 justify-between">
<div class="flex py-6 gap-2">
<Button label="Back" severity="secondary" @click="activateCallback('1')" />
<Button label="Next" iconPos="right" @click="activateCallback('3')" />
<Button label="Next" @click="activateCallback('3')" />
</div>
</StepPanel>
</StepItem>
@ -33,7 +33,7 @@
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
</div>
<div class="flex pt-6 justify-start">
<div class="py-6">
<Button label="Back" severity="secondary" @click="activateCallback('2')" />
</div>
</StepPanel>
@ -56,7 +56,7 @@ export default {
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
</div>
<div class="flex pt-6 justify-start">
<div class="py-6">
<Button label="Next" @click="activateCallback('2')" />
</div>
</StepPanel>
@ -67,9 +67,9 @@ export default {
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
</div>
<div class="flex pt-6 justify-between">
<div class="flex py-6 gap-2">
<Button label="Back" severity="secondary" @click="activateCallback('1')" />
<Button label="Next" iconPos="right" @click="activateCallback('3')" />
<Button label="Next" @click="activateCallback('3')" />
</div>
</StepPanel>
</StepItem>
@ -79,7 +79,7 @@ export default {
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
</div>
<div class="flex pt-6 justify-start">
<div class="py-6">
<Button label="Back" severity="secondary" @click="activateCallback('2')" />
</div>
</StepPanel>
@ -96,7 +96,7 @@ export default {
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
</div>
<div class="flex pt-6 justify-start">
<div class="py-6">
<Button label="Next" @click="activateCallback('2')" />
</div>
</StepPanel>
@ -107,9 +107,9 @@ export default {
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
</div>
<div class="flex pt-6 justify-between">
<div class="flex py-6 gap-2">
<Button label="Back" severity="secondary" @click="activateCallback('1')" />
<Button label="Next" iconPos="right" @click="activateCallback('3')" />
<Button label="Next" @click="activateCallback('3')" />
</div>
</StepPanel>
</StepItem>
@ -119,7 +119,7 @@ export default {
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
</div>
<div class="flex pt-6 justify-start">
<div class="py-6">
<Button label="Back" severity="secondary" @click="activateCallback('2')" />
</div>
</StepPanel>
@ -138,7 +138,7 @@ export default {
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
</div>
<div class="flex pt-6 justify-start">
<div class="py-6">
<Button label="Next" @click="activateCallback('2')" />
</div>
</StepPanel>
@ -149,9 +149,9 @@ export default {
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
</div>
<div class="flex pt-6 justify-between">
<div class="flex py-6 gap-2">
<Button label="Back" severity="secondary" @click="activateCallback('1')" />
<Button label="Next" iconPos="right" @click="activateCallback('3')" />
<Button label="Next" @click="activateCallback('3')" />
</div>
</StepPanel>
</StepItem>
@ -161,7 +161,7 @@ export default {
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
</div>
<div class="flex pt-6 justify-start">
<div class="py-6">
<Button label="Back" severity="secondary" @click="activateCallback('2')" />
</div>
</StepPanel>

2
apps/showcase/doc/tabs/BasicDoc.vue
View File

@ -1,6 +1,6 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Tabs comprises a combination of <i>TabList</i>, <i>Tab</i>, <i>TabPanels</i> and <i>Tab</i> components. The <i>value</i> property is essential for associating Tab and TabPanel with each other.</p>
<p>Tabs is defined using <i>TabList</i>, <i>Tab</i>, <i>TabPanels</i> and <i>Tab</i> components. Tab and TabPanel components are associated with their <i>value</i> properties</p>
</DocSectionText>
<div class="card">
<Tabs value="0">

2
apps/showcase/doc/tabs/ControlledDoc.vue
View File

@ -1,6 +1,6 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Tabs can be controlled programmatically using <i>value</i> property.</p>
<p>Tabs can be controlled programmatically using <i>value</i> property as a model.</p>
</DocSectionText>
<div class="card">
<div class="flex mb-2 gap-2 justify-end">

5
apps/showcase/doc/tabs/TemplateDoc.vue
View File

@ -1,6 +1,9 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Custom content for a tab is defined using <i>as</i> or <i>asChild</i> properties.</p>
<p>
Custom content for a tab is defined with the default slot. The optional <i>as</i> property controls the default container element of a tab, for example setting it to a <i>div</i> renders a div for the header instead of a button. The
<i>asChild</i> option enables the headless mode for further customization by passing callbacks and properties to implement your own tab header.
</p>
</DocSectionText>
<div class="card">
<Tabs value="0">

2
apps/showcase/pages/tabs/index.vue
View File

@ -64,7 +64,7 @@ export default {
},
{
id: 'tabmenu',
label: 'TabMenu',
label: 'Tab Menu',
component: TabMenuDoc
},
{

5
packages/metadata/src/components/index.ts
View File

@ -55,6 +55,11 @@ export const panel: MetaType[] = toMeta([
'Splitter',
'SplitterPanel',
'Stepper',
'StepList',
'Step',
'StepItem',
'StepPanels',
'StepPanel',
'StepperPanel',
'TabView',
'Tabs',