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

Visual improvements to contextmenu templating doc

pull/5806/head
Cagatay Civici 2024-05-30 10:35:24 +03:00
parent db722d8ba2
commit d868228ce2
1 changed files with 19 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
doc/contextmenu/CommandDoc.vue
View File

@ -2,16 +2,16 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>The <i>command</i> property defines the callback to run when an item is activated by click or a key event.</p> <p>The <i>command</i> property defines the callback to run when an item is activated by click or a key event.</p>
</DocSectionText> </DocSectionText>
<div class="card flex md:justify-center"> <div class="card flex sm:justify-center">
<ul class="m-0 p-0 list-none border border-surface-200 dark:border-surface-700 rounded p-4 flex flex-col gap-2 w-full md:w-[30rem]"> <ul class="m-0 list-none border border-surface rounded p-4 flex flex-col gap-2 w-full sm:w-96">
<li <li
v-for="user in users" v-for="user in users"
:key="user.id" :key="user.id"
:class="['p-2 hover:bg-surface-100 dark:hover:bg-surface-800 rounded border border-transparent transition-all duration-200 flex items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]" :class="['p-2 hover:bg-emphasis rounded border border-transparent transition-all duration-200 flex items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]"
@contextmenu="onRightClick($event, user)" @contextmenu="onRightClick($event, user)"
> >
<div class="flex items-center gap-2"> <div class="flex flex-1 items-center gap-2">
<img :alt="user.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${user.image}`" style="width: 32px" /> <img :alt="user.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${user.image}`" class="w-8 h-8" />
<span class="font-bold">{{ user.name }}</span> <span class="font-bold">{{ user.name }}</span>
</div> </div>
<Tag :value="user.role" :severity="getBadge(user)" /> <Tag :value="user.role" :severity="getBadge(user)" />
@ -69,15 +69,15 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<ul class="m-0 p-0 list-none border border-surface-200 dark:border-surface-700 rounded p-4 flex flex-col gap-2 w-full md:w-[30rem]"> <ul class="m-0 list-none border border-surface rounded p-4 flex flex-col gap-2 w-full sm:w-96">
<li <li
v-for="user in users" v-for="user in users"
:key="user.id" :key="user.id"
:class="['p-2 hover:bg-surface-100 dark:hover:bg-surface-800 rounded border border-transparent transition-all duration-200 flex items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]" :class="['p-2 hover:bg-emphasis rounded border border-transparent transition-all duration-200 flex items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]"
@contextmenu="onRightClick($event, user)" @contextmenu="onRightClick($event, user)"
> >
<div class="flex items-center gap-2"> <div class="flex flex-1 items-center gap-2">
<img :alt="user.name" :src="\`/images/avatar/\${user.image}\`" style="width: 32px" /> <img :alt="user.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${user.image}\`" class="w-8 h-8" />
<span class="font-bold">{{ user.name }}</span> <span class="font-bold">{{ user.name }}</span>
</div> </div>
<Tag :value="user.role" :severity="getBadge(user)" /> <Tag :value="user.role" :severity="getBadge(user)" />
@ -88,16 +88,16 @@ export default {
`, `,
options: ` options: `
<template> <template>
<div class="card flex md:justify-center"> <div class="card flex sm:justify-center">
<ul class="m-0 p-0 list-none border border-surface-200 dark:border-surface-700 rounded p-4 flex flex-col gap-2 w-full md:w-[30rem]"> <ul class="m-0 list-none border border-surface rounded p-4 flex flex-col gap-2 w-full sm:w-96">
<li <li
v-for="user in users" v-for="user in users"
:key="user.id" :key="user.id"
:class="['p-2 hover:bg-surface-100 dark:hover:bg-surface-800 rounded border border-transparent transition-all duration-200 flex items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]" :class="['p-2 hover:bg-emphasis rounded border border-transparent transition-all duration-200 flex items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]"
@contextmenu="onRightClick($event, user)" @contextmenu="onRightClick($event, user)"
> >
<div class="flex items-center gap-2"> <div class="flex flex-1 items-center gap-2">
<img :alt="user.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${user.image}\`" style="width: 32px" /> <img :alt="user.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${user.image}\`" class="w-8 h-8" />
<span class="font-bold">{{ user.name }}</span> <span class="font-bold">{{ user.name }}</span>
</div> </div>
<Tag :value="user.role" :severity="getBadge(user)" /> <Tag :value="user.role" :severity="getBadge(user)" />
@ -171,16 +171,16 @@ export default {
`, `,
composition: ` composition: `
<template> <template>
<div class="card flex md:justify-center"> <div class="card flex sm:justify-center">
<ul class="m-0 p-0 list-none border border-surface-200 dark:border-surface-700 rounded p-4 flex flex-col gap-2 w-full md:w-[30rem]"> <ul class="m-0 list-none border border-surface rounded p-4 flex flex-col gap-2 w-full sm:w-96">
<li <li
v-for="user in users" v-for="user in users"
:key="user.id" :key="user.id"
:class="['p-2 hover:bg-surface-100 dark:hover:bg-surface-800 rounded border border-transparent transition-all duration-200 flex items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]" :class="['p-2 hover:bg-emphasis rounded border border-transparent transition-all duration-200 flex items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]"
@contextmenu="onRightClick($event, user)" @contextmenu="onRightClick($event, user)"
> >
<div class="flex items-center gap-2"> <div class="flex flex-1 items-center gap-2">
<img :alt="user.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${user.image}\`" style="width: 32px" /> <img :alt="user.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${user.image}\`" class="w-8 h-8" />
<span class="font-bold">{{ user.name }}</span> <span class="font-bold">{{ user.name }}</span>
</div> </div>
<Tag :value="user.role" :severity="getBadge(user)" /> <Tag :value="user.role" :severity="getBadge(user)" />