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

Tree demo cosmetics

pull/6483/head
Cagatay Civici 2024-09-26 11:34:07 +03:00
parent 2bba9499a2
commit abae780113
8 changed files with 38 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
apps/showcase/doc/tooltip/AutoHideDoc.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Tooltip gets hidden when mouse leaves the target element by default, set <i>autoHide</i> to false to change this behavior.</p> <p>Tooltip gets hidden when mouse leaves the target element by default, set <i>autoHide</i> to false to customize this behavior so that tooltip stays open when the cursor is on the tooltip.</p>
</DocSectionText> </DocSectionText>
<div class="card flex flex-wrap justify-center gap-2"> <div class="card flex flex-wrap justify-center gap-2">
<InputText v-tooltip="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" /> <InputText v-tooltip.bottom="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
<InputText v-tooltip="'Enter your username'" type="text" placeholder="autoHide: true" /> <InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="autoHide: true" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -15,22 +15,22 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
<InputText v-tooltip="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" /> <InputText v-tooltip.bottom="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
<InputText v-tooltip="'Enter your username'" type="text" placeholder="autoHide: true" /> <InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="autoHide: true" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex flex-wrap justify-center gap-2"> <div class="card flex flex-wrap justify-center gap-2">
<InputText v-tooltip="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" /> <InputText v-tooltip.bottom="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
<InputText v-tooltip="'Enter your username'" type="text" placeholder="autoHide: true" /> <InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="autoHide: true" />
</div> </div>
</template> </template>
`, `,
composition: ` composition: `
<template> <template>
<div class="card flex flex-wrap justify-center gap-2"> <div class="card flex flex-wrap justify-center gap-2">
<InputText v-tooltip="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" /> <InputText v-tooltip.bottom="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
<InputText v-tooltip="'Enter your username'" type="text" placeholder="autoHide: true" /> <InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="autoHide: true" />
</div> </div>
</template> </template>
` `

