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';
const classes = {
root: ({ props }) => [
'p-icon-field',
{
'p-icon-field-right': props.iconPosition === 'right',
'p-icon-field-left': props.iconPosition === 'left'
}
]
root: 'p-icon-field'
};
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')};
}
.p-icon-field-left .p-input-icon {
.p-icon-field .p-input-icon:first-child {
left: 0.75rem;
}
.p-icon-field-right .p-input-icon {
.p-icon-field .p-input-icon:last-child {
right: 0.75rem;
}
.p-icon-field-left .p-inputtext {
.p-icon-field .p-inputtext:last-child {
padding-left: 2.5rem;
}
.p-icon-field-right .p-inputtext {
.p-icon-field .p-inputtext:first-child {
padding-right: 2.5rem;
}
`

12
doc/iconfield/BasicDoc.vue
View File

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

8
doc/iconfield/TemplateDoc.vue
View File

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