AsyncValidatedInput

import { AsyncValidatedInput } from "@grassroot/ui-react";
const asyncValidatedInputFixture = {
  id: "async-validated-input",
  ariaLabel: "Workspace slug",
  placeholder: "workspace-slug",
  submitLabel: "Validate",
  validValue: "grassroot",
  defaultValue: "grassroot",
} satisfies {
  id: string;
  ariaLabel: string;
  placeholder: string;
  submitLabel: string;
  validValue: string;
  defaultValue: string;
};
 
export default function AsyncValidatedInputDemo() {
  return (
    <AsyncValidatedInput
      defaultValue={f.defaultValue}
      ariaLabel={f.ariaLabel}
      placeholder={f.placeholder}
      submitLabel={f.submitLabel}
      validate={async (value) => {
        if (value !== f.validValue) throw new Error("Invalid");
      }}
    />
  );
}

<script setup lang="ts">
import { AsyncValidatedInput } from "@grassroot/ui-vue";
const asyncValidatedInputFixture = {
  id: "async-validated-input",
  ariaLabel: "Workspace slug",
  placeholder: "workspace-slug",
  submitLabel: "Validate",
  validValue: "grassroot",
  defaultValue: "grassroot",
} satisfies {
  id: string;
  ariaLabel: string;
  placeholder: string;
  submitLabel: string;
  validValue: string;
  defaultValue: string;
};
 
async function validate(value: string) {
  if (value !== f.validValue) throw new Error("Invalid");
}
</script>
 
<template>
  <AsyncValidatedInput
    :default-value="f.defaultValue"
    :aria-label="f.ariaLabel"
    :placeholder="f.placeholder"
    :submit-label="f.submitLabel"
    :validate="validate"
  />
</template>

import { Component } from "@angular/core";
const asyncValidatedInputFixture = {
  id: "async-validated-input",
  ariaLabel: "Workspace slug",
  placeholder: "workspace-slug",
  submitLabel: "Validate",
  validValue: "grassroot",
  defaultValue: "grassroot",
} satisfies {
  id: string;
  ariaLabel: string;
  placeholder: string;
  submitLabel: string;
  validValue: string;
  defaultValue: string;
};
 
import { GrassrootAsyncValidatedInput } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-async-validated-input-demo",
  standalone: true,
  imports: [GrassrootAsyncValidatedInput],
  host: { style: "display: contents" },
  template: `
    <grassroot-async-validated-input
      [validate]="validate"
      [defaultValue]="fixture.defaultValue"
      [ariaLabel]="fixture.ariaLabel"
      [placeholder]="fixture.placeholder"
      [submitLabel]="fixture.submitLabel"
    />
  `,
})
export class AsyncValidatedInputDemoComponent {
  protected readonly fixture = f;
  protected readonly validate = async (value: string): Promise<void> => {
    if (value !== f.validValue) throw new Error("Invalid");
  };
}
 
export default AsyncValidatedInputDemoComponent;

<script lang="ts">
  import { AsyncValidatedInput } from "@grassroot/ui-svelte";
  const asyncValidatedInputFixture = {
    id: "async-validated-input",
    ariaLabel: "Workspace slug",
    placeholder: "workspace-slug",
    submitLabel: "Validate",
    validValue: "grassroot",
    defaultValue: "grassroot",
  } satisfies {
    id: string;
    ariaLabel: string;
    placeholder: string;
    submitLabel: string;
    validValue: string;
    defaultValue: string;
  };
 
  async function validate(value: string) {
    if (value !== f.validValue) throw new Error("Invalid");
  }
</script>
 
<AsyncValidatedInput
  defaultValue={f.defaultValue}
  ariaLabel={f.ariaLabel}
  placeholder={f.placeholder}
  submitLabel={f.submitLabel}
  {validate}
/>

/** @jsxImportSource solid-js */
import { AsyncValidatedInput } from "@grassroot/ui-solid";
const asyncValidatedInputFixture = {
  id: "async-validated-input",
  ariaLabel: "Workspace slug",
  placeholder: "workspace-slug",
  submitLabel: "Validate",
  validValue: "grassroot",
  defaultValue: "grassroot",
} satisfies {
  id: string;
  ariaLabel: string;
  placeholder: string;
  submitLabel: string;
  validValue: string;
  defaultValue: string;
};
 
export default function AsyncValidatedInputDemo() {
  return (
    <AsyncValidatedInput
      defaultValue={f.defaultValue}
      ariaLabel={f.ariaLabel}
      placeholder={f.placeholder}
      submitLabel={f.submitLabel}
      validate={async (value) => {
        if (value !== f.validValue) throw new Error("Invalid");
      }}
    />
  );
}