feat: useLabel

teleskop150750 · productdevbook · commit c08683e8b3d9 · 2024-10-26T17:41:03.000+03:00
diff --git a/packages/vue-primitives/src/label/Label.ts b/packages/vue-primitives/src/label/Label.ts
@@ -7,3 +7,25 @@ export interface LabelProps {
 export type LabelEmits = {
   mousedown: [event: MouseEvent]
 }
+
+export interface UseLabelEmits {
+  onMousedown?: (event: MouseEvent) => void
+}
+
+export function useLabel(emits?: UseLabelEmits) {
+  function onMousedown(event: MouseEvent) {
+    // only prevent text selection if clicking inside the label itself
+    const target = event.target as HTMLElement
+    if (target.closest('button, input, select, textarea'))
+      return
+
+    emits?.onMousedown?.(event)
+    // prevent text selection when double clicking label
+    if (!event.defaultPrevented && event.detail > 1)
+      event.preventDefault()
+  }
+
+  return () => ({
+    onMousedown,
+  })
+}
diff --git a/packages/vue-primitives/src/label/Label.vue b/packages/vue-primitives/src/label/Label.vue
@@ -11,24 +11,15 @@ withDefaults(defineProps<LabelProps>(), {
 })
 const emit = defineEmits<LabelEmits>()
 
-function onMousedown(event: MouseEvent) {
-  // only prevent text selection if clicking inside the label itself
-  const target = event.target as HTMLElement
-  if (target.closest('button, input, select, textarea'))
-    return
-
-  emit('mousedown', event)
-  // prevent text selection when double clicking label
-  if (!event.defaultPrevented && event.detail > 1)
-    event.preventDefault()
-}
+const label = useLabel({
+  onMousedown(event) {
+    emit('mousedown', event)
+  },
+})
 </script>
 
 <template>
-  <Primitive
-    :as="as"
-    @mousedown="onMousedown"
-  >
+  <Primitive :as="as" v-bind="label">
     <slot />
   </Primitive>
 </template>
diff --git a/packages/vue-primitives/src/label/index.ts b/packages/vue-primitives/src/label/index.ts
@@ -1,6 +1,8 @@
 export {
   type LabelEmits,
   type LabelProps,
+  useLabel,
+  type UseLabelEmits,
 } from './Label.ts'
 
 export { default as Label } from './Label.vue'
