@featherk/ui 0.9.1 → 0.9.2

package/README.md

@@ -20,7 +20,7 @@ Component styles ship with `@featherk/ui` and are automatically loaded from the
 
 ```vue
 <script setup lang="ts">
-import { ref, toRef, watchEffect } from "vue";
+import { ref, toRef } from "vue";
 import { USAddress } from "@featherk/ui";
 import { useUSAddress } from "@featherk/composables/address";
 
@@ -31,17 +31,9 @@ const billingAddress = useUSAddress({
 	addressId: "billing-address",
 });
 
-watchEffect((onCleanup) => {
-	const fieldset = billingFieldsetRef.value;
-	if (!fieldset) return;
-
-	const handleFocusout = (event: Event) => {
-		billingAddress.onFieldsetFocusout(event as FocusEvent);
-	};
-
-	fieldset.addEventListener("focusout", handleFocusout);
-	onCleanup(() => fieldset.removeEventListener("focusout", handleFocusout));
-});
+const onFieldsetFocusout = (event: FocusEvent) => {
+	billingAddress.onFieldsetFocusout(event);
+};
 
 function onReset() {
 	billingAddress.reset();
@@ -57,7 +49,7 @@ async function onSubmit() {
 
 <template>
 	<form @submit.prevent="onSubmit">
-		<fieldset ref="billingFieldsetRef">
+		<fieldset ref="billingFieldsetRef" @focusout="onFieldsetFocusout">
 			<USAddress id="billing-address" :address="billingAddress" />
 
 			<label for="billing-attn">Attention</label>

package/docs/address/USAddress.md

@@ -22,7 +22,7 @@ import { useUSAddress } from "@featherk/composables/address";
 
 ```vue
 <script setup lang="ts">
-import { ref, toRef, watchEffect } from "vue";
+import { ref, toRef } from "vue";
 import { USAddress } from "@featherk/ui";
 import { useUSAddress } from "@featherk/composables/address";
 
@@ -33,17 +33,9 @@ const shippingAddress = useUSAddress({
   addressId: "shipping-address",
 });
 
-watchEffect((onCleanup) => {
-  const fieldset = shippingFieldsetRef.value;
-  if (!fieldset) return;
-
-  const handleFocusout = (event: Event) => {
-    shippingAddress.onFieldsetFocusout(event as FocusEvent);
-  };
-
-  fieldset.addEventListener("focusout", handleFocusout);
-  onCleanup(() => fieldset.removeEventListener("focusout", handleFocusout));
-});
+const onFieldsetFocusout = (event: FocusEvent) => {
+  shippingAddress.onFieldsetFocusout(event);
+};
 
 function onReset() {
   shippingAddress.reset();
@@ -59,7 +51,7 @@ async function onSubmit() {
 
 <template>
   <form @submit.prevent="onSubmit">
-    <fieldset ref="shippingFieldsetRef">
+    <fieldset ref="shippingFieldsetRef" @focusout="onFieldsetFocusout">
       <USAddress id="shipping-address" :address="shippingAddress" />
 
       <label for="shipping-attn">Attention</label>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@featherk/ui",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "main": "dist/featherk-ui.umd.js",
   "module": "dist/featherk-ui.es.js",
   "types": "dist/index.d.ts",