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

Fixed #6695 - Improve support for Buttons in InputGroupAddon

pull/6697/head
Cagatay Civici 2024-10-31 19:43:17 +03:00
parent 784d6daeee
commit 7266b2f270
2 changed files with 81 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
apps/showcase/doc/inputgroup/ButtonDoc.vue
View File

@ -10,13 +10,20 @@
<InputGroup> <InputGroup>
<InputText placeholder="Keyword" /> <InputText placeholder="Keyword" />
<Button icon="pi pi-search" severity="warn" /> <InputGroupAddon>
<Button icon="pi pi-search" severity="secondary" variant="text" @click="toggle" />
</InputGroupAddon>
</InputGroup> </InputGroup>
<Menu ref="menu" :model="items" popup class="!min-w-fit" />
<InputGroup> <InputGroup>
<Button icon="pi pi-check" severity="success" /> <InputGroupAddon>
<Button icon="pi pi-check" severity="secondary" />
</InputGroupAddon>
<InputText placeholder="Vote" /> <InputText placeholder="Vote" />
<Button icon="pi pi-times" severity="danger" /> <InputGroupAddon>
<Button icon="pi pi-times" severity="secondary" />
</InputGroupAddon>
</InputGroup> </InputGroup>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -26,6 +33,7 @@
export default { export default {
data() { data() {
return { return {
items: [{ label: 'Web Search' }, { label: 'AI Assistant' }, { label: 'History' }],
code: { code: {
basic: ` basic: `
<InputGroup> <InputGroup>
@ -35,13 +43,20 @@ export default {
<InputGroup> <InputGroup>
<InputText placeholder="Keyword" /> <InputText placeholder="Keyword" />
<Button icon="pi pi-search" severity="warn" /> <InputGroupAddon>
<Button icon="pi pi-search" severity="secondary" variant="text" @click="toggle" />
</InputGroupAddon>
</InputGroup> </InputGroup>
<Menu ref="menu" :model="items" popup class="!min-w-fit" />
<InputGroup> <InputGroup>
<Button icon="pi pi-check" severity="success" /> <InputGroupAddon>
<Button icon="pi pi-check" severity="secondary" />
</InputGroupAddon>
<InputText placeholder="Vote" /> <InputText placeholder="Vote" />
<Button icon="pi pi-times" severity="danger" /> <InputGroupAddon>
<Button icon="pi pi-times" severity="secondary" />
</InputGroupAddon>
</InputGroup> </InputGroup>
`, `,
options: ` options: `
@ -54,16 +69,38 @@ export default {
<InputGroup> <InputGroup>
<InputText placeholder="Keyword" /> <InputText placeholder="Keyword" />
<Button icon="pi pi-search" severity="warn" /> <InputGroupAddon>
<Button icon="pi pi-search" severity="secondary" variant="text" @click="toggle" />
</InputGroupAddon>
</InputGroup> </InputGroup>
<Menu ref="menu" :model="items" popup class="!min-w-fit" />
<InputGroup> <InputGroup>
<Button icon="pi pi-check" severity="success" /> <InputGroupAddon>
<Button icon="pi pi-check" severity="secondary" />
</InputGroupAddon>
<InputText placeholder="Vote" /> <InputText placeholder="Vote" />
<Button icon="pi pi-times" severity="danger" /> <InputGroupAddon>
<Button icon="pi pi-times" severity="secondary" />
</InputGroupAddon>
</InputGroup> </InputGroup>
</div> </div>
</template> </template>
<script>
export default {
data() {
return {
items: [{ label: 'Web Search' }, { label: 'AI Assistant' }, { label: 'History' }],
};
},
methods: {
toggle(event) {
this.$refs.menu.toggle(event);
}
}
};
<\/script>
`, `,
composition: ` composition: `
<template> <template>
@ -75,19 +112,42 @@ export default {
<InputGroup> <InputGroup>
<InputText placeholder="Keyword" /> <InputText placeholder="Keyword" />
<Button icon="pi pi-search" severity="warn" /> <InputGroupAddon>
<Button icon="pi pi-search" severity="secondary" variant="text" @click="toggle" />
</InputGroupAddon>
</InputGroup> </InputGroup>
<Menu ref="menu" :model="items" popup class="!min-w-fit" />
<InputGroup> <InputGroup>
<Button icon="pi pi-check" severity="success" /> <InputGroupAddon>
<Button icon="pi pi-check" severity="secondary" />
</InputGroupAddon>
<InputText placeholder="Vote" /> <InputText placeholder="Vote" />
<Button icon="pi pi-times" severity="danger" /> <InputGroupAddon>
<Button icon="pi pi-times" severity="secondary" />
</InputGroupAddon>
</InputGroup> </InputGroup>
</div> </div>
</template> </template>
<script setup>
import { ref } from "vue";
const menu = ref();
const items = ref([{ label: 'Web Search' }, { label: 'AI Assistant' }, { label: 'History' }]);
const toggle = (event) => {
menu.value.toggle(event);
};
<\/script>
` `
} }
}; };
},
methods: {
toggle(event) {
this.$refs.menu.toggle(event);
}
} }
}; };
</script> </script>

9
packages/primevue/src/inputgroup/style/InputGroupStyle.js
View File

@ -36,6 +36,15 @@ const theme = ({ dt }) => `
border-inline-end: 1px solid ${dt('inputgroup.addon.border.color')}; border-inline-end: 1px solid ${dt('inputgroup.addon.border.color')};
} }
.p-inputgroupaddon:has(.p-button) {
padding: 0;
overflow: hidden;
}
.p-inputgroupaddon .p-button {
border-radius: 0;
}
.p-inputgroup > .p-component, .p-inputgroup > .p-component,
.p-inputgroup > .p-inputwrapper > .p-component, .p-inputgroup > .p-inputwrapper > .p-component,
.p-inputgroup > .p-floatlabel > .p-component, .p-inputgroup > .p-floatlabel > .p-component,