Skip to content

Releases: StevenJPx2/nugget

v1.0.0-beta.2

16 May 13:21
Compare
Choose a tag to compare

compare changes

🚀 Enhancements

  • Add BakedPresetsArray to all baked functions, fix rotate crash (2de8b20)

🩹 Fixes

  • docs: Correct configuration (d53e11f)

❤️ Contributors

v1.0.0-beta.1

13 May 15:13
Compare
Choose a tag to compare

compare changes

🩹 Fixes

📖 Documentation

❤️ Contributors

v1.0.0-beta.0

13 May 14:39
Compare
Choose a tag to compare

✨ 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! 🎉

compare changes

🚀 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

⚠️ Breaking Changes

  • ⚠️ Revitalize baked format (39b5220)

❤️ Contributors

v0.3.1

22 Jan 06:12
Compare
Choose a tag to compare

compare changes

🩹 Fixes

  • Move all working code to runtime/ fixes (#4)

📖 Documentation

  • useLocomotive: Add component (1044f7b)
  • useBendyWendyTransition, useOffsetTransition: Add component, composable (f870c50)

❤️ Contributors

v0.3.0

19 Jan 18:38
Compare
Choose a tag to compare

✨ 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

compare 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

⚠️ Breaking Changes

  • ⚠️ Simplify runtime to single folder (55244cc)
  • ⚠️ Add separate components page, change naming scheme of custom transitions (368f6a0)

❤️ Contributors

v0.2.0

16 Jan 17:38
Compare
Choose a tag to compare

✨ 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!

Screenshot 2024-01-16 at 11 01 05 PM

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! 😊

compare changes

🚀 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

📖 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

⚠️ Breaking Changes

  • ⚠️ Change baked locations, add baked option to directive (9920cc6)

❤️ Contributors

v0.1.9

03 Jan 13:36
Compare
Choose a tag to compare

compare changes

🚀 Enhancements

  • useBakedTransition: Add new composable (369cfe5)
  • useGenericTransition: Add composable for generic from-to transitions (0dbe5a1)

📖 Documentation

  • useBakedTransition, useGenericTransition: Add tsdoc (267df27)

❤️ Contributors

v0.1.8

29 Dec 06:58
Compare
Choose a tag to compare

compare changes

🚀 Enhancements

  • InfiniteMarquee: Add pauseOnHover and acceleration (bbb6309)

❤️ Contributors

v0.1.7

07 Dec 13:33
Compare
Choose a tag to compare

compare changes

🚀 Enhancements

  • Add transition helpers, improve transition testing (6b7fa65)
  • Do not reinvoke gsap functions on window resize (384a603)

🩹 Fixes

💅 Refactors

  • Change location of composables, update docs (704a273)

❤️ Contributors

v0.1.6

01 Dec 13:52
Compare
Choose a tag to compare

compare changes

🩹 Fixes

  • useGsap: Fix types for timeline (140d184)

❤️ Contributors