fix(恢复list): 恢复被删除的ui/list

affects: @varlet/ui

packages/varlet-ui/src/icon/Icon.vue

@@ -1,22 +1,16 @@
 <template>
-  <img
-    class="var-icon__image"
-    :class="[tickTransition ? 'var-icon--hidden' : null]"
-    :style="{
-			transition: `all ${transition}ms`,
-		}"
-    :src="nextName"
-    v-if="isURL(name)"
-    v-bind="$attrs"
-  >
-
-	<i
+  <component
+    :is="isURL(name) ? 'img' : 'i'"
 		class="var-icon"
-		:class="[`${namespace}--set`, `${namespace}-${nextName}`, tickTransition ? 'var-icon--hidden' : null]"
+		:class="[
+		  `${namespace}--set`,
+		  isURL(name) ? 'var-icon__image' : `${namespace}-${nextName}`,
+		  tickTransition ? 'var-icon--hidden' : null
+		]"
+    :src="nextName"
 		:style="{
 			transition: `all ${transition}ms`,
 		}"
-    v-else
 		v-bind="$attrs"
 	/>
 </template>

packages/varlet-ui/src/list/List.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="var-list var--box" ref="listEl">
+    <slot/>
+
+    <slot name="loading" v-if="loading">
+      <div class="var-list__loading">
+        <div class="var-list__loading-text">{{ loadingText }}</div>
+        <var-loading type="cube"/>
+      </div>
+    </slot>
+
+    <slot name="finished" v-if="finished">
+      <div class="var-list__finished">{{ finishedText }}</div>
+    </slot>
+
+    <slot name="error" v-if="error">
+      <div
+        class="var-list__error"
+        v-ripple
+        @click="load"
+      >
+        {{ errorText }}
+      </div>
+    </slot>
+
+    <div class="var-list__detector" ref="detectorEl"></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, onUnmounted, ref, Ref } from 'vue'
+import { getParentScroller } from '../utils/elements'
+import { props } from './props'
+import { isNumber } from '../utils/shared'
+import Ripple from '../ripple'
+import Loading from '../loading'
+
+export default defineComponent({
+  name: 'VarList',
+  directives: { Ripple },
+  components: {
+    [Loading.name]: Loading
+  },
+  props,
+  setup(props) {
+    const listEl: Ref<HTMLElement | null> = ref(null)
+    const detectorEl: Ref<HTMLElement | null> = ref(null)
+    let scroller: HTMLElement | Window = window
+
+    const load = () => {
+      props['onUpdate:error']?.(false)
+      props['onUpdate:loading']?.(true)
+      props.onLoad?.()
+    }
+
+    const isReachBottom = () => {
+      const containerBottom = scroller === window
+        ? window.innerHeight
+        : (scroller as HTMLElement).getBoundingClientRect().bottom
+
+      const { bottom: detectorBottom } = (detectorEl.value as HTMLElement).getBoundingClientRect()
+
+      return detectorBottom - props.offset <= containerBottom
+    }
+
+    const check = () => {
+      if (
+        !props.loading &&
+        !props.finished &&
+        !props.error &&
+        isReachBottom()
+      ) {
+        load()
+      }
+    }
+
+    onMounted(() => {
+      scroller = getParentScroller(listEl.value as HTMLElement, 'y')
+
+      props.immediateCheck && check()
+
+      scroller.addEventListener('scroll', check)
+    })
+
+    onUnmounted(() => {
+      scroller.removeEventListener('scroll', check)
+    })
+
+    return {
+      listEl,
+      detectorEl,
+      isNumber,
+      load,
+      check
+    }
+  }
+})
+</script>
+
+<style lang="less">
+@import "./list";
+</style>

packages/varlet-ui/src/list/__tests__/index.spec.js

@@ -0,0 +1,7 @@
+const List = require('../../../cjs/list').default
+const { render } = require('@testing-library/vue')
+
+test('test list', async () => {
+  const wrapper = render(List)
+  console.log(wrapper)
+})

