Merge pull request #50 from b2nil/dev

1024 Specials

src/components/divider/index.ts

@@ -13,15 +13,15 @@ const AtDivider = defineComponent({
       default: '',
     },
     height: {
-      type: Number as PropType<AtDividerProps['height']>,
+      type: [Number, String] as PropType<AtDividerProps['height']>,
       default: 0,
     },
     fontColor: {
       type: String as PropType<AtDividerProps['fontColor']>,
       default: '',
     },
     fontSize: {
-      type: Number as PropType<AtDividerProps['fontSize']>,
+      type: [Number, String] as PropType<AtDividerProps['fontSize']>,
       default: 0,
     },
     lineColor: {

src/components/virtual-scroll/index.ts

@@ -106,20 +106,26 @@ const AtVirtualScroll = defineComponent({
 
     watch(() => props.height, updateFirstAndLast)
     watch(() => props.itemHeight, updateFirstAndLast)
-    watch(() => props.scrollIntoItem, (index, prevIndex) => {
-      const parsedIndex = parseInt(`${index}`, 10)
-      if (parsedIndex >= 0 && parsedIndex < props.items.length) {
+    watch(() => props.scrollIntoItem, (itemIndex, prevItemIndex) => {
+      let parsedIndex = parseInt(`${itemIndex || 0}`, 10)
+
+      // make sure index is within length of items
+      parsedIndex = Math.min(props.items.length - 1, Math.max(0, parsedIndex))
+
+      scrollTop.value = parsedIndex * __itemHeight.value
+      updateFirstAndLast()
+    })
+
+    onMounted(() => {
+      if (Boolean(props.scrollIntoItem)) {
+        let parsedIndex = parseInt(`${props.scrollIntoItem || 0}`, 10)
         scrollTop.value = parsedIndex * __itemHeight.value
         updateFirstAndLast()
       } else {
-        warn(`index should not exceed the length of items: ${index}`)
+        last.value = getLast(0)
       }
     })
 
-    onMounted(() => {
-      last.value = getLast(0)
-    })
-
     function getChildren() {
       return props.items.slice(
         firstToRender.value,
@@ -163,14 +169,23 @@ const AtVirtualScroll = defineComponent({
     }
 
     return () => {
-      const content = h(View, {
-        class: 'at-virtual-scroll__container',
-        style: {
-          height: convertToUnit((props.items.length * __itemHeight.value)),
-        }
-      }, { default: () => getChildren() })
-
-      return h(ScrollView, mergeProps(
+      const content = h(View, null, {
+        default: () => [
+          h(View, {
+            class: 'at-virtual-scroll__container',
+            style: {
+              height: convertToUnit((props.items.length * __itemHeight.value)),
+            }
+          }, { default: () => getChildren() }),
+
+          h(View, {
+            class: 'at-virtual-scroll__footer'
+          }, { default: () => slots.footer && slots.footer() }),
+        ]
+      })
+
+
+      const scrollViewNode = h(ScrollView, mergeProps(
         isWeb.value
           ? {
             scrollTop: scrollTop.value
@@ -190,6 +205,15 @@ const AtVirtualScroll = defineComponent({
           onScrollToUpper: props.onReachTop,
           onScrollToLower: props.onReachBottom,
         }), { default: () => [content] })
+
+      return h(View, null, {
+        default: () => [
+          h(View, {
+            class: 'at-virtual-scroll__header',
+          }, { default: () => slots.header && slots.header() }),
+          scrollViewNode,
+        ]
+      })
     }
   }
 })

src/pages/advanced/virtual-scroll/index.scss

@@ -3,4 +3,9 @@
     margin-bottom: 12px;
     color: #333;
     font-size: 24px;
+}
+
+.at-switch__title {
+  font-size: 24px;
+  color: red;
 }