@bitrix24/b24ui-nuxt 0.5.11 → 0.6.0

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;
+    };
+};

package/dist/runtime/components/Input.vue

@@ -1,144 +1,60 @@
-<script lang="ts">
-import type { InputHTMLAttributes } from 'vue'
-import type { VariantProps } from 'tailwind-variants'
-import type { AppConfig } from '@nuxt/schema'
-import _appConfig from '#build/app.config'
-import theme from '#build/b24ui/input'
-import type { UseComponentIconsProps } from '../composables/useComponentIcons'
-import { tv } from '../utils/tv'
-import type { AvatarProps } from '../types'
-import type { PartialString } from '../types/utils'
-
-const appConfigInput = _appConfig as AppConfig & { b24ui: { input: Partial<typeof theme> } }
-
-const input = tv({ extend: tv(theme), ...(appConfigInput.b24ui?.input || {}) })
-
-type InputVariants = VariantProps<typeof input>
-
-export interface InputProps extends UseComponentIconsProps {
-  /**
-   * The element or component this component should render as.
-   * @defaultValue 'div'
-   */
-  as?: any
-  id?: string
-  name?: string
-  /**
-   * @defaultValue 'text'
-   */
-  type?: InputHTMLAttributes['type']
-  /**
-   * The placeholder text when the input is empty.
-   */
-  placeholder?: string
-  /**
-   * @defaultValue 'primary'
-   */
-  color?: InputVariants['color']
-  /**
-   * @defaultValue 'md'
-   */
-  size?: InputVariants['size']
-  /**
-   * Removes padding from input
-   * @defaultValue false
-   */
-  noPadding?: boolean
-  /**
-   * Removes all borders (rings)
-   * @defaultValue false
-   */
-  noBorder?: boolean
-  /**
-   * Removes all borders (rings) except the bottom one
-   * @defaultValue false
-   */
-  underline?: boolean
-  /**
-   * Rounds the corners of the button
-   * @defaultValue false
-   */
-  rounded?: boolean
-  /**
-   * @defaultValue false
-   */
-  required?: boolean
-  /**
-   * @defaultValue 'off'
-   */
-  autocomplete?: InputHTMLAttributes['autocomplete']
-  /**
-   * @defaultValue false
-   */
-  autofocus?: boolean
-  /**
-   * @defaultValue 0
-   */
-  autofocusDelay?: number
-  /**
-   * @defaultValue false
-   */
-  disabled?: boolean
-  tag?: string
-  /**
-   * @defaultValue 'primary'
-   */
-  tagColor?: InputVariants['tagColor']
-  /**
-   * Highlight the ring color like a focus state
-   * @defaultValue false
-   */
-  highlight?: boolean
-  class?: any
-  b24ui?: PartialString<typeof input.slots>
-}
-
-export interface InputEmits {
-  (e: 'update:modelValue', payload: string | number): void
-  (e: 'blur', event: FocusEvent): void
-  (e: 'change', event: Event): void
-}
-
-export interface InputSlots {
-  leading(props?: {}): any
-  default(props?: {}): any
-  trailing(props?: {}): any
-}
+<script>
+import _appConfig from "#build/app.config";
+import theme from "#build/b24ui/input";
+import { tv } from "../utils/tv";
+const appConfigInput = _appConfig;
+const input = tv({ extend: tv(theme), ...appConfigInput.b24ui?.input || {} });
 </script>
 
