|
|
@ -7,7 +7,7 @@
|
|
|
|
<i class="ri-brush-2-line"></i>
|
|
|
|
<i class="ri-brush-2-line"></i>
|
|
|
|
GFX
|
|
|
|
GFX
|
|
|
|
</h3>
|
|
|
|
</h3>
|
|
|
|
<template v-for="(v,i) in values" >
|
|
|
|
<template v-for="(v,i) in values">
|
|
|
|
<div v-if="v != undefined" class="p-2 item-gfx">
|
|
|
|
<div v-if="v != undefined" class="p-2 item-gfx">
|
|
|
|
<div class="float-end"
|
|
|
|
<div class="float-end"
|
|
|
|
v-if="i == 'background' || i == 'primary' || i == 'secondary' || i == 'text'">
|
|
|
|
v-if="i == 'background' || i == 'primary' || i == 'secondary' || i == 'text'">
|
|
|
@ -38,90 +38,104 @@
|
|
|
|
<input :name="'gfx['+i+']'" :type="_dbg_" :value="v">
|
|
|
|
<input :name="'gfx['+i+']'" :type="_dbg_" :value="v">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<div class="p-2">
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="col-xl-9">
|
|
|
|
|
|
|
|
<div class="item-gfx p-2 mb-2">
|
|
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
|
|
|
<div class="col-md">
|
|
|
|
|
|
|
|
Device
|
|
|
|
<select v-model="device" class="form-control">
|
|
|
|
<select v-model="device" class="form-control">
|
|
|
|
<option value="desktop"> Desktop</option>
|
|
|
|
<option value="desktop"> Desktop</option>
|
|
|
|
<option value="mobile"> Mobile</option>
|
|
|
|
<option value="mobile"> Mobile</option>
|
|
|
|
</select>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="col-md">
|
|
|
|
|
|
|
|
Preview
|
|
|
|
|
|
|
|
<select v-model="preview" class="form-control">
|
|
|
|
|
|
|
|
<option :value="k" v-for="(k,p) in previews"> {{ p }}</option>
|
|
|
|
|
|
|
|
</select>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-xl-9">
|
|
|
|
|
|
|
|
<div id="browser" :style="generalStyle" v-if="device != 'mobile'">
|
|
|
|
<div id="browser" :style="generalStyle" v-if="device != 'mobile'">
|
|
|
|
<div id="bar">
|
|
|
|
<div id="bar">
|
|
|
|
Browser
|
|
|
|
Browser
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="b-content">
|
|
|
|
<div id="b-content">
|
|
|
|
<div :class="values.container">
|
|
|
|
|
|
|
|
<div class="row" id="items-icon">
|
|
|
|
|
|
|
|
<div class="col-md-4">
|
|
|
|
|
|
|
|
<i class="ri-twitter-line"
|
|
|
|
|
|
|
|
:style="`color: ${values.primary};`"></i>
|
|
|
|
|
|
|
|
<h3 :style="`color: ${values.secondary};`">
|
|
|
|
|
|
|
|
Social media
|
|
|
|
|
|
|
|
</h3>
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque
|
|
|
|
|
|
|
|
eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam
|
|
|
|
|
|
|
|
maxime minima odio pariatur quaerat soluta temporibus velit.
|
|
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
<a class="btn-read-more"
|
|
|
|
|
|
|
|
:style="`box-shadow: ${values.shadow} ;
|
|
|
|
|
|
|
|
border-radius: ${values['border-radius']} ;
|
|
|
|
|
|
|
|
border-color: ${values.primary};
|
|
|
|
|
|
|
|
color: ${values.primary};`">
|
|
|
|
|
|
|
|
Read more
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="col-md-4">
|
|
|
|
|
|
|
|
<i class="ri-mail-line"
|
|
|
|
|
|
|
|
:style="`color: ${values.primary};`"></i>
|
|
|
|
|
|
|
|
<h3 :style="`color: ${values.secondary};`">
|
|
|
|
|
|
|
|
Contact
|
|
|
|
|
|
|
|
</h3>
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque
|
|
|
|
|
|
|
|
eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam
|
|
|
|
|
|
|
|
maxime minima odio pariatur quaerat soluta temporibus velit.
|
|
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
<a class="btn-read-more"
|
|
|
|
|
|
|
|
:style="`box-shadow: ${values.shadow} ;
|
|
|
|
|
|
|
|
border-radius: ${values['border-radius']} ;
|
|
|
|
|
|
|
|
border-color: ${values.primary};
|
|
|
|
|
|
|
|
color: ${values.primary};`">
|
|
|
|
|
|
|
|
Read more
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="col-md-4">
|
|
|
|
|
|
|
|
<i class="ri-brush-4-line"
|
|
|
|
|
|
|
|
:style="`color: ${values.primary};`"></i>
|
|
|
|
|
|
|
|
<h3 :style="`color: ${values.secondary};`">
|
|
|
|
|
|
|
|
Design
|
|
|
|
|
|
|
|
</h3>
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque
|
|
|
|
|
|
|
|
eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam
|
|
|
|
|
|
|
|
maxime minima odio pariatur quaerat soluta temporibus velit.
|
|
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
<a class="btn-read-more"
|
|
|
|
|
|
|
|
:style="`box-shadow: ${values.shadow} ;
|
|
|
|
|
|
|
|
border-radius: ${values['border-radius']} ;
|
|
|
|
|
|
|
|
border-color: ${values.primary};
|
|
|
|
|
|
|
|
color: ${values.primary};`">
|
|
|
|
|
|
|
|
Read more
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div id="big-box" :style="`box-shadow: ${values.shadow} ;
|
|
|
|
<iframe :src="preview" class="preview-frame"></iframe>
|
|
|
|
border-radius: ${values['border-radius']} ;
|
|
|
|
<!-- <div :class="values.container">-->
|
|
|
|
background: linear-gradient(49deg, ${values.primary} 42%, ${values.secondary} 100%);`">
|
|
|
|
<!-- <div class="row" id="items-icon">-->
|
|
|
|
<h3 class="diff">
|
|
|
|
<!-- <div class="col-md-4">-->
|
|
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate iste ut
|
|
|
|
<!-- <i class="ri-twitter-line"-->
|
|
|
|
veritatis?
|
|
|
|
<!-- :style="`color: ${values.primary};`"></i>-->
|
|
|
|
</h3>
|
|
|
|
<!-- <h3 :style="`color: ${values.secondary};`">-->
|
|
|
|
</div>
|
|
|
|
<!-- Social media-->
|
|
|
|
</div>
|
|
|
|
<!-- </h3>-->
|
|
|
|
|
|
|
|
<!-- <p>-->
|
|
|
|
|
|
|
|
<!-- Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque-->
|
|
|
|
|
|
|
|
<!-- eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam-->
|
|
|
|
|
|
|
|
<!-- maxime minima odio pariatur quaerat soluta temporibus velit.-->
|
|
|
|
|
|
|
|
<!-- </p>-->
|
|
|
|
|
|
|
|
<!-- <a class="btn-read-more"-->
|
|
|
|
|
|
|
|
<!-- :style="`box-shadow: ${values.shadow} ;-->
|
|
|
|
|
|
|
|
<!-- border-radius: ${values['border-radius']} ;-->
|
|
|
|
|
|
|
|
<!-- border-color: ${values.primary};-->
|
|
|
|
|
|
|
|
<!-- color: ${values.primary};`">-->
|
|
|
|
|
|
|
|
<!-- Read more-->
|
|
|
|
|
|
|
|
<!-- </a>-->
|
|
|
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
|
|
|
<!-- <div class="col-md-4">-->
|
|
|
|
|
|
|
|
<!-- <i class="ri-mail-line"-->
|
|
|
|
|
|
|
|
<!-- :style="`color: ${values.primary};`"></i>-->
|
|
|
|
|
|
|
|
<!-- <h3 :style="`color: ${values.secondary};`">-->
|
|
|
|
|
|
|
|
<!-- Contact-->
|
|
|
|
|
|
|
|
<!-- </h3>-->
|
|
|
|
|
|
|
|
<!-- <p>-->
|
|
|
|
|
|
|
|
<!-- Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque-->
|
|
|
|
|
|
|
|
<!-- eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam-->
|
|
|
|
|
|
|
|
<!-- maxime minima odio pariatur quaerat soluta temporibus velit.-->
|
|
|
|
|
|
|
|
<!-- </p>-->
|
|
|
|
|
|
|
|
<!-- <a class="btn-read-more"-->
|
|
|
|
|
|
|
|
<!-- :style="`box-shadow: ${values.shadow} ;-->
|
|
|
|
|
|
|
|
<!-- border-radius: ${values['border-radius']} ;-->
|
|
|
|
|
|
|
|
<!-- border-color: ${values.primary};-->
|
|
|
|
|
|
|
|
<!-- color: ${values.primary};`">-->
|
|
|
|
|
|
|
|
<!-- Read more-->
|
|
|
|
|
|
|
|
<!-- </a>-->
|
|
|
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
|
|
|
<!-- <div class="col-md-4">-->
|
|
|
|
|
|
|
|
<!-- <i class="ri-brush-4-line"-->
|
|
|
|
|
|
|
|
<!-- :style="`color: ${values.primary};`"></i>-->
|
|
|
|
|
|
|
|
<!-- <h3 :style="`color: ${values.secondary};`">-->
|
|
|
|
|
|
|
|
<!-- Design-->
|
|
|
|
|
|
|
|
<!-- </h3>-->
|
|
|
|
|
|
|
|
<!-- <p>-->
|
|
|
|
|
|
|
|
<!-- Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque-->
|
|
|
|
|
|
|
|
<!-- eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam-->
|
|
|
|
|
|
|
|
<!-- maxime minima odio pariatur quaerat soluta temporibus velit.-->
|
|
|
|
|
|
|
|
<!-- </p>-->
|
|
|
|
|
|
|
|
<!-- <a class="btn-read-more"-->
|
|
|
|
|
|
|
|
<!-- :style="`box-shadow: ${values.shadow} ;-->
|
|
|
|
|
|
|
|
<!-- border-radius: ${values['border-radius']} ;-->
|
|
|
|
|
|
|
|
<!-- border-color: ${values.primary};-->
|
|
|
|
|
|
|
|
<!-- color: ${values.primary};`">-->
|
|
|
|
|
|
|
|
<!-- Read more-->
|
|
|
|
|
|
|
|
<!-- </a>-->
|
|
|
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <div id="big-box" :style="`box-shadow: ${values.shadow} ;-->
|
|
|
|
|
|
|
|
<!-- border-radius: ${values['border-radius']} ;-->
|
|
|
|
|
|
|
|
<!-- background: linear-gradient(49deg, ${values.primary} 42%, ${values.secondary} 100%);`">-->
|
|
|
|
|
|
|
|
<!-- <h3 class="diff">-->
|
|
|
|
|
|
|
|
<!-- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate iste ut-->
|
|
|
|
|
|
|
|
<!-- veritatis?-->
|
|
|
|
|
|
|
|
<!-- </h3>-->
|
|
|
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
|
|
|
<!-- </div>-->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="mobile" :style="generalStyle" v-if="device == 'mobile'">
|
|
|
|
<div id="mobile" :style="generalStyle" v-if="device == 'mobile'">
|
|
|
@ -141,76 +155,77 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="m-content" :class="values.container">
|
|
|
|
<iframe :src="preview" class="preview-frame"></iframe>
|
|
|
|
<div class="row" id="items-icon">
|
|
|
|
<!-- <div id="m-content" :class="values.container">-->
|
|
|
|
<div class="col-md-12">
|
|
|
|
<!-- <div class="row" id="items-icon">-->
|
|
|
|
<i class="ri-twitter-line"
|
|
|
|
<!-- <div class="col-md-12">-->
|
|
|
|
:style="`color: ${values.primary};`"></i>
|
|
|
|
<!-- <i class="ri-twitter-line"-->
|
|
|
|
<h3 :style="`color: ${values.secondary};`">
|
|
|
|
<!-- :style="`color: ${values.primary};`"></i>-->
|
|
|
|
Social media
|
|
|
|
<!-- <h3 :style="`color: ${values.secondary};`">-->
|
|
|
|
</h3>
|
|
|
|
<!-- Social media-->
|
|
|
|
<p>
|
|
|
|
<!-- </h3>-->
|
|
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque
|
|
|
|
<!-- <p>-->
|
|
|
|
eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam
|
|
|
|
<!-- Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque-->
|
|
|
|
maxime minima odio pariatur quaerat soluta temporibus velit.
|
|
|
|
<!-- eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam-->
|
|
|
|
</p>
|
|
|
|
<!-- maxime minima odio pariatur quaerat soluta temporibus velit.-->
|
|
|
|
<a class="btn-read-more"
|
|
|
|
<!-- </p>-->
|
|
|
|
:style="`box-shadow: ${values.shadow} ;
|
|
|
|
<!-- <a class="btn-read-more"-->
|
|
|
|
border-radius: ${values['border-radius']} ;
|
|
|
|
<!-- :style="`box-shadow: ${values.shadow} ;-->
|
|
|
|
border-color: ${values.primary};
|
|
|
|
<!-- border-radius: ${values['border-radius']} ;-->
|
|
|
|
color: ${values.primary};`">
|
|
|
|
<!-- border-color: ${values.primary};-->
|
|
|
|
Read more
|
|
|
|
<!-- color: ${values.primary};`">-->
|
|
|
|
</a>
|
|
|
|
<!-- Read more-->
|
|
|
|
</div>
|
|
|
|
<!-- </a>-->
|
|
|
|
<div class="col-12">
|
|
|
|
<!-- </div>-->
|
|
|
|
<i class="ri-mail-line"
|
|
|
|
<!-- <div class="col-12">-->
|
|
|
|
:style="`color: ${values.primary};`"></i>
|
|
|
|
<!-- <i class="ri-mail-line"-->
|
|
|
|
<h3 :style="`color: ${values.secondary};`">
|
|
|
|
<!-- :style="`color: ${values.primary};`"></i>-->
|
|
|
|
Contact
|
|
|
|
<!-- <h3 :style="`color: ${values.secondary};`">-->
|
|
|
|
</h3>
|
|
|
|
<!-- Contact-->
|
|
|
|
<p>
|
|
|
|
<!-- </h3>-->
|
|
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque
|
|
|
|
<!-- <p>-->
|
|
|
|
eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam
|
|
|
|
<!-- Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque-->
|
|
|
|
maxime minima odio pariatur quaerat soluta temporibus velit.
|
|
|
|
<!-- eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam-->
|
|
|
|
</p>
|
|
|
|
<!-- maxime minima odio pariatur quaerat soluta temporibus velit.-->
|
|
|
|
<a class="btn-read-more"
|
|
|
|
<!-- </p>-->
|
|
|
|
:style="`box-shadow: ${values.shadow} ;
|
|
|
|
<!-- <a class="btn-read-more"-->
|
|
|
|
border-radius: ${values['border-radius']} ;
|
|
|
|
<!-- :style="`box-shadow: ${values.shadow} ;-->
|
|
|
|
border-color: ${values.primary};
|
|
|
|
<!-- border-radius: ${values['border-radius']} ;-->
|
|
|
|
color: ${values.primary};`">
|
|
|
|
<!-- border-color: ${values.primary};-->
|
|
|
|
Read more
|
|
|
|
<!-- color: ${values.primary};`">-->
|
|
|
|
</a>
|
|
|
|
<!-- Read more-->
|
|
|
|
</div>
|
|
|
|
<!-- </a>-->
|
|
|
|
<div class="col-12">
|
|
|
|
<!-- </div>-->
|
|
|
|
<i class="ri-brush-4-line"
|
|
|
|
<!-- <div class="col-12">-->
|
|
|
|
:style="`color: ${values.primary};`"></i>
|
|
|
|
<!-- <i class="ri-brush-4-line"-->
|
|
|
|
<h3 :style="`color: ${values.secondary};`">
|
|
|
|
<!-- :style="`color: ${values.primary};`"></i>-->
|
|
|
|
Design
|
|
|
|
<!-- <h3 :style="`color: ${values.secondary};`">-->
|
|
|
|
</h3>
|
|
|
|
<!-- Design-->
|
|
|
|
<p>
|
|
|
|
<!-- </h3>-->
|
|
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque
|
|
|
|
<!-- <p>-->
|
|
|
|
eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam
|
|
|
|
<!-- Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque-->
|
|
|
|
maxime minima odio pariatur quaerat soluta temporibus velit.
|
|
|
|
<!-- eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam-->
|
|
|
|
</p>
|
|
|
|
<!-- maxime minima odio pariatur quaerat soluta temporibus velit.-->
|
|
|
|
<a class="btn-read-more"
|
|
|
|
<!-- </p>-->
|
|
|
|
:style="`box-shadow: ${values.shadow} ;
|
|
|
|
<!-- <a class="btn-read-more"-->
|
|
|
|
border-radius: ${values['border-radius']} ;
|
|
|
|
<!-- :style="`box-shadow: ${values.shadow} ;-->
|
|
|
|
border-color: ${values.primary};
|
|
|
|
<!-- border-radius: ${values['border-radius']} ;-->
|
|
|
|
color: ${values.primary};`">
|
|
|
|
<!-- border-color: ${values.primary};-->
|
|
|
|
Read more
|
|
|
|
<!-- color: ${values.primary};`">-->
|
|
|
|
</a>
|
|
|
|
<!-- Read more-->
|
|
|
|
</div>
|
|
|
|
<!-- </a>-->
|
|
|
|
</div>
|
|
|
|
<!-- </div>-->
|
|
|
|
|
|
|
|
<!-- </div>-->
|
|
|
|
<div id="big-box" :style="`box-shadow: ${values.shadow} ;
|
|
|
|
|
|
|
|
border-radius: ${values['border-radius']} ;
|
|
|
|
<!-- <div id="big-box" :style="`box-shadow: ${values.shadow} ;-->
|
|
|
|
background: linear-gradient(49deg, ${values.primary} 42%, ${values.secondary} 100%);`">
|
|
|
|
<!-- border-radius: ${values['border-radius']} ;-->
|
|
|
|
<h3 style="filter: invert(1);mix-blend-mode: difference;">
|
|
|
|
<!-- background: linear-gradient(49deg, ${values.primary} 42%, ${values.secondary} 100%);`">-->
|
|
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate iste ut
|
|
|
|
<!-- <h3 style="filter: invert(1);mix-blend-mode: difference;">-->
|
|
|
|
veritatis?
|
|
|
|
<!-- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate iste ut-->
|
|
|
|
</h3>
|
|
|
|
<!-- veritatis?-->
|
|
|
|
</div>
|
|
|
|
<!-- </h3>-->
|
|
|
|
</div>
|
|
|
|
<!-- </div>-->
|
|
|
|
|
|
|
|
<!-- </div>-->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
@ -221,6 +236,11 @@
|
|
|
|
|
|
|
|
|
|
|
|
import BorderRadiosInput from "./BorderRadiosInput.vue";
|
|
|
|
import BorderRadiosInput from "./BorderRadiosInput.vue";
|
|
|
|
import ShadowInput from "./ShadowInput.vue";
|
|
|
|
import ShadowInput from "./ShadowInput.vue";
|
|
|
|
|
|
|
|
function iframeRef( frameRef ) {
|
|
|
|
|
|
|
|
return frameRef.contentWindow
|
|
|
|
|
|
|
|
? frameRef.contentWindow.document
|
|
|
|
|
|
|
|
: frameRef.contentDocument
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
name: "gfxer",
|
|
|
|
name: "gfxer",
|
|
|
@ -233,11 +253,18 @@ export default {
|
|
|
|
_dbg_: 'hidden',
|
|
|
|
_dbg_: 'hidden',
|
|
|
|
values: {},
|
|
|
|
values: {},
|
|
|
|
titles: {},
|
|
|
|
titles: {},
|
|
|
|
|
|
|
|
preview: null,
|
|
|
|
device: 'desktop', // desktop
|
|
|
|
device: 'desktop', // desktop
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
props: {
|
|
|
|
props: {
|
|
|
|
items: {},
|
|
|
|
items: {
|
|
|
|
|
|
|
|
required: true,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
previews: {
|
|
|
|
|
|
|
|
default: [],
|
|
|
|
|
|
|
|
type: Array,
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
mounted() {
|
|
|
|
for (const i in this.items) {
|
|
|
|
for (const i in this.items) {
|
|
|
@ -245,8 +272,10 @@ export default {
|
|
|
|
this.titles[item.key] = item.label;
|
|
|
|
this.titles[item.key] = item.label;
|
|
|
|
this.values[item.key] = item.value;
|
|
|
|
this.values[item.key] = item.value;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if (Object.keys(this.previews).length > 0) {
|
|
|
|
console.log(this.items);
|
|
|
|
this.preview = Object.values(this.previews)[0];
|
|
|
|
|
|
|
|
console.log(this.preview, 'x');
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
computed: {
|
|
|
|
generalStyle() { //
|
|
|
|
generalStyle() { //
|
|
|
@ -301,8 +330,48 @@ export default {
|
|
|
|
else if (g < 0) g = 0;
|
|
|
|
else if (g < 0) g = 0;
|
|
|
|
|
|
|
|
|
|
|
|
return (usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16);
|
|
|
|
return (usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16);
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
updateIframes(newVal){
|
|
|
|
|
|
|
|
document.querySelectorAll('.preview-frame').forEach( (preview) => {
|
|
|
|
|
|
|
|
let doc = iframeRef(preview);
|
|
|
|
|
|
|
|
let sty = doc.documentElement.style ;
|
|
|
|
|
|
|
|
sty.setProperty('--xshop-primary',newVal.primary);
|
|
|
|
|
|
|
|
sty.setProperty('--xshop-background',newVal.background);
|
|
|
|
|
|
|
|
sty.setProperty('--xshop-secondary',newVal.secondary);
|
|
|
|
|
|
|
|
sty.setProperty('--xshop-text',newVal.text);
|
|
|
|
|
|
|
|
sty.setProperty('--xshop-border-radius',newVal['border-radius']);
|
|
|
|
|
|
|
|
sty.setProperty('--xshop-shadow',newVal.shadow);
|
|
|
|
|
|
|
|
let newContainer = 'container';
|
|
|
|
|
|
|
|
let oldContainer = 'container-fluid';
|
|
|
|
|
|
|
|
if (newVal.container == 'container-fluid'){
|
|
|
|
|
|
|
|
newContainer = 'container-fluid';
|
|
|
|
|
|
|
|
oldContainer = 'container';
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
doc.querySelectorAll('.'+oldContainer).forEach(function (el) {
|
|
|
|
|
|
|
|
el.classList.remove(oldContainer);
|
|
|
|
|
|
|
|
el.classList.add(newContainer);
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
watch: {
|
|
|
|
|
|
|
|
values:{
|
|
|
|
|
|
|
|
handler (val) {
|
|
|
|
|
|
|
|
this.updateIframes(val);
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
deep: true
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
device(){
|
|
|
|
|
|
|
|
setTimeout( () => {
|
|
|
|
|
|
|
|
this.updateIframes(this.values);
|
|
|
|
|
|
|
|
},750);
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
preview(){
|
|
|
|
|
|
|
|
setTimeout( () => {
|
|
|
|
|
|
|
|
this.updateIframes(this.values);
|
|
|
|
|
|
|
|
},750);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
@ -400,4 +469,9 @@ export default {
|
|
|
|
filter: invert(1);
|
|
|
|
filter: invert(1);
|
|
|
|
mix-blend-mode: difference;
|
|
|
|
mix-blend-mode: difference;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.preview-frame {
|
|
|
|
|
|
|
|
height: 80vh;
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|