surya/newfreeplanet_OLD
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- cataloghi...

Browse Source 
- fix: condividi su Telegram non funzionava errore sull'immagine
This commit is contained in:
Surya Paolo
2024-11-02 18:06:27 +01:00
parent 2ea6468100
commit 1c63b5346b
91 changed files with 2105 additions and 306 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/components/CBorders/CBorders.scss Executable file
View File

67
src/components/CBorders/CBorders.ts Executable file
View File

@@ -0,0 +1,67 @@
import { defineComponent, ref, computed, PropType, toRef, reactive, watch } from 'vue'
import { IBorder, IOperators, ISize } from 'model'
import { useI18n } from '@/boot/i18n'
import { useQuasar } from 'quasar'
import { CMySlider } from '@src/components/CMySlider'
import { shared_consts } from '@/common/shared_vuejs'
export default defineComponent({
name: 'CBorders',
emits: ['update:modelValue'],
components: { CMySlider },
props: {
modelValue: {
type: Object as PropType<IBorder>,
required: true,
},
label: {
type: String,
required: true,
},
disable: {
type: Boolean,
required: false,
default: false,
},
},
setup(props, { emit }) {
const $q = useQuasar()
const { t } = useI18n()
const internalModel = reactive({ ...props.modelValue })
function modifValueTop(value: any) {
emit('update:modelValue', { ...internalModel, top: value });
}
function modifValueBottom(value: any) {
emit('update:modelValue', { ...internalModel, bottom: value });
}
function modifValueLeft(value: any) {
emit('update:modelValue', { ...internalModel, left: value });
}
function modifValueRight(value: any) {
emit('update:modelValue', { ...internalModel, right: value });
}
// Sincronizzare i cambiamenti esterni con internalModel quando props cambiano
watch(() => props.modelValue, (newModel: any) => {
Object.assign(internalModel, newModel);
}, { immediate: true });
return {
t,
shared_consts,
modifValueTop,
modifValueBottom,
modifValueLeft,
modifValueRight,
internalModel,
}
}
})

59
src/components/CBorders/CBorders.vue Executable file
View File

@@ -0,0 +1,59 @@
<template>
<div style="width: 380px">
<q-banner
rounded
dense
class="bg-orange-2 text-red"
color="primary q-title"
style="text-align: center"
>
{{ label }}
</q-banner>
<div class="row">
<CMySlider
label="Top:"
v-model="internalModel.top"
:min="10"
:max="3000"
color="green"
addstr="px"
@update:model-value="modifValueTop"
></CMySlider>
<CMySlider
label="Bottom:"
v-model="internalModel.bottom"
:min="10"
:max="3000"
color="red"
addstr="px"
@update:model-value="modifValueBottom"
></CMySlider>
<CMySlider
label="Left:"
v-model="internalModel.left"
:min="10"
:max="3000"
color="orange"
addstr="px"
@update:model-value="modifValueLeft"
></CMySlider>
<CMySlider
label="Right:"
v-model="internalModel.right"
:min="10"
:max="3000"
color="fuchsia"
addstr="px"
@update:model-value="modifValueRight"
></CMySlider>
</div>
</div>
</template>
<script lang="ts" src="./CBorders.ts">
</script>
<style lang="scss" scoped>
@import './CBorders.scss';
</style>

1
src/components/CBorders/index.ts Executable file
View File

@@ -0,0 +1 @@
export {default as CBorders} from './CBorders.vue'

9
src/components/CCatalogoCard/CCatalogoCard.ts
View File

