Modal Login Form

  <script setup lang="ts">
  import { ModalsContainer, useModal } from 'vue-final-modal'
  import ModalLoginForm from './ModalLoginForm.vue'

  const { open, close } = useModal({
    component: ModalLoginForm,
    attrs: {
      onSubmit(formData) {
        alert(JSON.stringify(formData, null, 2))
        close()
      },
    },
  })
  </script>

  <template>
    <VButton @click="open">
      Open Modal
    </VButton>

    <ModalsContainer />
  </template>

  <script setup lang="ts">
  import { VueFinalModal } from 'vue-final-modal'
  import type { FormData } from './LoginFormVorms.vue'
  import LoginFormVorms from './LoginFormVorms.vue'

  const emit = defineEmits<{
    (e: 'submit', formData: FormData): void
  }>()
  </script>

  <template>
    <VueFinalModal
      class="flex justify-center items-center"
      content-class="relative p-4 rounded-lg bg-white dark:bg-gray-900"
      content-transition="vfm-fade"
      overlay-transition="vfm-fade"
    >
      <LoginFormVorms @submit="formData => emit('submit', formData)" />
    </VueFinalModal>
  </template>

  <script setup lang="ts">
  import { useForm } from '@vorms/core'

  export type FormData = {
    account: string
    password: string
    remember: boolean
  }

  const emit = defineEmits<{
    (e: 'submit', formData: FormData): void
  }>()

  const { register, errors, handleSubmit } = useForm({
    initialValues: {
      account: '',
      password: '',
      remember: false,
    },
    onSubmit(values) {
      emit('submit', values)
    },
  })

  const { value: account, attrs: accountAttrs } = register('account', {
    validate(value) {
      if (!value)
        return 'account is required!'
    },
  })
  const { value: password, attrs: passwordAttrs } = register('password')
  const { value: remember, attrs: rememberAttrs } = register('remember')
  </script>

  <template>
    <h1 class="text-2xl mb-4">Login</h1>
    <form @submit="handleSubmit">
      <div class="field">
        <input
          v-model="account"
          class="field__input"
          type="text"
          placeholder="Account"
          v-bind="accountAttrs"
        >
        <div v-show="'account' in errors" class="field__error">
          {{ errors.account }}
        </div>
      </div>
      <div class="field">
        <input
          v-model="password"
          class="field__input"
          type="password"
          placeholder="Password"
          v-bind="passwordAttrs"
        >
      </div>

      <div class="field checkbox">
        <input
          id="remember"
          v-model="remember"
          class="field__checkbox"
          type="checkbox"
          v-bind="rememberAttrs"
        >
        <label for="remember">remember</label>
      </div>

      <div class="field">
        <input type="submit" value="Submit">
      </div>
    </form>
  </template>

  <style>
  .field + .field {
    margin-top: 15px;
  }

  .field__input,
  input[type='submit'] {
    box-sizing: border-box;
    width: 100%;
    border-radius: 4px;
    border: 1px solid white;
    padding: 4px 16px 4px 4px;
  }

  .field__error {
    color: red;
    margin-top: 2px;
  }

  .checkbox {
    display: flex;
    align-items: center;
  }

  .field__checkbox {
    accent-color: #41b883;
  }

  .field__checkbox + label {
    margin-left: 4px;
  }

  input[type='submit'] {
    background: #41b883;
    border: 1px solid #41b883;
    cursor: pointer;
  }
  </style>