@designcrowd/library.brand-page 5.15.2 → 5.15.3

package/src/shared/content-settings/components/replace-image-base-settings/ReplaceImageBaseSettings.mixin.ts

@@ -1,168 +0,0 @@
-import type { PropType } from 'vue';
-import { computed, defineComponent } from 'vue';
-import type {
-  Tab,
-  ReplaceImageSettingsTabId,
-  ReplaceImageSettingsBase,
-} from '../../models';
-import type { UserMediaItemWithDimensions } from '../../../my-uploads/models';
-import {
-  useBrandPageContainerStore,
-  type BrandPageSettingsMode,
-} from '../../../../brand-page-maker/stores';
-import axios from 'axios';
-import { getColorReplacementsFromSvgString } from '../../../../brand-page/utils/svg-color.util';
-import { tr } from '../../../../composables/useTranslate';
-
-const imageSettingTr = (key) => tr(`replaceImageSetting.${key}`);
-
-export default defineComponent({
-  props: {
-    mediaSettings: {
-      type: Object as PropType<ReplaceImageSettingsBase>,
-      required: false,
-      default: undefined,
-    },
-    imageExtension: {
-      type: Array as PropType<string[]>,
-      required: false,
-      default: () => ['.jpg', '.jpeg', '.png'],
-    },
-    mode: {
-      type: Object as PropType<BrandPageSettingsMode>,
-      required: true,
-    },
-    isAdmin: {
-      type: Boolean,
-      required: true,
-      default: false,
-    },
-    activeTabs: {
-      type: Array as PropType<ReplaceImageSettingsTabId[]>,
-      required: true,
-    },
-    mediaType: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    sectionTitle: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    transparentBg: {
-      type: Boolean,
-      required: true,
-      default: false,
-    },
-    stickyBackBtn: {
-      type: Boolean,
-      required: true,
-      default: true,
-    },
-  },
-  setup() {
-    const containerStore = useBrandPageContainerStore();
-
-    return {
-      isPrePurchase: computed(() => containerStore.isPrePurchase),
-    };
-  },
-  data() {
-    return {
-      tabs: [
-        {
-          id: 'ICON',
-          label: imageSettingTr('icon'),
-          active: false,
-        } as Tab,
-        {
-          id: 'MY_UPLOADS',
-          label: imageSettingTr('myUploads'),
-          active: false,
-        } as Tab,
-        {
-          id: 'MY_DESIGNS',
-          label: imageSettingTr('myDesigns'),
-          active: false,
-        } as Tab,
-        {
-          id: 'IMAGE_LIBRARY',
-          label: imageSettingTr('imageLibrary'),
-          active: false,
-        } as Tab,
-        {
-          id: 'SHAPE_LIBRARY',
-          label: imageSettingTr('shapeLibrary'),
-          active: false,
-        } as Tab,
-      ],
-    };
-  },
-  computed: {
-    enabledTabs(): Tab[] {
-      const value = this.tabs
-        .filter((x) => x.id !== 'MY_DESIGNS' || !this.isAdmin)
-        .filter(
-          (x) =>
-            this.activeTabs.some((y) => y === x.id) &&
-            (!this.isPrePurchase || x.id !== 'MY_DESIGNS'),
-        );
-
-      return value;
-    },
-    isDeleteEnabled(): boolean {
-      return true;
-    },
-  },
-  created() {
-    if (this.enabledTabs.length > 0) {
-      this.enabledTabs[0].active = true;
-    }
-  },
-  methods: {
-    onBack() {
-      this.$emit('on-back');
-    },
-    onImageSelected(
-      image: Pick<
-        UserMediaItemWithDimensions,
-        'url' | 'minimisedUrl' | 'width' | 'height'
-      >,
-    ) {
-      this.$emit('on-image-picked', image, this.mediaType);
-    },
-    onDeleteImage(
-      image: Pick<
-        UserMediaItemWithDimensions,
-        'url' | 'minimisedUrl' | 'width' | 'height'
-      >,
-    ) {
-      this.$emit('on-image-removed', image);
-    },
-    onDesignSelected(image: UserMediaItemWithDimensions) {
-      this.$emit('on-design-selected', image);
-    },
-    switchActiveTab(id: string) {
-      this.tabs.forEach((tab: Tab) =>
-        tab.id === id ? (tab.active = true) : (tab.active = false),
-      );
-    },
-    async onShapeSelected(image: UserMediaItemWithDimensions) {
-      const svgResponse = await axios.get<string>(image.url);
-
-      const colorReplacements = getColorReplacementsFromSvgString(
-        svgResponse.data,
-      );
-
-      this.$emit('on-shape-selected', {
-        imageUrl: image.url,
-        width: image.width,
-        height: image.height,
-        colorReplacements,
-        aspectRatio: image.aspectRatio,
-      });
-    },
-  },
-});