ui/test/components/__snapshots__/Form.spec.ts.snap

// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`Form > custom validation works > with error 1`] = `
"<form id="42" class="">
  <div class="text-sm">
    <div class="">
      <!--v-if-->
      <!--v-if-->
    </div>
    <div class="">
      <div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
        <!--v-if-->
        <!--v-if-->
      </div>
      <!--v-if-->
    </div>
  </div>
  <div class="text-sm">
    <div class="">
      <!--v-if-->
      <!--v-if-->
    </div>
    <div class="">
      <div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-red-500 dark:ring-red-400 focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400">
        <!--v-if-->
        <!--v-if-->
      </div>
      <p class="mt-2 text-red-500 dark:text-red-400">Must be at least 8 characters</p>
    </div>
  </div>
</form>"
`;

exports[`Form > custom validation works > without error 1`] = `
"<form id="42" class="">
  <div class="text-sm">
    <div class="">
      <!--v-if-->
      <!--v-if-->
    </div>
    <div class="">
      <div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
        <!--v-if-->
        <!--v-if-->
      </div>
      <!--v-if-->
    </div>
  </div>
  <div class="text-sm">
    <div class="">
      <!--v-if-->
      <!--v-if-->
    </div>
    <div class="">
      <div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
        <!--v-if-->
        <!--v-if-->
      </div>
      <!--v-if-->
    </div>
  </div>
</form>"
`;

exports[`Form > joi validation works > with error 1`] = `
"<form id="42" class="">
  <div class="text-sm">
    <div class="">
      <!--v-if-->
      <!--v-if-->
    </div>
    <div class="">
      <div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
        <!--v-if-->
        <!--v-if-->
      </div>
      <!--v-if-->
    </div>
  </div>
  <div class="text-sm">
    <div class="">
      <!--v-if-->
      <!--v-if-->
    </div>
    <div class="">
      <div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-red-500 dark:ring-red-400 focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400">
        <!--v-if-->
        <!--v-if-->
      </div>
      <p class="mt-2 text-red-500 dark:text-red-400">Must be at least 8 characters</p>
    </div>
  </div>
</form>"
`;

exports[`Form > joi validation works > without error 1`] = `
"<form id="42" class="">
  <div class="text-sm">
    <div class="">
      <!--v-if-->
      <!--v-if-->
    </div>
    <div class="">
      <div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
        <!--v-if-->
        <!--v-if-->
      </div>
      <!--v-if-->
    </div>
  </div>
  <div class="text-sm">
    <div class="">
      <!--v-if-->
      <!--v-if-->
    </div>
    <div class="">
      <div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
        <!--v-if-->
        <!--v-if-->
      </div>
      <!--v-if-->
    </div>
  </div>
</form>"
`;

exports[`Form > renders basic case correctly 1`] = `"<form id="0" class=""></form>"`;

exports[`Form > renders with default slot correctly 1`] = `"<form id="1" class="">Form slot</form>"`;

exports[`Form > valibot validation works > with error 1`] = `
"<form id="42" class="">
  <div class="text-sm">
    <div class="">
      <!--v-if-->
      <!--v-if-->
    </div>
    <div class="">
      <div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
        <!--v-if-->
        <!--v-if-->
      </div>
      <!--v-if-->
    </div>
  </div>
  <div class="text-sm">
    <div class="">
      <!--v-if-->
      <!--v-if-->
    </div>
    <div class="">
      <div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-red-500 dark:ring-red-400 focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400">
        <!--v-if-->
        <!--v-if-->
      </div>
      <p class="mt-2 text-red-500 dark:text-red-400">Must be at least 8 characters</p>
    </div>
  </div>
</form>"
`;

exports[`Form > valibot validation works > without error 1`] = `
"<form id="42" class="">
  <div class="text-sm">
    <div class="">
      <!--v-if-->
      <!--v-if-->
    </div>
    <div class="">
      <div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
        <!--v-if-->
        <!--v-if-->
      </div>
      <!--v-if-->
    </div>
  </div>
  <div class="text-sm">
    <div class="">
      <!--v-if-->
      <!--v-if-->
    </div>
    <div class="">
      <div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
        <!--v-if-->
        <!--v-if-->
      </div>
      <!--v-if-->
    </div>
  </div>
</form>"
`;

exports[`Form > yup validation works > with error 1`] = `
"<form id="42" class="">
  <div class="text-sm">
    <div class="">
      <!--v-if-->
      <!--v-if-->
    </div>
    <div class="">
      <div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
        <!--v-if-->
        <!--v-if-->
      </div>
      <!--v-if-->
    </div>
  </div>
  <div class="text-sm">
    <div class="">
      <!--v-if-->
      <!--v-if-->
    </div>
    <div class="">
      <div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-red-500 dark:ring-red-400 focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400">
        <!--v-if-->
        <!--v-if-->
      </div>
      <p class="mt-2 text-red-500 dark:text-red-400">Must be at least 8 characters</p>
    </div>
  </div>
</form>"
`;

exports[`Form > yup validation works > without error 1`] = `
"<form id="42" class="">
  <div class="text-sm">
    <div class="">
      <!--v-if-->
      <!--v-if-->
    </div>
    <div class="">
      <div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
        <!--v-if-->
        <!--v-if-->
      </div>
      <!--v-if-->
    </div>
  </div>
  <div class="text-sm">
    <div class="">
      <!--v-if-->
      <!--v-if-->
    </div>
    <div class="">
      <div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
        <!--v-if-->
        <!--v-if-->
      </div>
      <!--v-if-->
    </div>
  </div>
</form>"
`;

exports[`Form > zod validation works > with error 1`] = `
"<form id="42" class="">
  <div class="text-sm">
    <div class="">
      <!--v-if-->
      <!--v-if-->
    </div>
    <div class="">
      <div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
        <!--v-if-->
        <!--v-if-->
      </div>
      <!--v-if-->
    </div>
  </div>
  <div class="text-sm">
    <div class="">
      <!--v-if-->
      <!--v-if-->
    </div>
    <div class="">
      <div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-red-500 dark:ring-red-400 focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400">
        <!--v-if-->
        <!--v-if-->
      </div>
      <p class="mt-2 text-red-500 dark:text-red-400">Must be at least 8 characters</p>
    </div>
  </div>
</form>"
`;

exports[`Form > zod validation works > without error 1`] = `
"<form id="42" class="">
  <div class="text-sm">
    <div class="">
      <!--v-if-->
      <!--v-if-->
    </div>
    <div class="">
      <div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
        <!--v-if-->
        <!--v-if-->
      </div>
      <!--v-if-->
    </div>
  </div>
  <div class="text-sm">
    <div class="">
      <!--v-if-->
      <!--v-if-->
    </div>
    <div class="">
      <div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
        <!--v-if-->
        <!--v-if-->
      </div>
      <!--v-if-->
    </div>
  </div>
</form>"
`;