@designcrowd/library.brand-page 5.8.6 → 5.8.8

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

@@ -12,7 +12,9 @@
       >{{ label }}
     </span>
     <Toggle
-      v-if="isAdmin && colorReplacements && colorReplacements.length > 0"
+      v-if="
+        isAdmin && data.colorReplacements && data.colorReplacements.length > 0
+      "
       :id="`${id}-${name}-color-matched${toggleIdSuffix}`"
       :model-value="isOptionColorMatched"
       color="info"
@@ -21,11 +23,14 @@
       @update:model-value="onColorMatchToggled"
     />
     <div
-      class="tw-flex tw-flex-wrap tw-gap-2"
-      :class="{ 'tw-flex-col': isOptionColorMatched }"
+      class="tw-flex tw-flex-wrap"
+      :class="{
+        'tw-flex-col': isOptionColorMatched,
+        'tw-gap-2': !isOptionColorMatched,
+      }"
     >
       <div
-        v-for="(colorReplacement, index) in colorReplacements"
+        v-for="(colorReplacement, index) in data.colorReplacements"
         :key="`${colorReplacement.attribute}-${colorReplacement.originalColor}`"
       >
         <ColorField
@@ -37,47 +42,131 @@
           :logo-theme="logoTheme"
           @update:model-value="onColorPickerInput($event, index)"
         />
-        <!-- Start Admin Style Theme Key Select -->
-        <div v-else class="tw-flex tw-gap-2 tw-items-center">
-          <div
-            class="tw-w-4 tw-h-4 tw-rounded tw-border tw-border-solid tw-border-grayscale-500"
-            :style="{ backgroundColor: colorReplacement.originalColor }"
-          />
-          <select
-            class="c-select c-button-style tw-flex-grow tw-border tw-appearance-none tw-border-none tw-h-10 tw-pl-2 tw-rounded tw-cursor-pointer tw-transition-all tw-duration-300 tw-bg-white"
-            @change.stop="
-              onColorPickerInputDropdown($event.target.value, index)
-            "
+      </div>
+      <div
+        v-if="
+          isAdmin &&
+          data.colorReplacements &&
+          data.colorReplacements.length > 0 &&
+          isOptionColorMatched
+        "
+      >
+        <select
+          class="c-select c-button-style tw-flex-grow tw-border tw-appearance-none tw-border-none tw-h-10 tw-pl-2 tw-rounded tw-cursor-pointer tw-transition-all tw-duration-300 tw-bg-white"
+          @change.stop="
+            onColorPickerInputDropdown(($event!.target as any).value)
+          "
+        >
+          <option
+            v-for="(styleThemeKey, styleKeyThemeIndex) in data.styleThemeKeys"
+            :key="styleKeyThemeIndex"
+            :value="styleThemeKey"
+            :selected="styleThemeKey === selectedColor"
           >
-            <option
-              v-for="(styleThemeKey, styleKeyThemeIndex) in styleThemeKeys"
-              :key="styleKeyThemeIndex"
-              :value="styleThemeKey"
-              :selected="
-                styleThemeKey === colorReplacement.replacementColor
-                  ? 'selected'
-                  : null
-              "
-            >
-              {{ styleThemeKey }}
-            </option>
-          </select>
-        </div>
-        <!-- End Admin Style Theme Key Select -->
+            {{ styleThemeKey }}
+          </option>
+        </select>
       </div>
     </div>
   </div>
 </template>
-<script>
+<script setup lang="ts">
 import { Toggle } from '@designcrowd/fe-shared-lib';
-import ColorReplacementsFieldMixin from './ColorReplacementsField.mixin.ts';
 import ColorField from '../../../content-settings/components/color-field/ColorField.vue';
+import type { ColorReplacement, LogoTheme } from '../../../../brand-page';
+import { reactive, watch, computed } from 'vue';
+import { STYLE_THEME_KEYS } from '../../../../brand-page/constants';
+import cloneDeep from 'lodash.clonedeep';
+import debounce from 'lodash.debounce';
+import { isColorMatched } from '../../../../brand-page-maker/utils';
+import type { DebounceHandle } from 'lodash.debounce';
+import type { UpdateItemValuePayload } from '../../../content-settings/models';
+
+const DEBOUNCE_WAIT_IN_MS = 10;
+
+const props = defineProps<{
+  id: string;
+  name: string;
+  value: ColorReplacement[];
+  isAdmin: boolean;
+  label?: string;
+  toggleUniqueId?: string;
+  logoTheme: LogoTheme;
+}>();
 
-export default {
-  components: {
-    Toggle,
-    ColorField,
+const emit = defineEmits(['update:modelValue']);
+
+const changeColor = () => {
+  emit('update:modelValue', {
+    id: props.id,
+    name: props.name,
+    value: data.colorReplacements,
+  });
+};
+
+const data = reactive<{
+  colorReplacements: ColorReplacement[];
+  changeColorDebounce: DebounceHandle;
+  styleThemeKeys: typeof STYLE_THEME_KEYS;
+}>({
+  colorReplacements: cloneDeep(props.value),
+  changeColorDebounce: debounce(changeColor, DEBOUNCE_WAIT_IN_MS),
+  styleThemeKeys: STYLE_THEME_KEYS,
+});
+
+watch(
+  () => props.value,
+  (newVal: ColorReplacement[]) => {
+    data.colorReplacements = cloneDeep(newVal);
   },
-  mixins: [ColorReplacementsFieldMixin],
+);
+
+const selectedColor = computed(
+  () => data.colorReplacements[0]?.replacementColor,
+);
+
+const isOptionColorMatched = computed(() =>
+  data.colorReplacements?.every((x) => isColorMatched(x.replacementColor)),
+);
+
+const toggleIdSuffix = computed(() =>
+  props.toggleUniqueId ? `-${props.toggleUniqueId}` : '',
+);
+
+const onColorPickerInput = (
+  color: UpdateItemValuePayload<string>,
+  index: number,
+) => {
+  if (color) {
+    if (typeof color.value === 'string') {
+      data.colorReplacements[index].replacementColor = color.value;
+    }
+  }
+
+  data.changeColorDebounce();
+};
+
+const onColorPickerInputDropdown = (color: string) => {
+  if (typeof color === 'string') {
+    data.colorReplacements.forEach((c) => {
+      c.replacementColor = color;
+    });
+  }
+
+  data.changeColorDebounce();
+};
+
+const onColorMatchToggled = (value: boolean) => {
+  if (value) {
+    data.colorReplacements.forEach((x) => {
+      x.replacementColor = STYLE_THEME_KEYS.LogoTextColor;
+    });
+  } else {
+    data.colorReplacements.forEach((x) => {
+      x.replacementColor = x.originalColor;
+    });
+  }
+
+  data.changeColorDebounce();
 };
 </script>

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();
-    },
-  },
-});