Recently, I decided to create a drawer component using headlessui/vue and tailwindcss.
While browsing the headless ui documentation for vuejs, I could not find any examples of a drawer component. So, I took it upon myself to create one using the headlessui/vue dialog component.
If you're looking to create a simple drawer with transition effects, consider using the headlessui/vue dialog and transition components.
<template>
<TransitionRoot appear :show="showDrawer" as="template">
<Dialog
as="div"
@close="$emit('closeDrawer')"
class="relative z-10 lg:hidden"
>
<TransitionChild
as="template"
enter="duration-300 ease-out"
enter-from="opacity-0"
enter-to="opacity-100"
leave="duration-200 ease-in"
leave-from="opacity-100"
leave-to="opacity-0"
>
<!-- Add a backdrop for the drawer -->
<div class="fixed inset-0 bg-black/50 z-[100]" />
</TransitionChild>
<div class="fixed inset-0 overflow-y-auto z-[101]">
<div class="h-full w-full flex items-start gap-4 justify-end">
<!-- Apply sliding animation for the drawer from the right -->
<TransitionChild
as="template"
enter="duration-300 ease-out"
enter-from="opacity-0 translate-x-full"
enter-to="opacity-100 translate-x-0"
leave="duration-200 ease-in"
leave-from="opacity-100 translate-x-0"
leave-to="opacity-0 translate-x-full"
>
<DialogPanel
class="max-w-md transform overflow-hidden bg-white p-6 text-left align-middle shadow-xl transition-all h-full w-[300px] ml-auto relative"
>
<button
type="button"
@click="$emit('closeDrawer')"
class="size-7 inline-flex items-center justify-center bg-gray-100 rounded transition-transform absolute top-2 left-2"
>
<icon-x height="24" width="24" />
</button>
<div>Place your drawer content here</div>
</DialogPanel>
</TransitionChild>
</div>
</div>
</Dialog>
</TransitionRoot>
</template>
<script setup>
import {
TransitionRoot,
TransitionChild,
Dialog,
DialogPanel,
} from '@headlessui/vue';
// Emit events
defineEmits(['closeDrawer']);
// Define properties
defineProps({
showDrawer: {
type: Boolean,
},
});
</script>
How can I resolve the error 'Property 'name' does not exist on type' in TypeScript? Here is the code block : **Environment.prod.ts** export const environment = { production: true, name:"(Production)", apiUrl: 'https://tes ...
I am currently using Laravel 5.4 for my backend and Vue.js for the frontend of my project. I am trying to pass values from Vue to the controller to store data, however, on checking the console, an error is being displayed. The warning about automaticall ...
Below is the Javascript code I am currently using: document.getElementById("button").disabled = true; document.getElementById("button").innerHTML = "Please Wait..."; var xhttp = new XMLHttpRequest(); xhttp.open("GET", "MoodInput"+ "?moodValue=" + input, ...
I am working on a project that involves an HTML table performing calculations using jQuery and knockout.js. My idea is to organize this content into a template and load it once on the page load event. This template would be displayed within a tabbed contai ...
I have successfully displayed a PDF file from my database as a blob using the header("Content-type:application/pdf") method. Now, I am looking to also display some additional string results along with this PDF file. Is it feasible to achieve this while d ...
I have created a script that changes the class of a link on click to class2 and triggers the event for class2 instead of class1. Is there an alternative method to accomplish this without manually checking for the new class and then triggering the event? H ...
I am looking to implement form validation using the jquery validate plugin, but I am facing an issue with using the 'name' attribute in the html since it is also used by the server application. Specifically, I want to restrict the number of check ...
This code snippet demonstrates how to find the maximum height using jQuery. The $.fn. syntax is utilized to add this method as a jQuery Plugin. $.Map() creates a new array. Math.Max.Apply retrieves the max number from an array. $.fn.t ...
I need to run specific test code in my Quasar project without running all tests. I've tried using the following commands, but they still run all test files. quasar test --unit jest -t "demo/demo.spec.js" quasar test --unit jest --spec "demo/demo.spec ...
I have one object: var myobject = {first: 1, second: {test: 90}, third: [10, 20]}; and I need to convert it into a JSON string using jQuery ajax. Can someone please advise on how to achieve this? (I tried using JSON.stringify(), but it didn't work ...
I'm struggling with retrieving the content of my table cells. Some cells contain a hyphen (-) and if they do, I want to center the text. I'm facing difficulties with my jQuery code, particularly the if statement which always evaluates to false. ...
I'm currently in the process of developing a vuejs component library that utilizes vuetify 2.1.4 and attempting to import it into another application locally through npm link. However, I'm encountering numerous errors such as TypeError: Cannot ...
Currently, I am utilizing a for-loop to retrieve all of my posts, followed by employing a partial to obtain a list of all the usersThatUpvoted on that post. <div v-for="p in posts" style="padding: 16px"> <div> &l ...
I have a server running and serving an HTML page, but I am trying to display an image from a local drive on a Linux machine. I've tried using file://.., but it doesn't seem to be working for me on Ubuntu 18.04. There are no errors, the img tag ju ...
The clearInterval function is not working properly in this code. What can be done to fix this issue? var inter; ipcMain.on("start-stop",(err,data)=>{ console.log(data.data) function start(){ inter = setInterval(fu ...
My current challenge involves creating a login using Facebook. The console indicates that the requested data (email, first_name, etc.) is being retrieved successfully, but for some reason, the AJAX request keeps sending null data to the PHP method. Below ...
I am trying to achieve a specific effect where all instances of a mesh face the camera. uniform vec2 size; uniform vec3 center; vec3 billboard(vec3 v, mat4 view) { vec3 up = vec3(view[0][1], view[1][1], view[2][1]); vec3 right = vec3(view[0][0], ...
I am attempting to input values into HTML textboxes inside a gridview when they lose focus using jQuery's onchange="return function()". I would like to determine which row of the table it is in and retrieve the detailed values of the entire cell. Any ...
Looking for assistance with an unusual issue in my JavaScript/jQuery code. The jQuery .change() function on a simple text input element only triggers when I click somewhere on the page, open the Chrome console, or press a key on the keyboard. It doesn&apo ...
I'm currently developing an application that simulates desktop-style application windows with the ability to open, minimize, and close. While I have successfully implemented the functionality to expand and collapse these windows, I am facing difficult ...