fix(rate): movable

src/divider/index.vue

@@ -19,6 +19,8 @@ const {
   vertical?: boolean,
 } & GraphicsProps>()
 
+defineSlots<{}>()
+
 const getReactionState = useReactionState(toRef(() => reactions))
 
 function draw(rc: RoughSVG, svg: SVGSVGElement) {

src/graphics/index.vue

@@ -26,6 +26,8 @@ const emit = defineEmits<{
   (event: 'draw', rc: T extends 'canvas' ? RoughCanvas : RoughSVG, element: T extends 'canvas' ? HTMLCanvasElement : SVGSVGElement): void,
 }>()
 
+defineSlots<{}>()
+
 let root = $ref<T extends 'canvas' ? HTMLCanvasElement : SVGSVGElement>()
 
 const parent = $(useParentElement())

src/grid-guide/index.vue

@@ -20,6 +20,8 @@ const {
   sectionCells?: number,
 } & ReactionProps>()
 
+defineSlots<{}>()
+
 const getReactionState = useReactionState(toRef(() => reactions))
 
 const root = $ref<HTMLCanvasElement>()

src/icon/index.vue

@@ -24,6 +24,8 @@ const {
   name: string,
 } & GraphicsProps>()
 
+defineSlots<{}>()
+
 const svgAttrs: Partial<Record<keyof SVGSVGElement, string>> = {
   viewBox: '0 0 24 24',
 }

src/input/index.vue

@@ -68,6 +68,8 @@ const emit = defineEmits<{
   (event: 'update:modelValue', value: typeof modelValue): void,
 }>()
 
+defineSlots<{}>()
+
 const formItemName = $(inject(nameInjection, ref()))
 
 const name = $computed(() => {

src/rate/index.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import '../common/style.scss'
+import { useMouseInElement, useMousePressed } from '@vueuse/core'
 import type { RoughSVG } from 'roughjs/bin/svg'
 import { toRef, watch, watchEffect } from 'vue'
 import { useReactionState } from '../common/utils'
@@ -25,6 +26,8 @@ const emit = defineEmits<{
   (event: 'update:modelValue', value: typeof modelValue): void,
 }>()
 
+defineSlots<{}>()
+
 let internalModelValue = $ref(modelValue)
 
 watchEffect(() => {
@@ -77,29 +80,32 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
   }
 }
 
+let root = $ref<HTMLLabelElement>()
 let input = $ref<HTMLInputElement>()
 
-function click(event: MouseEvent) {
-  const target = event.target as HTMLLabelElement
-  const width = target.clientWidth
-  const height = target.clientHeight
-  const cursorX = event.offsetX
+const { pressed } = $(useMousePressed({ target: $$(root) }))
+const { elementX } = $(useMouseInElement($$(root)))
+
+watchEffect(() => {
+  if (!root || !pressed) return
+  const width = root.clientWidth
+  const height = root.clientHeight
 
   const baseWidth = 48
   const baseHeight = 45
   const padding = 2
   const shapeSizeByWidth = (width - padding * 2) / 7
   const shapeSizeByHeight = height - padding * 2 * baseWidth / baseHeight
   const shapeSize = Math.min(shapeSizeByWidth, shapeSizeByHeight)
-  internalModelValue = Math.ceil((cursorX - padding) / (shapeSize * 1.5))
+  internalModelValue = Math.ceil((elementX - padding) / (shapeSize * 1.5))
   if (input) {
     input.focus()
   }
-}
+})
 </script>
 
 <template>
-  <label class="r-rate" @click.self="click">
+  <label ref="root" class="r-rate">
     <input
       ref="input"
       v-model.number="internalModelValue"