refactor: author vue component in pure typescript

Author: danielwaltz

packages/vue/package.json

@@ -47,7 +47,6 @@
     "@adhesivejs/core": "workspace:*"
   },
   "devDependencies": {
-    "unplugin-vue": "catalog:",
     "vue-tsc": "catalog:"
   },
   "engines": {

packages/vue/src/components/AdhesiveContainer.ts

@@ -0,0 +1,109 @@
+import {
+  computed,
+  defineComponent,
+  h,
+  useTemplateRef,
+  type DefineComponent,
+  type PropType,
+} from "vue";
+import {
+  useAdhesive,
+  type UseAdhesiveOptions,
+} from "../composables/useAdhesive.js";
+import type { MaybeElementOrSelectorRef } from "../utils/unrefElement.js";
+
+type BaseProps = Omit<
+  Partial<UseAdhesiveOptions>,
+  "outerClassName" | "innerClassName" | "activeClassName" | "releasedClassName"
+>;
+
+export interface AdhesiveContainerProps extends BaseProps {
+  outerClass?: UseAdhesiveOptions["outerClassName"];
+  innerClass?: UseAdhesiveOptions["innerClassName"];
+  activeClass?: UseAdhesiveOptions["activeClassName"];
+  releasedClass?: UseAdhesiveOptions["releasedClassName"];
+}
+
+/**
+ * Automatically applies sticky positioning to its content.
+ * Internally uses the `useAdhesive` composable.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { AdhesiveContainer } from '@adhesivejs/vue';
+ * </script>
+ *
+ * <template>
+ *   <AdhesiveContainer position="top">
+ *     Content to make sticky
+ *   </AdhesiveContainer>
+ * </template>
+ * ```
+ */
+export const AdhesiveContainer: DefineComponent<AdhesiveContainerProps> =
+  defineComponent({
+    name: "AdhesiveContainer",
+    props: {
+      boundingRef: {
+        type: [Object, String] as PropType<MaybeElementOrSelectorRef>,
+        required: false,
+      },
+      boundingEl: {
+        type: [Object, String] as PropType<UseAdhesiveOptions["boundingEl"]>,
+        required: false,
+      },
+      enabled: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+      },
+      offset: {
+        type: Number as PropType<number>,
+        required: false,
+      },
+      position: {
+        type: String as PropType<UseAdhesiveOptions["position"]>,
+        required: false,
+      },
+      zIndex: {
+        type: Number as PropType<number>,
+        required: false,
+      },
+      outerClass: {
+        type: String as PropType<string>,
+        required: false,
+      },
+      innerClass: {
+        type: String as PropType<string>,
+        required: false,
+      },
+      activeClass: {
+        type: String as PropType<string>,
+        required: false,
+      },
+      releasedClass: {
+        type: String as PropType<string>,
+        required: false,
+      },
+    },
+    setup(props, { slots }) {
+      const targetRef = useTemplateRef<HTMLElement>("target");
+
+      const options = computed<UseAdhesiveOptions>(() => ({
+        boundingRef: props.boundingRef,
+        boundingEl: props.boundingEl,
+        enabled: props.enabled,
+        offset: props.offset,
+        position: props.position,
+        zIndex: props.zIndex,
+        outerClassName: props.outerClass,
+        innerClassName: props.innerClass,
+        activeClassName: props.activeClass,
+        releasedClassName: props.releasedClass,
+      }));
+
+      useAdhesive(targetRef, options);
+
+      return () => h("div", { ref: "target" }, slots.default?.());
+    },
+  });

packages/vue/src/components/AdhesiveContainer.vue

@@ -14,6 +14,6 @@ export {
 } from "./composables/useAdhesive.js";
 
 export {
-  default as AdhesiveContainer,
+  AdhesiveContainer,
   type AdhesiveContainerProps,
-} from "./components/AdhesiveContainer.vue";
+} from "./components/AdhesiveContainer.js";

packages/vue/src/index.ts

@@ -1,14 +1,11 @@
 import { execSync } from "node:child_process";
 import { writeFile } from "node:fs/promises";
 import { defineConfig } from "tsdown";
-import Vue from "unplugin-vue/rolldown";
 
 export default defineConfig({
   entry: "src/index.ts",
   platform: "neutral",
   exports: true,
-  plugins: [Vue({ isProduction: true })],
-  dts: { vue: true },
   hooks: {
     "build:done": async (ctx) => {
       const pkg = ctx.options.pkg;

packages/vue/tsdown.config.ts

@@ -28,7 +28,6 @@ catalog:
   react-dom: ^19.1.0
   tsdown: ^0.13.0
   typescript: ~5.8.3
-  unplugin-vue: ^7.0.0
   vite: ^7.0.6
   vitest: ^3.2.4
   vue: ^3.5.18