browser source for tree
Tuğçe Küçükoğlu
parent
214c55fade
commit
351ea5a069
|
|
@ -824,7 +824,7 @@ export default {
|
|||
<\\/script>
|
||||
|
||||
<style scoped>
|
||||
button {
|
||||
.p-button {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
</style>`
|
||||
|
|
@ -885,10 +885,77 @@ export default {
|
|||
<\\/script>
|
||||
|
||||
<style scoped>
|
||||
button {
|
||||
.p-button {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
</style>`
|
||||
},
|
||||
'browser-source': {
|
||||
tabName: 'Browser Source',
|
||||
imports: `<script src="./NodeService.js"><\\/script>`,
|
||||
content: `
|
||||
<div id="app">
|
||||
<h5>Basic</h5>
|
||||
<p-tree :value="nodes"></p-tree>
|
||||
|
||||
<h5>Programmatic Control</h5>
|
||||
<div style="margin-bottom: 1em">
|
||||
<p-button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll"></p-button>
|
||||
<p-button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll"></p-button>
|
||||
</div>
|
||||
<p-tree :value="nodes" :expanded-keys="expandedKeys"></p-tree>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
const { createApp, ref, onMounted } = Vue;
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
onMounted(() => {
|
||||
nodeService.value.getTreeNodes().then(data => nodes.value = data);
|
||||
})
|
||||
|
||||
const nodes = ref();
|
||||
const expandedKeys = ref({});
|
||||
const nodeService = ref(new NodeService());
|
||||
const expandAll = () => {
|
||||
for (let node of nodes.value) {
|
||||
expandNode(node);
|
||||
}
|
||||
|
||||
expandedKeys.value = {...expandedKeys.value};
|
||||
};
|
||||
const collapseAll = () => {
|
||||
expandedKeys.value = {};
|
||||
};
|
||||
const expandNode = (node) => {
|
||||
if (node.children && node.children.length) {
|
||||
expandedKeys.value[node.key] = true;
|
||||
|
||||
for (let child of node.children) {
|
||||
expandNode(child);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return { nodes, expandedKeys, nodeService, expandAll, collapseAll, expandNode }
|
||||
},
|
||||
components: {
|
||||
"p-tree": primevue.tree,
|
||||
"p-button": primevue.button
|
||||
}
|
||||
};
|
||||
|
||||
createApp(App)
|
||||
.use(primevue.config.default)
|
||||
.mount("#app");
|
||||
<\\/script>
|
||||
|
||||
<style>
|
||||
.p-button {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
</style>`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -134,6 +134,62 @@ export default {
|
|||
}
|
||||
}
|
||||
<\\/script>
|
||||
`
|
||||
},
|
||||
'browser-source': {
|
||||
tabName: 'Browser Source',
|
||||
imports: `<script src="./NodeService.js"><\\/script>`,
|
||||
content: `
|
||||
<div id="app">
|
||||
<h5>Lenient Filter</h5>
|
||||
<p-tree :value="nodes" :filter="true" filter-mode="lenient"></p-tree>
|
||||
|
||||
<h5>Strict Filter</h5>
|
||||
<p-tree :value="nodes" :filter="true" filter-mode="strict"></p-tree>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
const { createApp, ref, onMounted } = Vue;
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
onMounted(() => {
|
||||
nodeService.value.getTreeNodes().then(data => nodes.value = data);
|
||||
})
|
||||
|
||||
const nodes = ref(null);
|
||||
const nodeService = ref(new NodeService());
|
||||
const expandedKeys = ref({});
|
||||
const expandAll = () => {
|
||||
for (let node of nodes.value) {
|
||||
expandNode(node);
|
||||
}
|
||||
|
||||
expandedKeys.value = {...expandedKeys.value};
|
||||
};
|
||||
const collapseAll = () => {
|
||||
expandedKeys.value = {};
|
||||
};
|
||||
const expandNode = (node) => {
|
||||
expandedKeys.value[node.key] = true;
|
||||
if (node.children && node.children.length) {
|
||||
for (let child of node.children) {
|
||||
expandNode(child);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return { nodes, nodeService, expandedKeys, expandAll, collapseAll, expandNode }
|
||||
},
|
||||
components: {
|
||||
"p-tree": primevue.tree
|
||||
}
|
||||
};
|
||||
|
||||
createApp(App)
|
||||
.use(primevue.config.default)
|
||||
.mount("#app");
|
||||
<\\/script>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -177,6 +177,86 @@ export default {
|
|||
}
|
||||
}
|
||||
<\\/script>
|
||||
`
|
||||
},
|
||||
'browser-source': {
|
||||
tabName: 'Browser Source',
|
||||
imports: `<script src="./NodeService.js"><\\/script>`,
|
||||
content: `
|
||||
<div id="app">
|
||||
<p-tree :value="nodes" @node-expand="onNodeExpand" :loading="loading"></p-tree>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
const { createApp, ref, onMounted } = Vue;
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
onMounted(() => {
|
||||
loading.value = true;
|
||||
|
||||
setTimeout(() => {
|
||||
nodes.value = initateNodes();
|
||||
loading.value = false;
|
||||
}, 2000);
|
||||
})
|
||||
|
||||
const loading = ref(false);
|
||||
const nodes = ref(null);
|
||||
const nodeService = ref(new NodeService());
|
||||
const onNodeExpand = (node) => {
|
||||
if (!node.children) {
|
||||
loading.value = true;
|
||||
|
||||
setTimeout(() => {
|
||||
let _node = {...node};
|
||||
_node.children = [];
|
||||
|
||||
for (let i = 0; i < 3; i++) {
|
||||
_node.children.push({
|
||||
key: node.key + '-' + i,
|
||||
label: 'Lazy ' + node.label + '-' + i
|
||||
});
|
||||
}
|
||||
|
||||
let _nodes = {...nodes.value}
|
||||
_nodes[parseInt(node.key, 10)] = _node;
|
||||
|
||||
nodes.value = _nodes;
|
||||
loading.value = false;
|
||||
}, 500);
|
||||
}
|
||||
};
|
||||
|
||||
const initateNodes = () => {
|
||||
return [{
|
||||
key: '0',
|
||||
label: 'Node 0',
|
||||
leaf: false
|
||||
},
|
||||
{
|
||||
key: '1',
|
||||
label: 'Node 1',
|
||||
leaf: false
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: 'Node 2',
|
||||
leaf: false
|
||||
}];
|
||||
}
|
||||
|
||||
return { loading, nodes, nodeService, onNodeExpand, initateNodes }
|
||||
},
|
||||
components: {
|
||||
"p-tree": primevue.tree
|
||||
}
|
||||
};
|
||||
|
||||
createApp(App)
|
||||
.use(primevue.config.default)
|
||||
.mount("#app");
|
||||
<\\/script>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -161,7 +161,7 @@ export default {
|
|||
}
|
||||
|
||||
onMounted(() => {
|
||||
nodeService.value.getTreeNodes().then(data => nodes.value = data);
|
||||
nodeService.value.getTreeNodes().then(data => nodes1.value = data);
|
||||
nodes2.value = Array.from({length: 100}).map((_,i) => createNode(i, 2));
|
||||
})
|
||||
|
||||
|
|
@ -174,7 +174,83 @@ export default {
|
|||
}
|
||||
}
|
||||
<\\/script>`
|
||||
},
|
||||
'browser-source': {
|
||||
tabName: 'Browser Source',
|
||||
imports: `<script src="https://unpkg.com/primevue@^3/dialog/dialog.min.js"><\\/script>
|
||||
<script src="https://unpkg.com/primevue@^3/toast/toast.min.js"><\\/script>
|
||||
<script src="https://unpkg.com/primevue@^3/toastservice/toastservice.min.js"><\\/script>
|
||||
<script src="./NodeService.js"><\\/script>`,
|
||||
content: `
|
||||
<div id="app">
|
||||
<h5>Regular Scroll</h5>
|
||||
<p>Scrollable viewport is fixed.</p>
|
||||
<p-tree :value="nodes1" scroll-height="200px"></p-tree>
|
||||
|
||||
<h5>Flex Scroll</h5>
|
||||
<p>Flex scroll feature makes the scrollable viewport section dynamic so that it can grow or shrink relative to the parent size of the tree. Click the button below
|
||||
to display maximizable Dialog where data viewport adjusts itself according to the size changes.</p>
|
||||
<p-button type="button" icon="pi pi-external-link" label="View" @click="dialogVisible = true"></p-button>
|
||||
|
||||
<p-dialog header="Flex Scroll" v-model:visible="dialogVisible" :style="{width: '50vw'}" :maximizable="true"
|
||||
:content-style="{height: '300px'}" class="p-fluid">
|
||||
<p-tree :value="nodes2" scrollHeight="flex"></p-tree>
|
||||
<template #footer>
|
||||
<p-button type="button" icon="pi pi-check" @click="dialogVisible = false" class="p-button-text"></p-button>
|
||||
</template>
|
||||
</p-dialog>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
const { createApp, ref, onMounted } = Vue;
|
||||
const { useToast } = primevue.usetoast;
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
const createNode = (i, children) => {
|
||||
let node = {
|
||||
key: 'node_' + i,
|
||||
label: 'Node ' + i,
|
||||
data: 'Node ' + i,
|
||||
expandedIcon: 'pi pi-folder-open',
|
||||
collapsedIcon: 'pi pi-folder',
|
||||
children: Array.from({length: children}).map((_,j) => {
|
||||
return {
|
||||
label: 'Node ' + i + '.' + j,
|
||||
data: 'Node ' + i + '.' + j,
|
||||
icon: 'pi pi-file-o'
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
nodeService.value.getTreeNodes().then(data => nodes1.value = data);
|
||||
nodes2.value = Array.from({length: 100}).map((_,i) => createNode(i, 2));
|
||||
})
|
||||
|
||||
const nodes1 = ref(null);
|
||||
const nodes2 = ref(null);
|
||||
const dialogVisible = ref(false);
|
||||
const nodeService = ref(new NodeService());
|
||||
|
||||
return { nodes1, nodes2, dialogVisible }
|
||||
},
|
||||
components: {
|
||||
"p-tree": primevue.tree,
|
||||
"p-toast": primevue.toast,
|
||||
"p-dialog": primevue.dialog,
|
||||
"p-button": primevue.button
|
||||
}
|
||||
};
|
||||
|
||||
createApp(App)
|
||||
.use(primevue.config.default)
|
||||
.use(primevue.toastservice)
|
||||
.mount("#app");
|
||||
<\\/script>`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -158,7 +158,71 @@ export default {
|
|||
}
|
||||
}
|
||||
<\\/script>`
|
||||
},
|
||||
'browser-source': {
|
||||
tabName: 'Browser Source',
|
||||
imports: `<script src="https://unpkg.com/primevue@^3/toast/toast.min.js"><\\/script>
|
||||
<script src="https://unpkg.com/primevue@^3/toastservice/toastservice.min.js"><\\/script>
|
||||
<script src="./NodeService.js"><\\/script>`,
|
||||
content: `
|
||||
<div id="app">
|
||||
<p-toast></p-toast>
|
||||
|
||||
<h5>Single Selection</h5>
|
||||
<p-tree :value="nodes" selection-mode="single" v-model:selection-keys="selectedKey1"></p-tree>
|
||||
|
||||
<h5>Multiple Selection with MetaKey</h5>
|
||||
<p-tree :value="nodes" selection-mode="multiple" v-model:selection-keys="selectedKeys1"></p-tree>
|
||||
|
||||
<h5>Multiple Selection without MetaKey</h5>
|
||||
<p-tree :value="nodes" selection-mode="multiple" v-model:selection-keys="selectedKeys2" :meta-key-selection="false"></p-tree>
|
||||
|
||||
<h5>Checkbox Selection</h5>
|
||||
<p-tree :value="nodes" selection-mode="checkbox" v-model:selection-keys="selectedKeys3"></p-tree>
|
||||
|
||||
<h5>Events</h5>
|
||||
<p-tree :value="nodes" selection-mode="single" v-model:selection-keys="selectedKey2" :meta-key-delection="false"
|
||||
@node-select="onNodeSelect" @node-unselect="onNodeUnselect"></p-tree>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
const { createApp, ref, onMounted } = Vue;
|
||||
const { useToast } = primevue.usetoast;
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
onMounted(() => {
|
||||
nodeService.value.getTreeNodes().then(data => nodes.value = data);
|
||||
})
|
||||
|
||||
const toast = useToast();
|
||||
const selectedKey1 = ref(null);
|
||||
const selectedKey2 = ref(null);
|
||||
const selectedKeys1 = ref(null);
|
||||
const selectedKeys2 = ref(null);
|
||||
const selectedKeys3 = ref(null);
|
||||
const nodes = ref(null);
|
||||
const nodeService = ref(new NodeService());
|
||||
const onNodeSelect = (node) => {
|
||||
toast.add({severity:'success', summary: 'Node Selected', detail: node.label, life: 3000});
|
||||
};
|
||||
const onNodeUnselect = (node) => {
|
||||
toast.add({severity:'success', summary: 'Node Unselected', detail: node.label, life: 3000});
|
||||
};
|
||||
|
||||
return { selectedKey1, selectedKey2, selectedKeys1, selectedKeys2, selectedKeys3, nodes, nodeService, onNodeSelect, onNodeUnselect }
|
||||
},
|
||||
components: {
|
||||
"p-tree": primevue.tree,
|
||||
"p-toast": primevue.toast
|
||||
}
|
||||
};
|
||||
|
||||
createApp(App)
|
||||
.use(primevue.config.default)
|
||||
.use(primevue.toastservice)
|
||||
.mount("#app");
|
||||
<\\/script>`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -173,6 +173,72 @@ button {
|
|||
}
|
||||
}
|
||||
</style>`
|
||||
},
|
||||
'browser-source': {
|
||||
tabName: 'Browser Source',
|
||||
imports: `<script src="./NodeService.js"><\\/script>`,
|
||||
content: `
|
||||
<div id="app">
|
||||
<p-tree :value="nodes">
|
||||
<template #default="slotProps">
|
||||
<b>{{slotProps.node.label}}</b>
|
||||
</template>
|
||||
<template #url="slotProps">
|
||||
<a :href="slotProps.node.data">{{slotProps.node.label}}</a>
|
||||
</template>
|
||||
</p-tree>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
const { createApp, ref } = Vue;
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
const nodes = ref([
|
||||
{
|
||||
key: '0',
|
||||
label: 'Introduction',
|
||||
children: [
|
||||
{key: '0-0', label: 'What is Vue.js?', data:'https://vuejs.org/v2/guide/#What-is-Vue-js', type: 'url'},
|
||||
{key: '0-1', label: 'Getting Started', data: 'https://vuejs.org/v2/guide/#Getting-Started', type: 'url'},
|
||||
{key: '0-2', label: 'Declarative Rendering', data:'https://vuejs.org/v2/guide/#Declarative-Rendering', type:'url'},
|
||||
{key: '0-3', label: 'Conditionals and Loops', data: 'https://vuejs.org/v2/guide/#Conditionals-and-Loops', type: 'url'}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: '1',
|
||||
label: 'Components In-Depth',
|
||||
children: [
|
||||
{key: '1-0', label: 'Component Registration', data: 'https://vuejs.org/v2/guide/components-registration.html', type: 'url'},
|
||||
{key: '1-1', label: 'Props', data: 'https://vuejs.org/v2/guide/components-props.html', type: 'url'},
|
||||
{key: '1-2', label: 'Custom Events', data: 'https://vuejs.org/v2/guide/components-custom-events.html', type: 'url'},
|
||||
{key: '1-3', label: 'Slots', data: 'https://vuejs.org/v2/guide/components-slots.html', type: 'url'}
|
||||
]
|
||||
}
|
||||
]);
|
||||
|
||||
return { nodes }
|
||||
},
|
||||
components: {
|
||||
"p-tree": primevue.tree
|
||||
}
|
||||
};
|
||||
|
||||
createApp(App)
|
||||
.use(primevue.config.default)
|
||||
.mount("#app");
|
||||
<\\/script>
|
||||
|
||||
<style>
|
||||
.p-button {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
.p-tree a {
|
||||
color: #2196f3;
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue