Files
myprojplanet_vite/src/components/CMyElem/CMyElem.vue

540 lines
26 KiB
Vue
Executable File

<template>
<div>
<div v-if="myel" :class="(editOn ? ` clEditDiv` : ``) +
`` +
getClass() +
(!myel.active ? ` clEditNotActive` : ``)
">
<div v-if="myel.type">
<q-btn v-if="editOn" rounded dense icon="fas fa-pencil-alt" @click="clickOnElem">
</q-btn>
<div v-if="myel.type === shared_consts.ELEMTYPE.TEXT">
<transition appear enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
<div :class="myel.class +
(editOn ? ` clEdit` : ``) +
getClass() +
` ` +
tools.getClassAnim(myel.anim)
">
{{ myel.container }}
</div>
</transition>
</div>
<div v-if="myel.type === shared_consts.ELEMTYPE.CARD" class="card-carousel-container">
<div v-if="editOn" class="elemEdit">Card</div>
<q-carousel swipeable animated :autoplay="animarecard" v-model="slide" navigation control-text-color="white"
ref="carousel" transition-next="slide-left" transition-prev="slide-right" :height="myel.heightcarousel"
width="100%" control-type="flat" class="shadow-2 rounded-borders"
:style="`background-color: ${myel.color} !important`" @mouseenter="animarecard = false"
@mouseleave="animarecard = true">
<template v-slot:control>
<q-carousel-control position="top-left" :offset="[-10, -10]" class="q-gutter-xs" style="opacity: 0.7">
<q-btn push round :color="$q.dark.isActive ? `black` : `white`"
:text-color="$q.dark.isActive ? `white` : `black`" icon="keyboard_arrow_left"
@click="$refs.carousel.previous()"></q-btn>
</q-carousel-control>
<q-carousel-control position="top-right" class="q-gutter-xs" :offset="[-10, -10]" style="opacity: 0.7">
<q-btn push round :color="$q.dark.isActive ? `black` : `white`"
:text-color="$q.dark.isActive ? `white` : `black`" icon="keyboard_arrow_right"
@click="$refs.carousel.next()"></q-btn>
</q-carousel-control>
</template>
<!-- Iteriamo sui gruppi di card invece che sulle singole card -->
<q-carousel-slide v-for="(group, groupIndex) in cardGroups" :key="groupIndex" :name="groupIndex">
<div class="row no-wrap justify-start items-center q-px-sm">
<template v-for="(rec, cardIndex) in group" :key="cardIndex">
<div :class="cardColumnClass">
<q-card :class="`flex-card bordered ` +
myel.class3 +
(rec.link ? ' titolo_card' : '')
" :style="rec.style +
`; height: ${myel.heightimg || `300px`
} !important; width: ${myel.widthimg || `300px`
} !important;`
" @click="rec.link ? tools.openUrl(rec.link) : undefined">
<div class="img-container" :style="`height: ${myel.heightimg.replace('px', '') * 0.7
}px; overflow: hidden;`">
<q-img :class="tools.getClassAnim(myel.anim2) + ` ` + myel.class4
" :src="tools.getImgFileByElem(myel, rec, path)" />
</div>
<q-card-section class="q-card-section-small">
<div :class="rec.size" :style="`color: ` + rec.color">
{{ tools.getText(rec.alt) }}
</div>
<div :class="`q-mt-xs q-mb-xs ` + tools.getClassAnim(myel.anim)
" v-html="rec.content"></div>
<div v-if="rec.description" class="text-caption" :style="`color: ` + rec.colorsub">
{{ rec.description }}
</div>
</q-card-section>
</q-card>
</div>
</template>
</div>
</q-carousel-slide>
</q-carousel>
</div>
<div v-if="myel.type === shared_consts.ELEMTYPE.MARGINI">
<div :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()" @click="clickOnElem"
:style="`margin: ` + myel.size">
&nbsp;
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.TITLE">
<div>
<div :class="myel.class +
(editOn ? ` clEdit` : ``) +
getClass() +
` ` +
tools.getClassAnim(myel.anim)
" @click="clickOnElem">
<CTitle :imgbackground="myel.imgback" :headtitle="myel.title" :sizes="myel.size"
:styleadd="myel.styleadd">
</CTitle>
</div>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGTITLE">
<div>
<div :class="myel.class +
(editOn ? ` clEdit` : ``) +
getClass() +
` ` +
tools.getClassAnim(myel.anim)
" @click="clickOnElem">
<CImgTitle v-if="myel.image" :src="tools.getImgFileByElem(myel, undefined, path)" :title="myel.container"
:legendinside="myel.container2">
</CImgTitle>
</div>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGPOSTER">
<div :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()" @click="clickOnElem">
<CImgPoster v-if="myel.image" :src="tools.getImgFileByElem(myel, undefined, path)" :title="myel.container"
:myheight="myel.heightimg" :vertalign="myel.vertalign" :speed="myel.speed" :elemsText="myel.elemsText"
:logo="tools.getImgFileByFilename(myel, myel.img)"
:logoheight="myel.height ? myel.height.toString() : '100'"
:logowidth="myel.width ? myel.width.toString() : '100'" :fit="myel.fit" :anim="myel.anim">
</CImgPoster>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.HTML">
<div>
<div :class="myel.class +
(editOn ? ` clEdit` : ``) +
getClass() +
` ` +
tools.getClassAnim(myel.anim)
" @click="clickOnElem" v-html="myel.containerHtml"></div>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.QRCODE">
<div v-if="editOn" class="elemEdit">QRCODE:</div>
<CQRCode :read="myel.parambool" :link="myel.container" :textlink="myel.container2"
:imglogo="tools.getImgFileByElem(myel, undefined, path)"></CQRCode>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGE">
<div class="text-center">
<div :class="myel.class +
(editOn ? ` clEdit` : ``) +
getClass() +
` ` +
tools.getClassAnim(myel.anim)
" @click="clickOnElem">
<q-img :src="tools.getImgFileByElem(myel, undefined, path)" :fit="myel.fit" class="img"
:width="myel.widthimg ? myel.widthimg : undefined"
:height="myel.heightimg ? myel.heightimg : undefined"></q-img>
</div>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGEUPLOAD">
<div class="text-center">
<div :class="myel.class +
(editOn ? ` clEdit` : ``) +
getClass() +
` ` +
tools.getClassAnim(myel.anim)
" @click="clickOnElem">
<q-img :src="tools.getImgFileByElem(myel, undefined, path)" :fit="myel.fit" class="img"
:width="myel.widthimg ? myel.widthimg : undefined"
:height="myel.heightimg ? myel.heightimg : undefined"></q-img>
</div>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.VIDEO">
<div :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()" @click="clickOnElem">
<q-video v-if="myel && !!myel.container" :src="myel.container" :ratio="myel.ratio">
</q-video>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGE">
<div :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()" @click="clickOnElem">
<div v-if="editOn" style="color: gray">
Pagina: {{ myel.container }}
</div>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGEINTRO">
<div :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()" @click="clickOnElem">
<CMyPageIntro :mypath="myel.container" :maxheightimg="myel.heightimg" :maxwidthimg="myel.widthimg"
:link="myel.link"></CMyPageIntro>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_IDISCIPLINE">
<CCardCarousel :myarr="getArrDisciplines()"> </CCardCarousel>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.OPENSTREETMAP">
<div :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()" @click="clickOnElem">
<div v-if="myel.container">
<!-- Da Fare -->
<COpenStreetMap :imgmap="myel.container" :urlmap="myel.container2" :title="myel.container3"
:coordinates="myel.containerHtml" :coord_big="myel.link">
</COpenStreetMap>
</div>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_IMGS">
<section :class="($q.dark.isActive
? `bg-black text-white`
: `bg-white text-grey-10`) + ` padding_gallery text-center`
">
<div :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()" @click="clickOnElem">
<q-carousel swipeable animated :autoplay="myel.container2 ? myel.container2 * 1000 : 8000"
v-model="slide2" arrows :fit="myel.fit" :thumbnails="myel.parambool2" infinite :height="myel.heightimg
? myel.heightimg.toString()
: tools.getheightgallery()
">
<q-carousel-slide v-for="(rec, index) in myel.list" :key="index" :name="index" :img-src="getsrcbyimg(
tools.getDirUpload() +
`pages/` +
path +
`/` +
rec.imagefile
)
" :alt="rec.alt" class="carousel_slide">
<div v-if="myel.parambool" class="absolute-bottom custom-caption" style="margin-bottom: 70px">
<div class="text-h5">
<span class="text-h6 text-grey-1 shadow-max">{{ index + 1 }}.
</span>
<span v-if="rec.alt" class="text-h6 text-grey-2 shadow">{{
rec.alt
}}</span>
</div>
<div class="text-subtitle1" v-if="rec.description">
<span class="text-grey-4 shadow">{{
rec.description
}}</span>
</div>
</div>
</q-carousel-slide>
</q-carousel>
</div>
</section>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_HOME">
<section>
<div class="landing">
<div class="landing__hero maxwidth1200 text-white">
<q-carousel animated :autoplay="animare" swipeable infinite navigation transition-next="slide-left"
transition-prev="slide-right" v-model="slide" :height="getheightgallery()" width="100%">
<q-carousel-slide v-for="(myrec, ind) in myel.list" :key="ind" :name="ind"
:img-src="getsrcbyimg(`/images/` + myrec.imagefile)">
<div class="landing__header"></div>
<div class="landing__hero-content row justify-center q-gutter-xs clgutter">
<div class="row">&nbsp;</div>
<div class="flex justify-end">
<div class="q-gutter-xs testo-banda clgutter">
<h1 class="text-h1 shadow-max">
{{ tools.getappname() }}
</h1>
<div class="text-subtitle1 shadow text-italic q-pl-sm">
{{ myel.container }}&nbsp;
</div>
<div class="text-subtitle1 shadow-max big text-italic q-pl-sm">
{{ myel.container2 }}
</div>
<div class="text-subtitle2 shadow text-italic q-pl-sm">
{{ myel.container3 }}
</div>
<div>
<br /><br />
<div v-if="!tools.isLogged()" style="margin: 5px; padding: 5px" class="home">
<br /><br />
</div>
</div>
</div>
</div>
</div>
<!--<div class="landing__arrow absolute-bottom text-center">
<i aria-hidden="true"
class="q-icon text-h2 text-white material-icons">expand_more</i>
</div>-->
</q-carousel-slide>
</q-carousel>
</div>
</div>
</section>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CALENDAR">
<div v-if="editOn" class="elemEdit">Calendario Eventi</div>
<CEventsCalendar :mysingleevent="null" :showfirstN="myel.number || 3">
</CEventsCalendar>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.MAINVIEW">
<div v-if="editOn" class="elemEdit">CMainView</div>
<CMainView></CMainView>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.PROFILETUTORIAL">
<div v-if="editOn" class="elemEdit">CMyProFileTutorual</div>
<CMyProfileTutorial />
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECKAPPRUNNING">
<div v-if="editOn" class="elemEdit">CheckAppRunning</div>
<CCheckAppRunning />
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.REGISTRATION">
<div v-if="editOn" class="elemEdit">Registrazione</div>
<div>
<CRegistration slide="start"/>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.BUTTON">
<div v-if="editOn" class="elemEdit"></div>
<div :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()" @click="clickOnElem">
<q-btn class="text-center" v-if="myel.container" type="a" rounded :label="myel.container" size=""
:color="myel.color" :text-color="myel.containerHtml" :icon="myel.container2" :href="myel.link"
:target="myel.container3">
</q-btn>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.DASHBOARD">
<div v-if="editOn" class="elemEdit">CDashboard</div>
<CDashboard></CDashboard>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.DASHGROUP">
<div v-if="editOn" class="elemEdit">CDashGroup</div>
<CDashGroup></CDashGroup>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.MOVEMENTS">
<div v-if="editOn" class="elemEdit">Lista Movimenti</div>
<CMovements :showbuttolastmov="true"></CMovements>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CSENDRISTO">
<div v-if="editOn" class="elemEdit">CSendRISTo</div>
<CSendRISTo></CSendRISTo>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.GRID_ORIZ">
<div v-if="editOn" class="elemEdit">Visualizzatore Tabelle</div>
<CGridOriz :table="myel.container" :tipovisu="myel.number" :prop_search="myel.parambool"
:finder="myel.parambool2" :showMap="myel.parambool3" :heightcarousel="myel.heightcarousel"
:prop_modif="myel.parambool4"></CGridOriz>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.SEARCHPRODUCT">
<div v-if="editOn" class="elemEdit">Cerca Prodotto</div>
<CSearchProduct v-model="myel.catalogo">
</CSearchProduct>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CATALOGLIST">
<div v-if="editOn" class="elemEdit">Cataloghi</div>
<q-tabs v-if="tools.isEditor() || tools.isGrafico()" v-model="tabcatalogo" dense class="bg-green text-white">
<q-tab name="griglia" icon="fas fa-eye" label="Griglia"> </q-tab>
<q-tab name="lista" icon="fas fa-list" label="Lista"> </q-tab>
<q-tab name="cerca" icon="fas fa-book" label="Cerca"> </q-tab>
<q-tab name="tutorial" icon="fas fa-info" label="Tutorial"> </q-tab>
</q-tabs>
<q-tab-panels v-model="tabcatalogo" animated keep-alive>
<q-tab-panel name="lista">
<CGridOriz table="catalogs" :tipovisu="costanti.VISUTABLE_TABLELIST" :prop_search="true" :finder="true"
:showMap="false" :prop_modif="tools.isAdmin()"></CGridOriz>
</q-tab-panel>
<q-tab-panel name="cerca">
<CSearchProduct v-model="myel.catalogo">
</CSearchProduct>
</q-tab-panel>
<q-tab-panel name="griglia">
<CCatalogList :prop_search="myel.parambool" :finder="myel.parambool2"
:heightcarousel="myel.heightcarousel" :heightimg="myel.heightimg" :widthimg="myel.widthimg"
:heightcard="myel.heightcard" :widthcard="myel.widthcard">
</CCatalogList>
</q-tab-panel>
<q-tab-panel name="tutorial">
<div class="q-pa-md q-ma-sm text-center">
<q-btn rounded label="Apri Tutorial" color="primary" @click="naviga('/tutorial')"></q-btn>
</div>
</q-tab-panel>
</q-tab-panels>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.STATUSREG">
<div v-if="editOn" class="elemEdit">CStatusReg</div>
<CStatusReg> </CStatusReg>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECKIFISLOGGED">
<div v-if="editOn" class="elemEdit">CCheckIfIsLogged</div>
<CCheckIfIsLogged :showalways="myel.container"></CCheckIfIsLogged>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.VISUVIDEOPROMOANDPDF">
<div v-if="editOn" class="elemEdit">Visu Video Promo and PDF</div>
<CVisuVideoPromoAndPDF :showalways="myel.container"></CVisuVideoPromoAndPDF>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.INFO_VERSION">
<div>Versione: {{ tools.getvers() }}</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.BOTT_CONDIVIDI">
<div class="row justify-evenly items-center q-pa-sm q-ma-sm">
<q-btn icon="fas fa-share" text-color="blue" type="a" size="md" color="yellow" :class="myel.class +
(editOn ? ` clEdit` : ``) +
getClass() +
` ` +
tools.getClassAnim(myel.anim)
" rounded :label="$t('reg.link_reg_and_msg')" @click="clickshare">
</q-btn>
</div>
</div>
<div v-else-if="
myel.type === shared_consts.ELEMTYPE.BOTT_CHAT_TERRITORIALE
">
<div v-if="editOn" class="elemEdit">Bottone Chat Territoriale</div>
<div class="row justify-evenly items-center">
<q-btn v-if="tools.getLinkChatTerritoriale()" icon="fab fa-telegram" color="blue" type="a" size="md" rounded
:label="$t('dashboard.link_gruppo_telegram', {
prov: tools.getProvincia(),
})
" :href="tools.getLinkChatTerritoriale()" target="__blank">
</q-btn>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECK_EMAIL">
<div v-if="editOn" class="elemEdit">
Msg di Controllo Verifica Email
</div>
<div class="q-pa-xs q-gutter-md">
<div v-if="tools.isLogged() && !tools.isVerified()" class="text-verified">
{{ $t("components.authentication.email_verification.link_sent") }}
</div>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.PRESENTAZIONE">
<div v-if="editOn" class="elemEdit">Pagina di Presentazione</div>
<CPresentazione></CPresentazione>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.MYACTIVITIES">
<div v-if="editOn" class="elemEdit">Pagina Attività</div>
<CMyActivities></CMyActivities>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.ECOMMERCE">
<div v-if="editOn" class="elemEdit">PRODOTTI ECOMMERCE:</div>
<CECommerce></CECommerce>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CATALOGO">
<div v-if="editOn" class="elemEdit">PRODOTTI CATALOGO:</div>
<CCatalogo v-model="myel.catalogo" :idPage="idPage" @updateCatalogo="updateCatalogoEmit(myel.catalogo)" />
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.MAPPA">
<div v-if="editOn" class="elemEdit">MAPPA:</div>
<!--<CMapMarker :coord_center="{lat: 47.41322, long: -1.219482}"
></CMapMarker>-->
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.MAPPAUTENTI">
<div v-if="editOn" class="elemEdit">MAPPA UTENTI:</div>
<CMapUsers></CMapUsers>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.MAPPAGETCOORDINATE">
<div v-if="editOn" class="elemEdit">MAPPA COORDINATE:</div>
<CMapGetCoordinates></CMapGetCoordinates>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.EDITADDRESSBYCOORD">
<div v-if="editOn" class="elemEdit">EDIT ADDRESS BY COORD:</div>
<CMapEditAddressByCoord :editaddress="true" v-model:model-value="coordaddr"></CMapEditAddressByCoord>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.MAPPACOMUNI">
<div v-if="editOn" class="elemEdit">MAPPA COMUNI:</div>
<CMapComuni></CMapComuni>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.TOOLSAI">
<div v-if="editOn" class="elemEdit">STRUMENTI AI:</div>
<CAITools></CAITools>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.NOTIFATTOP">
<div v-if="editOn" class="elemEdit">Notifiche in Cima</div>
<CNotifAtTop></CNotifAtTop>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECKTESTENV">
<div v-if="editOn" class="elemEdit">Check Sito di Test</div>
<q-banner v-if="tools.isTest() && false" rounded dense class="bg-negative text-white" color="primary q-title"
style="text-align: center">
<template v-slot:avatar>
<q-icon name="fas fa-exclamation-triangle" color="yellow" size="xs" />
</template>
<span class="mybanner"> TEST !</span>
</q-banner>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECKNEWVERSION">
<div v-if="editOn" class="elemEdit">Controllo Nuova Versione</div>
<q-banner v-if="globalStore.isNewVersionAvailable" rounded dense class="bg-green text-white"
color="primary q-title" style="text-align: center">
<template v-slot:avatar>
<q-icon name="fas fa-exclamation-triangle" color="yellow" size="xs" />
</template>
<div v-if="$q.platform.is.ios">
<span class="mybanner">Chiudere e Riaprire la App, per completare
l'Aggiornamento</span>
</div>
<div v-else>
<span class="mybanner">Aggiornamento APP in corso ... Se dopo 1 minuto non dovesse
scomparire questo messaggio, chiudere e riaprire la
pagina.</span>
</div>
</q-banner>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.BTN_REG">
<q-btn rounded size="md" color="primary" :to="`/registrati/${tools.getInvitante()}`"
:label="$t('reg.submit')">
</q-btn>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.BTN_REG_BYBOT">
<q-btn type="a" rounded size="lg" color="primary" href="/bot" :label="$t('reg.submit')" :class="myel.class +
(editOn ? ` clEdit` : ``) +
getClass() +
` ` +
tools.getClassAnim(myel.anim)
">
</q-btn>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.BTN_LOGIN">
<q-btn :class="myel.class +
(editOn ? ` clEdit` : ``) +
getClass() +
` ` +
tools.getClassAnim(myel.anim)
" rounded size="lg" color="primary" @click="PagLogin">
{{ $t("login.enter") }}
</q-btn>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.FOOTER">
<LandingFooter />
</div>
<div v-if="editOn">
<div class="q-ma-md"></div>
</div>
</div>
</div>
<q-dialog v-model="visushare" transition-show="slide-up" transition-hide="slide-down" :maximized="$q.screen.lt.sm">
<CShareSocial v-if="social && social.description" :description="social.description" :title="social.title"
:url="social.url">
</CShareSocial>
</q-dialog>
</div>
</template>
<script lang="ts" src="./CMyElem.ts">
</script>
<style lang="scss" scoped>
@import "./CMyElem.scss";
</style>