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

Fixed #6822 - Better compat with CSS libraires like Tailwind, Bootstrap

pull/6829/head
Cagatay Civici 2024-11-21 14:46:19 +03:00
parent 70f90968c6
commit 0fb5e0a504
10 changed files with 29 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
apps/showcase/assets/styles/layout/_core.scss
View File

@ -1,7 +1,8 @@
html {
font-size: 14px;
font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-feature-settings: "cv02","cv03","cv04","cv11";
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
line-height: normal;
}
.material {
@ -33,7 +34,12 @@ a {
color: var(--selection-text-color);
}
h1, h2, h3, h4, h5, h6 {
h1,
h2,
h3,
h4,
h5,
h6 {
margin-block: 1.5rem 1rem;
margin-inline: 0;
font-family: inherit;
@ -86,13 +92,6 @@ button {
font-feature-settings: inherit;
}
*,
::before,
::after {
border-width: 0;
border-style: solid;
}
textarea {
resize: none;
}
}

8
apps/showcase/doc/datatable/rowgroup/ExpandableRowGroupDoc.vue
View File

@ -21,7 +21,7 @@
tableStyle="min-width: 50rem"
>
<template #groupheader="slotProps">
<img :alt="slotProps.data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.data.representative.image}`" width="32" style="vertical-align: middle" class="ml-2" />
<img :alt="slotProps.data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.data.representative.image}`" width="32" style="vertical-align: middle; display: inline-block" class="ml-2" />
<span class="align-middle ml-2 font-bold leading-normal">{{ slotProps.data.representative.name }}</span>
</template>
<Column field="representative.name" header="Representative"></Column>
@ -64,7 +64,7 @@ export default {
expandableRowGroups rowGroupMode="subheader" groupRowsBy="representative.name" @rowgroup-expand="onRowGroupExpand" @rowgroup-collapse="onRowGroupCollapse"
sortMode="single" sortField="representative.name" :sortOrder="1">
<template #groupheader="slotProps">
<img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle" class="ml-2" />
<img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle; display: inline-block" class="ml-2" />
<span class="align-middle ml-2 font-bold leading-normal">{{ slotProps.data.representative.name }}</span>
</template>
<Column field="representative.name" header="Representative"></Column>
@ -96,7 +96,7 @@ export default {
expandableRowGroups rowGroupMode="subheader" groupRowsBy="representative.name" @rowgroup-expand="onRowGroupExpand" @rowgroup-collapse="onRowGroupCollapse"
sortMode="single" sortField="representative.name" :sortOrder="1">
<template #groupheader="slotProps">
<img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle" class="ml-2" />
<img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle; display: inline-block" class="ml-2" />
<span class="align-middle ml-2 font-bold leading-normal">{{ slotProps.data.representative.name }}</span>
</template>
<Column field="representative.name" header="Representative"></Column>
@ -186,7 +186,7 @@ export default {
expandableRowGroups rowGroupMode="subheader" groupRowsBy="representative.name" @rowgroup-expand="onRowGroupExpand" @rowgroup-collapse="onRowGroupCollapse"
sortMode="single" sortField="representative.name" :sortOrder="1">
<template #groupheader="slotProps">
<img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle" class="ml-2" />
<img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle; display: inline-block" class="ml-2" />
<span class="align-middle ml-2 font-bold leading-normal">{{ slotProps.data.representative.name }}</span>
</template>
<Column field="representative.name" header="Representative"></Column>

4
apps/showcase/doc/datatable/rowgroup/RowSpanRowGroupDoc.vue
View File

@ -33,7 +33,6 @@
<Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
</template>
</Column>
<Column field="date" header="Date" style="min-width: 100px"></Column>
</DataTable>
</div>
</DeferredDemo>
@ -79,7 +78,6 @@ export default {
<Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
</template>
</Column>
<Column field="date" header="Date" style="min-width: 100px"></Column>
</DataTable>
`,
options: `
@ -114,7 +112,6 @@ export default {
<Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
</template>
</Column>
<Column field="date" header="Date" style="min-width: 100px"></Column>
</DataTable>
</div>
</template>
@ -186,7 +183,6 @@ export default {
<Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
</template>
</Column>
<Column field="date" header="Date" style="min-width: 100px"></Column>
</DataTable>
</div>
</template>

3
apps/showcase/tailwind.config.js
View File

@ -2,9 +2,6 @@
const primeui = require('tailwindcss-primeui');
module.exports = {
corePlugins: {
preflight: false
},
darkMode: ['selector', '[class="p-dark"]'],
content: ['./pages/**/*.vue', './layouts/**/*.vue', './components/**/*.{js,vue,ts}', './doc/**/*.{js,vue,ts}', './error.vue'],
plugins: [primeui],

1
package.json
View File

@ -31,6 +31,7 @@
"build:showcase": "pnpm --filter showcase build",
"build:apidoc": "pnpm --filter themes build:tokens && pnpm --filter showcase build:apidoc",
"dev": "pnpm --filter showcase dev",
"preview": "pnpm --filter showcase preview",
"hot:dev": "DEV_ENV=hot pnpm --filter showcase dev",
"module:dev": "pnpm --filter @primevue/nuxt-module dev",
"security:check": "pnpm audit --prod --audit-level high",

4
packages/core/src/base/style/BaseStyle.js
View File

@ -3,7 +3,9 @@ import { isNotEmpty, minifyCSS, resolve } from '@primeuix/utils/object';
import { useStyle } from '@primevue/core/usestyle';
const theme = ({ dt }) => `
* {
*,
::before,
::after {
box-sizing: border-box;
}

1
packages/primevue/src/datatable/style/DataTableStyle.js
View File

@ -7,6 +7,7 @@ const theme = ({ dt }) => `
.p-datatable-table {
border-spacing: 0;
border-collapse: separate;
width: 100%;
}

1
packages/primevue/src/datepicker/style/DatePickerStyle.js
View File

@ -68,6 +68,7 @@ const theme = ({ dt }) => `
inset-inline-end: ${dt('form.field.padding.x')};
margin-block-start: calc(-1 * (${dt('icon.size')} / 2));
color: ${dt('datepicker.input.icon.color')};
line-height: 1;
}
.p-datepicker-fluid {

1
packages/primevue/src/treetable/style/TreeTableStyle.js
View File

@ -7,6 +7,7 @@ const theme = ({ dt }) => `
.p-treetable-table {
border-spacing: 0;
border-collapse: separate;
width: 100%;
}

18
packages/themes/src/presets/material/checkbox/index.js
View File

@ -90,21 +90,21 @@ export default {
}
.p-checkbox {
--p-md-check-icon-t: 10px;
--p-md-check-icon-w: 6px;
--p-md-check-icon-h: 12px;
}
.p-checkbox-sm {
--p-md-check-icon-t: 8px;
--p-md-check-icon-w: 4px;
--p-md-check-icon-h: 10px;
}
.p-checkbox-sm {
--p-md-check-icon-t: 6px;
--p-md-check-icon-w: 2px;
--p-md-check-icon-h: 8px;
}
.p-checkbox-lg {
--p-md-check-icon-t: 10px;
--p-md-check-icon-w: 6px;
--p-md-check-icon-h: 14px;
--p-md-check-icon-t: 12px;
--p-md-check-icon-w: 8px;
--p-md-check-icon-h: 16px;
}
@keyframes p-md-check {