packages/varlet-ui/src/list/example/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <app-type>正常加载</app-type>
+  <var-list
+    v-model:loading="loading"
+    :finished="finished"
+    finished-text="暂无更多"
+    @load="load"
+  >
+    <div class="list">
+      <div v-for="d in list" :key="d" class="list-item">{{ d }}</div>
+    </div>
+  </var-list>
+
+<!--  <app-type>出现异常</app-type>-->
+<!--  <var-list-->
+<!--    v-model:loading="loading"-->
+<!--    v-model:error="error"-->
+<!--    :finished="finished"-->
+<!--    error-text="请求异常,点击重试"-->
+<!--    finished-text="暂无更多"-->
+<!--    @load="load2"-->
+<!--  >-->
+<!--    <div class="list">-->
+<!--      <div v-for="d in list" :key="d" class="list-item">{{ d }}</div>-->
+<!--    </div>-->
+<!--  </var-list>-->
+
+<!--  <app-type>局部滚动</app-type>-->
+<!--  <div class="scroller">-->
+<!--    <var-list-->
+<!--      v-model:loading="loading"-->
+<!--      :finished="finished"-->
+<!--      finished-text="暂无更多"-->
+<!--      @load="load"-->
+<!--    >-->
+<!--      <div class="list">-->
+<!--        <div v-for="d in list" :key="d" class="list-item">{{ d }}</div>-->
+<!--      </div>-->
+<!--    </var-list>-->
+<!--  </div>-->
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, Ref, reactive } from 'vue'
+import List from '..'
+
+export default defineComponent({
+  name: 'ListExample',
+  components: {
+    [List.name]: List
+  },
+  setup() {
+    const loading: Ref<boolean> = ref(false)
+    const finished: Ref<boolean> = ref(false)
+
+    const error: Ref<boolean> = ref(false)
+    const list: number[] = reactive([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
+
+    return {
+      list,
+      error,
+      loading,
+      finished,
+      load() {
+        setTimeout(() => {
+          for (let i = 0; i < 10; i++) {
+            list.push(list.length + 1)
+          }
+          loading.value = false
+
+          if (list.length >= 30) {
+            finished.value = true
+          }
+        }, 1000)
+      },
+      load2() {
+        console.log('load2')
+
+        setTimeout(() => {
+          loading.value = false
+          error.value = true
+        }, 1000)
+      }
+    }
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.scroller {
+  width: 100%;
+  height: 50vh;
+  overflow: auto;
+  background: lightskyblue;
+}
+
+.list {
+  width: 100%;
+
+  .list-item {
+    width: 100%;
+    padding: 20px;
+    text-align: center;
+  }
+}
+</style>

packages/varlet-ui/src/list/index.ts

@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import List from './List.vue'
+
+List.install = function(app: App) {
+  app.component(List.name, List)
+}
+
+export default List

packages/varlet-ui/src/list/list.less

@@ -0,0 +1,47 @@
+@import "../styles/var";
+
+@list-loading-height: 50px;
+@list-finished-height: 50px;
+@list-error-height: 50px;
+
+@list-loading-font-size: @font-size-md;
+@list-finished-font-size: @font-size-md;
+@list-error-font-size: @font-size-md;
+
+.var-list {
+
+  &__detector {
+    width: 100%;
+  }
+
+  &__loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: @list-loading-height;
+    font-size: @list-loading-font-size;
+  }
+
+  &__loading-text {
+    margin-right: 10px;
+  }
+
+  &__finished {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: @list-finished-height;
+    font-size: @list-finished-font-size;
+  }
+
+  &__error {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: @list-error-height;
+    font-size: @list-error-font-size;
+  }
+}

packages/varlet-ui/src/list/props.ts

@@ -0,0 +1,41 @@
+export const props = {
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  immediateCheck: {
+    type: Boolean,
+    default: true
+  },
+  finished: {
+    type: Boolean,
+    default: false
+  },
+  error: {
+    type: Boolean,
+    default: false
+  },
+  offset: {
+    type: Number,
+    default: 0
+  },
+  loadingText: {
+    type: String,
+    default: '加载中'
+  },
+  finishedText: {
+    type: String
+  },
+  errorText: {
+    type: String
+  },
+  onLoad: {
+    type: Function
+  },
+  'onUpdate:loading': {
+    type: Function
+  },
+  'onUpdate:error': {
+    type: Function
+  }
+}

packages/varlet-ui/src/tabs-items/TabsItems.vue

@@ -16,7 +16,6 @@ import { useChildren, useAtChildrenCounter } from '../utils/components'
 import { TABS_ITEMS_BIND_TAB_ITEM_KEY, TabsItemsProvider, TABS_ITEMS_COUNT_TAB_ITEM_KEY } from './provide'
 import { props } from './props'
 import { TabItemProvider } from '../tab-item/provide'
-import { isNumber } from '../utils/shared'
 
 export default defineComponent({
 	name: 'VarTabsItems',