@bitrix24/b24ui-nuxt 0.5.10 → 0.5.11

package/dist/runtime/components/Form.vue

@@ -1,231 +1,285 @@
-<script>
-import _appConfig from "#build/app.config";
-import theme from "#build/b24ui/form";
-import { tv } from "../utils/tv";
-const appConfigForm = _appConfig;
-const form = tv({ extend: tv(theme), ...appConfigForm.b24ui?.form || {} });
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/form'
+import { tv } from '../utils/tv'
+import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, FormEvent, Form, FormErrorWithId } from '../types/form'
+import type { DeepReadonly } from 'vue'
+
+const appConfigForm = _appConfig as AppConfig & { b24ui: { form: Partial<typeof theme> } }
+
+const form = tv({ extend: tv(theme), ...(appConfigForm.b24ui?.form || {}) })
+
+export interface FormProps<T extends object> {
+  id?: string | number
+  /** Schema to validate the form state. Supports Standard Schema objects, Yup, Joi, and Superstructs. */
+  schema?: FormSchema<T>
+  /** An object representing the current state of the form. */
+  state: Partial<T>
+  /**
+   * Custom validation function to validate the form state.
+   * @param state - The current state of the form.
+   * @returns A promise that resolves to an array of FormError objects, or an array of FormError objects directly.
+   */
+  validate?: (state: Partial<T>) => Promise<FormError[]> | FormError[]
+  /**
+   * The list of input events that trigger the form validation.
+   * @defaultValue `['blur', 'change', 'input']`
+   */
+  validateOn?: FormInputEvents[]
+  /** Disable all inputs inside the form. */
+  disabled?: boolean
+  /**
+   * Delay in milliseconds before validating the form on input events.
+   * @defaultValue `300`
+   */
+  validateOnInputDelay?: number
+  /**
+   * If true, schema transformations will be applied to the state on submit.
+   * @defaultValue `true`
+   */
+  transform?: boolean
+  class?: any
+  onSubmit?: ((event: FormSubmitEvent<T>) => void | Promise<void>) | (() => void | Promise<void>)
+}
+
+export interface FormEmits<T extends object> {
+  (e: 'submit', payload: FormSubmitEvent<T>): void
+  (e: 'error', payload: FormErrorEvent): void
+}
+
+export interface FormSlots {
+  default(props?: { errors: FormError[] }): any
+}
 </script>
 
