- Converting all to Typescript
- Installing 1.0.0.beta Quasar Upgrade - (Part 1 - Upgrade Components)
This commit is contained in:
Paolo Arena
@@ -2,8 +2,9 @@
|
||||
<div id="firebaseui-auth-container"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
<script lang="ts" >
|
||||
import Vue from 'vue'
|
||||
export default Vue.extend({
|
||||
name: 'auth',
|
||||
mounted () {
|
||||
var uiConfig = {
|
||||
@@ -16,7 +17,7 @@
|
||||
//var ui = new firebaseui.auth.AuthUI(firebase.auth())
|
||||
//ui.start('#firebaseui-auth-container', uiConfig)
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="css">
|
||||
|
||||
@@ -13,8 +13,9 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
<script lang="ts" >
|
||||
import Vue from 'vue'
|
||||
export default Vue.extend({
|
||||
data () {
|
||||
return {
|
||||
photo: '',
|
||||
@@ -27,5 +28,5 @@
|
||||
created () {
|
||||
|
||||
},
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -24,8 +24,9 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
<script lang="ts" type="text/javascript">
|
||||
import Vue from 'vue'
|
||||
export default Vue.extend({
|
||||
data () {
|
||||
return {
|
||||
canGoBack: window.history.length > 1
|
||||
@@ -36,7 +37,7 @@ export default {
|
||||
window.history.go(-1)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
|
||||
@@ -1,96 +0,0 @@
|
||||
<template>
|
||||
<div class="card bg-white">
|
||||
<div class="card-title bg-teal text-white">
|
||||
{{cardTitle}}
|
||||
<div class=" float-right">
|
||||
<q-fab icon="keyboard_arrow_left" direction="left" classNames="primary">
|
||||
</q-fab>
|
||||
<button class="primary circular raised gt-sm inline" @click="toImage()">
|
||||
<i>portrait</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<canvas ref="chart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/javascript">
|
||||
/* eslint-disable */
|
||||
import Chart from 'chart.js'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
type: 'horizontalBar',
|
||||
chart: '',
|
||||
}
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
cardTitle: {
|
||||
default () { return 'Graph'}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data () {
|
||||
this.startChart()
|
||||
},
|
||||
type () {
|
||||
this.chart.destroy()
|
||||
this.startChart()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dataForChart () {
|
||||
return {
|
||||
labels: Object.keys(this.data),
|
||||
datasets: [{
|
||||
data: Object.values(this.data),
|
||||
backgroundColor: [
|
||||
'rgba(255, 99, 132, 1)',
|
||||
'rgba(54, 162, 235, 1)',
|
||||
'rgba(255, 206, 86, 1)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgba(255,99,132,1)',
|
||||
'rgba(54, 162, 235, 1)',
|
||||
'rgba(255, 206, 86, 1)'
|
||||
]
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
startChart () {
|
||||
let axesStartFromZero = [{
|
||||
ticks: {
|
||||
beginAtZero:true
|
||||
}
|
||||
}]
|
||||
this.chart = new Chart(this.$refs.chart,
|
||||
{
|
||||
type: this.type,
|
||||
data: this.dataForChart,
|
||||
options: {
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
scales: {
|
||||
yAxes: axesStartFromZero,
|
||||
xAxes: axesStartFromZero
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
toImage () {
|
||||
window.open(this.chart.toBase64Image());
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,75 +0,0 @@
|
||||
<template>
|
||||
<div class="card bg-white">
|
||||
<div class="card-title bg-teal text-white">
|
||||
{{cardTitle}}
|
||||
<div class=" float-right">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="flex">
|
||||
<div class="list item-inset-delimiter auto">
|
||||
<q-infinite-scroll :handler="loadMore" :offset="7">
|
||||
<!-- Content, in this case some <p> tags -->
|
||||
<div class="item" v-for="(todo, index) in showingData">
|
||||
<div class="item-primary">{{index + 1}}</div>
|
||||
<div class="item-content has-secondary">
|
||||
<span v-show="todo.completed" class="completed-line">{{todo.title}}</span>
|
||||
<input v-show="!todo.completed" v-model.lazy="todo.title" class="fit" @change="changeTitle(todo)">
|
||||
</div>
|
||||
<q-toggle class="item-secondary"
|
||||
icon="done"
|
||||
@input="completeTodo(todo)"
|
||||
v-model="todo.completed"
|
||||
></q-toggle>
|
||||
</div>
|
||||
</q-infinite-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/javascript">
|
||||
/* eslint-disable */
|
||||
import Chart from 'chart.js'
|
||||
|
||||
export default {
|
||||
mounted () {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
todos: [],
|
||||
actualMaxPosition: 10
|
||||
}
|
||||
},
|
||||
props: ['cardTitle', 'api'],
|
||||
watch: {
|
||||
},
|
||||
computed: {
|
||||
showingData () {
|
||||
return this.todos.slice(0, this.actualMaxPosition)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadMore (index, done) {
|
||||
setTimeout(() => {
|
||||
this.actualMaxPosition += 9
|
||||
done()
|
||||
}, 1000)
|
||||
|
||||
},
|
||||
completeTodo (todo) {
|
||||
},
|
||||
changeTitle (todo) {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
input {
|
||||
padding: 7px 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
.completed-line {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
</style>
|
||||
@@ -1,49 +0,0 @@
|
||||
<template>
|
||||
<div class="card text-white" :class="backgroundColor">
|
||||
<div class="card-content ">
|
||||
<div class="row">
|
||||
<div class="width-1of3">
|
||||
<i>{{iconName}}</i>
|
||||
</div>
|
||||
<div class="width-2of3">
|
||||
<p class="text-italic ">{{title}}</p>
|
||||
<h5 ref="number">
|
||||
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
import CountUp from 'countup.js'
|
||||
export default {
|
||||
props: ['title', 'total', 'backgroundColor', 'iconName'],
|
||||
mounted () {
|
||||
this.countUp.start()
|
||||
},
|
||||
computed: {
|
||||
countUp () {
|
||||
return new CountUp(this.$refs.number, 0, this.total, 0, 2.5, this.options)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
total () {
|
||||
this.countUp.start()
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
options: {
|
||||
separator: '.'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
i {
|
||||
font-size: 54px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,91 +0,0 @@
|
||||
<template>
|
||||
|
||||
<div class="layout-padding ">
|
||||
<div class="flex wrap gutter">
|
||||
<div class="width-1of3 sm-auto">
|
||||
<cardTotal
|
||||
title="Total Posts"
|
||||
background-color="bg-teal-9"
|
||||
icon-name="local_post_office"
|
||||
:total="totalPosts">
|
||||
</cardTotal>
|
||||
</div>
|
||||
<div class="width-1of3 sm-auto">
|
||||
<cardTotal
|
||||
title="Total comments"
|
||||
background-color="bg-teal-7"
|
||||
icon-name="comment"
|
||||
:total="totalComments">
|
||||
</cardTotal>
|
||||
</div>
|
||||
<div class="width-1of3 sm-auto">
|
||||
<cardTotal
|
||||
title="Static total"
|
||||
background-color="bg-teal-5"
|
||||
icon-name="repeat_one"
|
||||
:total="50004">
|
||||
</cardTotal>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex wrap gutter">
|
||||
<div class="width-1of2 lg-width-1of3 sm-auto">
|
||||
<card-chart
|
||||
card-title="Total Graph"
|
||||
:data="dataForGraph"
|
||||
></card-chart>
|
||||
</div>
|
||||
<div class="auto">
|
||||
<knob-statistics
|
||||
card-title="General statistics">
|
||||
</knob-statistics>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex wrap gutter">
|
||||
<div class="width-4of5 sm-width-1of1">
|
||||
<card-todo
|
||||
card-title="Generic todos"
|
||||
api="todos">
|
||||
</card-todo>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/javascript">
|
||||
import cardChart from './cardChart.vue'
|
||||
import cardTotal from './cardTotal.vue'
|
||||
import cardTodo from './cardTodo.vue'
|
||||
import knobStatistics from './knobStatistics.vue'
|
||||
import { mapActions } from 'vuex'
|
||||
import * as types from '../../../store/mutation-types'
|
||||
export default {
|
||||
mounted () {
|
||||
// Axios.all not working
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
totalPosts: 0,
|
||||
totalComments: 0,
|
||||
totalTodos: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dataForGraph () {
|
||||
return {
|
||||
posts: this.totalPosts,
|
||||
todos: this.totalTodos,
|
||||
comments: this.totalComments
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions("glob", {'setPosts': types.SET_POSTS})
|
||||
},
|
||||
components: {
|
||||
cardTotal,
|
||||
cardChart,
|
||||
cardTodo,
|
||||
knobStatistics
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style></style>
|
||||
@@ -1,41 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script type="text/javascript">
|
||||
/* eslint-disable */
|
||||
//import { Toast } from 'quasar'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
minExpenses: 0,
|
||||
minIncome: 0,
|
||||
maxIncome: 5000,
|
||||
currentIncome: 998,
|
||||
currentExpenses: 125,
|
||||
doubleRangeMinMax: {
|
||||
min: 0,
|
||||
max: 5000
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentIncome () {
|
||||
if (this.currentIncome < this.currentExpenses){
|
||||
this.currentExpenses = this.currentIncome
|
||||
//Toast.create.negative({html: `You're in financial trouble.`})
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
maxExpenses () {
|
||||
return this.currentIncome
|
||||
}
|
||||
|
||||
},
|
||||
props: ['cardTitle'],
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,66 +0,0 @@
|
||||
<template>
|
||||
<div class="text-center">
|
||||
<span class="tag label text-white rotate rotate-270 shadow-2" :class="tagClasses">
|
||||
<q-knob
|
||||
class="rotate-90"
|
||||
v-model="value"
|
||||
:size="size"
|
||||
style="font-size: 1.9rem"
|
||||
color="#fff"
|
||||
:track-color="trackColor"
|
||||
:min="min"
|
||||
:max="max"
|
||||
readonly
|
||||
:placeholder="fullPlaceHolder"
|
||||
></q-knob>
|
||||
</span>
|
||||
<span class="title block" :style="{color: titleColor}">{{title}}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
|
||||
props: {
|
||||
value: {
|
||||
required: true
|
||||
},
|
||||
size: {
|
||||
required: true
|
||||
},
|
||||
min: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
max: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
title: {},
|
||||
titleColor: {},
|
||||
tagClasses: {},
|
||||
trackColor: {},
|
||||
placeholderBefore: {}
|
||||
},
|
||||
computed: {
|
||||
fullPlaceHolder () {
|
||||
return this.placeholderBefore ? `${this.placeholderBefore}${this.value}` : this.value
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.label.tag{
|
||||
margin-left: 0;
|
||||
padding-left: 1rem;
|
||||
padding-right: 0.8rem;
|
||||
}
|
||||
.title {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,107 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="layout-padding ">
|
||||
<div class="card">
|
||||
<div class="card-title bg-teal text-white">
|
||||
Choose photos to reveal of the user
|
||||
</div>
|
||||
<div class="card-content bg-white adv-form-one">
|
||||
<q-stepper ref="stepper" @step="stepNumber => { currentStep = stepNumber }">
|
||||
<q-step title="Find a user by username">
|
||||
<div class="flex wrap gutter">
|
||||
<div class="width-2of5 sm-width-1of1">
|
||||
<e-input
|
||||
label="User Name"
|
||||
v-model="userName"
|
||||
:validation="$v.userName"
|
||||
:validation-messages="validationMessages.userName"
|
||||
:value="userName"
|
||||
></e-input>
|
||||
<button class="teal raised outline" @click="findUser()">Search</button>
|
||||
</div>
|
||||
<div class="width-1of2 gt-width-3of5">
|
||||
<card-user-data :user-data="userData" v-model="selectedAlbum"></card-user-data>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<button class="orange" v-if="selectedAlbum" @click="$refs.stepper.nextStep()">Continue</button>
|
||||
</div>
|
||||
</q-step>
|
||||
<q-step title="Choose photos">
|
||||
<card-data-table :selected-album="selectedAlbum" v-on:selectedRows="populatePhotos"></card-data-table>
|
||||
|
||||
<div class="flex wrap gutter">
|
||||
<div class="width-1of4 sm-width-3of3">
|
||||
<button class="orange fit" @click="$refs.stepper.previousStep()">Back</button>
|
||||
</div>
|
||||
<div class="width-1of4 sm-width-3of3" v-show="selectedPhotos.length > 0">
|
||||
<button class="green fit" @click="finish()">Preview</button>
|
||||
</div>
|
||||
</div>
|
||||
</q-step>
|
||||
</q-stepper>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-modal ref="previewModal" class="minimized">
|
||||
<q-gallery-slider :src="photosForGalery" ></q-gallery-slider>
|
||||
</q-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/javascript">
|
||||
import { required } from 'vuelidate/lib/validators'
|
||||
import eInput from '../../embeeded/eInput.vue'
|
||||
import cardUserData from './cardUserData.vue'
|
||||
//import cardDataTable from './cardDataTable.vue'
|
||||
export default {
|
||||
name: 'AdvancedFormOne',
|
||||
data () {
|
||||
return {
|
||||
userName: 'Bret',
|
||||
userData: {},
|
||||
currentStep: '1',
|
||||
selectedAlbum: '',
|
||||
selectedPhotos: [],
|
||||
validationMessages: {
|
||||
userName: {
|
||||
required: 'Username is required.'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
validations: {
|
||||
userName: {
|
||||
required
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
photosForGalery () {
|
||||
let galery = []
|
||||
this.selectedPhotos.forEach(photo => { galery.push(photo.data.thumbnailUrl) })
|
||||
return galery
|
||||
}
|
||||
},
|
||||
components: {
|
||||
eInput,
|
||||
cardUserData,
|
||||
//cardDataTable
|
||||
},
|
||||
methods: {
|
||||
finish () {
|
||||
this.$refs.previewModal.open()
|
||||
},
|
||||
findUser () {
|
||||
this.$http.jsonplaceholder
|
||||
.get(`users?username=${this.userName}`)
|
||||
.then(response => { this.userData = response.data[0] })
|
||||
|
||||
this.$v.$touch()
|
||||
},
|
||||
populatePhotos (photos) {
|
||||
photos.forEach(item => { this.selectedPhotos.push(item) })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,70 +0,0 @@
|
||||
<template>
|
||||
<div class="card" v-if="userData.name">
|
||||
<div class="card-content">
|
||||
<h6>{{userData.name}}</h6>
|
||||
{{userData.email}}
|
||||
<p class="caption">Choose one of the user Albums</p>
|
||||
<div class="list">
|
||||
<label class="item two-lines" v-for="album in filteredAlbums">
|
||||
<div class="item-primary">
|
||||
<q-radio @input="change(album)" v-model="selectedAlbum" :val="album.id"></q-radio>
|
||||
</div>
|
||||
<div class="item-content post-data">
|
||||
<div class="ellipsis">{{album.title}}</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
props: {
|
||||
userData: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
userAlbums: [],
|
||||
selectedAlbum: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
filteredAlbums () {
|
||||
return this.userAlbums.slice(0, 3)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change (album) {
|
||||
this.$emit('input', album)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
userData () {
|
||||
this.$http.jsonplaceholder
|
||||
.get(`albums?userId=${this.userData.id}`)
|
||||
.then(response => { this.userAlbums = response.data })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
@media screen and (min-width: 600px) {
|
||||
.post-data{
|
||||
max-width: 110px;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 920px) {
|
||||
.post-data{
|
||||
max-width: 340px;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1280px) {
|
||||
.post-data{
|
||||
max-width: 540px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,112 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="floating-label" :class="labelColor">
|
||||
<q-datetime type="datetime"
|
||||
class="full-width"
|
||||
:class="borderColor"
|
||||
:label="label"
|
||||
:value="value"
|
||||
:format="format"
|
||||
@input="change($event)"
|
||||
></q-datetime>
|
||||
<transition-group name="slide-fade">
|
||||
<span class="label text-red"
|
||||
v-for="(key, index) in messageKeys"
|
||||
v-show="!validation[key] && validation.$dirty"
|
||||
:key="index">
|
||||
{{validationMessages[key]}}
|
||||
</span>
|
||||
</transition-group>
|
||||
<transition name="fade" mode="out-in">
|
||||
<i v-show="validAndDirty" class="text-green" >check</i>
|
||||
</transition>
|
||||
<transition name="fade" mode="out-in">
|
||||
<i v-show="invalidAndDirty" class="text-red">clear</i>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
props: {
|
||||
format: {
|
||||
type: String
|
||||
},
|
||||
validation: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
value: {
|
||||
required: true
|
||||
},
|
||||
validationMessages: {},
|
||||
label: {}
|
||||
},
|
||||
computed: {
|
||||
messageKeys () {
|
||||
return Object.keys(this.validationMessages)
|
||||
},
|
||||
validAndDirty () {
|
||||
return !this.validation.$invalid && this.validation.$dirty
|
||||
},
|
||||
invalidAndDirty () {
|
||||
return this.validation.$invalid && this.validation.$dirty
|
||||
},
|
||||
labelColor () {
|
||||
return this.validAndDirty ? 'label-success' : '' ||
|
||||
this.invalidAndDirty ? 'label-error animate-pop' : ''
|
||||
},
|
||||
borderColor () {
|
||||
return this.validAndDirty ? 'has-success' : '' ||
|
||||
this.invalidAndDirty ? 'has-error' : ''
|
||||
},
|
||||
shakeDiv () {
|
||||
return this.invalidAndDirty ? 'animate-pop' : ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change (value) {
|
||||
console.log(value)
|
||||
this.validation.$touch()
|
||||
this.$emit('input', value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.has-success {
|
||||
border-bottom: 2px solid #4caf50 !important;
|
||||
}
|
||||
i {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 7px;
|
||||
font-size: 22px;
|
||||
}
|
||||
.floating-label {
|
||||
min-height: 81px;
|
||||
}
|
||||
.floating-label span .label{
|
||||
padding: 0 0.3rem 0 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
.fade-enter, .fade-leave-to, .fade-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
.slide-fade-enter-active, .slide-fade-leave-active {
|
||||
transition: all 0.7s ease;
|
||||
}
|
||||
.slide-fade-enter{
|
||||
transform: translateY(-10px);
|
||||
opacity: 0;
|
||||
}
|
||||
.slide-fade-leave-active{
|
||||
transform: translateY(-7px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,108 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="floating-label" :class="shakeDiv">
|
||||
<input required class="full-width" :class="borderColor"
|
||||
:value="value"
|
||||
@input="change($event.target.value)">
|
||||
<label :class="labelColor">{{label}}</label>
|
||||
<transition-group name="slide-fade">
|
||||
<span class="label text-red"
|
||||
v-for="(key, index) in messageKeys"
|
||||
v-show="!validation[key] && validation.$dirty"
|
||||
:key="index">
|
||||
|
||||
{{validationMessages[key]}}
|
||||
</span>
|
||||
</transition-group>
|
||||
<transition name="fade" mode="out-in">
|
||||
<i v-show="validAndDirty" class="text-green" >check</i>
|
||||
</transition>
|
||||
<transition name="fade" mode="out-in">
|
||||
<i v-show="invalidAndDirty" class="text-red">clear</i>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
props: {
|
||||
validation: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
value: {
|
||||
required: true
|
||||
},
|
||||
validationMessages: {},
|
||||
label: {}
|
||||
},
|
||||
computed: {
|
||||
messageKeys () {
|
||||
return Object.keys(this.validationMessages)
|
||||
},
|
||||
validAndDirty () {
|
||||
return !this.validation.$invalid && this.validation.$dirty
|
||||
},
|
||||
invalidAndDirty () {
|
||||
return this.validation.$invalid && this.validation.$dirty
|
||||
},
|
||||
labelColor () {
|
||||
return this.validAndDirty ? 'text-green' : '' ||
|
||||
this.invalidAndDirty ? 'text-red ' : ''
|
||||
},
|
||||
borderColor () {
|
||||
return this.validAndDirty ? 'has-success' : '' ||
|
||||
this.invalidAndDirty ? 'has-error' : ''
|
||||
},
|
||||
shakeDiv () {
|
||||
return this.invalidAndDirty ? 'animate-pop' : ''
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
change (value) {
|
||||
this.validation.$touch()
|
||||
this.$emit('input', value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.has-success {
|
||||
border-bottom: 2px solid #4caf50 !important;
|
||||
}
|
||||
i {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 7px;
|
||||
font-size: 22px;
|
||||
}
|
||||
.floating-label {
|
||||
min-height: 81px;
|
||||
}
|
||||
.floating-label span .label{
|
||||
padding: 0 0.3rem 0 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
.fade-enter, .fade-leave-to, .fade-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
.slide-fade-enter-active, .slide-fade-leave-active {
|
||||
transition: all 0.7s ease;
|
||||
}
|
||||
.slide-fade-enter{
|
||||
transform: translateY(-10px);
|
||||
opacity: 0;
|
||||
}
|
||||
.slide-fade-leave-active{
|
||||
transform: translateY(-7px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,115 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="floating-label" :class="labelColor">
|
||||
<q-select :type="type"
|
||||
class="full-width"
|
||||
:class="borderColor"
|
||||
:options="options"
|
||||
:label="label"
|
||||
:value="value"
|
||||
@input="change($event)"
|
||||
></q-select>
|
||||
<transition-group name="slide-fade">
|
||||
<span class="label text-red"
|
||||
v-for="(key, index) in messageKeys"
|
||||
v-show="!validation[key] && validation.$dirty"
|
||||
:key="index">
|
||||
{{validationMessages[key]}}
|
||||
</span>
|
||||
</transition-group>
|
||||
<transition name="fade" mode="out-in">
|
||||
<i v-show="validAndDirty" class="text-green" >check</i>
|
||||
</transition>
|
||||
<transition name="fade" mode="out-in">
|
||||
<i v-show="invalidAndDirty" class="text-red">clear</i>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
props: {
|
||||
validation: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
value: {
|
||||
required: true
|
||||
},
|
||||
type: {
|
||||
required: true
|
||||
},
|
||||
validationMessages: {},
|
||||
label: {},
|
||||
options: {}
|
||||
},
|
||||
computed: {
|
||||
messageKeys () {
|
||||
return Object.keys(this.validationMessages)
|
||||
},
|
||||
validAndDirty () {
|
||||
return !this.validation.$invalid && this.validation.$dirty
|
||||
},
|
||||
invalidAndDirty () {
|
||||
return this.validation.$invalid && this.validation.$dirty
|
||||
},
|
||||
labelColor () {
|
||||
return this.validAndDirty ? 'label-success' : '' ||
|
||||
this.invalidAndDirty ? 'label-error animate-pop' : ''
|
||||
},
|
||||
borderColor () {
|
||||
return this.validAndDirty ? 'has-success' : '' ||
|
||||
this.invalidAndDirty ? 'has-error' : ''
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
change (value) {
|
||||
this.validation.$touch()
|
||||
this.$emit('input', value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.has-success {
|
||||
border-bottom: 2px solid #4caf50 !important;
|
||||
}
|
||||
.label-success .q-picker-textfield-label {
|
||||
color: #4caf50;
|
||||
}
|
||||
i {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 7px;
|
||||
font-size: 22px;
|
||||
}
|
||||
.floating-label {
|
||||
min-height: 81px;
|
||||
}
|
||||
.floating-label span .label{
|
||||
padding: 0 0.3rem 0 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
.fade-enter, .fade-leave-to, .fade-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
.slide-fade-enter-active, .slide-fade-leave-active {
|
||||
transition: all 0.7s ease;
|
||||
}
|
||||
.slide-fade-enter{
|
||||
transform: translateY(-10px);
|
||||
opacity: 0;
|
||||
}
|
||||
.slide-fade-leave-active{
|
||||
transform: translateY(-7px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,119 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="layout-padding ">
|
||||
<div class="flex wrap gutter">
|
||||
<div class="gt-md-width-1of3 width-1of1">
|
||||
<div class="card">
|
||||
<div class="card-title bg-teal text-white">
|
||||
Input
|
||||
</div>
|
||||
<div class="card-content bg-white">
|
||||
<e-input
|
||||
label="Name"
|
||||
v-model="name"
|
||||
:validation="$v.name"
|
||||
:validation-messages="validationMessages.name"
|
||||
:value="name"
|
||||
></e-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gt-md-width-1of3 width-1of1">
|
||||
<div class="card">
|
||||
<div class="card-title bg-teal text-white">
|
||||
Select
|
||||
</div>
|
||||
<div class="card-content bg-white">
|
||||
<e-select
|
||||
type="list"
|
||||
label="Authentication"
|
||||
v-model="authentication"
|
||||
:validation="$v.authentication"
|
||||
:validation-messages="validationMessages.authentication"
|
||||
:value="authentication"
|
||||
:options="options"
|
||||
></e-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gt-md-width-1of3 width-1of1">
|
||||
<div class="card">
|
||||
<div class="card-title bg-teal text-white">
|
||||
DateTime
|
||||
</div>
|
||||
<div class="card-content bg-white">
|
||||
<e-date-time
|
||||
format="YYYY/MM/DD"
|
||||
label="Date of birth"
|
||||
v-model="dateOfBirth"
|
||||
:validation="$v.dateOfBirth"
|
||||
:validation-messages="validationMessages.dateOfBirth"
|
||||
:value="dateOfBirth"
|
||||
></e-date-time>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex wrap justify-center">
|
||||
<div class="width-1of3">
|
||||
<button class="teal raised outline fit" @click="$v.$touch()">Try Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/javascript">
|
||||
import { required, minLength, alpha } from 'vuelidate/lib/validators'
|
||||
import eInput from './eInput.vue'
|
||||
import eSelect from './eSelect.vue'
|
||||
import eDateTime from './eDateTime.vue'
|
||||
export default {
|
||||
name: 'EmbeededValidationsElements',
|
||||
mounted () {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
name: '',
|
||||
authentication: '',
|
||||
dateOfBirth: '',
|
||||
validationMessages: {
|
||||
name: {
|
||||
required: 'Name is required.',
|
||||
minLength: 'Minimum 5 characters.',
|
||||
alpha: 'Only letters.'
|
||||
},
|
||||
authentication: {
|
||||
required: 'Authentication is required.'
|
||||
},
|
||||
dateOfBirth: {
|
||||
required: 'Date of birth is required.'
|
||||
}
|
||||
},
|
||||
options: [
|
||||
{ label: 'Google', value: 'google' },
|
||||
{ label: 'Facebook', value: 'facebook' },
|
||||
{ label: '', value: '' }
|
||||
]
|
||||
}
|
||||
},
|
||||
validations: {
|
||||
name: {
|
||||
required,
|
||||
minLength: minLength(5),
|
||||
alpha
|
||||
},
|
||||
authentication: {
|
||||
required
|
||||
},
|
||||
dateOfBirth: {
|
||||
required
|
||||
}
|
||||
},
|
||||
components: {
|
||||
eInput,
|
||||
eSelect,
|
||||
eDateTime
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped></style>
|
||||
@@ -1,98 +0,0 @@
|
||||
<template>
|
||||
<q-modal ref="modal" @open="startMap()">
|
||||
<div class="card fit">
|
||||
<div class="card-title bg-teal text-white">
|
||||
Adress of {{user.name}}
|
||||
</div>
|
||||
<div class="card-content bg-white">
|
||||
<div id="map"></div>
|
||||
<div class="wrap gutter">
|
||||
<div class="width-1of1">
|
||||
<div class="floating-label">
|
||||
<input required class="full-width" v-model="user.address.street">
|
||||
<label>Street</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="width-1of1">
|
||||
<div class="floating-label">
|
||||
<input required class="full-width" v-model="user.address.suite">
|
||||
<label>Suite</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="width-1of1">
|
||||
<div class="floating-label">
|
||||
<input required class="full-width" v-model="user.address.city">
|
||||
<label>City</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="width-1of1">
|
||||
<div class="floating-label">
|
||||
<input required class="full-width" v-model="user.address.zipcode">
|
||||
<label>Zipcode</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-actions justify-center flex">
|
||||
<div class="width-1of3 sm-width-3of3">
|
||||
<button class="primary outline raised fit" @click="save()">Save</button>
|
||||
</div>
|
||||
<div class="width-1of3 sm-width-3of3">
|
||||
<button class="teal outline raised fit" @click="$refs.modal.close()">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</q-modal>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
/* eslint-disable */
|
||||
//import { Toast } from 'quasar'
|
||||
//import GMaps from 'gmaps'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
map: ''
|
||||
}
|
||||
},
|
||||
props: ['user'],
|
||||
methods: {
|
||||
save () {
|
||||
this.$http.jsonplaceholder
|
||||
.patch(`users/${this.user.id}`, {address: this.user.address})
|
||||
.then(response => {
|
||||
|
||||
})
|
||||
},
|
||||
startMap () {
|
||||
let vm = this
|
||||
/*
|
||||
this.map = new GMaps({
|
||||
el: '#map',
|
||||
lat: parseFloat(this.user.address.geo.lat),
|
||||
lng: parseFloat(this.user.address.geo.lng),
|
||||
zoom: 3,
|
||||
dblclick (e) {
|
||||
vm.map.removeMarkers()
|
||||
vm.addMarker(e.latLng.lat(), e.latLng.lng())
|
||||
}
|
||||
})
|
||||
this.addMarker(this.user.address.geo.lat, this.user.address.geo.lng)
|
||||
*/
|
||||
},
|
||||
addMarker (lat, lng) {
|
||||
this.map.addMarker({
|
||||
lat: parseFloat(lat),
|
||||
lng: parseFloat(lng)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
#map {
|
||||
width: 300px !important;
|
||||
height: 300px !important;
|
||||
}
|
||||
</style>
|
||||
@@ -1,92 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="layout-padding ">
|
||||
<div class="card">
|
||||
<div class="card-title bg-teal text-white">
|
||||
Search Users
|
||||
</div>
|
||||
<div class="card-content bg-white">
|
||||
<div class="flex">
|
||||
<div class="width-2of3 gt-bg-width-1of3 sm-auto">
|
||||
<q-autocomplete v-model="terms" :delay="0" @search="search" :max-results="4" @selected="selected">
|
||||
<q-search v-model="terms" placeholder="Search by name"></q-search>
|
||||
</q-autocomplete>
|
||||
</div>
|
||||
</div>
|
||||
<q-transition name="slide">
|
||||
<user-form :user="selectedUser" v-show="selectedUser.name"></user-form>
|
||||
</q-transition>
|
||||
</div>
|
||||
<q-transition name="slide">
|
||||
<div class="card-actions justify-center flex" v-show="selectedUser.name">
|
||||
<div class="width-1of3 sm-width-3of3">
|
||||
<button class="primary raised outline fit" @click="save()">Save</button>
|
||||
</div>
|
||||
<div class="width-1of3 sm-width-3of3">
|
||||
<button class="teal raised outline fit" @click="$refs.modal.$children[0].open()">Check Adress</button>
|
||||
</div>
|
||||
</div>
|
||||
</q-transition>
|
||||
</div>
|
||||
</div>
|
||||
<modal-adress :user="selectedUser" ref="modal"></modal-adress>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/javascript">
|
||||
import userForm from './userForm.vue'
|
||||
import modalAdress from './modalAdress.vue'
|
||||
export default {
|
||||
name: 'Form',
|
||||
mounted () {
|
||||
this.getUsers()
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
terms: '',
|
||||
users: [],
|
||||
selectedUser: { address: {} }
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
usersParsed () {
|
||||
return this.users.map(user => {
|
||||
return {
|
||||
allData: user,
|
||||
label: user.name,
|
||||
secondLabel: user.email,
|
||||
value: user.name
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
components: {
|
||||
userForm,
|
||||
modalAdress
|
||||
},
|
||||
methods: {
|
||||
search (terms, done) {
|
||||
setTimeout(() => {
|
||||
done(Utils.filter(terms, {field: 'value', list: this.usersParsed}))
|
||||
}, 500)
|
||||
},
|
||||
getUsers () {
|
||||
this.$http.jsonplaceholder
|
||||
.get('users')
|
||||
.then(response => { this.users = response.data })
|
||||
},
|
||||
selected (user) {
|
||||
this.selectedUser = user.allData
|
||||
},
|
||||
save () {
|
||||
this.$http.jsonplaceholder
|
||||
.put(`users/${this.selectedUser.id}`, this.selectedUser)
|
||||
.then(response => { })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
#map {
|
||||
height: 180px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,46 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex wrap gutter">
|
||||
<div class="width-1of3 sm-width-1of1">
|
||||
<div class="floating-label">
|
||||
<input required class="full-width" v-model="user.username">
|
||||
<label>Username</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="width-1of3 sm-width-1of1">
|
||||
<div class="floating-label">
|
||||
<input required class="full-width" v-model="user.phone">
|
||||
<label>Phone</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex wrap gutter">
|
||||
<div class="width-1of3 sm-width-1of1">
|
||||
<div class="floating-label">
|
||||
<input required class="full-width" v-model="user.website">
|
||||
<label>Website</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="width-1of3 sm-width-1of1">
|
||||
<div class="floating-label">
|
||||
<input required class="full-width" v-model="user.email">
|
||||
<label>Email</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
props: ['user']
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.flex {
|
||||
margin-top: 1%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,90 +0,0 @@
|
||||
/* eslint-disable */
|
||||
export default {
|
||||
Digitalizer: `<g>
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M259.476,280.364V247.5c0-12.958-10.542-23.5-23.5-23.5s-23.5,10.542-23.5,23.5v29.672 c0,35.757-13.173,70.087-37.094,96.665l-32.981,36.646c-2.771,3.079-2.521,7.821,0.558,10.593c3.078,2.771,7.82,2.521,10.592-0.558 l32.981-36.646c26.403-29.338,40.944-67.231,40.944-106.7V247.5c0-4.687,3.813-8.5,8.5-8.5s8.5,3.813,8.5,8.5v32.864 c0,44.003-16.301,86.167-45.901,118.727l-32.149,35.364c-2.786,3.064-2.56,7.809,0.505,10.595c1.437,1.307,3.242,1.95,5.042,1.95 c2.04,0,4.072-0.827,5.552-2.455l32.148-35.364C241.789,373.854,259.476,328.106,259.476,280.364z" />
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M291.476,247.5c0-30.603-24.897-55.5-55.5-55.5s-55.5,24.897-55.5,55.5v29.672c0,27.839-10.256,54.566-28.879,75.258 l-23.447,26.053c-2.771,3.079-2.521,7.821,0.558,10.593c3.079,2.771,7.82,2.519,10.592-0.558l23.447-26.053 c21.106-23.451,32.73-53.742,32.73-85.293V247.5c0-22.332,18.168-40.5,40.5-40.5c22.332,0,40.5,18.168,40.5,40.5v32.864 c0,51.979-19.256,101.789-54.223,140.252l-27.125,29.839c-2.787,3.064-2.561,7.809,0.504,10.595c1.437,1.307,3.242,1.95,5.042,1.95 c2.04,0,4.072-0.827,5.552-2.455l27.126-29.839c37.481-41.23,58.123-94.622,58.123-150.342V247.5z" />
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M323.476,247.5c0-48.248-39.252-87.5-87.5-87.5s-87.5,39.252-87.5,87.5v29.672c0,19.92-7.339,39.045-20.665,53.851 l-21.112,23.458c-2.771,3.079-2.521,7.821,0.558,10.593c3.078,2.771,7.821,2.519,10.592-0.558l21.112-23.458 c15.809-17.565,24.515-40.254,24.515-63.886V247.5c0-39.977,32.523-72.5,72.5-72.5s72.5,32.523,72.5,72.5v32.864 c0,59.958-22.212,117.412-62.545,161.777l-7.507,8.258c-2.786,3.065-2.56,7.809,0.505,10.595c1.437,1.306,3.243,1.95,5.042,1.95 c2.04,0,4.072-0.827,5.552-2.455l7.506-8.258c42.848-47.133,66.446-108.169,66.446-171.867V247.5z" />
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M116.476,247.5c0,4.143,3.358,7.5,7.5,7.5s7.5-3.357,7.5-7.5c0-25.255,9.169-49.651,25.819-68.695 c16.495-18.867,39.134-31.205,63.746-34.741c4.1-0.589,6.946-4.391,6.357-8.49c-0.589-4.1-4.394-6.942-8.49-6.357 c-28.16,4.046-54.052,18.15-72.906,39.716C126.962,190.71,116.476,218.613,116.476,247.5z" />
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M131.476,277.172c0-4.143-3.358-7.5-7.5-7.5s-7.5,3.357-7.5,7.5c0,12.002-4.421,23.523-12.449,32.443l-18.779,20.867 c-2.771,3.078-2.521,7.82,0.558,10.592c1.434,1.29,3.227,1.925,5.015,1.925c2.052,0,4.097-0.838,5.577-2.483l18.779-20.866 C125.687,307.971,131.476,292.886,131.476,277.172z" />
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M340.755,344.123c-4.009-1.044-8.105,1.351-9.155,5.357c-2.769,10.579-6.213,21.096-10.24,31.258 c-1.526,3.851,0.359,8.21,4.21,9.735c0.907,0.359,1.841,0.529,2.761,0.529c2.985,0,5.808-1.795,6.975-4.739 c4.249-10.725,7.884-21.822,10.806-32.986C347.16,349.271,344.761,345.172,340.755,344.123z" />
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M315.791,158.632c-3.081-2.771-7.823-2.517-10.592,0.563s-2.517,7.822,0.563,10.591 c22.061,19.832,34.713,48.157,34.713,77.714v32.864c0,12.473-0.86,25.042-2.557,37.359c-0.565,4.104,2.303,7.888,6.406,8.453 c0.347,0.048,0.692,0.071,1.033,0.071c3.688,0,6.903-2.722,7.42-6.478c1.79-12.993,2.698-26.251,2.698-39.406V247.5 C355.476,213.695,341.011,181.304,315.791,158.632z" />
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M280.729,153.076c1.041,0.496,2.138,0.73,3.219,0.73c2.803,0,5.492-1.579,6.777-4.278c1.781-3.739,0.192-8.215-3.547-9.995 c-10.806-5.145-22.291-8.616-34.136-10.317c-4.106-0.585-7.901,2.258-8.49,6.357s2.257,7.901,6.357,8.49 C261.257,145.55,271.289,148.582,280.729,153.076z" />
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M235.976,96c-2.806,0-5.644,0.078-8.437,0.232c-4.136,0.228-7.304,3.766-7.076,7.901c0.229,4.136,3.763,7.321,7.902,7.075 c2.519-0.139,5.079-0.209,7.61-0.209c75.266,0,136.5,61.233,136.5,136.5v32.864c0,4.143,3.358,7.5,7.5,7.5s7.5-3.357,7.5-7.5V247.5 C387.476,163.963,319.513,96,235.976,96z" />
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M153.972,136.693c1.477,0,2.97-0.436,4.275-1.343c12.478-8.677,26.182-15.155,40.733-19.258 c3.987-1.124,6.308-5.268,5.184-9.254s-5.269-6.304-9.254-5.184c-16.16,4.556-31.376,11.749-45.226,21.379 c-3.401,2.365-4.241,7.039-1.876,10.439C149.265,135.57,151.599,136.693,153.972,136.693z" />
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M99.476,277.172V247.5c0-34.89,13.213-68.118,37.205-93.565c2.841-3.014,2.702-7.76-0.312-10.602 s-7.761-2.701-10.602,0.312C99.14,171.886,84.476,208.77,84.476,247.5v29.672c0,4.083-1.504,8.002-4.234,11.035l-9.248,10.275 c-2.771,3.079-2.521,7.821,0.558,10.592c1.433,1.291,3.227,1.926,5.015,1.926c2.052,0,4.096-0.837,5.577-2.482l9.248-10.275 C96.605,292.449,99.476,284.966,99.476,277.172z" />
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M409.951,189.104c-8.226-24.446-21.299-46.531-38.856-65.642c-2.803-3.05-7.547-3.252-10.597-0.449 c-3.05,2.803-3.251,7.547-0.449,10.598c16.127,17.554,28.134,37.834,35.686,60.276c1.054,3.133,3.976,5.11,7.107,5.11 c0.793,0,1.6-0.127,2.393-0.394C409.16,197.282,411.272,193.029,409.951,189.104z" />
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M295.247,73.822c-3.917-1.341-8.183,0.748-9.524,4.668c-1.341,3.919,0.749,8.183,4.668,9.523 c16.538,5.659,32.065,13.857,46.15,24.369c1.347,1.005,2.92,1.489,4.48,1.489c2.286,0,4.544-1.041,6.017-3.015 c2.478-3.319,1.794-8.019-1.525-10.496C330.176,88.916,313.264,79.986,295.247,73.822z" />
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M119.442,125.908C150.991,95.659,192.377,79,235.976,79c8.096,0,16.237,0.583,24.196,1.731 c4.103,0.598,7.903-2.252,8.495-6.352c0.592-4.1-2.251-7.902-6.351-8.494C253.648,64.635,244.786,64,235.976,64 c-47.487,0-92.56,18.141-126.915,51.081c-34.248,32.838-54.277,76.905-56.397,124.084c-0.186,4.138,3.018,7.644,7.155,7.829 c0.115,0.006,0.229,0.008,0.343,0.008c3.987,0,7.306-3.14,7.487-7.163C69.594,196.527,87.988,156.066,119.442,125.908z" />
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M235.976,32c-16.772,0-33.485,1.944-49.674,5.778c-4.031,0.954-6.524,4.996-5.57,9.026c0.955,4.03,4.997,6.524,9.027,5.569 C204.817,48.809,220.366,47,235.976,47c54.996,0,106.332,21.911,144.55,61.695c1.473,1.533,3.439,2.305,5.41,2.305 c1.869,0,3.741-0.694,5.195-2.091c2.987-2.87,3.083-7.618,0.213-10.604c-19.913-20.729-43.304-37.036-69.522-48.465 C294.666,38.002,265.783,32,235.976,32z" />
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M67.507,125.404c1.372,1.074,3.001,1.595,4.619,1.595c2.227,0,4.431-0.987,5.91-2.876 c21.375-27.302,49.515-48.717,81.377-61.932c3.826-1.587,5.642-5.975,4.055-9.801s-5.977-5.644-9.801-4.055 c-34.241,14.201-64.478,37.21-87.441,66.539C63.672,118.137,64.246,122.851,67.507,125.404z" />
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M131.983,38.725c1.094,0,2.205-0.24,3.255-0.748C166.816,22.73,200.709,15,235.976,15c18.378,0,36.682,2.162,54.401,6.426 c4.025,0.966,8.077-1.51,9.046-5.537c0.969-4.027-1.51-8.078-5.538-9.047C275.019,2.302,255.535,0,235.976,0 c-37.544,0-73.631,8.232-107.259,24.469c-3.73,1.801-5.294,6.285-3.493,10.015C126.517,37.163,129.195,38.725,131.983,38.725z" />
|
||||
<path fill="none" stroke="#FFFFFF" stroke-width="6" d="M321.724,31.383c7.732,3.079,15.385,6.619,22.746,10.52c1.119,0.594,2.321,0.875,3.505,0.875 c2.688,0,5.287-1.449,6.633-3.99c1.939-3.66,0.545-8.199-3.115-10.139c-7.837-4.153-15.986-7.922-24.22-11.201 c-3.849-1.533-8.21,0.345-9.743,4.192C315.998,25.488,317.876,29.851,321.724,31.383z" />
|
||||
</svg>`,
|
||||
Keytronic:
|
||||
`<g>
|
||||
<g>
|
||||
<path fill="none" stroke-width="6" d="M478.665,72c0-39.704-32.296-72-72-72c-19.704,0-38.496,8.184-52,22.288C341.161,8.184,322.369,0,302.665,0 c-39.704,0-72,32.296-72,72c0,24.752,12.456,47.36,33.376,60.688L275.353,144L134.665,284.688l-26.344-26.344 c-3.128-3.128-8.184-3.128-11.312,0l-32,32c-3.128,3.128-3.128,8.184,0,11.312L91.353,328l-12.688,12.688l-26.344-26.344 c-3.128-3.128-8.184-3.128-11.312,0l-33,33c-3.128,3.128-3.128,8.184,0,11.312L34.353,385L4.345,415.008 c-3.128,3.128-3.128,8.184,0,11.312l52,52c1.56,1.56,3.608,2.344,5.656,2.344s4.096-0.784,5.656-2.344l51.008-51.008 l26.344,26.344c3.128,3.128,8.184,3.128,11.312,0l40-40c3.128-3.128,3.128-8.184,0-11.312L169.977,376l168.688-168.688 l7.312,7.312C359.305,235.544,381.913,248,406.665,248c39.704,0,72-32.296,72-72c0-19.704-8.184-38.496-22.288-52 C470.481,110.496,478.665,91.704,478.665,72z M462.665,176c0,30.872-25.128,56-56,56c-19.488,0-37.272-9.944-47.584-26.6 c-0.328-0.52-0.712-1.008-1.152-1.448l-13.608-13.608c-3.128-3.128-8.184-3.128-11.312,0l-180,180 c-3.128,3.128-3.128,8.184,0,11.312L179.353,408l-28.688,28.688l-26.344-26.344c-3.128-3.128-8.184-3.128-11.312,0l-51.008,51.008 l-40.688-40.688l30.008-30.008c3.128-3.128,3.128-8.184,0-11.312L24.977,353l21.688-21.688l26.344,26.344 c3.128,3.128,8.184,3.128,11.312,0l24-24c3.128-3.128,3.128-8.184,0-11.312L81.977,296l20.688-20.688l26.344,26.344 c3.128,3.128,8.184,3.128,11.312,0l152-152c3.128-3.128,3.128-8.184,0-11.312l-17.608-17.608c-0.44-0.44-0.92-0.824-1.448-1.152 c-16.656-10.312-26.6-28.096-26.6-47.584c0-30.872,25.128-56,56-56c17.96,0,34.968,8.768,45.504,23.456c3,4.184,10,4.184,13,0 C371.697,24.768,388.705,16,406.665,16c30.872,0,56,25.128,56,56c0,17.96-8.768,34.968-23.456,45.504 c-2.096,1.504-3.336,3.92-3.336,6.496s1.24,5,3.336,6.496C453.897,141.032,462.665,158.04,462.665,176z" stroke="#FFFFFF"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<rect fill="none" stroke-width="6" x="173.811" y="228.009" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -91.1265 252.0189)" width="169.678" height="16" stroke="#FFFFFF"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<rect fill="none" stroke-width="6" x="163.35" y="311.983" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -175.1045 217.2252)" width="22.624" height="16" stroke="#FFFFFF"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="none" stroke-width="6" d="M406.665,40c-17.648,0-32,14.352-32,32s14.352,32,32,32s32-14.352,32-32S424.313,40,406.665,40z M406.665,88 c-8.824,0-16-7.176-16-16s7.176-16,16-16c8.824,0,16,7.176,16,16S415.489,88,406.665,88z" stroke="#FFFFFF"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<rect fill="none" stroke-width="6" x="310.663" y="92.674" transform="matrix(0.7071 -0.7071 0.7071 0.7071 19.8046 255.7854)" width="16" height="22.624" stroke="#FFFFFF"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<rect fill="none" stroke-width="6" x="342.661" y="124.674" transform="matrix(0.7071 -0.7071 0.7071 0.7071 6.5493 287.7842)" width="16" height="22.624" stroke="#FFFFFF"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<rect fill="none" stroke-width="6" x="374.659" y="156.674" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -6.706 319.7831)" width="16" height="22.624" stroke="#FFFFFF"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="none" stroke-width="6" d="M470.665,344h-14.032c-0.44-1.112-0.896-2.216-1.392-3.328l9.928-9.928c3.128-3.128,3.128-8.184,0-11.312l-33.936-33.936 c-3.128-3.128-8.184-3.128-11.312,0l-9.928,9.928c-1.112-0.496-2.216-0.952-3.328-1.392V280c0-4.424-3.576-8-8-8h-48 c-4.424,0-8,3.576-8,8v14.032c-1.112,0.44-2.216,0.896-3.328,1.392l-9.928-9.928c-3.128-3.128-8.184-3.128-11.312,0 l-33.936,33.936c-3.128,3.128-3.128,8.184,0,11.312l9.928,9.928c-0.496,1.112-0.952,2.216-1.392,3.328h-14.032 c-4.424,0-8,3.576-8,8v48c0,4.424,3.576,8,8,8h14.032c0.44,1.112,0.896,2.216,1.392,3.328l-9.928,9.928 c-3.128,3.128-3.128,8.184,0,11.312l33.936,33.936c3.128,3.128,8.184,3.128,11.312,0l9.928-9.928 c1.112,0.496,2.216,0.952,3.328,1.392V472c0,4.424,3.576,8,8,8h48c4.424,0,8-3.576,8-8v-14.032 c1.112-0.44,2.216-0.896,3.328-1.392l9.928,9.928c3.128,3.128,8.184,3.128,11.312,0l33.936-33.936 c3.128-3.128,3.128-8.184,0-11.312l-9.928-9.928c0.496-1.112,0.952-2.216,1.392-3.328h14.032c4.424,0,8-3.576,8-8v-48 C478.665,347.576,475.089,344,470.665,344z M462.665,392h-11.672c-3.496,0-6.576,2.264-7.632,5.592 c-1.216,3.864-2.856,7.8-4.88,11.672c-1.616,3.104-1.032,6.888,1.44,9.36l8.288,8.288l-22.624,22.624l-8.288-8.288 c-2.472-2.472-6.256-3.056-9.36-1.44c-3.872,2.024-7.808,3.664-11.672,4.88c-3.336,1.064-5.6,4.144-5.6,7.64V464h-32v-11.672 c0-3.496-2.264-6.576-5.592-7.632c-3.864-1.216-7.8-2.856-11.672-4.88c-3.104-1.616-6.88-1.032-9.36,1.44l-8.288,8.288 l-22.624-22.624l8.288-8.288c2.472-2.472,3.056-6.256,1.44-9.36c-2.024-3.872-3.664-7.808-4.88-11.672 c-1.064-3.336-4.144-5.6-7.64-5.6h-11.672v-32h11.672c3.496,0,6.576-2.264,7.632-5.592c1.216-3.864,2.856-7.8,4.88-11.672 c1.616-3.104,1.032-6.888-1.44-9.36l-8.288-8.288l22.624-22.624l8.288,8.288c2.48,2.48,6.256,3.048,9.36,1.44 c3.872-2.024,7.808-3.664,11.672-4.88c3.336-1.064,5.6-4.144,5.6-7.64V288h32v11.672c0,3.496,2.264,6.576,5.592,7.632 c3.864,1.216,7.8,2.856,11.672,4.88c3.104,1.608,6.888,1.04,9.36-1.44l8.288-8.288l22.624,22.624l-8.288,8.288 c-2.472,2.472-3.056,6.256-1.44,9.36c2.024,3.872,3.664,7.808,4.88,11.672c1.064,3.336,4.144,5.6,7.64,5.6h11.672V392z" stroke="#FFFFFF"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="none" stroke-width="6" d="M374.665,328c-26.472,0-48,21.528-48,48s21.528,48,48,48s48-21.528,48-48S401.137,328,374.665,328z M374.665,408 c-17.648,0-32-14.352-32-32s14.352-32,32-32s32,14.352,32,32S392.313,408,374.665,408z" stroke="#FFFFFF"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="none" stroke-width="6" d="M54.665,168h-16c0,13.232-10.768,24-24,24v16c13.232,0,24,10.768,24,24h16c0-13.232,10.768-24,24-24v-16 C65.433,192,54.665,181.232,54.665,168z M46.665,208.248c-2.336-3.144-5.104-5.912-8.248-8.248 c3.144-2.336,5.912-5.104,8.248-8.248c2.336,3.144,5.104,5.912,8.248,8.248C51.769,202.336,49.001,205.104,46.665,208.248z" stroke="#FFFFFF"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="none" stroke-width="6" d="M150.665,120h-16c0,13.232-10.768,24-24,24v16c13.232,0,24,10.768,24,24h16c0-13.232,10.768-24,24-24v-16 C161.433,144,150.665,133.232,150.665,120z M142.665,160.248c-2.336-3.144-5.104-5.912-8.248-8.248 c3.144-2.336,5.912-5.104,8.248-8.248c2.336,3.144,5.104,5.912,8.248,8.248C147.769,154.336,145.001,157.104,142.665,160.248z" stroke="#FFFFFF"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="none" stroke-width="6" d="M70.665,48h-16c0,13.232-10.768,24-24,24v16c13.232,0,24,10.768,24,24h16c0-13.232,10.768-24,24-24V72 C81.433,72,70.665,61.232,70.665,48z M62.665,88.248c-2.336-3.144-5.104-5.912-8.248-8.248c3.144-2.336,5.912-5.104,8.248-8.248 c2.336,3.144,5.104,5.912,8.248,8.248C67.769,82.336,65.001,85.104,62.665,88.248z" stroke="#FFFFFF"/>
|
||||
</g>
|
||||
</g>
|
||||
`,
|
||||
Molectron: `
|
||||
<path stroke="#FFFFFF" fill="none" stroke-width="6" d="m398.559,166.02c-8.85-3.404-18.292-6.493-28.22-9.265 2.563-9.984 4.609-19.706 6.087-29.073 7.689-48.757-0.808-82.959-23.925-96.306-6.72-3.88-14.443-5.848-22.954-5.848-26.882,0-60.85,19.965-95.118,53.681-7.486-7.352-15.006-14.105-22.502-20.167-38.379-31.038-72.25-40.781-95.365-27.434-14.856,8.577-23.891,26.093-26.126,50.652-0.376,4.125 2.664,7.773 6.789,8.148 4.138,0.382 7.772-2.664 8.148-6.789 1.238-13.594 5.484-31.398 18.688-39.021 17.11-9.881 45.699-0.365 78.434,26.106 7.143,5.776 14.314,12.217 21.461,19.233-14.373,15.293-28.676,32.894-42.41,52.347-24.16,2.199-47.172,5.888-68.291,10.948-3.698-14.376-6.238-28.093-7.491-40.827-0.405-4.122-4.059-7.134-8.198-6.729-4.122,0.405-7.135,4.076-6.729,8.198 1.326,13.474 4.008,27.966 7.917,43.133-9.596,2.706-18.73,5.712-27.311,9.012-46.072,17.72-71.443,42.18-71.443,68.873s25.371,51.153 71.441,68.872c8.85,3.404 18.292,6.493 28.22,9.265-2.563,9.984-4.609,19.706-6.087,29.073-7.689,48.757 0.808,82.959 23.925,96.306 6.72,3.88 14.443,5.848 22.954,5.848 26.573,0 60.071-19.516 93.938-52.531 7.255,7.086 14.54,13.609 21.803,19.482 27.161,21.966 52.059,33.266 72.489,33.265 8.438-0.001 16.119-1.93 22.876-5.831 23.117-13.347 31.614-47.549 23.925-96.306-1.477-9.366-3.523-19.087-6.086-29.07 15.439-4.252 29.64-9.26 42.218-14.96 3.773-1.71 5.445-6.154 3.735-9.927-1.71-3.773-6.155-5.446-9.927-3.735-11.912,5.398-25.377,10.15-40.042,14.192-6.063-20.261-14.137-41.412-23.976-62.808 10.281-22.122 18.685-44.004 24.943-64.936 55.665,15.586 88.651,40.202 88.651,63.801 0,15.247-13.296,27.827-24.45,35.694-3.385,2.388-4.193,7.067-1.806,10.452 2.388,3.386 7.067,4.193 10.452,1.806 20.153-14.215 30.804-30.797 30.804-47.952 0-26.693-25.371-51.153-71.441-68.872zm-69.013-125.491c5.844,7.10543e-15 11.044,1.291 15.454,3.838 17.112,9.88 23.166,39.396 16.607,80.979-1.405,8.907-3.35,18.159-5.789,27.669-21.207-5.028-44.299-8.68-68.532-10.835-13.596-19.242-27.866-36.839-42.375-52.253 2.655-2.618 5.312-5.158 7.964-7.602 29.252-26.953 56.48-41.796 76.671-41.796zm-95.096,60.152c11.317,12.062 22.5,25.517 33.323,40.102-10.769-0.587-21.712-0.891-32.773-0.891-11.431,0-22.738,0.321-33.855,0.947 10.808-14.56 22.006-28.07 33.305-40.158zm-.053,269.657c-11.718-12.42-23.296-26.341-34.486-41.466 11.514,0.674 23.234,1.02 35.089,1.02 11.419,0 22.732-0.333 33.871-0.969-11.18,15.064-22.777,29.01-34.474,41.415zm.603-55.446c-16.115,0-31.578-0.624-46.314-1.784-8.277-12.076-16.284-24.78-23.907-37.984-7.503-12.995-14.405-26.107-20.657-39.155 6.49-13.661 13.707-27.412 21.596-41.077 7.64-13.232 15.75-26.063 24.177-38.307 14.374-1.099 29.429-1.693 45.105-1.693 15.273,0 29.956,0.564 43.994,1.609 8.434,12.267 16.59,25.185 24.349,38.623 7.85,13.597 15.034,27.279 21.5,40.873-6.219,12.942-13.091,25.957-20.56,38.894-7.625,13.207-15.72,26.015-24.13,38.239-14.716,1.158-29.83,1.762-45.153,1.762zm-65.615-3.655c-18.453-2.132-35.582-5.129-51.205-8.81 4.744-15.789 10.758-32.16 17.929-48.79 4.898,9.688 10.128,19.373 15.679,28.987 5.668,9.818 11.549,19.371 17.597,28.613zm1.19-152.829c-6.111,9.318-12.078,18.991-17.847,28.984-5.933,10.276-11.499,20.61-16.677,30.928-7.543-17.318-13.858-34.376-18.788-50.749 16.203-3.859 34.042-6.983 53.312-9.163zm-155.575,76.484c0-23.472 32.634-47.951 87.757-63.55 6.235,20.802 14.601,42.62 24.805,64.647-9.813,21.362-17.865,42.477-23.913,62.705-55.663-15.587-88.649-40.203-88.649-63.802zm125.454,194.363c-5.844,0-11.044-1.291-15.454-3.838-17.112-9.88-23.166-39.396-16.607-80.979 1.405-8.907 3.35-18.159 5.789-27.669 20.518,4.865 42.8,8.441 66.173,10.619 13.951,19.807 28.618,37.883 43.53,53.648-2.254,2.201-4.509,4.348-6.76,6.423-29.252,26.954-56.48,41.796-76.671,41.796zm220.214-84.584c6.559,41.583 0.505,71.099-16.607,80.979-17.113,9.879-45.699,0.364-78.434-26.106-6.893-5.574-13.814-11.767-20.712-18.499 14.761-15.578 29.462-33.603 43.563-53.579 23.432-2.151 45.822-5.697 66.389-10.509 2.445,9.526 4.394,18.793 5.801,27.714zm-9.83-42.153c-16.064,3.733-33.311,6.67-51.339,8.745 6.085-9.283 12.027-18.918 17.773-28.871 5.517-9.556 10.713-19.161 15.579-28.757 7.195,16.66 13.228,33.063 17.987,48.883zm-17.918-84.145c-5.152-10.259-10.688-20.532-16.587-30.749-5.818-10.078-11.859-19.878-18.077-29.348 19.355,2.146 37.276,5.243 53.564,9.081-4.955,16.493-11.302,33.623-18.9,51.016z"/>
|
||||
<path stroke="#FFFFFF" fill="none" stroke-width="6" d="m235,197.392c-20.678,0-37.5,16.822-37.5,37.5s16.822,37.5 37.5,37.5 37.5-16.822 37.5-37.5-16.822-37.5-37.5-37.5zm0,60c-12.406,0-22.5-10.094-22.5-22.5s10.094-22.5 22.5-22.5 22.5,10.094 22.5,22.5-10.094,22.5-22.5,22.5z"/>
|
||||
`
|
||||
|
||||
}
|
||||
@@ -2,9 +2,9 @@
|
||||
<div class="mypanel">
|
||||
|
||||
<div v-if="!emailinviata">
|
||||
<q-alert color="primary q-title" style="text-align: center;">
|
||||
<q-banner color="primary q-title" style="text-align: center;">
|
||||
{{ $t('reset.title_reset_pwd')}}
|
||||
</q-alert>
|
||||
</q-banner>
|
||||
<br>
|
||||
|
||||
<q-field
|
||||
@@ -30,9 +30,9 @@
|
||||
|
||||
</div>
|
||||
<div v-else>
|
||||
<q-alert color="primary q-title" style="text-align: center;">
|
||||
<q-banner color="primary q-title" style="text-align: center;">
|
||||
{{ $t('reset.email_sent')}}
|
||||
</q-alert>
|
||||
</q-banner>
|
||||
<br>
|
||||
|
||||
<div>
|
||||
@@ -45,72 +45,68 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts" >
|
||||
|
||||
import {mapActions} from 'vuex'
|
||||
import * as types from '../../store/mutation-types'
|
||||
import { rescodes } from '../../../store/Modules/tools'
|
||||
|
||||
import {serv_constants} from '../../store/Modules/serv_constants'
|
||||
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
risultato: '',
|
||||
riscode: 0,
|
||||
emailsent: false,
|
||||
form: {
|
||||
email: '',
|
||||
tokenforgot: 0,
|
||||
},
|
||||
}
|
||||
},
|
||||
import Vue from 'vue'
|
||||
import { email, required } from "vuelidate/lib/validators"
|
||||
import { UserStore } from "../../store/Modules";
|
||||
import { IUserState } from "../../model";
|
||||
export default class RequestResetPwd extends Vue{
|
||||
emailsent = false
|
||||
form: IUserState = {
|
||||
email: '',
|
||||
tokenforgot: ''
|
||||
}
|
||||
|
||||
created() {
|
||||
this.load();
|
||||
},
|
||||
computed: {
|
||||
emailinviata: function () {
|
||||
// this.load();
|
||||
}
|
||||
get emailinviata() {
|
||||
return this.emailsent
|
||||
},
|
||||
},
|
||||
validations: {
|
||||
form: {
|
||||
email: {
|
||||
required, email,
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions("user", {
|
||||
requestresetpwd: types.USER_REQUESTRESETPWD,
|
||||
}),
|
||||
},
|
||||
}
|
||||
// validations: {
|
||||
// form: {
|
||||
// email: {
|
||||
// required, email,
|
||||
// },
|
||||
// }
|
||||
// },
|
||||
|
||||
showNotif(msg: any) {
|
||||
this.$q.notify(msg)
|
||||
}
|
||||
|
||||
submit() {
|
||||
this.$v.form.$touch();
|
||||
this.$v.form.$touch()
|
||||
|
||||
if (this.$v.form.$error) {
|
||||
this.showNotif(this.$t('reg.err.errore_generico'));
|
||||
this.showNotif(this.$t('reg.err.errore_generico'))
|
||||
return
|
||||
}
|
||||
|
||||
this.$q.loading.show({message: this.$t('reset.incorso')});
|
||||
this.$q.loading.show({message: this.$t('reset.incorso')})
|
||||
|
||||
this.tokenforgot = '';
|
||||
this.form.tokenforgot = ''
|
||||
|
||||
console.log(this.form);
|
||||
this.requestresetpwd(this.form)
|
||||
UserStore.actions.requestpwd(this.form)
|
||||
.then((ris) => {
|
||||
if (ris.code === serv_constants.RIS_CODE_OK)
|
||||
this.emailsent = true;
|
||||
this.$q.loading.hide();
|
||||
this.emailsent = true
|
||||
this.$q.loading.hide()
|
||||
}).catch(err => {
|
||||
console.log("ERROR = " + err.error);
|
||||
this.$q.loading.hide();
|
||||
console.log("ERROR = " + err.error)
|
||||
this.$q.loading.hide()
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@@ -43,13 +43,13 @@
|
||||
|
||||
<br>
|
||||
|
||||
<q-card-main class="flex flex-center">
|
||||
<q-card class="flex flex-center">
|
||||
<!--<q-btn v-if="$myconfig.socialLogin.facebook" :loading="loading" class="q-mb-md q-mr-md" rounded icon="fab fa-facebook-f" size="sm" color="blue-10" text-color="white" @click="facebook" :label="$t('components.authentication.login.facebook')"/>-->
|
||||
<!--
|
||||
<q-btn v-if="$myconfig.socialLogin.facebook" class="q-mb-md q-mr-md" rounded icon="fab fa-facebook-f" size="sm" color="blue-10" text-color="white" @click="facebook" :label="$t('components.authentication.login.facebook')"/>
|
||||
<q-btn v-if="$myconfig.socialLogin.google" class="q-mb-md q-mr-md" rounded icon="fab fa-google" size="sm" color="deep-orange-14" text-color="white" @click="google" :label="$t('components.authentication.login.google')"/>
|
||||
-->
|
||||
</q-card-main>
|
||||
</q-card>
|
||||
|
||||
<div align="center">
|
||||
<q-btn rounded size="lg" color="primary" @click="submit" :disable="$v.$error || iswaitingforRes">{{$t('login.enter')}}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { ISignupOptions } from 'model'
|
||||
import { required, minLength, email, sameAs } from 'vuelidate/lib/validators'
|
||||
import { email, minLength, required, sameAs } from 'vuelidate/lib/validators'
|
||||
// import { ValidationRuleset } from 'vuelidate'
|
||||
import { complexity, registereduser, registeredemail } from '../../../validation'
|
||||
import { complexity, registeredemail, registereduser } from '../../../validation'
|
||||
|
||||
export type TSignup = { signup: ISignupOptions, validationGroup: string[] }
|
||||
export interface TSignup { signup: ISignupOptions, validationGroup: string[] }
|
||||
|
||||
export const validations = {
|
||||
signup: {
|
||||
@@ -12,17 +12,17 @@ export const validations = {
|
||||
sameAsPassword: sameAs('password')
|
||||
},
|
||||
password: {
|
||||
required,
|
||||
complexity
|
||||
complexity,
|
||||
required
|
||||
},
|
||||
username: {
|
||||
required,
|
||||
registereduser
|
||||
registereduser,
|
||||
required
|
||||
},
|
||||
email: {
|
||||
required,
|
||||
email,
|
||||
registeredemail
|
||||
registeredemail,
|
||||
required
|
||||
},
|
||||
terms: {
|
||||
required
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
<div class="mypanel">
|
||||
|
||||
<div v-if="!emailinviata">
|
||||
<q-alert color="primary q-title" style="text-align: center;">
|
||||
<q-banner color="primary q-title" style="text-align: center;">
|
||||
{{ $t('reset.title_update_pwd')}}
|
||||
</q-alert>
|
||||
</q-banner>
|
||||
<br>
|
||||
|
||||
<q-field
|
||||
@@ -41,9 +41,9 @@
|
||||
|
||||
</div>
|
||||
<div v-else>
|
||||
<q-alert color="primary q-title" style="text-align: center;">
|
||||
<q-banner color="primary q-title" style="text-align: center;">
|
||||
{{ $t('reset.email_sent')}}
|
||||
</q-alert>
|
||||
</q-banner>
|
||||
<br>
|
||||
|
||||
<div>
|
||||
@@ -56,76 +56,74 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
|
||||
import {mapActions} from 'vuex'
|
||||
import { mapActions } from 'vuex'
|
||||
import * as types from '../../store/mutation-types'
|
||||
//import {tools} from '../../store/Modules/user'
|
||||
|
||||
import {serv_constants} from '../../store/Modules/serv_constants';
|
||||
import { serv_constants } from '../../store/Modules/serv_constants'
|
||||
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
risultato: '',
|
||||
riscode: 0,
|
||||
emailsent: false,
|
||||
form: {
|
||||
password: '',
|
||||
repeatPassword: '',
|
||||
tokenforgot: 0,
|
||||
},
|
||||
}
|
||||
},
|
||||
import Vue from 'vue'
|
||||
import { required } from "vuelidate/lib/validators"
|
||||
import { UserStore } from "../../store/Modules";
|
||||
import { IUserState } from "../../model";
|
||||
|
||||
export default class UpdatePassword extends Vue {
|
||||
emailsent = false
|
||||
form: IUserState = {
|
||||
password: '',
|
||||
repeatPassword: '',
|
||||
tokenforgot: '',
|
||||
}
|
||||
|
||||
created() {
|
||||
this.load();
|
||||
},
|
||||
computed: {
|
||||
emailinviata: function () {
|
||||
// this.load()
|
||||
}
|
||||
get emailinviata() {
|
||||
return this.emailsent
|
||||
},
|
||||
},
|
||||
validations: {
|
||||
form: {
|
||||
password: {
|
||||
required,
|
||||
},
|
||||
repeatPassword: {
|
||||
required,
|
||||
sameAsPassword: sameAs('password')
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions("user", {
|
||||
updatepwd: types.USER_UPDATEPWD,
|
||||
}),
|
||||
},
|
||||
}
|
||||
// validations: {
|
||||
// form: {
|
||||
// password: {
|
||||
// required,
|
||||
// },
|
||||
// repeatPassword: {
|
||||
// required,
|
||||
// sameAsPassword: sameAs('password')
|
||||
// },
|
||||
// }
|
||||
// },
|
||||
|
||||
showNotif(msg: any) {
|
||||
this.$q.notify(msg)
|
||||
}
|
||||
|
||||
submit() {
|
||||
this.$v.form.$touch();
|
||||
this.$v.form.$touch()
|
||||
|
||||
if (this.$v.form.$error) {
|
||||
this.showNotif(this.$t('reg.err.errore_generico'));
|
||||
this.showNotif(this.$t('reg.err.errore_generico'))
|
||||
return
|
||||
}
|
||||
|
||||
this.$q.loading.show({message: this.$t('reset.incorso')});
|
||||
this.$q.loading.show({ message: this.$t('reset.incorso') })
|
||||
|
||||
this.tokenforgot = '';
|
||||
this.form.tokenforgot = ''
|
||||
|
||||
console.log(this.form);
|
||||
this.updatepwd(this.form)
|
||||
console.log(this.form)
|
||||
UserStore.actions.resetpwd(this.form)
|
||||
.then((ris) => {
|
||||
this.emailsent = ris.updatepwd;
|
||||
this.$q.loading.hide();
|
||||
this.emailsent = ris.updatepwd
|
||||
this.$q.loading.hide()
|
||||
}).catch(error => {
|
||||
console.log("ERROR = " + error);
|
||||
this.$q.loading.hide();
|
||||
});
|
||||
console.log("ERROR = " + error)
|
||||
this.$q.loading.hide()
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<q-page padding class="vreg">
|
||||
<div class="mypanel">
|
||||
<q-alert color="primary q-title" style="text-align: center;">
|
||||
<q-banner color="primary q-title" style="text-align: center;">
|
||||
{{ $t('reg.title_verif_reg')}}
|
||||
</q-alert>
|
||||
</q-banner>
|
||||
<br>
|
||||
|
||||
<transition
|
||||
@@ -12,18 +12,18 @@
|
||||
appear
|
||||
>
|
||||
<span>
|
||||
<q-alert
|
||||
<q-banner
|
||||
v-if="giaverificato"
|
||||
type="warning"
|
||||
>
|
||||
{{ myrisultato}}
|
||||
</q-alert>
|
||||
<q-alert
|
||||
</q-banner>
|
||||
<q-banner
|
||||
v-if="verificatook"
|
||||
type="positive"
|
||||
>
|
||||
{{ myrisultato}}
|
||||
</q-alert>
|
||||
</q-banner>
|
||||
</span>
|
||||
</transition>
|
||||
|
||||
|
||||
@@ -1,53 +0,0 @@
|
||||
<template>
|
||||
<div class="card text-center">
|
||||
<div class="card-title no-padding ">
|
||||
<span class="label pointing-down text-white fit no-margin" :class="titleClasses">
|
||||
<h5 class="">{{title}}</h5>
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-content bg-white" >
|
||||
<h3>$ {{price}}</h3>
|
||||
<h6 class="text-italic">{{priceSubtitle}}</h6>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<slot name="body"></slot>
|
||||
</div>
|
||||
<div class="card-content bg-white">
|
||||
<button :class="buttonClasses" class="outline fit" @click="planSelected()">Choose</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
props: ['title', 'titleClasses', 'price', 'priceSubtitle', 'buttonClasses', 'cardId'],
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
planSelected () {
|
||||
this.$emit('card-selected', this.cardId)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.label{
|
||||
min-height: 50px;
|
||||
}
|
||||
h5{
|
||||
font-weight: 300;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
h3, h6{
|
||||
font-weight: 300;
|
||||
}
|
||||
.label.pointing-up:before, .label.pointing-right:before, .label.pointing-down:before, .label.pointing-left:before {
|
||||
width: 1.4rem;
|
||||
height: 1.4rem;
|
||||
}
|
||||
.card {
|
||||
width: 332px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,111 +0,0 @@
|
||||
<template>
|
||||
<div class="card ">
|
||||
<div class="card-content bg-white text-center" >
|
||||
<h5>{{title}}</h5>
|
||||
<h2 class="inline-block">$ {{price}}</h2> <span>{{priceSubtitle}}</span>
|
||||
<div class="flex wrap gutter ">
|
||||
<div class="auto">
|
||||
<div class="label bg-faded text-white ">
|
||||
Vitamin A
|
||||
<span class="right-detail ">
|
||||
<q-rating :class="buttonClasses" style="font-size: 1.5rem"
|
||||
:value="randomValueOne" :max="7" icon="thumb_up" readonly></q-rating>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="auto">
|
||||
<div class="label bg-faded text-white">
|
||||
Vitamin K
|
||||
<span class="right-detail">
|
||||
<q-rating :class="buttonClasses" style="font-size: 1.5rem"
|
||||
:value="randomValueTwo" :max="7" icon="thumb_up" readonly></q-rating>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="auto">
|
||||
<div class="label bg-faded text-white">
|
||||
Vitamin B
|
||||
<span class="right-detail">
|
||||
<q-rating :class="buttonClasses" style="font-size: 1.5rem"
|
||||
:value="randomValueTwo" :max="7" icon="thumb_up" readonly></q-rating>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<div class="list fit">
|
||||
<q-collapsible group="somegroup" icon="format_list_bulleted" label="Check inside for itens" >
|
||||
<slot name="body" ></slot>
|
||||
</q-collapsible>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content bg-white">
|
||||
<q-progress-button
|
||||
:class="buttonClasses"
|
||||
class="fit"
|
||||
:percentage="progressBtn"
|
||||
@click.native="workButton()"
|
||||
>
|
||||
Choose
|
||||
</q-progress-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
props: ['title', 'titleClasses', 'price', 'priceSubtitle', 'buttonClasses', 'cardId'],
|
||||
data () {
|
||||
return {
|
||||
progressBtn: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
randomValueOne () {
|
||||
return Math.floor((Math.random() * 5) + 1)
|
||||
},
|
||||
randomValueTwo () {
|
||||
return Math.floor((Math.random() * 5) + 1)
|
||||
},
|
||||
randomValueThree () {
|
||||
return Math.floor((Math.random() * 5) + 1)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
planSelected () {
|
||||
this.$emit('card-selected', this.cardId)
|
||||
},
|
||||
workButton () {
|
||||
this.stopWorkButton()
|
||||
this.progressBtn = 15
|
||||
this.workingButton = setInterval(() => {
|
||||
this.progressBtn += parseInt(Math.random() * 12, 10)
|
||||
if (this.progressBtn >= 100) {
|
||||
this.stopWorkButton()
|
||||
}
|
||||
}, 500)
|
||||
},
|
||||
stopWorkButton (index) {
|
||||
if (this.workingButton) {
|
||||
clearInterval(this.workingButton)
|
||||
this.workingButton = null
|
||||
this.planSelected()
|
||||
}
|
||||
if (typeof index !== 'undefined') {
|
||||
this.progressBtn = index
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
h5{
|
||||
font-weight: 300;
|
||||
text-decoration: underline;
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
.card {
|
||||
min-width: 350px;
|
||||
max-width: 700px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,25 +0,0 @@
|
||||
<template>
|
||||
<div class="list striped">
|
||||
<div class="item">
|
||||
<div class="item-content">8 Oranges</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-content">6 Limons</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-content">3 Grapes</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
data () {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -1,39 +0,0 @@
|
||||
<template>
|
||||
<div class="list ">
|
||||
<q-collapsible icon="shopping_basket" label="Citrus">
|
||||
<div class="item">
|
||||
<div class="item-content">50 Oranges</div>
|
||||
</div>
|
||||
<div class="item" >
|
||||
<div class="item-content">45 Limes</div>
|
||||
</div>
|
||||
</q-collapsible>
|
||||
<q-collapsible icon="favorite" label="Berries">
|
||||
<div class="item">
|
||||
<div class="item-content">43 Blackberries</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-content">22 Grapes</div>
|
||||
</div>
|
||||
</q-collapsible>
|
||||
<q-collapsible icon="opacity" label="Melons">
|
||||
<div class="item" >
|
||||
<div class="item-content">5 Watermelon</div>
|
||||
</div>
|
||||
<div class="item" >
|
||||
<div class="item-content">10 Casaba</div>
|
||||
</div>
|
||||
</q-collapsible>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
data () {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -1,28 +0,0 @@
|
||||
<template>
|
||||
<div class="list">
|
||||
<div class="list-label inset">Citrus</div>
|
||||
<div class="item">
|
||||
<div class="item-content inset">16 Oranges</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-content inset">12 Limes</div>
|
||||
</div>
|
||||
<hr class="inset">
|
||||
<div class="list-label inset">Berries</div>
|
||||
<div class="item">
|
||||
<div class="item-content inset">14 Blackberries</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-content inset">6 Grapes</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
data () {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
</style>
|
||||
@@ -1,28 +0,0 @@
|
||||
<template>
|
||||
<div class="list">
|
||||
<div class="list-label inset">Citrus</div>
|
||||
<div class="item">
|
||||
<div class="item-content inset">24 Oranges</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-content inset">20 Limes</div>
|
||||
</div>
|
||||
<hr class="inset">
|
||||
<div class="list-label inset">Berries</div>
|
||||
<div class="item">
|
||||
<div class="item-content inset">20 Blackberries</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-content inset">10 Grapes</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
data () {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
</style>
|
||||
@@ -1,121 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="layout-padding">
|
||||
<div class="label bg-secondary text-white">
|
||||
Plan model type <span class="right-detail"><em>{{cardType}}</em></span>
|
||||
</div>
|
||||
<div class="group inline-block">
|
||||
<label >
|
||||
<q-radio v-model="cardType" val="Vertical One"></q-radio> Vertical One
|
||||
</label>
|
||||
<label>
|
||||
<q-radio v-model="cardType" val="Horizontal One" class="teal"></q-radio> Horizontal One
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="row wrap gutter justify-center">
|
||||
<div class="auto " v-for="planData in plansData">
|
||||
<component :is="componentInstanceBySelectedPlanType"
|
||||
:title="planData.title"
|
||||
:title-classes="planData.titleClasses"
|
||||
:price="planData.price"
|
||||
:price-subtitle="planData.priceSubtitle"
|
||||
:button-classes="planData.buttonClasses"
|
||||
:card-id="planData.cardId"
|
||||
v-on:card-selected="cardSelected"
|
||||
>
|
||||
<div slot="body" class="fit">
|
||||
<component :is="planData.planBenefitComponent"></component>
|
||||
</div>
|
||||
</component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/javascript">
|
||||
/* eslint-disable */
|
||||
import cardPlanOne from './cardPlanOne.vue'
|
||||
import cardPlanTwo from './cardPlanTwo.vue'
|
||||
import benefitOne from './plansBenefits/benefitOne.vue'
|
||||
import benefitTwo from './plansBenefits/benefitTwo.vue'
|
||||
import benefitThree from './plansBenefits/benefitThree.vue'
|
||||
import benefitFour from './plansBenefits/benefitFour.vue'
|
||||
//import { Toast } from 'quasar'
|
||||
export default {
|
||||
name: 'Pricing',
|
||||
data () {
|
||||
return {
|
||||
cardType: 'Vertical One',
|
||||
plansData: [
|
||||
{
|
||||
title: 'Basket Fruit One',
|
||||
titleClasses: 'bg-primary',
|
||||
price: '59',
|
||||
priceSubtitle: 'per month',
|
||||
buttonClasses: 'primary',
|
||||
cardId: '1',
|
||||
planBenefitComponent: 'benefit-one'
|
||||
},
|
||||
{
|
||||
title: 'Basket Fruit Two',
|
||||
titleClasses: 'bg-teal',
|
||||
price: '39',
|
||||
priceSubtitle: 'per month',
|
||||
buttonClasses: 'teal',
|
||||
cardId: '2',
|
||||
planBenefitComponent: 'benefit-two'
|
||||
},
|
||||
{
|
||||
title: 'Basket Fruit Three',
|
||||
titleClasses: 'bg-red',
|
||||
price: '29',
|
||||
priceSubtitle: 'per month',
|
||||
buttonClasses: 'red',
|
||||
cardId: '3',
|
||||
planBenefitComponent: 'benefit-three'
|
||||
},
|
||||
{
|
||||
title: 'Basket Fruit Four',
|
||||
titleClasses: 'bg-purple',
|
||||
price: '19',
|
||||
priceSubtitle: 'per month',
|
||||
buttonClasses: 'purple',
|
||||
cardId: '4',
|
||||
planBenefitComponent: 'benefit-four'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
cardPlanOne,
|
||||
benefitOne,
|
||||
benefitTwo,
|
||||
benefitThree,
|
||||
benefitFour,
|
||||
cardPlanTwo
|
||||
},
|
||||
computed: {
|
||||
componentInstanceBySelectedPlanType () {
|
||||
return this.cardType === 'Vertical One' ? 'card-plan-one' : 'card-plan-two'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cardSelected (cardId) {
|
||||
//Toast.create.positive({html: `Congratulations! You have choose the plan ${cardId}`})
|
||||
},
|
||||
chooseMostUsedPlan(cardId) {
|
||||
return cardId == 1 ? 'animate-bounce shadow-3' : ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.inline-block {
|
||||
margin-bottom: 7%;
|
||||
}
|
||||
.label{
|
||||
padding: 1.2rem 0.7rem;
|
||||
min-width: 260px;
|
||||
}
|
||||
</style>
|
||||
@@ -13,7 +13,7 @@
|
||||
</q-toolbar>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/javascript">
|
||||
<script lang="ts" type="text/javascript">
|
||||
</script>
|
||||
<style scoped>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user