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()
   },