Org Chart, Paginator, Tree unstyled demo updates
Tuğçe Küçükoğlu
parent
518ff2f866
commit
aa2c908e55
|
|
@ -0,0 +1,134 @@
|
||||||
|
<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 {
|
||||||
|
data: {
|
||||||
|
key: '0',
|
||||||
|
type: 'country',
|
||||||
|
label: 'Argentina',
|
||||||
|
data: 'ar',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
key: '0_0',
|
||||||
|
type: 'country',
|
||||||
|
label: 'Argentina',
|
||||||
|
data: 'ar',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
key: '0_0_0',
|
||||||
|
type: 'country',
|
||||||
|
label: 'Argentina',
|
||||||
|
data: 'ar'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '0_0_1',
|
||||||
|
type: 'country',
|
||||||
|
label: 'Croatia',
|
||||||
|
data: 'hr'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '0_1',
|
||||||
|
type: 'country',
|
||||||
|
label: 'France',
|
||||||
|
data: 'fr',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
key: '0_1_0',
|
||||||
|
type: 'country',
|
||||||
|
label: 'France',
|
||||||
|
data: 'fr'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '0_1_1',
|
||||||
|
type: 'country',
|
||||||
|
label: 'Morocco',
|
||||||
|
data: 'ma'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
code: {
|
||||||
|
composition: `
|
||||||
|
<template>
|
||||||
|
<div class="card overflow-x-auto">
|
||||||
|
<OrganizationChart :value="data" collapsible>
|
||||||
|
<template #country="slotProps">
|
||||||
|
<div class="flex flex-col items-center">
|
||||||
|
<img :alt="slotProps.node.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`w-8 shadow-md flag flag-\${slotProps.node.data}\`" />
|
||||||
|
<div class="mt-3 font-medium text-lg">{{ slotProps.node.label }}</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #default="slotProps">
|
||||||
|
<span>{{slotProps.node.data.label}}</span>
|
||||||
|
</template>
|
||||||
|
</OrganizationChart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
const data = ref({
|
||||||
|
key: '0',
|
||||||
|
type: 'country',
|
||||||
|
label: 'Argentina',
|
||||||
|
data: 'ar',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
key: '0_0',
|
||||||
|
type: 'country',
|
||||||
|
label: 'Argentina',
|
||||||
|
data: 'ar',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
key: '0_0_0',
|
||||||
|
type: 'country',
|
||||||
|
label: 'Argentina',
|
||||||
|
data: 'ar'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '0_0_1',
|
||||||
|
type: 'country',
|
||||||
|
label: 'Croatia',
|
||||||
|
data: 'hr'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '0_1',
|
||||||
|
type: 'country',
|
||||||
|
label: 'France',
|
||||||
|
data: 'fr',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
key: '0_1_0',
|
||||||
|
type: 'country',
|
||||||
|
label: 'France',
|
||||||
|
data: 'fr'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '0_1_1',
|
||||||
|
type: 'country',
|
||||||
|
label: 'Morocco',
|
||||||
|
data: 'ma'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
<\/script>`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
<template>
|
||||||
|
<div class="doc-main">
|
||||||
|
<div class="doc-intro">
|
||||||
|
<h1>OrganizationChart 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,26 @@
|
||||||
|
<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 {
|
||||||
|
code: {
|
||||||
|
composition: `
|
||||||
|
<template>
|
||||||
|
<div class="card">
|
||||||
|
<Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]"></Paginator>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
<\/script>`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
<template>
|
||||||
|
<div class="doc-main">
|
||||||
|
<div class="doc-intro">
|
||||||
|
<h1>Paginator 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" :service="['NodeService']" embedded />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { NodeService } from '@/service/NodeService';
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
nodes: null,
|
||||||
|
code: {
|
||||||
|
composition: `
|
||||||
|
<template>
|
||||||
|
<div class="card flex justify-center">
|
||||||
|
<Tree :value="nodes" class="w-full md:w-[30rem]"></Tree>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
import { NodeService } from '@/service/NodeService';
|
||||||
|
|
||||||
|
const nodes = ref(null);
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
NodeService.getTreeNodes().then((data) => (nodes.value = data));
|
||||||
|
});
|
||||||
|
<\/script>`,
|
||||||
|
data: `
|
||||||
|
{
|
||||||
|
key: '0',
|
||||||
|
label: 'Documents',
|
||||||
|
data: 'Documents Folder',
|
||||||
|
icon: 'pi pi-fw pi-inbox',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
key: '0-0',
|
||||||
|
label: 'Work',
|
||||||
|
data: 'Work Folder',
|
||||||
|
icon: 'pi pi-fw pi-cog',
|
||||||
|
children: [
|
||||||
|
{ key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
|
||||||
|
{ key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '0-1',
|
||||||
|
label: 'Home',
|
||||||
|
data: 'Home Folder',
|
||||||
|
icon: 'pi pi-fw pi-home',
|
||||||
|
children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
...`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
NodeService.getTreeNodes().then((data) => (this.nodes = data));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
<template>
|
||||||
|
<div class="doc-main">
|
||||||
|
<div class="doc-intro">
|
||||||
|
<h1>Tree 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 Organization Chart Component" header="OrganizationChart" description="OrganizationChart visualizes hierarchical organization data." :componentDocs="docs" :apiDocs="['OrganizationChart']" :ptTabComponent="ptComponent" />
|
<DocComponent
|
||||||
|
title="Vue Organization Chart Component"
|
||||||
|
header="OrganizationChart"
|
||||||
|
description="OrganizationChart visualizes hierarchical organization data."
|
||||||
|
:componentDocs="docs"
|
||||||
|
:apiDocs="['OrganizationChart']"
|
||||||
|
:ptTabComponent="ptComponent"
|
||||||
|
:themingDocs="themingDoc"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -8,9 +16,9 @@ import BasicDoc from '@/doc/organizationchart/BasicDoc';
|
||||||
import ColoredDoc from '@/doc/organizationchart/ColoredDoc';
|
import ColoredDoc from '@/doc/organizationchart/ColoredDoc';
|
||||||
import ImportDoc from '@/doc/organizationchart/ImportDoc';
|
import ImportDoc from '@/doc/organizationchart/ImportDoc';
|
||||||
import SelectionDoc from '@/doc/organizationchart/SelectionDoc';
|
import SelectionDoc from '@/doc/organizationchart/SelectionDoc';
|
||||||
import StyleDoc from '@/doc/organizationchart/StyleDoc';
|
|
||||||
import TemplateDoc from '@/doc/organizationchart/TemplateDoc';
|
import TemplateDoc from '@/doc/organizationchart/TemplateDoc';
|
||||||
import PTComponent from '@/doc/organizationchart/pt/index.vue';
|
import PTComponent from '@/doc/organizationchart/pt/index.vue';
|
||||||
|
import ThemingDoc from '@/doc/organizationchart/theming/index.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -41,18 +49,14 @@ export default {
|
||||||
label: 'Colored',
|
label: 'Colored',
|
||||||
component: ColoredDoc
|
component: ColoredDoc
|
||||||
},
|
},
|
||||||
{
|
|
||||||
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,5 +1,13 @@
|
||||||
<template>
|
<template>
|
||||||
<DocComponent title="Vue Paginator Component" header="Paginator" description="Paginator displays data in paged format and provides navigation between pages." :componentDocs="docs" :apiDocs="['Paginator']" :ptTabComponent="ptComponent" />
|
<DocComponent
|
||||||
|
title="Vue Paginator Component"
|
||||||
|
header="Paginator"
|
||||||
|
description="Paginator displays data in paged format and provides navigation between pages."
|
||||||
|
:componentDocs="docs"
|
||||||
|
:apiDocs="['Paginator']"
|
||||||
|
:ptTabComponent="ptComponent"
|
||||||
|
:themingDocs="themingDoc"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -9,9 +17,9 @@ import CurrentPageReportDoc from '@/doc/paginator/CurrentPageReportDoc.vue';
|
||||||
import CustomContentDoc from '@/doc/paginator/CustomContentDoc.vue';
|
import CustomContentDoc from '@/doc/paginator/CustomContentDoc.vue';
|
||||||
import ImportDoc from '@/doc/paginator/ImportDoc.vue';
|
import ImportDoc from '@/doc/paginator/ImportDoc.vue';
|
||||||
import ResponsiveDoc from '@/doc/paginator/ResponsiveDoc.vue';
|
import ResponsiveDoc from '@/doc/paginator/ResponsiveDoc.vue';
|
||||||
import StyleDoc from '@/doc/paginator/StyleDoc.vue';
|
|
||||||
import TemplateDoc from '@/doc/paginator/TemplateDoc.vue';
|
import TemplateDoc from '@/doc/paginator/TemplateDoc.vue';
|
||||||
import PTComponent from '@/doc/paginator/pt/index.vue';
|
import PTComponent from '@/doc/paginator/pt/index.vue';
|
||||||
|
import ThemingDoc from '@/doc/paginator/theming/index.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -47,26 +55,15 @@ export default {
|
||||||
label: 'Custom Content',
|
label: 'Custom Content',
|
||||||
component: CustomContentDoc
|
component: CustomContentDoc
|
||||||
},
|
},
|
||||||
{
|
|
||||||
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>
|
|
||||||
.image-gallery {
|
|
||||||
text-align: center;
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<DocComponent title="Vue Tree Component" header="Tree" description="Tree is used to display hierarchical data." :componentDocs="docs" :apiDocs="['Tree']" :ptTabComponent="ptComponent" />
|
<DocComponent title="Vue Tree Component" header="Tree" description="Tree is used to display hierarchical data." :componentDocs="docs" :apiDocs="['Tree']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import AccessibilityDoc from '@/doc/tree/AccessibilityDoc.vue';
|
import AccessibilityDoc from '@/doc/tree/AccessibilityDoc.vue';
|
||||||
|
|
@ -9,12 +9,12 @@ import EventsDoc from '@/doc/tree/EventsDoc.vue';
|
||||||
import FilterDoc from '@/doc/tree/FilterDoc.vue';
|
import FilterDoc from '@/doc/tree/FilterDoc.vue';
|
||||||
import ImportDoc from '@/doc/tree/ImportDoc.vue';
|
import ImportDoc from '@/doc/tree/ImportDoc.vue';
|
||||||
import LazyDoc from '@/doc/tree/LazyDoc.vue';
|
import LazyDoc from '@/doc/tree/LazyDoc.vue';
|
||||||
import StyleDoc from '@/doc/tree/StyleDoc.vue';
|
|
||||||
import TemplateDoc from '@/doc/tree/TemplateDoc.vue';
|
import TemplateDoc from '@/doc/tree/TemplateDoc.vue';
|
||||||
import PTComponent from '@/doc/tree/pt/index.vue';
|
import PTComponent from '@/doc/tree/pt/index.vue';
|
||||||
import CheckboxDoc from '@/doc/tree/selection/CheckboxDoc.vue';
|
import CheckboxDoc from '@/doc/tree/selection/CheckboxDoc.vue';
|
||||||
import MultipleDoc from '@/doc/tree/selection/MultipleDoc.vue';
|
import MultipleDoc from '@/doc/tree/selection/MultipleDoc.vue';
|
||||||
import SingleDoc from '@/doc/tree/selection/SingleDoc.vue';
|
import SingleDoc from '@/doc/tree/selection/SingleDoc.vue';
|
||||||
|
import ThemingDoc from '@/doc/tree/theming/index.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -76,25 +76,15 @@ export default {
|
||||||
label: 'Filter',
|
label: 'Filter',
|
||||||
component: FilterDoc
|
component: FilterDoc
|
||||||
},
|
},
|
||||||
{
|
|
||||||
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>
|
|
||||||
button {
|
|
||||||
margin-right: 0.5rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue