[new feature] add skeleton component

docs/markdown/v2-progress-tracking.md

@@ -1,4 +1,4 @@
-## Vant 2.0 改动一览
+# Vant 2.0 改动一览
 
 ## 不兼容更新
 
@@ -49,6 +49,8 @@
 
 ## 新特性
 
+- 新增`Skeleton`骨架屏组件
+
 ### Sku
 
 - 新增`preview-open`事件

docs/src/demo-entry.js

@@ -40,6 +40,7 @@ export default {
   'rate': () => wrapper(import('../../packages/rate/demo'), 'rate'),
   'search': () => wrapper(import('../../packages/search/demo'), 'search'),
   'sidebar': () => wrapper(import('../../packages/sidebar/demo'), 'sidebar'),
+  'skeleton': () => wrapper(import('../../packages/skeleton/demo'), 'skeleton'),
   'sku': () => wrapper(import('../../packages/sku/demo'), 'sku'),
   'slider': () => wrapper(import('../../packages/slider/demo'), 'slider'),
   'stepper': () => wrapper(import('../../packages/stepper/demo'), 'stepper'),

docs/src/doc.config.js

@@ -233,6 +233,10 @@ module.exports = {
                 path: '/progress',
                 title: 'Progress 进度条'
               },
+              {
+                path: '/skeleton',
+                title: 'Skeleton 骨架屏'
+              },
               {
                 path: '/steps',
                 title: 'Steps 步骤条'
@@ -540,6 +544,10 @@ module.exports = {
                 path: '/progress',
                 title: 'Progress'
               },
+              {
+                path: '/skeleton',
+                title: 'Skeleton'
+              },
               {
                 path: '/steps',
                 title: 'Steps'

docs/src/docs-entry.js

@@ -89,6 +89,8 @@ export default {
   'search.zh-CN': () => import('../../packages/search/zh-CN.md'),
   'sidebar.en-US': () => import('../../packages/sidebar/en-US.md'),
   'sidebar.zh-CN': () => import('../../packages/sidebar/zh-CN.md'),
+  'skeleton.en-US': () => import('../../packages/skeleton/en-US.md'),
+  'skeleton.zh-CN': () => import('../../packages/skeleton/zh-CN.md'),
   'sku.en-US': () => import('../../packages/sku/en-US.md'),
   'sku.zh-CN': () => import('../../packages/sku/zh-CN.md'),
   'slider.en-US': () => import('../../packages/slider/en-US.md'),

packages/index.less

@@ -29,6 +29,7 @@
 @import './progress/index';
 @import './sidebar/index';
 @import './sidebar-item/index';
+@import './skeleton/index';
 @import './slider/index';
 @import './stepper/index';
 @import './swipe/index';

packages/index.ts

@@ -53,6 +53,7 @@ import Row from './row';
 import Search from './search';
 import Sidebar from './sidebar';
 import SidebarItem from './sidebar-item';
+import Skeleton from './skeleton';
 import Sku from './sku';
 import Slider from './slider';
 import Step from './step';
@@ -131,6 +132,7 @@ const components = [
   Search,
   Sidebar,
   SidebarItem,
+  Skeleton,
   Sku,
   Slider,
   Step,
@@ -218,6 +220,7 @@ export {
   Search,
   Sidebar,
   SidebarItem,
+  Skeleton,
   Sku,
   Slider,
   Step,

packages/skeleton/demo/index.vue

@@ -0,0 +1,102 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-skeleton
+        title
+        :row="3"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('showAvatar')">
+      <van-skeleton
+        title
+        avatar
+        :row="3"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('showChildren')">
+      <van-switch
+        v-model="show"
+        size="24px"
+      />
+      <van-skeleton
+        title
+        avatar
+        :row="3"
+        :loading="!show"
+      >
+        <div class="demo-preview">
+          <img src="//img.yzcdn.cn/public_files/2017/12/18/fd78cf6bb5d12e2a119d0576bedfd230.png">
+          <div class="demo-content">
+            <h3>{{ $t('title') }}</h3>
+            <p>{{ $t('desc') }}</p>
+          </div>
+        </div>
+      </van-skeleton>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      showAvatar: '显示头像',
+      showChildren: '显示子组件',
+      title: '关于 Vant',
+      desc: 'Vant 是一套轻量、可靠的移动端 Vue 组件库，提供了丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。'
+    },
+    'en-US': {
+      showAvatar: 'Show Avatar',
+      showChildren: 'Show Children',
+      title: 'About Vant',
+      desc: 'Vant is a set of Mobile UI Components built on Vue.'
+    }
+  },
+
+  data() {
+    return {
+      show: false
+    };
+  }
+};
+</script>
+
+<style lang="less">
+.demo-skeleton {
+  background-color: #fff;
+
+  .van-switch {
+    margin: 0 15px 10px;
+  }
+
+  .demo-preview {
+    display: flex;
+    padding: 0 15px;
+
+    .demo-content {
+      padding-top: 6px;
+
+      h3 {
+        margin: 0;
+        font-size: 18px;
+        line-height: 20px;
+      }
+
+      p {
+        font-size: 14px;
+        line-height: 20px;
+        margin: 13px 0 0;
+      }
+    }
+
+    img {
+      width: 32px;
+      height: 32px;
+      flex-shrink: 0;
+      margin-right: 15px;
+    }
+  }
+}
+</style>

packages/skeleton/en-US.md

@@ -0,0 +1,62 @@
+## Skeleton
+
+### Install
+
+``` javascript
+import { Skeleton } from 'vant';
+
+Vue.use(Skeleton);
+```
+
+### Usage
+
+#### Basic Usage
+
+```html
+<van-skeleton title :row="3" />
+```
+
+#### Show Avatar
+
+```html
+<van-skeleton title avatar :row="3" />
+```
+
+#### Show Children
+
+```html
+<van-skeleton
+  title
+  avatar
+  :row="3"
+  :loading="loading"
+>
+  <div>Content</div>
+</van-skeleton>
+```
+
+```js
+export default {
+  data() {
+    return {
+      loading: true
+    }
+  },
+  mounted() {
+    this.loading = false;
+  }
+};
+```
+### API
+
+| Attribute | Description | Type | Default |
+|------|------|------|------|
+| row | Row count | `Number` | `0` |
+| row-width | Row width, can be array | `Number | String | Array` | `100%` |
+| title | Whether to show title placeholder | `Boolean` | `false` |
+| title-width | Title width | `Number | String` | `40%` |
+| avatar | Whether to show avatar placeholder | `Boolean` | `false` |
+| avatar-size | Size of avatar placeholder | `Number | String` | `32px` |
+| avatar-shape | Shape of avatar placeholder，can be set to `square` | `String` | `round` |
+| loading | Whether to show skeleton，pass `false` to show child component | `Boolean` | `true` |
+| animate | Whether to enable animation | `Boolean` | `true` |

packages/skeleton/index.less

@@ -0,0 +1,54 @@
+@import '../style/var';
+
+.van-skeleton {
+  display: flex;
+  padding: 0 15px;
+
+  &__avatar {
+    flex-shrink: 0;
+    margin-right: 15px;
+    background-color: @active-color;
+
+    &--round {
+      border-radius: 100%;
+    }
+  }
+
+  &__content {
+    width: 100%;
+  }
+
+  &__avatar + &__content {
+    padding-top: 8px;
+  }
+
+  &__row,
+  &__title {
+    height: 16px;
+    background-color: @active-color;
+  }
+
+  &__title {
+    margin: 0;
+  }
+
+  &__row {
+    &:not(:first-child) {
+      margin-top: 12px;
+    }
+  }
+
+  &__title + &__row {
+    margin-top: 20px;
+  }
+
+  &--animate {
+    animation: van-skeleton-blink 1.2s ease-in-out infinite;
+  }
+}
+
+@keyframes van-skeleton-blink {
+  50% {
+    opacity: .6;
+  }
+}

packages/skeleton/index.tsx

@@ -0,0 +1,122 @@
+import { use } from '../utils';
+import { inherit } from '../utils/functional';
+import { isNumber } from '../utils/validate/number';
+
+// Types
+import { CreateElement, RenderContext } from 'vue/types';
+import { DefaultSlots } from '../utils/use/sfc';
+
+export type SkeletonProps = {
+  row: number;
+  title?: boolean;
+  avatar?: boolean;
+  loading: boolean;
+  animate: boolean;
+  avatarSize: string;
+  avatarShape: 'square' | 'round';
+  titleWidth: number | string;
+  rowWidth: number | string | (number | string)[];
+};
+
+const [sfc, bem] = use('skeleton');
+const DEFAULT_ROW_WIDTH = '100%';
+const DEFAULT_LAST_ROW_WIDTH = '60%';
+
+function suffixPx(value: string | number): string {
+  value = String(value);
+  return isNumber(value) ? `${value}px` : value;
+}
+
+function Skeleton(
+  h: CreateElement,
+  props: SkeletonProps,
+  slots: DefaultSlots,
+  ctx: RenderContext
+) {
+  if (!props.loading) {
+    return slots.default && slots.default();
+  }
+
+  function Title() {
+    if (props.title) {
+      return <h3 class={bem('title')} style={{ width: suffixPx(props.titleWidth) }} />;
+    }
+  }
+
+  function Rows() {
+    const Rows = [];
+    const { rowWidth } = props;
+
+    function getRowWidth(index: number) {
+      if (rowWidth === DEFAULT_ROW_WIDTH && index === props.row - 1) {
+        return DEFAULT_LAST_ROW_WIDTH;
+      }
+
+      if (Array.isArray(rowWidth)) {
+        return rowWidth[index];
+      }
+
+      return rowWidth;
+    }
+
+    for (let i = 0; i < props.row; i++) {
+      Rows.push(<div class={bem('row')} style={{ width: suffixPx(getRowWidth(i)) }} />);
+    }
+
+    return Rows;
+  }
+
+  function Avatar() {
+    if (props.avatar) {
+      const size = suffixPx(props.avatarSize);
+      return (
+        <div
+          class={bem('avatar', props.avatarShape)}
+          style={{ width: size, height: size }}
+        />
+      );
+    }
+  }
+
+  return (
+    <div class={bem({ animate: props.animate })} {...inherit(ctx)}>
+      {Avatar()}
+      <div class={bem('content')}>
+        {Title()}
+        {Rows()}
+      </div>
+    </div>
+  );
+}
+
+Skeleton.props = {
+  row: Number,
+  title: Boolean,
+  avatar: Boolean,
+  loading: {
+    type: Boolean,
+    default: true
+  },
+  animate: {
+    type: Boolean,
+    default: true
+  },
+  avatarSize: {
+    type: String,
+    default: '32px'
+  },
+  avatarShape: {
+    type: String,
+    default: 'round'
+  },
+  titleWidth: {
+    type: [Number, String],
+    default: '40%'
+  },
+  rowWidth: {
+    type: [Number, String, Array],
+    default: DEFAULT_ROW_WIDTH
+  }
+};
+
+export default sfc<SkeletonProps>(Skeleton);

packages/skeleton/test/__snapshots__/demo.spec.js.snap

@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div>
+    <div class="van-skeleton van-skeleton--animate">
+      <div class="van-skeleton__content">
+        <h3 class="van-skeleton__title" style="width:40%;"></h3>
+        <div class="van-skeleton__row" style="width:100%;"></div>
+        <div class="van-skeleton__row" style="width:100%;"></div>
+        <div class="van-skeleton__row" style="width:60%;"></div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-skeleton van-skeleton--animate">
+      <div class="van-skeleton__avatar van-skeleton__avatar--round" style="width:32px;height:32px;"></div>
+      <div class="van-skeleton__content">
+        <h3 class="van-skeleton__title" style="width:40%;"></h3>
+        <div class="van-skeleton__row" style="width:100%;"></div>
+        <div class="van-skeleton__row" style="width:100%;"></div>
+        <div class="van-skeleton__row" style="width:60%;"></div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-switch" style="font-size:24px;">
+      <div class="van-switch__node"></div>
+    </div>
+    <div class="van-skeleton van-skeleton--animate">
+      <div class="van-skeleton__avatar van-skeleton__avatar--round" style="width:32px;height:32px;"></div>
+      <div class="van-skeleton__content">
+        <h3 class="van-skeleton__title" style="width:40%;"></h3>
+        <div class="van-skeleton__row" style="width:100%;"></div>
+        <div class="van-skeleton__row" style="width:100%;"></div>
+        <div class="van-skeleton__row" style="width:60%;"></div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

packages/skeleton/test/__snapshots__/index.spec.js.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`avatar shape 1`] = `
+<div class="van-skeleton van-skeleton--animate">
+  <div class="van-skeleton__avatar van-skeleton__avatar--square" style="width: 20px; height: 20px;"></div>
+  <div class="van-skeleton__content"></div>
+</div>
+`;
+
+exports[`disable animate 1`] = `
+<div class="van-skeleton van-skeleton--animate">
+  <div class="van-skeleton__content">
+    <div class="van-skeleton__row" style="width: 60%;"></div>
+  </div>
+</div>
+`;
+
+exports[`render chidren 1`] = `<div>Content</div>`;
+
+exports[`row-width array 1`] = `
+<div class="van-skeleton van-skeleton--animate">
+  <div class="van-skeleton__content">
+    <div class="van-skeleton__row" style="width: 100%;"></div>
+    <div class="van-skeleton__row" style="width: 30px;"></div>
+    <div class="van-skeleton__row" style="width: 5rem;"></div>
+    <div class="van-skeleton__row"></div>
+  </div>
+</div>
+`;

packages/skeleton/test/demo.spec.js

@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import demoTest from '../../../test/demo-test';
+
+demoTest(Demo);

packages/skeleton/test/index.spec.js

@@ -0,0 +1,45 @@
+import { mount } from '../../../test/utils';
+import Skeleton from '..';
+
+test('row-width array', () => {
+  const wrapper = mount(Skeleton, {
+    propsData: {
+      row: 4,
+      rowWidth: ['100%', 30, '5rem']
+    }
+  });
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('render chidren', () => {
+  const wrapper = mount({
+    template: `
+      <skeleton :loading="false">
+        <div>Content</div>
+      </skeleton>
+    `,
+    components: { Skeleton }
+  });
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('avatar shape', () => {
+  const wrapper = mount(Skeleton, {
+    propsData: {
+      avatar: true,
+      avatarSize: 20,
+      avatarShape: 'square'
+    }
+  });
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('disable animate', () => {
+  const wrapper = mount(Skeleton, {
+    propsData: {
+      row: 1,
+      aniamte: false
+    }
+  });
+  expect(wrapper).toMatchSnapshot();
+});

packages/skeleton/zh-CN.md

@@ -0,0 +1,69 @@
+## Skeleton 骨架屏
+
+### 使用指南
+
+``` javascript
+import { Skeleton } from 'vant';
+
+Vue.use(Skeleton);
+```
+
+### 代码演示
+
+#### 基础用法
+
+通过`title`属性显示标题占位图，通过`row`属性配置占位段落行数
+
+```html
+<van-skeleton title :row="3" />
+```
+
+#### 显示头像
+
+通过`avatar`属性显示头像占位图
+
+```html
+<van-skeleton title avatar :row="3" />
+```
+
+#### 展示子组件
+
+将`loading`属性设置成`false`表示内容加载完成，此时会隐藏占位图，并显示`Skeleton`的子组件
+
+```html
+<van-skeleton
+  title
+  avatar
+  :row="3"
+  :loading="loading"
+>
+  <div>实际内容</div>
+</van-skeleton>
+```
+
+```js
+export default {
+  data() {
+    return {
+      loading: true
+    }
+  },
+  mounted() {
+    this.loading = false;
+  }
+};
+```
+
+### API
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|------|------|------|------|------|
+| row | 段落占位图行数 | `Number` | `0` | - |
+| row-width | 段落占位图宽度，可传数组来设置每一行的宽度 | `Number | String | Array` | `100%` | - |
+| title | 是否显示标题占位图 | `Boolean` | `false` | - |
+| title-width | 标题占位图宽度 | `Number | String` | `40%` | - |
+| avatar | 是否显示头像占位图 | `Boolean` | `false` | - |
+| avatar-size | 头像占位图大小 | `Number | String` | `32px` | - |
+| avatar-shape | 头像占位图形状，可选值为`square` | `String` | `round` | - |
+| loading | 是否显示占位图，传`false`时会展示子组件内容 | `Boolean` | `true` | - |
+| animate | 是否开启动画 | `Boolean` | `true` | - |