feat(vue): add autocomplete to polymorphic vue implementation

.changeset/plenty-seahorses-add.md

@@ -0,0 +1,5 @@
+---
+'@polymorphic-factory/vue': minor
+---
+
+Initial release

README.md

@@ -6,12 +6,12 @@
   <img alt="Github Stars" src="https://badgen.net/github/stars/chakra-ui/polymorphic" />
 </p>
 
-Create polymorphic React/Preact/SolidJS components with a customizable `styled` function.
+Create polymorphic React/Preact/SolidJS/Vue components with a customizable `styled` function.
 
 A polymorphic component is a component that can be rendered with a different element.
 
 ```tsx
-import { polymorphicFactory } from '@polymorphic-factory/{react,preact,solid}'
+import { polymorphicFactory } from '@polymorphic-factory/{react,preact,solid,vue}'
 
 const poly = polymorphicFactory()
 
@@ -40,6 +40,7 @@ This monorepo uses [pnpm](https://pnpm.io) as a package manager. It includes the
 - [react](./packages/react/README.md)
 - [preact](./packages/preact/README.md)
 - [solid](./packages/solid/README.md)
+- [vue](./packages/vue/README.md)
 
 ## Development
 

package.json

@@ -19,7 +19,8 @@
     "test": "turbo run test",
     "typecheck": "turbo run typecheck",
     "version": "changeset version",
-    "version:rc": "changeset version --snapshot rc"
+    "version:rc": "changeset version --snapshot rc",
+    "vue": "pnpm --filter=@polymorphic-factory/vue"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.4.7",

packages/vue/README.md

@@ -0,0 +1,136 @@
+<h1 align="center">@polymorphic-factory/vue</h1>
+
+<p align="center">
+  <img alt="CodeCov" src="https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7"/>
+  <img alt="MIT License" src="https://img.shields.io/github/license/chakra-ui/polymorphic"/>
+  <img alt="Github Stars" src="https://badgen.net/github/stars/chakra-ui/polymorphic" />
+  <img alt="Bundle Size" src="https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue"/>
+  <img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat"/>
+</p>
+
+Create polymorphic VueJS components with a customizable `styled` function.
+
+A polymorphic component is a component that can be rendered with a different element.
+
+> **Known drawbacks for the type definitions:**
+>
+> Event handlers are not typed correctly when using the `as` prop.
+>
+> This is a deliberate decision to keep the usage as simple as possible.
+
+## Installation
+
+```bash
+npm install @polymorphic-factory/vue
+```
+
+or
+
+```bash
+yarn add @polymorphic-factory/vue
+```
+
+or
+
+```bash
+pnpm install @polymorphic-factory/vue
+```
+
+## Usage
+
+Import the polymorphic factory and create your element factory.
+
+```ts
+import { polymorphicFactory } from '@polymorphic-factory/vue'
+const poly = polymorphicFactory()
+```
+
+### Custom `styled` function
+
+You can override the default implementation by passing `styled` function in the options.
+
+```tsx
+import { defineComponent } from 'vue'
+const poly = polymorphicFactory({
+  styled: (originalComponent, options) =>
+    defineComponent({
+      props: ['as'],
+      setup(props, { slots, attrs }) {
+        const component = props.as || originalComponent
+
+        return () =>
+          h(
+            component,
+            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },
+            slots,
+          )
+      },
+    }),
+})
+
+const WithOptions = poly('div', { hello: 'world' })
+
+const App = () => {
+  return (
+    <>
+      <poly.div hello="world" />
+      {/* renders <div data-custom-styled hello="world" /> */}
+
+      <WithOptions />
+      {/* renders <div data-custom-styled data-options="{ \"hello\": \"world\" }" /> */}
+    </>
+  )
+}
+```
+
+### Inline
+
+Use the element factory to create elements inline.
+Every JSX element is supported `div`, `main`, `aside`, etc.
+
+```tsx
+<>
+  <poly.div />
+  <poly.main>
+    <poly.section>
+      <poly.div as="p">This is rendered as a p element</poly.div>
+    </poly.section>
+  </poly.main>
+</>
+```
+
+### Factory
+
+Use the factory to wrap custom components.
+
+```tsx
+const OriginalComponent = defineComponent({
+  setup(props) {
+    return () => <div data-original="true" {...props} />
+  },
+})
+const MyComponent = poly(OriginalComponent)
+
+const App = h(MyComponent)
+// render <div data-original="true" />
+```
+
+It still supports the `as` prop, which would replace the `OriginalComponent`.
+
+```tsx
+<MyComponent as="div" />
+// renders <div />
+```
+
+## Types
+
+```ts
+import type { HTMLPolymorphicComponents, HTMLPolymorphicProps } from '@polymorphic-factory/vue'
+
+type PolymorphicDiv = HTMLPolymorphicComponents['div']
+type DivProps = HTMLPolymorphicProps<'div'>
+```
+
+## License
+
+MIT © [Tim Kolberger](https://github.com/timkolberger)

packages/vue/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@polymorphic-factory/vue",
+  "version": "0.0.0",
+  "author": "Shyrro <zsahmane@gmail.com>",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "clean-package": "../../clean-package.config.json",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chakra-ui/polymorphic.git",
+    "directory": "packages/vue"
+  },
+  "bugs": {
+    "url": "https://github.com/chakra-ui/polymorphic/issues"
+  },
+  "scripts": {
+    "dev": "pnpm run build --watch",
+    "build": "tsup src/index.ts",
+    "test": "vitest run --reporter verbose --coverage",
+    "test:watch": "vitest",
+    "lint": "eslint --ext .ts,.tsx src",
+    "typecheck": "tsc --noEmit",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/vue": "6.6.1",
+    "@types/jsdom": "20.0.1",
+    "@types/testing-library__jest-dom": "5.14.5",
+    "@vitejs/plugin-vue-jsx": "2.1.1",
+    "@vitest/coverage-c8": "0.25.5",
+    "clean-package": "2.2.0",
+    "jsdom": "20.0.3",
+    "tsup": "6.5.0",
+    "typescript": "4.9.3",
+    "vite": "3.2.5",
+    "vitest": "0.25.5",
+    "vue": "3.2.26"
+  },
+  "peerDependencies": {
+    "vue": ">=3"
+  }
+}

packages/vue/src/@types/jsx.d.ts

@@ -0,0 +1,5 @@
+import Vue from 'vue'
+declare global {
+  const h: Vue.h
+  const Fragment: Vue.Fragment
+}