fix(tabs): move events to items

CyanSalt · Apr 3, 2024 · 8ba2126 · 8ba2126
1 parent 97fcdb5
commit 8ba2126
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 18 deletions.
diff --git a/docs/components/tabs.md b/docs/components/tabs.md
@@ -142,14 +142,6 @@ import { RTabItem, RTabs } from 'roughness'
 
   </REvent>
 
-  <REvent name="will-draw">
-
-  Associating effects before graphics drawing.
-
-  See [Reactions](/guide/theme#reactions).
-
-  </REvent>
-
 </REventsTable>
 
 ### Tabs Slots
@@ -222,6 +214,20 @@ import { RTabItem, RTabs } from 'roughness'
 
 </RPropsTable>
 
+### TabItem Events
+
+<REventsTable>
+
+  <REvent name="will-draw">
+
+  Associating effects before graphics drawing.
+
+  See [Reactions](/guide/theme#reactions).
+
+  </REvent>
+
+</REventsTable>
+
 ### TabItem Slots
 
 <RSlotsTable>

diff --git a/src/tabs/index.vue b/src/tabs/index.vue
@@ -5,7 +5,6 @@ import type { RValueOrKey } from '../common/key'
 import { keyOf } from '../common/key'
 import { useList } from '../common/list'
 import { effectRef } from '../common/utils'
-import type { GraphicsEmits } from '../graphics/utils'
 import RSpace from '../space/index.vue'
 import RTabAnchor from './tab-anchor.vue'
 import { itemsInjection } from './utils'
@@ -35,7 +34,7 @@ const {
 
 const emit = defineEmits<{
   (event: 'update:modelValue', value: typeof modelValue): void,
-} & GraphicsEmits>()
+}>()
 
 defineSlots<{
   default?: (props: {}) => any,
@@ -73,10 +72,6 @@ const renderedItems = $computed(() => {
 function activate(tab: RValueOrKey) {
   internalModelValue = tab
 }
-
-function willDraw() {
-  emit('will-draw')
-}
 </script>
 
 <template>
@@ -99,7 +94,7 @@ function willDraw() {
         :value="tab.value"
         v-bind="tab.props"
         @activate="activate"
-        @will-draw="willDraw"
+        @will-draw="tab.emit('will-draw')"
       >
         <component :is="tab.slots.anchor" v-if="tab.slots.anchor"></component>
       </RTabAnchor>

diff --git a/src/tabs/tab-item.vue b/src/tabs/tab-item.vue
@@ -3,7 +3,7 @@ import '../common/style.scss'
 import { useSlots } from 'vue'
 import type { RValueOrKey } from '../common/key'
 import { useListItem } from '../common/list'
-import type { GraphicsProps } from '../graphics/utils'
+import type { GraphicsEmits, GraphicsProps } from '../graphics/utils'
 import { itemsInjection } from './utils'
 
 defineOptions({
@@ -23,12 +23,15 @@ const {
   value: RValueOrKey,
 } & GraphicsProps>()
 
+const emit = defineEmits<{
+} & GraphicsEmits>()
+
 defineSlots<{
   anchor?: (props: {}) => any,
   default?: (props: {}) => any,
 }>()
 
 const slots = useSlots()
 
-useListItem(itemsInjection, () => ({ value, props: { reactions, graphicsOptions }, slots }))
+useListItem(itemsInjection, () => ({ value, props: { reactions, graphicsOptions }, emit, slots }))
 </script>
diff --git a/src/tabs/utils.ts b/src/tabs/utils.ts
@@ -1,12 +1,13 @@
 import type { InjectionKey } from 'vue'
 import type { RValueOrKey } from '../common/key'
 import type { ComponentSlots } from '../common/renderable'
-import type { GraphicsProps } from '../graphics/utils'
+import type { GraphicsEmits, GraphicsProps } from '../graphics/utils'
 import type RTabItem from './tab-item.vue'
 
 interface TabItemData {
   value: RValueOrKey,
   props: GraphicsProps,
+  emit: GraphicsEmits,
   slots: ComponentSlots<typeof RTabItem>,
 }