@designcrowd/library.brand-page 5.8.7 → 5.8.8

package/lib/src/shared/content-settings/components/color-replacements-field/ColorReplacementsField.mixin.d.ts

@@ -1,112 +0,0 @@
-/// <reference types="types/lodash-shims" />
-import type { DebounceHandle } from 'lodash.debounce';
-import type { PropType } from 'vue';
-import type { ColorReplacement, LogoTheme } from '../../../../brand-page';
-import type { UpdateItemValuePayload } from '../../../content-settings/models';
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    id: {
-        type: StringConstructor;
-        required: true;
-    };
-    name: {
-        type: StringConstructor;
-        required: true;
-    };
-    value: {
-        type: PropType<ColorReplacement[]>;
-        required: true;
-    };
-    isAdmin: {
-        type: BooleanConstructor;
-        required: true;
-    };
-    label: {
-        type: StringConstructor;
-        required: false;
-        default: undefined;
-    };
-    toggleUniqueId: {
-        type: StringConstructor;
-        required: false;
-        default: string;
-    };
-    logoTheme: {
-        type: PropType<LogoTheme>;
-        required: true;
-    };
-}>, {}, {
-    colorReplacements: ColorReplacement[];
-    changeColorDebounce: DebounceHandle;
-    styleThemeKeys: Readonly<{
-        LogoTextColor: "logo-text-color";
-        LogoBackgroundColor: "logo-background-color";
-        LogoTextColor50: "logo-text-color-50";
-        LogoTextColor100: "logo-text-color-100";
-        LogoTextColor200: "logo-text-color-200";
-        LogoTextColor300: "logo-text-color-300";
-        LogoTextColor400: "logo-text-color-400";
-        LogoTextColor500: "logo-text-color-500";
-        LogoTextColor600: "logo-text-color-600";
-        LogoTextColor700: "logo-text-color-700";
-        LogoTextColor800: "logo-text-color-800";
-        LogoTextColor900: "logo-text-color-900";
-        LogoTextColor950: "logo-text-color-950";
-        LogoBackgroundColor50: "logo-background-color-50";
-        LogoBackgroundColor100: "logo-background-color-100";
-        LogoBackgroundColor200: "logo-background-color-200";
-        LogoBackgroundColor300: "logo-background-color-300";
-        LogoBackgroundColor400: "logo-background-color-400";
-        LogoBackgroundColor500: "logo-background-color-500";
-        LogoBackgroundColor600: "logo-background-color-600";
-        LogoBackgroundColor700: "logo-background-color-700";
-        LogoBackgroundColor800: "logo-background-color-800";
-        LogoBackgroundColor900: "logo-background-color-900";
-        LogoBackgroundColor950: "logo-background-color-950";
-    }>;
-}, {
-    colorFieldMode(): string;
-    isOptionColorMatched(): boolean;
-    toggleIdSuffix(): string;
-}, {
-    onColorPickerInput(color: UpdateItemValuePayload<string>, index: number): void;
-    onColorPickerInputDropdown(color: string, index: number): void;
-    changeColor(): void;
-    onColorMatchToggled(value: boolean): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    id: {
-        type: StringConstructor;
-        required: true;
-    };
-    name: {
-        type: StringConstructor;
-        required: true;
-    };
-    value: {
-        type: PropType<ColorReplacement[]>;
-        required: true;
-    };
-    isAdmin: {
-        type: BooleanConstructor;
-        required: true;
-    };
-    label: {
-        type: StringConstructor;
-        required: false;
-        default: undefined;
-    };
-    toggleUniqueId: {
-        type: StringConstructor;
-        required: false;
-        default: string;
-    };
-    logoTheme: {
-        type: PropType<LogoTheme>;
-        required: true;
-    };
-}>> & Readonly<{
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}>, {
-    label: string;
-    toggleUniqueId: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/lib/src/shared/content-settings/components/color-replacements-field/ColorReplacementsField.mixin.js

@@ -1,104 +0,0 @@
-import { defineComponent } from 'vue';
-import debounce from 'lodash.debounce';
-import cloneDeep from 'lodash.clonedeep';
-import { isColorMatched } from '../../../../brand-page-maker/utils';
-import { STYLE_THEME_KEYS } from '../../../../brand-page/constants';
-const DEBOUNCE_WAIT_IN_MS = 10;
-export default defineComponent({
-    props: {
-        id: {
-            type: String,
-            required: true,
-        },
-        name: {
-            type: String,
-            required: true,
-        },
-        value: {
-            type: Array,
-            required: true,
-        },
-        isAdmin: {
-            type: Boolean,
-            required: true,
-        },
-        label: {
-            type: String,
-            required: false,
-            default: undefined,
-        },
-        toggleUniqueId: {
-            type: String,
-            required: false,
-            default: '',
-        },
-        logoTheme: {
-            type: Object,
-            required: true,
-        },
-    },
-    emits: ['update:modelValue'],
-    data() {
-        return {
-            colorReplacements: [],
-            changeColorDebounce: null,
-            styleThemeKeys: STYLE_THEME_KEYS,
-        };
-    },
-    computed: {
-        colorFieldMode() {
-            return this.value.length === 1 ? 'color-and-text' : 'color-only';
-        },
-        isOptionColorMatched() {
-            return this.colorReplacements?.every((x) => isColorMatched(x.replacementColor));
-        },
-        toggleIdSuffix() {
-            return this.toggleUniqueId ? `-${this.toggleUniqueId}` : '';
-        },
-    },
-    watch: {
-        value(newVal) {
-            this.colorReplacements = cloneDeep(newVal);
-        },
-    },
-    created() {
-        this.changeColorDebounce = debounce(this.changeColor, DEBOUNCE_WAIT_IN_MS);
-        this.colorReplacements = cloneDeep(this.value);
-    },
-    methods: {
-        onColorPickerInput(color, index) {
-            if (color) {
-                if (typeof color.value === 'string') {
-                    this.colorReplacements[index].replacementColor = color.value;
-                }
-            }
-            this.changeColorDebounce();
-        },
-        onColorPickerInputDropdown(color, index) {
-            if (typeof color === 'string') {
-                this.colorReplacements[index].replacementColor = color;
-            }
-            this.changeColorDebounce();
-        },
-        changeColor() {
-            this.$emit('update:modelValue', {
-                id: this.id,
-                name: this.name,
-                value: this.colorReplacements,
-            });
-        },
-        onColorMatchToggled(value) {
-            if (value) {
-                this.colorReplacements.forEach((x) => {
-                    x.replacementColor = STYLE_THEME_KEYS.LogoTextColor;
-                });
-            }
-            else {
-                this.colorReplacements.forEach((x) => {
-                    x.replacementColor = x.originalColor;
-                });
-            }
-            this.changeColorDebounce();
-        },
-    },
-});

package/src/shared/content-settings/components/color-replacements-field/ColorReplacementsField.mixin.ts

@@ -1,118 +0,0 @@
-import { defineComponent } from 'vue';
-import type { DebounceHandle } from 'lodash.debounce';
-import debounce from 'lodash.debounce';
-import type { PropType } from 'vue';
-import type { ColorReplacement, LogoTheme } from '../../../../brand-page';
-import cloneDeep from 'lodash.clonedeep';
-import { isColorMatched } from '../../../../brand-page-maker/utils';
-import { STYLE_THEME_KEYS } from '../../../../brand-page/constants';
-import type { UpdateItemValuePayload } from '../../../content-settings/models';
-
-const DEBOUNCE_WAIT_IN_MS = 10;
-
-export default defineComponent({
-  props: {
-    id: {
-      type: String,
-      required: true,
-    },
-    name: {
-      type: String,
-      required: true,
-    },
-    value: {
-      type: Array as PropType<ColorReplacement[]>,
-      required: true,
-    },
-    isAdmin: {
-      type: Boolean,
-      required: true,
-    },
-    label: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    toggleUniqueId: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    logoTheme: {
-      type: Object as PropType<LogoTheme>,
-      required: true,
-    },
-  },
-  emits: ['update:modelValue'],
-  data() {
-    return {
-      colorReplacements: [] as ColorReplacement[],
-      changeColorDebounce: null as any as DebounceHandle,
-      styleThemeKeys: STYLE_THEME_KEYS,
-    };
-  },
-  computed: {
-    colorFieldMode(): string {
-      return this.value.length === 1 ? 'color-and-text' : 'color-only';
-    },
-
-    isOptionColorMatched(): boolean {
-      return this.colorReplacements?.every((x) =>
-        isColorMatched(x.replacementColor),
-      );
-    },
-
-    toggleIdSuffix(): string {
-      return this.toggleUniqueId ? `-${this.toggleUniqueId}` : '';
-    },
-  },
-  watch: {
-    value(newVal: ColorReplacement[]) {
-      this.colorReplacements = cloneDeep(newVal);
-    },
-  },
-  created() {
-    this.changeColorDebounce = debounce(this.changeColor, DEBOUNCE_WAIT_IN_MS);
-
-    this.colorReplacements = cloneDeep(this.value);
-  },
-  methods: {
-    onColorPickerInput(color: UpdateItemValuePayload<string>, index: number) {
-      if (color) {
-        if (typeof color.value === 'string') {
-          this.colorReplacements[index].replacementColor = color.value;
-        }
-      }
-
-      this.changeColorDebounce();
-    },
-    onColorPickerInputDropdown(color: string, index: number) {
-      if (typeof color === 'string') {
-        this.colorReplacements[index].replacementColor = color;
-      }
-
-      this.changeColorDebounce();
-    },
-    changeColor() {
-      this.$emit('update:modelValue', {
-        id: this.id,
-        name: this.name,
-        value: this.colorReplacements,
-      });
-    },
-
-    onColorMatchToggled(value: boolean) {
-      if (value) {
-        this.colorReplacements.forEach((x) => {
-          x.replacementColor = STYLE_THEME_KEYS.LogoTextColor;
-        });
-      } else {
-        this.colorReplacements.forEach((x) => {
-          x.replacementColor = x.originalColor;
-        });
-      }
-
-      this.changeColorDebounce();
-    },
-  },
-});