chore: playground stuff

formwerkjs · Mar 9, 2025 · ef4d73d · ef4d73d
1 parent e3dcca6
commit ef4d73d
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 5 deletions.
diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
@@ -4,11 +4,14 @@ import { useForm } from '@formwerk/core';
 const form = useForm();
 
 function onCompleted(value: string) {
-  console.log('onCompleted', value);
+  alert(`onCompleted: ${value}`);
 }
 </script>
 
 <template>
-  <OtpField name="otp" label="OTP" :length="4" accept="numeric" prefix="G-" required @completed="onCompleted" />
-  <button @click="form.setValue('otp', 'G-4321')">Set OTP</button>
+  <OtpField name="otp" label="OTP" :length="6" prefix="G-" masked @completed="onCompleted" />
+
+  <div class="flex w-full">
+    <button @click="form.setValue('otp', 'G-4321')">Set OTP</button>
+  </div>
 </template>
diff --git a/packages/playground/src/components/OtpField.vue b/packages/playground/src/components/OtpField.vue
@@ -13,8 +13,8 @@
 </template>
 
 <script setup lang="ts">
-import { useOtpField, OTPFieldProps, OtpSlot } from '@formwerk/core';
-
+import { useOtpField, OTPFieldProps } from '@formwerk/core';
+import OtpSlot from './OtpSlot.vue';
 const props = defineProps<OTPFieldProps>();
 
 const { controlProps, labelProps, errorMessage, errorMessageProps, fieldSlots } = useOtpField(props);

diff --git a/packages/playground/src/components/OtpSlot.vue b/packages/playground/src/components/OtpSlot.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { OtpSlotProps, useOtpSlot } from '@formwerk/core';
+
+const props = defineProps<OtpSlotProps>();
+
+const { slotProps } = useOtpSlot(props);
+</script>
+
+<template>
+  <input v-bind="slotProps" class="otp-slot" />
+</template>
+
+<style scoped>
+@reference "../style.css";
+
+.otp-slot {
+  @apply w-10 h-10 rounded-md border-2 border-zinc-700 bg-red-500 text-white font-medium text-2xl text-center;
+
+  &:disabled {
+    @apply bg-zinc-700 opacity-50;
+  }
+}
+</style>