Pref hooks (#113)

* pref: replace useContainerResize

* pref: replace useContainerScroll

src/components/DialogManager.vue

@@ -57,6 +57,7 @@
 </template>
 
 <script setup lang="ts" name="manager-dialog">
+import { useElementSize } from '@vueuse/core'
 import ModelCard from 'components/ModelCard.vue'
 import ResponseInput from 'components/ResponseInput.vue'
 import ResponseScroll from 'components/ResponseScroll.vue'
@@ -64,7 +65,6 @@ import ResponseSelect from 'components/ResponseSelect.vue'
 import { configSetting, useConfig } from 'hooks/config'
 import { useContainerQueries } from 'hooks/container'
 import { useModels } from 'hooks/model'
-import { useContainerResize } from 'hooks/resize'
 import { chunk } from 'lodash'
 import { app } from 'scripts/comfyAPI'
 import { Model } from 'types/typings'
@@ -136,7 +136,7 @@ const itemSize = computed(() => {
   return itemWidth / aspect + itemGutter
 })
 
-const { width } = useContainerResize(contentContainer)
+const { width } = useElementSize(contentContainer)
 
 const cols = computed(() => {
   if (isMobile.value) {

src/components/ResponseScroll.vue

@@ -41,9 +41,7 @@
 </template>
 
 <script setup lang="ts" generic="T">
-import { useDraggable } from '@vueuse/core'
-import { useContainerResize } from 'hooks/resize'
-import { useContainerScroll } from 'hooks/scroll'
+import { useDraggable, useElementSize, useScroll } from '@vueuse/core'
 import { clamp } from 'lodash'
 import { computed, ref } from 'vue'
 
@@ -57,9 +55,9 @@ const props = defineProps<ScrollAreaProps>()
 const viewport = ref<HTMLElement | null>(null)
 const content = ref<HTMLElement | null>(null)
 
-const { height: viewportHeight } = useContainerResize(viewport)
-const { height: contentHeight } = useContainerResize(content)
-const { y: scrollY } = useContainerScroll(viewport)
+const { height: viewportHeight } = useElementSize(viewport)
+const { height: contentHeight } = useElementSize(content)
+const { y: scrollY } = useScroll(viewport)
 
 const itemSize = computed(() => props.itemSize || 0)
 

src/components/ResponseSelect.vue

@@ -151,9 +151,8 @@
 </template>
 
 <script setup lang="ts">
+import { useElementSize, useScroll } from '@vueuse/core'
 import { useConfig } from 'hooks/config'
-import { useContainerResize } from 'hooks/resize'
-import { useContainerScroll } from 'hooks/scroll'
 import Button, { ButtonProps } from 'primevue/button'
 import Drawer from 'primevue/drawer'
 import Menu from 'primevue/menu'
@@ -240,13 +239,13 @@ const checkScrollPosition = () => {
   showControlButton.value = contentWidth > containerWidth
 }
 
-const { width, height } = useContainerResize(scrollArea)
+const { width, height } = useElementSize(scrollArea)
 
 watch([width, height], () => {
   checkScrollPosition()
 })
 
-useContainerScroll(scrollArea, {
+useScroll(scrollArea, {
   onScroll: () => {
     checkScrollPosition()
   },

src/hooks/container.ts

@@ -1,4 +1,4 @@
-import { useContainerResize } from 'hooks/resize'
+import { useElementSize } from '@vueuse/core'
 import { type InjectionKey, type Ref, inject, provide, toRef } from 'vue'
 
 const rem = parseFloat(getComputedStyle(document.documentElement).fontSize)
@@ -14,7 +14,7 @@ export const useContainerQueries = (
 
   provide(containerKey, container)
 
-  const { width } = useContainerResize(container)
+  const { width } = useElementSize(container)
 
   /**
    * @param size unit rem

src/hooks/resize.ts

@@ -1,44 +0,0 @@
-import { throttle } from 'lodash'
-import { type Ref, onUnmounted, ref, toRef, watch } from 'vue'
-
-export const useContainerResize = (
-  el: HTMLElement | null | Ref<HTMLElement | null>,
-) => {
-  const observer = ref<ResizeObserver | null>(null)
-
-  const width = ref(0)
-  const height = ref(0)
-
-  watch(
-    toRef(el),
-    (el) => {
-      if (el) {
-        const onResize = throttle((entries: ResizeObserverEntry[]) => {
-          const entry = entries[0]
-          width.value = entry.contentRect.width
-          height.value = entry.contentRect.height
-        }, 64)
-
-        observer.value = new ResizeObserver(onResize)
-        observer.value.observe(el)
-      }
-    },
-    { immediate: true },
-  )
-
-  const stop = () => {
-    if (observer.value) {
-      observer.value.disconnect()
-    }
-  }
-
-  onUnmounted(() => {
-    stop()
-  })
-
-  return {
-    width,
-    height,
-    stop,
-  }
-}

src/hooks/scroll.ts

@@ -1,58 +0,0 @@
-import { throttle } from 'lodash'
-import { computed, onUnmounted, ref, toRef, watch, type Ref } from 'vue'
-
-export interface UseScrollOption {
-  throttle?: number
-  onScroll?: (e: Event) => void
-}
-
-export const useContainerScroll = (
-  el: HTMLElement | null | Ref<HTMLElement | null>,
-  options?: UseScrollOption,
-) => {
-  const scrollLeft = ref(0)
-  const scrollTop = ref(0)
-
-  const container = toRef(el)
-
-  const onScroll = throttle((e: Event) => {
-    options?.onScroll?.(e)
-
-    if (container.value) {
-      scrollLeft.value = container.value.scrollLeft
-      scrollTop.value = container.value.scrollTop
-    }
-  }, options?.throttle ?? 64)
-
-  watch(
-    container,
-    (el) => {
-      if (el) {
-        el.addEventListener('scroll', onScroll, { passive: true })
-      }
-    },
-    { immediate: true },
-  )
-
-  const x = computed({
-    get: () => scrollLeft.value,
-    set: (val) => {
-      container.value?.scrollTo({ left: val })
-    },
-  })
-
-  const y = computed({
-    get: () => scrollTop.value,
-    set: (val) => {
-      container.value?.scrollTo({ top: val })
-    },
-  })
-
-  onUnmounted(() => {
-    if (container.value) {
-      container.value.removeEventListener('scroll', onScroll)
-    }
-  })
-
-  return { x, y }
-}