Initial commit

resources/js/views/demos/forms/form-elements/otp-input/DemoOtpInputBasic.vue

@@ -0,0 +1,3 @@
+<template>
+  <VOtpInput />
+</template>

resources/js/views/demos/forms/form-elements/otp-input/DemoOtpInputFinish.vue

@@ -0,0 +1,41 @@
+<script setup>
+const loading = ref(false)
+const snackbar = ref(false)
+const snackbarColor = ref('default')
+const otp = ref('')
+const text = ref('')
+const expectedOtp = ref('133707')
+
+const onFinish = rsp => {
+  loading.value = true
+  setTimeout(() => {
+    loading.value = false
+    snackbarColor.value = rsp === expectedOtp.value ? 'success' : 'warning'
+    text.value = `Processed OTP with "${ rsp }" (${ snackbarColor.value })`
+    snackbar.value = true
+  }, 3000)
+}
+</script>
+
+<template>
+  <div>
+    <VOtpInput
+      v-model="otp"
+      :loading="loading"
+      @finish="onFinish"
+    />
+
+    <div>
+      Expected value: <span class="font-weight-bold">{{ expectedOtp }}</span>
+    </div>
+
+    <VSnackbar
+      v-model="snackbar"
+      :color="snackbarColor"
+      :timeout="2000"
+      location="top"
+    >
+      {{ text }}
+    </VSnackbar>
+  </div>
+</template>

resources/js/views/demos/forms/form-elements/otp-input/DemoOtpInputHidden.vue

@@ -0,0 +1,12 @@
+<script setup>
+const otp = ref('')
+</script>
+
+<template>
+  <VOtpInput
+    v-model="otp"
+    autocomplete="on"
+    type="password"
+    length="5"
+  />
+</template>

resources/js/views/demos/forms/form-elements/otp-input/demoCodeOtpInput.js

@@ -0,0 +1,119 @@
+export const basic = { ts: `<template>
+  <VOtpInput />
+</template>
+`, js: `<template>
+  <VOtpInput />
+</template>
+` }
+
+export const finish = { ts: `<script setup lang="ts">
+const loading = ref(false)
+const snackbar = ref(false)
+const snackbarColor = ref('default')
+const otp = ref('')
+const text = ref('')
+const expectedOtp = ref('133707')
+
+const onFinish = (rsp: unknown) => {
+  loading.value = true
+
+  setTimeout(() => {
+    loading.value = false
+    snackbarColor.value = (rsp === expectedOtp.value) ? 'success' : 'warning'
+    text.value = \`Processed OTP with "\${rsp}" (\${snackbarColor.value})\`
+    snackbar.value = true
+  }, 3000)
+}
+</script>
+
+<template>
+  <div>
+    <VOtpInput
+      v-model="otp"
+      :loading="loading"
+      @finish="onFinish"
+    />
+
+    <div>
+      Expected value: <span class="font-weight-bold">{{ expectedOtp }}</span>
+    </div>
+
+    <VSnackbar
+      v-model="snackbar"
+      :color="snackbarColor"
+      :timeout="2000"
+      location="top"
+    >
+      {{ text }}
+    </VSnackbar>
+  </div>
+</template>
+`, js: `<script setup>
+const loading = ref(false)
+const snackbar = ref(false)
+const snackbarColor = ref('default')
+const otp = ref('')
+const text = ref('')
+const expectedOtp = ref('133707')
+
+const onFinish = rsp => {
+  loading.value = true
+  setTimeout(() => {
+    loading.value = false
+    snackbarColor.value = rsp === expectedOtp.value ? 'success' : 'warning'
+    text.value = \`Processed OTP with "\${ rsp }" (\${ snackbarColor.value })\`
+    snackbar.value = true
+  }, 3000)
+}
+</script>
+
+<template>
+  <div>
+    <VOtpInput
+      v-model="otp"
+      :loading="loading"
+      @finish="onFinish"
+    />
+
+    <div>
+      Expected value: <span class="font-weight-bold">{{ expectedOtp }}</span>
+    </div>
+
+    <VSnackbar
+      v-model="snackbar"
+      :color="snackbarColor"
+      :timeout="2000"
+      location="top"
+    >
+      {{ text }}
+    </VSnackbar>
+  </div>
+</template>
+` }
+
+export const hidden = { ts: `<script setup lang="ts">
+const otp = ref('')
+</script>
+
+<template>
+  <VOtpInput
+    v-model="otp"
+    autocomplete="on"
+    type="password"
+    length="5"
+  />
+</template>
+`, js: `<script setup>
+const otp = ref('')
+</script>
+
+<template>
+  <VOtpInput
+    v-model="otp"
+    autocomplete="on"
+    type="password"
+    length="5"
+  />
+</template>
+` }
+