Field

<script setup lang="ts">
import type { HTMLAttributes } from 'vue';

import { cn } from '../../lib/utils';

import { type FieldVariants, fieldVariants } from '.';

export interface FieldProps {
  orientation?: FieldVariants['orientation'];
  class?: HTMLAttributes['class'];
}

const props = withDefaults(defineProps<FieldProps>(), {
  orientation: 'vertical',
});
</script>

<template>
  <div
    role="group"
    data-slot="field"
    :data-orientation="orientation"
    :class="cn(fieldVariants({ orientation }), props.class)"
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue';

import { cn } from '../../lib/utils';

export interface FieldContentProps {
  class?: HTMLAttributes['class'];
}

const props = defineProps<FieldContentProps>();
</script>

<template>
  <div
    data-slot="field-content"
    :class="
      cn(
        'nx:group/field-content nx:flex nx:flex-1 nx:flex-col nx:gap-1.5',
        props.class
      )
    "
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue';

import { cn } from '../../lib/utils';

export interface FieldDescriptionProps {
  class?: HTMLAttributes['class'];
}

const props = defineProps<FieldDescriptionProps>();
</script>

<template>
  <p
    data-slot="field-description"
    :class="
      cn(
        'nx:m-0 nx:typography-body-default nx:text-muted-foreground nx:group-has-data-[orientation=horizontal]/field:text-balance',
        'nx:[&>a]:text-inherit nx:[&>a]:underline nx:[&>a]:underline-offset-4 nx:[&>a:hover]:text-primary-subtle-foreground',
        props.class
      )
    "
  >
    <slot />
  </p>
</template>

<script setup lang="ts">
import { computed, type HTMLAttributes, type VNode } from 'vue';

import { renderedNodes } from '../../lib/slots';
import { cn } from '../../lib/utils';

import type { FieldErrors } from '.';

/** Unique, non-empty error messages in first-seen order. */
function dedupeErrorMessages(errors: FieldErrors | undefined): string[] {
  const seen = new Map<string, string>();
  for (const error of errors ?? []) {
    if (error?.message) seen.set(error.message, error.message);
  }
  return [...seen.values()];
}

export interface FieldErrorProps {
  /**
   * Validation errors to show. Duplicate messages show once, and several render
   * as a list. Ignored when the error has content of its own.
   */
  errors?: FieldErrors;
  class?: HTMLAttributes['class'];
}

const props = defineProps<FieldErrorProps>();

const slots = defineSlots<{ default?: () => VNode[] }>();

const messages = computed(() => dedupeErrorMessages(props.errors));

function hasChildren() {
  return renderedNodes(slots.default?.()).length > 0;
}
</script>

<template>
  <div
    v-if="messages.length > 0 || hasChildren()"
    role="alert"
    aria-atomic="true"
    data-slot="field-error"
    :class="
      cn(
        'nx:typography-body-default nx:text-error-subtle-foreground',
        props.class
      )
    "
  >
    <slot>
      <template v-if="messages.length === 1">{{ messages[0] }}</template>
      <ul
        v-else
        class="nx:my-0 nx:ml-4 nx:flex nx:list-disc nx:flex-col nx:gap-1 nx:pl-0"
      >
        <li v-for="message in messages" :key="message">{{ message }}</li>
      </ul>
    </slot>
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue';

import { cn } from '../../lib/utils';

export interface FieldGroupProps {
  class?: HTMLAttributes['class'];
}

const props = defineProps<FieldGroupProps>();
</script>

<template>
  <div
    data-slot="field-group"
    :class="
      cn(
        'nx:group/field-group nx:@container/field-group nx:flex nx:w-full nx:flex-col nx:gap-7 nx:data-[slot=checkbox-group]:gap-3 nx:*:data-[slot=field-group]:gap-4',
        props.class
      )
    "
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import { reactiveOmit } from '@vueuse/core';
import type { LabelProps as RekaLabelProps } from 'reka-ui';
import type { HTMLAttributes } from 'vue';

import { cn } from '../../lib/utils';
import { Label } from '../label';

