I have several component that I use in a component called QuickButton.vue:
<Tabs>
<TabPanels>
<TabPanel><EmployeesMainData/></TabPanel>
<TabPanel><ContactAddressData/></TabPanel>
<TabPanel><EmploymentData/></TabPanel>
<TabPanel><AdditionalData/></TabPanel>
</TabPanels>
<div>
<button type="submit" #click="signUp">Save</button>
</div>
</Tabs>
this is EmployeeMainData code:
<template>
<div class="col-span-6 sm:col-span-4">
<label for="email-address" class="block text-sm font-medium text-gray-700">Email address</label>
<input id="email-address" v-model="email" type="email" autocomplete="email" required
class="appearance-none rounded-md relative block w-full my-4 px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
placeholder="Email address">
<p class="mt-2 text-sm text-gray-500">*Required</p>
</div>
<div class="col-span-6 sm:col-span-4 mb-2">
<label for="password" class="block text-sm font-medium text-gray-700">Password</label>
<input id="password" v-model="password" type="text" required
class="appearance-none rounded-md relative block w-full my-4 px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
placeholder="Password">
<p class="mt-2 text-sm text-gray-500">*Required</p>
<p class="mt-2 text-sm text-gray-500">*Password is used for employee to login into their Android app. Save and share the password to the employee.</p>
</div>
</template>
How do I access email and password input using ref and script setup from QuickButton.vue? I already trying using defineExpose but didnt work
This chapter in the Vue docs contains information on v-model and using it with form input: https://vuejs.org/guide/essentials/forms.html. (Btw, the Vue docs are amazing! If you want to level up fast, review it a chapter or two at a time :).
Related
I modify the tailwind elements carousel with two columns left column with content and a right column with image. All functionality is correct but the problem is responsivity.
How can I modify this carousel so that I change the resolution to md or sm I get columns vertical?
I tried to do flex flex-row and when i change the resolution to md or sm to be flex flex-col and nothing changed the same with grid grid-cols-2 and after changing to md and sm to grid-cols-1
This is my code
<div id="carouselExampleCaptions" class="carousel slide relative" data-bs-ride="carousel">
<div class="carousel-indicators absolute right-0 bottom-0 left-0 flex justify-center p-0 mb-4">
<button
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="0"
class="active"
aria-current="true"
aria-label="Slide 1"
></button>
<button
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="1"
aria-label="Slide 2"
></button>
<button
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="2"
aria-label="Slide 3"
></button>
</div>
<div class="carousel-inner relative w-full overflow-hidden">
<div class="carousel-item active relative float-left w-full">
<img
src="https://mdbootstrap.com/img/Photos/Slides/img%20(15).jpg"
class="block w-1/4 h-96 float-right mr-80"
alt="..."
/>
<div class="carousel-caption hidden md:block absolute text-left h-96 ">
<h1 class="font-bold text-4xl lg:text-6xl text-blue-900 leading-tight font-poppins pb-4 ">SOME TEXT</h1>
<p class="text-gray-500">Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item relative float-left w-full">
<img
src="https://mdbootstrap.com/img/Photos/Slides/img%20(22).jpg"
class="block w-1/4 h-96 float-right mr-80"
alt="..."
/>
<div class="carousel-caption hidden md:block absolute text-left h-96">
<h1 class="font-bold text-4xl lg:text-6xl text-blue-900 leading-tight font-poppins pb-4">SOME TEXT 1</h1>
<p class="text-gray-500">Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item relative float-left w-full">
<img
src="https://mdbootstrap.com/img/Photos/Slides/img%20(23).jpg"
class="block w-1/4 h-96 float-right mr-80"
alt="..."
/>
<div class="carousel-caption hidden md:block absolute text-left h-96">
<h1 class="font-bold text-4xl lg:text-6xl text-blue-900 leading-tight font-poppins pb-4">SOME TEXT 2</h1>
<p class="text-gray-500">Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button
class="carousel-control-prev absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline left-0 text-black"
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide="prev"
>
<span class="carousel-control-prev-icon inline-block bg-no-repeat" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button
class="carousel-control-next absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline right-0 text-black"
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide="next"
>
<span class="carousel-control-next-icon inline-block bg-no-repeat" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
I have a multi-step form. This is the first step in the form. Using Vee-Validate, I am trying to figure out how I would prevent the next button from being clickable before the form is valid. This is Fee-Validate 4 Vue 3
FORM:
<Form action="#" #submit="submit" method="POST" class="overflow-hidden space-y-6 pt-3">
<div v-if="formStep == 1">
<div>
<div class="relative border border-gray-500 rounded-md px-3 py-2 shadow-sm focus-within:ring-1 focus-within:ring-blue-600 focus-within:border-blue-600 ">
<label for="name" value="Name" class="absolute -top-2 left-2 -mt-px inline-block px-1 bg-gray-900 text-sm font-medium text-gray-50">Username</label>
<Field
#keydown.space.prevent
type="text"
autocomplete="username"
name="name"
id="name"
v-model="form.name"
:rules="validateUsername"
required
autofocus
class="bg-gray-900 text-white block w-full border-0 p-0 placeholder-gray-500 focus:ring-0 sm:text-sm"
placeholder=""
/>
</div>
<ErrorMessage name="name" class="text-red-500 mt-2" />
</div>
<div class="mt-6">
<div class="relative border border-gray-500 rounded-md px-3 py-2 shadow-sm focus-within:ring-1 focus-within:ring-blue-600 focus-within:border-blue-600">
<label for="email" value="Email" class="absolute -top-2 left-2 -mt-px inline-block px-1 bg-gray-900 text-sm font-medium text-gray-50">Email Address</label>
<Field
id="email"
name="email"
type="email"
autocomplete="email"
v-model="form.email"
:rules="validateEmail"
required
autofocus
class="bg-gray-900 text-white block w-full border-0 p-0 placeholder-gray-500 focus:ring-0 sm:text-sm"
placeholder=""
/>
</div>
<ErrorMessage name="email" class="text-red-500 mt-2" />
</div>
<div class="mt-6">
<div class="relative border border-gray-500 rounded-md px-3 py-2 shadow-sm focus-within:ring-1 focus-within:ring-blue-600 focus-within:border-blue-600">
<label for="password" value="Password" class="absolute -top-2 left-2 -mt-px inline-block px-1 bg-gray-900 text-sm font-medium text-gray-50">Password</label>
<Field
id="password"
name="password"
type="password"
v-model="form.password"
required
autocomplete="new-password"
:rules="validatePassword"
validateOnInput
class="bg-gray-900 text-white block w-full border-0 p-0 placeholder-gray-500 focus:ring-0 sm:text-sm"
placeholder=""
/>
</div>
<ErrorMessage name="password" class="text-red-500 mt-2" />
</div>
<div class="mt-6">
<div class="relative border border-gray-500 rounded-md px-3 py-2 shadow-sm focus-within:ring-1 focus-within:ring-blue-600 focus-within:border-blue-600">
<label for="password_confirmation" value="Confirm Password" class="absolute -top-2 left-2 -mt-px inline-block px-1 bg-gray-900 text-sm font-medium text-gray-50">Confirm Password</label>
<Field
id="password_confirmation"
name="password_confirmation"
type="password"
v-model="form.password_confirmation"
required
autocomplete="new-password"
class="bg-gray-900 text-white block w-full border-0 p-0 placeholder-gray-500 focus:ring-0 sm:text-sm"
placeholder=""
/>
</div>
<div v-if="form.password != form.password_confirmation">
<p class="text-sm text-red-500 mt-2">Passwords do not match</p>
</div>
</div>
</div>
<div>
<div v-if="formStep == 1">
<button type="button" #click="[nextStep(), locatorButtonPressed(), getStreetAddressFrom(this.form.user_latitude, this.form.user_longitude)] " class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">Next</button>
</div>
</Form>
Where I am not sure is do I create a new method for this, or does vee-validate have some function I am not understanding within their documentation. Is there a reason to use Yup to make this work or am I just off the ball on this one altogether?
Also, Is there a way to make the button gray until the form is valid. I am using Tailwind 3
I am currently working in PhpStorm and closed the project yesterday evening as usual, as well as started it as usual today.
But now when I type CSS code I don't get any recommendations / auto completion suggestions.
The only difference is that I have a new keyboard today, everything else is the same as yesterday.
Edit:
Here is a screenshot as requested:
It doesn't work in one specific file, in the other files it is working fine, here is the file where it doesn't work:
#extends('layouts.app')
#section('content')
<div class="flex justify-center ">
<div class="w-11/12 bg-gray-400 p-6 rounded-lg font-serif text-4xl font-bold bg-opacity-70 subpixel-antialiased tracking-wide not-italic">
<div class="p-10 shadow-2xl mb-10 bg-gradient-to-r from-green-400 to-blue-500 border-solid border-2 border-black rounded-lg">
<div class="bg-gray-100 shadow-2xl border-solid border-2 border-gray-500 rounded-lg">
<h1 class="pt-2 pl-4 text-4xl font-bold text-gray-900 title-font mb-8 underline">
{{ $post->Titel }}
</h1>
<div class="flex-grow">
<div>
<div class="pt-2 pl-4 pb-3 ml-8 font-medium text-base font-bold font-serif"> Standort: {{ $post->Standort }}</div>
<div class="pt-2 pl-4 pb-3 ml-8 font-medium text-base font-bold font-serif"> Kontakt: {{ $post->Kontakt }}</div>
<div class="pt-2 pl-4 pb-3 ml-8 font-medium text-base font-bold font-serif"> Startdatum: {{ $post->startdate }}</div>
<div class="pt-2 pl-4 pb-3 ml-8 font-medium text-base font-bold font-serif mb-8"> Enddatum: {{ $post->enddate }}</div>
<div class="flex-grow ml-5 ml-8 mb-5 content md:w-3/4 pr-4 text-lg text-justify tracking-widest leading-loose mr-7 subpixel-antialiased">
{!! $post->Beschreibung !!}
</div>
</div>
</div>
<div class="pt-2 pl-4 mb-2 ml-8 font-medium text-base font-bold font-serif"> Referenzcode: {{ $post->id }}</div>
<div class="flex justify-end font-medium text-base font-bold font-serif mb-5 ml-8 mr-8">
<a href="{{ route('bewerben', $post->id) }}">
<button type="submit" class="text-white px-4 py-3 rounded text-base font-medium
bg-gradient-to-r from-green-400 to-blue-500 float-right shadow transition
duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100">Direkt bewerben!
</button>
</a>
</div>
</div>
</div>
</div>
</div>
#endsection
I see that the TailwindCSS checked: variant can be enabled to change the input element when checked, but how can I change the input's label when checked?
Here is the relevant Tailwind CSS docs.
Sample code below.
After enabling the variant in tailwind.config.js, putting checked:bg-green-300 in the div or the label doesn't work. It only works in the input.
<div>
<label>
<input checked type="radio" name="option1" id="option1" className="hidden" />
<div>option1</div>
</label>
<label>
<input checked type="radio" name="option2" id="option1" className="hidden" />
<div>option2</div>
</label>
</div>
EDIT: as version 2.2+ was released it has built-in support for sibling selector variants called peer (watch updates release)
This feature is only available in Just-in-Time mode.
<label>
<input checked type="radio" name="option" id="option1" class="hidden peer" />
<div class="peer-checked:bg-red-600">option1</div>
</label>
For versions bellow 2.2:
You need to write your own plugin for adding new variant. Mor info here
For example, let name it label-checked
tailwind.config.js
const plugin = require('tailwindcss/plugin');
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {},
variants: {
extend: {
backgroundColor: ['label-checked'], // you need add new variant to a property you want to extend
},
},
plugins: [
plugin(({ addVariant, e }) => {
addVariant('label-checked', ({ modifySelectors, separator }) => {
modifySelectors(
({ className }) => {
const eClassName = e(`label-checked${separator}${className}`); // escape class
const yourSelector = 'input[type="radio"]'; // your input selector. Could be any
return `${yourSelector}:checked ~ .${eClassName}`; // ~ - CSS selector for siblings
}
)
})
}),
],
};
This configuration should work for next cases (We extended backgroundColor, so it should work with bg-color classes):
1 - label is the wrapper, it's text should wrapped in any selector (in this case div)
<label>
<input checked type="radio" name="option1" id="option1" class="hidden" />
<div class="label-checked:bg-red-600">option1</div>
</label>
2 - label after input
<input checked type="radio" name="option1" id="option1" class="hidden" />
<label for="option-1" class="label-checked:bg-red-600"></label>
DEMO - https://play.tailwindcss.com/SEQ4NRpPV3
Use the peer class as per the tailwind 2.2.0
<input type="checkbox" name="themeToggler" id="themeToggler" class="peer" />
<label for="themeToggler" class="w-10 h-10 bg-gray-400 peer-checked:bg-red-400"></label>
DEMO
Tailwind's peer class is the modern way to solve this.
You can add peer behavior by adding two classes to the HTML.
Add the peer class to the HTML tag you want to observe the state for.
Add the peer-checked class, followed by the desired behavior change, to a sibling element.
See a detailed example here
In Tailwind CSS 3.0 you can create custom radio button like this
<div class="p-3 h-screen w-full flex justify-center items-center bg-black">
<div class="w-full">
<div class="flex">
<p class="text-[20px] text-white">Which of the following is an asian country?</p>
</div>
<div class="md:grid grid-cols-12 gap-3 pb-4 w-full">
<div className="col-span-6">
<div class="w-full">
<input id="default-radio-1" type="radio" value="" name="default-radio" class="peer opacity-0 w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="default-radio-1" class="flex cursor-pointer bg-gray-200 justify-center items-center h-10 w-full peer-checked:bg-rose-500 peer-checked:text-white text-[17px] text-sm font-medium text-gray-900 dark:text-gray-300">India</label>
</div>
</div>
<div className="col-span-6">
<div class="w-full">
<input id="default-radio-2" type="radio" value="" name="default-radio" class="peer opacity-0 w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="default-radio-2" class="flex cursor-pointer bg-gray-200 justify-center items-center h-10 w-full peer-checked:bg-rose-500 peer-checked:text-white text-[17px] text-sm font-medium text-gray-900 dark:text-gray-300">Australia</label>
</div>
</div>
<div className="col-span-6">
<div class="w-full">
<input id="default-radio-3" type="radio" value="" name="default-radio" class="peer opacity-0 w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="default-radio-3" class="flex cursor-pointer bg-gray-200 justify-center items-center h-10 w-full peer-checked:bg-rose-500 peer-checked:text-white text-[17px] text-sm font-medium text-gray-900 dark:text-gray-300">USA</label>
</div>
</div>
<div className="col-span-6">
<div class="w-full">
<input id="default-radio-4" type="radio" value="" name="default-radio" class="peer opacity-0 w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="default-radio-4" class="flex cursor-pointer bg-gray-200 justify-center items-center h-10 w-full peer-checked:bg-rose-500 peer-checked:text-white text-[17px] text-sm font-medium text-gray-900 dark:text-gray-300">Germany</label>
</div>
</div>
</div>
</div>
Checkout this running example - https://bbbootstrap.com/snippets/custom-radio-button-91048657
so I'm attempting to use the Twitch API to enable users to sign in using the Twitch API, however, I'm running into some issues
Here is the code I have so far
<template>
<section>
<form class="pt-6 pb-8 animated fadeIn" style="outline:none" #submit.prevent="signIn">
<section class="mb-4">
<label class="block text-grey-darker text-sm font-bold mb-2" for="email">
Email
</label>
<input class="shadow hover:shadow-md bg-transparent appearance-none border-2 border-grey rounded w-full py-2 px-3 text-grey-darker"
style="outline:none" type="email" v-model="email" placeholder="demo#example.co.uk">
</section>
<section class="mb-6">
<label class="block text-grey-darker text-sm font-bold mb-2" for="password">
Password
</label>
<input class="shadow hover:shadow-md bg-transparent appearance-none border-2 border-grey rounded w-full py-2 px-3 text-grey-darker"
style="outline:none" type="password" v-model="password" placeholder="********">
</section>
<section class="flex items-center justify-between">
<button class="bg-grey-darker hover:bg-grey-darkest w-full text-white font-semibold py-3 px-4 border rounded-sm shadow" style="outline:none">
Sign In
</button>
</section>
<a class="flex justify-center pt-6 pb-px font-semibold text-sm text-grey hover:text-green-darker" href="#sign-up">
Create an account
</a>
<a class="flex justify-center font-semibold text-sm text-grey hover:text-green-darker" href="#forgot-password">
Forgot Password?
</a>
</form>
<button class="twitch flex justify-center absolute pin-l items-center p-8 uppercase text-white font-semibold tracking-wide w-full" #click="twitch">
<i class="fab fa-twitch pr-2 text-xl"></i> Sign in with Twitch
</button>
</section>
</template>
<script>
import firebase from '#/middleware/firebase'
import axios from 'axios'
export default {
data: function () {
return {
email: '',
password: ''
}
},
methods: {
signIn () {
firebase.auth().signInWithEmailAndPassword(this.email, this.password),
console.log('Signed in with ' + this.email)
},
twitch: function () {
return axios.get(
'https://id.twitch.tv/oauth2/authorize?response_type=code&client_id=<KEY>&redirect_uri=http://localhost:3000&scope=chat_login'
).then(res => {
console.log(res)
})
}
}
}
</script>
I'm not sure what I'm doing wrong here, at the moment I just want to console log the response then I'll go from there.
Any help is appreciated!
Your problem is about CORS (see https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS).
You are try to reach a resource from a domain to another domain, which is only possible if expicitly allowed.