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">
<p>The <i>command</i> property defines the callback to run when an item is activated by click or a key event.</p>
</DocSectionText>
<div class="card flex md: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]">
<div class="card flex sm:justify-center">
<ul class="m-0 list-none border border-surface rounded p-4 flex flex-col gap-2 w-full sm:w-96">
<li
v-for="user in users"
: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)"
>
<div class="flex items-center gap-2">
<img :alt="user.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${user.image}`" style="width: 32px" />
<div class="flex flex-1 items-center gap-2">
<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>
</div>
<Tag :value="user.role" :severity="getBadge(user)" />
@ -69,15 +69,15 @@ export default {
],
code: {
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
v-for="user in users"
: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)"
>
<div class="flex items-center gap-2">
<img :alt="user.name" :src="\`/images/avatar/\${user.image}\`" style="width: 32px" />
<div class="flex flex-1 items-center gap-2">
<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>
</div>
<Tag :value="user.role" :severity="getBadge(user)" />
@ -88,16 +88,16 @@ export default {
`,
options: `
<template>
<div class="card flex md: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]">
<div class="card flex sm:justify-center">
<ul class="m-0 list-none border border-surface rounded p-4 flex flex-col gap-2 w-full sm:w-96">
<li
v-for="user in users"
: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)"
>
<div class="flex items-center gap-2">
<img :alt="user.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${user.image}\`" style="width: 32px" />
<div class="flex flex-1 items-center gap-2">
<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>
</div>
<Tag :value="user.role" :severity="getBadge(user)" />
@ -171,16 +171,16 @@ export default {
`,
composition: `
<template>
<div class="card flex md: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]">
<div class="card flex sm:justify-center">
<ul class="m-0 list-none border border-surface rounded p-4 flex flex-col gap-2 w-full sm:w-96">
<li
v-for="user in users"
: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)"
>
<div class="flex items-center gap-2">
<img :alt="user.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${user.image}\`" style="width: 32px" />
<div class="flex flex-1 items-center gap-2">
<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>
</div>
<Tag :value="user.role" :severity="getBadge(user)" />