-<script setup>
-import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed, useId, readonly } from "vue";
-import { useEventBus } from "@vueuse/core";
-import { formOptionsInjectionKey, formInputsInjectionKey, formBusInjectionKey, formLoadingInjectionKey } from "../composables/useFormField";
-import { validateSchema } from "../utils/form";
-import { FormValidationException } from "../types/form";
-const props = defineProps({
-  id: {
-    type: [String, Number],
-    required: false
-  },
-  schema: {
-    type: null,
-    required: false
-  },
-  state: {
-    type: Object,
-    required: true
-  },
-  validate: {
-    type: Function,
-    required: false
-  },
-  validateOn: {
-    type: Array,
-    required: false,
-    default() {
-      return ["input", "blur", "change"];
-    }
-  },
-  disabled: {
-    type: Boolean,
-    required: false
-  },
-  validateOnInputDelay: {
-    type: Number,
-    required: false,
-    default: 300
-  },
-  transform: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  class: {
-    type: null,
-    required: false
+<script lang="ts" setup generic="T extends object">
+import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed, useId, readonly } from 'vue'
+import { useEventBus } from '@vueuse/core'
+import { formOptionsInjectionKey, formInputsInjectionKey, formBusInjectionKey, formLoadingInjectionKey } from '../composables/useFormField'
+import { validateSchema } from '../utils/form'
+import { FormValidationException } from '../types/form'
+
+const props = withDefaults(defineProps<FormProps<T>>(), {
+  validateOn() {
+    return ['input', 'blur', 'change'] as FormInputEvents[]
   },
-  onSubmit: {
-    type: Function,
-    required: false
-  }
-});
-const emits = defineEmits(["submit", "error"]);
-defineSlots();
-const formId = props.id ?? useId();
-const bus = useEventBus(`form-${formId}`);
+  validateOnInputDelay: 300,
+  transform: true
+})
+const emits = defineEmits<FormEmits<T>>()
+defineSlots<FormSlots>()
+
+const formId = props.id ?? useId() as string
+
+const bus = useEventBus<FormEvent<T>>(`form-${formId}`)
 const parentBus = inject(
   formBusInjectionKey,
-  void 0
-);
-provide(formBusInjectionKey, bus);
-const nestedForms = ref(/* @__PURE__ */ new Map());
+  undefined
+)
+
+provide(formBusInjectionKey, bus)
+
+const nestedForms = ref<Map<string | number, { validate: typeof _validate }>>(new Map())
+
 onMounted(async () => {
   bus.on(async (event) => {
-    if (event.type === "attach") {
-      nestedForms.value.set(event.formId, { validate: event.validate });
-    } else if (event.type === "detach") {
-      nestedForms.value.delete(event.formId);
+    if (event.type === 'attach') {
+      nestedForms.value.set(event.formId, { validate: event.validate })
+    } else if (event.type === 'detach') {
+      nestedForms.value.delete(event.formId)
     } else if (props.validateOn?.includes(event.type) && !loading.value) {
-      if (event.type !== "input") {
-        await _validate({ name: event.name, silent: true, nested: false });
+      if (event.type !== 'input') {
+        await _validate({ name: event.name, silent: true, nested: false })
       } else if (event.eager || blurredFields.has(event.name)) {
-        await _validate({ name: event.name, silent: true, nested: false });
+        await _validate({ name: event.name, silent: true, nested: false })
       }
     }
-    if (event.type === "blur") {
-      blurredFields.add(event.name);
+
+    if (event.type === 'blur') {
+      blurredFields.add(event.name)
     }
-    if (event.type === "change" || event.type === "input" || event.type === "blur" || event.type === "focus") {
-      touchedFields.add(event.name);
+
+    if (event.type === 'change' || event.type === 'input' || event.type === 'blur' || event.type === 'focus') {
+      touchedFields.add(event.name)
     }
-    if (event.type === "change" || event.type === "input") {
-      dirtyFields.add(event.name);
+
+    if (event.type === 'change' || event.type === 'input') {
+      dirtyFields.add(event.name)
     }
-  });
-});
+  })
+})
+
 onUnmounted(() => {
-  bus.reset();
-});
+  bus.reset()
+})
+
 onMounted(async () => {
   if (parentBus) {
-    await nextTick();
-    parentBus.emit({ type: "attach", validate: _validate, formId });
+    await nextTick()
+    parentBus.emit({ type: 'attach', validate: _validate, formId })
   }
-});
+})
+
 onUnmounted(() => {
   if (parentBus) {
-    parentBus.emit({ type: "detach", formId });
+    parentBus.emit({ type: 'detach', formId })
   }
-});
-const errors = ref([]);
-provide("form-errors", errors);
-const inputs = ref({});
-provide(formInputsInjectionKey, inputs);
-const dirtyFields = /* @__PURE__ */ new Set();
-const touchedFields = /* @__PURE__ */ new Set();
-const blurredFields = /* @__PURE__ */ new Set();
-function resolveErrorIds(errs) {
-  return errs.map((err) => ({
+})
+
+const errors = ref<FormErrorWithId[]>([])
+provide('form-errors', errors)
+
+const inputs = ref<{ [P in keyof T]?: { id?: string, pattern?: RegExp } }>({})
+provide(formInputsInjectionKey, inputs as any)
+
+const dirtyFields = new Set<keyof T>()
+const touchedFields = new Set<keyof T>()
+const blurredFields = new Set<keyof T>()
+
+function resolveErrorIds(errs: FormError[]): FormErrorWithId[] {
+  return errs.map(err => ({
     ...err,
-    id: err?.name ? inputs.value[err.name]?.id : void 0
-  }));
+    id: err?.name ? inputs.value[err.name]?.id : undefined
+  }))
 }
