chore(vue): add vue typescript support

docs/using-baklava-in-vue.stories.mdx

@@ -86,6 +86,13 @@ Also, you can add ignore rule as compiler options to your webpack or vite.
 }
 ```
 
+### TypeScript
+
+Baklava offers TypeScript support for Vue versions 2.7 and higher. To enable this support, you should create a file named `components.d.ts` within the "src" directory and include the following line:
+```ts
+/// <reference types="@trendyol/baklava/dist/baklava-vue.d.ts" />
+```
+
 #### Eslint Configuration
 
 Baklava components are developed with `kebab case`. Eslint uses `pascal case` by default. If you are using eslint in your project, it will automatically convert the baklava components to `pascal case`. To prevent this, you need to turn off the `pascal case` rule in your project.

package.json

@@ -28,7 +28,7 @@
     "start": "npm run storybook:dev",
     "analyze": "cem analyze",
     "commit": "commit",
-    "build": "del-cli dist/ && npm run analyze && npm run generate-react-exports && tsc --emitDeclarationOnly && node scripts/build.js",
+    "build": "del-cli dist/ && npm run analyze && npm run generate-react-exports && tsc --emitDeclarationOnly && node scripts/build.js && npm run generate-vue-types",
     "build-storybook": "NODE_ENV=production storybook build -o storybook-static",
     "build-storybook-docs": "storybook build --docs",
     "serve": "node scripts/build.js --serve",
@@ -54,7 +54,8 @@
     "test:watch": "web-test-runner --coverage --watch",
     "test:debug": "web-test-runner --coverage --watch --debug",
     "test:headless": "web-test-runner --coverage --watch --debug --headless",
-    "generate-react-exports": "node scripts/generate-react-exports.js"
+    "generate-react-exports": "node scripts/generate-react-exports.js",
+    "generate-vue-types": "node scripts/generate-vue-types.js"
   },
   "keywords": [
     "web-components",

scripts/generate-vue-types.js

@@ -0,0 +1,18 @@
+import fs from "fs";
+
+const components = JSON.parse(fs.readFileSync("./dist/custom-elements.json", "utf-8"));
+const declerations = components.modules.flatMap(module => module.declarations);
+const customElements = declerations.filter(declaration => declaration.customElement === true);
+const customElementNames = customElements.map(customElement => customElement.name);
+
+const code = `
+import type * as Baklava from '@trendyol/baklava/dist/baklava'
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    ${customElementNames.map(component => `${component}: import("vue").Component<Baklava.${component}>`).join('\n    ')}
+  }
+}
+`
+
+fs.writeFileSync("./dist/baklava-vue.d.ts", code);