@witchcraft/ui 0.0.1

package/src/runtime/vue/VueComponentsPlugin.ts

@@ -0,0 +1,16 @@
+import type { App, Plugin } from "vue"
+
+import { registerComponents } from "./registerComponents.js"
+import { registerDirectives } from "./registerDirectives.js"
+
+import * as components from "../components/index.js"
+import * as directives from "../directives/index.js"
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const VueComponentsPlugin: Plugin = {
+	install(app: App) {
+		registerComponents(app, components)
+		registerDirectives(app, directives)
+	},
+}
+

package/src/runtime/vue/registerComponents.ts

@@ -0,0 +1,31 @@
+import { capitalize } from "@alanscodelog/utils/capitalize.js"
+import type { App } from "vue"
+
+/**
+ * Register only specific components. Will register components as both snake case and pascal case.
+ *
+ * ```ts
+ * import {SomeComponent} from "@witchcraft/ui/components/SomeComponent"
+ * const components = { SomeComponent }
+ * createApp(App)
+ * 	.use({
+ * 		install(app: typeof App) {
+ * 			// will register optional-prefix-some-component and optionalPrefixSomeComponent
+ * 			// note it doesn't matter what you call the component in the Object
+ * 			// its name is set internally already
+ * 			registerComponents(app, components, "optional-prefix-")
+ * 		},
+ *	})
+ * ```
+ */
+
+
+export const registerComponents = (app: App, components: Record<string, any>, prefix = ""): void => {
+	for (const key of Object.keys(components)) {
+		const component = (components as any)[key]
+		const name = prefix + component.name
+		const capitalizedName = name.split("-").map((_: string) => capitalize(_)).join("")
+		app.component(name, component)
+		app.component(capitalizedName, component)
+	}
+}

package/src/runtime/vue/registerDirectives.ts

@@ -0,0 +1,12 @@
+import type { App } from "vue"
+
+/** Like registerComponents but for directives. Directives given must have a directiveName property, else they will be ignored. */
+export const registerDirectives = (app: App, directives: Record<string, any>, prefix = ""): void => {
+	for (const key of Object.keys(directives)) {
+		const directive = (directives as any)[key]
+		if (!directive.directiveName) continue
+		const name = prefix + directive.directiveName
+		const kebabCasedName = name.split("-").map((_: string) => _.toLowerCase()).join("-")
+		app.directive(kebabCasedName, directive)
+	}
+}

package/types/components.d.ts

@@ -0,0 +1,27 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    IFa6RegularCopy: typeof import('~icons/fa6-regular/copy')['default']
+    IFa6RegularFile: typeof import('~icons/fa6-regular/file')['default']
+    IFa6SolidArrowUpFromBracket: typeof import('~icons/fa6-solid/arrow-up-from-bracket')['default']
+    IFa6SolidChevronUp: typeof import('~icons/fa6-solid/chevron-up')['default']
+    IFa6SolidCircleHalfStroke: typeof import('~icons/fa6-solid/circle-half-stroke')['default']
+    IFa6SolidXmark: typeof import('~icons/fa6-solid/xmark')['default']
+    IFaSolidMoon: typeof import('~icons/fa-solid/moon')['default']
+    IPhSunBold: typeof import('~icons/ph/sun-bold')['default']
+    IRadixIconsCalendar: typeof import('~icons/radix-icons/calendar')['default']
+    IRadixIconsChevronLeft: typeof import('~icons/radix-icons/chevron-left')['default']
+    IRadixIconsChevronRight: typeof import('~icons/radix-icons/chevron-right')['default']
+    IRadixIconsDoubleArrowLeft: typeof import('~icons/radix-icons/double-arrow-left')['default']
+    IRadixIconsDoubleArrowRight: typeof import('~icons/radix-icons/double-arrow-right')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}

package/types/global.d.ts

@@ -0,0 +1,16 @@
+/* eslint-disable @typescript-eslint/consistent-indexed-object-style */
+/* eslint-disable @typescript-eslint/naming-convention */
+export {}
+
+declare module "vue" {
+	interface HTMLAttributes {
+		// allow any data-* attr
+		[key: `data-${string}`]: any
+	}
+	interface AriaAttributes {
+		// some aria attributes are missing...
+		"aria-description"?: string
+	}
+	// interface ComponentCustomProps {
+	// }
+}

package/types/index.d.ts

@@ -0,0 +1,5 @@
+// https://stackoverflow.com/questions/55659710/how-to-make-an-npm-module-with-globally-accessible-types
+
+/// <reference types="./global" />
+
+export * from "../dist/index.d.ts"

package/types/vite.d.ts

@@ -0,0 +1,2 @@
+// for import.meta.glob
+/// <reference types="vite/client" />