PW-15: Image Lazy Loading

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/"
@@ -28,7 +28,7 @@
   "dependencies": {
     "core-js": "^3.6.4",
     "element-resize-detector": "^1.2.1",
-    "element-ui": "^2.13.2",
+    "element-ui": "^2.15.5",
     "lodash": "^4.17.15",
     "throttle-debounce": "^1.0.1",
     "v-jsoneditor": "^1.4.1",

src/components/Image/SImage/SImage.vue

@@ -0,0 +1,75 @@
+<template>
+  <el-image
+    ref="image"
+    class="s-image"
+    :src="src"
+    :fit="fit"
+    :alt="alt"
+    :lazy="lazy"
+    :scroll-container="scrollContainer"
+    :z-ndex="zIndex"
+  >
+    <s-skeleton v-if="hasSkeleton" slot="placeholder" :animated="animated">
+      <template #template>
+        <s-skeleton-item :element="SkeletonItemElement.IMAGE" />
+      </template>
+    </s-skeleton>
+  </el-image>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Ref } from 'vue-property-decorator'
+import ElImage from 'element-ui/lib/image'
+
+import { SSkeleton, SSkeletonItem, SkeletonItemElement } from '../../Skeleton'
+import { ImageFit } from '../consts'
+
+@Component({
+  components: {
+    ElImage,
+    SSkeleton,
+    SSkeletonItem
+  }
+})
+export default class SImage extends Vue {
+  /**
+   * Image source, same as native, this is required property
+   */
+  @Prop({ type: String, required: true }) readonly src!: string
+  /**
+   * Indicate how the image should be resized to fit its container, same as object-fit.
+   * Possible values are: `fill` / `contain` / `cover` / `none` / `scale-down`.
+   * Default value is ImageFit.NONE.
+   */
+  @Prop({ default: ImageFit.NONE, type: String }) readonly fit!: string
+  /**
+   * Native alt
+   */
+  @Prop({ default: '', type: String }) readonly alt!: string
+  /**
+   * Whether to use lazy load
+   */
+  @Prop({ default: false, type: Boolean }) readonly lazy!: boolean
+  /**
+   * The container to add scroll listener when using lazy load.
+   * Posssible value is the nearest parent container whose overflow property is auto or scroll
+   */
+  @Prop({ type: [String, HTMLElement] }) readonly scrollContainer!: string | HTMLElement
+  /**
+   * Set image preview z-index
+   */
+  @Prop({ default: 0, type: Number }) readonly zIndex!: number
+  /**
+   * Whether image has skeleton
+   */
+  @Prop({ default: true, type: Boolean }) readonly hasSkeleton!: boolean
+  /**
+   * Whether skeleton has animation
+   */
+  @Prop({ default: true, type: Boolean }) readonly animated!: boolean
+
+  readonly SkeletonItemElement = SkeletonItemElement
+
+  @Ref('image') elImage!: any
+}
+</script>

src/components/Image/SImage/index.ts

@@ -0,0 +1,11 @@
+import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
+
+import _SImage from './SImage.vue'
+
+const SImage = _SImage as SFCWithInstall<typeof _SImage>
+
+SImage.install = install(Components.SImage, SImage)
+
+export { SImage }
+export default SImage

src/components/Image/consts.ts

@@ -0,0 +1,7 @@
+export enum ImageFit {
+  FILL = 'fill',
+  CONTAIN = 'contain',
+  COVER = 'cover',
+  NONE = 'none',
+  SCALE_DOWN = 'scale-down'
+}

src/components/Image/index.ts

@@ -0,0 +1,2 @@
+export { SImage } from './SImage'
+export { ImageFit } from './consts'

src/components/Skeleton/SSkeleton/SSkeleton.vue

@@ -0,0 +1,47 @@
+<template>
+  <el-skeleton
+    class="s-skeleton"
+    :animated="animated"
+    :count="count"
+    :loading="loading"
+    :rows="rows"
+    :throttle="throttle"
+  >
+    <slot slot="template" name="template" />
+    <slot />
+  </el-skeleton>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator'
+import ElSkeleton from 'element-ui/lib/skeleton'
+import ElSkeletonItem from 'element-ui/lib/skeleton-item'
+
+@Component({
+  components: { ElSkeleton, ElSkeletonItem }
+})
+export default class SSkeleton extends Vue {
+  /**
+   * Whether showing the animation, default value is false.
+   */
+  @Prop({ default: false, type: Boolean }) readonly animated!: boolean
+  /**
+   * How many fake items to render in the DOM, should have integer value.
+   * Default value is 1.
+   */
+  @Prop({ default: 1, type: Number }) readonly count!: number
+  /**
+   * Whether showing the skeleton
+   */
+  @Prop({ default: true, type: Boolean }) readonly loading!: boolean
+  /**
+   * Numbers of the row, only useful when no template slot were given, should have integer value.
+   * Default value is 1.
+   */
+  @Prop({ default: 4, type: Number }) readonly rows!: number
+  /**
+   * Rendering delay in millseconds, should have integer value. Default value is zero.
+   */
+  @Prop({ default: 0, type: Number }) readonly throttle!: number
+}
+</script>

src/components/Skeleton/SSkeleton/index.ts

@@ -0,0 +1,11 @@
+import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
+
+import _SSkeleton from './SSkeleton.vue'
+
+const SSkeleton = _SSkeleton as SFCWithInstall<typeof _SSkeleton>
+
+SSkeleton.install = install(Components.SSkeleton, SSkeleton)
+
+export { SSkeleton }
+export default SSkeleton

src/components/Skeleton/SSkeletonItem/SSkeletonItem.vue

@@ -0,0 +1,22 @@
+<template>
+  <el-skeleton-item :variant="element" />
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator'
+import ElSkeletonItem from 'element-ui/lib/skeleton-item'
+
+import { SkeletonItemElement } from '../consts'
+
+@Component({
+  components: { ElSkeletonItem }
+})
+export default class SSkeletonItem extends Vue {
+  /**
+   * The current rendering skeleton type.
+   * Possible values are: `p` / `text` / `h1` / `h2` / `h3` / `text` / `caption` / `button` / `image` / `circle` / `rect`.
+   * Default value is SkeletonItemElement.TEXT.
+   */
+  @Prop({ default: SkeletonItemElement.TEXT, type: String }) readonly element!: string
+}
+</script>

src/components/Skeleton/SSkeletonItem/index.ts

@@ -0,0 +1,11 @@
+import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
+
+import _SSkeletonItem from './SSkeletonItem.vue'
+
+const SSkeletonItem = _SSkeletonItem as SFCWithInstall<typeof _SSkeletonItem>
+
+SSkeletonItem.install = install(Components.SSkeleton, SSkeletonItem)
+
+export { SSkeletonItem }
+export default SSkeletonItem

src/components/Skeleton/consts.ts

@@ -0,0 +1,12 @@
+export enum SkeletonItemElement {
+  P = 'p',
+  TEXT = 'text',
+  H1 = 'h1',
+  H2 = 'h2',
+  H3 = 'h3',
+  CAPTION = 'caption',
+  BUTTON = 'button',
+  IMAGE = 'image',
+  CIRCLE = 'circle',
+  RECT = 'rect'
+}

src/components/Skeleton/index.ts

@@ -0,0 +1,3 @@
+export { SSkeleton } from './SSkeleton'
+export { SSkeletonItem } from './SSkeletonItem'
+export { SkeletonItemElement } from './consts'

src/components/index.ts

@@ -16,6 +16,7 @@ export { SFooter } from './Layout/Footer'
 export { SForm, SFormItem } from './Form'
 export { SHeader } from './Layout/Header'
 export { SIcon } from './Icon'
+export { SImage } from './Image'
 export { SInput, SFloatInput, SJsonInput } from './Input'
 export { SMain } from './Layout/Main'
 export { SMenu, SMenuItem, SMenuItemGroup, SSubmenu } from './Menu'
@@ -27,6 +28,7 @@ export { SRow } from './Layout/Row'
 export { SScrollbar } from './Scrollbar'
 export { SScrollSectionItem, SScrollSections } from './ScrollSections'
 export { SSelect, SOption, SOptionGroup } from './Select'
+export { SSkeleton, SSkeletonItem } from './Skeleton'
 export { STab, STabs } from './Tab'
 export { STable, SHierarchicalTable, STableColumn } from './Table'
 export { STooltip } from './Tooltip'

src/index.ts

@@ -24,6 +24,7 @@ import {
   SFormItem,
   SHeader,
   SIcon,
+  SImage,
   SInput,
   SFloatInput,
   SJsonInput,
@@ -41,6 +42,8 @@ import {
   SScrollSectionItem,
   SScrollSections,
   SSelect,
+  SSkeleton,
+  SSkeletonItem,
   SSlider,
   SSubmenu,
   SSwitch,
@@ -92,6 +95,7 @@ const SoramitsuElements = {
     vue.use(SFormItem)
     vue.use(SHeader)
     vue.use(SIcon)
+    vue.use(SImage)
     vue.use(SInput)
     vue.use(SFloatInput)
     vue.use(SJsonInput)
@@ -109,6 +113,8 @@ const SoramitsuElements = {
     vue.use(SScrollSectionItem)
     vue.use(SScrollSections)
     vue.use(SSelect)
+    vue.use(SSkeleton)
+    vue.use(SSkeletonItem)
     vue.use(SSlider)
     vue.use(SSubmenu)
     vue.use(SSwitch)
@@ -162,6 +168,7 @@ export {
   SFormItem,
   SHeader,
   SIcon,
+  SImage,
   SInput,
   SFloatInput,
   SJsonInput,
@@ -179,6 +186,8 @@ export {
   SScrollSectionItem,
   SScrollSections,
   SSelect,
+  SSkeleton,
+  SSkeletonItem,
   SSlider,
   SSubmenu,
   SSwitch,

src/stories/SButton.stories.ts

@@ -181,7 +181,7 @@ export const loading = () => ({
                  :type="item.type"
                  :tooltip="item.tooltip"
                  :icon="item.icon"
-                 :loading="true"
+                 loading
                >
                  {{ item.label }}
                </s-button>

src/stories/SImage.stories.ts

@@ -0,0 +1,75 @@
+import { text, boolean, number, select, withKnobs } from '@storybook/addon-knobs'
+
+import { SImage, ImageFit } from '../components/Image'
+
+export default {
+  component: SImage,
+  title: 'Design System/Components/Image',
+  decorators: [withKnobs]
+}
+
+export const configurable = () => ({
+  components: { SImage },
+  template: `<s-image
+    :src="src"
+    :fit="fit"
+    :alt="alt"
+    :lazy="lazy"
+    :z-index="zIndex"
+    :has-skeleton="hasSkeleton"
+    :animated="animated"
+    style="height: 300px;"
+  />`,
+  props: {
+    src: {
+      default: text('Src', 'https://picsum.photos/1024')
+    },
+    fit: {
+      default: select('Fit', Object.values(ImageFit), ImageFit.NONE)
+    },
+    lazy: {
+      default: boolean('Lazy', true)
+    },
+    alt: {
+      default: text('Alt', '')
+    },
+    zIndex: {
+      default: number('Z-index', 0)
+    },
+    hasSkeleton: {
+      default: boolean('Has Skeleton', true)
+    },
+    animated: {
+      default: boolean('Skeleton has Animation', true)
+    }
+  }
+})
+
+export const LazyImages = () => ({
+  components: { SImage },
+  template: `<div style="width: 100%; overflow-y: auto; height: 300px;">
+    <s-image :src="imageSrc + '?random=1'" lazy style="height: inherit;" />
+    <s-image :src="imageSrc + '?random=2'" lazy style="height: inherit;" />
+    <s-image :src="imageSrc + '?random=3'" lazy style="height: inherit;" />
+    <s-image :src="imageSrc + '?random=4'" lazy style="height: inherit;" />
+    <s-image :src="imageSrc + '?random=5'" lazy style="height: inherit;" />
+    <s-image :src="imageSrc + '?random=6'" lazy style="height: inherit;" />
+    <s-image :src="imageSrc + '?random=7'" lazy style="height: inherit;" />
+    <s-image :src="imageSrc + '?random=8'" lazy style="height: inherit;" />
+    <s-image :src="imageSrc + '?random=9'" lazy style="height: inherit;" />
+    <s-image :src="imageSrc + '?random=10'" lazy style="height: inherit;" />
+    <s-image :src="imageSrc + '?random=11'" lazy style="height: inherit;" />
+    <s-image :src="imageSrc + '?random=12'" lazy style="height: inherit;" />
+    <s-image :src="imageSrc + '?random=13'" lazy style="height: inherit;" />
+    <s-image :src="imageSrc + '?random=14'" lazy style="height: inherit;" />
+    <s-image :src="imageSrc + '?random=15'" lazy style="height: inherit;" />
+  </div>`,
+  data: () => ({
+    imageSrc: 'https://picsum.photos/1024/300'
+  })
+})
+
+export const FailedImage = () => ({
+  components: { SImage },
+  template: '<s-image src="\'\'" lazy style="height: 300px;" />'
+})