-<script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
-import { Primitive } from 'reka-ui'
-import { useButtonGroup } from '../composables/useButtonGroup'
-import { useComponentIcons } from '../composables/useComponentIcons'
-import { useFormField } from '../composables/useFormField'
-import { looseToNumber } from '../utils'
-import B24Avatar from './Avatar.vue'
-
-defineOptions({ inheritAttrs: false })
-
-const props = withDefaults(defineProps<InputProps>(), {
-  type: 'text',
-  autocomplete: 'off',
-  autofocusDelay: 0
-})
-const emits = defineEmits<InputEmits>()
-const slots = defineSlots<InputSlots>()
-
-const [modelValue, modelModifiers] = defineModel<string | number | null>()
-
-const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, emitFormFocus, ariaAttrs } = useFormField<InputProps>(props, { deferInputValidation: true })
-const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
-const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
-
-const inputSize = computed(() => buttonGroupSize.value || formGroupSize.value)
-
+<script setup>
+import { ref, computed, onMounted } from "vue";
+import { Primitive } from "reka-ui";
+import { useButtonGroup } from "../composables/useButtonGroup";
+import { useComponentIcons } from "../composables/useComponentIcons";
+import { useFormField } from "../composables/useFormField";
+import { looseToNumber } from "../utils";
+import B24Avatar from "./Avatar.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false },
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  type: { type: null, required: false, default: "text" },
+  placeholder: { type: String, required: false },
+  color: { type: null, required: false },
+  size: { type: null, required: false },
+  noPadding: { type: Boolean, required: false },
+  noBorder: { type: Boolean, required: false },
+  underline: { type: Boolean, required: false },
+  rounded: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
+  autocomplete: { type: null, required: false, default: "off" },
+  autofocus: { type: Boolean, required: false },
+  autofocusDelay: { type: Number, required: false, default: 0 },
+  disabled: { type: Boolean, required: false },
+  tag: { type: String, required: false },
+  tagColor: { type: null, required: false },
+  highlight: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  b24ui: { type: null, required: false },
+  icon: { type: [Function, Object], required: false },
+  avatar: { type: Object, required: false },
+  loading: { type: Boolean, required: false },
+  trailing: { type: Boolean, required: false },
+  trailingIcon: { type: [Function, Object], required: false }
+});
+const emits = defineEmits(["update:modelValue", "blur", "change"]);
+const slots = defineSlots();
+const [modelValue, modelModifiers] = defineModel({ type: [String, Number, null] });
+const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, emitFormFocus, ariaAttrs } = useFormField(props, { deferInputValidation: true });
+const { orientation, size: buttonGroupSize } = useButtonGroup(props);
+const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
+const inputSize = computed(() => buttonGroupSize.value || formGroupSize.value);
 const isTag = computed(() => {
-  return props.tag
-})
-
+  return props.tag;
+});
 const b24ui = computed(() => input({
-  type: props.type as InputVariants['type'],
+  type: props.type,
   color: color.value,
   size: inputSize?.value,
   loading: props.loading,
@@ -151,70 +67,54 @@ const b24ui = computed(() => input({
   leading: Boolean(isLeading.value || !!props.avatar || !!slots.leading),
   trailing: Boolean(isTrailing.value || !!slots.trailing),
   buttonGroup: orientation.value
-}))
-
-const inputRef = ref<HTMLInputElement | null>(null)
-
-// Custom function to handle the v-model properties
-function updateInput(value: string | null) {
+}));
+const inputRef = ref(null);
+function updateInput(value) {
   if (modelModifiers.trim) {
-    value = value?.trim() ?? null
+    value = value?.trim() ?? null;
   }
-
-  if (modelModifiers.number || props.type === 'number') {
-    value = looseToNumber(value)
+  if (modelModifiers.number || props.type === "number") {
+    value = looseToNumber(value);
   }
-
   if (modelModifiers.nullify) {
-    value ||= null
+    value ||= null;
   }
-
-  modelValue.value = value
-  emitFormInput()
+  modelValue.value = value;
+  emitFormInput();
 }
-
-function onInput(event: Event) {
+function onInput(event) {
   if (!modelModifiers.lazy) {
-    updateInput((event.target as HTMLInputElement).value)
+    updateInput(event.target.value);
   }
 }
-
-function onChange(event: Event) {
-  const value = (event.target as HTMLInputElement).value
-
+function onChange(event) {
+  const value = event.target.value;
   if (modelModifiers.lazy) {
-    updateInput(value)
+    updateInput(value);
   }
-
-  // Update trimmed input so that it has same behavior as native input https://github.com/vuejs/core/blob/5ea8a8a4fab4e19a71e123e4d27d051f5e927172/packages/runtime-dom/src/directives/vModel.ts#L63
   if (modelModifiers.trim) {
-    (event.target as HTMLInputElement).value = value.trim()
+    event.target.value = value.trim();
   }
-
-  emitFormChange()
-  emits('change', event)
+  emitFormChange();
+  emits("change", event);
 }
-
-function onBlur(event: FocusEvent) {
-  emitFormBlur()
-  emits('blur', event)
+function onBlur(event) {
+  emitFormBlur();
+  emits("blur", event);
 }
-
 function autoFocus() {
   if (props.autofocus) {
-    inputRef.value?.focus()
+    inputRef.value?.focus();
   }
 }
-
 onMounted(() => {
   setTimeout(() => {
-    autoFocus()
-  }, props.autofocusDelay)
-})
-
+    autoFocus();
+  }, props.autofocusDelay);
+});
 defineExpose({
   inputRef
-})
+});
 </script>
 
 <template>
@@ -252,7 +152,7 @@ defineExpose({
         />
         <B24Avatar
           v-else-if="!!avatar"
-          :size="((props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()) as AvatarProps['size'])"
+          :size="props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()"
           v-bind="avatar"
           :class="b24ui.leadingAvatar({ class: props.b24ui?.leadingAvatar })"
         />