Merge branch 'master' of https://github.com/primefaces/primevue
mertsincan
commit
02ecd32420
|
|
@ -23743,6 +23743,30 @@
|
|||
"default": "",
|
||||
"description": "Used to pass attributes to the item's DOM element."
|
||||
},
|
||||
{
|
||||
"name": "itemLabel",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "DropdownPassThroughOptionType<T>",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to the item label's DOM element."
|
||||
},
|
||||
{
|
||||
"name": "tickIcon",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "DropdownPassThroughOptionType<T>",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to the tick icon's DOM element."
|
||||
},
|
||||
{
|
||||
"name": "blankIcon",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "DropdownPassThroughOptionType<T>",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to the bank icon's DOM element."
|
||||
},
|
||||
{
|
||||
"name": "emptyMessage",
|
||||
"optional": true,
|
||||
|
|
@ -24230,6 +24254,22 @@
|
|||
"default": "true",
|
||||
"description": "When enabled, the focus is placed on the hovered option."
|
||||
},
|
||||
{
|
||||
"name": "highlightOnSelect",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "boolean",
|
||||
"default": "false",
|
||||
"description": "Highlights automatically the first item."
|
||||
},
|
||||
{
|
||||
"name": "showTick",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "boolean",
|
||||
"default": "true",
|
||||
"description": "Whether the selected option will be shown with a tick."
|
||||
},
|
||||
{
|
||||
"name": "filterMessage",
|
||||
"optional": true,
|
||||
|
|
|
|||
|
|
@ -26,36 +26,14 @@
|
|||
<div>
|
||||
<span class="font-medium text-900 block mb-2">Team Members</span>
|
||||
<ul class="list-none p-0 m-0 flex flex-column gap-3">
|
||||
<li class="flex align-items-center gap-2">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" style="width: 32px" />
|
||||
<li v-for="member in members" :key="member.name" class="flex align-items-center gap-2">
|
||||
<img :src="`https://primefaces.org/cdn/primevue/images/avatar/${member.image}`" style="width: 32px" />
|
||||
<div>
|
||||
<span class="font-medium">Amy Elsner</span>
|
||||
<div class="text-sm text-color-secondary">amy@email.com</div>
|
||||
<span class="font-medium">{{ member.name }}</span>
|
||||
<div class="text-sm text-color-secondary">{{ member.email }}</div>
|
||||
</div>
|
||||
<div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
|
||||
<span>Owner</span>
|
||||
<i class="pi pi-angle-down"></i>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex align-items-center gap-2">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/avatar/bernardodominic.png" style="width: 32px" />
|
||||
<div>
|
||||
<span class="font-medium">Bernardo Dominic</span>
|
||||
<div class="text-sm text-color-secondary">bernardo@email.com</div>
|
||||
</div>
|
||||
<div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
|
||||
<span>Editor</span>
|
||||
<i class="pi pi-angle-down"></i>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex align-items-center gap-2">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" style="width: 32px" />
|
||||
<div>
|
||||
<span class="font-medium">Ioni Bowcher Elsner</span>
|
||||
<div class="text-sm text-color-secondary">ioni@email.com</div>
|
||||
</div>
|
||||
<div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
|
||||
<span>Viewer</span>
|
||||
<span>{{ member.role }}</span>
|
||||
<i class="pi pi-angle-down"></i>
|
||||
</div>
|
||||
</li>
|
||||
|
|
@ -71,6 +49,11 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
members: [
|
||||
{ name: 'Amy Elsner', image: 'amyelsner.png', email: 'amy@email.com', role: 'Owner' },
|
||||
{ name: 'Bernardo Dominic', image: 'bernardodominic.png', email: 'bernardo@email.com', role: 'Editor' },
|
||||
{ name: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' }
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
|
||||
|
|
@ -96,36 +79,14 @@ export default {
|
|||
<div>
|
||||
<span class="font-medium text-900 block mb-2">Team Members</span>
|
||||
<ul class="list-none p-0 m-0 flex flex-column gap-3">
|
||||
<li class="flex align-items-center gap-2">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" style="width: 32px" />
|
||||
<li v-for="member in members" :key="member.name" class="flex align-items-center gap-2">
|
||||
<img :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${member.image}\`" style="width: 32px" />
|
||||
<div>
|
||||
<span class="font-medium">Amy Elsner</span>
|
||||
<div class="text-sm text-color-secondary">amy@email.com</div>
|
||||
<span class="font-medium">{{ member.name }}</span>
|
||||
<div class="text-sm text-color-secondary">{{ member.email }}</div>
|
||||
</div>
|
||||
<div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
|
||||
<span>Owner</span>
|
||||
<i class="pi pi-angle-down"></i>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex align-items-center gap-2">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/avatar/bernardodominic.png" style="width: 32px" />
|
||||
<div>
|
||||
<span class="font-medium">Bernardo Dominic</span>
|
||||
<div class="text-sm text-color-secondary">bernardo@email.com</div>
|
||||
</div>
|
||||
<div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
|
||||
<span>Editor</span>
|
||||
<i class="pi pi-angle-down"></i>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex align-items-center gap-2">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" style="width: 32px" />
|
||||
<div>
|
||||
<span class="font-medium">Ioni Bowcher Elsner</span>
|
||||
<div class="text-sm text-color-secondary">ioni@email.com</div>
|
||||
</div>
|
||||
<div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
|
||||
<span>Viewer</span>
|
||||
<span>{{ member.role }}</span>
|
||||
<i class="pi pi-angle-down"></i>
|
||||
</div>
|
||||
</li>
|
||||
|
|
@ -160,36 +121,14 @@ export default {
|
|||
<div>
|
||||
<span class="font-medium text-900 block mb-2">Team Members</span>
|
||||
<ul class="list-none p-0 m-0 flex flex-column gap-3">
|
||||
<li class="flex align-items-center gap-2">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" style="width: 32px" />
|
||||
<li v-for="member in members" :key="member.name" class="flex align-items-center gap-2">
|
||||
<img :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${member.image}\`" style="width: 32px" />
|
||||
<div>
|
||||
<span class="font-medium">Amy Elsner</span>
|
||||
<div class="text-sm text-color-secondary">amy@email.com</div>
|
||||
<span class="font-medium">{{ member.name }}</span>
|
||||
<div class="text-sm text-color-secondary">{{ member.email }}</div>
|
||||
</div>
|
||||
<div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
|
||||
<span>Owner</span>
|
||||
<i class="pi pi-angle-down"></i>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex align-items-center gap-2">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/avatar/bernardodominic.png" style="width: 32px" />
|
||||
<div>
|
||||
<span class="font-medium">Bernardo Dominic</span>
|
||||
<div class="text-sm text-color-secondary">bernardo@email.com</div>
|
||||
</div>
|
||||
<div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
|
||||
<span>Editor</span>
|
||||
<i class="pi pi-angle-down"></i>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex align-items-center gap-2">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" style="width: 32px" />
|
||||
<div>
|
||||
<span class="font-medium">Ioni Bowcher Elsner</span>
|
||||
<div class="text-sm text-color-secondary">ioni@email.com</div>
|
||||
</div>
|
||||
<div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
|
||||
<span>Viewer</span>
|
||||
<span>{{ member.role }}</span>
|
||||
<i class="pi pi-angle-down"></i>
|
||||
</div>
|
||||
</li>
|
||||
|
|
@ -202,6 +141,15 @@ export default {
|
|||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
members: [
|
||||
{ name: 'Amy Elsner', image: 'amyelsner.png', email: 'amy@email.com', role: 'Owner' },
|
||||
{ name: 'Bernardo Dominic', image: 'bernardodominic.png', email: 'bernardo@email.com', role: 'Editor' },
|
||||
{ name: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggle(event) {
|
||||
this.$refs.op.toggle(event);
|
||||
|
|
@ -236,36 +184,14 @@ export default {
|
|||
<div>
|
||||
<span class="font-medium text-900 block mb-2">Team Members</span>
|
||||
<ul class="list-none p-0 m-0 flex flex-column gap-3">
|
||||
<li class="flex align-items-center gap-2">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" style="width: 32px" />
|
||||
<li v-for="member in members" :key="member.name" class="flex align-items-center gap-2">
|
||||
<img :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${member.image}\`" style="width: 32px" />
|
||||
<div>
|
||||
<span class="font-medium">Amy Elsner</span>
|
||||
<div class="text-sm text-color-secondary">amy@email.com</div>
|
||||
<span class="font-medium">{{ member.name }}</span>
|
||||
<div class="text-sm text-color-secondary">{{ member.email }}</div>
|
||||
</div>
|
||||
<div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
|
||||
<span>Owner</span>
|
||||
<i class="pi pi-angle-down"></i>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex align-items-center gap-2">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/avatar/bernardodominic.png" style="width: 32px" />
|
||||
<div>
|
||||
<span class="font-medium">Bernardo Dominic</span>
|
||||
<div class="text-sm text-color-secondary">bernardo@email.com</div>
|
||||
</div>
|
||||
<div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
|
||||
<span>Editor</span>
|
||||
<i class="pi pi-angle-down"></i>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex align-items-center gap-2">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" style="width: 32px" />
|
||||
<div>
|
||||
<span class="font-medium">Ioni Bowcher Elsner</span>
|
||||
<div class="text-sm text-color-secondary">ioni@email.com</div>
|
||||
</div>
|
||||
<div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
|
||||
<span>Viewer</span>
|
||||
<span>{{ member.role }}</span>
|
||||
<i class="pi pi-angle-down"></i>
|
||||
</div>
|
||||
</li>
|
||||
|
|
@ -280,6 +206,11 @@ export default {
|
|||
import { ref } from "vue";
|
||||
|
||||
const op = ref();
|
||||
const members = ref([
|
||||
{ name: 'Amy Elsner', image: 'amyelsner.png', email: 'amy@email.com', role: 'Owner' },
|
||||
{ name: 'Bernardo Dominic', image: 'bernardodominic.png', email: 'bernardo@email.com', role: 'Editor' },
|
||||
{ name: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' }
|
||||
]);
|
||||
|
||||
const toggle = (event) => {
|
||||
op.value.toggle(event);
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@
|
|||
<label class="text-right text-xs text-white">{{ progress }}% uploaded...</label>
|
||||
</div>
|
||||
<div class="flex gap-3 mb-3">
|
||||
<Button label="Another Upload?" text class="p-0" @click="closeCallback"></Button>
|
||||
<Button label="Cancel" text class="text-white p-0" @click="closeCallback"></Button>
|
||||
<Button label="Another Upload?" text class="py-1 px-2" @click="closeCallback"></Button>
|
||||
<Button label="Cancel" text class="text-white py-1 px-2" @click="closeCallback"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -48,8 +48,8 @@ export default {
|
|||
<label class="text-right text-xs text-white">{{ progress }}% uploaded...</label>
|
||||
</div>
|
||||
<div class="flex gap-3 mb-3">
|
||||
<Button label="Another Upload?" text class="p-0" @click="closeCallback"></Button>
|
||||
<Button label="Cancel" text class="text-white p-0" @click="closeCallback"></Button>
|
||||
<Button label="Another Upload?" text class="py-1 px-2" @click="closeCallback"></Button>
|
||||
<Button label="Cancel" text class="text-white py-1 px-2" @click="closeCallback"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -72,8 +72,8 @@ export default {
|
|||
<label class="text-right text-xs text-white">{{ progress }}% uploaded...</label>
|
||||
</div>
|
||||
<div class="flex gap-3 mb-3">
|
||||
<Button label="Another Upload?" text class="p-0" @click="closeCallback"></Button>
|
||||
<Button label="Cancel" text class="text-white p-0" @click="closeCallback"></Button>
|
||||
<Button label="Another Upload?" text class="py-1 px-2" @click="closeCallback"></Button>
|
||||
<Button label="Cancel" text class="text-white py-1 px-2" @click="closeCallback"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -139,8 +139,8 @@ export default {
|
|||
<label class="text-right text-xs text-white">{{ progress }}% uploaded...</label>
|
||||
</div>
|
||||
<div class="flex gap-3 mb-3">
|
||||
<Button label="Another Upload?" text class="p-0" @click="closeCallback"></Button>
|
||||
<Button label="Cancel" text class="text-white p-0" @click="closeCallback"></Button>
|
||||
<Button label="Another Upload?" text class="py-1 px-2" @click="closeCallback"></Button>
|
||||
<Button label="Cancel" text class="text-white py-1 px-2" @click="closeCallback"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Reference in New Issue