PanelMenu, Steps, TabMenu, TieredMenu unstyled demo updates
Tuğçe Küçükoğlu
parent
68d29dc847
commit
bc8293486d
|
|
@ -0,0 +1,260 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<DocSectionCode :code="code" embedded />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'File',
|
||||||
|
icon: 'pi pi-fw pi-file',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'New',
|
||||||
|
icon: 'pi pi-fw pi-plus',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Bookmark',
|
||||||
|
icon: 'pi pi-fw pi-bookmark'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Video',
|
||||||
|
icon: 'pi pi-fw pi-video'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Delete',
|
||||||
|
icon: 'pi pi-fw pi-trash'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Export',
|
||||||
|
icon: 'pi pi-fw pi-external-link'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Edit',
|
||||||
|
icon: 'pi pi-fw pi-pencil',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Left',
|
||||||
|
icon: 'pi pi-fw pi-align-left'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Right',
|
||||||
|
icon: 'pi pi-fw pi-align-right'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Center',
|
||||||
|
icon: 'pi pi-fw pi-align-center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Justify',
|
||||||
|
icon: 'pi pi-fw pi-align-justify'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Users',
|
||||||
|
icon: 'pi pi-fw pi-user',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'New',
|
||||||
|
icon: 'pi pi-fw pi-user-plus'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Delete',
|
||||||
|
icon: 'pi pi-fw pi-user-minus'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Search',
|
||||||
|
icon: 'pi pi-fw pi-users',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Filter',
|
||||||
|
icon: 'pi pi-fw pi-filter',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Print',
|
||||||
|
icon: 'pi pi-fw pi-print'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'pi pi-fw pi-bars',
|
||||||
|
label: 'List'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Events',
|
||||||
|
icon: 'pi pi-fw pi-calendar',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Edit',
|
||||||
|
icon: 'pi pi-fw pi-pencil',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Save',
|
||||||
|
icon: 'pi pi-fw pi-calendar-plus'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Delete',
|
||||||
|
icon: 'pi pi-fw pi-calendar-minus'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Archieve',
|
||||||
|
icon: 'pi pi-fw pi-calendar-times',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Remove',
|
||||||
|
icon: 'pi pi-fw pi-calendar-minus'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
code: {
|
||||||
|
composition: `
|
||||||
|
<template>
|
||||||
|
<div class="card flex justify-center">
|
||||||
|
<PanelMenu :model="items" class="w-full md:w-96" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
const items = ref([
|
||||||
|
{
|
||||||
|
label: 'File',
|
||||||
|
icon: 'pi pi-fw pi-file',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'New',
|
||||||
|
icon: 'pi pi-fw pi-plus',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Bookmark',
|
||||||
|
icon: 'pi pi-fw pi-bookmark'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Video',
|
||||||
|
icon: 'pi pi-fw pi-video'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Delete',
|
||||||
|
icon: 'pi pi-fw pi-trash'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Export',
|
||||||
|
icon: 'pi pi-fw pi-external-link'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Edit',
|
||||||
|
icon: 'pi pi-fw pi-pencil',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Left',
|
||||||
|
icon: 'pi pi-fw pi-align-left'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Right',
|
||||||
|
icon: 'pi pi-fw pi-align-right'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Center',
|
||||||
|
icon: 'pi pi-fw pi-align-center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Justify',
|
||||||
|
icon: 'pi pi-fw pi-align-justify'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Users',
|
||||||
|
icon: 'pi pi-fw pi-user',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'New',
|
||||||
|
icon: 'pi pi-fw pi-user-plus'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Delete',
|
||||||
|
icon: 'pi pi-fw pi-user-minus'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Search',
|
||||||
|
icon: 'pi pi-fw pi-users',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Filter',
|
||||||
|
icon: 'pi pi-fw pi-filter',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Print',
|
||||||
|
icon: 'pi pi-fw pi-print'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'pi pi-fw pi-bars',
|
||||||
|
label: 'List'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Events',
|
||||||
|
icon: 'pi pi-fw pi-calendar',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Edit',
|
||||||
|
icon: 'pi pi-fw pi-pencil',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Save',
|
||||||
|
icon: 'pi pi-fw pi-calendar-plus'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Delete',
|
||||||
|
icon: 'pi pi-fw pi-calendar-minus'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Archieve',
|
||||||
|
icon: 'pi pi-fw pi-calendar-times',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Remove',
|
||||||
|
icon: 'pi pi-fw pi-calendar-minus'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
<\/script>`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
<template>
|
||||||
|
<div class="doc-main">
|
||||||
|
<div class="doc-intro">
|
||||||
|
<h1>PanelMenu Theming</h1>
|
||||||
|
</div>
|
||||||
|
<DocSections :docs="docs" />
|
||||||
|
</div>
|
||||||
|
<DocSectionNav :docs="docs" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import StyledDoc from './StyledDoc.vue';
|
||||||
|
import UnstyledDoc from './UnstyledDoc.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
docs: [
|
||||||
|
{
|
||||||
|
id: 'styled',
|
||||||
|
label: 'Styled',
|
||||||
|
component: StyledDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'unstyled',
|
||||||
|
label: 'Unstyled',
|
||||||
|
component: UnstyledDoc
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<DocSectionCode :code="code" embedded />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Personal',
|
||||||
|
to: '/steps'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Seat',
|
||||||
|
to: '/steps/seat'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Payment',
|
||||||
|
to: '/steps/payment'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Confirmation',
|
||||||
|
to: '/steps/confirmation'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
code: {
|
||||||
|
composition: `
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="card">
|
||||||
|
<Steps :model="items" :readonly="false" aria-label="Form Steps" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
const items = ref([
|
||||||
|
{
|
||||||
|
label: 'Personal',
|
||||||
|
to: "/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Seat',
|
||||||
|
to: "/seat",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Payment',
|
||||||
|
to: "/payment",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Confirmation',
|
||||||
|
to: "/confirmation",
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
<\/script>`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
<template>
|
||||||
|
<div class="doc-main">
|
||||||
|
<div class="doc-intro">
|
||||||
|
<h1>Steps Theming</h1>
|
||||||
|
</div>
|
||||||
|
<DocSections :docs="docs" />
|
||||||
|
</div>
|
||||||
|
<DocSectionNav :docs="docs" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import StyledDoc from './StyledDoc.vue';
|
||||||
|
import UnstyledDoc from './UnstyledDoc.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
docs: [
|
||||||
|
{
|
||||||
|
id: 'styled',
|
||||||
|
label: 'Styled',
|
||||||
|
component: StyledDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'unstyled',
|
||||||
|
label: 'Unstyled',
|
||||||
|
component: UnstyledDoc
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,145 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<DocSectionCode :code="code" embedded />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
items: [
|
||||||
|
{ label: 'Home', icon: 'pi pi-fw pi-home', to: '/tabmenu' },
|
||||||
|
{ label: 'Calendar', icon: 'pi pi-fw pi-calendar', to: '/tabmenu/calendar' },
|
||||||
|
{ label: 'Edit', icon: 'pi pi-fw pi-pencil', to: '/tabmenu/edit' },
|
||||||
|
{ label: 'Documentation', icon: 'pi pi-fw pi-file', to: '/tabmenu/documentation' },
|
||||||
|
{ label: 'Settings', icon: 'pi pi-fw pi-cog', to: '/tabmenu/settings' }
|
||||||
|
],
|
||||||
|
code: {
|
||||||
|
composition: `
|
||||||
|
<template>
|
||||||
|
<div class="card">
|
||||||
|
<TabMenu :model="items" />
|
||||||
|
<router-view />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
const items = ref([
|
||||||
|
{
|
||||||
|
label: 'Home',
|
||||||
|
icon: 'pi pi-fw pi-home',
|
||||||
|
to: '/'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Calendar',
|
||||||
|
icon: 'pi pi-fw pi-calendar',
|
||||||
|
to: '/calendar'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Edit',
|
||||||
|
icon: 'pi pi-fw pi-pencil',
|
||||||
|
to: '/edit'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Documentation',
|
||||||
|
icon: 'pi pi-fw pi-file',
|
||||||
|
to: '/documentation'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Settings',
|
||||||
|
icon: 'pi pi-fw pi-cog',
|
||||||
|
to: '/settings'
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
<\/script>`,
|
||||||
|
pages: [
|
||||||
|
{
|
||||||
|
tabName: 'HomeDemo',
|
||||||
|
content: `
|
||||||
|
<template>
|
||||||
|
<div class="tabmenudemo-content">
|
||||||
|
<h5>Home Component Content</h5>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
|
||||||
|
}
|
||||||
|
<\/script>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tabName: 'CalendarDemo',
|
||||||
|
content: `
|
||||||
|
<template>
|
||||||
|
<div class="tabmenudemo-content">
|
||||||
|
<h5>Calendar Component Content</h5>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
|
||||||
|
}
|
||||||
|
<\/script>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tabName: 'EditDemo',
|
||||||
|
content: `
|
||||||
|
<template>
|
||||||
|
<div class="tabmenudemo-content">
|
||||||
|
<h5>Edit Component Content</h5>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
|
||||||
|
}
|
||||||
|
<\/script>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tabName: 'DocumentationDemo',
|
||||||
|
content: `
|
||||||
|
<template>
|
||||||
|
<div class="tabmenudemo-content">
|
||||||
|
<h5>Documentation Component Content</h5>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
|
||||||
|
}
|
||||||
|
<\/script>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tabName: 'SettingsDemo',
|
||||||
|
content: `
|
||||||
|
<template>
|
||||||
|
<div class="tabmenudemo-content">
|
||||||
|
<h5>Settings Component Content</h5>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
|
||||||
|
}
|
||||||
|
<\/script>`
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
<template>
|
||||||
|
<div class="doc-main">
|
||||||
|
<div class="doc-intro">
|
||||||
|
<h1>TabMenu Theming</h1>
|
||||||
|
</div>
|
||||||
|
<DocSections :docs="docs" />
|
||||||
|
</div>
|
||||||
|
<DocSectionNav :docs="docs" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import StyledDoc from './StyledDoc.vue';
|
||||||
|
import UnstyledDoc from './UnstyledDoc.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
docs: [
|
||||||
|
{
|
||||||
|
id: 'styled',
|
||||||
|
label: 'Styled',
|
||||||
|
component: StyledDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'unstyled',
|
||||||
|
label: 'Unstyled',
|
||||||
|
component: UnstyledDoc
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,280 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<DocSectionCode :code="code" embedded />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'File',
|
||||||
|
icon: 'pi pi-fw pi-file',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'New',
|
||||||
|
icon: 'pi pi-fw pi-plus',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Bookmark',
|
||||||
|
icon: 'pi pi-fw pi-bookmark'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Video',
|
||||||
|
icon: 'pi pi-fw pi-video'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Delete',
|
||||||
|
icon: 'pi pi-fw pi-trash'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
separator: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Export',
|
||||||
|
icon: 'pi pi-fw pi-external-link'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Edit',
|
||||||
|
icon: 'pi pi-fw pi-pencil',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Left',
|
||||||
|
icon: 'pi pi-fw pi-align-left'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Right',
|
||||||
|
icon: 'pi pi-fw pi-align-right'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Center',
|
||||||
|
icon: 'pi pi-fw pi-align-center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Justify',
|
||||||
|
icon: 'pi pi-fw pi-align-justify'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Users',
|
||||||
|
icon: 'pi pi-fw pi-user',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'New',
|
||||||
|
icon: 'pi pi-fw pi-user-plus'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Delete',
|
||||||
|
icon: 'pi pi-fw pi-user-minus'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Search',
|
||||||
|
icon: 'pi pi-fw pi-users',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Filter',
|
||||||
|
icon: 'pi pi-fw pi-filter',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Print',
|
||||||
|
icon: 'pi pi-fw pi-print'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'pi pi-fw pi-bars',
|
||||||
|
label: 'List'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Events',
|
||||||
|
icon: 'pi pi-fw pi-calendar',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Edit',
|
||||||
|
icon: 'pi pi-fw pi-pencil',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Save',
|
||||||
|
icon: 'pi pi-fw pi-calendar-plus'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Delete',
|
||||||
|
icon: 'pi pi-fw pi-calendar-minus'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Archieve',
|
||||||
|
icon: 'pi pi-fw pi-calendar-times',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Remove',
|
||||||
|
icon: 'pi pi-fw pi-calendar-minus'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
separator: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Quit',
|
||||||
|
icon: 'pi pi-fw pi-power-off'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
code: {
|
||||||
|
composition: `
|
||||||
|
<template>
|
||||||
|
<div class="card flex justify-center">
|
||||||
|
<TieredMenu :model="items" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
const items = ref([
|
||||||
|
{
|
||||||
|
label: 'File',
|
||||||
|
icon: 'pi pi-fw pi-file',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'New',
|
||||||
|
icon: 'pi pi-fw pi-plus',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Bookmark',
|
||||||
|
icon: 'pi pi-fw pi-bookmark'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Video',
|
||||||
|
icon: 'pi pi-fw pi-video'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Delete',
|
||||||
|
icon: 'pi pi-fw pi-trash'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
separator: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Export',
|
||||||
|
icon: 'pi pi-fw pi-external-link'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Edit',
|
||||||
|
icon: 'pi pi-fw pi-pencil',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Left',
|
||||||
|
icon: 'pi pi-fw pi-align-left'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Right',
|
||||||
|
icon: 'pi pi-fw pi-align-right'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Center',
|
||||||
|
icon: 'pi pi-fw pi-align-center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Justify',
|
||||||
|
icon: 'pi pi-fw pi-align-justify'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Users',
|
||||||
|
icon: 'pi pi-fw pi-user',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'New',
|
||||||
|
icon: 'pi pi-fw pi-user-plus'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Delete',
|
||||||
|
icon: 'pi pi-fw pi-user-minus'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Search',
|
||||||
|
icon: 'pi pi-fw pi-users',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Filter',
|
||||||
|
icon: 'pi pi-fw pi-filter',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Print',
|
||||||
|
icon: 'pi pi-fw pi-print'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'pi pi-fw pi-bars',
|
||||||
|
label: 'List'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Events',
|
||||||
|
icon: 'pi pi-fw pi-calendar',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Edit',
|
||||||
|
icon: 'pi pi-fw pi-pencil',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Save',
|
||||||
|
icon: 'pi pi-fw pi-calendar-plus'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Delete',
|
||||||
|
icon: 'pi pi-fw pi-calendar-minus'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Archieve',
|
||||||
|
icon: 'pi pi-fw pi-calendar-times',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Remove',
|
||||||
|
icon: 'pi pi-fw pi-calendar-minus'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
separator: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Quit',
|
||||||
|
icon: 'pi pi-fw pi-power-off'
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
<\/script>`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
<template>
|
||||||
|
<div class="doc-main">
|
||||||
|
<div class="doc-intro">
|
||||||
|
<h1>TieredMenu Theming</h1>
|
||||||
|
</div>
|
||||||
|
<DocSections :docs="docs" />
|
||||||
|
</div>
|
||||||
|
<DocSectionNav :docs="docs" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import StyledDoc from './StyledDoc.vue';
|
||||||
|
import UnstyledDoc from './UnstyledDoc.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
docs: [
|
||||||
|
{
|
||||||
|
id: 'styled',
|
||||||
|
label: 'Styled',
|
||||||
|
component: StyledDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'unstyled',
|
||||||
|
label: 'Unstyled',
|
||||||
|
component: UnstyledDoc
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -1,5 +1,13 @@
|
||||||
<template>
|
<template>
|
||||||
<DocComponent title="Vue PanelMenu Component" header="PanelMenu" description="PanelMenu is a hybrid of accordion-tree components." :componentDocs="docs" :apiDocs="['PanelMenu', 'MenuItem']" :ptTabComponent="ptComponent" />
|
<DocComponent
|
||||||
|
title="Vue PanelMenu Component"
|
||||||
|
header="PanelMenu"
|
||||||
|
description="PanelMenu is a hybrid of accordion-tree components."
|
||||||
|
:componentDocs="docs"
|
||||||
|
:apiDocs="['PanelMenu', 'MenuItem']"
|
||||||
|
:ptTabComponent="ptComponent"
|
||||||
|
:themingDocs="themingDoc"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -8,8 +16,8 @@ import BasicDoc from '@/doc/panelmenu/BasicDoc';
|
||||||
import ImportDoc from '@/doc/panelmenu/ImportDoc';
|
import ImportDoc from '@/doc/panelmenu/ImportDoc';
|
||||||
import MultipleDoc from '@/doc/panelmenu/MultipleDoc';
|
import MultipleDoc from '@/doc/panelmenu/MultipleDoc';
|
||||||
import ProgrammaticDoc from '@/doc/panelmenu/ProgrammaticDoc';
|
import ProgrammaticDoc from '@/doc/panelmenu/ProgrammaticDoc';
|
||||||
import StyleDoc from '@/doc/panelmenu/StyleDoc';
|
|
||||||
import PTComponent from '@/doc/panelmenu/pt/index.vue';
|
import PTComponent from '@/doc/panelmenu/pt/index.vue';
|
||||||
|
import ThemingDoc from '@/doc/panelmenu/theming/index.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -35,18 +43,14 @@ export default {
|
||||||
label: 'Multiple',
|
label: 'Multiple',
|
||||||
component: MultipleDoc
|
component: MultipleDoc
|
||||||
},
|
},
|
||||||
{
|
|
||||||
id: 'style',
|
|
||||||
label: 'Style',
|
|
||||||
component: StyleDoc
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: 'accessibility',
|
id: 'accessibility',
|
||||||
label: 'Accessibility',
|
label: 'Accessibility',
|
||||||
component: AccessibilityDoc
|
component: AccessibilityDoc
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
ptComponent: PTComponent
|
ptComponent: PTComponent,
|
||||||
|
themingDoc: ThemingDoc
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,7 @@
|
||||||
:componentDocs="docs"
|
:componentDocs="docs"
|
||||||
:apiDocs="['Steps', 'MenuItem']"
|
:apiDocs="['Steps', 'MenuItem']"
|
||||||
:ptTabComponent="ptComponent"
|
:ptTabComponent="ptComponent"
|
||||||
|
:themingDocs="themingDoc"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -14,8 +15,8 @@ import AccessibilityDoc from '@/doc/steps/AccessibilityDoc';
|
||||||
import BasicDoc from '@/doc/steps/BasicDoc';
|
import BasicDoc from '@/doc/steps/BasicDoc';
|
||||||
import ImportDoc from '@/doc/steps/ImportDoc';
|
import ImportDoc from '@/doc/steps/ImportDoc';
|
||||||
import InteractiveDoc from '@/doc/steps/InteractiveDoc';
|
import InteractiveDoc from '@/doc/steps/InteractiveDoc';
|
||||||
import StyleDoc from '@/doc/steps/StyleDoc';
|
|
||||||
import PTComponent from '@/doc/steps/pt/index.vue';
|
import PTComponent from '@/doc/steps/pt/index.vue';
|
||||||
|
import ThemingDoc from '@/doc/steps/theming/index.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -36,18 +37,14 @@ export default {
|
||||||
label: 'Interactive',
|
label: 'Interactive',
|
||||||
component: InteractiveDoc
|
component: InteractiveDoc
|
||||||
},
|
},
|
||||||
{
|
|
||||||
id: 'style',
|
|
||||||
label: 'Style',
|
|
||||||
component: StyleDoc
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: 'accessibility',
|
id: 'accessibility',
|
||||||
label: 'Accessibility',
|
label: 'Accessibility',
|
||||||
component: AccessibilityDoc
|
component: AccessibilityDoc
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
ptComponent: PTComponent
|
ptComponent: PTComponent,
|
||||||
|
themingDoc: ThemingDoc
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,22 @@
|
||||||
<template>
|
<template>
|
||||||
<DocComponent title="Vue TabMenu Component" header="TabMenu" description="TabMenu is a navigation/command component that displays items as tab headers." :componentDocs="docs" :apiDocs="['TabMenu', 'MenuItem']" :ptTabComponent="ptComponent" />
|
<DocComponent
|
||||||
|
title="Vue TabMenu Component"
|
||||||
|
header="TabMenu"
|
||||||
|
description="TabMenu is a navigation/command component that displays items as tab headers."
|
||||||
|
:componentDocs="docs"
|
||||||
|
:apiDocs="['TabMenu', 'MenuItem']"
|
||||||
|
:ptTabComponent="ptComponent"
|
||||||
|
:themingDocs="themingDoc"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import PTComponent from '@/doc/tabmenu/pt/index.vue';
|
import PTComponent from '@/doc/tabmenu/pt/index.vue';
|
||||||
|
import ThemingDoc from '@/doc/tabmenu/theming/index.vue';
|
||||||
import AccessibilityDoc from '../doc/tabmenu/AccessibilityDoc.vue';
|
import AccessibilityDoc from '../doc/tabmenu/AccessibilityDoc.vue';
|
||||||
import BasicDoc from '../doc/tabmenu/BasicDoc.vue';
|
import BasicDoc from '../doc/tabmenu/BasicDoc.vue';
|
||||||
import ControlledDoc from '../doc/tabmenu/ControlledDoc.vue';
|
import ControlledDoc from '../doc/tabmenu/ControlledDoc.vue';
|
||||||
import ImportDoc from '../doc/tabmenu/ImportDoc.vue';
|
import ImportDoc from '../doc/tabmenu/ImportDoc.vue';
|
||||||
import StyleDoc from '../doc/tabmenu/StyleDoc.vue';
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -29,25 +37,15 @@ export default {
|
||||||
label: 'Controlled',
|
label: 'Controlled',
|
||||||
component: ControlledDoc
|
component: ControlledDoc
|
||||||
},
|
},
|
||||||
{
|
|
||||||
id: 'style',
|
|
||||||
label: 'Style',
|
|
||||||
component: StyleDoc
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: 'accessibility',
|
id: 'accessibility',
|
||||||
label: 'Accessibility',
|
label: 'Accessibility',
|
||||||
component: AccessibilityDoc
|
component: AccessibilityDoc
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
ptComponent: PTComponent
|
ptComponent: PTComponent,
|
||||||
|
themingDoc: ThemingDoc
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
::v-deep(.tabmenudemo-content) {
|
|
||||||
padding: 2rem 1rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,13 @@
|
||||||
<template>
|
<template>
|
||||||
<DocComponent title="Vue TieredMenu Component" header="TieredMenu" description="TieredMenu displays submenus in nested overlays." :componentDocs="docs" :apiDocs="['TieredMenu', 'MenuItem']" :ptTabComponent="ptComponent" />
|
<DocComponent
|
||||||
|
title="Vue TieredMenu Component"
|
||||||
|
header="TieredMenu"
|
||||||
|
description="TieredMenu displays submenus in nested overlays."
|
||||||
|
:componentDocs="docs"
|
||||||
|
:apiDocs="['TieredMenu', 'MenuItem']"
|
||||||
|
:ptTabComponent="ptComponent"
|
||||||
|
:themingDocs="themingDoc"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -7,8 +15,8 @@ import AccessibilityDoc from '@/doc/tieredmenu/AccessibilityDoc';
|
||||||
import BasicDoc from '@/doc/tieredmenu/BasicDoc';
|
import BasicDoc from '@/doc/tieredmenu/BasicDoc';
|
||||||
import ImportDoc from '@/doc/tieredmenu/ImportDoc';
|
import ImportDoc from '@/doc/tieredmenu/ImportDoc';
|
||||||
import PopupDoc from '@/doc/tieredmenu/PopupDoc';
|
import PopupDoc from '@/doc/tieredmenu/PopupDoc';
|
||||||
import StyleDoc from '@/doc/tieredmenu/StyleDoc';
|
|
||||||
import PTComponent from '@/doc/tieredmenu/pt/index.vue';
|
import PTComponent from '@/doc/tieredmenu/pt/index.vue';
|
||||||
|
import ThemingDoc from '@/doc/tieredmenu/theming/index.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -29,18 +37,14 @@ export default {
|
||||||
label: 'Popup',
|
label: 'Popup',
|
||||||
component: PopupDoc
|
component: PopupDoc
|
||||||
},
|
},
|
||||||
{
|
|
||||||
id: 'style',
|
|
||||||
label: 'Style',
|
|
||||||
component: StyleDoc
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: 'accessibility',
|
id: 'accessibility',
|
||||||
label: 'Accessibility',
|
label: 'Accessibility',
|
||||||
component: AccessibilityDoc
|
component: AccessibilityDoc
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
ptComponent: PTComponent
|
ptComponent: PTComponent,
|
||||||
|
themingDoc: ThemingDoc
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue