@designcrowd/fe-shared-lib 1.5.7 → 1.5.8

package/src/atoms/thirdparty-components/VueMasonryWall/VueMasonryWall.vue

@@ -1,280 +1,280 @@
-<template>
-  <div ref="wall" class="masonry-wall" :style="_style.wall" :class="{ ready }">
-    <div v-for="(lane, index) in columns" :key="index" class="masonry-column" :style="_style.lane">
-      <div v-for="i in lane.indexes" :key="i" :ref="`item_${i}`" class="masonry-item" :style="_style.item">
-        <slot :item="items[i]" :index="i">{{ items[i] }}</slot>
-      </div>
-
-      <div
-        ref="bottom"
-        v-observe-visibility="{ callback: (v) => v && _fill(), throttle: _options.throttle }"
-        class="masonry-bottom"
-        :data-column="index"
-      ></div>
-    </div>
-  </div>
-</template>
-<!-- eslint-disable no-underscore-dangle -->
-<!-- eslint-disable no-plusplus -->
-<!-- eslint-disable vue/require-default-prop -->
-<script>
-import { ObserveVisibility } from 'vue-observe-visibility';
-import maxBy from './maxBy';
-
-/**
- * @param count number of columns to create
- * @returns {[{i: number, indexes: []},...]}
- */
-const _newColumns = (count) => {
-  const columns = [];
-  for (let i = 0; i < count; i++) {
-    columns.push({ i, indexes: [] });
-  }
-  return columns;
-};
-
-export default {
-  name: 'VueMasonryWall',
-  directives: {
-    'observe-visibility': ObserveVisibility,
-  },
-  props: {
-    /**
-     * Array of items to add into masonry
-     */
-    items: {
-      type: Array,
-      required: true,
-    },
-
-    /**
-     * Options to config masonry.
-     *
-     * {
-     *     width: 300,
-     *     padding: {
-     *         default: 12,
-     *         1: 6,
-     *         2: 8,
-     *     },
-     *     throttle: 300
-     * }
-     */
-    options: {
-      type: Object,
-      required: false,
-    },
-
-    /**
-     * SSR has no clue what is the size of your height of your element or width of the browser.
-     * You can however guess based on user-agent: https://github.com/nuxt-community/device-module
-     * This param allow you to preload a config for SSR rendering, it will distribute your items into all columns evenly.
-     *
-     * Once the client is mounted, it will redraw if the config is different from SSR.
-     *
-     * {
-     *     column: 2
-     * }
-     */
-    ssr: {
-      type: Object,
-      required: false,
-    },
-  },
-  data() {
-    const count = this.ssr && this.ssr.columns;
-    if (count > 0) {
-      const columns = _newColumns(count);
-
-      for (let i = 0; i < this.items.length; i++) {
-        columns[i % count].indexes.push(i);
-      }
-
-      return {
-        columns,
-        cursor: this.items.length,
-        ready: false,
-      };
-    }
-
-    return {
-      columns: [],
-      cursor: 0,
-      ready: false,
-    };
-  },
-  computed: {
-    /**
-     * Options with default override if not given
-     *
-     * @private
-     */
-    _options() {
-      const { options } = this;
-      return {
-        width: (options && options.width) || 300,
-        padding: {
-          default: (options && options.padding && options.padding.default) || 12,
-        },
-        throttle: (options && options.throttle) || 300,
-      };
-    },
-
-    /**
-     * Style of wall, column and item for padding
-     * @private
-     */
-    _style() {
-      let padding = this.options && this.options.padding;
-      if (padding && typeof padding !== 'number') {
-        padding = this.options.padding[this.columns.length] || this._options.padding.default;
-      }
-
-      return {
-        wall: {
-          margin: `-${padding}px`,
-        },
-        lane: {
-          paddingLeft: `${padding}px`,
-          paddingRight: `${padding}px`,
-        },
-        item: {
-          paddingTop: `${padding}px`,
-          paddingBottom: `${padding}px`,
-        },
-      };
-    },
-  },
-  watch: {
-    items: {
-      handler() {
-        this._fill();
-      },
-      deep: true,
-    },
-    options: {
-      handler(oldValue, newValue) {
-        if (oldValue.width === newValue.width) {
-          return;
-        }
-
-        this.redraw();
-      },
-      deep: true,
-    },
-  },
-  /**
-   * For detecting browser resize event to redraw the columns.
-   */
-  mounted() {
-    this.$resize = () => {
-      if (this.columns.length !== this._columnSize()) {
-        this.redraw();
-      }
-    };
-
-    this.$resize();
-
-    // set opacity to 1 when ssr.columns is recieved and  this.columns.length === this._columnSize() so redraw does not get called for the first time.
-    if (!this.ready) this.ready = true;
-
-    window.addEventListener('resize', this.$resize);
-  },
-  /**
-   * Remove resize event listener
-   */
-  beforeDestroy() {
-    window.removeEventListener('resize', this.$resize);
-  },
-  methods: {
-    /**
-     * Redraw masonry
-     */
-    redraw() {
-      this.ready = false;
-      this.columns.splice(0);
-      this.cursor = 0;
-      this.columns.push(..._newColumns(this._columnSize()));
-      this.ready = true;
-      this._fill();
-    },
-
-    /**
-     *
-     * @returns {number}
-     * @private internal component use
-     */
-    _columnSize() {
-      if (!this.$refs.wall) {
-        return 1;
-      }
-
-      const length = Math.round(this.$refs.wall.scrollWidth / this._options.width);
-      if (length < 1) return 1;
-      return length;
-    },
-
-    /**
-     * Add items into masonry columns, items are added to the shortest column first.
-     *
-     * @private internal component use
-     */
-    _fill() {
-      if (!this.ready) return;
-
-      if (this.cursor >= this.items.length) {
-        // Request for more items
-        this.$emit('append');
-        return;
-      }
-
-      // Keep filling until no more items
-      this.$nextTick(() => {
-        const bottom = maxBy(this.$refs.bottom, (spacer) => spacer.clientHeight || 0);
-        this._addItem(bottom.dataset.column);
-        this._fill();
-      });
-    },
-
-    /**
-     * Items will automatically be taken from items with cursor.
-     *
-     * @param index of the column to add to
-     * @private internal component use
-     */
-    _addItem(index) {
-      const column = this.columns[index];
-      if (this.items[this.cursor]) {
-        column.indexes.push(this.cursor);
-        this.cursor++;
-      }
-    },
-  },
-};
-</script>
-
-<style scoped>
-.masonry-wall {
-  display: flex;
-}
-
-.masonry-wall:not(.ready) {
-  opacity: 0;
-}
-
-.masonry-column {
-  flex-grow: 1;
-  flex-basis: 0;
-
-  display: flex;
-  flex-direction: column;
-}
-
-.masonry-bottom {
-  flex-grow: 1;
-  margin-top: -300px;
-  padding-top: 300px;
-  min-height: 100px;
-  z-index: -1;
-}
-</style>
+<template>
+  <div ref="wall" class="masonry-wall" :style="_style.wall" :class="{ ready }">
+    <div v-for="(lane, index) in columns" :key="index" class="masonry-column" :style="_style.lane">
+      <div v-for="i in lane.indexes" :key="i" :ref="`item_${i}`" class="masonry-item" :style="_style.item">
+        <slot :item="items[i]" :index="i">{{ items[i] }}</slot>
+      </div>
+
+      <div
+        ref="bottom"
+        v-observe-visibility="{ callback: (v) => v && _fill(), throttle: _options.throttle }"
+        class="masonry-bottom"
+        :data-column="index"
+      ></div>
+    </div>
+  </div>
+</template>
+<!-- eslint-disable no-underscore-dangle -->
+<!-- eslint-disable no-plusplus -->
+<!-- eslint-disable vue/require-default-prop -->
+<script>
+import { ObserveVisibility } from 'vue-observe-visibility';
+import maxBy from './maxBy';
+
+/**
+ * @param count number of columns to create
+ * @returns {[{i: number, indexes: []},...]}
+ */
+const _newColumns = (count) => {
+  const columns = [];
+  for (let i = 0; i < count; i++) {
+    columns.push({ i, indexes: [] });
+  }
+  return columns;
+};
+
+export default {
+  name: 'VueMasonryWall',
+  directives: {
+    'observe-visibility': ObserveVisibility,
+  },
+  props: {
+    /**
+     * Array of items to add into masonry
+     */
+    items: {
+      type: Array,
+      required: true,
+    },
+
+    /**
+     * Options to config masonry.
+     *
+     * {
+     *     width: 300,
+     *     padding: {
+     *         default: 12,
+     *         1: 6,
+     *         2: 8,
+     *     },
+     *     throttle: 300
+     * }
+     */
+    options: {
+      type: Object,
+      required: false,
+    },
+
+    /**
+     * SSR has no clue what is the size of your height of your element or width of the browser.
+     * You can however guess based on user-agent: https://github.com/nuxt-community/device-module
+     * This param allow you to preload a config for SSR rendering, it will distribute your items into all columns evenly.
+     *
+     * Once the client is mounted, it will redraw if the config is different from SSR.
+     *
+     * {
+     *     column: 2
+     * }
+     */
+    ssr: {
+      type: Object,
+      required: false,
+    },
+  },
+  data() {
+    const count = this.ssr && this.ssr.columns;
+    if (count > 0) {
+      const columns = _newColumns(count);
+
+      for (let i = 0; i < this.items.length; i++) {
+        columns[i % count].indexes.push(i);
+      }
+
+      return {
+        columns,
+        cursor: this.items.length,
+        ready: false,
+      };
+    }
+
+    return {
+      columns: [],
+      cursor: 0,
+      ready: false,
+    };
+  },
+  computed: {
+    /**
+     * Options with default override if not given
+     *
+     * @private
+     */
+    _options() {
+      const { options } = this;
+      return {
+        width: (options && options.width) || 300,
+        padding: {
+          default: (options && options.padding && options.padding.default) || 12,
+        },
+        throttle: (options && options.throttle) || 300,
+      };
+    },
+
+    /**
+     * Style of wall, column and item for padding
+     * @private
+     */
+    _style() {
+      let padding = this.options && this.options.padding;
+      if (padding && typeof padding !== 'number') {
+        padding = this.options.padding[this.columns.length] || this._options.padding.default;
+      }
+
+      return {
+        wall: {
+          margin: `-${padding}px`,
+        },
+        lane: {
+          paddingLeft: `${padding}px`,
+          paddingRight: `${padding}px`,
+        },
+        item: {
+          paddingTop: `${padding}px`,
+          paddingBottom: `${padding}px`,
+        },
+      };
+    },
+  },
+  watch: {
+    items: {
+      handler() {
+        this._fill();
+      },
+      deep: true,
+    },
+    options: {
+      handler(oldValue, newValue) {
+        if (oldValue.width === newValue.width) {
+          return;
+        }
+
+        this.redraw();
+      },
+      deep: true,
+    },
+  },
+  /**
+   * For detecting browser resize event to redraw the columns.
+   */
+  mounted() {
+    this.$resize = () => {
+      if (this.columns.length !== this._columnSize()) {
+        this.redraw();
+      }
+    };
+
+    this.$resize();
+
+    // set opacity to 1 when ssr.columns is recieved and  this.columns.length === this._columnSize() so redraw does not get called for the first time.
+    if (!this.ready) this.ready = true;
+
+    window.addEventListener('resize', this.$resize);
+  },
+  /**
+   * Remove resize event listener
+   */
+  beforeDestroy() {
+    window.removeEventListener('resize', this.$resize);
+  },
+  methods: {
+    /**
+     * Redraw masonry
+     */
+    redraw() {
+      this.ready = false;
+      this.columns.splice(0);
+      this.cursor = 0;
+      this.columns.push(..._newColumns(this._columnSize()));
+      this.ready = true;
+      this._fill();
+    },
+
+    /**
+     *
+     * @returns {number}
+     * @private internal component use
+     */
+    _columnSize() {
+      if (!this.$refs.wall) {
+        return 1;
+      }
+
+      const length = Math.round(this.$refs.wall.scrollWidth / this._options.width);
+      if (length < 1) return 1;
+      return length;
+    },
+
+    /**
+     * Add items into masonry columns, items are added to the shortest column first.
+     *
+     * @private internal component use
+     */
+    _fill() {
+      if (!this.ready) return;
+
+      if (this.cursor >= this.items.length) {
+        // Request for more items
+        this.$emit('append');
+        return;
+      }
+
+      // Keep filling until no more items
+      this.$nextTick(() => {
+        const bottom = maxBy(this.$refs.bottom, (spacer) => spacer.clientHeight || 0);
+        this._addItem(bottom.dataset.column);
+        this._fill();
+      });
+    },
+
+    /**
+     * Items will automatically be taken from items with cursor.
+     *
+     * @param index of the column to add to
+     * @private internal component use
+     */
+    _addItem(index) {
+      const column = this.columns[index];
+      if (this.items[this.cursor]) {
+        column.indexes.push(this.cursor);
+        this.cursor++;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.masonry-wall {
+  display: flex;
+}
+
+.masonry-wall:not(.ready) {
+  opacity: 0;
+}
+
+.masonry-column {
+  flex-grow: 1;
+  flex-basis: 0;
+
+  display: flex;
+  flex-direction: column;
+}
+
+.masonry-bottom {
+  flex-grow: 1;
+  margin-top: -300px;
+  padding-top: 300px;
+  min-height: 100px;
+  z-index: -1;
+}
+</style>

package/src/atoms/thirdparty-components/VueMasonryWall/maxBy.js

@@ -1,50 +1,50 @@
-/* eslint-disable no-restricted-syntax */
-function getTag(value) {
-  if (value == null) {
-    return value === undefined ? '[object Undefined]' : '[object Null]';
-  }
-  return toString.call(value);
-}
-
-function isSymbol(value) {
-  const type = typeof value;
-  // eslint-disable-next-line eqeqeq
-  return type == 'symbol' || (type === 'object' && value != null && getTag(value) == '[object Symbol]');
-}
-
-/**
- * This method is like `max` except that it accepts `iteratee` which is
- * invoked for each element in `array` to generate the criterion by which
- * the value is ranked. The iteratee is invoked with one argument: (value).
- *
- * @since 4.0.0
- * @category Math
- * @param {Array} array The array to iterate over.
- * @param {Function} iteratee The iteratee invoked per element.
- * @returns {*} Returns the maximum value.
- * @example
- *
- * const objects = [{ 'n': 1 }, { 'n': 2 }]
- *
- * maxBy(objects, ({ n }) => n)
- * // => { 'n': 2 }
- */
-function maxBy(array, iteratee) {
-  let result;
-  if (array == null) {
-    return result;
-  }
-  let computed;
-  for (const value of array) {
-    const current = iteratee(value);
-
-    // eslint-disable-next-line no-self-compare
-    if (current != null && (computed === undefined ? current === current && !isSymbol(current) : current > computed)) {
-      computed = current;
-      result = value;
-    }
-  }
-  return result;
-}
-
-export default maxBy;
+/* eslint-disable no-restricted-syntax */
+function getTag(value) {
+  if (value == null) {
+    return value === undefined ? '[object Undefined]' : '[object Null]';
+  }
+  return toString.call(value);
+}
+
+function isSymbol(value) {
+  const type = typeof value;
+  // eslint-disable-next-line eqeqeq
+  return type == 'symbol' || (type === 'object' && value != null && getTag(value) == '[object Symbol]');
+}
+
+/**
+ * This method is like `max` except that it accepts `iteratee` which is
+ * invoked for each element in `array` to generate the criterion by which
+ * the value is ranked. The iteratee is invoked with one argument: (value).
+ *
+ * @since 4.0.0
+ * @category Math
+ * @param {Array} array The array to iterate over.
+ * @param {Function} iteratee The iteratee invoked per element.
+ * @returns {*} Returns the maximum value.
+ * @example
+ *
+ * const objects = [{ 'n': 1 }, { 'n': 2 }]
+ *
+ * maxBy(objects, ({ n }) => n)
+ * // => { 'n': 2 }
+ */
+function maxBy(array, iteratee) {
+  let result;
+  if (array == null) {
+    return result;
+  }
+  let computed;
+  for (const value of array) {
+    const current = iteratee(value);
+
+    // eslint-disable-next-line no-self-compare
+    if (current != null && (computed === undefined ? current === current && !isSymbol(current) : current > computed)) {
+      computed = current;
+      result = value;
+    }
+  }
+  return result;
+}
+
+export default maxBy;