Releases: StevenJPx2/nugget
v1.0.0-beta.2
🚀 Enhancements
- Add BakedPresetsArray to all baked functions, fix rotate crash (2de8b20)
🩹 Fixes
- docs: Correct configuration (d53e11f)
❤️ Contributors
- Steven John stevenjpx2@gmail.com
v1.0.0-beta.1
v1.0.0-beta.0
✨ Highlights
Whew! This is a BIG release and was a long time coming. Let's see what we done here.
Simplified directives for baked presets
Say you want to animate lines in a text block by moving it from the bottom, while fading it from 0 to 100% opacity.
Before you would have to do this:
<div
v-text-animate="{
baked: true,
options: {
splitBy: 'lines',
animationOptions: { translate: true, opacity: true },
},
}"
/>Now:
<div
v-text-animate-baked="{
splitBy: 'lines',
animationOptions: { translate: true, opacity: true },
}"
/>Or even:
<div v-text-animate-baked-lines="['translate', 'opacity']" />You can define specific tweens by using ::
<div v-text-animate-baked-lines="['translate', 'opacity:in']" />Custom baked presets
You can define your own presets that you can use with all of the baked enabled composables/directives/components.
The below example allows you to define your own animation called zoom with different tweens. Calling zoom as true in any of your baked animations will make it automatically go for the in tween.
defineNuxtConfig({
// ...
nugget: {
baked: {
custom: {
zoom: {
tweens: {
in: {
scale: ["100%", "110%"],
},
out: {
scale: ["110%", "100%"],
},
},
defaultTween: "in",
},
},
},
},
});You can also override all the default presets by doing the following:
defineNuxtConfig({
// ...
nugget: {
baked: {
defaults: {},
},
},
});createInfiniteMarquee
Previously, <InfiniteMarquee /> was a separate component, and that didn't sit right with me. I couldn't be created as a hook, because there would be too many refs to setup, hence I created a function that would return a headless component that can be used anywhere. This incidentally also fixed a lot of previously unnoticed bugs, and made the API simpler.
Example:
<script setup lang="ts">
const Marquee = createInfiniteMarquee(props);
</script>
<template>
<Marquee>
<div class="flex">
<p v-for="i in 10" :key="i">WHO I AM</p>
</div>
</Marquee>
</template>It is still recommended to use the component as it removes the need for calling the function.
Fix type safety issues
Unbeknownst to me, the types would not map 1:1 to what I was getting in development. After finding the root cause for the broken types, now all the types should be working correctly.
This was a lot of fun, but a LOT of work. Hope all of you have fun with this! 🎉
🚀 Enhancements
⚠️ Revitalize baked format (39b5220)- Finish new baked format (b65c469)
- Finish custom bakes in config (#2)
- createInfiniteMarquee: Create composable (804411a)
- directives: Add new directives (#6)
🩹 Fixes
- useLocomotive: Have locomotive scroll in wrapper than in window (2d72538)
- useLocomotive, useInfiniteMarquee: Locomotive types, infinite marquee implies child (52c7fdb)
💅 Refactors
- More typesafety, multiple build type fixes (b290a91)
📖 Documentation
- Update path (91fceb5)
- roadmap: Update roadmap (bdcf1f8)
- directives: Reorganize directives and update docs (8964563)
🏡 Chore
- release: V0.3.1 (7dd4a4b)
- Create FUNDING.yml (73d35c5)
- Update issue templates (4696542)
- baked: Types (e84a397)
⚠️ Breaking Changes
⚠️ Revitalize baked format (39b5220)
❤️ Contributors
- Steven John (@StevenJPx2)
v0.3.1
🩹 Fixes
- Move all working code to runtime/ fixes (#4)
📖 Documentation
- useLocomotive: Add component (1044f7b)
- useBendyWendyTransition, useOffsetTransition: Add component, composable (f870c50)
❤️ Contributors
- Steven John stevenjpx2@gmail.com
v0.3.0
✨ Highlights
Whew! That was a DOOOOZY.
Lots of changes here.
Everything is moved from separate folders (components, composables, directives) to single folders.
Main reason for this is because I noticed that the composables I built also had their component or baked counterparts.
So it would make more sense to keep everything in one place, along with their README for documentation.
Everything now, will be a LOT more organised and have more structure. Check out the docs webpage for more info.
🛠️ Changes
🚀 Enhancements
⚠️ Simplify runtime to single folder (55244cc)⚠️ Add separate components page, change naming scheme of custom transitions (368f6a0)
🩹 Fixes
- directives: Fix locations for baked (ec3afcd)
- Generic types are pushed to src (5fe16b5)
- Change directives location, move deps (8bb8467)
💅 Refactors
- baked: Move baked/ to utils (1319f96)
📖 Documentation
- Add vitepress-extras (e20fa6c)
⚠️ Breaking Changes
⚠️ Simplify runtime to single folder (55244cc)⚠️ Add separate components page, change naming scheme of custom transitions (368f6a0)
❤️ Contributors
- Steven John stevenjpx2@gmail.com
v0.2.0
✨ Highlights
Docs page
We have a new docs page! Check it out!
It is still a MASSIVE work in progress. So, please raise a PR or issue to sort anything out!
DIrectives
We've now added a baked option to each directive that uses it in its parent's composable.
We also now have v-from-to as the directive version of useGsap, and v-aos as the directive for useAnimateOnScroll.
Example
If your v-split-animate was this:
<div
v-split-animate="{
splitBy: 'words',
translate: true,
}"
>
Hello there!
</div>Change it to this:
<div
v-split-animate="{
baked: true,
options: {
splitBy: 'words',
translate: true,
},
}"
>
Hello there!
</div>Have a wonderful day! 😊
🚀 Enhancements
- useGenericTransition: Create 1-2-3 transitions (b59ff97)
- useGenericTransition: Simplify composable (a7b9268)
- docs: Add docs website (e5d2984)
⚠️ Change baked locations, add baked option to directive (9920cc6)
🩹 Fixes
- README: Image (adad27e)
📖 Documentation
- README: Add docs link (f9a4a7a)
- website: Make README as the vitepress pages (6685423)
- fix: Dead link (da55a42)
- index: Add link (169032c)
- vitepress: Complete auto-generate docs (0801d64)
- vitepress: Simplify route rewrite (ea6fd14)
- Add more (520e295)
- vitepress: GenerateSidebar function (bf0cf5b)
- vitepress: Add SEO (ead0671)
- index.md: Fix get started (4618634)
- README: Remove redundant documentation (bb5fc2b)
🏡 Chore
- README: Add banner (4728118)
⚠️ Breaking Changes
⚠️ Change baked locations, add baked option to directive (9920cc6)
❤️ Contributors
- Steven John stevenjpx2@gmail.com
v0.1.9
🚀 Enhancements
- useBakedTransition: Add new composable (369cfe5)
- useGenericTransition: Add composable for generic from-to transitions (0dbe5a1)
📖 Documentation
- useBakedTransition, useGenericTransition: Add tsdoc (267df27)
❤️ Contributors
- Steven John stevenjpx2@gmail.com
v0.1.8
🚀 Enhancements
- InfiniteMarquee: Add pauseOnHover and acceleration (bbb6309)
❤️ Contributors
- Steven John stevenjpx2@gmail.com
v0.1.7
🚀 Enhancements
- Add transition helpers, improve transition testing (6b7fa65)
- Do not reinvoke gsap functions on window resize (384a603)
🩹 Fixes
- docs: Fix structure (94ac318)
💅 Refactors
- Change location of composables, update docs (704a273)
❤️ Contributors
- Steven John stevenjpx2@gmail.com