Ionic ngIf animation - animation

I am working on a ionic application and added ngAnimations but this isn't running smooth because I set this animation on the state of the div and it appears when this.clicked = true;
Here is a link to a gif LINK to show you how it animates. It first shows below the current div and than when it disappears it is getting animated.
Here is the code of how I am doing it:
animations: [
trigger('itemState', [
state('void', style({
transform: 'translateX(-100%)'
})),
transition('* => void', animate('500ms ease-out')),
transition('void => *', animate('0.5s 500ms ease-out'))
])
]
The html:
<ion-scroll scrollX="true">
<div #itemState *ngIf="!clicked">
<div class="availability-btn-wrapper" *ngFor="let availableDaysBtn of availableDays" (click)="getDay(availableDaysBtn)">
<button ion-button round outline>{{ availableDaysBtn }}</button>
</div>
</div>
<div #itemState *ngIf="clicked">
<div class="availability-btn-wrapper" *ngFor="let availableTimeBtn of availableTimes" (click)="getTime(availableTimeBtn)">
<button ion-button round outline>{{ availableTimeBtn }}</button>
</div>
</div>
</ion-scroll>
How can I smoothly show the second horizontal button row?

Related

How do I write a vue popup modal that dynamically switches 2 additional vue components in tabs

What I am trying to do is to Design a new Vue/Inertia Login / Register modal on the frontend for the standard Vue scaffolding that comes with Laravel Breeze.
Exactly what I am trying to achieve is this:
Login / Register Button -> Clicked and a modal opens
The modal contains a header section where there is a "Login" tab and a "Register" tab, by default the login tab is selected. It then contains a body section that is a panel that switches between the "login.vue" file and the "register.vue" file.
It is from my understanding that I need to do the following:
Create a Vue file for the button that creates the modal that includes a vue file that houses the tabs and switching panel, that call the "Login" & "Register" Vue files.
I hope my understanding of the way that the Vue3.js framework handles things is correct.
I am very new to Laravel, and to Vue, so please bear with me.
My file structure is as follows
resources | js | Pages | Auth -> Login.vue (standard code in file)
resources | js | Pages | Auth -> Register.vue (standard code in file)
resources | js | Pages | Modal -> LoginRegister.vue
<script>
import Register from "./Auth/Register.vue";
import Login from "./Auth/Login";
export default {
data: function () {
return {
tabs: ["Login", "Register"],
selected: "Login",
};
},
components: {
Register,
Login,
},
};
</script>
<template>
<div>
<button
v-for="tab in tabs"
:key="tab"
#click="selected = tab;"
:class="['tab-btn', { active: selected === tab }]"
>
{{ tab }}
</button>
<component :is="selected" class="tab"></component>
</div>
</template>
or alternatively I have tried this code in the LoginRegister.vue too
<style>
.tab-btn {
padding: 6px 10px;
background: #ffffff;
cursor: pointer;
margin-bottom: 1rem;
border: 2px solid #cccccc;
outline: none;
}
.active {
border-bottom: 3px solid green;
background: whitesmoke;
}
.tab {
border: 1px solid #ccc;
padding: 10px;
}
</style>
<script>
import Login from "./Auth/Login.vue";
import Register from "./Auth/Register.vue";
import PrimaryButton from "#/Components/PrimaryButton.vue";
export default { components: { Login, Register } };
</script>
<template>
<div>
<PrimaryButton v-on:click="showModal = true"
>Login / Register</PrimaryButton
>
<modal v-if="showModal" #close="showModal = false">
<div
class="modal fade"
id="myModal"
tabindex="-1"
role="dialog"
aria-labelledby="LoginRegisterModal"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Login / Register</h4>
</div>
<div class="modal-body">
<ul class="nav nav-tabs">
<li role="presentation" class="active">
<a
href="#tab1"
aria-controls="home"
role="tab"
data-toggle="tab"
>Login</a
>
</li>
<li role="presentation">
<a
href="#tab2"
aria-controls="profile"
role="tab"
data-toggle="tab"
>Register</a
>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tab1">
<Login></Login>
</div>
<div role="tabpanel" class="tab-pane" id="tab2">
<Register></Register>
</div>
</div>
</div>
</div>
</div>
</div>
</modal>
</div>
</template>
I still have not worked out how to create a button that will launch this in a modal yet too, I know I am a long way off, but I would really appreciate guidance.
I found a solution which works well... the following code.
<script setup>
import { computed, onMounted, onUnmounted, watch } from 'vue';
const props = defineProps({
show: {
type: Boolean,
default: false,
},
maxWidth: {
type: String,
default: '2xl',
},
closeable: {
type: Boolean,
default: true,
},
});
const emit = defineEmits(['close']);
watch(() => props.show, () => {
if (props.show) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = null;
}
});
const close = () => {
if (props.closeable) {
emit('close');
}
};
const closeOnEscape = (e) => {
if (e.key === 'Escape' && props.show) {
close();
}
};
onMounted(() => document.addEventListener('keydown', closeOnEscape));
onUnmounted(() => {
document.removeEventListener('keydown', closeOnEscape);
document.body.style.overflow = null;
});
const maxWidthClass = computed(() => {
return {
'sm': 'sm:max-w-sm',
'md': 'sm:max-w-md',
'lg': 'sm:max-w-lg',
'xl': 'sm:max-w-xl',
'2xl': 'sm:max-w-2xl',
}[props.maxWidth];
});
</script>
<template>
<teleport to="body">
<transition leave-active-class="duration-200">
<div v-show="show" class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50" scroll-region>
<transition
enter-active-class="ease-out duration-300"
enter-from-class="opacity-0"
enter-to-class="opacity-100"
leave-active-class="ease-in duration-200"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<div v-show="show" class="fixed inset-0 transform transition-all" #click="close">
<div class="absolute inset-0 bg-gray-500 opacity-75" />
</div>
</transition>
<transition
enter-active-class="ease-out duration-300"
enter-from-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enter-to-class="opacity-100 translate-y-0 sm:scale-100"
leave-active-class="ease-in duration-200"
leave-from-class="opacity-100 translate-y-0 sm:scale-100"
leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<div v-show="show" class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto" :class="maxWidthClass">
<slot v-if="show" />
</div>
</transition>
</div>
</transition>
</teleport>
</template>
Then use headless ui for the switching tabs, works well.