-const transformedState = ref(null);
-async function getErrors() {
-  let errs = props.validate ? await props.validate(props.state) ?? [] : [];
+
+const transformedState = ref<T | null>(null)
+
+async function getErrors(): Promise<FormErrorWithId[]> {
+  let errs = props.validate ? (await props.validate(props.state)) ?? [] : []
+
   if (props.schema) {
-    const { errors: errors2, result } = await validateSchema(props.state, props.schema);
-    if (errors2) {
-      errs = errs.concat(errors2);
+    const { errors, result } = await validateSchema(props.state, props.schema as FormSchema<typeof props.state>)
+    if (errors) {
+      errs = errs.concat(errors)
     } else {
-      transformedState.value = result;
+      transformedState.value = result
     }
   }
-  return resolveErrorIds(errs);
+
+  return resolveErrorIds(errs)
 }
-async function _validate(opts = { silent: false, nested: true, transform: false }) {
-  const names = opts.name && !Array.isArray(opts.name) ? [opts.name] : opts.name;
-  const nestedValidatePromises = !names && opts.nested ? Array.from(nestedForms.value.values()).map(
-    ({ validate }) => validate(opts).then(() => void 0).catch((error) => {
-      if (!(error instanceof FormValidationException)) {
-        throw error;
-      }
-      return error;
-    })
-  ) : [];
+
+async function _validate(opts: { name?: keyof T | (keyof T)[], silent?: boolean, nested?: boolean, transform?: boolean } = { silent: false, nested: true, transform: false }): Promise<T | false> {
+  const names = opts.name && !Array.isArray(opts.name) ? [opts.name] : opts.name as (keyof T)[]
+
+  const nestedValidatePromises = !names && opts.nested
+    ? Array.from(nestedForms.value.values()).map(
+        ({ validate }) => validate(opts).then(() => undefined).catch((error: Error) => {
+          if (!(error instanceof FormValidationException)) {
+            throw error
+          }
+          return error
+        })
+      )
+    : []
+
   if (names) {
-    const otherErrors = errors.value.filter((error) => !names.some((name) => {
-      const pattern = inputs.value?.[name]?.pattern;
-      return name === error.name || pattern && error.name?.match(pattern);
-    }));
-    const pathErrors = (await getErrors()).filter((error) => names.some((name) => {
-      const pattern = inputs.value?.[name]?.pattern;
-      return name === error.name || pattern && error.name?.match(pattern);
-    }));
-    errors.value = otherErrors.concat(pathErrors);
+    const otherErrors = errors.value.filter(error => !names.some((name) => {
+      const pattern = inputs.value?.[name]?.pattern
+      return name === error.name || (pattern && error.name?.match(pattern))
+    }))
+
+    const pathErrors = (await getErrors()).filter(error => names.some((name) => {
+      const pattern = inputs.value?.[name]?.pattern
+      return name === error.name || (pattern && error.name?.match(pattern))
+    }))
+
+    errors.value = otherErrors.concat(pathErrors)
   } else {
-    errors.value = await getErrors();
+    errors.value = await getErrors()
   }
-  const childErrors = (await Promise.all(nestedValidatePromises)).filter((val) => val !== void 0);
+
+  const childErrors = (await Promise.all(nestedValidatePromises)).filter(val => val !== undefined)
+
   if (errors.value.length + childErrors.length > 0) {
-    if (opts.silent) return false;
-    throw new FormValidationException(formId, errors.value, childErrors);
+    if (opts.silent) return false
+    throw new FormValidationException(formId, errors.value, childErrors)
   }
+
   if (opts.transform) {
-    Object.assign(props.state, transformedState.value);
+    Object.assign(props.state, transformedState.value)
   }
-  return props.state;
+
+  return props.state as T
 }
-const loading = ref(false);
-provide(formLoadingInjectionKey, readonly(loading));
-async function onSubmitWrapper(payload) {
-  loading.value = true;
-  const event = payload;
+
+const loading = ref(false)
+provide(formLoadingInjectionKey, readonly(loading))
+
+async function onSubmitWrapper(payload: Event) {
+  loading.value = true
+
+  const event = payload as FormSubmitEvent<any>
+
   try {
-    event.data = await _validate({ nested: true, transform: props.transform });
-    await props.onSubmit?.(event);
-    dirtyFields.clear();
+    event.data = await _validate({ nested: true, transform: props.transform })
+    await props.onSubmit?.(event)
+    dirtyFields.clear()
   } catch (error) {
     if (!(error instanceof FormValidationException)) {
-      throw error;
+      throw error
     }
-    const errorEvent = {
+
+    const errorEvent: FormErrorEvent = {
       ...event,
       errors: error.errors,
       children: error.children
-    };
-    emits("error", errorEvent);
+    }
+    emits('error', errorEvent)
   } finally {
-    loading.value = false;
+    loading.value = false
   }
 }
-const disabled = computed(() => props.disabled || loading.value);
+
+const disabled = computed(() => props.disabled || loading.value)
+
 provide(formOptionsInjectionKey, computed(() => ({
   disabled: disabled.value,
   validateOnInputDelay: props.validateOnInputDelay
-})));
-defineExpose({
+})))
+
+defineExpose<Form<T>>({
   validate: _validate,
   errors,
-  setErrors(errs, name) {
+
+  setErrors(errs: FormError[], name?: keyof T) {
     if (name) {
-      errors.value = errors.value.filter((error) => error.name !== name).concat(resolveErrorIds(errs));
+      errors.value = errors.value
+        .filter(error => error.name !== name)
+        .concat(resolveErrorIds(errs))
     } else {
-      errors.value = resolveErrorIds(errs);
+      errors.value = resolveErrorIds(errs)
     }
   },
+
   async submit() {
-    await onSubmitWrapper(new Event("submit"));
+    await onSubmitWrapper(new Event('submit'))
   },
-  getErrors(name) {
+
+  getErrors(name?: keyof T) {
     if (name) {
-      return errors.value.filter((err) => err.name === name);
+      return errors.value.filter(err => err.name === name)
     }
-    return errors.value;
+    return errors.value
   },
-  clear(name) {
+
+  clear(name?: string) {
     if (name) {
-      errors.value = errors.value.filter((err) => err.name !== name);
+      errors.value = errors.value.filter(err => err.name !== name)
     } else {
-      errors.value = [];
+      errors.value = []
     }
   },
+
   disabled,
   dirty: computed(() => !!dirtyFields.size),
-  dirtyFields: readonly(dirtyFields),
-  blurredFields: readonly(blurredFields),
-  touchedFields: readonly(touchedFields)
-});
+
+  dirtyFields: readonly(dirtyFields) as DeepReadonly<Set<keyof T>>,
+  blurredFields: readonly(blurredFields) as DeepReadonly<Set<keyof T>>,
+  touchedFields: readonly(touchedFields) as DeepReadonly<Set<keyof T>>
+})
 </script>
 
 <template>

package/dist/runtime/components/FormField.vue

@@ -1,83 +1,87 @@
-<script>
-import _appConfig from "#build/app.config";
-import theme from "#build/b24ui/form-field";
-import { tv } from "../utils/tv";
-const appConfigFormField = _appConfig;
-const formField = tv({ extend: tv(theme), ...appConfigFormField.b24ui?.formField || {} });
+<script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/form-field'
+import { tv } from '../utils/tv'
+
+const appConfigFormField = _appConfig as AppConfig & { b24ui: { formField: Partial<typeof theme> } }
+
+const formField = tv({ extend: tv(theme), ...(appConfigFormField.b24ui?.formField || {}) })
+
+type FormFieldVariants = VariantProps<typeof formField>
+
+export interface FormFieldProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  /** The name of the FormField. Also used to match form errors. */
+  name?: string
+  /** A regular expression to match form error names. */
+  errorPattern?: RegExp
+  label?: string
+  description?: string
+  help?: string
+  error?: string | boolean
+  hint?: string
+  /**
+   * @defaultValue 'md'
+   */
+  size?: FormFieldVariants['size']
+  /**
+   * @defaultValue false
+   */
+  required?: boolean
+  /** If true, validation on input will be active immediately instead of waiting for a blur event. */
+  eagerValidation?: boolean
+  /**
+   * Delay in milliseconds before validating the form on input events.
+   * @defaultValue `300`
+   */
+  validateOnInputDelay?: number
+  class?: any
+  b24ui?: Partial<typeof formField.slots>
+}
+
+export interface FormFieldSlots {
+  label(props: { label?: string }): any
+  hint(props: { hint?: string }): any
+  description(props: { description?: string }): any
+  help(props: { help?: string }): any
+  error(props: { error?: string | boolean }): any
+  default(props: { error?: string | boolean }): any
+}
 </script>
 
-<script setup>
-import { computed, ref, inject, provide, useId } from "vue";
-import { formFieldInjectionKey, inputIdInjectionKey } from "../composables/useFormField";
-const props = defineProps({
-  as: {
-    type: null,
-    required: false
-  },
-  name: {
-    type: String,
-    required: false
-  },
-  errorPattern: {
-    type: null,
-    required: false
-  },
-  label: {
-    type: String,
-    required: false
-  },
-  description: {
-    type: String,
-    required: false
-  },
-  help: {
-    type: String,
-    required: false
-  },
-  error: {
-    type: [String, Boolean],
-    required: false
-  },
-  hint: {
-    type: String,
-    required: false
-  },
-  size: {
-    type: null,
-    required: false
-  },
-  required: {
-    type: Boolean,
-    required: false
-  },
-  eagerValidation: {
-    type: Boolean,
-    required: false
-  },
-  validateOnInputDelay: {
-    type: Number,
-    required: false
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  }
-});
-const slots = defineSlots();
+<script setup lang="ts">
+import { computed, ref, inject, provide, type Ref, useId } from 'vue'
+import { Primitive, Label } from 'reka-ui'
+import { formFieldInjectionKey, inputIdInjectionKey } from '../composables/useFormField'
+import type { FormError, FormFieldInjectedOptions } from '../types/form'
+import WarningIcon from '@bitrix24/b24icons-vue/main/WarningIcon'
+
+const props = defineProps<FormFieldProps>()
+const slots = defineSlots<FormFieldSlots>()
+
 const b24ui = computed(() => formField({
   size: props.size,
   required: props.required,
   useDescription: Boolean(props.description) || !!slots.description
-}));
-const formErrors = inject("form-errors", null);
-const error = computed(() => props.error || formErrors?.value?.find((error2) => error2.name && (error2.name === props.name || props.errorPattern && error2.name.match(props.errorPattern)))?.message);
-const id = ref(useId());
-const ariaId = id.value;
-provide(inputIdInjectionKey, id);
+}))
+
+const formErrors = inject<Ref<FormError[]> | null>('form-errors', null)
+
+const error = computed(() => props.error || formErrors?.value?.find(error => error.name && (error.name === props.name || (props.errorPattern && error.name.match(props.errorPattern))))?.message)
+
+const id = ref(useId())
+// Copies id's initial value to bind aria-attributes such as aria-describedby.
+// This is required for the RadioGroup component which unsets the id value.
+const ariaId = id.value
+
+provide(inputIdInjectionKey, id)
+
 provide(formFieldInjectionKey, computed(() => ({
   error: error.value,
   name: props.name,
@@ -89,7 +93,7 @@ provide(formFieldInjectionKey, computed(() => ({
   description: props.description,
   help: props.help,
   ariaId
-})));
+}) as FormFieldInjectedOptions<FormFieldProps>))
 </script>
 
 <template>
@@ -118,7 +122,7 @@ provide(formFieldInjectionKey, computed(() => ({
     <div :class="[(label || !!slots.label || description || !!slots.description) && b24ui.container({ class: props.b24ui?.container })]">
       <slot :error="error" />
 
-      <div v-if="typeof error === 'string' && error || !!slots.error" :id="`${ariaId}-error`" :class="b24ui.error({ class: props.b24ui?.error })">
+      <div v-if="(typeof error === 'string' && error) || !!slots.error" :id="`${ariaId}-error`" :class="b24ui.error({ class: props.b24ui?.error })">
         <slot name="error" :error="error">
           <div class="flex flex-row flex-nowrap gap-0.5">
             <WarningIcon :class="b24ui.errorIcon()" />