portalis-component
Version:
Component Library for Nuxt 3 using TailwindCSS
140 lines (139 loc) • 3.1 kB
JavaScript
const plugin = require("tailwindcss/plugin");
function uniq(...items) {
return [...new Set(items.flat())];
}
function useBase(theme, onEnter, onLeave = onEnter) {
const willChange = uniq(Object.keys(onEnter), Object.keys(onLeave));
return {
"&-enter-active, &-leave-active": {
transitionDuration: theme("transitionDuration.150"),
transitionTimingFunction: theme("transitionTimingFunction.out"),
transitionProperty: willChange.join(", "),
willChange: willChange.join(", ")
},
"&-enter, &-enter-from": onEnter,
"&-leave-to": onLeave
};
}
export default plugin(
function({ addComponents, theme }) {
addComponents({
".fade": useBase(theme, { opacity: 0 }),
".zoom-in": useBase(
theme,
{
opacity: 0,
transform: "scale(0.95)"
},
{
opacity: 0,
transform: "scale(1.05)"
}
),
".zoom-out": useBase(
theme,
{
opacity: 0,
transform: "scale(1.05)"
},
{
opacity: 0,
transform: "scale(0.95)"
}
),
".slide-right": useBase(
theme,
{
opacity: 0,
transform: "translateX(-1.5rem)"
},
{
opacity: 0,
transform: "translateX(1.5rem)"
}
),
".slide-left": useBase(
theme,
{
opacity: 0,
transform: "translateX(1.5rem)"
},
{
opacity: 0,
transform: "translateX(-1.5rem)"
}
),
".slide-top": useBase(
theme,
{
opacity: 0,
transform: "translateY(1.5rem)"
},
{
opacity: 0,
transform: "translateY(-1.5rem)"
}
),
".slide-bottom": useBase(
theme,
{
opacity: 0,
transform: "translateY(-1.5rem)"
},
{
opacity: 0,
transform: "translateY(1.5rem)"
}
),
".slide-up": useBase(theme, {
opacity: 0,
transform: "translateY(1.5rem)"
}),
".slide-full-right": useBase(
theme,
{
opacity: 0,
transform: "translateX(-100%)"
},
{
opacity: 0,
transform: "translateX(100%)"
}
),
".slide-full-left": useBase(
theme,
{
opacity: 0,
transform: "translateX(100%)"
},
{
opacity: 0,
transform: "translateX(-100%)"
}
),
".slide-full-top": useBase(
theme,
{
opacity: 0,
transform: "translateY(100%)"
},
{
opacity: 0,
transform: "translateY(-100%)"
}
),
".slide-full-bottom": useBase(
theme,
{
opacity: 0,
transform: "translateY(-100%)"
},
{
opacity: 0,
transform: "translateY(100%)"
}
)
});
},
{ safelist: [{ pattern: /^(slide|zoom|fade)/ }] }
);