@bitrix24/b24ui-nuxt 0.6.7 → 0.7.0

package/dist/runtime/components/DropdownMenuContent.vue

@@ -67,48 +67,48 @@ const groups = computed(
         <Component
           :is="icons.loading"
           v-if="item.loading"
-          :class="b24ui.itemLeadingIcon({ class: b24uiOverride?.itemLeadingIcon, color: item?.color, loading: true })"
+          :class="b24ui.itemLeadingIcon({ class: [b24uiOverride?.itemLeadingIcon, item.b24ui?.itemLeadingIcon], color: item?.color, loading: true })"
         />
         <Component
           :is="item.icon"
           v-else-if="item.icon"
-          :class="b24ui.itemLeadingIcon({ class: b24uiOverride?.itemLeadingIcon, color: item?.color, active })"
+          :class="b24ui.itemLeadingIcon({ class: [b24uiOverride?.itemLeadingIcon, item.b24ui?.itemLeadingIcon], color: item?.color, active })"
         />
         <B24Avatar
           v-else-if="item.avatar"
-          :size="props.b24uiOverride?.itemLeadingAvatarSize || b24ui.itemLeadingAvatarSize()"
+          :size="item.b24ui?.itemLeadingAvatarSize || props.b24uiOverride?.itemLeadingAvatarSize || b24ui.itemLeadingAvatarSize()"
           v-bind="item.avatar"
-          :class="b24ui.itemLeadingAvatar({ class: b24uiOverride?.itemLeadingAvatar, active })"
+          :class="b24ui.itemLeadingAvatar({ class: [b24uiOverride?.itemLeadingAvatar, item.b24ui?.itemLeadingAvatar], active })"
         />
       </slot>
 
-      <span v-if="getLabel(item) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" :class="b24ui.itemLabel({ class: b24uiOverride?.itemLabel, active })">
+      <span v-if="getLabel(item) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" :class="b24ui.itemLabel({ class: [b24uiOverride?.itemLabel, item.b24ui?.itemLabel], active })">
         <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item" :active="active" :index="index">
           {{ getLabel(item) }}
         </slot>
         <Component
           :is="typeof externalIcon !== 'boolean' ? externalIcon : icons.external"
           v-if="item.target === '_blank' && externalIcon !== false"
-          :class="b24ui.itemLabelExternalIcon({ class: b24uiOverride?.itemLabelExternalIcon, color: item?.color, active })"
+          :class="b24ui.itemLabelExternalIcon({ class: [b24uiOverride?.itemLabelExternalIcon, item.b24ui?.itemLabelExternalIcon], color: item?.color, active })"
         />
       </span>
 
-      <span :class="b24ui.itemTrailing({ class: b24uiOverride?.itemTrailing })">
+      <span :class="b24ui.itemTrailing({ class: [b24uiOverride?.itemTrailing, item.b24ui?.itemTrailing] })">
         <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="item" :active="active" :index="index">
           <Component
             :is="childrenIcon"
             v-if="item.children?.length"
-            :class="b24ui.itemTrailingIcon({ class: b24uiOverride?.itemTrailingIcon, color: item?.color, active })"
+            :class="b24ui.itemTrailingIcon({ class: [b24uiOverride?.itemTrailingIcon, item.b24ui?.itemTrailingIcon], color: item?.color, active })"
           />
-          <span v-else-if="item.kbds?.length" :class="b24ui.itemTrailingKbds({ class: b24uiOverride?.itemTrailingKbds })">
-            <B24Kbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="props.b24uiOverride?.itemTrailingKbdsSize || b24ui.itemTrailingKbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
+          <span v-else-if="item.kbds?.length" :class="b24ui.itemTrailingKbds({ class: [b24uiOverride?.itemTrailingKbds, item.b24ui?.itemTrailingKbds] })">
+            <B24Kbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="item.b24ui?.itemTrailingKbdsSize || props.b24uiOverride?.itemTrailingKbdsSize || b24ui.itemTrailingKbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
           </span>
         </slot>
 
         <DropdownMenu.ItemIndicator as-child>
           <Component
             :is="checkedIcon || icons.check"
-            :class="b24ui.itemTrailingIcon({ class: b24uiOverride?.itemTrailingIcon, color: item?.color })"
+            :class="b24ui.itemTrailingIcon({ class: [b24uiOverride?.itemTrailingIcon, item.b24ui?.itemTrailingIcon], color: item?.color })"
           />
         </DropdownMenu.ItemIndicator>
       </span>
@@ -119,72 +119,74 @@ const groups = computed(
     <component :is="sub ? DropdownMenu.SubContent : DropdownMenu.Content" :class="props.class" v-bind="contentProps">
       <slot name="content-top" />
 
-      <DropdownMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="b24ui.group({ class: b24uiOverride?.group })">
-        <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
-          <DropdownMenu.Label v-if="item.type === 'label'" :class="b24ui.label({ class: b24uiOverride?.label })">
-            <ReuseItemTemplate :item="item" :index="index" />
-          </DropdownMenu.Label>
-          <DropdownMenu.Separator v-else-if="item.type === 'separator'" :class="b24ui.separator({ class: b24uiOverride?.separator })" />
-          <DropdownMenu.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
-            <DropdownMenu.SubTrigger
-              as="button"
-              type="button"
+      <div role="presentation" :class="b24ui.viewport({ class: props.b24ui?.viewport })">
+        <DropdownMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="b24ui.group({ class: b24uiOverride?.group })">
+          <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
+            <DropdownMenu.Label v-if="item.type === 'label'" :class="b24ui.label({ class: [b24uiOverride?.label, item.b24ui?.label, item.class] })">
+              <ReuseItemTemplate :item="item" :index="index" />
+            </DropdownMenu.Label>
+            <DropdownMenu.Separator v-else-if="item.type === 'separator'" :class="b24ui.separator({ class: [b24uiOverride?.separator, item.b24ui?.separator, item.class] })" />
+            <DropdownMenu.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
+              <DropdownMenu.SubTrigger
+                as="button"
+                type="button"
+                :disabled="item.disabled"
+                :text-value="getLabel(item)"
+                :class="b24ui.item({ class: [b24uiOverride?.item, item.b24ui?.item, item.class], color: item?.color })"
+              >
+                <ReuseItemTemplate :item="item" :index="index" />
+              </DropdownMenu.SubTrigger>
+
+              <B24DropdownMenuContent
+                sub
+                :class="props.class"
+                :b24ui="b24ui"
+                :b24ui-override="b24uiOverride"
+                :portal="portal"
+                :items="item.children"
+                align="start"
+                :align-offset="-4"
+                :side-offset="3"
+                :label-key="labelKey"
+                :checked-icon="checkedIcon"
+                :external-icon="externalIcon"
+                v-bind="item.content"
+              >
+                <template v-for="(_, name) in proxySlots" #[name]="slotData">
+                  <slot :name="name" v-bind="slotData" />
+                </template>
+              </B24DropdownMenuContent>
+            </DropdownMenu.Sub>
+            <DropdownMenu.CheckboxItem
+              v-else-if="item.type === 'checkbox'"
+              :model-value="item.checked"
               :disabled="item.disabled"
               :text-value="getLabel(item)"
-              :class="b24ui.item({ class: b24uiOverride?.item, color: item?.color })"
+              :class="b24ui.item({ class: [b24uiOverride?.item, item.b24ui?.item, item.class], color: item?.color })"
+              @update:model-value="item.onUpdateChecked"
+              @select="item.onSelect"
             >
               <ReuseItemTemplate :item="item" :index="index" />
-            </DropdownMenu.SubTrigger>
-
-            <B24DropdownMenuContent
-              sub
-              :class="props.class"
-              :b24ui="b24ui"
-              :b24ui-override="b24uiOverride"
-              :portal="portal"
-              :items="item.children"
-              align="start"
-              :align-offset="-4"
-              :side-offset="3"
-              :label-key="labelKey"
-              :checked-icon="checkedIcon"
-              :external-icon="externalIcon"
-              v-bind="item.content"
+            </DropdownMenu.CheckboxItem>
+            <DropdownMenu.Item
+              v-else
+              as-child
+              :disabled="item.disabled"
+              :text-value="getLabel(item)"
+              @select="item.onSelect"
             >
-              <template v-for="(_, name) in proxySlots" #[name]="slotData">
-                <slot :name="name" v-bind="slotData" />
-              </template>
-            </B24DropdownMenuContent>
-          </DropdownMenu.Sub>
-          <DropdownMenu.CheckboxItem
-            v-else-if="item.type === 'checkbox'"
-            :model-value="item.checked"
-            :disabled="item.disabled"
-            :text-value="getLabel(item)"
-            :class="b24ui.item({ class: [b24uiOverride?.item, item.class], color: item?.color })"
-            @update:model-value="item.onUpdateChecked"
-            @select="item.onSelect"
-          >
-            <ReuseItemTemplate :item="item" :index="index" />
-          </DropdownMenu.CheckboxItem>
-          <DropdownMenu.Item
-            v-else
-            as-child
-            :disabled="item.disabled"
-            :text-value="getLabel(item)"
-            @select="item.onSelect"
-          >
-            <B24Link v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
-              <B24LinkBase
-                v-bind="slotProps"
-                :class="b24ui.item({ class: [b24uiOverride?.item, item.class], color: item?.color, active })"
-              >
-                <ReuseItemTemplate :item="item" :active="active" :index="index" />
-              </B24LinkBase>
-            </B24Link>
-          </DropdownMenu.Item>
-        </template>
-      </DropdownMenu.Group>
+              <B24Link v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
+                <B24LinkBase
+                  v-bind="slotProps"
+                  :class="b24ui.item({ class: [b24uiOverride?.item, item.b24ui?.item, item.class], color: item?.color, active })"
+                >
+                  <ReuseItemTemplate :item="item" :active="active" :index="index" />
+                </B24LinkBase>
+              </B24Link>
+            </DropdownMenu.Item>
+          </template>
+        </DropdownMenu.Group>
+      </div>
 
       <slot />
 

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

@@ -30,31 +30,15 @@ type DropdownMenuContentSlots<T extends ArrayOrNested<DropdownMenuItem>> = Omit<
 declare const _default: <T extends ArrayOrNested<DropdownMenuItem>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
         readonly onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
-        readonly onPointerDownOutside?: ((event: CustomEvent<{
-            originalEvent: PointerEvent;
-        }>) => any) | undefined;
-        readonly onFocusOutside?: ((event: CustomEvent<{
-            originalEvent: FocusEvent;
-        }>) => any) | undefined;
-        readonly onInteractOutside?: ((event: CustomEvent<{
-            originalEvent: PointerEvent;
-        }> | CustomEvent<{
-            originalEvent: FocusEvent;
-        }>) => any) | undefined;
+        readonly onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
+        readonly onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
+        readonly onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
         readonly onCloseAutoFocus?: ((event: Event) => any) | undefined;
     } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onEscapeKeyDown" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "onCloseAutoFocus"> & DropdownMenuContentProps<T> & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: DropdownMenuContentSlots<T>;
-    emit: ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: CustomEvent<{
-        originalEvent: PointerEvent;
-    }>) => void) & ((evt: "focusOutside", event: CustomEvent<{
-        originalEvent: FocusEvent;
-    }>) => void) & ((evt: "interactOutside", event: CustomEvent<{
-        originalEvent: PointerEvent;
-    }> | CustomEvent<{
-        originalEvent: FocusEvent;
-    }>) => void) & ((evt: "closeAutoFocus", event: Event) => void);
+    emit: ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: import("reka-ui").PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: import("reka-ui").FocusOutsideEvent) => void) & ((evt: "interactOutside", event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => void) & ((evt: "closeAutoFocus", event: Event) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/Form.vue

@@ -3,7 +3,7 @@ import theme from "#build/b24ui/form";
 </script>
 
 <script setup>
-import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed, useId, readonly } from "vue";
+import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed, useId, readonly, reactive } from "vue";
 import { useEventBus } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { formOptionsInjectionKey, formInputsInjectionKey, formBusInjectionKey, formLoadingInjectionKey } from "../composables/useFormField";