6
apps/showcase/doc/tree/BasicDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Tree component requires an array of TreeNode objects as its <i>value</i>.</p> <p>Tree component requires an array of TreeNode objects as its <i>value</i>.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card">
<Tree :value="nodes" class="w-full md:w-[30rem]"></Tree> <Tree :value="nodes" class="w-full md:w-[30rem]"></Tree>
</div> </div>
<DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" /> <DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" />
@ -20,7 +20,7 @@ export default {
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-center"> <div class="card">
<Tree :value="nodes" class="w-full md:w-[30rem]"></Tree> <Tree :value="nodes" class="w-full md:w-[30rem]"></Tree>
</div> </div>
</template> </template>
@ -42,7 +42,7 @@ export default {
`, `,
composition: ` composition: `
<template> <template>
<div class="card flex justify-center"> <div class="card">
<Tree :value="nodes" class="w-full md:w-[30rem]"></Tree> <Tree :value="nodes" class="w-full md:w-[30rem]"></Tree>
</div> </div>
</template> </template>

6
apps/showcase/doc/tree/ControlledDoc.vue
View File

@ -5,7 +5,7 @@
<i>expandedKeys</i> also supports two-way binding with the v-model directive. <i>expandedKeys</i> also supports two-way binding with the v-model directive.
</p> </p>
</DocSectionText> </DocSectionText>
<div class="card flex flex-col items-center"> <div class="card">
<div class="flex flex-wrap gap-2 mb-6"> <div class="flex flex-wrap gap-2 mb-6">
<Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" /> <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
<Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" /> <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
@ -33,7 +33,7 @@ export default {
`, `,
options: ` options: `
<template> <template>
<div class="card flex flex-col align-items-cente"> <div class="card">
<div class="flex flex-wrap gap-2 mb-6"> <div class="flex flex-wrap gap-2 mb-6">
<Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" /> <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
<Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" /> <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
@ -81,7 +81,7 @@ export default {
`, `,
composition: ` composition: `
<template> <template>
<div class="card flex flex-col align-items-cente"> <div class="card">
<div class="flex flex-wrap gap-2 mb-6"> <div class="flex flex-wrap gap-2 mb-6">
<Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" /> <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
<Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" /> <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />

14
apps/showcase/doc/tree/EventsDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>An event is provided for each type of user interaction such as expand, collapse and selection.</p> <p>An event is provided for each type of user interaction such as expand, collapse and selection.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card">
<Tree <Tree
v-model:selectionKeys="selectedKey" v-model:selectionKeys="selectedKey"
:value="nodes" :value="nodes"
@ -27,12 +27,12 @@ export default {
selectedKey: null, selectedKey: null,
code: { code: {
basic: ` basic: `
<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false" class="w-full md:w-[30rem]" <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false"
@nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeExpand="onNodeExpand" @nodeCollapse="onNodeCollapse" class="w-full md:w-[30rem]"></Tree> @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeExpand="onNodeExpand" @nodeCollapse="onNodeCollapse" class="w-full md:w-[30rem]"></Tree>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-center"> <div class="card">
<Toast /> <Toast />
<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false" <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false"
@nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeExpand="onNodeExpand" @nodeCollapse="onNodeCollapse" class="w-full md:w-[30rem]"></Tree> @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeExpand="onNodeExpand" @nodeCollapse="onNodeCollapse" class="w-full md:w-[30rem]"></Tree>
@ -62,7 +62,7 @@ export default {
this.$toast.add({ severity: 'info', summary: 'Node Expanded', detail: node.label, life: 3000 }); this.$toast.add({ severity: 'info', summary: 'Node Expanded', detail: node.label, life: 3000 });
}, },
onNodeCollapse(node) { onNodeCollapse(node) {
this.$toast.add({ severity: 'error', summary: 'Node Collapsed', detail: node.label, life: 3000 }); this.$toast.add({ severity: 'info', summary: 'Node Collapsed', detail: node.label, life: 3000 });
} }
} }
} }
@ -70,7 +70,7 @@ export default {
`, `,
composition: ` composition: `
<template> <template>
<div class="card flex justify-center"> <div class="card">
<Toast /> <Toast />
<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false" <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false"
@nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeExpand="onNodeExpand" @nodeCollapse="onNodeCollapse" class="w-full md:w-[30rem]"></Tree> @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeExpand="onNodeExpand" @nodeCollapse="onNodeCollapse" class="w-full md:w-[30rem]"></Tree>
@ -103,7 +103,7 @@ const onNodeExpand = (node) => {
}; };
const onNodeCollapse (node) => { const onNodeCollapse (node) => {
toast.add({ severity: 'error', summary: 'Node Collapsed', detail: node.label, life: 3000 }); toast.add({ severity: 'info', summary: 'Node Collapsed', detail: node.label, life: 3000 });
}; };
<\/script> <\/script>
`, `,
@ -151,7 +151,7 @@ const onNodeCollapse (node) => {
this.$toast.add({ severity: 'info', summary: 'Node Expanded', detail: node.label, life: 3000 }); this.$toast.add({ severity: 'info', summary: 'Node Expanded', detail: node.label, life: 3000 });
}, },
onNodeCollapse(node) { onNodeCollapse(node) {
this.$toast.add({ severity: 'error', summary: 'Node Collapsed', detail: node.label, life: 3000 }); this.$toast.add({ severity: 'info', summary: 'Node Collapsed', detail: node.label, life: 3000 });
} }
} }
}; };

