feat(image-list): style

src/image-list/README.md

@@ -35,4 +35,13 @@ imageList.append('https://luna.liriliri.io/pic1.png', 'pic1.png')
 
 ## Configuration
 
+* horizontalMargin(number): Horizontal margin.
 * rowHeight(number): Row height.
+* showTitle(boolean): Show title.
+* verticalMargin(number): Vertical margin.
+
+## Api
+
+### append(src: string, title?: string): void
+
+Append image.

src/image-list/index.ts

@@ -1,10 +1,26 @@
+import toEl from 'licia/toEl'
+import stripIndent from 'licia/stripIndent'
+import last from 'licia/last'
+import $ from 'licia/$'
 import Component, { IComponentOptions } from '../share/Component'
 import { exportCjs } from '../share/util'
 
 /** IOptions */
 export interface IOptions extends IComponentOptions {
   /** Row height. */
   rowHeight?: number
+  /** Show title. */
+  showTitle?: boolean
+  /** Horizontal margin. */
+  horizontalMargin?: number
+  /** Vertical margin. */
+  verticalMargin?: number
+}
+
+interface IImage {
+  src: string
+  title: string
+  container: HTMLElement
 }
 
 /**
@@ -14,12 +30,64 @@ export interface IOptions extends IComponentOptions {
  * const imageList = new LunaImageList(container)
  * imageList.append('https://luna.liriliri.io/pic1.png', 'pic1.png')
  */
-export default class ImageList extends Component {
+export default class ImageList extends Component<IOptions> {
+  private images: IImage[] = []
   constructor(container: HTMLElement, options: IOptions = {}) {
     super(container, { compName: 'image-list' })
+
     this.initOptions(options, {
-      rowHeight: 180,
+      rowHeight: 200,
+      horizontalMargin: 20,
+      verticalMargin: 20,
+      showTitle: true,
+    })
+
+    const { $container } = this
+    $container.css({
+      marginLeft: this.options.horizontalMargin + 'px',
+      marginBottom: -this.options.verticalMargin + 'px',
     })
+    if (!this.options.showTitle) {
+      $container.addClass(this.c('no-title'))
+    }
+  }
+  /** Append image. */
+  append(src: string, title?: string) {
+    const { verticalMargin, horizontalMargin, rowHeight } = this.options
+    const imageHeight = rowHeight - 20
+
+    if (!title) {
+      title = last(src.split('/'))
+    }
+    const container = toEl(
+      this.c(stripIndent`
+      <div class="item">
+        <div class="image" style="height:${imageHeight}px;">
+          <img src="${src}" alt="${title}"></img>
+        </div>
+        <div class="title">${title}</div>
+      </div>`)
+    ) as HTMLElement
+
+    const $container = $(container)
+    $container.css({
+      marginRight: horizontalMargin + 'px',
+      marginBottom: verticalMargin + 'px',
+    })
+    const $img = $container.find('img')
+    const img = $img.get(0) as HTMLImageElement
+    img.onload = () => {
+      const ratio = img.width / img.height
+      const width = imageHeight * ratio
+      $container.css('flex-basis', width + 'px')
+      this.$container.append(container)
+
+      this.images.push({
+        src,
+        title: title || '',
+        container,
+      })
+    }
   }
 }
 

src/image-list/story.js

@@ -1,12 +1,44 @@
 import 'luna-image-list.css'
 import ImageList from 'luna-image-list.js'
+import { number, boolean } from '@storybook/addon-knobs'
 import story from '../share/story'
 import readme from './README.md'
 
 const def = story(
   'image-list',
   (container) => {
-    const imageList = new ImageList(container)
+    const rowHeight = number('Row Height', 180, {
+      range: true,
+      min: 100,
+      max: 300,
+    })
+
+    const verticalMargin = number('Vertical Margin', 20, {
+      range: true,
+      min: 0,
+      max: 100,
+    })
+
+    const horizontalMargin = number('Horizontal Margin', 20, {
+      range: true,
+      min: 0,
+      max: 100,
+    })
+
+    const showTitle = boolean('Show Title', true)
+
+    const imageList = new ImageList(container, {
+      rowHeight,
+      verticalMargin,
+      horizontalMargin,
+      showTitle,
+    })
+
+    imageList.append('/pic1.png', 'pic1.png')
+    imageList.append('/pic2.png', 'pic2.png')
+    imageList.append('/pic3.png', 'pic3.png')
+    imageList.append('/pic4.png', 'pic4.png')
+    imageList.append('/icon.png', 'icon.png')
 
     return imageList
   },

src/image-list/style.scss

@@ -2,4 +2,61 @@
 
 .luna-image-list {
   @include component();
+  background-color: transparent;
+  display: flex;
+  flex-wrap: wrap;
+  &.theme-dark {
+    background-color: transparent;
+  }
+  &.no-title {
+    .title {
+      display: none;
+    }
+  }
+  &::after {
+    content: '';
+    flex-grow: 1000;
+  }
+}
+
+.item {
+  flex-grow: 1;
+  flex-direction: column;
+  min-width: 0;
+  display: inline-flex;
+  cursor: pointer;
+  &:hover {
+    .image {
+      box-shadow: $box-shadow;
+    }
+  }
+}
+
+.image {
+  width: 100%;
+  border-radius: #{$border-radius-l-g}px;
+  overflow: hidden;
+  background-color: $color-bg-container;
+  border: 1px solid $color-border;
+  img {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.title {
+  height: 20px;
+  line-height: 20px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  text-align: center;
+}
+
+.theme-dark {
+  .image {
+    background-color: $color-bg-container-dark;
+    border-color: $color-border-dark;
+  }
 }