export interface FieldLabelProps extends RekaLabelProps {
  class?: HTMLAttributes['class'];
}

const props = defineProps<FieldLabelProps>();

const delegated = reactiveOmit(props, 'class');
</script>

<template>
  <Label
    v-bind="delegated"
    data-slot="field-label"
    :class="
      cn(
        'nx:group/field-label nx:peer/field-label nx:flex nx:w-fit nx:gap-2 nx:group-data-[disabled=true]/field:text-disabled-foreground',
        'nx:has-[>[data-slot=field]]:w-full nx:has-[>[data-slot=field]]:flex-col nx:has-[>[data-slot=field]]:rounded-md nx:has-[>[data-slot=field]]:border-default nx:*:data-[slot=field]:p-4',
        'nx:has-data-[state=checked]:border-primary-border nx:has-data-[state=checked]:bg-primary-subtle',
        props.class
      )
    "
  >
    <slot />
  </Label>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue';

import { cn } from '../../lib/utils';

export interface FieldLegendProps {
  /**
   * Caption size. `legend` is larger, and `label` matches a field label.
   */
  variant?: 'legend' | 'label';
  class?: HTMLAttributes['class'];
}

const props = withDefaults(defineProps<FieldLegendProps>(), {
  variant: 'legend',
});
</script>

<template>
  <legend
    data-slot="field-legend"
    :data-variant="variant"
    :class="
      cn(
        'nx:mb-3 nx:p-0 nx:data-[variant=legend]:typography-heading-xsmall nx:data-[variant=label]:typography-label-default',
        props.class
      )
    "
  >
    <slot />
  </legend>
</template>

<script setup lang="ts">
import type { HTMLAttributes, VNode } from 'vue';

import { cn } from '../../lib/utils';

export interface FieldRequiredIndicatorProps {
  class?: HTMLAttributes['class'];
}

defineOptions({ inheritAttrs: false });

const props = defineProps<FieldRequiredIndicatorProps>();

const slots = defineSlots<{
  default?: () => VNode[];
  /** Text for an optional field, shown instead of the `*`. Screen readers read it, and it overrides the default slot. */
  fallback?: () => VNode[];
}>();
</script>

<template>
  <span
    v-bind="$attrs"
    :aria-hidden="slots.fallback ? undefined : true"
    data-slot="field-required-indicator"
    :data-optional="slots.fallback ? 'true' : undefined"
    :class="
      cn(
        'nx:text-error-subtle-foreground nx:data-[optional=true]:typography-body-default nx:data-[optional=true]:text-muted-foreground',
        props.class
      )
    "
  >
    <slot v-if="slots.fallback" name="fallback" />
    <slot v-else>*</slot>
  </span>
</template>

<script setup lang="ts">
import type { HTMLAttributes, VNode } from 'vue';

import { renderedNodes } from '../../lib/slots';
import { cn } from '../../lib/utils';
import { Separator } from '../separator';

export interface FieldSeparatorProps {
  class?: HTMLAttributes['class'];
}

const props = defineProps<FieldSeparatorProps>();

const slots = defineSlots<{ default?: () => VNode[] }>();

function hasContent() {
  return renderedNodes(slots.default?.()).length > 0;
}
</script>

<template>
  <div
    data-slot="field-separator"
    :data-content="hasContent()"
    :class="
      cn('nx:relative nx:-my-2 nx:h-5 nx:typography-body-default', props.class)
    "
  >
    <Separator class="nx:absolute nx:inset-0 nx:top-1/2" />
    <span
      v-if="hasContent()"
      data-slot="field-separator-content"
      class="nx:relative nx:mx-auto nx:block nx:w-fit nx:bg-container nx:px-2 nx:text-muted-foreground"
    >
      <slot />
    </span>
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue';

import { cn } from '../../lib/utils';

export interface FieldSetProps {
  class?: HTMLAttributes['class'];
}

const props = defineProps<FieldSetProps>();
</script>

