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

Updated css layer docs

pull/5880/head
Cagatay Civici 2024-06-13 09:43:29 +03:00
parent dc677dce80
commit 295e66b7c3
9 changed files with 77 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
apps/showcase/doc/dialog/HeadlessDoc.vue
View File

@ -5,16 +5,7 @@
<div class="card flex justify-center">
<Button label="Login" icon="pi pi-user" @click="visible = true" />
<Dialog
v-model:visible="visible"
modal
:pt="{
root: 'border-0',
mask: {
style: 'backdrop-filter: blur(2px)'
}
}"
>
<Dialog v-model:visible="visible" pt:root:class="!border-0" pt:mask:class="backdrop-blur-sm">
<template #container="{ closeCallback }">
<div class="flex flex-col px-8 py-8 gap-6" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
@ -29,15 +20,15 @@
</svg>
<div class="inline-flex flex-col gap-2">
<label for="username" class="text-primary-50 font-semibold">Username</label>
<InputText id="username" class="bg-white/20 border-0 p-4 text-primary-50 w-80"></InputText>
<InputText id="username" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80"></InputText>
</div>
<div class="inline-flex flex-col gap-2">
<label for="password" class="text-primary-50 font-semibold">Password</label>
<InputText id="password" class="bg-white/20 border-0 p-4 text-primary-50 w-80" type="password"></InputText>
<InputText id="password" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80" type="password"></InputText>
</div>
<div class="flex items-center gap-4">
<Button label="Cancel" @click="closeCallback" text class="p-4 w-full text-primary-50 border border-white/30 hover:bg-white/10"></Button>
<Button label="Sign-In" @click="closeCallback" text class="p-4 w-full text-primary-50 border border-white/30 hover:bg-white/10"></Button>
<Button label="Cancel" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
<Button label="Sign-In" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
</div>
</div>
</template>
@ -55,16 +46,7 @@ export default {
basic: `
<Button label="Login" icon="pi pi-user" @click="visible = true" />
<Dialog
v-model:visible="visible"
modal
:pt="{
root: 'border-0',
mask: {
style: 'backdrop-filter: blur(2px)'
}
}"
>
<Dialog v-model:visible="visible" pt:root:class="!border-0" pt:mask:class="backdrop-blur-sm">
<template #container="{ closeCallback }">
<div class="flex flex-col px-8 py-8 gap-6" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
@ -79,15 +61,15 @@ export default {
</svg>
<div class="inline-flex flex-col gap-2">
<label for="username" class="text-primary-50 font-semibold">Username</label>
<InputText id="username" class="bg-white/20 border-0 p-4 text-primary-50 w-80"></InputText>
<InputText id="username" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80"></InputText>
</div>
<div class="inline-flex flex-col gap-2">
<label for="password" class="text-primary-50 font-semibold">Password</label>
<InputText id="password" class="bg-white/20 border-0 p-4 text-primary-50 w-80" type="password"></InputText>
<InputText id="password" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80" type="password"></InputText>
</div>
<div class="flex items-center gap-4">
<Button label="Cancel" @click="closeCallback" text class="p-4 w-full text-primary-50 border border-white/30 hover:bg-white/10"></Button>
<Button label="Sign-In" @click="closeCallback" text class="p-4 w-full text-primary-50 border border-white/30 hover:bg-white/10"></Button>
<Button label="Cancel" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
<Button label="Sign-In" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
</div>
</div>
</template>
@ -98,16 +80,7 @@ export default {
<div class="card flex justify-center">
<Button label="Login" icon="pi pi-user" @click="visible = true" />
<Dialog
v-model:visible="visible"
modal
:pt="{
root: 'border-0',
mask: {
style: 'backdrop-filter: blur(2px)'
}
}"
>
<Dialog v-model:visible="visible" pt:root:class="!border-0" pt:mask:class="backdrop-blur-sm">
<template #container="{ closeCallback }">
<div class="flex flex-col px-8 py-8 gap-6" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
@ -122,15 +95,15 @@ export default {
</svg>
<div class="inline-flex flex-col gap-2">
<label for="username" class="text-primary-50 font-semibold">Username</label>
<InputText id="username" class="bg-white/20 border-0 p-4 text-primary-50 w-80"></InputText>
<InputText id="username" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80"></InputText>
</div>
<div class="inline-flex flex-col gap-2">
<label for="password" class="text-primary-50 font-semibold">Password</label>
<InputText id="password" class="bg-white/20 border-0 p-4 text-primary-50 w-80" type="password"></InputText>
<InputText id="password" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80" type="password"></InputText>
</div>
<div class="flex items-center gap-4">
<Button label="Cancel" @click="closeCallback" text class="p-4 w-full text-primary-50 border border-white/30 hover:bg-white/10"></Button>
<Button label="Sign-In" @click="closeCallback" text class="p-4 w-full text-primary-50 border border-white/30 hover:bg-white/10"></Button>
<Button label="Cancel" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
<Button label="Sign-In" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
</div>
</div>
</template>
@ -153,16 +126,7 @@ export default {
<div class="card flex justify-center">
<Button label="Login" icon="pi pi-user" @click="visible = true" />
<Dialog
v-model:visible="visible"
modal
:pt="{
root: 'border-0',
mask: {
style: 'backdrop-filter: blur(2px)'
}
}"
>
<Dialog v-model:visible="visible" pt:root:class="!border-0" pt:mask:class="backdrop-blur-sm">
<template #container="{ closeCallback }">
<div class="flex flex-col px-8 py-8 gap-6" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
@ -177,15 +141,15 @@ export default {
</svg>
<div class="inline-flex flex-col gap-2">
<label for="username" class="text-primary-50 font-semibold">Username</label>
<InputText id="username" class="bg-white/20 border-0 p-4 text-primary-50 w-80"></InputText>
<InputText id="username" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80"></InputText>
</div>
<div class="inline-flex flex-col gap-2">
<label for="password" class="text-primary-50 font-semibold">Password</label>
<InputText id="password" class="bg-white/20 border-0 p-4 text-primary-50 w-80" type="password"></InputText>
<InputText id="password" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80" type="password"></InputText>
</div>
<div class="flex items-center gap-4">
<Button label="Cancel" @click="closeCallback" text class="p-4 w-full text-primary-50 border border-white/30 hover:bg-white/10"></Button>
<Button label="Sign-In" @click="closeCallback" text class="p-4 w-full text-primary-50 border border-white/30 hover:bg-white/10"></Button>
<Button label="Cancel" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
<Button label="Sign-In" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
</div>
</div>
</template>

39
apps/showcase/doc/nuxt/configuration/CSSLayerOrderDoc.vue
View File

@ -1,39 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
When the layer is enabled at the theme configuration, defines the CSS layer order setting for compatibility with libraries like Tailwind and Bootstrap in styled mode. Visit the
<NuxtLink to="/theming/styled/#csslayer">CSS Layer</NuxtLink> guide for detailed information.
</p>
</DocSectionText>
<DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
<DocSectionCode :code="code2" importCode hideToggleCode hideStackBlitz />
</template>
<script>
export default {
data() {
return {
code1: {
basic: `
primevue: {
cssLayerOrder: 'tailwind-base, primevue, tailwind-utilities'
}
`
},
code2: {
basic: `
/* tailwind.css */
@layer tailwind-base {
@tailwind base;
}
@layer tailwind-utilities {
@tailwind components;
@tailwind utilities;
}
`
}
};
}
};
</script>

10
apps/showcase/doc/tailwind/OverrideDoc.vue
View File

@ -6,10 +6,7 @@
<DocSectionCode :code="code1" hideToggleCode hideStackBlitz />
<h3>CSS Layer</h3>
<p>
Enable PrimeVue CSS layer and configure the tailwind styles to have higher specificity with layering. This way, <i>!</i> prefix is not required. If you are using Nuxt, there is a
<NuxtLink to="/nuxt/#layerorder">cssLayerOrder</NuxtLink> property to define the order.
</p>
<p>Enable PrimeVue CSS layer and configure the tailwind styles to have higher specificity with layering. This way, <i>!</i> prefix is not required.</p>
<DocSectionCode :code="code2" importCode hideToggleCode hideStackBlitz />
<DocSectionCode :code="code3" importCode hideToggleCode hideStackBlitz />
</DocSectionText>
@ -35,7 +32,10 @@ app.use(PrimeVue, {
theme: {
preset: Aura,
options: {
cssLayer: true
cssLayer: {
name: 'primevue',
order: 'tailwind-base, primevue, tailwind-utilities'
}
}
}
});

20
apps/showcase/doc/tailwind/samples/HeadlessDoc.vue
View File

@ -5,7 +5,7 @@
<div class="card flex justify-center">
<Button label="Login" icon="pi pi-user" @click="visible = true" />
<Dialog v-model:visible="visible" pt:root:class="border-0" pt:mask:class="backdrop-blur-sm">
<Dialog v-model:visible="visible" pt:root:class="!border-0" pt:mask:class="backdrop-blur-sm">
<template #container="{ closeCallback }">
<div class="flex flex-col px-8 py-8 gap-6" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
@ -20,15 +20,15 @@
</svg>
<div class="inline-flex flex-col gap-2">
<label for="username" class="text-primary-50 font-semibold">Username</label>
<InputText id="username" class="bg-white/20 border-0 p-4 text-primary-50 w-80"></InputText>
<InputText id="username" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80"></InputText>
</div>
<div class="inline-flex flex-col gap-2">
<label for="password" class="text-primary-50 font-semibold">Password</label>
<InputText id="password" class="bg-white/20 border-0 p-4 text-primary-50 w-80" type="password"></InputText>
<InputText id="password" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80" type="password"></InputText>
</div>
<div class="flex items-center gap-4">
<Button label="Cancel" @click="closeCallback" text class="p-4 w-full text-primary-50 border border-white/30 hover:bg-white/10"></Button>
<Button label="Sign-In" @click="closeCallback" text class="p-4 w-full text-primary-50 border border-white/30 hover:bg-white/10"></Button>
<Button label="Cancel" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
<Button label="Sign-In" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
</div>
</div>
</template>
@ -46,7 +46,7 @@ export default {
basic: `
<Button label="Login" icon="pi pi-user" @click="visible = true" />
<Dialog v-model:visible="visible" pt:root:class="border-0" pt:mask:class="backdrop-blur-sm">
<Dialog v-model:visible="visible" pt:root:class="!border-0" pt:mask:class="backdrop-blur-sm">
<template #container="{ closeCallback }">
<div class="flex flex-col px-8 py-8 gap-6" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
@ -61,15 +61,15 @@ export default {
</svg>
<div class="inline-flex flex-col gap-2">
<label for="username" class="text-primary-50 font-semibold">Username</label>
<InputText id="username" class="bg-white/20 border-0 p-4 text-primary-50 w-80"></InputText>
<InputText id="username" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80"></InputText>
</div>
<div class="inline-flex flex-col gap-2">
<label for="password" class="text-primary-50 font-semibold">Password</label>
<InputText id="password" class="bg-white/20 border-0 p-4 text-primary-50 w-80" type="password"></InputText>
<InputText id="password" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80" type="password"></InputText>
</div>
<div class="flex items-center gap-4">
<Button label="Cancel" @click="closeCallback" text class="p-4 w-full text-primary-50 border border-white/30 hover:bg-white/10"></Button>
<Button label="Sign-In" @click="closeCallback" text class="p-4 w-full text-primary-50 border border-white/30 hover:bg-white/10"></Button>
<Button label="Cancel" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
<Button label="Sign-In" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
</div>
</div>
</template>

40
apps/showcase/doc/theming/styled/configuration/OptionsDoc.vue
View File

@ -3,15 +3,51 @@
<p>The <i>options</i> property defines the how the CSS would be generated from the design tokens of the preset.</p>
<h4>prefix</h4>
<p>The prefix of the CSS variables, defaults to <i>p</i>. For instance, the <i>primary.color</i> design token would be <i>var(--p-primary-color)</i>.</p>
<DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
<h4>darkModeSelector</h4>
<p>
The CSS rule to encapsulate the CSS variables of the dark mode, the default is the <i>system</i> to generate <i>@media (prefers-color-scheme: dark)</i>. If you need to make the dark mode toggleable based on the user selection define a
class selector such as <i>.app-dark</i> and toggle this class at the document root. See the dark mode toggle section for an example.
</p>
<DocSectionCode :code="code2" importCode hideToggleCode hideStackBlitz />
<h4>cssLayer</h4>
<p class="mb-0">
<p>
Defines whether the styles should be defined inside a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@layer" target="_blank" rel="noopener noreferrer">CSS layer</a> named <i>primeui</i> or not. A CSS layer would be handy to
declare a custom cascade layer for easier customization. The default is <i>false</i>. View the CSS layer section for an example usage.
declare a custom cascade layer for easier customization. The default is <i>false</i>.
</p>
<DocSectionCode :code="code3" importCode hideToggleCode hideStackBlitz />
</DocSectionText>
</template>
<script>
export default {
data() {
return {
code1: {
basic: `
options: {
prefix: 'my'
}
`
},
code2: {
basic: `
options: {
darkModeSelector: '.my-app-dark'
}
`
},
code3: {
basic: `
options: {
cssLayer: {
name: 'primevue',
order: 'tailwind-base, primevue, tailwind-utilities'
}
}
`
}
};
}
};
</script>

4
apps/showcase/error.vue
View File

@ -4,11 +4,11 @@
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 text-primary">
<span class="font-bold text-9xl"> 4 </span>
<div class="flex items-center justify-center bg-primary text-primary-contrast rounded-full w-28 h-28">
<i class="pi pi-prime text-6xl"></i>
<i class="pi pi-prime !text-6xl"></i>
</div>
<span class="font-bold text-9xl"> 4 </span>
</div>
<div class="font-bold text-center text-4xl border-t border-surface pt-8">Page Not Found.</div>
<div class="font-bold text-center text-4xl border-t border-surface pt-8">Page Not Found</div>
<NuxtLink to="/"><Button label="GO TO HOMEPAGE" /></NuxtLink>
</div>
</div>

6
apps/showcase/pages/nuxt/index.vue
View File

@ -22,7 +22,6 @@ import DownloadDoc from '@/doc/nuxt/DownloadDoc.vue';
import ExamplesDoc from '@/doc/nuxt/ExamplesDoc.vue';
import SetupDoc from '@/doc/nuxt/SetupDoc.vue';
import UsageDoc from '@/doc/nuxt/UsageDoc.vue';
import CSSLayerOrderDoc from '@/doc/nuxt/configuration/CSSLayerOrderDoc.vue';
import ComponentsDoc from '@/doc/nuxt/configuration/ComponentsDoc.vue';
import ComposablesDoc from '@/doc/nuxt/configuration/ComposablesDoc.vue';
import DirectivesDoc from '@/doc/nuxt/configuration/DirectivesDoc.vue';
@ -88,11 +87,6 @@ export default {
id: 'importtheme',
label: 'importTheme',
component: ImportThemeDoc
},
{
id: 'layerorder',
label: 'cssLayerOrder',
component: CSSLayerOrderDoc
}
]
},

2
packages/nuxt-module/src/module.ts
View File

@ -14,7 +14,7 @@ export default defineNuxtModule<ModuleOptions>({
defaults: {
usePrimeVue: true,
resolvePath: undefined,
cssLayerOrder: 'tailwind-base, primevue, tailwind-utilities',
//cssLayerOrder: undefined,
importPT: undefined,
importTheme: undefined,
options: {},

2
packages/nuxt-module/src/types.d.ts vendored
View File

@ -10,7 +10,7 @@ export interface ConstructsType {
export interface ModuleOptions {
usePrimeVue?: boolean;
resolvePath?: any;
cssLayerOrder?: string;
/*cssLayerOrder?: string;*/
importPT?: ImportOptions;
importTheme?: ImportOptions;
options?: PrimeVueOptions;