mouseup event alpine js - onclick

Is there any mouseup event in alpinejs?
#click.away is not suitable, because you actually need to click somewhere else.
And in my case one event should be triggered when button is pressed and another when mousekey is released no matter where courser is.
Update:
Right now I have this code:
<div x-data="{ buttonPresed: false }">
<button
#click=" buttonPresed = true "
class="h-10 w-40 border rounded-lg bg-white text-black font-bold">Some Button</button>
<div x-show=" buttonPresed === true " class="text-lg text-white font-bold">Button pressed</div>
</div>
Text "Button pressed" is shown after the button is pressed.
I need it to be hided (buttonPresed=false) when mouse button is released.
So text is only shown when user's finger on the mouse button.
How can I do this?

You can use any DOM events with Alpine.js's x-on:[event-name] or #[event-name] in this case x-on:mouseup="console.log($event)" or #mouseup="console.log($event)" will log the mouseup event when it's triggered.

Even though #Hugo partly answered my question I decided to write a complete answer.
<div x-data="{ buttonPresed: false }">
<button
x-on:mouseup="buttonPresed=false"
x-on:mousedown="buttonPresed = true"
{{-- don't use!!!!!: #click=" buttonPresed = true " --}}
class="h-10 w-40 border rounded-lg bg-white text-black font-bold">Some Button</button>
<div x-show=" buttonPresed === true " class="text-lg text-white font-bold">Button pressed</div>
</div>
The commented part is very important, because the functionality works how it should work only if both events triggered with "x-on".

Related

Tailwind Button ignoring background colour

I have a laravel component for a submit button in Tailwind.
The button code is:
<div class="{{ $position }} mt-4">
<button type="submit"
class="inline-flex items-center h-10 px-5 text-indigo-100 bg-indigo-600 rounded-lg focus:shadow-outline hover:bg-indigo-800" style="{{ addShadow() }}"
#if (!empty($onClick))
onclick="{{ $onClick }}"
#endif
>
#fas('{{ $icon }}')
<span class="ml-2">{{ $label }}</span>
</button>
The things like position, icon, label, onclick are passed in OK.
My problem is that unless the mouse is over the button it deos not really appear as can be seen from the image attach. The first shows as the page opens and the second is as the mouse is over.
I simply cannot get this to work!
I normally actually upload and test in an online area, but with the new Laravel Vite changes are not made. If this is done in localhost and then uploaded the app.css etc it works.

tailwind css custom class passed as props is not overriding the already applied class

I am using tailwind classes and below is my code. some people suggested to use classNames so used that as well, so similar code in both the newer and older format
const backgroundColor = disabled ? "bg-secondary-500" : "bg-green-700";
className={classNames(
"w-20 my-2 p-2 text-white rounded capitalize hover:ease-in hover:scale-110 hover:duration-200",
customClass,
backgroundColor,
{ "pointer-events-none": true }
)}
className={`w-20 my-2 p-2 text-white bg-green-700 rounded capitalize
hover:ease-in hover:scale-110 hover:duration-200
${disabled ? "pointer-events-none bg-secondary-500" : ""}
${customClass}`}
so in my customClass I have "w-60". but "w-20" is only getting applied. even it is happening for "bg-green-700" and I wanted it to be "bg-secondary-500" for disabled: true
so my disabled is coming as true and pointer-event-none is getting applied but secondary class is overridden by green class
I checked the DOM and both the bg class and both the width classes are available in the below order
<button class="w-20 my-2 p-2 text-white bg-green-700 rounded capitalize
hover:ease-in hover:scale-110 hover:duration-200 w-60
bg-secondary-500 pointer-events-none">View Docs
</button>
so if anyone has any idea this is happening, please help
For merging Tailwind classes use https://github.com/dcastil/tailwind-merge instead of classNames
import { twMerge } from 'tailwind-merge'
// ...
className={twMerge(
"w-20 my-2 p-2 text-white bg-green-700 rounded capitalize hover:ease-in hover:scale-110 hover:duration-200",
disabled && "pointer-events-none bg-secondary-500",
customClass
)}
Here if I understood correctly , you want bg-secondary-500 when button is disabled. This can be done by this
className={`w-20 my-2 p-2 text-white rounded capitalize
hover:ease-in hover:scale-110 hover:duration-200
${disabled ? "pointer-events-none bg-secondary-500" : "bg-green-500 pointer-events-auto"}
`}
However you need to add any condtion if you want to change from w-20 to w-60. Else simply use w-60.

Styles not applying to button using tailwiind and next.js

<button disabled={!session}
className={`button mt-2 ${!session && "from-gray-300 to-gray-500 border-gray-200 text-gray-300 cursor-not-allowed"}`}>
{!session ? 'Sign In to checkout' : 'Proceed to checkout'}
</button>
This is the code for it
Expected a gray background with a disabled button but got the following output -
This is the picture

Animating a list when it gets re-rendered using framer-motion

I'm trying to animate the list of cards when it gets re-rendered with a different values (i.e , Popular movies to Searched movies)
I followed the documentation of framer-motion and gave the parent div and the child div the Layout property yet nothing seems to change or happen.
If there's a different way of animating this I would love to hear
I've added the code here below :
the parent div :
<motion.div Layout className='movie-container'>
{movie.map((moviee) => (
<MoviePreview
moviee={moviee}
setFavorites={setFavorites}
favorites={favorites}
setTrailer={setTrailer}
setTrailerWindow={setTrailerWindow}
/>
))}
</motion.div>
the child div :
<motion.div Layout className='movie-card-container'>
<article className='movie-card'>
<h3>{moviee.title} </h3>
<div className='trailer-favorite'>
<button onClick={(e) => onHandleTrailer(moviee.id)} className='trailer-btn'>
Watch Trailer
</button>
<button onClick={() => addFavorite(moviee)} className='heart'>
💗
</button>
</div>
<img src={`https://image.tmdb.org/t/p/w500/${moviee.poster_path}`}></img>
<div className='movie-overview'>
<p>{!moviee.overview ? 'No description available.' : moviee.overview}</p>
</div>
</article>
</motion.div>
Thanks for any kind of help!

Wrap tag around a certain number of elements in grid

So currently I have this functionality where I have a Component that uploads images, and it takes up the full width.
But when I click it, the view becomes a grid-view with two columns, where my component now resizes to fill the first row, first column, while the images uploaded will take up the other spaces (so starting from first row, second column -- then second row, first column and so on.
So my problem is now that I want my images to be draggable, which is wrapped around in a draggable tag, but how can I do this but maintain it for just the images?
My code is as follows (I'm using tailwindCSS and Vue btw):
<div>
<draggable v-model="images" v-bind="dragOptions" draggable=".item">
<transition-group
:class="
images.length == 0 ? '' : 'grid sm:grid-cols-4 grid-cols-2 gap-4'
"
>
<ImageUploader
#addImage="addImage"
ref="deleteRef"
:key="'uploader'"
:shouldShowLabel="images.length != 0"
:class="images.length == 0 ? 'mt-4 flex-grow' : 'flex'"
/>
<div
v-for="image in images"
:key="image.url"
#click="deleteImage(image)"
:class="'item'"
class="cursor-pointer p-2 shadow-lg rounded-md "
>
<figure class="image overflow-hidden relative cursor-pointer">
<img
:src="image.url"
:width="image.width"
:height="image.height"
alt=""
/>
</figure>
</div>
</transition-group>
</draggable>
</div>
I have some images to illustrate:
Before Upload:
After Upload:
So the thing is when I shift my images, my images array will have an undefined element, which I suspect to be from the ImageUploader component. Is there any way I can take it out so it is not draggable (so the images array will not be corrupted?). Right now I'm making my ImageUploader Component not draggable by using a different key, but yeah.
TLDR: I need my view to look like a grid with 2 columns, but i only want my elements after the first one to be wrapped in my vue draggable so they can be dragged except for the first element.
Much appreciated!!
I'm not really sure what you mean. But to my understanding you don't want your <ImageUploader/> component to be draggable?
Try moving it outside of the draggable component. :)
<div>
<ImageUploader
#addImage="addImage"
ref="deleteRef"
:key="'uploader'"
:shouldShowLabel="images.length != 0"
:class="images.length == 0 ? 'mt-4 flex-grow' : 'flex'"
/>
<draggable v-model="images" v-bind="dragOptions" draggable=".item">
<transition-group
:class="
images.length == 0 ? '' : 'grid sm:grid-cols-4 grid-cols-2 gap-4'
"
>
<div
v-for="image in images"
:key="image.url"
#click="deleteImage(image)"
:class="'item'"
class="cursor-pointer p-2 shadow-lg rounded-md "
>
<figure class="image overflow-hidden relative cursor-pointer">
<img
:src="image.url"
:width="image.width"
:height="image.height"
alt=""
/>
</figure>
</div>
</transition-group>
</draggable>
</div>

Resources