@@ -20,7 +20,7 @@ const props = defineProps({
   } },
   disabled: { type: Boolean, required: false },
   validateOnInputDelay: { type: Number, required: false, default: 300 },
-  transform: { type: Boolean, required: false, default: true },
+  transform: { type: null, required: false, default: () => true },
   attach: { type: Boolean, required: false, default: true },
   loadingAuto: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
@@ -80,9 +80,9 @@ 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();
+const dirtyFields = reactive(/* @__PURE__ */ new Set());
+const touchedFields = reactive(/* @__PURE__ */ new Set());
+const blurredFields = reactive(/* @__PURE__ */ new Set());
 function resolveErrorIds(errs) {
   return errs.map((err) => ({
     ...err,
@@ -205,6 +205,6 @@ defineExpose({
     :class="b24ui({ class: props.class })"
     @submit.prevent="onSubmitWrapper"
   >
-    <slot :errors="errors" />
+    <slot :errors="errors" :loading="loading" />
   </component>
 </template>

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

@@ -1,5 +1,5 @@
-import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, Form, InferInput, InferOutput } from '../types/form';
-export interface FormProps<S extends FormSchema> {
+import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, Form, InferInput, FormData } from '../types/form';
+export interface FormProps<S extends FormSchema, T extends boolean = true> {
     id?: string | number;
     /** Schema to validate the form state. Supports Standard Schema objects, Yup, Joi, and Superstructs. */
     schema?: S;
@@ -27,7 +27,7 @@ export interface FormProps<S extends FormSchema> {
      * If true, schema transformations will be applied to the state on submit.
      * @defaultValue `true`
      */
-    transform?: boolean;
+    transform?: T;
     /**
      * If true, this form will attach to its parent Form (if any) and validate at the same time.
      * @defaultValue `true`
@@ -40,26 +40,27 @@ export interface FormProps<S extends FormSchema> {
      */
     loadingAuto?: boolean;
     class?: any;
-    onSubmit?: ((event: FormSubmitEvent<InferOutput<S>>) => void | Promise<void>) | (() => void | Promise<void>);
+    onSubmit?: ((event: FormSubmitEvent<FormData<S, T>>) => void | Promise<void>) | (() => void | Promise<void>);
 }
-export interface FormEmits<S extends FormSchema> {
-    (e: 'submit', payload: FormSubmitEvent<InferOutput<S>>): void;
+export interface FormEmits<S extends FormSchema, T extends boolean = true> {
+    (e: 'submit', payload: FormSubmitEvent<FormData<S, T>>): void;
     (e: 'error', payload: FormErrorEvent): void;
 }
 export interface FormSlots {
     default(props?: {
         errors: FormError[];
+        loading: boolean;
     }): any;
 }
-declare const _default: <S extends FormSchema>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+declare const _default: <S extends FormSchema, T extends boolean = true>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
         readonly onError?: ((payload: FormErrorEvent) => any) | undefined;
-        readonly onSubmit?: ((payload: FormSubmitEvent<InferOutput<S>>) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onError" | "onSubmit"> & FormProps<S> & Partial<{}>> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<Form<InferInput<S>>>): void;
+        readonly onSubmit?: ((payload: FormSubmitEvent<FormData<S, T>>) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onSubmit" | "onError"> & FormProps<S, T> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<Form<S>>): void;
     attrs: any;
     slots: FormSlots;
-    emit: FormEmits<S>;
+    emit: FormEmits<S, T>;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/FormField.vue

@@ -52,7 +52,7 @@ provide(formFieldInjectionKey, computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
+  <Primitive :as="as" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
     <div :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
       <div v-if="label || !!slots.label" :class="b24ui.labelWrapper({ class: props.b24ui?.labelWrapper })">
         <Label :for="id" :class="b24ui.label({ class: props.b24ui?.label })">
@@ -79,17 +79,17 @@ provide(formFieldInjectionKey, computed(() => ({
 
       <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">
+          <div :class="b24ui.errorWrapper({ class: props.b24ui?.errorWrapper })">
             <WarningIcon :class="b24ui.errorIcon()" />
             <div>{{ error }}</div>
           </div>
         </slot>
       </div>
-      <p v-else-if="help || !!slots.help" :class="b24ui.help({ class: props.b24ui?.help })">
+      <div v-else-if="help || !!slots.help" :class="b24ui.help({ class: props.b24ui?.help })">
         <slot name="help" :help="help">
           {{ help }}
         </slot>
-      </p>
+      </div>
     </div>
   </Primitive>
 </template>

package/dist/runtime/components/Input.vue

@@ -5,6 +5,7 @@ import theme from "#build/b24ui/input";
 <script setup>
 import { ref, computed, onMounted } from "vue";
 import { Primitive } from "reka-ui";
+import { useVModel } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useButtonGroup } from "../composables/useButtonGroup";
 import { useComponentIcons } from "../composables/useComponentIcons";
@@ -33,6 +34,9 @@ const props = defineProps({
   tag: { type: String, required: false },
   tagColor: { type: null, required: false },
   highlight: { type: Boolean, required: false },
+  modelValue: { type: null, required: false },
+  defaultValue: { type: null, required: false },
+  modelModifiers: { type: Object, required: false },
   class: { type: null, required: false },
   b24ui: { type: null, required: false },
   icon: { type: [Function, Object], required: false },
@@ -43,7 +47,7 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:modelValue", "blur", "change"]);
 const slots = defineSlots();
-const [modelValue, modelModifiers] = defineModel({ type: [String, Number, null] });
+const modelValue = useVModel(props, "modelValue", emits, { defaultValue: props.defaultValue });
 const appConfig = useAppConfig();
 const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, emitFormFocus, ariaAttrs } = useFormField(props, { deferInputValidation: true });
 const { orientation, size: buttonGroupSize } = useButtonGroup(props);
@@ -69,29 +73,29 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.input |
 }));
 const inputRef = ref(null);
 function updateInput(value) {
-  if (modelModifiers.trim) {
+  if (props.modelModifiers?.trim) {
     value = value?.trim() ?? null;
   }
-  if (modelModifiers.number || props.type === "number") {
+  if (props.modelModifiers?.number || props.type === "number") {
     value = looseToNumber(value);
   }
-  if (modelModifiers.nullify) {
+  if (props.modelModifiers?.nullify) {
     value ||= null;
   }
   modelValue.value = value;
   emitFormInput();
 }
 function onInput(event) {
-  if (!modelModifiers.lazy) {
+  if (!props.modelModifiers?.lazy) {
     updateInput(event.target.value);
   }
 }
 function onChange(event) {
   const value = event.target.value;
-  if (modelModifiers.lazy) {
+  if (props.modelModifiers?.lazy) {
     updateInput(value);
   }
-  if (modelModifiers.trim) {
+  if (props.modelModifiers?.trim) {
     event.target.value = value.trim();
   }
   emitFormChange();
@@ -117,7 +121,7 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="as" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
+  <Primitive :as="as" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
     <div v-if="isTag" :class="b24ui.tag({ class: props.b24ui?.tag })">
       {{ props.tag }}
     </div>

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

@@ -2,9 +2,9 @@ import type { InputHTMLAttributes } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/input';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
-import type { ComponentConfig } from '../types/utils';
+import type { AcceptableValue, ComponentConfig } from '../types/utils';
 type Input = ComponentConfig<typeof theme, AppConfig, 'input'>;
-export interface InputProps extends UseComponentIconsProps {
+export interface InputProps<T extends AcceptableValue = AcceptableValue> extends UseComponentIconsProps {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -78,11 +78,20 @@ export interface InputProps extends UseComponentIconsProps {
      * @defaultValue false
      */
     highlight?: boolean;
+    modelValue?: T;
+    defaultValue?: T;
+    modelModifiers?: {
+        string?: boolean;
+        number?: boolean;
+        trim?: boolean;
+        lazy?: boolean;
+        nullify?: boolean;
+    };
     class?: any;
     b24ui?: Input['slots'];
 }
-export interface InputEmits {
-    (e: 'update:modelValue', payload: string | number): void;
+export interface InputEmits<T extends AcceptableValue = AcceptableValue> {
+    (e: 'update:modelValue', payload: T): void;
     (e: 'blur', event: FocusEvent): void;
     (e: 'change', event: Event): void;
 }
@@ -91,30 +100,22 @@ export interface InputSlots {
     default(props?: {}): any;
     trailing(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<InputProps & {
-    modelValue?: string | number | null;
-}, {
-    inputRef: import("vue").Ref<HTMLInputElement | null, HTMLInputElement | null>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | number | null | undefined) => any;
-} & {
-    blur: (event: FocusEvent) => any;
-    change: (event: Event) => any;
-    "update:modelValue": (payload: string | number) => any;
-}, string, import("vue").PublicProps, Readonly<InputProps & {
-    modelValue?: string | number | null;
-}> & Readonly<{
-    onBlur?: ((event: FocusEvent) => any) | undefined;
-    onChange?: ((event: Event) => any) | undefined;
-    "onUpdate:modelValue"?: ((payload: string | number) => any) | undefined;
-}>, {
-    type: import("vue").InputTypeHTMLAttribute;
-    autocomplete: string;
-    autofocusDelay: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, InputSlots>;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
+declare const _default: <T extends AcceptableValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onBlur?: ((event: FocusEvent) => any) | undefined;
+        readonly onChange?: ((event: Event) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((payload: T) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onBlur" | "onChange" | "onUpdate:modelValue"> & InputProps<T> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{
+        inputRef: import("vue").Ref<HTMLInputElement | null, HTMLInputElement | null>;
+    }>): void;
+    attrs: any;
+    slots: InputSlots;
+    emit: InputEmits<T>;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
 };
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};