break-inside not working in firefox (103.0 (64-bit)

page-break is not working in firefox
im using vue, vuetify
<div :class="groupLen() ? 'group' : 'min-group'" class="page-break">
<div v-for="(group, i) in components.groups" :key="`${i}a`">
<v-card style="border: thin solid #a80707;" class="pt-0 pa-3 grey lighten-2" rounded outlined>
<v-card-title class="pl-0">{{ group.name }}</v-card-title>
<div :class="$vuetify.breakpoint.name" class="pa-0">
<div v-for="(item, i) in group.items" :key="i">
<dynamic
:componentName="item.Widget"
:properties="item.properties"
/>
</div>
</div>
</v-card>
</div>
</div>
div.page-break div {
// -webkit-column-break-inside: avoid;
// page-break-inside: avoid;
break-inside: avoid;
padding-bottom: 0.5em;
}
screenshot from firefox
screenshot from brave

Error while making a multiselect using vue-select

I am using vue-select in my project along with tabulator. I was able to fetch data from json file and view it. But when selecting the options i get an error saying " Component emitted event "option:selecting" but it is neither declared in the emits option nor as an "onOption:selecting" prop. ". I could not resolve this error after multiple try. Below is the code.
**<template>
<form>
<div class="container h-25 w-10/12 mx-auto pb-3 border 2 border-gray-300 flex flex-col rounded-md items-left bg-gray-100" >
<label class="px-3 py-1 w-10/12 text-xs text-black font-medium">Employee</label>
<div class="px-2">
<v-select v-model="Selected" multiple :options="options" label="Employee" placeholder="---SELECT---" class="style-chooser"></v-select>
</div>
<!-- <span>Selected: {{ Employee_Id }}</span> -->
</div>
</form>
<!-- <ul><li v-for="item in datas" :key="item.Employee">{{ item.Employee }}</li></ul> -->
</template>
<script>
import dataset from './dataset.json'
export default {
data(){
return {
openCard: false,
Selected: ""
}
},
computed: {
options: () => dataset
},
methods:{
open(){
this.openCard = ! this.openCard
},
},
}
</script>**
Your help is highly appreciated la.

How to properly implement hover effect on icon links in Nuxt.js

I'm trying to implement a hover effect on an icon link for a component in a site built using Nuxt.js with Bootstrap 4. I've attempted using the #mouseover/#mouseenter and #mouseleave events to switch the src attribute from one icon image to another, but it doesn't cause a change unless the icon link is clicked. Does this have something to do with focus? Is there a better way to get the effect I want?
The component is below.
<template>
<b-row class="main-focus px-3 pt-3">
<b-col md="12" class="mb-4">
<h1 class="clr-t mb-4 px-2 pb-1 clr-brdr-btm">resume</h1>
<p class="drk-t pl-2">{{description[0].text}}</p>
<b-link
#mouseover="icon = 'assets/images/icons/resume-icon-clicked.svg'"
#mouseleave="icon = 'assets/images/icons/resume-icon.svg'"
:href="resume.url"
target="_blank"
>
<b-img
class="icon bg-lt"
v-bind="iconProps"
rounded
:src="icon"/>
</b-link>
</b-col>
</b-row>
</template>
<script>
export default {
props: {
description: Array,
resume: Object
},
data () {
return {
icon: 'assets/images/icons/resume-icon.svg',
iconProps: { width: 100 }
}
}
}
</script>
The above behaviour is because b-link supports only #click event as stated in docs.
You can achieve the functionality by wrapping b-link in a div as below.
<div #mouseover="icon = 'assets/images/icons/resume-icon-clicked.svg'"
#mouseleave="icon = 'assets/images/icons/resume-icon.svg'">
<b-link
:href="resume.url"
target="_blank"
>
<b-img
class="icon bg-lt"
v-bind="iconProps"
rounded
:src="icon"/>
</b-link>
</div>

Image onclick dialogue box?

I trying to get an image (cookie policy) that, once clicked, displays a dialog box informing that cookies are used on this website. I was hoping to use a jQuery dialogue box but it seem difficult.
Demo link: http://myfirststepsto.weebly.com/
The jQuery I would like to use: http://jqueryui.com/dialog/#default
<div id="oneout">
<span class="onetitle">
</span>
<div id="oneout_inner">
<centre>
<img src="https://dl.dropboxusercontent.com/u/89687987/mycookie.png" alt="cookie policy" />
</a>
<br></center></div></div>
I made a fiddle for you hope it helps! jsFiddle here
HTML:
<div id="oneout">
<span class="onetitle"></span>
<div id="oneout_inner">
<center>
<a><img id="opener" src="https://dl.dropboxusercontent.com/u/89687987/mycookie.png" alt="cookie policy" /></a>
<br>
</center>
</div>
</div>
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
Javascript:
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});

Resources