<template>
  <fieldset
    data-slot="field-set"
    :class="
      cn(
        'nx:m-0 nx:flex nx:min-w-0 nx:flex-col nx:gap-6 nx:border-0 nx:p-0 nx:has-[>[data-slot=checkbox-group]]:gap-3 nx:has-[>[data-slot=radio-group]]:gap-3',
        props.class
      )
    "
  >
    <slot />
  </fieldset>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue';

import { cn } from '../../lib/utils';

export interface FieldTitleProps {
  class?: HTMLAttributes['class'];
}

const props = defineProps<FieldTitleProps>();
</script>

<template>
  <div
    data-slot="field-label"
    :class="
      cn(
        'nx:flex nx:w-fit nx:items-center nx:gap-2 nx:typography-label-default nx:group-data-[disabled=true]/field:text-disabled-foreground',
        props.class
      )
    "
  >
    <slot />
  </div>
</template>

import { cva, type VariantProps } from 'class-variance-authority';

export { default as Field, type FieldProps } from './Field.vue';
export {
  default as FieldContent,
  type FieldContentProps,
} from './FieldContent.vue';
export {
  default as FieldDescription,
  type FieldDescriptionProps,
} from './FieldDescription.vue';
export { default as FieldError, type FieldErrorProps } from './FieldError.vue';
export { default as FieldGroup, type FieldGroupProps } from './FieldGroup.vue';
export { default as FieldLabel, type FieldLabelProps } from './FieldLabel.vue';
export {
  default as FieldLegend,
  type FieldLegendProps,
} from './FieldLegend.vue';
export {
  default as FieldRequiredIndicator,
  type FieldRequiredIndicatorProps,
} from './FieldRequiredIndicator.vue';
export {
  default as FieldSeparator,
  type FieldSeparatorProps,
} from './FieldSeparator.vue';
export { default as FieldSet, type FieldSetProps } from './FieldSet.vue';
export { default as FieldTitle, type FieldTitleProps } from './FieldTitle.vue';

export const fieldVariants = cva(
  'nx:group/field nx:flex nx:w-full nx:gap-2 nx:data-[invalid=true]:text-error-subtle-foreground',
  {
    variants: {
      orientation: {
        vertical: 'nx:flex-col nx:*:w-full nx:[&>.sr-only]:w-auto',
        horizontal:
          'nx:flex-row nx:items-center nx:*:data-[slot=field-label]:flex-auto nx:has-[>[data-slot=field-content]]:items-start nx:has-[>[data-slot=field-content]]:[&>[role=checkbox]]:mt-px nx:has-[>[data-slot=field-content]]:[&>[role=radio]]:mt-px',
        responsive:
          'nx:flex-col nx:@md/field-group:flex-row nx:@md/field-group:items-center nx:*:w-full nx:@md/field-group:*:w-auto nx:[&>.sr-only]:w-auto nx:@md/field-group:*:data-[slot=field-label]:flex-auto nx:@md/field-group:has-[>[data-slot=field-content]]:items-start nx:@md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox]]:mt-px nx:@md/field-group:has-[>[data-slot=field-content]]:[&>[role=radio]]:mt-px',
      },
    },
    defaultVariants: {
      orientation: 'vertical',
    },
  }
);

export type FieldVariants = VariantProps<typeof fieldVariants>;

/** Validation errors for a field, in the shape form libraries report them. */
export type FieldErrors = Array<{ message?: string } | undefined>;

import { Comment, Fragment, Text, type VNode } from 'vue';

/** The nodes a slot renders, without comments and whitespace-only text. */
export function renderedNodes(nodes: VNode[] | undefined) {
  return (nodes ?? []).filter(
    (node) =>
      node.type !== Comment &&
      !(node.type === Text && !String(node.children).trim())
  );
}

/** {@link renderedNodes} with each `v-for` or `<template>` fragment unwrapped into its children. */
export function flattenedNodes(nodes: VNode[] | undefined): VNode[] {
  return renderedNodes(nodes).flatMap((node) =>
    node.type === Fragment && Array.isArray(node.children)
      ? flattenedNodes(node.children as VNode[])
      : [node]
  );
}