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>
|
||||
<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>
|
||||
|
||||
<script>
|
||||
|
|
@ -8,9 +16,9 @@ import BasicDoc from '@/doc/organizationchart/BasicDoc';
|
|||
import ColoredDoc from '@/doc/organizationchart/ColoredDoc';
|
||||
import ImportDoc from '@/doc/organizationchart/ImportDoc';
|
||||
import SelectionDoc from '@/doc/organizationchart/SelectionDoc';
|
||||
import StyleDoc from '@/doc/organizationchart/StyleDoc';
|
||||
import TemplateDoc from '@/doc/organizationchart/TemplateDoc';
|
||||
import PTComponent from '@/doc/organizationchart/pt/index.vue';
|
||||
import ThemingDoc from '@/doc/organizationchart/theming/index.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -41,18 +49,14 @@ export default {
|
|||
label: 'Colored',
|
||||
component: ColoredDoc
|
||||
},
|
||||
{
|
||||
id: 'style',
|
||||
label: 'Style',
|
||||
component: StyleDoc
|
||||
},
|
||||
{
|
||||
id: 'accessibility',
|
||||
label: 'Accessibility',
|
||||
component: AccessibilityDoc
|
||||
}
|
||||
],
|
||||
ptComponent: PTComponent
|
||||
ptComponent: PTComponent,
|
||||
themingDoc: ThemingDoc
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,13 @@
|
|||
<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>
|
||||
|
||||
<script>
|
||||
|
|
@ -9,9 +17,9 @@ import CurrentPageReportDoc from '@/doc/paginator/CurrentPageReportDoc.vue';
|
|||
import CustomContentDoc from '@/doc/paginator/CustomContentDoc.vue';
|
||||
import ImportDoc from '@/doc/paginator/ImportDoc.vue';
|
||||
import ResponsiveDoc from '@/doc/paginator/ResponsiveDoc.vue';
|
||||
import StyleDoc from '@/doc/paginator/StyleDoc.vue';
|
||||
import TemplateDoc from '@/doc/paginator/TemplateDoc.vue';
|
||||
import PTComponent from '@/doc/paginator/pt/index.vue';
|
||||
import ThemingDoc from '@/doc/paginator/theming/index.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -47,26 +55,15 @@ export default {
|
|||
label: 'Custom Content',
|
||||
component: CustomContentDoc
|
||||
},
|
||||
{
|
||||
id: 'style',
|
||||
label: 'Style',
|
||||
component: StyleDoc
|
||||
},
|
||||
{
|
||||
id: 'accessibility',
|
||||
label: 'Accessibility',
|
||||
component: AccessibilityDoc
|
||||
}
|
||||
],
|
||||
ptComponent: PTComponent
|
||||
ptComponent: PTComponent,
|
||||
themingDoc: ThemingDoc
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.image-gallery {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<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>
|
||||
<script>
|
||||
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 ImportDoc from '@/doc/tree/ImportDoc.vue';
|
||||
import LazyDoc from '@/doc/tree/LazyDoc.vue';
|
||||
import StyleDoc from '@/doc/tree/StyleDoc.vue';
|
||||
import TemplateDoc from '@/doc/tree/TemplateDoc.vue';
|
||||
import PTComponent from '@/doc/tree/pt/index.vue';
|
||||
import CheckboxDoc from '@/doc/tree/selection/CheckboxDoc.vue';
|
||||
import MultipleDoc from '@/doc/tree/selection/MultipleDoc.vue';
|
||||
import SingleDoc from '@/doc/tree/selection/SingleDoc.vue';
|
||||
import ThemingDoc from '@/doc/tree/theming/index.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -76,25 +76,15 @@ export default {
|
|||
label: 'Filter',
|
||||
component: FilterDoc
|
||||
},
|
||||
{
|
||||
id: 'style',
|
||||
label: 'Style',
|
||||
component: StyleDoc
|
||||
},
|
||||
{
|
||||
id: 'accessibility',
|
||||
label: 'Accessibility',
|
||||
component: AccessibilityDoc
|
||||
}
|
||||
],
|
||||
ptComponent: PTComponent
|
||||
ptComponent: PTComponent,
|
||||
themingDoc: ThemingDoc
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
button {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue