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

Merge branch 'master' of https://github.com/primefaces/primevue

pull/6439/head
Cagatay Civici 2024-09-19 10:29:53 +03:00
parent 483dfe94b5 46bf8838ba
commit a32cc347e7
116 changed files with 1124 additions and 1872 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -451,14 +451,6 @@
"name": "MeterGroup",
"to": "/metergroup"
},
{
"name": "ScrollTop",
"to": "/scrolltop"
},
{
"name": "Skeleton",
"to": "/skeleton"
},
{
"name": "ProgressBar",
"to": "/progressbar"
@ -467,6 +459,14 @@
"name": "ProgressSpinner",
"to": "/progressspinner"
},
{
"name": "ScrollTop",
"to": "/scrolltop"
},
{
"name": "Skeleton",
"to": "/skeleton"
},
{
"name": "Ripple",
"to": "/ripple"

8
apps/showcase/doc/autocomplete/pt/PTImage.vue
View File

@ -1,8 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>{{ $attrs.description }}</p>
</DocSectionText>
<div class="card">
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/autocomplete.jpg" />
</div>
</template>

32
apps/showcase/doc/autocomplete/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,32 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" appendTo="self" />
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
value: '',
items: [],
docs: [
{
data: getPTOptions('AutoComplete'),
key: 'AutoComplete'
}
]
};
},
methods: {
search(event) {
let _items = [...Array(10).keys()];
this.items = event.query ? [...Array(10).keys()].map((item) => event.query + '-' + item) : _items;
}
}
};
</script>

8
apps/showcase/doc/autocomplete/pt/index.vue
View File

@ -11,16 +11,16 @@
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue';
import PTViewer from './PTViewer.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
id: 'pt.viewer',
label: 'Viewer',
component: PTViewer
},
{
id: 'pt.doc.autocomplete',

8
apps/showcase/doc/cascadeselect/pt/PTImage.vue
View File

@ -1,8 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>{{ $attrs.description }}</p>
</DocSectionText>
<div class="card">
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/cascadeselect.jpg" />
</div>
</template>

98
apps/showcase/doc/cascadeselect/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,98 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="ptViewerDoc">
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
selectedCity: null,
countries: [
{
name: 'Australia',
code: 'AU',
states: [
{
name: 'New South Wales',
cities: [
{ cname: 'Sydney', code: 'A-SY' },
{ cname: 'Newcastle', code: 'A-NE' },
{ cname: 'Wollongong', code: 'A-WO' }
]
},
{
name: 'Queensland',
cities: [
{ cname: 'Brisbane', code: 'A-BR' },
{ cname: 'Townsville', code: 'A-TO' }
]
}
]
},
{
name: 'Canada',
code: 'CA',
states: [
{
name: 'Quebec',
cities: [
{ cname: 'Montreal', code: 'C-MO' },
{ cname: 'Quebec City', code: 'C-QU' }
]
},
{
name: 'Ontario',
cities: [
{ cname: 'Ottawa', code: 'C-OT' },
{ cname: 'Toronto', code: 'C-TO' }
]
}
]
},
{
name: 'United States',
code: 'US',
states: [
{
name: 'California',
cities: [
{ cname: 'Los Angeles', code: 'US-LA' },
{ cname: 'San Diego', code: 'US-SD' },
{ cname: 'San Francisco', code: 'US-SF' }
]
},
{
name: 'Florida',
cities: [
{ cname: 'Jacksonville', code: 'US-JA' },
{ cname: 'Miami', code: 'US-MI' },
{ cname: 'Tampa', code: 'US-TA' },
{ cname: 'Orlando', code: 'US-OR' }
]
},
{
name: 'Texas',
cities: [
{ cname: 'Austin', code: 'US-AU' },
{ cname: 'Dallas', code: 'US-DA' },
{ cname: 'Houston', code: 'US-HO' }
]
}
]
}
],
ptViewerDoc: [
{
data: getPTOptions('CascadeSelect'),
key: 'CascadeSelect'
}
]
};
}
};
</script>

8
apps/showcase/doc/cascadeselect/pt/index.vue
View File

@ -11,16 +11,16 @@
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue';
import PTViewer from './PTViewer.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
id: 'pt.viewer',
label: 'Viewer',
component: PTViewer
},
{
id: 'pt.doc.cascadeselect',

8
apps/showcase/doc/checkbox/pt/PTImage.vue
View File

@ -1,8 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>{{ $attrs.description }}</p>
</DocSectionText>
<div class="card">
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/checkbox.jpg" />
</div>
</template>

24
apps/showcase/doc/checkbox/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<Checkbox v-model="checked" :binary="true" />
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
checked: false,
docs: [
{
data: getPTOptions('Checkbox'),
key: 'Checkbox'
}
]
};
}
};
</script>

8
apps/showcase/doc/checkbox/pt/index.vue
View File

@ -11,16 +11,16 @@
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue';
import PTViewer from './PTViewer.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
id: 'pt.viewer',
label: 'Viewer',
component: PTViewer
},
{
id: 'pt.doc.checkbox',

8
apps/showcase/doc/colorpicker/pt/PTImage.vue
View File

@ -1,8 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>{{ $attrs.description }}</p>
</DocSectionText>
<div class="card">
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/colorpicker.jpg" />
</div>
</template>

24
apps/showcase/doc/colorpicker/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<ColorPicker v-model="color" inline />
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
color: null,
docs: [
{
data: getPTOptions('ColorPicker'),
key: 'ColorPicker'
}
]
};
}
};
</script>

8
apps/showcase/doc/colorpicker/pt/index.vue
View File

@ -11,16 +11,16 @@
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue';
import PTViewer from './PTViewer.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
id: 'pt.viewer',
label: 'Viewer',
component: PTViewer
},
{
id: 'pt.doc.colorpicker',

1
apps/showcase/doc/confirmdialog/pt/index.vue
View File

@ -21,6 +21,7 @@ export default {
id: 'pt.image',
label: 'Wireframe',
component: PTImage
label: 'Viewer',
},
{
id: 'pt.doc.confirmdialog',

8
apps/showcase/doc/datepicker/pt/PTImage.vue
View File

@ -1,8 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>{{ $attrs.description }}</p>
</DocSectionText>
<div class="card">
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
</div>
</template>

24
apps/showcase/doc/datepicker/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<DatePicker v-model="date" showIcon fluid iconDisplay="input" />
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
date: null,
docs: [
{
data: getPTOptions('DatePicker'),
key: 'DatePicker'
}
]
};
}
};
</script>

8
apps/showcase/doc/datepicker/pt/index.vue
View File

@ -11,16 +11,16 @@
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue';
import PTViewer from './PTViewer.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
id: 'pt.viewer',
label: 'Viewer',
component: PTViewer
},
{
id: 'pt.doc.datepicker',

8
apps/showcase/doc/editor/pt/PTImage.vue
View File

@ -1,8 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>{{ $attrs.description }}</p>
</DocSectionText>
<div class="card">
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/editor.jpg" />
</div>
</template>

24
apps/showcase/doc/editor/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<Editor v-model="value" editorStyle="height: 320px" />
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
value: null,
docs: [
{
data: getPTOptions('Editor'),
key: 'Editor'
}
]
};
}
};
</script>

8
apps/showcase/doc/editor/pt/index.vue
View File

@ -11,16 +11,16 @@
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue';
import PTViewer from './PTViewer.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
id: 'pt.viewer',
label: 'Viewer',
component: PTViewer
},
{
id: 'pt.doc.editor',

8
apps/showcase/doc/floatlabel/pt/PTImage.vue
View File

@ -1,8 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>{{ $attrs.description }}</p>
</DocSectionText>
<div class="card">
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
</div>
</template>

27
apps/showcase/doc/floatlabel/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,27 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<FloatLabel>
<InputText id="username" v-model="value" autocomplete="off" />
<label for="username">Username</label>
</FloatLabel>
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
value: null,
docs: [
{
data: getPTOptions('FloatLabel'),
key: 'FloatLabel'
}
]
};
}
};
</script>

8
apps/showcase/doc/floatlabel/pt/index.vue
View File

@ -11,16 +11,16 @@
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue';
import PTViewer from './PTViewer.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
id: 'pt.viewer',
label: 'Viewer',
component: PTViewer
},
{
id: 'pt.doc.floatlabel',

8
apps/showcase/doc/iconfield/pt/PTImage.vue
View File

@ -1,8 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>{{ $attrs.description }}</p>
</DocSectionText>
<div class="card">
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
</div>
</template>

31
apps/showcase/doc/iconfield/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<IconField>
<InputIcon class="pi pi-search" />
<InputText v-model="value" placeholder="Search" />
</IconField>
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
value: null,
docs: [
{
data: getPTOptions('IconField'),
key: 'IconField'
},
{
data: getPTOptions('InputIcon'),
key: 'InputIcon'
}
]
};
}
};
</script>

8
apps/showcase/doc/iconfield/pt/index.vue
View File

@ -11,16 +11,16 @@
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue';
import PTViewer from './PTViewer.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
id: 'pt.viewer',
label: 'Viewer',
component: PTViewer
},
{
id: 'pt.doc.iconfield',

8
apps/showcase/doc/iconfield/theming/pt/PTImage.vue
View File

@ -1,8 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>{{ $attrs.description }}</p>
</DocSectionText>
<div class="card">
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
</div>
</template>

35
apps/showcase/doc/iconfield/theming/pt/index.vue
View File

@ -1,35 +0,0 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>IconField Pass Through</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
},
{
id: 'pt.doc.iconfield',
label: 'IconField PT Options',
component: DocApiTable,
data: getPTOptions('IconField')
}
]
};
}
};
</script>

8
apps/showcase/doc/iftalabel/pt/PTImage.vue
View File

@ -1,8 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>{{ $attrs.description }}</p>
</DocSectionText>
<div class="card">
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
</div>
</template>

27
apps/showcase/doc/iftalabel/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,27 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<IftaLabel>
<InputText id="username" v-model="value" autocomplete="off" />
<label for="username">Username</label>
</IftaLabel>
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
value: null,
docs: [
{
data: getPTOptions('IftaLabel'),
key: 'IftaLabel'
}
]
};
}
};
</script>

8
apps/showcase/doc/iftalabel/pt/index.vue
View File

@ -11,16 +11,16 @@
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue';
import PTViewer from './PTViewer.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
id: 'pt.viewer',
label: 'Viewer',
component: PTViewer
},
{
id: 'pt.doc.iftalabel',

8
apps/showcase/doc/inputgroup/pt/PTImage.vue
View File

@ -1,8 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>{{ $attrs.description }}</p>
</DocSectionText>
<div class="card">
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
</div>
</template>

32
apps/showcase/doc/inputgroup/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,32 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<InputGroup>
<InputGroupAddon>$</InputGroupAddon>
<InputNumber v-model="value" placeholder="Price" />
<InputGroupAddon>.00</InputGroupAddon>
</InputGroup>
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
value: null,
docs: [
{
data: getPTOptions('InputGroup'),
key: 'InputGroup'
},
{
data: getPTOptions('InputGroupAddon'),
key: 'InputGroupAddon'
}
]
};
}
};
</script>

8
apps/showcase/doc/inputgroup/pt/index.vue
View File

@ -12,16 +12,16 @@
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
// import PtDoc from './PTDoc.vue';
import PTImage from './PTImage.vue';
import PTViewer from './PTViewer.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
id: 'pt.viewer',
label: 'Viewer',
component: PTViewer
},
{
id: 'pt.doc.inputgroup',

8
apps/showcase/doc/inputmask/pt/PTImage.vue
View File

@ -1,8 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>{{ $attrs.description }}</p>
</DocSectionText>
<div class="card">
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/inputmask.jpg" />
</div>
</template>

24
apps/showcase/doc/inputmask/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
value: null,
docs: [
{
data: getPTOptions('InputMask'),
key: 'InputMask'
}
]
};
}
};
</script>

8
apps/showcase/doc/inputmask/pt/index.vue
View File

@ -11,16 +11,16 @@
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue';
import PTViewer from './PTViewer.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
id: 'pt.viewer',
label: 'Viewer',
component: PTViewer
},
{
id: 'pt.doc.inputmask',

8
apps/showcase/doc/inputnumber/pt/PTImage.vue
View File

@ -1,8 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>{{ $attrs.description }}</p>
</DocSectionText>
<div class="card">
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/inputnumber.jpg" />
</div>
</template>

24
apps/showcase/doc/inputnumber/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<InputNumber v-model="value" inputId="stacked-buttons" showButtons mode="currency" currency="USD" />
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
value: 20,
docs: [
{
data: getPTOptions('InputNumber'),
key: 'InputNumber'
}
]
};
}
};
</script>

8
apps/showcase/doc/inputnumber/pt/index.vue
View File

@ -11,16 +11,16 @@
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue';
import PTViewer from './PTViewer.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
id: 'pt.viewer',
label: 'Viewer',
component: PTViewer
},
{
id: 'pt.doc.inputnumber',

8
apps/showcase/doc/inputotp/pt/PTImage.vue
View File

@ -1,8 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>{{ $attrs.description }}</p>
</DocSectionText>
<div class="card">
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
</div>
</template>

24
apps/showcase/doc/inputotp/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<InputOtp v-model="value" />
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
value: null,
docs: [
{
data: getPTOptions('InputOtp'),
key: 'InputOtp'
}
]
};
}
};
</script>

8
apps/showcase/doc/inputotp/pt/index.vue
View File

@ -11,16 +11,16 @@
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue';
import PTViewer from './PTViewer.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
id: 'pt.viewer',
label: 'Viewer',
component: PTViewer
},
{
id: 'pt.doc.inputotp',

8
apps/showcase/doc/inputtext/pt/PTImage.vue
View File

@ -1,8 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>{{ $attrs.description }}</p>
</DocSectionText>
<div class="card">
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/inputtext.jpg" />
</div>
</template>

24
apps/showcase/doc/inputtext/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<InputText v-model="value" placeholder="Username" />
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
value: null,
docs: [
{
data: getPTOptions('InputText'),
key: 'InputText'
}
]
};
}
};
</script>

8
apps/showcase/doc/inputtext/pt/index.vue
View File

@ -11,16 +11,16 @@
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue';
import PTViewer from './PTViewer.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
id: 'pt.viewer',
label: 'Viewer',
component: PTViewer
},
{
id: 'pt.doc.inputtext',

8
apps/showcase/doc/knob/pt/PTImage.vue
View File

@ -1,8 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>{{ $attrs.description }}</p>
</DocSectionText>
<div class="card">
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/knob.jpg" />
</div>
</template>

24
apps/showcase/doc/knob/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<Knob v-model="value" />
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
value: 0,
docs: [
{
data: getPTOptions('Knob'),
key: 'Knob'
}
]
};
}
};
</script>

8
apps/showcase/doc/knob/pt/index.vue
View File

@ -11,16 +11,16 @@
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue';
import PTViewer from './PTViewer.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
id: 'pt.viewer',
label: 'Viewer',
component: PTViewer
},
{
id: 'pt.doc.knob',

8
apps/showcase/doc/listbox/pt/PTImage.vue
View File

@ -1,8 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>{{ $attrs.description }}</p>
</DocSectionText>
<div class="card">
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/listbox.jpg" />
</div>
</template>

63
apps/showcase/doc/listbox/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,63 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<Listbox v-model="selectedCity" filter checkmark :highlightOnSelect="false" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" class="w-full md:w-56" listStyle="max-height:250px">
<template #optiongroup="slotProps">
<div class="flex items-center">
<img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
<div>{{ slotProps.option.label }}</div>
</div>
</template>
</Listbox>
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
selectedCity: null,
groupedCities: [
{
label: 'Germany',
code: 'DE',
items: [
{ label: 'Berlin', value: 'Berlin' },
{ label: 'Frankfurt', value: 'Frankfurt' },
{ label: 'Hamburg', value: 'Hamburg' },
{ label: 'Munich', value: 'Munich' }
]
},
{
label: 'USA',
code: 'US',
items: [
{ label: 'Chicago', value: 'Chicago' },
{ label: 'Los Angeles', value: 'Los Angeles' },
{ label: 'New York', value: 'New York' },
{ label: 'San Francisco', value: 'San Francisco' }
]
},
{
label: 'Japan',
code: 'JP',
items: [
{ label: 'Kyoto', value: 'Kyoto' },
{ label: 'Osaka', value: 'Osaka' },
{ label: 'Tokyo', value: 'Tokyo' },
{ label: 'Yokohama', value: 'Yokohama' }
]
}
],
docs: [
{
data: getPTOptions('Listbox'),
key: 'Listbox'
}
]
};
}
};
</script>

8
apps/showcase/doc/listbox/pt/index.vue
View File

@ -11,16 +11,16 @@
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue';
import PTViewer from './PTViewer.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
id: 'pt.viewer',
label: 'Viewer',
component: PTViewer
},
{
id: 'pt.doc.listbox',

8
apps/showcase/doc/multiselect/pt/PTImage.vue
View File

@ -1,8 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>{{ $attrs.description }}</p>
</DocSectionText>
<div class="card">
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/multiselect.jpg" />
</div>
</template>

63
apps/showcase/doc/multiselect/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,63 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" filter optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-80">
<template #optiongroup="slotProps">
<div class="flex items-center">
<img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
<div>{{ slotProps.option.label }}</div>
</div>
</template>
</MultiSelect>
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
selectedCities: null,
groupedCities: [
{
label: 'Germany',
code: 'DE',
items: [
{ label: 'Berlin', value: 'Berlin' },
{ label: 'Frankfurt', value: 'Frankfurt' },
{ label: 'Hamburg', value: 'Hamburg' },
{ label: 'Munich', value: 'Munich' }
]
},
{
label: 'USA',
code: 'US',
items: [
{ label: 'Chicago', value: 'Chicago' },
{ label: 'Los Angeles', value: 'Los Angeles' },
{ label: 'New York', value: 'New York' },
{ label: 'San Francisco', value: 'San Francisco' }
]
},
{
label: 'Japan',
code: 'JP',
items: [
{ label: 'Kyoto', value: 'Kyoto' },
{ label: 'Osaka', value: 'Osaka' },
{ label: 'Tokyo', value: 'Tokyo' },
{ label: 'Yokohama', value: 'Yokohama' }
]
}
],
docs: [
{
data: getPTOptions('MultiSelect'),
key: 'MultiSelect'
}
]
};
}
};
</script>

8
apps/showcase/doc/multiselect/pt/index.vue
View File

@ -11,16 +11,16 @@
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue';
import PTViewer from './PTViewer.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
id: 'pt.viewer',
label: 'Viewer',
component: PTViewer
},
{
id: 'pt.doc.multiselect',

8
apps/showcase/doc/organizationchart/pt/PTImage.vue
View File

@ -1,8 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>{{ $attrs.description }}</p>
</DocSectionText>
<div class="card">
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/orgchart.jpg" />
</div>
</template>

54
apps/showcase/doc/organizationchart/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,54 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<OrganizationChart :value="data" collapsible>
<template #default="slotProps">
<span>{{ slotProps.node.label }}</span>
</template>
</OrganizationChart>
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
data: {
label: 'Argentina',
children: [
{
label: 'Argentina',
children: [
{
label: 'Argentina'
},
{
label: 'Croatia'
}
]
},
{
label: 'France',
children: [
{
label: 'France'
},
{
label: 'Morocco'
}
]
}
]
},
docs: [
{
data: getPTOptions('OrganizationChart'),
key: 'OrganizationChart'
}
]
};
}
};
</script>

8
apps/showcase/doc/organizationchart/pt/index.vue
View File

@ -11,16 +11,16 @@
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue';
import PTViewer from './PTViewer.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
id: 'pt.viewer',
label: 'Viewer',
component: PTViewer
},
{
id: 'pt.doc.organizationchart',

8
apps/showcase/doc/password/pt/PTImage.vue
View File

@ -1,8 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>{{ $attrs.description }}</p>
</DocSectionText>
<div class="card">
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/password.jpg" />
</div>
</template>

24
apps/showcase/doc/password/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<Password v-model="value" />
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
value: null,
docs: [
{
data: getPTOptions('Password'),
key: 'Password'
}
]
};
}
};
</script>

8
apps/showcase/doc/password/pt/index.vue
View File

@ -11,16 +11,16 @@
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue';
import PTViewer from './PTViewer.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
id: 'pt.viewer',
label: 'Viewer',
component: PTViewer
},
{
id: 'pt.doc.password',

8
apps/showcase/doc/radiobutton/pt/PTImage.vue
View File

@ -1,8 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>{{ $attrs.description }}</p>
</DocSectionText>
<div class="card">
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/radiobutton.jpg" />
</div>
</template>

24
apps/showcase/doc/radiobutton/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<RadioButton v-model="value" value="1" />
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
value: null,
docs: [
{
data: getPTOptions('RadioButton'),
key: 'RadioButton'
}
]
};
}
};
</script>

8
apps/showcase/doc/radiobutton/pt/index.vue
View File

@ -11,16 +11,16 @@
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue';
import PTViewer from './PTViewer.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
id: 'pt.viewer',
label: 'Viewer',
component: PTViewer
},
{
id: 'pt.doc.radiobutton',

8
apps/showcase/doc/rating/pt/PTImage.vue
View File

@ -1,8 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>{{ $attrs.description }}</p>
</DocSectionText>
<div class="card">
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/rating.jpg" />
</div>
</template>

24
apps/showcase/doc/rating/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<Rating v-model="value" />
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
value: null,
docs: [
{
data: getPTOptions('Rating'),
key: 'Rating'
}
]
};
}
};
</script>

8
apps/showcase/doc/rating/pt/index.vue
View File

@ -11,16 +11,16 @@
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue';
import PTViewer from './PTViewer.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
id: 'pt.viewer',
label: 'Viewer',
component: PTViewer
},
{
id: 'pt.doc.rating',

8
apps/showcase/doc/select/pt/PTImage.vue
View File

@ -1,8 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>{{ $attrs.description }}</p>
</DocSectionText>
<div class="card">
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/dropdown.jpg" />
</div>
</template>

63
apps/showcase/doc/select/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,63 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<Select v-model="selectedCity" filter :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-56">
<template #optiongroup="slotProps">
<div class="flex items-center">
<img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`mr-2 flag flag-${slotProps.option.code.toLowerCase()}`" style="width: 18px" />
<div>{{ slotProps.option.label }}</div>
</div>
</template>
</Select>
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
selectedCity: null,
groupedCities: [
{
label: 'Germany',
code: 'DE',
items: [
{ label: 'Berlin', value: 'Berlin' },
{ label: 'Frankfurt', value: 'Frankfurt' },
{ label: 'Hamburg', value: 'Hamburg' },
{ label: 'Munich', value: 'Munich' }
]
},
{
label: 'USA',
code: 'US',
items: [
{ label: 'Chicago', value: 'Chicago' },
{ label: 'Los Angeles', value: 'Los Angeles' },
{ label: 'New York', value: 'New York' },
{ label: 'San Francisco', value: 'San Francisco' }
]
},
{
label: 'Japan',
code: 'JP',
items: [
{ label: 'Kyoto', value: 'Kyoto' },
{ label: 'Osaka', value: 'Osaka' },
{ label: 'Tokyo', value: 'Tokyo' },
{ label: 'Yokohama', value: 'Yokohama' }
]
}
],
docs: [
{
data: getPTOptions('Select'),
key: 'Select'
}
]
};
}
};
</script>

8
apps/showcase/doc/select/pt/index.vue
View File

@ -11,16 +11,16 @@
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue';
import PTViewer from './PTViewer.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
id: 'pt.viewer',
label: 'Viewer',
component: PTViewer
},
{
id: 'pt.doc.select',

8
apps/showcase/doc/selectbutton/pt/PTImage.vue
View File

@ -1,8 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>{{ $attrs.description }}</p>
</DocSectionText>
<div class="card">
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/selectbutton.jpg" />
</div>
</template>

25
apps/showcase/doc/selectbutton/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,25 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<SelectButton v-model="value" :options="options" />
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
value: 'One-Way',
options: ['One-Way', 'Return'],
docs: [
{
data: getPTOptions('SelectButton'),
key: 'SelectButton'
}
]
};
}
};
</script>

8
apps/showcase/doc/selectbutton/pt/index.vue
View File

@ -11,16 +11,16 @@
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue';
import PTViewer from './PTViewer.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
id: 'pt.viewer',
label: 'Viewer',
component: PTViewer
},
{
id: 'pt.doc.steps',

8
apps/showcase/doc/slider/pt/PTImage.vue
View File

@ -1,8 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>{{ $attrs.description }}</p>
</DocSectionText>
<div class="card">
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/slider.jpg" />
</div>
</template>

24
apps/showcase/doc/slider/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<Slider v-model="value" class="w-56" />
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
value: null,
docs: [
{
data: getPTOptions('Slider'),
key: 'Slider'
}
]
};
}
};
</script>

8
apps/showcase/doc/slider/pt/index.vue
View File

@ -11,16 +11,16 @@
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue';
import PTViewer from './PTViewer.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
id: 'pt.viewer',
label: 'Viewer',
component: PTViewer
},
{
id: 'pt.doc.slider',

65
apps/showcase/doc/steps/AccessibilityDoc.vue
View File

@ -1,65 +0,0 @@
<template>
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
<h3>Screen Reader</h3>
<p>
Steps component uses the <i>nav</i> element and since any attribute is passed to the root implicitly <i>aria-labelledby</i> or <i>aria-label</i> can be used to describe the component. Inside an ordered list is used where the current step
item defines <i>aria-current</i> as "step".
</p>
<h3>Keyboard Support</h3>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<i>tab</i>
</td>
<td>Adds focus to the active step when focus moves in to the component, if there is already a focused tab header then moves the focus out of the component based on the page tab sequence.</td>
</tr>
<tr>
<td>
<i>enter</i>
</td>
<td>Activates the focused step if readonly is not enabled.</td>
</tr>
<tr>
<td>
<i>space</i>
</td>
<td>Activates the focused step if readonly is not enabled.</td>
</tr>
<tr>
<td>
<i>right arrow</i>
</td>
<td>Moves focus to the next step if readonly is not enabled.</td>
</tr>
<tr>
<td>
<i>left arrow</i>
</td>
<td>Moves focus to the previous step if readonly is not enabled.</td>
</tr>
<tr>
<td>
<i>home</i>
</td>
<td>Moves focus to the first step if readonly is not enabled.</td>
</tr>
<tr>
<td>
<i>end</i>
</td>
<td>Moves focus to the last step if readonly is not enabled.</td>
</tr>
</tbody>
</table>
</div>
</DocSectionText>
</template>

85
apps/showcase/doc/steps/BasicDoc.vue
View File

@ -1,85 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Steps requires a collection of menuitems as its <i>model</i>.</p>
</DocSectionText>
<div class="card">
<Steps :model="items" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
items: [
{
label: 'Personal Info'
},
{
label: 'Reservation'
},
{
label: 'Review'
}
],
code: {
basic: `
<Steps :model="items" />
`,
options: `
<template>
<div class="card">
<Steps :model="items" />
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
label: 'Personal Info'
},
{
label: 'Reservation'
},
{
label: 'Review'
}
]
}
}
}
<\/script>
`,
composition: `
<template>
<div class="card">
<Steps :model="items" />
</div>
</template>
<script setup>
import { ref } from "vue";
const items = ref([
{
label: 'Personal Info'
},
{
label: 'Reservation'
},
{
label: 'Review'
}
]);
<\/script>
`
}
};
}
};
</script>

108
apps/showcase/doc/steps/ControlledDoc.vue
View File

@ -1,108 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Steps can be controlled programmatically using <i>activeStep</i> property.</p>
</DocSectionText>
<div class="card">
<div class="flex mb-8 gap-2 justify-end">
<Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
<Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
<Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
</div>
<Steps v-model:activeStep="active" :model="items" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
active: 0,
items: [
{
label: 'Personal Info'
},
{
label: 'Reservation'
},
{
label: 'Review'
}
],
code: {
basic: `
<div class="flex mb-2 gap-2 justify-end">
<Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
<Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
<Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
</div>
<Steps v-model:activeStep="active" :model="items" />
`,
options: `
<template>
<div class="card">
<div class="flex mb-2 gap-2 justify-end">
<Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
<Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
<Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
</div>
<Steps v-model:activeStep="active" :model="items" />
</div>
</template>
<script>
export default {
data() {
return {
active: 0,
items: [
{
label: 'Personal Info'
},
{
label: 'Reservation'
},
{
label: 'Review'
}
]
}
}
}
<\/script>
`,
composition: `
<template>
<div class="card">
<div class="flex mb-2 gap-2 justify-end">
<Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
<Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
<Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
</div>
<Steps v-model:activeStep="active" :model="items" />
</div>
</template>
<script setup>
import { ref } from "vue";
const active = ref(0);
const items = ref([
{
label: 'Personal Info'
},
{
label: 'Reservation'
},
{
label: 'Review'
}
]);
<\/script>
`
}
};
}
};
</script>

18
apps/showcase/doc/steps/ImportDoc.vue
View File

@ -1,18 +0,0 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template>
<script>
export default {
data() {
return {
code: {
basic: `
import Steps from 'primevue/steps';
`
}
};
}
};
</script>

85
apps/showcase/doc/steps/LinearDoc.vue
View File

@ -1,85 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Steps is linear by default to enforce completion of a previus step to proceed, set <i>readonly</i> as false for non-linear mode.</p>
</DocSectionText>
<div class="card">
<Steps :model="items" :readonly="false" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
items: [
{
label: 'Personal Info'
},
{
label: 'Reservation'
},
{
label: 'Review'
}
],
code: {
basic: `
<Steps :model="items" :readonly="false" />
`,
options: `
<template>
<div class="card">
<Steps :model="items" />
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
label: 'Personal Info'
},
{
label: 'Reservation'
},
{
label: 'Review'
}
]
}
}
}
<\/script>
`,
composition: `
<template>
<div class="card">
<Steps :model="items" :readonly="false" />
</div>
</template>
<script setup>
import { ref } from "vue";
const items = ref([
{
label: 'Personal Info'
},
{
label: 'Reservation'
},
{
label: 'Review'
}
]);
<\/script>
`
}
};
}
};
</script>

136
apps/showcase/doc/steps/TemplateDoc.vue
View File

@ -1,136 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Steps offers item customization with the <i>item</i> template that receives the item instance from the model as a parameter.</p>
</DocSectionText>
<div class="card">
<Steps :model="items" class="custom-steps" :readonly="false">
<template #item="{ item, active }">
<span :class="['inline-flex justify-center items-center rounded-full border-primary border h-12 w-12 z-10 cursor-pointer', { 'bg-primary text-primary-contrast': active, 'bg-surface-0 dark:bg-surface-900 text-primary': !active }]">
<i :class="[item.icon, '!text-xl']" />
</span>
</template>
</Steps>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
items: [
{
icon: 'pi pi-user'
},
{
icon: 'pi pi-calendar'
},
{
icon: 'pi pi-check'
}
],
code: {
basic: `
<Steps :model="items" class="custom-steps" :readonly="false">
<template #item="{ item, active }">
<span :class="['inline-flex justify-center items-center rounded-full border-primary border h-12 w-12 z-10 cursor-pointer', { 'bg-primary text-primary-contrast': active, 'bg-surface-0 dark:bg-surface-900 text-primary': !active }]">
<i :class="[item.icon, '!text-xl']" />
</span>
</template>
</Steps>
`,
options: `
<template>
<div class="card">
<Steps :model="items" class="custom-steps" :readonly="false">
<template #item="{ item, active }">
<span :class="['inline-flex justify-center items-center rounded-full border-primary border h-12 w-12 z-10 cursor-pointer', { 'bg-primary text-primary-contrast': active, 'bg-surface-0 dark:bg-surface-900 text-primary': !active }]">
<i :class="[item.icon, '!text-xl']" />
</span>
</template>
</Steps>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
icon: 'pi pi-user'
},
{
icon: 'pi pi-calendar'
},
{
icon: 'pi pi-check'
}
]
}
}
}
<\/script>
<style lang="scss" scoped>
::v-deep(.custom-steps) {
.p-steps-item:before {
margin-top: 0;
border-color: var(--p-primary-color);
}
}
<\/style>
`,
composition: `
<template>
<div class="card">
<Steps :model="items" class="custom-steps" :readonly="false">
<template #item="{ item, active }">
<span :class="['inline-flex justify-center items-center rounded-full border-primary border h-12 w-12 z-10 cursor-pointer', { 'bg-primary text-primary-contrast': active, 'bg-surface-0 dark:bg-surface-900 text-primary': !active }]">
<i :class="[item.icon, '!text-xl']" />
</span>
</template>
</Steps>
</div>
</template>
<script setup>
import { ref } from "vue";
const items = ref([
{
icon: 'pi pi-user'
},
{
icon: 'pi pi-calendar'
},
{
icon: 'pi pi-check'
}
]);
<\/script>
<style lang="scss" scoped>
::v-deep(.custom-steps) {
.p-steps-item:before {
margin-top: 0;
border-color: var(--p-primary-color);
}
}
<\/style>
`
}
};
}
};
</script>
<style lang="scss" scoped>
::v-deep(.custom-steps) {
.p-steps-item:before {
margin-top: 0;
border-color: var(--p-primary-color);
}
}
</style>

8
apps/showcase/doc/steps/pt/PTImage.vue
View File

@ -1,8 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>{{ $attrs.description }}</p>
</DocSectionText>
<div class="card">
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/steps.jpg" />
</div>
</template>

35
apps/showcase/doc/steps/pt/index.vue
View File

@ -1,35 +0,0 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Steps Pass Through</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
},
{
id: 'pt.doc.steps',
label: 'Steps PT Options',
component: DocApiTable,
data: getPTOptions('Steps')
}
]
};
}
};
</script>

8
apps/showcase/doc/steps/theming/TailwindDoc.vue
View File

@ -1,8 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer" class="doc-link">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style
PrimeVue components with Tailwind CSS.
</p>
</DocSectionText>
</template>

56
apps/showcase/doc/steps/theming/index.vue
View File

@ -1,56 +0,0 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Steps Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'theming.styled',
label: 'Styled',
children: [
{
id: 'theming.classes',
label: 'CSS Classes',
description: 'List of class names used in the styled mode.',
component: DocApiTable,
data: getStyleOptions('Steps')
},
{
id: 'theming.tokens',
label: 'Design Tokens',
description: 'List of design tokens used in a preset.',
component: DocApiTable,
data: getTokenOptions('Steps')
}
]
},
{
id: 'theming.unstyled',
label: 'Unstyled',
description: 'Theming is implemented with the pass through properties in unstyled mode.',
children: [
{
id: 'theming.tailwind',
label: 'Tailwind',
component: TailwindDoc
}
]
}
]
};
}
};
</script>

65
apps/showcase/doc/tabmenu/AccessibilityDoc.vue
View File

@ -1,65 +0,0 @@
<template>
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
<h3>Screen Reader</h3>
<p>
TabMenu component uses the <i>menubar</i> role and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a <i>presentation</i> role whereas anchor elements have a
<i>menuitem</i> role with <i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled.
</p>
<h3>Keyboard Support</h3>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<i>tab</i>
</td>
<td>Adds focus to the active tab header when focus moves in to the component, if there is already a focused tab header moves the focus out of the component based on the page tab sequence.</td>
</tr>
<tr>
<td>
<i>enter</i>
</td>
<td>Activates the focused tab header.</td>
</tr>
<tr>
<td>
<i>space</i>
</td>
<td>Activates the focused tab header.</td>
</tr>
<tr>
<td>
<i>right arrow</i>
</td>
<td>Moves focus to the next header.</td>
</tr>
<tr>
<td>
<i>left arrow</i>
</td>
<td>Moves focus to the previous header.</td>
</tr>
<tr>
<td>
<i>home</i>
</td>
<td>Moves focus to the first header.</td>
</tr>
<tr>
<td>
<i>end</i>
</td>
<td>Moves focus to the last header.</td>
</tr>
</tbody>
</table>
</div>
</DocSectionText>
</template>

69
apps/showcase/doc/tabmenu/BasicDoc.vue
View File

@ -1,69 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>TabMenu requires a collection of menuitems as its <i>model</i>.</p>
</DocSectionText>
<div class="card">
<TabMenu :model="items" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
items: [
{ label: 'Dashboard', icon: 'pi pi-home' },
{ label: 'Transactions', icon: 'pi pi-chart-line' },
{ label: 'Products', icon: 'pi pi-list' },
{ label: 'Messages', icon: 'pi pi-inbox' }
],
code: {
basic: `
<TabMenu :model="items" />
`,
options: `
<template>
<div class="card">
<TabMenu :model="items" />
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ label: 'Dashboard', icon: 'pi pi-home' },
{ label: 'Transactions', icon: 'pi pi-chart-line' },
{ label: 'Products', icon: 'pi pi-list' },
{ label: 'Messages', icon: 'pi pi-inbox' }
]
}
}
}
<\/script>
`,
composition: `
<template>
<div class="card">
<TabMenu :model="items" />
</div>
</template>
<script setup>
import { ref } from "vue";
const items = ref([
{ label: 'Dashboard', icon: 'pi pi-home' },
{ label: 'Transactions', icon: 'pi pi-chart-line' },
{ label: 'Products', icon: 'pi pi-list' },
{ label: 'Messages', icon: 'pi pi-inbox' }
]);
<\/script>
`
}
};
}
};
</script>

147
apps/showcase/doc/tabmenu/CommandDoc.vue
View File

@ -1,147 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>The <i>command</i> property defines the callback to run when an item is activated by click or a key event.</p>
</DocSectionText>
<div class="card">
<TabMenu :model="items" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
items: [
{
label: 'Dashboard',
icon: 'pi pi-home',
command: () => {
this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Dashboard', life: 3000 });
}
},
{
label: 'Transactions',
icon: 'pi pi-chart-line',
command: () => {
this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Transactions', life: 3000 });
}
},
{
label: 'Products',
icon: 'pi pi-list',
command: () => {
this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Products', life: 3000 });
}
},
{
label: 'Messages',
icon: 'pi pi-inbox',
command: () => {
this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Messages', life: 3000 });
}
}
],
code: {
basic: `
<TabMenu :model="items" />
<Toast />
`,
options: `
<template>
<div class="card">
<TabMenu :model="items" />
<Toast />
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
label: 'Dashboard',
icon: 'pi pi-home',
command: () => {
this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Dashboard', life: 3000 });
}
},
{
label: 'Transactions',
icon: 'pi pi-chart-line',
command: () => {
this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Transactions', life: 3000 });
}
},
{
label: 'Products',
icon: 'pi pi-list',
command: () => {
this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Products', life: 3000 });
}
},
{
label: 'Messages',
icon: 'pi pi-inbox',
command: () => {
this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Messages', life: 3000 });
}
}
]
}
}
}
<\/script>
`,
composition: `
<template>
<div class="card">
<TabMenu :model="items" />
<Toast />
</div>
</template>
<script setup>
import { ref } from "vue";
import { useToast } from "primevue/usetoast";
const toast = useToast();
const items = ref([
{
label: 'Dashboard',
icon: 'pi pi-home',
command: () => {
toast.add({ severity: 'success', summary: 'Selected', detail: 'Dashboard', life: 3000 });
}
},
{
label: 'Transactions',
icon: 'pi pi-chart-line',
command: () => {
toast.add({ severity: 'success', summary: 'Selected', detail: 'Transactions', life: 3000 });
}
},
{
label: 'Products',
icon: 'pi pi-list',
command: () => {
toast.add({ severity: 'success', summary: 'Selected', detail: 'Products', life: 3000 });
}
},
{
label: 'Messages',
icon: 'pi pi-inbox',
command: () => {
toast.add({ severity: 'success', summary: 'Selected', detail: 'Messages', life: 3000 });
}
}
]);
<\/script>
`
}
};
}
};
</script>

97
apps/showcase/doc/tabmenu/ControlledDoc.vue
View File

@ -1,97 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Tabs can be controlled programmatically using <i>activeIndex</i> property.</p>
</DocSectionText>
<div class="card">
<div class="flex mb-2 gap-2 justify-end">
<Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
<Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
<Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
</div>
<TabMenu v-model:activeIndex="active" :model="items" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
active: 0,
items: [
{ label: 'Dashboard', icon: 'pi pi-home' },
{ label: 'Transactions', icon: 'pi pi-chart-line' },
{ label: 'Products', icon: 'pi pi-list' },
{ label: 'Messages', icon: 'pi pi-inbox' }
],
code: {
basic: `
<div class="flex mb-2 gap-2 justify-end">
<Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
<Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
<Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
</div>
<TabMenu v-model:activeIndex="active" :model="items" />
`,
options: `
<template>
<div class="card">
<div class="flex mb-2 gap-2 justify-end">
<Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
<Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
<Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
</div>
<TabMenu v-model:activeIndex="active" :model="items" />
</div>
</template>
<script>
export default {
data() {
return {
active: 0,
items: [
{ label: 'Dashboard', icon: 'pi pi-home' },
{ label: 'Transactions', icon: 'pi pi-chart-line' },
{ label: 'Products', icon: 'pi pi-list' },
{ label: 'Messages', icon: 'pi pi-inbox' }
]
}
}
}
<\/script>
`,
composition: `
<template>
<div class="card">
<div class="flex mb-2 gap-2 justify-end">
<Button @click="active.value = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
<Button @click="active.value = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
<Button @click="active.value = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
</div>
<TabMenu v-model:activeIndex="active" :model="items" />
</div>
</template>
<script setup>
import { ref } from "vue";
const active = ref(0);
const items = ref([
{ label: 'Dashboard', icon: 'pi pi-home' },
{ label: 'Transactions', icon: 'pi pi-chart-line' },
{ label: 'Products', icon: 'pi pi-list' },
{ label: 'Messages', icon: 'pi pi-inbox' }
]);
<\/script>
`
}
};
}
};
</script>

18
apps/showcase/doc/tabmenu/ImportDoc.vue
View File

@ -1,18 +0,0 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template>
<script>
export default {
data() {
return {
code: {
basic: `
import TabMenu from 'primevue/tabmenu';
`
}
};
}
};
</script>

136
apps/showcase/doc/tabmenu/RouterDoc.vue
View File

@ -1,136 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.</p>
</DocSectionText>
<div class="card">
<TabMenu :model="items">
<template #item="{ item, props }">
<router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
<a v-ripple :href="href" v-bind="props.action" @click="navigate">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ item.label }}</span>
</a>
</router-link>
<a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ item.label }}</span>
</a>
</template>
</TabMenu>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
items: [
{ label: 'Router Link', icon: 'pi pi-home', route: '/tabmenu' },
{
label: 'Programmatic',
icon: 'pi pi-palette',
command: () => {
this.$router.push('/theming/unstyled');
}
},
{ label: 'External', icon: 'pi pi-link', url: 'https://vuejs.org/' }
],
code: {
basic: `
<TabMenu :model="items">
<template #item="{ item, props }">
<router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
<a v-ripple :href="href" v-bind="props.action" @click="navigate">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ item.label }}</span>
</a>
</router-link>
<a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ item.label }}</span>
</a>
</template>
</TabMenu>
`,
options: `
<template>
<div class="card">
<TabMenu :model="items">
<template #item="{ item, props }">
<router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
<a v-ripple :href="href" v-bind="props.action" @click="navigate">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ item.label }}</span>
</a>
</router-link>
<a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ item.label }}</span>
</a>
</template>
</TabMenu>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ label: 'Router Link', icon: 'pi pi-home', route: '/tabmenu' },
{
label: 'Programmatic',
icon: 'pi pi-palette',
command: () => {
this.$router.push('/theming/unstyled');
}
},
{ label: 'External', icon: 'pi pi-link', url: 'https://vuejs.org/' }
]
}
}
}
<\/script>
`,
composition: `
<template>
<div class="card">
<TabMenu :model="items">
<template #item="{ item, props }">
<router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
<a v-ripple :href="href" v-bind="props.action" @click="navigate">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ item.label }}</span>
</a>
</router-link>
<a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ item.label }}</span>
</a>
</template>
</TabMenu>
</div>
</template>
<script setup>
import { ref } from "vue";
const items = ref([
{ label: 'Router Link', icon: 'pi pi-home', route: '/tabmenu' },
{
label: 'Programmatic',
icon: 'pi pi-palette',
command: () => {
this.$router.push('/theming/unstyled');
}
},
{ label: 'External', icon: 'pi pi-link', url: 'https://vuejs.org/' }
]);
<\/script>
`
}
};
}
};
</script>

94
apps/showcase/doc/tabmenu/TemplateDoc.vue
View File

@ -1,94 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>TabMenu offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
</DocSectionText>
<div class="card">
<TabMenu :model="items">
<template #item="{ item, props }">
<a v-ripple v-bind="props.action" class="flex items-center gap-2">
<img :alt="item.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${item.image}`" style="width: 32px" />
<span class="font-bold">{{ item.name }}</span>
</a>
</template>
</TabMenu>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
items: [
{ name: 'Amy Elsner', image: 'amyelsner.png' },
{ name: 'Anna Fali', image: 'annafali.png' },
{ name: 'Asiya Javayant', image: 'asiyajavayant.png' }
],
code: {
basic: `
<TabMenu :model="items">
<template #item="{ item, props }">
<a v-ripple v-bind="props.action" class="flex items-center gap-2">
<img :alt="item.name" :src="\`/images/avatar/\${item.image}\`" style="width: 32px" />
<span class="font-bold">{{ item.name }}</span>
</a>
</template>
</TabMenu>
`,
options: `
<template>
<div class="card">
<TabMenu :model="items">
<template #item="{ item, props }">
<a v-ripple v-bind="props.action" class="flex items-center gap-2">
<img :alt="item.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${item.image}\`" style="width: 32px" />
<span class="font-bold">{{ item.name }}</span>
</a>
</template>
</TabMenu>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ name: 'Amy Elsner', image: 'amyelsner.png' },
{ name: 'Anna Fali', image: 'annafali.png' },
{ name: 'Asiya Javayant', image: 'asiyajavayant.png' }
]
}
}
}
<\/script>
`,
composition: `
<template>
<div class="card">
<TabMenu :model="items">
<template #item="{ item, props }">
<a v-ripple v-bind="props.action" class="flex items-center gap-2">
<img :alt="item.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${item.image}\`" style="width: 32px" />
<span class="font-bold">{{ item.name }}</span>
</a>
</template>
</TabMenu>
</div>
</template>
<script setup>
import { ref } from "vue";
const items = ref([
{ name: 'Amy Elsner', image: 'amyelsner.png' },
{ name: 'Anna Fali', image: 'annafali.png' },
{ name: 'Asiya Javayant', image: 'asiyajavayant.png' }
]);
<\/script>
`
}
};
}
};
</script>

35
apps/showcase/doc/tabmenu/pt/index.vue
View File

@ -1,35 +0,0 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>TabMenu Pass Through</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
},
{
id: 'pt.doc.tabmenu',
label: 'TabMenu PT Options',
component: DocApiTable,
data: getPTOptions('TabMenu')
}
]
};
}
};
</script>

8
apps/showcase/doc/tabmenu/theming/TailwindDoc.vue
View File

@ -1,8 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer" class="doc-link">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style
PrimeVue components with Tailwind CSS.
</p>
</DocSectionText>
</template>

56
apps/showcase/doc/tabmenu/theming/index.vue
View File

@ -1,56 +0,0 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>TabMenu Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'theming.styled',
label: 'Styled',
children: [
{
id: 'theming.classes',
label: 'CSS Classes',
description: 'List of class names used in the styled mode.',
component: DocApiTable,
data: getStyleOptions('TabMenu')
},
{
id: 'theming.tokens',
label: 'Design Tokens',
description: 'List of design tokens used in a preset.',
component: DocApiTable,
data: getTokenOptions('TabMenu')
}
]
},
{
id: 'theming.unstyled',
label: 'Unstyled',
description: 'Theming is implemented with the pass through properties in unstyled mode.',
children: [
{
id: 'theming.tailwind',
label: 'Tailwind',
component: TailwindDoc
}
]
}
]
};
}
};
</script>

8
apps/showcase/doc/textarea/pt/PTImage.vue
View File

@ -1,8 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>{{ $attrs.description }}</p>
</DocSectionText>
<div class="card">
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/textarea.jpg" />
</div>
</template>

24
apps/showcase/doc/textarea/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocPTViewer :docs="docs">
<Textarea v-model="value" rows="5" cols="30" style="resize: none" />
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
export default {
data() {
return {
value: null,
docs: [
{
data: getPTOptions('Textarea'),
key: 'Textarea'
}
]
};
}
};
</script>

8
apps/showcase/doc/textarea/pt/index.vue
View File

@ -11,16 +11,16 @@
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue';
import PTViewer from './PTViewer.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
id: 'pt.viewer',
label: 'Viewer',
component: PTViewer
},
{
id: 'pt.doc.textarea',

8
apps/showcase/doc/timeline/pt/PTImage.vue
View File

@ -1,8 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>{{ $attrs.description }}</p>
</DocSectionText>
<div class="card">
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/timeline.jpg" />
</div>
</template>

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