diff --git a/_dev/src/components/FieldRepeater.vue b/_dev/src/components/FieldRepeater.vue index 367a515b..243a5027 100644 --- a/_dev/src/components/FieldRepeater.vue +++ b/_dev/src/components/FieldRepeater.vue @@ -16,7 +16,7 @@ import Button from './Button.vue' import FileUpload from './form/FileUpload.vue' import Choices from './form/Choices.vue' import Icon from './Icon.vue' -// import Slider from './Slider.vue' +import Slider from './Slider.vue' // tinyMCE import Editor from '@tinymce/tinymce-vue' @@ -146,6 +146,11 @@ const toolbarOptions = [ +
+ + <Slider v-model="f.value" v-bind="f.options" /> + </div> + </div> </template> diff --git a/_dev/src/components/Slider.vue b/_dev/src/components/Slider.vue index 6b45a5dc..60230010 100644 --- a/_dev/src/components/Slider.vue +++ b/_dev/src/components/Slider.vue @@ -1,36 +1,57 @@ <script setup> -import { ref } from 'vue' +import { ref, defineProps, defineEmits, watch } from 'vue' +const emit = defineEmits(['update:modelValue']) -let value = ref(50) -const updateValue = (event) => { - value.value = event.target.value -} -let type = ref('int') -let step = ref(1) const props = defineProps({ - value: { - type: Number, - required: true - }, - type: { - type: String, - default: 'int', - validator: (value) => ['int', 'step'].includes(value) + modelValue: { + type: [Number, String], + required: true, + default: 0 }, step: { type: Number, default: 1 + }, + min: { + type: Number, + default: 0 + }, + max: { + type: Number, + default: 100 } }) +const localValue = ref(props.modelValue) +watch(() => props.modelValue, (newValue) => { + localValue.value = newValue +}) + +// Mettez à jour la valeur et émettez le changement +const updateValue = (event) => { + const newValue = parseInt(event.target.value) + localValue.value = newValue + emit('update:modelValue', newValue) +} + + </script> <template> - <div class="slider"> - <input class="bg-indigo" type="range" step="2" min="4" max="8" v-model="value" @input="updateValue" /> - <span>{{ value }}</span> + <div class="slider flex"> + <input class="bg-indigo-500" type="range" + :step="props.step" + :min="props.min" + :max="props.max" + :value="localValue" + @input="updateValue" + /> + + <span class="pl-4"> + {{ props.modelValue }} + </span> </div> </template> diff --git a/classes/prettyblocks/core/FieldCore.php b/classes/prettyblocks/core/FieldCore.php index 010ea86b..7f09b291 100644 --- a/classes/prettyblocks/core/FieldCore.php +++ b/classes/prettyblocks/core/FieldCore.php @@ -230,6 +230,26 @@ public function formatForFront() | */ + + /** + * formatFieldSlider + * use for display field type slider in PrettyBlocks + * @return Integer + */ + public function formatFieldSlider() + { + // if value exists in DB and new_value is empty + if (!is_null($this->value) && is_null($this->new_value)) { + return (int) $this->value; + } + // if value doesn't exists in DB and new value is set + if ($this->force_default_value && is_null($this->new_value)) { + return (int) $this->default; + } + + return (int) $this->new_value; + } + /** * formatFieldDatePicker * diff --git a/views/css/dist/main.css b/views/css/dist/main.css index b0c7ca70..2c2eda02 100644 --- a/views/css/dist/main.css +++ b/views/css/dist/main.css @@ -477,6 +477,10 @@ padding-left: 2.25rem; } +.tw_pl-96 { + padding-left: 24rem; +} + .tw_pr-0 { padding-right: 0px; } @@ -581,10 +585,6 @@ padding-top: 2.25rem; } -.tw_pl-96 { - padding-left: 24rem; -} - .tw_text-center { text-align: center; } @@ -792,847 +792,9 @@ } @media (min-width: 640px) { - .sm\:tw_mb-0 { - margin-bottom: 0px; - } - - .sm\:tw_mb-1 { - margin-bottom: 0.25rem; - } - - .sm\:tw_mb-10 { - margin-bottom: 2.5rem; - } - - .sm\:tw_mb-11 { - margin-bottom: 2.75rem; - } - - .sm\:tw_mb-12 { - margin-bottom: 3rem; - } - - .sm\:tw_mb-2 { - margin-bottom: 0.5rem; - } - - .sm\:tw_mb-3 { - margin-bottom: 0.75rem; - } - - .sm\:tw_mb-4 { - margin-bottom: 1rem; - } - - .sm\:tw_mb-5 { - margin-bottom: 1.25rem; - } - - .sm\:tw_mb-6 { - margin-bottom: 1.5rem; - } - - .sm\:tw_mb-7 { - margin-bottom: 1.75rem; - } - - .sm\:tw_mb-8 { - margin-bottom: 2rem; - } - - .sm\:tw_mb-9 { - margin-bottom: 2.25rem; - } - - .sm\:tw_ml-0 { - margin-left: 0px; - } - - .sm\:tw_ml-1 { - margin-left: 0.25rem; - } - - .sm\:tw_ml-10 { - margin-left: 2.5rem; - } - - .sm\:tw_ml-11 { - margin-left: 2.75rem; - } - - .sm\:tw_ml-12 { - margin-left: 3rem; - } - - .sm\:tw_ml-2 { - margin-left: 0.5rem; - } - - .sm\:tw_ml-3 { - margin-left: 0.75rem; - } - - .sm\:tw_ml-4 { - margin-left: 1rem; - } - - .sm\:tw_ml-5 { - margin-left: 1.25rem; - } - - .sm\:tw_ml-6 { - margin-left: 1.5rem; - } - - .sm\:tw_ml-7 { - margin-left: 1.75rem; - } - - .sm\:tw_ml-8 { - margin-left: 2rem; - } - - .sm\:tw_ml-9 { - margin-left: 2.25rem; - } - - .sm\:tw_mr-0 { - margin-right: 0px; - } - - .sm\:tw_mr-1 { - margin-right: 0.25rem; - } - - .sm\:tw_mr-10 { - margin-right: 2.5rem; - } - - .sm\:tw_mr-11 { - margin-right: 2.75rem; - } - - .sm\:tw_mr-12 { - margin-right: 3rem; - } - - .sm\:tw_mr-2 { - margin-right: 0.5rem; - } - - .sm\:tw_mr-3 { - margin-right: 0.75rem; - } - - .sm\:tw_mr-4 { - margin-right: 1rem; - } - - .sm\:tw_mr-5 { - margin-right: 1.25rem; - } - - .sm\:tw_mr-6 { - margin-right: 1.5rem; - } - - .sm\:tw_mr-7 { - margin-right: 1.75rem; - } - - .sm\:tw_mr-8 { - margin-right: 2rem; - } - - .sm\:tw_mr-9 { - margin-right: 2.25rem; - } - - .sm\:tw_mt-0 { - margin-top: 0px; - } - - .sm\:tw_mt-1 { - margin-top: 0.25rem; - } - - .sm\:tw_mt-10 { - margin-top: 2.5rem; - } - - .sm\:tw_mt-11 { - margin-top: 2.75rem; - } - - .sm\:tw_mt-12 { - margin-top: 3rem; - } - - .sm\:tw_mt-2 { - margin-top: 0.5rem; - } - - .sm\:tw_mt-3 { - margin-top: 0.75rem; - } - - .sm\:tw_mt-4 { - margin-top: 1rem; - } - - .sm\:tw_mt-5 { - margin-top: 1.25rem; - } - - .sm\:tw_mt-6 { - margin-top: 1.5rem; - } - - .sm\:tw_mt-7 { - margin-top: 1.75rem; - } - - .sm\:tw_mt-8 { - margin-top: 2rem; - } - - .sm\:tw_mt-9 { - margin-top: 2.25rem; - } - .sm\:tw_grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } - - .sm\:tw_pb-0 { - padding-bottom: 0px; - } - - .sm\:tw_pb-1 { - padding-bottom: 0.25rem; - } - - .sm\:tw_pb-10 { - padding-bottom: 2.5rem; - } - - .sm\:tw_pb-11 { - padding-bottom: 2.75rem; - } - - .sm\:tw_pb-12 { - padding-bottom: 3rem; - } - - .sm\:tw_pb-2 { - padding-bottom: 0.5rem; - } - - .sm\:tw_pb-3 { - padding-bottom: 0.75rem; - } - - .sm\:tw_pb-4 { - padding-bottom: 1rem; - } - - .sm\:tw_pb-5 { - padding-bottom: 1.25rem; - } - - .sm\:tw_pb-6 { - padding-bottom: 1.5rem; - } - - .sm\:tw_pb-7 { - padding-bottom: 1.75rem; - } - - .sm\:tw_pb-8 { - padding-bottom: 2rem; - } - - .sm\:tw_pb-9 { - padding-bottom: 2.25rem; - } - - .sm\:tw_pl-0 { - padding-left: 0px; - } - - .sm\:tw_pl-1 { - padding-left: 0.25rem; - } - - .sm\:tw_pl-10 { - padding-left: 2.5rem; - } - - .sm\:tw_pl-11 { - padding-left: 2.75rem; - } - - .sm\:tw_pl-12 { - padding-left: 3rem; - } - - .sm\:tw_pl-2 { - padding-left: 0.5rem; - } - - .sm\:tw_pl-3 { - padding-left: 0.75rem; - } - - .sm\:tw_pl-4 { - padding-left: 1rem; - } - - .sm\:tw_pl-5 { - padding-left: 1.25rem; - } - - .sm\:tw_pl-6 { - padding-left: 1.5rem; - } - - .sm\:tw_pl-7 { - padding-left: 1.75rem; - } - - .sm\:tw_pl-8 { - padding-left: 2rem; - } - - .sm\:tw_pl-9 { - padding-left: 2.25rem; - } - - .sm\:tw_pr-0 { - padding-right: 0px; - } - - .sm\:tw_pr-1 { - padding-right: 0.25rem; - } - - .sm\:tw_pr-10 { - padding-right: 2.5rem; - } - - .sm\:tw_pr-11 { - padding-right: 2.75rem; - } - - .sm\:tw_pr-12 { - padding-right: 3rem; - } - - .sm\:tw_pr-2 { - padding-right: 0.5rem; - } - - .sm\:tw_pr-3 { - padding-right: 0.75rem; - } - - .sm\:tw_pr-4 { - padding-right: 1rem; - } - - .sm\:tw_pr-5 { - padding-right: 1.25rem; - } - - .sm\:tw_pr-6 { - padding-right: 1.5rem; - } - - .sm\:tw_pr-7 { - padding-right: 1.75rem; - } - - .sm\:tw_pr-8 { - padding-right: 2rem; - } - - .sm\:tw_pr-9 { - padding-right: 2.25rem; - } - - .sm\:tw_pt-0 { - padding-top: 0px; - } - - .sm\:tw_pt-1 { - padding-top: 0.25rem; - } - - .sm\:tw_pt-10 { - padding-top: 2.5rem; - } - - .sm\:tw_pt-11 { - padding-top: 2.75rem; - } - - .sm\:tw_pt-12 { - padding-top: 3rem; - } - - .sm\:tw_pt-2 { - padding-top: 0.5rem; - } - - .sm\:tw_pt-3 { - padding-top: 0.75rem; - } - - .sm\:tw_pt-4 { - padding-top: 1rem; - } - - .sm\:tw_pt-5 { - padding-top: 1.25rem; - } - - .sm\:tw_pt-6 { - padding-top: 1.5rem; - } - - .sm\:tw_pt-7 { - padding-top: 1.75rem; - } - - .sm\:tw_pt-8 { - padding-top: 2rem; - } - - .sm\:tw_pt-9 { - padding-top: 2.25rem; - } - - .sm\:tw_pl-96 { - padding-left: 24rem; - } -} - -@media (min-width: 768px) { - .md\:tw_mb-0 { - margin-bottom: 0px; - } - - .md\:tw_mb-1 { - margin-bottom: 0.25rem; - } - - .md\:tw_mb-10 { - margin-bottom: 2.5rem; - } - - .md\:tw_mb-11 { - margin-bottom: 2.75rem; - } - - .md\:tw_mb-12 { - margin-bottom: 3rem; - } - - .md\:tw_mb-2 { - margin-bottom: 0.5rem; - } - - .md\:tw_mb-3 { - margin-bottom: 0.75rem; - } - - .md\:tw_mb-4 { - margin-bottom: 1rem; - } - - .md\:tw_mb-5 { - margin-bottom: 1.25rem; - } - - .md\:tw_mb-6 { - margin-bottom: 1.5rem; - } - - .md\:tw_mb-7 { - margin-bottom: 1.75rem; - } - - .md\:tw_mb-8 { - margin-bottom: 2rem; - } - - .md\:tw_mb-9 { - margin-bottom: 2.25rem; - } - - .md\:tw_ml-0 { - margin-left: 0px; - } - - .md\:tw_ml-1 { - margin-left: 0.25rem; - } - - .md\:tw_ml-10 { - margin-left: 2.5rem; - } - - .md\:tw_ml-11 { - margin-left: 2.75rem; - } - - .md\:tw_ml-12 { - margin-left: 3rem; - } - - .md\:tw_ml-2 { - margin-left: 0.5rem; - } - - .md\:tw_ml-3 { - margin-left: 0.75rem; - } - - .md\:tw_ml-4 { - margin-left: 1rem; - } - - .md\:tw_ml-5 { - margin-left: 1.25rem; - } - - .md\:tw_ml-6 { - margin-left: 1.5rem; - } - - .md\:tw_ml-7 { - margin-left: 1.75rem; - } - - .md\:tw_ml-8 { - margin-left: 2rem; - } - - .md\:tw_ml-9 { - margin-left: 2.25rem; - } - - .md\:tw_mr-0 { - margin-right: 0px; - } - - .md\:tw_mr-1 { - margin-right: 0.25rem; - } - - .md\:tw_mr-10 { - margin-right: 2.5rem; - } - - .md\:tw_mr-11 { - margin-right: 2.75rem; - } - - .md\:tw_mr-12 { - margin-right: 3rem; - } - - .md\:tw_mr-2 { - margin-right: 0.5rem; - } - - .md\:tw_mr-3 { - margin-right: 0.75rem; - } - - .md\:tw_mr-4 { - margin-right: 1rem; - } - - .md\:tw_mr-5 { - margin-right: 1.25rem; - } - - .md\:tw_mr-6 { - margin-right: 1.5rem; - } - - .md\:tw_mr-7 { - margin-right: 1.75rem; - } - - .md\:tw_mr-8 { - margin-right: 2rem; - } - - .md\:tw_mr-9 { - margin-right: 2.25rem; - } - - .md\:tw_mt-0 { - margin-top: 0px; - } - - .md\:tw_mt-1 { - margin-top: 0.25rem; - } - - .md\:tw_mt-10 { - margin-top: 2.5rem; - } - - .md\:tw_mt-11 { - margin-top: 2.75rem; - } - - .md\:tw_mt-12 { - margin-top: 3rem; - } - - .md\:tw_mt-2 { - margin-top: 0.5rem; - } - - .md\:tw_mt-3 { - margin-top: 0.75rem; - } - - .md\:tw_mt-4 { - margin-top: 1rem; - } - - .md\:tw_mt-5 { - margin-top: 1.25rem; - } - - .md\:tw_mt-6 { - margin-top: 1.5rem; - } - - .md\:tw_mt-7 { - margin-top: 1.75rem; - } - - .md\:tw_mt-8 { - margin-top: 2rem; - } - - .md\:tw_mt-9 { - margin-top: 2.25rem; - } - - .md\:tw_pb-0 { - padding-bottom: 0px; - } - - .md\:tw_pb-1 { - padding-bottom: 0.25rem; - } - - .md\:tw_pb-10 { - padding-bottom: 2.5rem; - } - - .md\:tw_pb-11 { - padding-bottom: 2.75rem; - } - - .md\:tw_pb-12 { - padding-bottom: 3rem; - } - - .md\:tw_pb-2 { - padding-bottom: 0.5rem; - } - - .md\:tw_pb-3 { - padding-bottom: 0.75rem; - } - - .md\:tw_pb-4 { - padding-bottom: 1rem; - } - - .md\:tw_pb-5 { - padding-bottom: 1.25rem; - } - - .md\:tw_pb-6 { - padding-bottom: 1.5rem; - } - - .md\:tw_pb-7 { - padding-bottom: 1.75rem; - } - - .md\:tw_pb-8 { - padding-bottom: 2rem; - } - - .md\:tw_pb-9 { - padding-bottom: 2.25rem; - } - - .md\:tw_pl-0 { - padding-left: 0px; - } - - .md\:tw_pl-1 { - padding-left: 0.25rem; - } - - .md\:tw_pl-10 { - padding-left: 2.5rem; - } - - .md\:tw_pl-11 { - padding-left: 2.75rem; - } - - .md\:tw_pl-12 { - padding-left: 3rem; - } - - .md\:tw_pl-2 { - padding-left: 0.5rem; - } - - .md\:tw_pl-3 { - padding-left: 0.75rem; - } - - .md\:tw_pl-4 { - padding-left: 1rem; - } - - .md\:tw_pl-5 { - padding-left: 1.25rem; - } - - .md\:tw_pl-6 { - padding-left: 1.5rem; - } - - .md\:tw_pl-7 { - padding-left: 1.75rem; - } - - .md\:tw_pl-8 { - padding-left: 2rem; - } - - .md\:tw_pl-9 { - padding-left: 2.25rem; - } - - .md\:tw_pr-0 { - padding-right: 0px; - } - - .md\:tw_pr-1 { - padding-right: 0.25rem; - } - - .md\:tw_pr-10 { - padding-right: 2.5rem; - } - - .md\:tw_pr-11 { - padding-right: 2.75rem; - } - - .md\:tw_pr-12 { - padding-right: 3rem; - } - - .md\:tw_pr-2 { - padding-right: 0.5rem; - } - - .md\:tw_pr-3 { - padding-right: 0.75rem; - } - - .md\:tw_pr-4 { - padding-right: 1rem; - } - - .md\:tw_pr-5 { - padding-right: 1.25rem; - } - - .md\:tw_pr-6 { - padding-right: 1.5rem; - } - - .md\:tw_pr-7 { - padding-right: 1.75rem; - } - - .md\:tw_pr-8 { - padding-right: 2rem; - } - - .md\:tw_pr-9 { - padding-right: 2.25rem; - } - - .md\:tw_pt-0 { - padding-top: 0px; - } - - .md\:tw_pt-1 { - padding-top: 0.25rem; - } - - .md\:tw_pt-10 { - padding-top: 2.5rem; - } - - .md\:tw_pt-11 { - padding-top: 2.75rem; - } - - .md\:tw_pt-12 { - padding-top: 3rem; - } - - .md\:tw_pt-2 { - padding-top: 0.5rem; - } - - .md\:tw_pt-3 { - padding-top: 0.75rem; - } - - .md\:tw_pt-4 { - padding-top: 1rem; - } - - .md\:tw_pt-5 { - padding-top: 1.25rem; - } - - .md\:tw_pt-6 { - padding-top: 1.5rem; - } - - .md\:tw_pt-7 { - padding-top: 1.75rem; - } - - .md\:tw_pt-8 { - padding-top: 2rem; - } - - .md\:tw_pt-9 { - padding-top: 2.25rem; - } } @media (min-width: 1024px) {