6
apps/showcase/doc/tree/TemplateDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Each node can have a distinct template by matching the <i>type</i> property to the slot name.</p> <p>Each node can have a distinct template by matching the <i>type</i> property to the slot name.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card">
<Tree :value="nodes" class="w-full md:w-[30rem]"> <Tree :value="nodes" class="w-full md:w-[30rem]">
<template #default="slotProps"> <template #default="slotProps">
<b>{{ slotProps.node.label }}</b> <b>{{ slotProps.node.label }}</b>
@ -54,7 +54,7 @@ export default {
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-center"> <div class="card">
<Tree :value="nodes" class="w-full md:w-[30rem]"> <Tree :value="nodes" class="w-full md:w-[30rem]">
<template #default="slotProps"> <template #default="slotProps">
<b>{{ slotProps.node.label }}</b> <b>{{ slotProps.node.label }}</b>
@ -99,7 +99,7 @@ export default {
`, `,
composition: ` composition: `
<template> <template>
<div class="card flex justify-center"> <div class="card">
<Tree :value="nodes" class="w-full md:w-[30rem]"> <Tree :value="nodes" class="w-full md:w-[30rem]">
<template #default="slotProps"> <template #default="slotProps">
<b>{{ slotProps.node.label }}</b> <b>{{ slotProps.node.label }}</b>

6
apps/showcase/doc/tree/selection/CheckboxDoc.vue
View File

@ -6,7 +6,7 @@
selection. selection.
</p> </p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card">
<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-[30rem]"></Tree> <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-[30rem]"></Tree>
</div> </div>
<DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" /> <DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" />
@ -26,7 +26,7 @@ export default {
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-center"> <div class="card">
<Toast /> <Toast />
<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-[30rem]"></Tree> <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-[30rem]"></Tree>
</div> </div>
@ -57,7 +57,7 @@ export default {
`, `,
composition: ` composition: `
<template> <template>
<div class="card flex justify-center"> <div class="card">
<Toast /> <Toast />
<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-[30rem]"></Tree> <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-[30rem]"></Tree>
</div> </div>

14
apps/showcase/doc/tree/selection/MultipleDoc.vue
View File

@ -6,12 +6,12 @@
</p> </p>
<p>In multiple selection mode, value binding should be a key-value pair where key is the node key and value is a boolean to indicate selection.</p> <p>In multiple selection mode, value binding should be a key-value pair where key is the node key and value is a boolean to indicate selection.</p>
</DocSectionText> </DocSectionText>
<div class="card flex flex-col items-center justify-center"> <div class="card">
<div class="flex items-center mb-6 gap-2"> <div class="flex items-center mb-6 gap-2">
<ToggleSwitch v-model="checked" inputId="input-metakey" /> <ToggleSwitch v-model="checked" inputId="input-metakey" />
<label for="input-metakey">MetaKey</label> <label for="input-metakey">MetaKey</label>
</div> </div>
<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" class="w-full md:w-[30rem]" :metaKeySelection="checked"></Tree> <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="checked" class="w-full md:w-[30rem]"></Tree>
</div> </div>
<DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" /> <DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" />
</template> </template>
@ -27,17 +27,17 @@ export default {
selectedKey: null, selectedKey: null,
code: { code: {
basic: ` basic: `
<Tree v-model:selectionKeys="selectedKey" :value="nodes" class="w-full md:w-[30rem]" <Tree v-model:selectionKeys="selectedKey" :value="nodes"
selectionMode="multiple" :metaKeySelection="checked"></Tree> selectionMode="multiple" :metaKeySelection="checked"></Tree>
`, `,
options: ` options: `
<template> <template>
<div class="card flex flex-col items-center justify-center"> <div class="card">
<div class="flex items-center mb-6 gap-2"> <div class="flex items-center mb-6 gap-2">
<ToggleSwitch v-model="checked" inputId="input-metakey" /> <ToggleSwitch v-model="checked" inputId="input-metakey" />
<label for="input-metakey">MetaKey</label> <label for="input-metakey">MetaKey</label>
</div> </div>
<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" class="w-full md:w-[30rem]" :metaKeySelection="checked"></Tree> <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="checked" class="w-full md:w-[30rem]"></Tree>
</div> </div>
</template> </template>
@ -60,12 +60,12 @@ export default {
`, `,
composition: ` composition: `
<template> <template>
<div class="card flex flex-col items-center justify-center"> <div class="card">
<div class="flex items-center mb-6 gap-2"> <div class="flex items-center mb-6 gap-2">
<ToggleSwitch v-model="checked" inputId="input-metakey" /> <ToggleSwitch v-model="checked" inputId="input-metakey" />
<label for="input-metakey">MetaKey</label> <label for="input-metakey">MetaKey</label>
</div> </div>
<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" class="w-full md:w-[30rem]" :metaKeySelection="checked"></Tree> <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="checked" class="w-full md:w-[30rem]"></Tree>
</div> </div>
</template> </template>

6
apps/showcase/doc/tree/selection/SingleDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Single node selection is configured by setting <i>selectionMode</i> as <i>single</i> along with <i>selectionKeys</i> property to manage the selection value binding.</p> <p>Single node selection is configured by setting <i>selectionMode</i> as <i>single</i> along with <i>selectionKeys</i> property to manage the selection value binding.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card">
<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-[30rem]"></Tree> <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-[30rem]"></Tree>
</div> </div>
<DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" /> <DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" />
@ -21,7 +21,7 @@ export default {
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-center"> <div class="card">
<Toast /> <Toast />
<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-[30rem]"></Tree> <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-[30rem]"></Tree>
</div> </div>
@ -52,7 +52,7 @@ export default {
`, `,
composition: ` composition: `
<template> <template>
<div class="card flex justify-center"> <div class="card">
<Toast /> <Toast />
<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-[30rem]"></Tree> <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-[30rem]"></Tree>
</div> </div>