@@ -12,7 +12,7 @@ import { CPrice } from '../CPrice'
import { func_tools, toolsext } from '@store/Modules/toolsext'
import { IBaseOrder, ICatalogo, IGasordine, IOrder, IOrderCart, IProduct, IVariazione } from '@src/model'
import { IBaseOrder, ICatalogo, IGasordine, IMyScheda, IOrder, IOrderCart, IProduct, IVariazione } from '@src/model'
import { tools } from '@store/Modules/tools'
import { useProducts } from '@store/Products'
@@ -69,6 +69,13 @@ export default defineComponent({
backgroundimage: '',
}),
},
scheda: {
type: Object as PropType<IMyScheda>,
required: false,
default: () => ({
}),
},
},
components: { CTitleBanner, CCardState, CCopyBtn, CMyValueDb, VuePdfApp, CPrice },
setup(props, { emit }) {

20
src/components/CCatalogoCard/CCatalogoCard.vue
View File

@@ -4,8 +4,8 @@
' items-start q-gutter-sm': true,
}"
:style="
optcatalogo.height
? ' height: ' + optcatalogo.height + ' !important; '
scheda.height
? ' height: ' + scheda.height + 'px !important; '
: ''
"
>
@@ -49,7 +49,7 @@
:class="[
'flex q-pa-xs', // Classi comuni
{ 'shadow-2': options.in_3d }, // Classe condizionale
optcatalogo.posiz_text === costanti.POSIZ_TESTO.IN_BASSO
scheda.posiz_text === costanti.POSIZ_TESTO.IN_BASSO
? 'flex-col'
: 'flex-row', // Layout flessibile
]"
@@ -79,11 +79,11 @@
}"
:style="{
width:
optcatalogo.posiz_text === costanti.POSIZ_TESTO.IN_BASSO
scheda.posiz_text === costanti.POSIZ_TESTO.IN_BASSO
? '50%'
: '45%',
...(optcatalogo.width && {
width: optcatalogo.width + ' !important',
...(scheda.dimensioni.immagine_prodotto.width && {
width: scheda.dimensioni.immagine_prodotto.width + ' !important',
}),
display: 'block',
}"
@@ -109,19 +109,19 @@
<div
:style="{
width:
optcatalogo.posiz_text === costanti.POSIZ_TESTO.IN_BASSO
scheda.posiz_text === costanti.POSIZ_TESTO.IN_BASSO
? '100%'
: '50%',
textAlign: 'center',
marginTop:
optcatalogo.posiz_text === costanti.POSIZ_TESTO.IN_BASSO
scheda.posiz_text === costanti.POSIZ_TESTO.IN_BASSO
? '1rem'
: '0',
}"
>
<div
:style="`line-height: ${optcatalogo.line_height}%; `"
v-html="products.replaceKeyWordsByProduct(myproduct, optcatalogo.text)"
:style="`line-height: ${scheda.line_height}%; `"
v-html="products.replaceKeyWordsByProduct(myproduct, scheda.text)"
></div>
</div>
</div>

9
src/components/CContainerCatalogoCard/CContainerCatalogoCard.ts
View File

@@ -15,7 +15,7 @@ import { shared_consts } from '@src/common/shared_vuejs'
import { useRouter } from 'vue-router'
import { costanti } from '@costanti'
import { ICatalogo } from '@src/model'
import { ICatalogo, IMyScheda } from '@src/model'
export default defineComponent({
@@ -56,6 +56,13 @@ export default defineComponent({
backgroundimage: '',
}),
},
scheda: {
type: Object as PropType<IMyScheda>,
required: false,
default: () => ({
}),
},
},
components: { CCatalogoCard },
setup(props, { emit }) {

2
src/components/CContainerCatalogoCard/CContainerCatalogoCard.vue
View File

@@ -7,6 +7,7 @@
@selauthor="selauthor"
@opendetail="opendetail"
:optcatalogo="optcatalogo"
:scheda="scheda"
>
</CCatalogoCard>
<q-dialog
@@ -31,6 +32,7 @@
}"
:optcatalogo="optcatalogo"
@selauthor="selauthor"
:scheda="scheda"
>
</CCatalogoCard>
</div>

7
src/components/CGridTableRec/CGridTableRec.ts
View File

