refactor(ui): replace HTMLDivElement with HTMLElement (#1385)

packages/varlet-ui/src/avatar/Avatar.vue

@@ -67,8 +67,8 @@ export default defineComponent({
   directives: { Lazy },
   props,
   setup(props) {
-    const avatarElement: Ref<HTMLDivElement | null> = ref(null)
-    const textElement: Ref<HTMLDivElement | null> = ref(null)
+    const avatarElement: Ref<HTMLElement | null> = ref(null)
+    const textElement: Ref<HTMLElement | null> = ref(null)
     const scale: Ref<number> = ref(1)
 
     onSmartMounted(getScale)

packages/varlet-ui/src/back-top/BackTop.vue

@@ -41,7 +41,7 @@ export default defineComponent({
   props,
   setup(props) {
     const show = ref(false)
-    const backTopEl = ref<HTMLDivElement | null>(null)
+    const backTopEl = ref<HTMLElement | null>(null)
     const disabled = ref<TeleportProps['disabled']>(true)
 
     let scroller: HTMLElement | Window

packages/varlet-ui/src/collapse-item/CollapseItem.vue

@@ -57,7 +57,7 @@ export default defineComponent({
   setup(props) {
     const isShow = ref(false)
     const showContent = ref(false)
-    const contentEl = ref<HTMLDivElement | null>(null)
+    const contentEl = ref<HTMLElement | null>(null)
     const name = computed(() => props.name)
     const disabled = computed(() => props.disabled)
     const { index, collapse, bindCollapse } = useCollapse()

packages/varlet-ui/src/floating-panel/FloatingPanel.vue

@@ -45,7 +45,7 @@ export default defineComponent({
   props,
   setup(props) {
     const visibleHeight = ref<number>(0)
-    const contentRef = ref<HTMLDivElement | null>(null)
+    const contentRef = ref<HTMLElement | null>(null)
     const { height: windowHeight } = useWindowSize()
     const defaultEndAnchor = computed(() => windowHeight.value * 0.6)
     const anchor = useVModel(props, 'anchor')

packages/varlet-ui/src/index-anchor/IndexAnchor.vue

@@ -31,7 +31,7 @@ export default defineComponent({
     const ownTop = ref(0)
     const disabled = ref(false)
     const name = computed(() => props.index)
-    const anchorEl = ref<HTMLDivElement | RendererNode | null>(null)
+    const anchorEl = ref<HTMLElement | RendererNode | null>(null)
     const { index, indexBar, bindIndexBar } = useIndexBar()
     const { active, sticky, cssMode, stickyOffsetTop, zIndex } = indexBar
 
@@ -52,7 +52,7 @@ export default defineComponent({
 
       ownTop.value = (anchorEl.value as RendererNode).$el
         ? (anchorEl.value as RendererNode).$el.offsetTop
-        : (anchorEl.value as HTMLDivElement).offsetTop
+        : (anchorEl.value as HTMLElement).offsetTop
     }
 
     function setDisabled(value: boolean) {

packages/varlet-ui/src/index-bar/IndexBar.vue

@@ -42,7 +42,7 @@ export default defineComponent({
   props,
   setup(props) {
     const clickedName = ref<string | number>('')
-    const barEl = ref<HTMLDivElement | null>(null)
+    const barEl = ref<HTMLElement | null>(null)
     const anchorNameList = ref<(number | string)[]>([])
     const active = ref<number | string | undefined>()
     const sticky = computed(() => props.sticky)
@@ -168,7 +168,7 @@ export default defineComponent({
 
     async function setScroller() {
       await doubleRaf()
-      scroller = getParentScroller(barEl.value as HTMLDivElement)
+      scroller = getParentScroller(barEl.value as HTMLElement)
     }
 
     function addScrollerListener() {

packages/varlet-ui/src/rate/Rate.vue

@@ -127,7 +127,7 @@ export default defineComponent({
 
     function changeValue(score: number, event: MouseEvent) {
       const { half, clearable } = props
-      const { offsetWidth } = event.target as HTMLDivElement
+      const { offsetWidth } = event.target as HTMLElement
 
       if (half && event.offsetX <= Math.floor(offsetWidth / 2)) {
         score -= 0.5

packages/varlet-ui/src/slider/Slider.vue

@@ -90,7 +90,7 @@ export default defineComponent({
   props,
   setup(props) {
     const maxDistance = ref(0)
-    const sliderEl = ref<HTMLDivElement | null>(null)
+    const sliderEl = ref<HTMLElement | null>(null)
     const isScroll = ref(false)
     const scope = computed(() => toNumber(props.max) - toNumber(props.min))
     const unitWidth = computed(() => (maxDistance.value / scope.value) * toNumber(props.step))
@@ -185,7 +185,7 @@ export default defineComponent({
     onSmartMounted(() => {
       if (!stepValidator() || !valueValidator()) return
 
-      maxDistance.value = (sliderEl.value as HTMLDivElement)[isVertical.value ? 'offsetHeight' : 'offsetWidth']
+      maxDistance.value = (sliderEl.value as HTMLElement)[isVertical.value ? 'offsetHeight' : 'offsetWidth']
     })
 
     onBeforeUnmount(() => {
@@ -307,7 +307,7 @@ export default defineComponent({
     }
 
     function start(event: TouchEvent, type: keyof ThumbsProps) {
-      if (!maxDistance.value) maxDistance.value = (sliderEl.value as HTMLDivElement).offsetWidth
+      if (!maxDistance.value) maxDistance.value = (sliderEl.value as HTMLElement).offsetWidth
       if (!isDisabled.value) {
         thumbsProps[type].active = true
       }
@@ -362,7 +362,7 @@ export default defineComponent({
 
     function click(event: MouseEvent) {
       if (isDisabled.value || isReadonly.value) return
-      if ((event.target as HTMLDivElement).closest(`.${n('thumb')}`)) return
+      if ((event.target as HTMLElement).closest(`.${n('thumb')}`)) return
       const offset = getOffset(event)
       const type = getType(offset)
       activeThumb = type

packages/varlet-ui/src/time-picker/TimePicker.vue

@@ -81,7 +81,7 @@ export default defineComponent({
   components: { Clock },
   props,
   setup(props) {
-    const container = ref<HTMLDivElement | null>(null)
+    const container = ref<HTMLElement | null>(null)
     const picker = ref<HTMLElement | null>(null)
     const inner = ref<DefineComponent | null>(null)
     const isInner = ref(false)
@@ -287,7 +287,7 @@ export default defineComponent({
     }
 
     function setCenterAndRange() {
-      const { left, top, width, height } = getRect(container.value as HTMLDivElement)
+      const { left, top, width, height } = getRect(container.value as HTMLElement)
 
       center.x = left + width / 2
       center.y = top + height / 2

packages/varlet-ui/src/time-picker/clock.vue

@@ -94,7 +94,7 @@ export default defineComponent({
   },
   emits: ['update', 'change-prevent-update'],
   setup(props, { emit }) {
-    const inner: Ref<HTMLDivElement | null> = ref(null)
+    const inner: Ref<HTMLElement | null> = ref(null)
     const disableHour: Ref<Array<string>> = ref([])
     const disable24HourIndex: Ref<Array<number>> = ref([])
 
@@ -203,7 +203,7 @@ export default defineComponent({
     }
 
     const getSize = () => {
-      const { width, height } = getRect(inner.value as HTMLDivElement)
+      const { width, height } = getRect(inner.value as HTMLElement)
 
       return {
         width,