@designcrowd/library.brand-page 5.14.11 → 5.14.12

package/src/shared/content-settings/components/text-image-field/TextImageField.mixin.ts

@@ -1,252 +0,0 @@
-import { defineComponent } from 'vue';
-import type { PropType } from 'vue';
-import type {
-  ColorReplacement,
-  LogoTheme,
-  TextMediaItem,
-  TextShapeItem,
-  Content,
-  ImagesSectionContent,
-} from '../../../../brand-page';
-import {
-  MAX_DESCRIPTION_LENGTH,
-  MAX_LENGTH_ERROR_MESSAGE,
-  MAX_TITLE_LENGTH,
-  INVALID_URL_MESSAGE,
-  BRAND_PAGE_TYPES,
-  ALIGN_LEFT_ALIGNED,
-  ALIGN_RIGHT_ALIGNED,
-  CONTENT_TYPES,
-  MAX_IMAGES_SECTION_ALIGNMENT_ITEMS_LENGTH,
-} from '../../../../brand-page';
-import type { DebounceHandle } from 'lodash.debounce';
-import debounce from 'lodash.debounce';
-import type { UpdateItemValuePayload } from '../../models';
-import cloneDeep from 'lodash.clonedeep';
-import { isURL } from '../../../../utils/validator.util';
-
-const DEBOUNCE_IN_MS = 250;
-
-export default defineComponent({
-  props: {
-    id: {
-      type: String,
-      required: true,
-    },
-    name: {
-      type: String,
-      required: true,
-    },
-    content: {
-      type: Object as PropType<Content>,
-      required: true,
-    },
-    value: {
-      type: Array as PropType<TextMediaItem[]>,
-      required: true,
-    },
-    maxLength: {
-      type: Number,
-      required: false,
-      default: undefined,
-    },
-    logoTheme: {
-      type: Object as PropType<LogoTheme>,
-      required: true,
-    },
-    settings: {
-      type: Object,
-      required: true,
-    },
-    isAdmin: {
-      type: Boolean,
-      required: true,
-    },
-    brandPageType: {
-      type: String,
-      required: true,
-      default: BRAND_PAGE_TYPES.brandSite,
-    },
-  },
-  emits: ['update:modelValue', 'on-intent-image-replace'],
-  data: () => ({
-    changeDebounce: undefined as DebounceHandle | undefined,
-    options: [] as (TextMediaItem | TextShapeItem)[],
-    maxLengthError: MAX_LENGTH_ERROR_MESSAGE(),
-    invalidUrlError: INVALID_URL_MESSAGE(),
-    titleLength: MAX_TITLE_LENGTH,
-    urlError: {},
-    mediaType: undefined,
-    descriptionLength: MAX_DESCRIPTION_LENGTH,
-    schema: 'https',
-    maxItemsLength: 0,
-  }),
-  watch: {
-    options: {
-      handler() {
-        if (this.changeDebounce) {
-          this.changeDebounce();
-        }
-      },
-      deep: true,
-    },
-  },
-  created() {
-    this.options = cloneDeep(this.value);
-    this.mediaType = this.settings.replaceImageSettings.mediaType;
-    this.options = this.options.map((o) => ({
-      ...o,
-      mediaType: this.mediaType,
-      imageLink: o.imageLink || '',
-    }));
-
-    if (!this.changeDebounce) {
-      this.changeDebounce = debounce(this.emitChange, DEBOUNCE_IN_MS);
-    }
-  },
-  computed: {
-    items() {
-      if (
-        this.maxLength &&
-        this.maxLength > 2 &&
-        this.content.type === CONTENT_TYPES['images-section']
-      ) {
-        const imagesSectionContent = this.content as ImagesSectionContent;
-
-        if (
-          [ALIGN_LEFT_ALIGNED, ALIGN_RIGHT_ALIGNED].some(
-            (s) => imagesSectionContent.displayStyle === s,
-          )
-        ) {
-          this.setMaxLayoutLength(MAX_IMAGES_SECTION_ALIGNMENT_ITEMS_LENGTH);
-
-          return this.value.length > 3
-            ? this.value.slice(0, MAX_IMAGES_SECTION_ALIGNMENT_ITEMS_LENGTH)
-            : this.value;
-        }
-      }
-
-      if (this.maxLength) {
-        this.setMaxLayoutLength(this.maxLength);
-      }
-
-      return this.value;
-    },
-  },
-  methods: {
-    setMaxLayoutLength(value: number) {
-      this.maxItemsLength = value;
-    },
-    onItemsDelete(index: number) {
-      this.options = this.options.filter((_o, i) => i !== index);
-
-      if (this.changeDebounce) {
-        this.changeDebounce();
-      }
-
-      const payload: UpdateItemValuePayload<TextMediaItem[]> = {
-        id: this.id,
-        name: this.name,
-        value: cloneDeep(this.options),
-      };
-
-      this.$emit('update:modelValue', payload);
-    },
-    onAddNewItem() {
-      this.addOption();
-    },
-    addOption(): void {
-      this.options.push({
-        paragraph: '',
-        title: '',
-        imageUrl: '',
-        imageTitle: '',
-        height: -1,
-        width: -1,
-        mediaType: this.mediaType,
-        imageLink: '',
-        itemsId: -1,
-      });
-
-      if (this.changeDebounce) {
-        this.changeDebounce();
-      }
-    },
-    emitChange(): void {
-      const payload: UpdateItemValuePayload<TextMediaItem[]> = {
-        id: this.id,
-        name: this.name,
-        value: this.options,
-      };
-
-      this.$emit('update:modelValue', payload);
-    },
-    onItemsChange(items: TextMediaItem[]) {
-      this.options = items;
-
-      if (this.changeDebounce) {
-        this.changeDebounce();
-      }
-
-      const payload: UpdateItemValuePayload<TextMediaItem[]> = {
-        id: this.id,
-        name: this.name,
-        value: cloneDeep(items),
-      };
-
-      this.$emit('update:modelValue', payload);
-    },
-    onReplaceImage(index: number, imageUrl: string) {
-      this.$emit('on-intent-image-replace', {
-        id: this.id,
-        name: this.name,
-        index,
-        value: imageUrl,
-      });
-    },
-    onRemoveImage(index: number) {
-      this.options[index].imageUrl = '';
-      (this.options[index] as TextShapeItem).colorReplacements =
-        [] as ColorReplacement[];
-      this.emitChange();
-    },
-    onColorReplacementsChange(
-      payload: UpdateItemValuePayload<ColorReplacement[]>,
-      index: number,
-    ) {
-      (this.options[index] as TextShapeItem).colorReplacements = payload.value;
-      this.emitChange();
-    },
-    onValueChange(value: string, index: number) {
-      if (!value.includes(this.schema)) {
-        this.options[index].imageLink = `${this.schema}://${value}`;
-      }
-
-      this.urlError[index] = isURL(value);
-    },
-    checkUrl(index: number) {
-      return this.urlError[index] !== undefined ? this.urlError[index] : true;
-    },
-    onTextAreaTextChange(
-      payload: {
-        id: string;
-        name: string;
-        value: string;
-      },
-      index: number,
-    ) {
-      this.options[index].paragraph = payload.value;
-    },
-    onPersonalisationOverrideChange(
-      payload: {
-        id: string;
-        name: string;
-        value: string;
-      },
-      index: number,
-    ) {
-      this.options[index][payload.name] = payload.value;
-      this.emitChange();
-    },
-  },
-});