@bitrix24/b24ui-nuxt 0.5.8 → 0.5.10

package/dist/runtime/components/FormField.vue

@@ -1,87 +1,83 @@
-<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>
+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>
 
-<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>()
-
+<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();
 const b24ui = computed(() => formField({
   size: props.size,
   required: props.required,
   useDescription: Boolean(props.description) || !!slots.description
-}))
-
-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)
-
+}));
+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);
 provide(formFieldInjectionKey, computed(() => ({
   error: error.value,
   name: props.name,
@@ -93,7 +89,7 @@ provide(formFieldInjectionKey, computed(() => ({
   description: props.description,
   help: props.help,
   ariaId
-}) as FormFieldInjectedOptions<FormFieldProps>))
+})));
 </script>
 
 <template>
@@ -122,7 +118,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()" />

package/dist/runtime/components/FormField.vue.d.ts

@@ -0,0 +1,282 @@
+import type { VariantProps } from 'tailwind-variants';
+declare const formField: import("tailwind-variants").TVReturnType<{
+    useDescription: {
+        true: {
+            wrapper: string;
+        };
+        false: {
+            wrapper: string;
+        };
+    };
+    size: {
+        xs: {
+            root: string;
+            errorIcon: string;
+        };
+        sm: {
+            root: string;
+            errorIcon: string;
+        };
+        md: {
+            root: string;
+            errorIcon: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+    required: {
+        true: {
+            label: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    labelWrapper: string;
+    label: string;
+    hint: string;
+    container: string;
+    description: string;
+    error: string;
+    errorIcon: string;
+    help: string;
+}, undefined, {
+    useDescription: {
+        true: {
+            wrapper: string;
+        };
+        false: {
+            wrapper: string;
+        };
+    };
+    size: {
+        xs: {
+            root: string;
+            errorIcon: string;
+        };
+        sm: {
+            root: string;
+            errorIcon: string;
+        };
+        md: {
+            root: string;
+            errorIcon: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+    required: {
+        true: {
+            label: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    labelWrapper: string;
+    label: string;
+    hint: string;
+    container: string;
+    description: string;
+    error: string;
+    errorIcon: string;
+    help: string;
+}, import("tailwind-variants").TVReturnType<{
+    useDescription: {
+        true: {
+            wrapper: string;
+        };
+        false: {
+            wrapper: string;
+        };
+    };
+    size: {
+        xs: {
+            root: string;
+            errorIcon: string;
+        };
+        sm: {
+            root: string;
+            errorIcon: string;
+        };
+        md: {
+            root: string;
+            errorIcon: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+    required: {
+        true: {
+            label: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    labelWrapper: string;
+    label: string;
+    hint: string;
+    container: string;
+    description: string;
+    error: string;
+    errorIcon: string;
+    help: string;
+}, undefined, {
+    useDescription: {
+        true: {
+            wrapper: string;
+        };
+        false: {
+            wrapper: string;
+        };
+    };
+    size: {
+        xs: {
+            root: string;
+            errorIcon: string;
+        };
+        sm: {
+            root: string;
+            errorIcon: string;
+        };
+        md: {
+            root: string;
+            errorIcon: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+    required: {
+        true: {
+            label: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    labelWrapper: string;
+    label: string;
+    hint: string;
+    container: string;
+    description: string;
+    error: string;
+    errorIcon: string;
+    help: string;
+}, import("tailwind-variants").TVReturnType<{
+    useDescription: {
+        true: {
+            wrapper: string;
+        };
+        false: {
+            wrapper: string;
+        };
+    };
+    size: {
+        xs: {
+            root: string;
+            errorIcon: string;
+        };
+        sm: {
+            root: string;
+            errorIcon: string;
+        };
+        md: {
+            root: string;
+            errorIcon: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+    required: {
+        true: {
+            label: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    labelWrapper: string;
+    label: string;
+    hint: string;
+    container: string;
+    description: string;
+    error: string;
+    errorIcon: string;
+    help: string;
+}, undefined, unknown, unknown, undefined>>>;
+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;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<FormFieldProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<FormFieldProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Readonly<FormFieldSlots> & FormFieldSlots>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};