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

Use our tailwind plugin from npm

pull/5806/head
Cagatay Civici 2024-05-21 10:03:55 +03:00
parent c5ebd68b74
commit d5493601b6
13 changed files with 12 additions and 427 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
package-lock.json generated
View File

@ -41,6 +41,7 @@
"sass": "^1.45.0", "sass": "^1.45.0",
"sass-loader": "^8.0.2", "sass-loader": "^8.0.2",
"tailwindcss": "^3.4.1", "tailwindcss": "^3.4.1",
"tailwindcss-primeui": "^0.1.0",
"typedoc": "0.23.23", "typedoc": "0.23.23",
"typescript": "^4.9.4", "typescript": "^4.9.4",
"vitest": "^0.29.8" "vitest": "^0.29.8"
@ -12260,6 +12261,15 @@
"node": ">=14.0.0" "node": ">=14.0.0"
} }
}, },
"node_modules/tailwindcss-primeui": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/tailwindcss-primeui/-/tailwindcss-primeui-0.1.0.tgz",
"integrity": "sha512-nF6AUxJ1OGCiKR06D00h3e8qWEB+D602wEYw2C8vk5W8bIiNwfO62dsIiaHBy+GVUHYK64F1AMscF0rUB0Y9Dw==",
"dev": true,
"peerDependencies": {
"tailwindcss": ">=3.1.0"
}
},
"node_modules/tailwindcss/node_modules/postcss-load-config": { "node_modules/tailwindcss/node_modules/postcss-load-config": {
"version": "4.0.2", "version": "4.0.2",
"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz", "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",

1
package.json
View File

@ -69,6 +69,7 @@
"sass": "^1.45.0", "sass": "^1.45.0",
"sass-loader": "^8.0.2", "sass-loader": "^8.0.2",
"tailwindcss": "^3.4.1", "tailwindcss": "^3.4.1",
"tailwindcss-primeui": "^0.1.0",
"typedoc": "0.23.23", "typedoc": "0.23.23",
"typescript": "^4.9.4", "typescript": "^4.9.4",
"vitest": "^0.29.8" "vitest": "^0.29.8"

2
tailwind.config.js
View File

@ -1,5 +1,5 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
const primeui = require('./tailwindcss-primeui'); const primeui = require('tailwindcss-primeui');
module.exports = { module.exports = {
corePlugins: { corePlugins: {

17
tailwindcss-primeui/index.js
View File

@ -1,17 +0,0 @@
const plugin = require('tailwindcss/plugin');
module.exports = plugin(
(api) => {
require('./utils/backface')(api);
require('./utils/delay')(api);
require('./utils/direction')(api);
require('./utils/duration')(api);
require('./utils/fillMode')(api);
require('./utils/iterationCount')(api);
require('./utils/playState')(api);
require('./utils/timingFunction')(api);
},
{
theme: require('./theme')
}
);

312
tailwindcss-primeui/theme.js
View File

@ -1,312 +0,0 @@
const { transform } = require('typescript');
module.exports = {
extend: {
colors: {
primary: 'var(--p-primary-color)',
'primary-contrast': 'var(--p-primary-contrast-color)',
'primary-50': 'var(--p-primary-50)',
'primary-100': 'var(--p-primary-100)',
'primary-200': 'var(--p-primary-200)',
'primary-300': 'var(--p-primary-300)',
'primary-400': 'var(--p-primary-400)',
'primary-500': 'var(--p-primary-500)',
'primary-600': 'var(--p-primary-600)',
'primary-700': 'var(--p-primary-700)',
'primary-800': 'var(--p-primary-800)',
'primary-900': 'var(--p-primary-900)',
'primary-950': 'var(--p-primary-950)',
'surface-0': 'var(--p-surface-0)',
'surface-50': 'var(--p-surface-50)',
'surface-100': 'var(--p-surface-100)',
'surface-200': 'var(--p-surface-200)',
'surface-300': 'var(--p-surface-300)',
'surface-400': 'var(--p-surface-400)',
'surface-500': 'var(--p-surface-500)',
'surface-600': 'var(--p-surface-600)',
'surface-700': 'var(--p-surface-700)',
'surface-800': 'var(--p-surface-800)',
'surface-900': 'var(--p-surface-900)',
'surface-950': 'var(--p-surface-950)'
},
keyframes: {
fadein: {
'0%': {
opacity: '0'
},
'100%': {
opacity: '1'
}
},
fadeout: {
'0%': {
opacity: '1'
},
'100%': {
opacity: '0'
}
},
scalein: {
'0%': {
opacity: '0',
transform: 'scaleY(0.8)',
transition: 'transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1)'
},
'100%': {
opacity: '1',
transform: 'scaleY(1)'
}
},
slidedown: {
'0%': {
maxHeight: '0'
},
'100%': {
maxHeight: 'auto'
}
},
slideup: {
'0%': {
maxHeight: '1000px'
},
'100%': {
maxHeight: '0'
}
},
fadeinleft: {
'0%': {
opacity: '0',
transform: 'translateX(-100%)',
transition: 'transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1)'
},
'100%': {
opacity: '1',
transform: 'translateX(0%)'
}
},
fadeoutleft: {
'0%': {
opacity: '1',
transform: 'translateX(0%)',
transition: 'transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1)'
},
'100%': {
opacity: '0',
transform: 'translateX(-100%)'
}
},
fadeinright: {
'0%': {
opacity: '0',
transform: 'translateX(100%)',
transition: 'transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1)'
},
'100%': {
opacity: '1',
transform: 'translateX(0%)'
}
},
fadeoutright: {
'0%': {
opacity: '1',
transform: 'translateX(0%)',
transition: 'transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1)'
},
'100%': {
opacity: '0',
transform: 'translateX(100%)'
}
},
fadeinup: {
'0%': {
opacity: '0',
transform: 'translateY(-100%)',
transition: 'transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1)'
},
'100%': {
opacity: '1',
transform: 'translateY(0%)'
}
},
fadeoutup: {
'0%': {
opacity: '1',
transform: 'translateY(0%)',
transition: 'transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1)'
},
'100%': {
opacity: '0',
transform: 'translateY(-100%)'
}
},
fadeindown: {
'0%': {
opacity: '0',
transform: 'translateY(100%)',
transition: 'transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1)'
},
'100%': {
opacity: '1',
transform: 'translateY(0%)'
}
},
fadeoutdown: {
'0%': {
opacity: '1',
transform: 'translateY(0%)',
transition: 'transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1)'
},
'100%': {
opacity: '0',
transform: 'translateY(100%)'
}
},
width: {
'0%': {
width: '0'
},
'100%': {
width: '100%'
}
},
flip: {
from: {
transform: 'perspective(2000px) rotateX(-100deg)'
},
to: {
transform: 'perspective(2000px) rotateX(0)'
}
},
flipleft: {
from: {
transform: 'perspective(2000px) rotateY(-100deg)',
opacity: '0'
},
to: {
transform: 'perspective(2000px) rotateY(0)',
opacity: '1'
}
},
flipright: {
from: {
transform: 'perspective(2000px) rotateY(100deg)',
opacity: '0'
},
to: {
transform: 'perspective(2000px) rotateY(0)',
opacity: '1'
}
},
flipup: {
from: {
transform: 'perspective(2000px) rotateX(-100deg)',
opacity: '0'
},
to: {
transform: 'perspective(2000px) rotateX(0)',
opacity: '1'
}
},
zoomin: {
from: {
transform: 'scale3d(0.3, 0.3, 0.3)',
opacity: '0'
},
50: {
opacity: '1'
}
},
zoomindown: {
from: {
transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0)',
opacity: '0'
},
60: {
transform: 'scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0)',
opacity: '1'
}
},
zoominleft: {
from: {
transform: 'scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0)',
opacity: '0'
},
60: {
transform: 'scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0)',
opacity: '1'
}
},
zoominright: {
from: {
transform: 'scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0)',
opacity: '0'
},
60: {
transform: 'scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0)',
opacity: '1'
}
},
zoominup: {
from: {
transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0)',
opacity: '0'
},
60: {
transform: 'scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0)',
opacity: '1'
}
}
},
animation: {
fadein: 'fadein 0.15s linear',
fadeout: 'fadeout 0.15s linear',
slidedown: 'slidedown 0.45s ease-in-out',
slideup: 'slideup 0.45s cubic-bezier(0, 1, 0, 1)',
scalein: 'scalein 0.15s linear',
fadeinleft: 'fadeinleft 0.15s linear',
fadeoutleft: 'fadeoutleft 0.15s linear',
fadeinright: 'fadeinright 0.15s linear',
fadeoutright: 'fadeoutright 0.15s linear',
fadeinup: 'fadeinup 0.15s linear',
fadeoutup: 'fadeoutup 0.15s linear',
fadeindown: 'fadeindown 0.15s linear',
fadeoutdown: 'fadeoutdown 0.15s linear',
width: 'width 0.45s linear',
flip: 'flip 0.15s linear',
flipup: 'flipup 0.15s linear',
flipleft: 'flipleft 0.15s linear',
flipright: 'flipright 0.15s linear',
zoomin: 'zoomin 0.15s linear',
zoomindown: 'zoomindown 0.15s linear',
zoominleft: 'zoominleft 0.15s linear',
zoominright: 'zoominright 0.15s linear',
zoominup: 'zoominup 0.15s linear'
},
animationDelay: {
0: '0s',
75: '75ms',
100: '100ms',
150: '150ms',
200: '200ms',
300: '300ms',
400: '400ms',
500: '500ms',
700: '700ms',
1000: '1000ms'
},
animationDuration: {
0: '0s',
75: '75ms',
100: '100ms',
150: '150ms',
200: '200ms',
300: '300ms',
400: '400ms',
500: '500ms',
700: '700ms',
1000: '1000ms',
2000: '2000ms',
3000: '3000ms'
}
}
};

9
tailwindcss-primeui/utils/backface.js
View File

@ -1,9 +0,0 @@
module.exports = ({ addUtilities }) =>
addUtilities({
'.backface-visible': {
'backface-visibility': 'visible'
},
'.backface-hidden': {
'backface-visibility': 'hidden'
}
});

11
tailwindcss-primeui/utils/delay.js
View File

@ -1,11 +0,0 @@
module.exports = ({ matchUtilities, theme }) =>
matchUtilities(
{
'animate-delay': (value) => ({
'animation-delay': value
})
},
{
values: theme('animationDelay')
}
);

15
tailwindcss-primeui/utils/direction.js
View File

@ -1,15 +0,0 @@
module.exports = ({ addUtilities }) =>
addUtilities({
'.animate-normal': {
'animation-direction': 'normal'
},
'.animate-reverse': {
'animation-direction': 'reverse'
},
'.animate-alternate': {
'animation-direction': 'alternate'
},
'.animate-alternate-reverse': {
'animation-direction': 'alternate-reverse'
}
});

11
tailwindcss-primeui/utils/duration.js
View File

@ -1,11 +0,0 @@
module.exports = ({ matchUtilities, theme }) =>
matchUtilities(
{
'animate-duration': (value) => ({
'animation-duration': value
})
},
{
values: theme('animationDuration')
}
);

15
tailwindcss-primeui/utils/fillMode.js
View File

@ -1,15 +0,0 @@
module.exports = ({ addUtilities }) =>
addUtilities({
'.animate-fill-none': {
'animation-fill-mode': 'none'
},
'.animate-fill-forwards': {
'animation-fill-mode': 'forwards'
},
'.animate-fill-backwards': {
'animation-fill-mode': 'backwards'
},
'.animate-fill-both': {
'animation-fill-mode': 'both'
}
});

12
tailwindcss-primeui/utils/iterationCount.js
View File

@ -1,12 +0,0 @@
module.exports = ({ addUtilities }) =>
addUtilities({
'.animate-infinite': {
'animation-iteration-count': 'infinite'
},
'.animate-once': {
'animation-iteration-count': '1'
},
'.animate-twice': {
'animation-iteration-count': '2'
}
});

9
tailwindcss-primeui/utils/playState.js
View File

@ -1,9 +0,0 @@
module.exports = ({ addUtilities }) =>
addUtilities({
'.animate-running': {
'animation-play-state': 'running'
},
'.animate-paused': {
'animation-play-state': 'paused'
}
});

15
tailwindcss-primeui/utils/timingFunction.js
View File

@ -1,15 +0,0 @@
module.exports = ({ addUtilities }) =>
addUtilities({
'.animate-ease-linear': {
'animation-timing-function': 'linear'
},
'.animate-ease-in': {
'animation-timing-function': 'cubic-bezier(0.4, 0, 1, 1)'
},
'.animate-ease-out': {
'animation-timing-function': 'cubic-bezier(0, 0, 0.2, 1)'
},
'.animate-ease-in-out': {
'animation-timing-function': 'cubic-bezier(0.4, 0, 0.2, 1)'
}
});