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

Refactored IconField

pull/5677/head
Cagatay Civici 2024-04-07 12:53:01 +03:00
parent 6bb4d186e1
commit a57bd36f20
4 changed files with 15 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/lib/iconfield/style/IconFieldStyle.js
View File

@ -1,13 +1,7 @@
import BaseStyle from 'primevue/base/style'; import BaseStyle from 'primevue/base/style';
const classes = { const classes = {
root: ({ props }) => [ root: 'p-icon-field'
'p-icon-field',
{
'p-icon-field-right': props.iconPosition === 'right',
'p-icon-field-left': props.iconPosition === 'left'
}
]
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({

8
components/lib/themes/primeone/base/iconfield/index.js
View File

@ -11,19 +11,19 @@ export default {
color: ${dt('iconfield.color')}; color: ${dt('iconfield.color')};
} }
.p-icon-field-left .p-input-icon { .p-icon-field .p-input-icon:first-child {
left: 0.75rem; left: 0.75rem;
} }
.p-icon-field-right .p-input-icon { .p-icon-field .p-input-icon:last-child {
right: 0.75rem; right: 0.75rem;
} }
.p-icon-field-left .p-inputtext { .p-icon-field .p-inputtext:last-child {
padding-left: 2.5rem; padding-left: 2.5rem;
} }
.p-icon-field-right .p-inputtext { .p-icon-field .p-inputtext:first-child {
padding-right: 2.5rem; padding-right: 2.5rem;
} }
` `

12
doc/iconfield/BasicDoc.vue
View File

@ -6,14 +6,14 @@
</p> </p>
</DocSectionText> </DocSectionText>
<div class="card flex flex-wrap justify-content-center gap-3"> <div class="card flex flex-wrap justify-content-center gap-3">
<IconField iconPosition="left"> <IconField>
<InputIcon class="pi pi-search"> </InputIcon> <InputIcon class="pi pi-search"> </InputIcon>
<InputText v-model="value1" placeholder="Search" /> <InputText v-model="value1" placeholder="Search" />
</IconField> </IconField>
<IconField> <IconField>
<InputIcon class="pi pi-spin pi-spinner"> </InputIcon>
<InputText v-model="value2" /> <InputText v-model="value2" />
<InputIcon class="pi pi-spin pi-spinner"> </InputIcon>
</IconField> </IconField>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -27,7 +27,7 @@ export default {
value2: null, value2: null,
code: { code: {
basic: ` basic: `
<IconField iconPosition="left"> <IconField>
<InputIcon class="pi pi-search"> </InputIcon> <InputIcon class="pi pi-search"> </InputIcon>
<InputText v-model="value1" placeholder="Search" /> <InputText v-model="value1" placeholder="Search" />
</IconField> </IconField>
@ -40,8 +40,8 @@ export default {
options: ` options: `
<template> <template>
<div class="card flex flex-wrap justify-content-center gap-3"> <div class="card flex flex-wrap justify-content-center gap-3">
<IconField iconPosition="left"> <IconField>
<IconField iconPosition="left"> <IconField>
<InputIcon class="pi pi-search"> </InputIcon> <InputIcon class="pi pi-search"> </InputIcon>
<InputText v-model="value1" placeholder="Search" /> <InputText v-model="value1" placeholder="Search" />
</IconField> </IconField>
@ -67,7 +67,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex flex-wrap justify-content-center gap-3"> <div class="card flex flex-wrap justify-content-center gap-3">
<IconField iconPosition="left"> <IconField>
<InputIcon class="pi pi-search"> </InputIcon> <InputIcon class="pi pi-search"> </InputIcon>
<InputText v-model="value1" placeholder="Search" /> <InputText v-model="value1" placeholder="Search" />
</IconField> </IconField>

8
doc/iconfield/TemplateDoc.vue
View File

@ -3,7 +3,7 @@
<p>Custom content inside an InputIcon is defined as children.</p> <p>Custom content inside an InputIcon is defined as children.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<IconField iconPosition="left"> <IconField>
<InputIcon> <InputIcon>
<svg width="14" height="16" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="14" height="16" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path <path
@ -29,7 +29,7 @@ export default {
value: null, value: null,
code: { code: {
basic: ` basic: `
<IconField iconPosition="left"> <IconField>
<InputIcon> <InputIcon>
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="..." fill="var(--p-primary-color)" /> <path d="..." fill="var(--p-primary-color)" />
@ -42,7 +42,7 @@ export default {
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<IconField iconPosition="left"> <IconField>
<InputIcon> <InputIcon>
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="..." fill="var(--p-primary-color)" /> <path d="..." fill="var(--p-primary-color)" />
@ -67,7 +67,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<IconField iconPosition="left"> <IconField>
<InputIcon> <InputIcon>
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="..." fill="var(--p-primary-color)" /> <path d="..." fill="var(--p-primary-color)" />