@@ -1831,8 +1831,13 @@ export default defineComponent({
editRecordBool.value = true
} else {
let mymsgquestion = translate(col.askaction) + '?'
if (col.action === lists.MenuAction.DELETE_RECTABLE) {
mymsgquestion = 'Cancellare ' + tools.getNomeTabellaStrByTable(table, item) + '?';
}
return $q.dialog({
message: translate(col.askaction) + '?',
message: mymsgquestion,
html: true,
ok: {
label: ok,

19
src/components/CMyCardService/CMyCardService.vue
View File

@@ -598,6 +598,25 @@
</q-item-label>
</q-item-section>
</q-item>
<q-item
clickable
v-if="table === 'mybachecas' && myrec.contact_email"
>
<q-item-section avatar>
<q-icon color="blue" name="fas fa-mail-bulk" />
</q-item-section>
<q-item-section>
<q-item-label lines="1">
<CLabel
v-bind="$attrs"
:copy="true"
:value="myrec.contact_email"
:label="$t('event.contact_email')"
/>
</q-item-label>
</q-item-section>
</q-item>
<q-item
clickable
v-if="table === 'mybachecas' && myrec.contact_telegram"

102
src/components/CMyEditElem/CMyEditElem.ts
View File

@@ -2,7 +2,7 @@ import {
defineComponent, onMounted, PropType, computed, ref, toRef, watch,
} from 'vue'
import { IColGridTable, IElemText, IImgGallery, ILabelValue, IMyCard, IMyElem, IMyPage, IMyScheda, IOperators, ISchedaSingola } from '@src/model'
import { IColGridTable, IElemText, IElementiScheda, IImgGallery, ILabelValue, IMyCard, IMyElem, IMyPage, IMyScheda, IOperators, ISchedaSingola } from '@src/model'
import { useGlobalStore } from '@store/globalStore'
import { CImgTitle } from '@/components/CImgTitle'
@@ -23,6 +23,8 @@ import { CSelectImage } from '@src/components/CSelectImage'
import { CSelectAnimation } from '@src/components/CSelectAnimation'
import { CSelectColor } from '@src/components/CSelectColor'
import { CSelectFontSize } from '@src/components/CSelectFontSize'
import { CMySize } from '@src/components/CMySize'
import { CBorders } from '@src/components/CBorders'
import MixinMetaTags from '@/mixins/mixin-metatags'
import MixinBase from '@/mixins/mixin-base'
@@ -38,7 +40,8 @@ export default defineComponent({
components: {
CImgTitle, CTitle, LandingFooter, CEventsCalendar,
CCardCarousel, COpenStreetMap, CMyPage, CMyPageIntro, CMyEditor, CMyFieldRec,
CSelectColor, CSelectFontSize, CSelectImage, CImgPoster, CSelectAnimation, CMySlider
CSelectColor, CSelectFontSize, CSelectImage, CImgPoster, CSelectAnimation, CMySlider,
CMySize, CBorders,
},
emits: ['saveElem', 'selElemClick', 'toggleSize', 'deleteElem', 'dupPage'],
props: {
@@ -269,21 +272,93 @@ export default defineComponent({
}
})
let defaultDimensioniPag = {
size: {
width: '800px',
height: '600px',
},
margini: {
top: '12px',
bottom: '0px',
left: '0px',
right: '0px',
},
padding: {
top: '0px',
bottom: '0px',
left: '0px',
right: '0px',
},
}
let defaultDimensioniRiga = {
size: {
width: '800px',
height: '300px',
},
margini: {
top: '40px',
bottom: '0px',
left: '0px',
right: '0px',
},
padding: {
top: '0px',
bottom: '0px',
left: '0px',
right: '0px',
},
}
let dimensioni: IElementiScheda = {
pagina: defaultDimensioniPag,
riga: defaultDimensioniRiga,
scheda_prodotto: {
size: {
width: '360px',
height: '230px',
},
margini: {
top: '0px',
bottom: '0px',
left: '0px',
right: '0px',
},
padding: {
top: '0px',
bottom: '0px',
left: '0px',
right: '0px',
},
},
immagine_prodotto: {size: {
width: '150px',
height: '235px',
},
margini: {
top: '0px',
bottom: '0px',
left: '0px',
right: '0px',
},
padding: {
top: '0px',
bottom: '0px',
left: '0px',
right: '0px',
},},
}
let newscheda: IMyScheda = {
_id: objectId(),
idapp: tools.appid()!,
isTemplate: false,
name: 'Scheda Nuova',
widthscheda: '360px',
dimensioni,
line_height: 100,
widthpag: 800,
width: 150,
height: 234,
numschede_perRiga: 2,
numschede_perCol: 2,
margine_top: 12,
margine_pagina: '92px',
margine_riga: '41px',
text: '',
posiz_text: costanti.POSIZ_TESTO.A_DESTRA,
@@ -301,13 +376,13 @@ export default defineComponent({
myel.value.catalogo!.arrSchede.push(
{
_id: objectId(),
scheda: { ...newscheda },
scheda: newscheda,
order: maxorder + 10,
numSchede: 1,
}
)
// console.log('arrschede', myel.value.catalogo!.arrSchede)
modifElem()
}
@@ -404,11 +479,14 @@ export default defineComponent({
//console.log('saveFieldElem', rec, 'newval', newval, 'col', col)
let iscatalogo = costanti.CATALOGO_FIELDS.includes(col.name)
let isscheda = costanti.SCHEDA_FIELDS.includes(col.name)
if (col.fieldtype === costanti.FieldType.image) {
if (iscatalogo) {
myel.value.catalogo[col.name] = newval.imagefile
//console.log('SALVATO IN', col.name, newval.imagefile, 'RIS', myel.value.catalogo[col.name])
} else if (isscheda) {
rec[col.name] = newval.imagefile
} else {
myel.value[col.name] = newval.imagefile
}
@@ -416,6 +494,8 @@ export default defineComponent({
if (iscatalogo) {
myel.value.catalogo[col.name] = newval
console.log('SALVATO IN', col.name, newval, 'RIS', myel.value.catalogo[col.name])
} else if (isscheda) {
rec[col.name] = newval
} else {
myel.value[col.name] = newval
}

265
src/components/CMyEditElem/CMyEditElem.vue
View File

@@ -1414,6 +1414,44 @@
</q-select>
</div>
</q-expansion-item>
<q-expansion-item
dense
dense-toggle
expand-separator
label="Sfondi"
icon="fas fa-play-circle"
>
Nome File Web: {{ myel.catalogo.backgroundimage }}<br />
<CMyFieldRec
title="Per Web:"
table="catalogo"
:rec="myel.catalogo"
field="backgroundimage"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
:fieldtype="costanti.FieldType.image"
@save="saveFieldElem"
>
</CMyFieldRec>
Nome File Printable:
{{ myel.catalogo.backgroundimage_printable }}
<CMyFieldRec
title="Sfondo:"
table="catalogo"
:rec="myel.catalogo"
field="backgroundimage_printable"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
:fieldtype="costanti.FieldType.image"
@save="saveFieldElem"
>
</CMyFieldRec>
<br />
</q-expansion-item>
<q-expansion-item
dense
dense-toggle
@@ -1459,9 +1497,9 @@
>
<q-bar v-if="recscheda" class="bg-primary text-white">
Scheda {{ ind + 1 }}
<span v-if="recscheda.scheda"> '{{
recscheda.scheda.name
}}'</span>
<span v-if="recscheda.scheda">
'{{ recscheda.scheda.name }}'</span
>
<q-space />
<q-btn
rounded
@@ -1639,7 +1677,87 @@
dense
dense-toggle
expand-separator
label="Dimensioni Schede"
label="Pagina"
icon="fas fa-play-circle"
>
<div class="sfondo_margine row">
<CMySize
label="Pagina:"
v-model="recscheda.scheda.dimensioni.pagina.size"
@update:model-value="modifElem"
></CMySize>
<CBorders
label="Margini Pagina:"
v-model="recscheda.scheda.dimensioni.pagina.margini"
@update:model-value="modifElem"
></CBorders>
<CBorders
label="Padding Pagina:"
v-model="recscheda.scheda.dimensioni.pagina.padding"
@update:model-value="modifElem"
></CBorders>
</div>
</q-expansion-item>
<q-expansion-item
dense
dense-toggle
expand-separator
label="Sfondi"
icon="fas fa-play-circle"
>
Nome File Web: {{ recscheda.scheda.bgimg }}<br />
<CMyFieldRec
title="Per Web:"
table="myschedas"
:rec="recscheda.scheda"
field="bgimg"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
:fieldtype="costanti.FieldType.image"
@save="saveFieldElem"
>
</CMyFieldRec>
<q-select
v-model="recscheda.scheda.bgSize"
:options="bgSizeOpt"
label="Dimensione Img"
options-dense
dense
emit-value
map-options
style="width: 100px"
@update:model-value="modifElem"
fill-input
text-color="white"
>
</q-select>
Nome File Printable:
{{ recscheda.scheda.bgimg_printable }}
<CMyFieldRec
title="Sfondo:"
table="myschedas"
:rec="recscheda.scheda"
field="bgimg_printable"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
:fieldtype="costanti.FieldType.image"
@save="saveFieldElem"
>
</CMyFieldRec>
<br />
</q-expansion-item>
<q-expansion-item
dense
dense-toggle
expand-separator
label="Schede"
icon="fas fa-play-circle"
>
<div class="row">
@@ -1659,44 +1777,32 @@
color="red"
@update:model-value="modifElem"
></CMySlider>
<CMySlider
label="Larghezza Schede:"
v-model="recscheda.scheda.widthscheda"
:min="10"
:max="1000"
color="green"
addstr="px"
@update:model-value="modifElem"
></CMySlider>
<CMySlider
label="Larghezza Pagina:"
v-model="recscheda.scheda.widthpag"
:min="10"
:max="1000"
color="green"
<CMySize
label="Schede:"
v-model="
recscheda.scheda.dimensioni.scheda_prodotto.size
"
@update:model-value="modifElem"
></CMySlider>
></CMySize>
<CMySlider
label="Larghezza Immagini:"
v-model="recscheda.scheda.width"
:min="10"
:max="1000"
color="green"
addstr="px"
<CBorders
label="Margini Schede:"
v-model="
recscheda.scheda.dimensioni.scheda_prodotto
.margini
"
@update:model-value="modifElem"
></CMySlider>
></CBorders>
<CMySlider
label="Altezza Schede:"
v-model="recscheda.scheda.height"
:min="10"
:max="1000"
color="red"
addstr="px"
<CMySize
label="Immagini:"
v-model="
recscheda.scheda.dimensioni.immagine_prodotto.size
"
@update:model-value="modifElem"
></CMySlider>
></CMySize>
</div>
</q-expansion-item>
@@ -1732,9 +1838,9 @@
<CMyFieldRec
title="Testo:"
table="catalogo"
:rec="myel.catalogo"
field="recscheda.scheda.text"
table="myschedas"
:rec="recscheda.scheda"
field="text"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
@@ -1745,43 +1851,7 @@
</CMyFieldRec>
</q-expansion-item>
<q-expansion-item
dense
dense-toggle
expand-separator
label="Margini Pagina"
icon="fas fa-play-circle"
>
<div class="sfondo_margine row">
<CMySlider
label="Margine Top"
v-model="recscheda.scheda.margine_top"
:min="0"
:max="1000"
color="blue"
@update:model-value="modifElem"
></CMySlider>
<CMySlider
label="Margine per Pagina"
v-model="recscheda.scheda.margine_pagina"
:min="0"
:max="1000"
color="red"
addstr="px"
@update:model-value="modifElem"
></CMySlider>
<CMySlider
label="Margine per Riga"
v-model="recscheda.scheda.margine_riga"
:min="0"
:max="1000"
color="red"
addstr="px"
@update:model-value="modifElem"
></CMySlider>
</div>
</q-expansion-item>
</div>
</q-tab-panel>
</q-tab-panels>
@@ -1789,29 +1859,6 @@
</q-expansion-item>
</div>
<q-expansion-item
dense
dense-toggle
expand-separator
label="Sfondi"
icon="fas fa-play-circle"
>
Nome File Web: {{ myel.catalogo.backgroundimage }}<br />
<CMyFieldRec
title="Per Web:"
table="catalogo"
:rec="myel.catalogo"
field="backgroundimage"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
:fieldtype="costanti.FieldType.image"
@save="saveFieldElem"
>
</CMyFieldRec>
<br />
</q-expansion-item>
<q-expansion-item
dense
dense-toggle
@@ -1943,8 +1990,9 @@
</q-toggle>
<CMySlider
label="Margine per Pagina"
label="Margine per Pagina Stampa"
v-model="myel.catalogo.margine_paginaPrintable"
:disable="!myel.catalogo.printable"
:min="0"
:max="1000"
color="red"
@@ -1955,6 +2003,7 @@
<CMySlider
label="Margine per Riga"
v-model="myel.catalogo.margine_rigaPrintable"
:disable="!myel.catalogo.printable"
:min="0"
:max="1000"
color="red"
@@ -1964,27 +2013,13 @@
<CMySlider
label="Larghezza Pagina Stampa:"
v-model="myel.catalogo.widthpagPrintable"
:disable="!myel.catalogo.printable"
:min="0"
:max="1000"
:max="4000"
color="red"
addstr="px"
@update:model-value="modifElem"
></CMySlider>
Nome File Printable:
{{ myel.catalogo.backgroundimage_printable }}
<CMyFieldRec
title="Sfondo:"
table="catalogo"
:rec="myel.catalogo"
field="backgroundimage_printable"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
:fieldtype="costanti.FieldType.image"
@save="saveFieldElem"
>
</CMyFieldRec>
</div>
</q-expansion-item>
</div>

0
src/components/CMySize/CMySize.scss Executable file
View File

61
src/components/CMySize/CMySize.ts Executable file
View File

@@ -0,0 +1,61 @@
import { defineComponent, ref, computed, PropType, toRef, reactive, watch } from 'vue'
import { IOperators, ISize } from 'model'
import { useI18n } from '@/boot/i18n'
import { useQuasar } from 'quasar'
import { CMySlider } from '@src/components/CMySlider'
import { shared_consts } from '@/common/shared_vuejs'
export default defineComponent({
name: 'CMySize',
emits: ['update:modelValue'],
components: { CMySlider },
props: {
modelValue: {
type: Object as PropType<ISize>,
required: true,
default: () => ({
width: '',
height: '',
}),
},
label: {
type: String,
required: true,
},
disable: {
type: Boolean,
required: false,
default: false,
},
},
setup(props, { emit }) {
const $q = useQuasar()
const { t } = useI18n()
const internalModel = reactive({ ...props.modelValue })
function modifValueWidth(value: any) {
emit('update:modelValue', { ...internalModel, width: value });
}
function modifValueHeight(value: any) {
emit('update:modelValue', { ...internalModel, height: value });
}
// Sincronizzare i cambiamenti esterni con internalModel quando props cambiano
watch(() => props.modelValue, (newModel: any) => {
Object.assign(internalModel, newModel);
}, { immediate: true });
return {
t,
shared_consts,
modifValueWidth,
modifValueHeight,
internalModel,
}
}
})

41
src/components/CMySize/CMySize.vue Executable file
View File

@@ -0,0 +1,41 @@
<template>
<div style="width: 380px">
<q-banner
rounded
dense
class="bg-blue-1 text-red"
color="primary q-title"
style="text-align: center"
>
{{ label }}
</q-banner>
<div class="row">
<CMySlider
label="Width:"
v-model="internalModel.width"
:min="10"
:max="3000"
color="green"
addstr="px"
@update:model-value="modifValueWidth"
></CMySlider>
<CMySlider
label="Height:"
v-model="internalModel.height"
:min="10"
:max="3000"
color="red"
addstr="px"
@update:model-value="modifValueHeight"
></CMySlider>
</div>
</div>
</template>
<script lang="ts" src="./CMySize.ts">
</script>
<style lang="scss" scoped>
@import './CMySize.scss';
</style>

1
src/components/CMySize/index.ts Executable file
View File

@@ -0,0 +1 @@
export {default as CMySize} from './CMySize.vue'

5
src/components/CMySlider/CMySlider.ts
View File

@@ -35,6 +35,11 @@ export default defineComponent({
required: false,
default: '',
},
disable: {
type: Boolean,
required: false,
default: false,
},
},
setup(props, { emit }) {
const $q = useQuasar()

5
src/components/CMySlider/CMySlider.vue
View File

@@ -1,15 +1,16 @@
<template>
<div class="q-pa-xs" style="width: 180px">
<div class="q-pa-xs" style="width: 170px">
<q-badge color="primary"> {{ label }} {{ modelValue }} </q-badge>
<q-input
dense
v-model="sliderValue"
filled
:disable="disable"
>
</q-input>
<q-slider v-model="sliderValue" :min="min" :max="max" :color="color" />
<q-slider :disable="disable" v-model="sliderValue" :min="min" :max="max" :color="color" />
</div>
</template>