@designcrowd/library.brand-page 5.16.13-ast-bug-fix-9 → 5.16.13

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.16.13-ast-bug-fix-9",
+  "version": "5.16.13",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",
@@ -55,7 +55,7 @@
   },
   "dependencies": {
     "@ckpack/vue-color": "1.4.1",
-    "@designcrowd/fe-shared-lib": "1.5.6-ast-masonry-1",
+    "@designcrowd/fe-shared-lib": "1.5.2",
     "@pinia/nuxt": "0.11.0",
     "@storybook/react": "9.0.4",
     "@tiptap/extension-bubble-menu": "^2.14.0",

package/src/brand-page/components/image-gallery/masonry/MasonryGallery.mixin.ts

@@ -0,0 +1,144 @@
+import { defineComponent, ref } from 'vue';
+import type { PropType } from 'vue';
+import type { ImageGalleryViewModel } from '../../../view-models';
+import type { DebounceHandle } from 'lodash.debounce';
+import debounce from 'lodash.debounce';
+import type { ImageGalleryImageClickPayload } from '../models';
+import type { BrandPageContext, ImageGalleryItem } from '../../../models';
+import { getImageAltText } from '../../../utils';
+
+interface IndexedImageGalleryItem extends ImageGalleryItem {
+  id: number;
+}
+
+const CONTAINER_WIDTH_MIN_THRESHOLD = 360;
+const DEBOUNCE_WAIT_MS = 100;
+const INIT_COLUMN_WIDTH = 140;
+const MIN_COLUMNS = 2;
+const MAX_COLUMNS = 3;
+
+export default defineComponent({
+  props: {
+    gap: {
+      type: Number,
+      required: false,
+      default: 5,
+    },
+    viewModel: {
+      type: Object as PropType<ImageGalleryViewModel>,
+      required: true,
+    },
+    context: {
+      type: Object as PropType<BrandPageContext>,
+      required: true,
+    },
+    contentIndex: {
+      type: Number,
+      required: false,
+      default: undefined,
+    },
+  },
+  setup() {
+    const masonryRef = ref<InstanceType<any> | null>(null);
+
+    return {
+      masonryRef,
+    };
+  },
+  emits: ['image-click'],
+  data() {
+    return {
+      columnWidth: INIT_COLUMN_WIDTH,
+      resizeDebounceHandler: undefined as DebounceHandle | undefined,
+      resizeObserver: undefined as ResizeObserver | undefined,
+      imagesBroken: {},
+    };
+  },
+  computed: {
+    items(): IndexedImageGalleryItem[] {
+      if (!this.viewModel || !Array.isArray(this.viewModel.images)) {
+        return [];
+      }
+
+      return this.viewModel.images.map((item, id) => {
+        return { ...item, id };
+      });
+    },
+
+    altText(): (item: ImageGalleryItem) => string {
+      return (item) => {
+        return getImageAltText(item, this.context);
+      };
+    },
+  },
+  created() {
+    if (!this.resizeDebounceHandler) {
+      this.resizeDebounceHandler = debounce(() => {
+        this.onResize();
+      }, DEBOUNCE_WAIT_MS);
+    }
+  },
+  mounted() {
+    const $masonry = this.masonryRef;
+
+    if (this.resizeDebounceHandler && $masonry) {
+      this.resizeObserver?.disconnect();
+      this.resizeObserver = new ResizeObserver(this.resizeDebounceHandler);
+      this.resizeObserver.observe($masonry.$el);
+    }
+
+    this.onResize();
+  },
+  beforeUnmount() {
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = undefined;
+  },
+  watch: {
+    viewModel: {
+      handler(newVal, oldVal) {
+        if (newVal.images !== oldVal.images) {
+          this.resetImageBrokenList();
+        }
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    onImageClick(selectedIndex: number) {
+      const payload: ImageGalleryImageClickPayload = {
+        selectedIndex,
+      };
+
+      this.$emit('image-click', payload);
+    },
+    onResize() {
+      const $masonry = this.masonryRef;
+
+      if (!$masonry) {
+        return;
+      }
+
+      const containerWidth = $masonry.$el.clientWidth;
+      const column =
+        containerWidth < CONTAINER_WIDTH_MIN_THRESHOLD
+          ? MIN_COLUMNS
+          : MAX_COLUMNS;
+
+      this.columnWidth = containerWidth / column - this.gap;
+
+      // Force vue masonry wall to resize when container width changed but document width unchanged
+      if ($masonry.$el.$children && $masonry.$el.$children[0]) {
+        $masonry.$el.$children[0].$resize();
+      }
+    },
+    onImageError(index: number) {
+      this.imagesBroken[index] = true;
+    },
+    hasImageError(index: number) {
+      return this.imagesBroken[index] || false;
+    },
+    resetImageBrokenList() {
+      this.imagesBroken = {};
+    },
+  },
+});

package/src/brand-page/components/image-gallery/masonry/MasonryGallery.vue

@@ -2,10 +2,8 @@
   <Masonry
     v-if="items.length > 0"
     ref="masonryRef"
-    :gap="gap"
+    :gap="5"
     :column-width="columnWidth"
-    :max-columns="MAX_COLUMNS"
-    :min-columns="MIN_COLUMNS"
     :items="items"
   >
     <template #item="{ item }">
@@ -31,148 +29,31 @@
     </template>
   </Masonry>
 </template>
-<script setup lang="ts">
-import {
-  computed,
-  ref,
-  watch,
-  onMounted,
-  onBeforeUnmount,
-  nextTick,
-} from 'vue';
+<script>
 import { Masonry } from '@designcrowd/fe-shared-lib';
-import debounce from 'lodash.debounce';
-import type { DebounceHandle } from 'lodash.debounce';
+import MasonryGalleryMixin from './MasonryGallery.mixin.ts';
 import Placeholder from '../../placeholder/Placeholder.vue';
 import FallbackImage from '../../fallback-image/FallbackImage.vue';
 import { imageGalleryTr } from '../../../../composables/useTranslate';
-import type { ImageGalleryViewModel } from '../../../view-models';
-import type { BrandPageContext, ImageGalleryItem } from '../../../models';
-import type { ImageGalleryImageClickPayload } from '../models';
-import { getImageAltText } from '../../../utils';
 
-interface IndexedImageGalleryItem extends ImageGalleryItem {
-  id: number;
-}
-
-interface Props {
-  gap?: number;
-  viewModel: ImageGalleryViewModel;
-  context: BrandPageContext;
-  contentIndex?: number;
-}
-
-const CONTAINER_WIDTH_MIN_THRESHOLD = 360;
-const DEBOUNCE_WAIT_MS = 100;
-const INIT_COLUMN_WIDTH = 140;
-const MIN_COLUMNS = 2;
-const MAX_COLUMNS = 3;
-
-const props = withDefaults(defineProps<Props>(), {
-  gap: 5,
-  contentIndex: undefined,
-});
-
-const emit = defineEmits<{
-  'image-click': [payload: ImageGalleryImageClickPayload];
-}>();
-
-const masonryRef = ref<InstanceType<typeof Masonry> | null>(null);
-const columnWidth = ref(INIT_COLUMN_WIDTH);
-const imagesBroken = ref<Record<number, boolean>>({});
-let resizeObserver: ResizeObserver | undefined;
-let resizeDebounceHandler: DebounceHandle | undefined;
-
-const items = computed((): IndexedImageGalleryItem[] => {
-  if (!props.viewModel || !Array.isArray(props.viewModel.images)) {
-    return [];
-  }
-
-  return props.viewModel.images.map((item, id) => {
-    return { ...item, id };
-  });
-});
-
-const altText = (item: ImageGalleryItem): string => {
-  return getImageAltText(item, props.context);
-};
-
-const onImageClick = (selectedIndex: number) => {
-  const payload: ImageGalleryImageClickPayload = {
-    selectedIndex,
-  };
-  emit('image-click', payload);
-};
-
-const onResize = () => {
-  const $masonry = masonryRef.value;
-
-  if (!$masonry) {
-    return;
-  }
-
-  const containerWidth = $masonry.$el.clientWidth;
-  const column =
-    containerWidth < CONTAINER_WIDTH_MIN_THRESHOLD ? MIN_COLUMNS : MAX_COLUMNS;
-
-  columnWidth.value = containerWidth / column - props.gap;
-
-  // Force vue masonry wall to resize when container width changed but document width unchanged
-  if ($masonry.$el.$children && $masonry.$el.$children[0]) {
-    $masonry.$el.$children[0].$resize();
-  }
-};
-
-const onImageError = (index: number) => {
-  imagesBroken.value[index] = true;
-};
-
-const hasImageError = (index: number): boolean => {
-  return imagesBroken.value[index] || false;
-};
-
-const resetImageBrokenList = () => {
-  imagesBroken.value = {};
-};
-
-// Watchers
-watch(
-  () => props.viewModel.images,
-  () => {
-    resetImageBrokenList();
+export default {
+  components: {
+    Masonry,
+    Placeholder,
+    FallbackImage,
   },
-  { deep: true },
-);
-
-// Lifecycle
-onMounted(() => {
-  resizeDebounceHandler = debounce(() => {
-    onResize();
-  }, DEBOUNCE_WAIT_MS);
-
-  const $masonry = masonryRef.value;
-
-  if (resizeDebounceHandler && $masonry) {
-    resizeObserver?.disconnect();
-    resizeObserver = new ResizeObserver(resizeDebounceHandler);
-    resizeObserver.observe($masonry.$el);
-  }
-
-  // Initial resize calculation
-  nextTick(() => {
-    onResize();
-  });
-});
-
-onBeforeUnmount(() => {
-  resizeObserver?.disconnect();
-});
+  mixins: [MasonryGalleryMixin],
+  setup() {
+    return {
+      ...MasonryGalleryMixin.setup(),
+      imageGalleryTr,
+    };
+  },
+};
 </script>
 <style scoped>
 .c-masonry-img {
   @apply tw-w-full tw-cursor-pointer;
-  display: block;
-  height: auto;
 }
 </style>
 <style>

package/src/brand-page/components/shop/ProductDetailModal.vue

@@ -47,7 +47,7 @@
                   ref="dropdown"
                   v-model:show="data.showMenu"
                   element-classes="tw-h-10 tw-w-full tw-text-grayscale-800"
-                  menu-element-classes="tw-overflow-y-auto tw-max-h-72 tw-w-full"
+                  menu-element-classes="tw-overflow-y-auto tw-max-h-72"
                   :title="data.selectedOption.option"
                   @update:show="onShowMenu"
                 >