Connect components to site (#19)

* Connect components to site

* import css

* title size base-icon fix

---------

Co-authored-by: bryantgillespie <[email protected]>

components/nuxt.js

@@ -0,0 +1,9 @@
+import { addPlugin, createResolver, defineNuxtModule } from '@nuxt/kit';
+
+export default defineNuxtModule({
+	async setup() {
+		const { resolve } = createResolver(import.meta.url);
+
+		addPlugin(resolve('./nuxt.plugin.js'));
+	},
+});

components/nuxt.plugin.js

@@ -0,0 +1,8 @@
+import { defineNuxtPlugin } from '#app';
+import * as components from './src/index.ts';
+
+export default defineNuxtPlugin((nuxtApp) => {
+	for (const [name, component] of Object.entries(components)) {
+		nuxtApp.vueApp.component(name, component);
+	}
+});

components/package.json

@@ -15,7 +15,8 @@
 	"exports": {
 		".": "./dist/index.js",
 		"./package.json": "./package.json",
-		"./styles": "./src/theme/main.css"
+		"./styles": "./src/theme/main.css",
+		"./nuxt": "./nuxt.js"
 	},
 	"main": "dist/index.js",
 	"files": [

components/src/base-icon/base-icon.vue

@@ -10,9 +10,9 @@ export interface BaseIconProps {
 
 	/**
 	 * Size of the icon. Controls both font size and optical size
-	 * @values small, medium, large
+	 * @values small, medium, large, title
 	 */
-	size?: 'small' | 'medium' | 'large';
+	size?: 'small' | 'medium' | 'large' | 'title';
 
 	/**
 	 * Weight of the icon. Similar to font-weight
@@ -35,6 +35,8 @@ const opticalSize = computed(() => {
 			return 24;
 		case 'large':
 			return 48;
+		case 'title':
+			return 96;
 	}
 });
 

components/src/index.ts

@@ -1,2 +1,3 @@
 export { default as BaseIcon } from './base-icon/base-icon.vue';
-export { default as BaseDivider } from './base-button/base-divider.vue';
+export { default as BaseDivider } from './base-divider/base-divider.vue';
+export { default as BaseHeading } from './base-heading/base-heading.vue';

components/tsconfig.json

@@ -1,7 +1,4 @@
 {
 	"extends": "@directus/tsconfig/node18-esm.json",
-	"compilerOptions": {
-		"outDir": "dist"
-	},
 	"include": ["src"]
 }