Fix elements attributes per type in Vue

nerdslabs · Jun 1, 2024 · 8b9f3f7 · 8b9f3f7
1 parent 46272a7
commit 8b9f3f7
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/.changeset/stupid-clocks-provide.md b/.changeset/stupid-clocks-provide.md
@@ -0,0 +1,5 @@
+---
+"@teiler/vue": patch
+---
+
+Fix elements attributes per type
diff --git a/packages/vue/src/component.ts b/packages/vue/src/component.ts
@@ -1,20 +1,21 @@
 import type { Compiler, DefaultTheme, HTMLElements, Properties, Sheet, StyleDefinition, TeilerComponent } from '@teiler/core'
-import type { DefineComponent, HTMLAttributes } from 'vue'
+import type { DefineComponent, IntrinsicElementAttributes } from 'vue'
 
 import Styled from './Styled'
 
 import { component, global, keyframes, styled, tags } from '@teiler/core'
 
+type Attributes<Target extends HTMLElements> = Pick<IntrinsicElementAttributes, Target>[Target]
 type VueRawBindings = { styleSheet: Sheet; theme: DefaultTheme }
-type VueTeilerComponent<Target extends HTMLElements, Props> = TeilerComponent<Target, Props> & DefineComponent<Props & HTMLAttributes, VueRawBindings, {}, {}, {}>
+type VueTeilerComponent<Target extends HTMLElements, Props> = TeilerComponent<Target, Props> & DefineComponent<Props & Attributes<Target>, VueRawBindings, {}, {}, {}>
 
 const createComponent = <Target extends HTMLElements, Props>(styleDefinition: StyleDefinition<Target, Props>): VueTeilerComponent<Target, Props> => {
   const component = Styled(styleDefinition)
   return component as VueTeilerComponent<Target, Props>
 }
 
 type InferProps<Component, Props> = Component extends VueTeilerComponent<HTMLElements, infer P> ? P & Props : Props
-type InferComponent<Component, Props> = Component extends VueTeilerComponent<infer E, infer P> ? VueTeilerComponent<E, Props & P> : VueTeilerComponent<HTMLElements, Props>
+type InferComponent<Component, Props> = Component extends VueTeilerComponent<infer E extends HTMLElements, infer P> ? VueTeilerComponent<E, Props & P> : VueTeilerComponent<HTMLElements, Props>
 
 type Component<Target extends HTMLElements> = {
   <Props extends object = {}>(string: TemplateStringsArray, ...properties: Properties<Props>[]): VueTeilerComponent<Target, Props>