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

Fixed #5547 - Remove styled from speed

pull/5677/head
Cagatay Civici 2024-04-08 13:43:16 +03:00
parent 704f6dedf2
commit af56b7c054
16 changed files with 47 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/landing/ThemeSection.vue
View File

@ -21,7 +21,7 @@
<template #header> <template #header>
<div class="flex flex-column sm:flex-row sm:justify-content-between sm:align-items-center"> <div class="flex flex-column sm:flex-row sm:justify-content-between sm:align-items-center">
<h5 class="m-0">Customers</h5> <h5 class="m-0">Customers</h5>
<IconField iconPosition="left" class="mt-3 sm:mt-0 w-full sm:w-auto"> <IconField class="mt-3 sm:mt-0 w-full sm:w-auto">
<InputIcon> <InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon> </InputIcon>

6
components/lib/iconfield/BaseIconField.vue
View File

@ -5,12 +5,6 @@ import IconFieldStyle from 'primevue/iconfield/style';
export default { export default {
name: 'BaseIconField', name: 'BaseIconField',
extends: BaseComponent, extends: BaseComponent,
props: {
iconPosition: {
type: String,
default: 'right'
}
},
style: IconFieldStyle, style: IconFieldStyle,
provide() { provide() {
return { return {

5
components/lib/iconfield/IconField.d.ts vendored
View File

@ -67,11 +67,6 @@ export interface IconFieldPassThroughAttributes {
* Defines valid properties in IconField component. * Defines valid properties in IconField component.
*/ */
export interface IconFieldProps { export interface IconFieldProps {
/**
* Position of the icon
* @defaultValue right
*/
iconPosition?: 'left' | 'right' | undefined;
/** /**
* It generates scoped CSS variables using design tokens for the component. * It generates scoped CSS variables using design tokens for the component.
*/ */

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

@ -1,7 +1,7 @@
import BaseStyle from 'primevue/base/style'; import BaseStyle from 'primevue/base/style';
const classes = { const classes = {
root: 'p-icon-field' root: 'p-iconfield'
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({

2
components/lib/inputicon/style/InputIconStyle.js
View File

@ -1,7 +1,7 @@
import BaseStyle from 'primevue/base/style'; import BaseStyle from 'primevue/base/style';
const classes = { const classes = {
root: 'p-input-icon' root: 'p-inputicon'
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({

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

@ -1,29 +1,29 @@
export default { export default {
css: ({ dt }) => ` css: ({ dt }) => `
.p-icon-field { .p-iconfield {
position: relative; position: relative;
} }
.p-input-icon { .p-inputicon {
position: absolute; position: absolute;
top: 50%; top: 50%;
margin-top: -.5rem; margin-top: -.5rem;
color: ${dt('iconfield.color')}; color: ${dt('iconfield.color')};
} }
.p-icon-field .p-input-icon:first-child { .p-iconfield .p-inputicon:first-child {
left: 0.75rem; left: 0.75rem;
} }
.p-icon-field .p-input-icon:last-child { .p-iconfield .p-inputicon:last-child {
right: 0.75rem; right: 0.75rem;
} }
.p-icon-field .p-inputtext:last-child { .p-iconfield .p-inputtext:last-child {
padding-left: 2.5rem; padding-left: 2.5rem;
} }
.p-icon-field .p-inputtext:first-child { .p-iconfield .p-inputtext:first-child {
padding-right: 2.5rem; padding-right: 2.5rem;
} }
` `

10
components/lib/themes/primeone/base/inputtext/index.js
View File

@ -42,16 +42,6 @@ export default {
color: ${dt('inputtext.disabled.color')}; color: ${dt('inputtext.disabled.color')};
} }
.p-input-icon-right > svg:last-of-type,
.p-input-icon-right > i:last-of-type {
right: 0.75rem;
color: #94a3b8;
}
.p-input-icon-right > .p-inputtext {
padding-right: 2.5rem;
}
.p-inputtext::placeholder { .p-inputtext::placeholder {
color: ${dt('inputtext.placeholder.color')}; color: ${dt('inputtext.placeholder.color')};
} }

8
doc/common/apidoc/index.json
View File

@ -28874,14 +28874,6 @@
"description": "Defines valid properties in IconField component.", "description": "Defines valid properties in IconField component.",
"relatedProp": "", "relatedProp": "",
"props": [ "props": [
{
"name": "iconPosition",
"optional": true,
"readonly": false,
"type": "\"left\" | \"right\"",
"default": "right",
"description": "Position of the icon"
},
{ {
"name": "dt", "name": "dt",
"optional": true, "optional": true,

8
doc/datatable/StatefulDoc.vue
View File

@ -23,7 +23,7 @@
tableStyle="min-width: 50rem" tableStyle="min-width: 50rem"
> >
<template #header> <template #header>
<IconField iconPosition="left"> <IconField>
<InputIcon> <InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon> </InputIcon>
@ -112,7 +112,7 @@ export default {
stateStorage="session" stateKey="dt-state-demo-session" paginator :rows="5" filterDisplay="menu" stateStorage="session" stateKey="dt-state-demo-session" paginator :rows="5" filterDisplay="menu"
selectionMode="single" dataKey="id" :globalFilterFields="['name', 'country.name', 'representative.name', 'status']" tableStyle="min-width: 50rem"> selectionMode="single" dataKey="id" :globalFilterFields="['name', 'country.name', 'representative.name', 'status']" tableStyle="min-width: 50rem">
<template #header> <template #header>
<IconField iconPosition="left"> <IconField>
<InputIcon> <InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon> </InputIcon>
@ -175,7 +175,7 @@ export default {
stateStorage="session" stateKey="dt-state-demo-session" paginator :rows="5" filterDisplay="menu" stateStorage="session" stateKey="dt-state-demo-session" paginator :rows="5" filterDisplay="menu"
selectionMode="single" dataKey="id" :globalFilterFields="['name', 'country.name', 'representative.name', 'status']" tableStyle="min-width: 50rem"> selectionMode="single" dataKey="id" :globalFilterFields="['name', 'country.name', 'representative.name', 'status']" tableStyle="min-width: 50rem">
<template #header> <template #header>
<IconField iconPosition="left"> <IconField>
<InputIcon> <InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon> </InputIcon>
@ -303,7 +303,7 @@ export default {
stateStorage="session" stateKey="dt-state-demo-session" paginator :rows="5" filterDisplay="menu" stateStorage="session" stateKey="dt-state-demo-session" paginator :rows="5" filterDisplay="menu"
selectionMode="single" dataKey="id" :globalFilterFields="['name', 'country.name', 'representative.name', 'status']" tableStyle="min-width: 50rem"> selectionMode="single" dataKey="id" :globalFilterFields="['name', 'country.name', 'representative.name', 'status']" tableStyle="min-width: 50rem">
<template #header> <template #header>
<IconField iconPosition="left"> <IconField>
<InputIcon> <InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon> </InputIcon>

8
doc/datatable/filter/AdvancedFilterDoc.vue
View File

@ -8,7 +8,7 @@
<template #header> <template #header>
<div class="flex justify-content-between"> <div class="flex justify-content-between">
<Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" /> <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
<IconField iconPosition="left"> <IconField>
<InputIcon> <InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon> </InputIcon>
@ -149,7 +149,7 @@ export default {
<template #header> <template #header>
<div class="flex justify-content-between"> <div class="flex justify-content-between">
<Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" /> <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
<IconField iconPosition="left"> <IconField>
<InputIcon> <InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon> </InputIcon>
@ -264,7 +264,7 @@ export default {
<template #header> <template #header>
<div class="flex justify-content-between"> <div class="flex justify-content-between">
<Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" /> <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
<IconField iconPosition="left"> <IconField>
<InputIcon> <InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon> </InputIcon>
@ -471,7 +471,7 @@ export default {
<template #header> <template #header>
<div class="flex justify-content-between"> <div class="flex justify-content-between">
<Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" /> <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
<IconField iconPosition="left"> <IconField>
<InputIcon> <InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon> </InputIcon>

8
doc/datatable/filter/BasicFilterDoc.vue
View File

@ -11,7 +11,7 @@
<DataTable v-model:filters="filters" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="row" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'status']"> <DataTable v-model:filters="filters" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="row" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'status']">
<template #header> <template #header>
<div class="flex justify-content-end"> <div class="flex justify-content-end">
<IconField iconPosition="left"> <IconField>
<InputIcon> <InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon> </InputIcon>
@ -120,7 +120,7 @@ export default {
:globalFilterFields="['name', 'country.name', 'representative.name', 'status']"> :globalFilterFields="['name', 'country.name', 'representative.name', 'status']">
<template #header> <template #header>
<div class="flex justify-content-end"> <div class="flex justify-content-end">
<IconField iconPosition="left"> <IconField>
<InputIcon> <InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon> </InputIcon>
@ -196,7 +196,7 @@ export default {
:globalFilterFields="['name', 'country.name', 'representative.name', 'status']"> :globalFilterFields="['name', 'country.name', 'representative.name', 'status']">
<template #header> <template #header>
<div class="flex justify-content-end"> <div class="flex justify-content-end">
<IconField iconPosition="left"> <IconField>
<InputIcon> <InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon> </InputIcon>
@ -352,7 +352,7 @@ export default {
:globalFilterFields="['name', 'country.name', 'representative.name', 'status']"> :globalFilterFields="['name', 'country.name', 'representative.name', 'status']">
<template #header> <template #header>
<div class="flex justify-content-end"> <div class="flex justify-content-end">
<IconField iconPosition="left"> <IconField>
<InputIcon> <InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon> </InputIcon>

8
doc/datatable/samples/CustomersDoc.vue
View File

@ -17,7 +17,7 @@
<template #header> <template #header>
<div class="flex justify-content-between"> <div class="flex justify-content-between">
<Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" /> <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
<IconField iconPosition="left"> <IconField>
<InputIcon> <InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon> </InputIcon>
@ -145,7 +145,7 @@ export default {
<template #header> <template #header>
<div class="flex justify-content-between"> <div class="flex justify-content-between">
<Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" /> <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
<IconField iconPosition="left"> <IconField>
<InputIcon> <InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon> </InputIcon>
@ -247,7 +247,7 @@ export default {
<template #header> <template #header>
<div class="flex justify-content-between"> <div class="flex justify-content-between">
<Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" /> <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
<IconField iconPosition="left"> <IconField>
<InputIcon> <InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon> </InputIcon>
@ -440,7 +440,7 @@ export default {
<template #header> <template #header>
<div class="flex justify-content-between"> <div class="flex justify-content-between">
<Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" /> <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
<IconField iconPosition="left"> <IconField>
<InputIcon> <InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon> </InputIcon>

8
doc/datatable/samples/ProductsDoc.vue
View File

@ -31,7 +31,7 @@
<template #header> <template #header>
<div class="flex flex-wrap gap-2 align-items-center justify-content-between"> <div class="flex flex-wrap gap-2 align-items-center justify-content-between">
<h4 class="m-0">Manage Products</h4> <h4 class="m-0">Manage Products</h4>
<IconField iconPosition="left"> <IconField>
<InputIcon> <InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon> </InputIcon>
@ -208,7 +208,7 @@ export default {
<template #header> <template #header>
<div class="flex flex-wrap gap-2 align-items-center justify-content-between"> <div class="flex flex-wrap gap-2 align-items-center justify-content-between">
<h4 class="m-0">Manage Products</h4> <h4 class="m-0">Manage Products</h4>
<IconField iconPosition="left"> <IconField>
<InputIcon> <InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon> </InputIcon>
@ -271,7 +271,7 @@ export default {
<template #header> <template #header>
<div class="flex flex-wrap gap-2 align-items-center justify-content-between"> <div class="flex flex-wrap gap-2 align-items-center justify-content-between">
<h4 class="m-0">Manage Products</h4> <h4 class="m-0">Manage Products</h4>
<IconField iconPosition="left"> <IconField>
<InputIcon> <InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon> </InputIcon>
@ -562,7 +562,7 @@ export default {
<template #header> <template #header>
<div class="flex flex-wrap gap-2 align-items-center justify-content-between"> <div class="flex flex-wrap gap-2 align-items-center justify-content-between">
<h4 class="m-0">Manage Products</h4> <h4 class="m-0">Manage Products</h4>
<IconField iconPosition="left"> <IconField>
<InputIcon> <InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon> </InputIcon>

22
doc/iconfield/BasicDoc.vue
View File

@ -1,19 +1,16 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p> <p><i>IconField</i> wraps the <i>InputIcon</i> and the input field component.</p>
A group is created by wrapping the input and icon with the <i>IconField</i> component. Each icon is defined as a child of <i>InputIcon</i> component. In addition, position of the icon can be changed using <i>iconPosition</i> property that
the default value is <i>right</i> and also <i>left</i> option is available.
</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> <IconField>
<InputIcon class="pi pi-search"> </InputIcon> <InputIcon class="pi pi-search" />
<InputText v-model="value1" placeholder="Search" /> <InputText v-model="value1" placeholder="Search" />
</IconField> </IconField>
<IconField> <IconField>
<InputText v-model="value2" /> <InputText v-model="value2" />
<InputIcon class="pi pi-spin pi-spinner"> </InputIcon> <InputIcon class="pi pi-spin pi-spinner" />
</IconField> </IconField>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -28,27 +25,26 @@ export default {
code: { code: {
basic: ` basic: `
<IconField> <IconField>
<InputIcon class="pi pi-search"> </InputIcon> <InputIcon class="pi pi-search" />
<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" />
</IconField> </IconField>
`, `,
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> <IconField>
<IconField> <InputIcon class="pi pi-search" />
<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" />
</IconField> </IconField>
</div> </div>
</template> </template>
@ -68,13 +64,13 @@ export default {
<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> <IconField>
<InputIcon class="pi pi-search"> </InputIcon> <InputIcon class="pi pi-search" />
<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" />
</IconField> </IconField>
</div> </div>
</template> </template>

8
doc/toolbar/BasicDoc.vue
View File

@ -11,7 +11,7 @@
</template> </template>
<template #center> <template #center>
<IconField iconPosition="left"> <IconField>
<InputIcon> <InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon> </InputIcon>
@ -49,7 +49,7 @@ export default {
</template> </template>
<template #center> <template #center>
<IconField iconPosition="left"> <IconField>
<InputIcon> <InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon> </InputIcon>
@ -71,7 +71,7 @@ export default {
</template> </template>
<template #center> <template #center>
<IconField iconPosition="left"> <IconField>
<InputIcon> <InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon> </InputIcon>
@ -114,7 +114,7 @@ export default {
</template> </template>
<template #center> <template #center>
<IconField iconPosition="left"> <IconField>
<InputIcon> <InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon> </InputIcon>

8
doc/treetable/FilterDoc.vue
View File

@ -14,7 +14,7 @@
<TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value"> <TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value">
<template #header> <template #header>
<div class="text-right"> <div class="text-right">
<IconField iconPosition="left"> <IconField>
<InputIcon> <InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon> </InputIcon>
@ -62,7 +62,7 @@ export default {
<TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value"> <TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value">
<template #header> <template #header>
<div class="text-right"> <div class="text-right">
<IconField iconPosition="left"> <IconField>
<InputIcon> <InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon> </InputIcon>
@ -96,7 +96,7 @@ export default {
<TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value"> <TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value">
<template #header> <template #header>
<div class="text-right"> <div class="text-right">
<IconField iconPosition="left"> <IconField>
<InputIcon> <InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon> </InputIcon>
@ -153,7 +153,7 @@ export default {
<TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value"> <TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value">
<template #header> <template #header>
<div class="text-right"> <div class="text-right">
<IconField iconPosition="left"> <IconField>
<InputIcon> <InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon> </InputIcon>