- Cataloghi: BestSeller, Novità

src/components/CMyText/CMyText.ts

@@ -0,0 +1,79 @@
+import { defineComponent, ref, computed, PropType, toRef, reactive, watch } from 'vue'
+import { IOperators, ISize, IText } from 'model'
+
+import { useI18n } from '@/boot/i18n'
+import { useQuasar } from 'quasar'
+
+import { tools } from '@store/Modules/tools'
+
+import { costanti } from '@costanti'
+
+import { CMySlider } from '@src/components/CMySlider'
+import { CMyFieldRec } from '@src/components/CMyFieldRec'
+
+import { shared_consts } from '@/common/shared_vuejs'
+
+export default defineComponent({
+  name: 'CMyText',
+  emits: ['update:modelValue', 'modifElem', 'saveFieldElem',],
+  components: { CMySlider, CMyFieldRec },
+  props: {
+    modelValue: {
+      type: Object as PropType<IText>,
+      required: true,
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    disable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    show_maxlength: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  setup(props, { emit }) {
+    const $q = useQuasar()
+    const { t } = useI18n()
+
+    const internalModel = reactive({ ...props.modelValue })
+
+    function modifElem() {
+      // console.log('modifElem')
+      emit('update:modelValue', { ...internalModel });
+      emit('modifElem', null);
+    }
+    function update_col() {
+      // console.log('update_col')
+      emit('update:modelValue', { ...internalModel });
+      emit('modifElem', null);
+    }
+
+    function saveFieldElem() {
+      emit('update:modelValue', { ...internalModel });
+      emit('saveFieldElem', null);
+    }
+
+    // Sincronizzare i cambiamenti esterni con internalModel quando props cambiano
+    watch(() => props.modelValue, (newModel: any) => {
+      Object.assign(internalModel, newModel);
+
+    }, { immediate: true });
+
+    return {
+      t,
+      shared_consts,
+      internalModel,
+      modifElem,
+      tools,
+      costanti,
+      saveFieldElem,
+      update_col,
+    }
+  }
+})

src/components/CMyText/CMyText.vue

@@ -0,0 +1,83 @@
+<template>
+  <CMyFieldRec
+    :title="label"
+    table="text"
+    :rec="internalModel"
+    field="contenuto"
+    @update:model-value="modifElem"
+    :canEdit="true"
+    :canModify="true"
+    :fieldtype="costanti.FieldType.html"
+    @save="saveFieldElem"
+    @update_col="update_col"
+  >
+  </CMyFieldRec>
+  <q-select
+    v-model="internalModel.font.posiz_text"
+    :options="tools.posizTextOptions"
+    label="Posizione"
+    options-dense
+    dense
+    emit-value
+    map-options
+    style="width: 100px"
+    @update:model-value="modifElem"
+    fill-input
+    text-color="white"
+  >
+  </q-select>
+  <CMySlider
+    label="Margine tra l'immagine"
+    v-model="internalModel.font.perc_text"
+    :min="0"
+    :max="100"
+    color="blue"
+    addstr="%"
+    @update:model-value="modifElem"
+  ></CMySlider>
+  <CMySlider
+    label="Line Height:"
+    v-model="internalModel.font.line_height"
+    :min="0.5"
+    :max="2"
+    color="blue"
+    @update:model-value="modifElem"
+  ></CMySlider>
+  <CMySlider
+    v-if="show_maxlength"
+    label="Lunghezza Massima:"
+    v-model="internalModel.maxlength"
+    :min="0"
+    :max="1000"
+    color="blue"
+    addstr=""
+    @update:model-value="modifElem"
+  ></CMySlider>
+
+  <div>
+    Parole Chiave: {autore} {titolo} {descrizione} {date_pub} {ranking}
+    {descrizione_breve_macro} {descrizione_completa_macro} {sottotitolo} {prezzo}
+  </div>
+
+  <q-select
+    v-model="internalModel.font.size"
+    :options="tools.fontSizeOptions"
+    label="Size Titolo"
+    options-dense
+    dense
+    emit-value
+    map-options
+    style="width: 120px"
+    @update:model-value="modifElem"
+    fill-input
+    text-color="white"
+  >
+  </q-select>
+</template>
+
+<script lang="ts" src="./CMyText.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CMyText.scss';
+</style>

src/components/CMyText/index.ts

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