@yeger/vue2-masonry-wall/dist/index.mjs.map

Responsive masonry layout with SSR support and zero dependencies for Vue 2.

{"version":3,"file":"index.mjs","names":[],"sources":["../src/masonry-wall.vue","../src/masonry-wall.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Column, NonEmptyArray } from '@yeger/vue-masonry-wall-core'\nimport { useMasonryWall } from '@yeger/vue-masonry-wall-core'\nimport type { Ref } from 'vue'\nimport { nextTick, onBeforeUnmount, onMounted, ref, toRefs, watch } from 'vue'\n\nexport type KeyMapper<T> = (\n  item: T,\n  column: number,\n  row: number,\n  index: number,\n) => string | number | symbol | undefined\n\nconst props = withDefaults(\n  defineProps<{\n    columnWidth?: number | NonEmptyArray<number> | undefined\n    items: unknown[]\n    gap?: number | undefined\n    rtl?: boolean | undefined\n    ssrColumns?: number | undefined\n    scrollContainer?: HTMLElement | null | undefined\n    minColumns?: number | undefined\n    maxColumns?: number | undefined\n    keyMapper?: KeyMapper<unknown> | undefined\n  }>(),\n  {\n    columnWidth: 400,\n    gap: 0,\n    minColumns: 1,\n    maxColumns: undefined,\n    rtl: false,\n    scrollContainer: null,\n    ssrColumns: 0,\n  },\n)\n\nconst emit = defineEmits<{\n  (event: 'redraw'): void\n  (event: 'redraw-skip'): void\n}>()\n\nconst columns = ref<Column[]>([])\nconst wall = ref<HTMLDivElement>() as Ref<HTMLDivElement>\n\nconst { getColumnWidthTarget } = useMasonryWall<unknown>({\n  columns,\n  emit,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  vue: 2,\n  wall,\n  watch,\n  ...toRefs(props),\n})\n\nconst heightStyle = ['-webkit-max-content', '-moz-max-content', 'max-content'] as any\n</script>\n\n<template>\n  <div ref=\"wall\" class=\"masonry-wall\" :style=\"{ display: 'flex', gap: `${gap}px` }\">\n    <div\n      v-for=\"(column, columnIndex) in columns\"\n      :key=\"columnIndex\"\n      class=\"masonry-column\"\n      :data-index=\"columnIndex\"\n      :style=\"{\n        display: 'flex',\n        'flex-basis': `${getColumnWidthTarget(columnIndex)}px`,\n        'flex-direction': 'column',\n        'flex-grow': 1,\n        gap: `${gap}px`,\n        height: heightStyle,\n        'min-width': 0,\n      }\"\n    >\n      <div\n        v-for=\"(itemIndex, row) in column\"\n        :key=\"keyMapper?.(items[itemIndex], columnIndex, row, itemIndex) ?? itemIndex\"\n        class=\"masonry-item\"\n      >\n        <slot\n          :item=\"items[itemIndex]\"\n          :column=\"columnIndex\"\n          :column-count=\"columns.length\"\n          :row=\"row\"\n          :index=\"itemIndex\"\n        >\n          {{ items[itemIndex] }}\n        </slot>\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport type { Column, NonEmptyArray } from '@yeger/vue-masonry-wall-core'\nimport { useMasonryWall } from '@yeger/vue-masonry-wall-core'\nimport type { Ref } from 'vue'\nimport { nextTick, onBeforeUnmount, onMounted, ref, toRefs, watch } from 'vue'\n\nexport type KeyMapper<T> = (\n  item: T,\n  column: number,\n  row: number,\n  index: number,\n) => string | number | symbol | undefined\n\nconst props = withDefaults(\n  defineProps<{\n    columnWidth?: number | NonEmptyArray<number> | undefined\n    items: unknown[]\n    gap?: number | undefined\n    rtl?: boolean | undefined\n    ssrColumns?: number | undefined\n    scrollContainer?: HTMLElement | null | undefined\n    minColumns?: number | undefined\n    maxColumns?: number | undefined\n    keyMapper?: KeyMapper<unknown> | undefined\n  }>(),\n  {\n    columnWidth: 400,\n    gap: 0,\n    minColumns: 1,\n    maxColumns: undefined,\n    rtl: false,\n    scrollContainer: null,\n    ssrColumns: 0,\n  },\n)\n\nconst emit = defineEmits<{\n  (event: 'redraw'): void\n  (event: 'redraw-skip'): void\n}>()\n\nconst columns = ref<Column[]>([])\nconst wall = ref<HTMLDivElement>() as Ref<HTMLDivElement>\n\nconst { getColumnWidthTarget } = useMasonryWall<unknown>({\n  columns,\n  emit,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  vue: 2,\n  wall,\n  watch,\n  ...toRefs(props),\n})\n\nconst heightStyle = ['-webkit-max-content', '-moz-max-content', 'max-content'] as any\n</script>\n\n<template>\n  <div ref=\"wall\" class=\"masonry-wall\" :style=\"{ display: 'flex', gap: `${gap}px` }\">\n    <div\n      v-for=\"(column, columnIndex) in columns\"\n      :key=\"columnIndex\"\n      class=\"masonry-column\"\n      :data-index=\"columnIndex\"\n      :style=\"{\n        display: 'flex',\n        'flex-basis': `${getColumnWidthTarget(columnIndex)}px`,\n        'flex-direction': 'column',\n        'flex-grow': 1,\n        gap: `${gap}px`,\n        height: heightStyle,\n        'min-width': 0,\n      }\"\n    >\n      <div\n        v-for=\"(itemIndex, row) in column\"\n        :key=\"keyMapper?.(items[itemIndex], columnIndex, row, itemIndex) ?? itemIndex\"\n        class=\"masonry-item\"\n      >\n        <slot\n          :item=\"items[itemIndex]\"\n          :column=\"columnIndex\"\n          :column-count=\"columns.length\"\n          :row=\"row\"\n          :index=\"itemIndex\"\n        >\n          {{ items[itemIndex] }}\n        </slot>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAyCA,MAAM,UAAU,IAAc,EAAE,CAAC;EACjC,MAAM,OAAO,KAAqB;EAElC,MAAM,EAAE,yBAAyB,eAAwB;GACvD;GACA;GACA;GACA;GACA;GACA,KAAK;GACL;GACA;GACA,GAAG,OAAO,MAAM;GACjB,CAAC;;;;;;;;gBAEkB;IAAC;IAAuB;IAAoB;IAAc"}