mirror of https://github.com/4xmen/xshop.git
added GFX to panel
parent
a38f273f04
commit
2cc4a75976
@ -0,0 +1,26 @@
|
||||
<?php
|
||||
|
||||
namespace App\Http\Controllers\Admin;
|
||||
|
||||
use App\Http\Controllers\Controller;
|
||||
use App\Models\Gfx;
|
||||
use Illuminate\Http\Request;
|
||||
|
||||
class GfxController extends Controller
|
||||
{
|
||||
//
|
||||
public function index(){
|
||||
return view('admin.commons.gfx');
|
||||
}
|
||||
|
||||
public function update( Request $request){
|
||||
|
||||
foreach ($request->input('gfx',[]) as $key => $gfx){
|
||||
$g = Gfx::where('key',$key)->first();
|
||||
$g->value = $gfx;
|
||||
$g->save();
|
||||
}
|
||||
logAdmin(__METHOD__,__CLASS__,null);
|
||||
return redirect()->back()->with(['message' => __('GFX of website updated')]);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
<?php
|
||||
|
||||
namespace App\Models;
|
||||
|
||||
use Illuminate\Database\Eloquent\Factories\HasFactory;
|
||||
use Illuminate\Database\Eloquent\Model;
|
||||
|
||||
class Gfx extends Model
|
||||
{
|
||||
use HasFactory;
|
||||
}
|
||||
@ -0,0 +1,31 @@
|
||||
<?php
|
||||
|
||||
use Illuminate\Database\Migrations\Migration;
|
||||
use Illuminate\Database\Schema\Blueprint;
|
||||
use Illuminate\Support\Facades\Schema;
|
||||
|
||||
return new class extends Migration
|
||||
{
|
||||
/**
|
||||
* Run the migrations.
|
||||
*/
|
||||
public function up(): void
|
||||
{
|
||||
Schema::create('gfxes', function (Blueprint $table) {
|
||||
$table->id();
|
||||
$table->string('key')->unique();
|
||||
$table->string('label');
|
||||
$table->boolean('system')->default(0);
|
||||
$table->longText('value');
|
||||
$table->timestamps();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Reverse the migrations.
|
||||
*/
|
||||
public function down(): void
|
||||
{
|
||||
Schema::dropIfExists('gfxes');
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,76 @@
|
||||
<?php
|
||||
|
||||
namespace Database\Seeders;
|
||||
|
||||
use App\Models\Gfx;
|
||||
use Illuminate\Database\Console\Seeds\WithoutModelEvents;
|
||||
use Illuminate\Database\Seeder;
|
||||
|
||||
class GfxSeeder extends Seeder
|
||||
{
|
||||
/**
|
||||
* Run the database seeds.
|
||||
*/
|
||||
public function run(): void
|
||||
{
|
||||
//
|
||||
|
||||
$array = [
|
||||
[
|
||||
'key'=>'background',
|
||||
'label'=>'background color',
|
||||
'system'=>'1',
|
||||
'value'=> '#eeeeee'
|
||||
],
|
||||
[
|
||||
'key'=>'primary',
|
||||
'label'=>'Primary color',
|
||||
'system'=>'1',
|
||||
'value'=> '#6e0000'
|
||||
],
|
||||
[
|
||||
'key'=>'secondary',
|
||||
'label'=>'Secondary color',
|
||||
'system'=>'1',
|
||||
'value'=> '#ff0000'
|
||||
],
|
||||
[
|
||||
'key'=>'text',
|
||||
'label'=>'Text color',
|
||||
'system'=>'1',
|
||||
'value'=> '#111111'
|
||||
],
|
||||
[
|
||||
'key'=>'border-radius',
|
||||
'label'=>'Border radius',
|
||||
'system'=>'1',
|
||||
'value'=> '7px'
|
||||
],
|
||||
[
|
||||
'key'=>'shadow',
|
||||
'label'=>'Shadow',
|
||||
'system'=>'1',
|
||||
'value'=> '2px 2px 4px #777777'
|
||||
],
|
||||
[
|
||||
'key'=>'container',
|
||||
'label'=>'Container',
|
||||
'system'=>'1',
|
||||
'value'=> 'container'
|
||||
],
|
||||
[
|
||||
'key'=>'font',
|
||||
'label'=>'font',
|
||||
'system'=>'1',
|
||||
'value'=> 'Vazir'
|
||||
],
|
||||
|
||||
];
|
||||
|
||||
|
||||
foreach ($array as $item) {
|
||||
$item['created_at'] = date('Y-m-d H:i:s');
|
||||
Gfx::insert($item);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div id="border-radios-input">
|
||||
<div id="shadow-input">
|
||||
|
||||
<div class="row mb-2">
|
||||
<template v-for="i in 4">
|
||||
<div class="col text-center" v-if="i != 3">
|
||||
<button type="button" :class="`cir-btn `+(i == count?'active':'')" @click="count = i">
|
||||
{{ i }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-10">
|
||||
<input type="range" class="form-range" v-model="val1" min="0" max="99">
|
||||
</div>
|
||||
<div class="col-2 text-end">
|
||||
{{ val1 }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="count > 1" class="row">
|
||||
<div class="col-10">
|
||||
<input type="range" class="form-range" v-model="val2" min="0" max="99">
|
||||
</div>
|
||||
<div class="col-2 text-end">
|
||||
{{ val2 }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="count > 2" class="row">
|
||||
<div class="col-10">
|
||||
<input type="range" class="form-range" v-model="val3" min="0" max="99">
|
||||
</div>
|
||||
<div class="col-2 text-end">
|
||||
{{ val3 }}
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<input type="range" class="form-range" v-model="val4" min="0" max="99">
|
||||
</div>
|
||||
<div class="col-2 text-end">
|
||||
{{ val4 }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="hidden" :value="calcVal">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "border-radios-input",
|
||||
components: {},
|
||||
data: () => {
|
||||
return {
|
||||
count: 0,
|
||||
val1: 0,
|
||||
val2: 0,
|
||||
val3: 0,
|
||||
val4: 0,
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue'],
|
||||
props: {
|
||||
modelValue: {
|
||||
default: '7px'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// setTimeout(()=>{
|
||||
let spltd = this.modelValue.trim().split(' ');
|
||||
this.count = spltd.length;
|
||||
// make valid
|
||||
for (const s in spltd) {
|
||||
spltd[s] = parseInt(spltd[s]);
|
||||
this['val' + (parseInt(s) + 1)] = parseInt(spltd[s]);
|
||||
}
|
||||
// },30);
|
||||
},
|
||||
computed: {
|
||||
calcVal() {
|
||||
let result;
|
||||
if (this.count == 0){
|
||||
return '';
|
||||
}
|
||||
if (this.count == 1) {
|
||||
result = this.val1 + 'px';
|
||||
} else if (this.count == 2) {
|
||||
result = this.val1 + 'px ' + this.val2 + 'px';
|
||||
}else if (this.count == 4) {
|
||||
result = this.val1 + 'px ' + this.val2 + 'px ' +this.val3 + 'px ' + this.val4 + 'px';
|
||||
}
|
||||
|
||||
this.$emit('update:modelValue', result);
|
||||
return result.trim();
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#border-radios-input {
|
||||
|
||||
}
|
||||
|
||||
.cir-btn {
|
||||
background: transparent;
|
||||
font-size: 17px;
|
||||
border: 1px solid gray;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
padding-top: 3px;
|
||||
|
||||
&.active {
|
||||
background: darkred;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,399 @@
|
||||
<template>
|
||||
<div id="gfxer">
|
||||
<div class="row">
|
||||
<div class="col-xl-3">
|
||||
<div class="item-list mb-3">
|
||||
<h3 class="p-3">
|
||||
<i class="ri-brush-2-line"></i>
|
||||
GFX
|
||||
</h3>
|
||||
<div v-for="(v,i) in values" class="p-2 item-gfx">
|
||||
<div class="float-end"
|
||||
v-if="i == 'background' || i == 'primary' || i == 'secondary' || i == 'text'">
|
||||
<input type="color" v-model="values[i]" class="form-control-color">
|
||||
</div>
|
||||
<label class="pt-2 mb-1">
|
||||
{{ titles[i] }}
|
||||
</label>
|
||||
<br>
|
||||
<template v-if="i == 'border-radius'">
|
||||
<border-radios-input v-model="values[i]"></border-radios-input>
|
||||
</template>
|
||||
<template v-if="i == 'shadow'">
|
||||
<shadow-input v-model="values[i]"></shadow-input>
|
||||
</template>
|
||||
<template v-if="i == 'font'">
|
||||
<select v-model="values[i]" class="form-control">
|
||||
<option value="Vazir"> Vazir</option>
|
||||
</select>
|
||||
</template>
|
||||
<template v-if="i == 'container'">
|
||||
<select v-model="values[i]" class="form-control">
|
||||
<option value="container"> Container</option>
|
||||
<option value="container-fluid"> Container fluid</option>
|
||||
</select>
|
||||
</template>
|
||||
<input :name="'gfx['+i+']'" :type="_dbg_" :value="v">
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<select v-model="device" class="form-control">
|
||||
<option value="desktop"> Desktop</option>
|
||||
<option value="mobile"> Mobile</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-9">
|
||||
<div id="browser" :style="generalStyle" v-if="device != 'mobile'">
|
||||
<div id="bar">
|
||||
Browser
|
||||
</div>
|
||||
<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} ;
|
||||
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 id="mobile" :style="generalStyle" v-if="device == 'mobile'">
|
||||
<div id="mobile-top" :style="`background: ${lighter};`">
|
||||
<div class="diff p-1 d-flex align-items-center justify-content-between ">
|
||||
<span>
|
||||
<i class="ri-wifi-line"></i>
|
||||
</span>
|
||||
<span>
|
||||
{{nowTime}}
|
||||
</span>
|
||||
<i class="ri-battery-low-line"></i>
|
||||
</div>
|
||||
<div :style="`background: ${values.primary};`" >
|
||||
<div class="diff p-2">
|
||||
{{tempUrl}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="m-content" :class="values.container">
|
||||
<div class="row" id="items-icon">
|
||||
<div class="col-md-12">
|
||||
<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-12">
|
||||
<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-12">
|
||||
<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 style="filter: invert(1);mix-blend-mode: difference;">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate iste ut
|
||||
veritatis?
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import BorderRadiosInput from "./BorderRadiosInput.vue";
|
||||
import ShadowInput from "./ShadowInput.vue";
|
||||
|
||||
export default {
|
||||
name: "gfxer",
|
||||
components: {
|
||||
BorderRadiosInput,
|
||||
ShadowInput
|
||||
},
|
||||
data: () => {
|
||||
return {
|
||||
_dbg_: 'hidden',
|
||||
values: {},
|
||||
titles: {},
|
||||
device: 'desktop', // desktop
|
||||
}
|
||||
},
|
||||
props: {
|
||||
items: {},
|
||||
},
|
||||
mounted() {
|
||||
for (const i in this.items) {
|
||||
let item = this.items[i];
|
||||
this.titles[item.key] = item.label;
|
||||
this.values[item.key] = item.value;
|
||||
}
|
||||
|
||||
console.log(this.items);
|
||||
},
|
||||
computed: {
|
||||
generalStyle() { //
|
||||
let css = '';
|
||||
console.log();
|
||||
if (this.values.background != null) {
|
||||
css += 'background-color: ' + this.values.background + ';';
|
||||
}
|
||||
if (this.values.text != null) {
|
||||
css += 'color: ' + this.values.text + ';';
|
||||
}
|
||||
|
||||
return css;
|
||||
},
|
||||
tempUrl(){
|
||||
return window.location.hostname;
|
||||
},
|
||||
nowTime(){
|
||||
const dt = new Date();
|
||||
return dt.getHours()+':'+dt.getMinutes();
|
||||
},
|
||||
lighter(){
|
||||
if (this.values.primary != undefined){
|
||||
return this.lightenColor(this.values.primary);
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
lightenColor(col,amt = 20) {
|
||||
var usePound = false;
|
||||
if ( col[0] == "#" ) {
|
||||
col = col.slice(1);
|
||||
usePound = true;
|
||||
}
|
||||
|
||||
var num = parseInt(col,16);
|
||||
|
||||
var r = (num >> 16) + amt;
|
||||
|
||||
if ( r > 255 ) r = 255;
|
||||
else if (r < 0) r = 0;
|
||||
|
||||
var b = ((num >> 8) & 0x00FF) + amt;
|
||||
|
||||
if ( b > 255 ) b = 255;
|
||||
else if (b < 0) b = 0;
|
||||
|
||||
var g = (num & 0x0000FF) + amt;
|
||||
|
||||
if ( g > 255 ) g = 255;
|
||||
else if ( g < 0 ) g = 0;
|
||||
|
||||
return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#gfxer {
|
||||
|
||||
}
|
||||
|
||||
#mobile {
|
||||
width: 400px;
|
||||
height: 800px;
|
||||
border-radius: 20px;
|
||||
border: 4px solid gray;
|
||||
background: #fff;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#m-content{
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#browser {
|
||||
border-radius: 7px;
|
||||
border: 4px solid silver;
|
||||
min-height: 80vh;
|
||||
background: #fff;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
#bar {
|
||||
display: block;
|
||||
background: silver;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding-top: 3px;
|
||||
|
||||
height: 30px;
|
||||
|
||||
&:before {
|
||||
content: ' ';
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
background: red;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: ' ';
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
background: #00d75c;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 35px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-gfx:hover {
|
||||
background: #ffffff22;
|
||||
}
|
||||
|
||||
#items-icon {
|
||||
text-align: center;
|
||||
|
||||
i {
|
||||
font-size: 75px;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.btn-read-more {
|
||||
border: 1px solid gray;
|
||||
display: block;
|
||||
padding: 5px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
}
|
||||
|
||||
#big-box {
|
||||
margin-top: 1rem;
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
.diff{
|
||||
filter: invert(1);mix-blend-mode: difference;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div id="shadow-input">
|
||||
<div class="row">
|
||||
<div class="col-10">
|
||||
<input type="range" class="form-range" v-model="x" min="-99" max="99">
|
||||
</div>
|
||||
<div class="col-2 text-end">
|
||||
X: {{ x }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-10">
|
||||
<input type="range" class="form-range" v-model="y" min="-99" max="99">
|
||||
</div>
|
||||
<div class="col-2 text-end">
|
||||
Y: {{ y }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-9">
|
||||
<input type="range" class="form-range" v-model="blur" min="0" max="50">
|
||||
</div>
|
||||
<div class="col-3 text-end">
|
||||
Blur: {{ blur }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-9">
|
||||
<input type="color" class="form-control-color" v-model="color" >
|
||||
</div>
|
||||
<div class="col-3 text-end">
|
||||
Color
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" :value="calcVal">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "shadow-input",
|
||||
components: {},
|
||||
data: () => {
|
||||
return {
|
||||
x: 0,
|
||||
y: 0,
|
||||
blur: 0,
|
||||
color: '#dddddd',
|
||||
mounted : false,
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue'],
|
||||
props: {
|
||||
modelValue: {
|
||||
default: '2px 2px 4px #ff0000'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let spltd = this.modelValue.trim().split(' ');
|
||||
console.log(spltd);
|
||||
this.x = parseInt(spltd[0]);
|
||||
this.y = parseInt(spltd[1]);
|
||||
this.blur = parseInt(spltd[2]);
|
||||
this.color = spltd[3];
|
||||
this.mounted = true;
|
||||
},
|
||||
computed: {
|
||||
calcVal() {
|
||||
if (!this.mounted){
|
||||
return '';
|
||||
}
|
||||
let result = this.x+'px '+this.y+'px '+this.blur+'px '+this.color;
|
||||
this.$emit('update:modelValue', result);
|
||||
return result.trim();
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#shadow-input {
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,20 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('content')
|
||||
<form action="{{route('admin.gfx.update')}}" method="post" class="mb-5 pb-5">
|
||||
@csrf
|
||||
@include('components.err')
|
||||
<gfxer :items='@json(\App\Models\Gfx::all('key','label','value'))'></gfxer>
|
||||
<button
|
||||
data-link="{{getRoute('update')}}"
|
||||
id="save-sort"
|
||||
class="action-btn circle-btn"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="top"
|
||||
data-bs-custom-class="custom-tooltip"
|
||||
data-bs-title="{{__("Save")}}"
|
||||
>
|
||||
<i class="ri-save-2-line"></i>
|
||||
</button>
|
||||
</form>
|
||||
@endsection
|
||||
@ -1,10 +1,12 @@
|
||||
@if(session()->has('message'))
|
||||
<div class="alert alert-info">
|
||||
<i class="ri-check-double-line"></i>
|
||||
{{ session()->get('message') }}
|
||||
</div>
|
||||
@endif
|
||||
@foreach($errors->all() as $err)
|
||||
<div class="alert alert-danger">
|
||||
<i class="ri-error-warning-line"></i>
|
||||
{{$err}}
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
Loading…
Reference in New Issue